Feat/update simplify tabs habit

background/cache.ts

@@ -11,7 +11,6 @@ const allowedPaths = [
 	'/contents',
 	'/extension/notifications',
 	'/extension/searchbox',
-	'/mini-apps',
 	'/searchbox',
 	'/weather',
 ]

src/context/appearance.context.tsx

@@ -99,7 +99,10 @@ export function AppearanceProvider({ children }: { children: React.ReactNode })
 				(event.ctrlKey || event.metaKey)
 			) {
 				event.preventDefault()
-				setUI(settings.ui === UI.ADVANCED ? UI.SIMPLE : UI.ADVANCED)
+				setUI(
+					settings.ui === UI.ADVANCED ? UI.SIMPLE : UI.ADVANCED,
+					isAuthenticated
+				)
 			}
 		}
 
@@ -142,8 +145,8 @@ export function AppearanceProvider({ children }: { children: React.ReactNode })
 		Analytics.event(`set_content_alignment_${value}`)
 	}
 
-	const setUI = async (ui: UI) => {
-		if (!isAuthenticated)
+	const setUI = async (ui: UI, isAuth: boolean) => {
+		if (!isAuth)
 			return showToast(
 				'برای استفاده از این حالت، باید وارد حساب کاربری خود شوید!',
 				'error'
@@ -181,7 +184,7 @@ export function AppearanceProvider({ children }: { children: React.ReactNode })
 		setFontFamily,
 		canReOrderWidget,
 		ui: settings.ui,
-		setUI: setUI,
+		setUI: (val) => setUI(val, isAuthenticated),
 		toggleCanReOrderWidget,
 		setContentAlignment,
 	}

src/layouts/navbar/components/settingsDropdown.tsx

@@ -6,12 +6,9 @@ import { Icon } from '@/src/icons'
 import { useAuth } from '@/context/auth.context'
 import { Dropdown } from '@/components/dropdown'
 
-interface SettingsProps {
-	setShowSettings: (value: boolean) => void
-}
-export const SettingsDropdown = ({ setShowSettings }: SettingsProps) => {
+export const SettingsDropdown = () => {
 	const { isAuthenticated } = useAuth()
-	const { canReOrderWidget, toggleCanReOrderWidget, ui } = useAppearanceSetting()
+	const { canReOrderWidget, toggleCanReOrderWidget, ui, setUI } = useAppearanceSetting()
 	const triggerRef = useRef<HTMLDivElement>(null)
 
 	const handleWidgetSettingsClick = useCallback(() => {
@@ -20,7 +17,7 @@ export const SettingsDropdown = ({ setShowSettings }: SettingsProps) => {
 	}, [])
 
 	const handleSettingsClick = useCallback(() => {
-		setShowSettings(true)
+		callEvent('openSettings', 'general')
 		callEvent('closeAllDropdowns')
 	}, [])
 
@@ -34,7 +31,7 @@ export const SettingsDropdown = ({ setShowSettings }: SettingsProps) => {
 	}
 
 	const onClickToChangeUI = () => {
-		callEvent('ui_change', ui === 'SIMPLE' ? UI.ADVANCED : UI.SIMPLE)
+		setUI(ui === 'SIMPLE' ? UI.ADVANCED : UI.SIMPLE)
 	}
 
 	const onClickToOpenGallery = () => {

src/layouts/navbar/navbar.layout.tsx

@@ -92,7 +92,7 @@ export function NavbarLayout(): JSX.Element {
 	const { user } = useAuth()
 	const [tab, setTab] = useState<string | null>(null)
 	const handleOpenSettings = useCallback((tabName: string | null) => {
-		if (tabName) setTab(tabName)
+		setTab(tabName)
 		setShowSettings(true)
 	}, [])
 
@@ -201,7 +201,7 @@ export function NavbarLayout(): JSX.Element {
 							</button>
 						</Tooltip>
 						<BlurModeButton />
-						<SettingsDropdown setShowSettings={setShowSettings} />
+						<SettingsDropdown />
 						<FriendsListNavbar />
 						<MarketButton />
 						<ProfileNav />

src/layouts/simplify/tools-simplify.tsx

@@ -13,24 +13,18 @@ const Calendar = React.lazy(() =>
 	}))
 )
 
-const NetworkSimplify = React.lazy(() =>
-	import('./widgets/network-simplify').then((module) => ({
-		default: module.NetworkSimplify,
-	}))
-)
-
-const NotesLayout = React.lazy(() =>
-	import('../widgets/notes/notes.layout').then((module) => ({
-		default: module.NotesLayout,
-	}))
-)
-
 const ArzSimplify = React.lazy(() =>
 	import('./widgets/arz-simplify').then((module) => ({
 		default: module.ArzSimplify,
 	}))
 )
 
+const Habit = React.lazy(() =>
+	import('./widgets/habit-simplify').then((module) => ({
+		default: module.HabitSimplify,
+	}))
+)
+
 const NewsSimplify = React.lazy(() =>
 	import('./widgets/news-simplify').then((module) => ({
 		default: module.NewsSimplify,
@@ -45,18 +39,18 @@ const tabs = [
 		element: TodosLayout,
 	},
 	{
-		id: 'notes',
-		label: 'یادداشت',
-		icon: <Icon name="notebook" />,
-		element: NotesLayout,
+		id: 'habit',
+		label: 'عادت ها',
+		icon: <Icon name="strike" />,
+		element: Habit,
 	},
+
 	{
 		id: 'calendar',
 		label: 'تقویم',
 		icon: <Icon name="calendar" />,
 		element: Calendar,
 	},
-
 	{
 		id: 'currency',
 		label: 'ارزها',
@@ -69,12 +63,6 @@ const tabs = [
 		icon: <Icon name="outlineNewspaper" />,
 		element: NewsSimplify,
 	},
-	{
-		id: 'network',
-		label: 'شبکه',
-		icon: <Icon name="network" />,
-		element: NetworkSimplify,
-	},
 ]
 
 type TabId = string

src/layouts/simplify/widgets/habit-simplify.tsx

@@ -0,0 +1,9 @@
+import { HabitsContent } from '@/layouts/widgets/habit/habits.layout'
+
+export function HabitSimplify() {
+	return (
+		<div className="relative overflow-y-auto h-82 scrollbar-none">
+			<HabitsContent />
+		</div>
+	)
+}

src/layouts/widgets/habit/components/item/habit.item.tsx

@@ -52,9 +52,9 @@ export function HabitItem({ habit, today, onChanged, onViewDetails }: HabitItemP
 	return (
 		<div
 			onClick={onViewDetails}
-			className="w-full p-2 transition-all border cursor-pointer rounded-xl border-base-300/40 bg-base-300/30 hover:border-base-300/70 hover:bg-base-300/50 text-right active:scale-[0.99]"
+			className="w-full p-2 transition-all border rounded-2xl border-base-300/40 bg-base-300/30 hover:border-base-300/70 hover:bg-base-300/50 text-right active:scale-[0.99]"
 		>
-			<div className="flex items-center gap-2">
+			<div className="flex items-center gap-2 cursor-pointer">
 				<div
 					className="flex items-center justify-center w-8 h-8 text-sm rounded-lg shrink-0"
 					style={{
@@ -65,7 +65,7 @@ export function HabitItem({ habit, today, onChanged, onViewDetails }: HabitItemP
 					{habit.emoji || '🎯'}
 				</div>
 
-				<div className="flex-1 min-w-0">
+				<div className="flex-1 min-w-0 ">
 					<p className="text-xs font-bold truncate text-content">
 						{habit.title}
 					</p>

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

@@ -94,7 +94,7 @@ export function HabitsContent() {
 	const isWaiting = isLoading || isRefetching
 
 	return (
-		<>
+		<div className="flex flex-col h-full">
 			<div className="flex-none">
 				<div className="flex items-center justify-between">
 					<div className="flex items-center gap-1">
@@ -166,7 +166,7 @@ export function HabitsContent() {
 			<Button
 				size="sm"
 				onClick={handleAddHabit}
-				className="px-2 py-0! border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!"
+				className="px-2 py-0!  w-full border-none! rounded-xl text-base-content/40 shrink-0 active:scale-95 h-7!"
 			>
 				<Icon name="plus" className="w-4 h-4" />
 				افزودن
@@ -205,7 +205,7 @@ export function HabitsContent() {
 				cancelText="انصراف"
 				isLoading={isArchiving}
 			/>
-		</>
+		</div>
 	)
 }