Feature/optimal mode

src/common/constant/store.key.ts

@@ -87,4 +87,5 @@ export interface StorageKV {
 	selected_engine: string | null
 	widget_tab: string
 	yadkar_tab: string
+	notifications: any
 }

src/common/motion.tsx

@@ -0,0 +1,81 @@
+import React from 'react'
+import { motion, type HTMLMotionProps, type SVGMotionProps } from 'framer-motion'
+import { useGeneralSetting } from '@/context/general-setting.context'
+
+function cleanMotionProps<T extends object>(props: T): T {
+	const {
+		initial,
+		animate,
+		exit,
+		variants,
+		transition,
+		whileHover,
+		whileTap,
+		whileDrag,
+		whileFocus,
+		whileInView,
+		layout,
+		layoutId,
+		drag,
+		dragConstraints,
+		dragElastic,
+		dragMomentum,
+		onAnimationStart,
+		onAnimationComplete,
+		...rest
+	} = props as any
+
+	return {
+		...rest,
+		initial: false,
+		transition: { duration: 0 },
+	} as T
+}
+
+function createMotionComponent<T extends keyof typeof motion, P extends object>(
+	Component: React.ComponentType<P>
+) {
+	return React.forwardRef<any, P>((props, ref) => {
+		const { isOptimalMode } = useGeneralSetting()
+
+		return (
+			<Component
+				ref={ref}
+				{...((isOptimalMode ? cleanMotionProps(props) : props) as P)}
+			/>
+		)
+	})
+}
+
+export const Motion = {
+	div: createMotionComponent<'div', HTMLMotionProps<'div'>>(motion.div),
+
+	span: createMotionComponent<'span', HTMLMotionProps<'span'>>(motion.span),
+
+	button: createMotionComponent<'button', HTMLMotionProps<'button'>>(motion.button),
+
+	img: createMotionComponent<'img', HTMLMotionProps<'img'>>(motion.img),
+
+	ul: createMotionComponent<'ul', HTMLMotionProps<'ul'>>(motion.ul),
+
+	li: createMotionComponent<'li', HTMLMotionProps<'li'>>(motion.li),
+
+	svg: createMotionComponent<'svg', SVGMotionProps<SVGSVGElement>>(motion.svg),
+
+	path: createMotionComponent<'path', SVGMotionProps<SVGPathElement>>(motion.path),
+}
+
+import { AnimatePresence } from 'framer-motion'
+
+export function Presence({
+	children,
+	...props
+}: React.ComponentProps<typeof AnimatePresence>) {
+	const { isOptimalMode } = useGeneralSetting()
+
+	if (isOptimalMode) {
+		return <>{children}</>
+	}
+
+	return <AnimatePresence {...props}>{children}</AnimatePresence>
+}

src/components/auth/require-auth.tsx

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { Motion as motion } from "@/common/motion";
 import type { ReactNode } from 'react'
 import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'

src/components/auth/require-verification.tsx

@@ -1,4 +1,4 @@
-import { motion } from 'framer-motion'
+import { Motion as motion } from "@/common/motion";
 import type { ReactNode } from 'react'
 import { callEvent } from '@/common/utils/call-event'
 import { useAuth } from '@/context/auth.context'

src/components/bottom-sheet/bottom-sheet.tsx

@@ -1,5 +1,5 @@
 import { useState, type ReactNode } from 'react'
-import { motion, AnimatePresence, type PanInfo } from 'framer-motion'
+import { Presence, Motion as motion } from '@/common/motion'
 import { Portal } from '../portal/Portal'
 import { Icon } from '@/src/icons'
 
@@ -40,7 +40,7 @@ export function BottomSheet({
 		screen: '98vh',
 	}
 
-	const handleDragEnd = (_: any, info: PanInfo) => {
+	const handleDragEnd = (_: any, info: any) => {
 		setIsDragging(false)
 
 		if (info.offset.y > dragThreshold) {
@@ -50,7 +50,7 @@ export function BottomSheet({
 
 	return (
 		<Portal>
-			<AnimatePresence>
+			<Presence>
 				{isOpen && (
 					<>
 						<motion.div
@@ -133,7 +133,7 @@ export function BottomSheet({
 						</motion.div>
 					</>
 				)}
-			</AnimatePresence>
+			</Presence>
 		</Portal>
 	)
 }

src/components/clickableTooltip.tsx

@@ -1,4 +1,5 @@
-import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
+import { Motion as motion, Presence } from '@/common/motion'
+
 import { type ReactNode, useEffect, useRef, useState, type RefObject } from 'react'
 import ReactDOM from 'react-dom'
 
@@ -208,28 +209,26 @@ const ClickableTooltip = ({
 	return (
 		<>
 			{ReactDOM.createPortal(
-				<LazyMotion features={domAnimation}>
-					<AnimatePresence mode="wait">
-						{isOpen && (
-							<m.div
-								ref={tooltipRef}
-								className={`fixed rounded-xl py-1 px-2 text-xs max-w-xs bg-base-300 shadow bg-glass ${contentClassName}`}
-								style={{
-									left: tooltipCoords.x,
-									top: tooltipCoords.y,
-									zIndex: 9999,
-								}}
-								initial="hidden"
-								animate="visible"
-								exit="hidden"
-								variants={variants[calculatedPosition]}
-								transition={{ duration: 0.15, ease: 'easeOut' }}
-							>
-								{content}
-							</m.div>
-						)}
-					</AnimatePresence>
-				</LazyMotion>,
+				<Presence mode="wait">
+					{isOpen && (
+						<motion.div
+							ref={tooltipRef}
+							className={`fixed rounded-xl py-1 px-2 text-xs max-w-xs bg-base-300 shadow bg-glass ${contentClassName}`}
+							style={{
+								left: tooltipCoords.x,
+								top: tooltipCoords.y,
+								zIndex: 9999,
+							}}
+							initial="hidden"
+							animate="visible"
+							exit="hidden"
+							variants={variants[calculatedPosition]}
+							transition={{ duration: 0.15, ease: 'easeOut' }}
+						>
+							{content}
+						</motion.div>
+					)}
+				</Presence>,
 				document.body
 			)}
 		</>

src/components/tab-navigation.tsx

@@ -1,5 +1,5 @@
 import React, { useId } from 'react'
-import { motion } from 'framer-motion'
+import { Motion as motion } from "@/common/motion";
 
 interface TabItem<T> {
 	id: T

src/components/toolTip.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence, domAnimation, LazyMotion, m } from 'framer-motion'
+import { Motion as motion, Presence } from '@/common/motion'
 import { type ReactNode, useEffect, useRef, useState } from 'react'
 import ReactDOM from 'react-dom'
 
@@ -218,28 +218,26 @@ const Tooltip = ({
 
 			{(alwaysShow || isVisible) &&
 				ReactDOM.createPortal(
-					<LazyMotion features={domAnimation}>
-						<AnimatePresence>
-							<m.div
-								ref={tooltipRef}
-								className={`tooltip fixed rounded-lg py-1.5 px-3 text-xs max-w-xs bg-content shadow-lg z-[9999] ${contentClassName}`}
-								style={{
-									left: tooltipCoords.x,
-									top: tooltipCoords.y,
-								}}
-								initial="hidden"
-								animate="visible"
-								exit="hidden"
-								variants={variants[calculatedPosition]}
-								transition={{ duration: 0.15, ease: 'easeOut' }}
-								onMouseEnter={showTooltip}
-								onMouseLeave={hideTooltip}
-							>
-								{content}
-								<div className={getArrowClasses(calculatedPosition)} />
-							</m.div>
-						</AnimatePresence>
-					</LazyMotion>,
+					<Presence>
+						<motion.div
+							ref={tooltipRef}
+							className={`tooltip fixed rounded-lg py-1.5 px-3 text-xs max-w-xs bg-content shadow-lg z-[9999] ${contentClassName}`}
+							style={{
+								left: tooltipCoords.x,
+								top: tooltipCoords.y,
+							}}
+							initial="hidden"
+							animate="visible"
+							exit="hidden"
+							variants={variants[calculatedPosition]}
+							transition={{ duration: 0.15, ease: 'easeOut' }}
+							onMouseEnter={showTooltip}
+							onMouseLeave={hideTooltip}
+						>
+							{content}
+							<div className={getArrowClasses(calculatedPosition)} />
+						</motion.div>
+					</Presence>,
 					document.body
 				)}
 		</>

src/context/general-setting.context.tsx

@@ -11,6 +11,7 @@ import { useAuth } from './auth.context'
 
 export interface GeneralData {
 	blurMode: boolean
+	isOptimalMode: boolean
 	analyticsEnabled: boolean
 	selected_timezone: FetchedTimezone
 	browserBookmarksEnabled: boolean
@@ -35,6 +36,7 @@ const DEFAULT_SETTINGS: GeneralData = {
 	},
 	browserBookmarksEnabled: false,
 	browserTabsEnabled: false,
+	isOptimalMode: false,
 }
 
 export const GeneralSettingContext = createContext<GeneralSettingContextType | null>(null)
@@ -223,6 +225,7 @@ export function GeneralSettingProvider({ children }: { children: React.ReactNode
 		setBrowserBookmarksEnabled,
 		browserTabsEnabled: settings.browserTabsEnabled,
 		setBrowserTabsEnabled,
+		isOptimalMode: settings.isOptimalMode,
 	}
 
 	return (

src/layouts/setting/tabs/account/account.tsx

@@ -1,4 +1,4 @@
-import { AnimatePresence, motion } from 'framer-motion'
+import { Motion as motion, Presence } from '@/common/motion'
 import { useAuth } from '@/context/auth.context'
 import AuthForm from './auth-form/auth-form'
 import { UserProfile } from './tabs/user-profile/user-profile'
@@ -8,7 +8,7 @@ export const AccountTab = () => {
 
 	return (
 		<div className="w-full h-full max-w-xl mx-auto">
-			<AnimatePresence mode="wait">
+			<Presence mode="wait">
 				{isAuthenticated ? (
 					<motion.div
 						key="profile"
@@ -32,7 +32,7 @@ export const AccountTab = () => {
 						<AuthForm />
 					</motion.div>
 				)}
-			</AnimatePresence>
+			</Presence>
 		</div>
 	)
 }

src/layouts/setting/tabs/general/components/timezone-settings.tsx

@@ -12,7 +12,7 @@ export function TimezoneSettings() {
 	}
 
 	return (
-		<SectionPanel title="منطقه‌ی زمانی" delay={0.1}>
+		<SectionPanel title="منطقه‌ی زمانی" delay={0.1} size="sm">
 			<div className="space-y-3">
 				<p className={'text-sm text-muted'}>
 					منطقه‌ی زمانی مورد نظر خود را انتخاب کنید.

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

@@ -1,11 +1,37 @@
+import { ToggleSwitch } from '@/components/toggle-switch.component'
 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'
 
 export function GeneralSettingTab() {
+	const { isOptimalMode, updateSetting } = useGeneralSetting()
 	return (
 		<div className="w-full max-w-xl mx-auto">
 			<SelectCity key={'selectCity'} />
 			<TimezoneSettings key="timezone" />
+			<SectionPanel
+				title={
+					<div className="flex items-center">
+						<p>حالت بهینه</p>
+						<span className="mr-2 text-white badge badge-error badge-xs outline-2 outline-error/20">
+							جدید
+						</span>
+					</div>
+				}
+				size="sm"
+			>
+				<div className="flex">
+					<p className="flex-1 text-sm font-light leading-relaxed text-muted">
+						برای کاهش مصرف منابع، انیمیشن‌ها، حیوان خانگی، ثانیه‌شمار ساعت و
+						برخی افکت‌های بصری غیرفعال می‌شوند.
+					</p>
+					<ToggleSwitch
+						enabled={isOptimalMode}
+						onToggle={() => updateSetting('isOptimalMode', !isOptimalMode)}
+					/>
+				</div>
+			</SectionPanel>
 		</div>
 	)
 }

src/layouts/widgetify-card/pets/pet.tsx

@@ -1,10 +1,12 @@
 import { usePetContext } from './pet.context'
 import { PetFactory } from './pet-factory'
+import { useGeneralSetting } from '@/context/general-setting.context'
 
 export function Pet() {
+	const { isOptimalMode } = useGeneralSetting()
 	const { isEnabled } = usePetContext()
 
-	if (!isEnabled) return null
+	if (!isEnabled || isOptimalMode) return null
 
 	return <PetFactory />
 }