feat: unify empty state components and improve UI consistency

src/context/page.context.tsx

@@ -1,3 +1,4 @@
+import Analytics from '@/analytics'
 import { listenEvent } from '@/common/utils/call-event'
 import type React from 'react'
 import { createContext, useContext, useState } from 'react'
@@ -19,6 +20,7 @@ export function PageProvider({ children }: { children: React.ReactNode }) {
 	useEffect(() => {
 		const event = listenEvent('go_to_page', (p) => {
 			setPage(p)
+			Analytics.event(`goto_page_${p}`)
 		})
 		return () => {
 			event()

src/layouts/mini-apps/mini-apps.layout.tsx

@@ -27,6 +27,8 @@ export function MiniAppsLayout() {
 	const loadMoreRef = useRef<HTMLDivElement | null>(null)
 
 	useEffect(() => {
+		Analytics.event('mini_apps_page')
+
 		const event = listenEvent('toggle_miniApp_fullScreen', (newState) => {
 			setIsFullScreen(newState)
 		})

src/layouts/navbar/navbar.layout.tsx

@@ -157,7 +157,7 @@ export function NavbarLayout(): JSX.Element {
 			)}
 
 			<div
-				className={`fixed z-60 -translate-x-1/2 left-1/2 w-full px-2 md:px-4 lg:px-4 max-w-[1080px] transition-all ease-[cubic-bezier(0.23,1,0.32,1)] 
+				className={`fixed z-60  -translate-x-1/2 left-1/2 w-full px-2 md:px-8 lg:px-4 max-w-[1080px] transition-all ease-[cubic-bezier(0.23,1,0.32,1)] 
 					${
 						isVisible
 							? 'bottom-2 opacity-100 scale-100'

src/layouts/search/browser-bookmark/browser-bookmark.tsx

@@ -69,9 +69,9 @@ export function BrowserBookmark() {
 						className="flex items-center cursor-pointer group "
 						onClick={() => onClickToExplorer()}
 					>
-						<div className="relative flex items-center justify-center w-fit px-1 gap-1 h-6 p-0.5 rounded-xl bg-base-300 group-hover:scale-95 transition-transform">
+						<div className="relative flex items-center justify-center w-fit px-1.5 gap-1 h-6 p-0.5 rounded-xl bg-base-300 group-hover:scale-95 transition-transform">
 							<Icon
-								name="outlineGlobe"
+								name="globe"
 								size={14}
 								className="text-base-content/60"
 							/>
@@ -89,7 +89,7 @@ export function BrowserBookmark() {
 						onClick={handleTogglePopover}
 					>
 						<div
-							className={`relative flex items-center justify-center w-fit px-1 gap-1 h-6 p-0.5 rounded-xl bg-base-300 group-hover:scale-95 transition-transform ${
+							className={`relative flex items-center justify-center w-fit px-1.5 gap-1 h-6 p-0.5 rounded-xl bg-base-300 group-hover:scale-95 transition-transform ${
 								isOpen
 									? 'bg-primary text-white shadow-lg'
 									: 'bg-base-300  text-base-content/60'

src/layouts/setting/tabs/general/general.tsx

@@ -3,9 +3,16 @@ import { SelectCity } from './components/select-city'
 import { TimezoneSettings } from './components/timezone-settings'
 import { useGeneralSetting } from '@/context/general-setting.context'
 import { SectionPanel } from '@/components/section-panel'
+import Analytics from '@/analytics'
 
 export function GeneralSettingTab() {
 	const { isOptimalMode, updateSetting } = useGeneralSetting()
+
+	const toggleOptimal = () => {
+		updateSetting('isOptimalMode', !isOptimalMode)
+		Analytics.event('toggle_optimalMode')
+	}
+
 	return (
 		<div className="w-full max-w-xl mx-auto">
 			<SelectCity key={'selectCity'} />
@@ -28,7 +35,7 @@ export function GeneralSettingTab() {
 					</p>
 					<ToggleSwitch
 						enabled={isOptimalMode}
-						onToggle={() => updateSetting('isOptimalMode', !isOptimalMode)}
+						onToggle={() => toggleOptimal()}
 					/>
 				</div>
 			</SectionPanel>

src/layouts/widgets/habit/components/habit-empty.tsx

@@ -0,0 +1,26 @@
+export function HabitEmpty() {
+	return (
+		<div className="flex flex-col items-center justify-center h-full gap-2 px-4">
+			<div className="flex items-center justify-center w-12 h-12">
+				<img
+					src="https://cdn.widgetify.ir/system/no-items.png"
+					alt="بدون عادت"
+					className="object-contain w-48 h-auto select-none"
+				/>
+			</div>
+
+			<p className="mt-1 font-bold text-center text-content">
+				عادت‌های خوب رو از اینجا شروع کن 🌱
+			</p>
+
+			<p className="text-center text-[.65rem] leading-5 text-content opacity-75">
+				اولین عادتت رو اضافه کن
+				<br />
+				مثلا:
+				<br />💧 نوشیدن ۸ لیوان آب
+				<br />📖 ۲۰ دقیقه مطالعه
+				<br />🚶 ۳۰ دقیقه پیاده‌روی
+			</p>
+		</div>
+	)
+}

src/layouts/widgets/habit/habits.layout.tsx

@@ -18,6 +18,7 @@ import { HabitItem } from './components/item/habit.item'
 import { callEvent } from '@/common/utils/call-event'
 import { HabitItemSkeleton } from './components/item/habit-item.skeleton'
 import { Icon } from '@/src/icons'
+import { HabitEmpty } from './components/habit-empty'
 
 export function HabitsContent() {
 	const { isAuthenticated } = useAuth()
@@ -92,7 +93,7 @@ export function HabitsContent() {
 	}
 
 	const isWaiting = isLoading || isRefetching
-
+	const isEmpty = (!isLoading && data?.items?.length === 0) || !isAuthenticated
 	return (
 		<div className="flex flex-col h-full">
 			<div className="flex-none">
@@ -122,33 +123,19 @@ export function HabitsContent() {
 			</div>
 
 			<div className="mt-0.5 grow overflow-hidden pb-2">
-				<div
-					className={`space-y-1.5 overflow-y-auto scrollbar-none h-full ${blurMode ? 'blur-mode' : 'disabled-blur-mode'}`}
-				>
+				<div className="space-y-1.5 overflow-y-auto scrollbar-none h-full">
 					{isLoading ? (
 						<div className="flex flex-col gap-1.5">
 							{[...Array(4)].map((_, i) => (
 								<HabitItemSkeleton key={`skeleton-${i}`} />
 							))}
 						</div>
-					) : data?.items?.length === 0 ? (
-						<div className="flex flex-col items-center justify-center h-full gap-2 px-4">
-							<div className="flex items-center justify-center w-12 h-12">
-								<img
-									src="https://cdn.widgetify.ir/system/no-items.png"
-									alt="بدون عادت"
-									className="object-contain w-48 h-auto select-none"
-								/>
-							</div>
-							<p className="font-bold text-center text-content">
-								هیچ عادتی برای نمایش وجود ندارد
-							</p>
-							<p className="text-[.65rem] text-center text-content opacity-75">
-								یک عادت جدید اضافه کن تا شروع کنی
-							</p>
-						</div>
+					) : isEmpty ? (
+						<HabitEmpty />
 					) : (
-						<div className="flex flex-col gap-1">
+						<div
+							className={`flex flex-col gap-1 ${blurMode ? 'blur-mode' : 'disabled-blur-mode'}`}
+						>
 							{data?.items?.map((habit) => (
 								<HabitItem
 									key={habit.id}

src/layouts/widgets/notes/components/note-empty.tsx

@@ -0,0 +1,25 @@
+export function NoteEmpty() {
+	return (
+		<div className="flex flex-col items-center h-full mt-4">
+			<div className="flex items-center justify-center w-12 h-12">
+				<img
+					src="https://cdn.widgetify.ir/system/no-items.png"
+					alt="بدون یادداشت"
+					className="object-contain w-48 h-auto select-none"
+				/>
+			</div>
+
+			<p className="mt-2 text-sm font-bold text-content">اینجا هنوز سفیده...</p>
+
+			<p className="text-center text-[.65rem] leading-5 text-content opacity-75">
+				اولین یادداشتت رو بنویس.
+				<br />
+				مثلا:
+				<br />💡 ایده‌ی پروژه
+				<br />🛒 لیست خرید
+				<br />
+				یه جمله برای خودت واسه بعدا
+			</p>
+		</div>
+	)
+}

src/layouts/widgets/notes/notes.layout.tsx

@@ -4,6 +4,7 @@ import { NotesProvider, useNotes } from '@/context/notes.context'
 import { NoteEditor } from './components/note-editor'
 import { NoteItem } from './components/note-item'
 import { NoteNavigation } from './components/note-navigation'
+import { NoteEmpty } from './components/note-empty'
 
 function NotesContent() {
 	const { notes, activeNoteId } = useNotes()
@@ -12,23 +13,7 @@ function NotesContent() {
 	const activeNote = notes.find((note) => note.id === activeNoteId)
 
 	if (!activeNote && !notes.length) {
-		return (
-			<div
-				className={`flex flex-col items-center justify-center h-full ${blurMode ? 'blur-mode' : 'disabled-blur-mode'}`}
-			>
-				<div className="flex items-center justify-center w-12 h-12">
-					<img
-						src="https://cdn.widgetify.ir/system/no-items.png"
-						alt="بدون عادت"
-						className="object-contain w-48 h-auto select-none"
-					/>
-				</div>
-				<p className={'text-sm text-muted'}>یادداشتی پیدا نشد</p>
-				<span className="font-light text-muted">
-					منتظر چی هستی؟ شروع کن به نوشتن!
-				</span>
-			</div>
-		)
+		return <NoteEmpty />
 	}
 
 	if (!activeNote) {

src/layouts/widgets/todos/components/todo-empty.tsx

@@ -0,0 +1,25 @@
+export function TodosEmpty() {
+	return (
+		<div className={'flex-1 flex flex-col items-center justify-start gap-y-1.5 px-5'}>
+			<div className="flex items-center justify-center w-12 h-12">
+				<img
+					src="https://cdn.widgetify.ir/system/no-items.png"
+					alt="بدون تسک"
+					className="object-contain w-48 h-auto select-none"
+				/>
+			</div>
+
+			<p className="mt-1 font-bold text-center text-content">
+				اینجا فعلا خیلی آرومه...
+			</p>
+
+			<p className="text-center text-[.65rem] leading-5 text-content opacity-75">
+				هنوز هیچ تسکی نداری
+				<br />
+				وقتشه یه چیزی اضافه کنی، مثلا:
+				<br />🛒 خرید خونه
+				<br />☕ یه استراحت کوتاه
+			</p>
+		</div>
+	)
+}

src/layouts/widgets/todos/todos.tsx

@@ -13,6 +13,7 @@ import Tooltip from '@/components/toolTip'
 import { useGetTodos } from '@/services/hooks/todo/get-todos.hook'
 import { TodoItem } from './todo.item'
 import { Icon } from '@/src/icons'
+import { TodosEmpty } from './components/todo-empty'
 
 const filterOptions = [
 	{ value: 'all', label: 'همه' },
@@ -257,9 +258,7 @@ export function TodosLayout() {
 				</div>
 			</div>
 			<div className="mt-0.5 grow overflow-hidden">
-				<div
-					className={`space-y-1.5 overflow-y-auto scrollbar-none h-full ${blurMode ? 'blur-mode' : 'disabled-blur-mode'}`}
-				>
+				<div className={`space-y-1.5 overflow-y-auto scrollbar-none h-full`}>
 					{isLoading ? (
 						<div className="flex flex-col gap-1">
 							{[...Array(5)].map((_, i) => (
@@ -269,7 +268,9 @@ export function TodosLayout() {
 					) : sortedTodos.length === 0 ? (
 						<TodosEmpty />
 					) : (
-						<div className="flex flex-col gap-0">
+						<div
+							className={`flex flex-col gap-0 ${blurMode ? 'blur-mode' : 'disabled-blur-mode'}`}
+						>
 							{sortedTodos.map((todo) => (
 								<TodoItem
 									blurMode={blurMode}
@@ -307,30 +308,6 @@ export function TodosLayout() {
 	)
 }
 
-function TodosEmpty() {
-	return (
-		<div
-			className={
-				'flex-1 flex flex-col items-center justify-center gap-y-1.5 px-5 py-8'
-			}
-		>
-			<div className="flex items-center justify-center w-12 h-12">
-				<img
-					src="https://cdn.widgetify.ir/system/no-items.png"
-					alt="بدون عادت"
-					className="object-contain w-48 h-auto select-none"
-				/>
-			</div>
-			<p className="mt-1 font-bold text-center text-content">
-				هیچ تسکی برای نمایش وجود ندارد
-			</p>
-			<p className="text-center text-[.65rem] text-content opacity-75">
-				یک تسک جدید اضافه کنید یا فیلترها را تغییر دهید
-			</p>
-		</div>
-	)
-}
-
 export function TodoSkeleton() {
 	return (
 		<div className="flex flex-row justify-between gap-1 p-1 overflow-hidden border rounded-lg shadow-sm border-content bg-glass bg-base-300/30">