Widget/habit tracker

background/cache.ts

@@ -51,6 +51,24 @@ export function setupCaching() {
 		const isDev = import.meta.env.DEV
 
 		if (!isDev) {
+			registerRoute(
+				({ url }) =>
+					url.href === 'https://cdn.widgetify.ir/fonts/remote-fonts.css',
+				new StaleWhileRevalidate({
+					cacheName: 'remote-fonts-css-cache',
+					plugins: [
+						new CacheableResponsePlugin({
+							statuses: [0, 200],
+						}),
+						new ExpirationPlugin({
+							maxEntries: 1,
+							maxAgeSeconds: 2 * 60,
+							purgeOnQuotaError: true,
+						}),
+					],
+				})
+			)
+
 			registerRoute(
 				({ request }) =>
 					request.destination === 'script' || request.destination === 'style',

src/common/constant/config.key.ts

@@ -1,4 +1,4 @@
 export enum ConfigKey {
-	VERSION_NAME = 'ساحل',
+	VERSION_NAME = 'مورچه',
 	WIG_COIN_ICON = 'https://cdn.widgetify.ir/extension/wig-icon.png',
 }

src/common/constant/habit-options.ts

@@ -0,0 +1,53 @@
+export const HABIT_UNIT_OPTIONS = [
+	{ value: 'TIMES', label: 'دفعه' },
+	{ value: 'MINUTES', label: 'دقیقه' },
+	{ value: 'HOURS', label: 'ساعت' },
+	{ value: 'PAGES', label: 'صفحه' },
+	{ value: 'GLASSES', label: 'لیوان' },
+	{ value: 'CUSTOM', label: 'دلخواه' },
+]
+
+export const HABIT_COMPARISON_OPTIONS = [
+	{ value: 'AT_LEAST', label: 'حداقل' },
+	{ value: 'AT_MOST', label: 'حداکثر' },
+	{ value: 'EXACT', label: 'دقیقا' },
+]
+
+export const HABIT_FREQUENCY_OPTIONS = [
+	{ value: 'DAILY', label: 'روزانه' },
+	{ value: 'WEEKLY', label: 'هفتگی' },
+	{ value: 'MONTHLY', label: 'ماهانه' },
+]
+
+export const HABIT_COLOR_PRESETS = [
+	'#ef4444',
+	'#f97316',
+	'#f59e0b',
+	'#22c55e',
+	'#06b6d4',
+	'#3b82f6',
+	'#8b5cf6',
+	'#ec4899',
+]
+
+export const HABIT_EMOJI_PRESETS = [
+	'🎯',
+	'💧',
+	'📖',
+	'🏃',
+	'🧘',
+	'🥗',
+	'😴',
+	'✍️',
+	'💪',
+	'🚭',
+]
+
+export const HABIT_UNIT_STEP: Record<string, number> = {
+	TIMES: 1,
+	GLASSES: 1,
+	PAGES: 1,
+	MINUTES: 5,
+	HOURS: 1,
+	CUSTOM: 1,
+}

src/common/constant/store.key.ts

@@ -86,4 +86,5 @@ export interface StorageKV {
 	[key: `removed_notification_${string}`]: string
 	selected_engine: string | null
 	widget_tab: string
+	yadkar_tab: string
 }

src/components/UpdateReleaseNotesModal.tsx

@@ -1,67 +1,7 @@
 import { useEffect, useState } from 'react'
-import {
-	RiBug2Line,
-	RiCheckboxCircleLine,
-	RiThumbUpLine,
-	RiSparklingLine,
-} from 'react-icons/ri'
+import { RiThumbUpLine } from 'react-icons/ri'
 import { Button } from './button/button'
 import Modal from './modal'
-import { ConfigKey } from '@/common/constant/config.key'
-
-type MediaContent = {
-	type: 'image' | 'video'
-	url: string
-	caption?: string
-}
-
-type ReleaseNote = {
-	type: 'feature' | 'bugfix' | 'improvement' | 'info'
-	title: string
-	description: string
-	media?: MediaContent[]
-}
-
-const VERSION_NAME = ConfigKey.VERSION_NAME
-
-const releaseNotes: ReleaseNote[] = [
-	{
-		type: 'feature',
-		title: 'امکان پیشنمایش در فروشگاه',
-		description:
-			'الان دیگه قبل اینکه از فروشگاه والپیپر یا هرچیز دیگه ای بخری، میتونی پیشنمایش داشته باشی🐳',
-	},
-	{
-		type: 'feature',
-		title: 'مدیریت اعلانات',
-		description: '',
-	},
-	{
-		type: 'improvement',
-		title: 'بهبود ظاهری فروشگاه',
-		description: '',
-	},
-	{
-		type: 'improvement',
-		title: 'بهبود قسمت سرچ های پیشنهادی',
-		description: '',
-	},
-	{
-		type: 'improvement',
-		title: 'بهبود برنامک ها',
-		description: '',
-	},
-	{
-		type: 'improvement',
-		description: '',
-		title: 'بهبود عملکرد کلی',
-	},
-	{
-		type: 'bugfix',
-		description: '',
-		title: 'رفع مشکلات گزارش شده',
-	},
-]
 
 type UpdateReleaseNotesModalProps = {
 	isOpen: boolean
@@ -75,10 +15,10 @@ export const UpdateReleaseNotesModal = ({
 	counterValue,
 }: UpdateReleaseNotesModalProps) => {
 	const [counter, setCounter] = useState<number>(0)
-
+	const videoRef = useRef<HTMLVideoElement>(null)
 	useEffect(() => {
 		if (isOpen && counterValue !== null) {
-			setCounter(counterValue === null ? 2 : counterValue)
+			setCounter(counterValue === null ? 10 : counterValue)
 			const interval = setInterval(() => {
 				setCounter((prev) => {
 					if (prev <= 1) {
@@ -94,92 +34,80 @@ export const UpdateReleaseNotesModal = ({
 		}
 	}, [isOpen])
 
-	const getTypeIcon = (note: ReleaseNote) => {
-		switch (note.type) {
-			case 'feature':
-				return <RiSparklingLine className="text-primary" size={18} />
-			case 'bugfix':
-				return <RiBug2Line className="text-red-500" size={18} />
-			case 'improvement':
-				return <RiCheckboxCircleLine className="text-green-500" size={18} />
-			default:
-				return <RiSparklingLine className="text-muted" size={18} />
+	useEffect(() => {
+		if (isOpen && videoRef.current) {
+			videoRef.current.play().catch(() => {})
 		}
-	}
+	}, [isOpen])
 
 	return (
 		<Modal
 			isOpen={isOpen}
 			onClose={onClose}
-			title={'🏖️ نسخه جدید نصب شد!'}
+			title={'🎯 نسخه جدید، آمادست!'}
 			size="lg"
 			direction="rtl"
 			closeOnBackdropClick={false}
-			showCloseButton={false}
 		>
-			<div className="flex flex-col max-h-[85vh]">
-				<div className="relative overflow-hidden border-b border-base-300/20 rounded-2xl h-62">
-					<div
-						className="absolute inset-0 scale-105 bg-top bg-no-repeat bg-contain animate-pan"
-						style={{
-							backgroundImage:
-								'url(http://cdn.widgetify.ir/extension/sahel-update.jpg)',
-							maskImage:
-								'linear-gradient(to bottom, black 65%, transparent 100%)',
-							WebkitMaskImage:
-								'linear-gradient(to bottom, black 65%, transparent 100%)',
-						}}
-					/>
+			<div className="flex flex-col max-h-[80vh]">
+				<div className="flex items-center justify-between px-1 pb-1">
+					<div className="flex flex-col">
+						<p className="mt-1 text-xs font-medium text-muted">
+							آپدیت جدید، با ویجت جدید رسید! (نسخه آزمایشی)
+						</p>
+					</div>
 				</div>
 
-				<div className="flex-1 p-2 space-y-1 overflow-y-auto max-h-40">
-					<div className="flex flex-col gap-1">
-						{releaseNotes.map((note, index) => (
-							<div
-								key={index}
-								className="flex flex-col gap-2 px-2 py-1 border bg-base-200/10 border-base-300/20 rounded-2xl animate-in fade-in slide-in-from-bottom-3"
-								style={{ animationDelay: `${index * 50}ms` }}
-							>
-								<div className="flex items-center justify-between">
-									<div className="flex items-center gap-2">
-										<div className="w-1 h-3 rounded-full bg-primary" />
-										<h3 className="text-xs font-black tracking-wider uppercase text-content">
-											{note.title}
-										</h3>
-									</div>
-									{getTypeIcon(note)}
-								</div>
-								<p className="text-[10px] leading-relaxed text-base-content/80  pr-1">
-									{note.description}
-								</p>
-							</div>
-						))}
+				<div className="pb-2 space-y-4 overflow-y-auto h-110">
+					<div className="relative w-full overflow-hidden border shadow-inner rounded-2xl bg-base-300/20 border-base-300">
+						<img
+							src={'https://cdn.widgetify.ir/extension/habit_tracker.png'}
+							className="object-center w-full max-h-70 rounded-2xl"
+						/>
+					</div>
+
+					<div className="p-2 space-y-3 border rounded-2xl bg-base-300/20 border-base-300/10">
+						<div className="flex items-center gap-2">
+							<h3 className="text-sm font-black text-content">
+								ویجت عادت‌ها (Habit Tracker) اضافه شد!
+							</h3>
+						</div>
+
+						<p className="text-xs leading-6 text-muted">
+							از امروز می‌تونی{' '}
+							<span className="font-bold text-content">
+								عادت‌های روزانه‌ات رو ثبت و دنبال کنی
+							</span>
+							. هر روز که به هدفت پایبند باشی، زنجیره عادتت کامل‌تر میشه و
+							پیشرفتت همیشه جلوی چشمت خواهد بود.
+						</p>
+
+						<p className="text-xs leading-6 text-muted">
+							از قسمت{' '}
+							<span className="font-bold text-content">مدیریت ویجت‌ها</span>{' '}
+							می‌تونی این ویجت رو فعال کنی یا از ویجت{' '}
+							<span className="font-bold text-content">یادکار</span> استفاده
+							کنی.
+						</p>
 					</div>
 
-					<div className="flex items-center justify-center p-2 text-muted">
-						<RiThumbUpLine className="ml-2" size={16} />
+					<div className="flex items-center justify-center gap-2 py-1 text-muted">
+						<RiThumbUpLine size={14} />
 						<span className="text-xs">دمت گرم که همراه مایی</span>
 					</div>
 				</div>
-			</div>
-			<div className="flex items-center justify-between p-2 border-t border-base-300/10 bg-base-200/40">
-				<a
-					href="https://ble.ir/widgetify"
-					target="_blank"
-					rel="noreferrer"
-					className="text-[10px] border-none outline-none ring-0 font-black text-muted hover:text-content transition-all underline decoration-dotted underline-offset-4"
-				>
-					کانال و گروه ما در بله
-				</a>
-				<Button
-					size="sm"
-					onClick={onClose}
-					disabled={counter > 0}
-					className="min-w-[130px] h-11 !rounded-2xl font-black text-xs shadow-lg shadow-primary/10 disabled:shadow-none active:scale-90 transition-all disabled:text-base-content/30"
-					isPrimary={true}
-				>
-					{counter > 0 ? `یه چند لحظه صبر کن (${counter})` : 'فهمیدم'}
-				</Button>
+
+				<div className="flex items-center justify-end w-full px-4 py-2 border border-t border-base-300/10 bg-base-200/40 rounded-3xl">
+					<Button
+						size="sm"
+						onClick={onClose}
+						disabled={counter > 0}
+						className="min-w-32.5 h-11 rounded-2xl! self-end font-black text-xs shadow-lg shadow-primary/10 disabled:shadow-none active:scale-90 transition-all disabled:text-base-content/30"
+						isPrimary={true}
+					>
+						{counter > 0 ? `یه چند لحظه صبر کن (${counter})` : 'فهمیدم'}
+					</Button>
+				</div>
 			</div>
 		</Modal>
 	)

src/context/widget-visibility.context.tsx

@@ -19,6 +19,7 @@ import { useAuth } from './auth.context'
 import { CurrencyProvider } from './currency.context'
 import { showToast } from '@/common/toast'
 import { YadkarWidget } from '@/layouts/widgets/yadkar/yadkar'
+import { HabitsLayout } from '@/layouts/widgets/habit/habits.layout'
 
 export enum WidgetKeys {
 	comboWidget = 'comboWidget',
@@ -33,6 +34,7 @@ export enum WidgetKeys {
 	wigiPad = 'wigiPad',
 	network = 'network',
 	yadKar = 'yadKar',
+	HabitTracker = 'HabitTracker',
 }
 export interface WidgetItem {
 	id: WidgetKeys
@@ -45,6 +47,7 @@ export interface WidgetItem {
 	disabled?: boolean
 	soon?: boolean
 	popular?: boolean
+	isBeta?: boolean
 }
 
 export const widgetItems: WidgetItem[] = [
@@ -60,11 +63,11 @@ export const widgetItems: WidgetItem[] = [
 	{
 		id: WidgetKeys.yadKar,
 		emoji: '📒',
-		label: 'یادکار (وظایف و یادداشت)',
+		label: 'یادکار (وظایف/یادداشت/عادت‌ها)',
 		order: 0,
 		node: <YadkarWidget />,
 		canToggle: true,
-		isNew: true,
+		isNew: false,
 	},
 	{
 		id: WidgetKeys.tools,
@@ -126,6 +129,16 @@ export const widgetItems: WidgetItem[] = [
 		canToggle: true,
 		isNew: false,
 	},
+	{
+		id: WidgetKeys.HabitTracker,
+		emoji: '🎯',
+		label: 'عادات',
+		order: 10,
+		node: <HabitsLayout />,
+		canToggle: true,
+		isNew: true,
+		isBeta: true,
+	},
 ]
 
 interface WidgetVisibilityContextType {

src/layouts/setting/tabs/wallpapers/hooks/use-wallpaper-apply.tsx

@@ -60,7 +60,6 @@ function applyWallpaper(wallpaper: StoredWallpaper) {
 		})
 
 		video.onerror = () => {
-			console.error('Video error:', video.error)
 			document.body.style.backgroundColor = '#000'
 		}
 		video.onloadeddata = () => {