feat(web): Добавить zustand

apps/web/features/theme/index.ts

@@ -0,0 +1,3 @@
+export { useThemeStore } from './model/store'
+export { ThemeToggle } from './ui/theme-toggle'
+export type { Theme } from './types/theme'

apps/web/features/theme/model/store.ts

@@ -0,0 +1,16 @@
+import { create } from 'zustand'
+import { persist } from 'zustand/middleware'
+
+import type { Theme, ThemeStore } from '../types/theme'
+
+export const useThemeStore = create<ThemeStore>()(
+	persist(
+		(set) => ({
+			theme: 'light',
+			setTheme: (theme: Theme) => set({ theme }),
+			toggleTheme: () =>
+				set((state) => ({ theme: state.theme === 'light' ? 'dark' : 'light' })),
+		}),
+		{ name: 'theme-storage' },
+	),
+)

apps/web/features/theme/types/theme.ts

@@ -0,0 +1,12 @@
+export type Theme = 'light' | 'dark'
+
+type ThemeStoreState = {
+	theme: Theme
+}
+
+type ThemeStoreActions = {
+	setTheme: (theme: Theme) => void
+	toggleTheme: () => void
+}
+
+export type ThemeStore = ThemeStoreState & ThemeStoreActions

apps/web/features/theme/ui/theme-toggle.tsx

@@ -0,0 +1,26 @@
+'use client'
+
+import { Moon, Sun } from 'lucide-react'
+
+import { Button } from '@repo/ui'
+
+import { useHydratedStore } from '../../../shared/hooks'
+import { useThemeStore } from '../model/store'
+
+export const ThemeToggle = () => {
+	const theme = useHydratedStore(useThemeStore, (state) => state.theme)
+	const toggleTheme = useThemeStore((state) => state.toggleTheme)
+
+	if (!theme) {
+		// тут можно рисовать скелетон
+		return null
+	}
+
+	const Icon = theme === 'light' ? Moon : Sun
+
+	return (
+		<Button onClick={toggleTheme} variant='outline' size='icon'>
+			<Icon className='w-5 h-5' />
+		</Button>
+	)
+}

apps/web/package.json

@@ -14,11 +14,13 @@
 		"@hookform/resolvers": "^5.2.2",
 		"@repo/ui": "workspace:*",
 		"@tanstack/react-query": "^5.90.21",
+		"lucide-react": "^0.574.0",
 		"next": "16.1.6",
 		"react": "^19.2.4",
 		"react-dom": "^19.2.4",
 		"react-hook-form": "^7.71.1",
-		"zod": "^4.3.6"
+		"zod": "^4.3.6",
+		"zustand": "^5.0.11"
 	},
 	"devDependencies": {
 		"@repo/api": "workspace:*",

apps/web/shared/hooks/index.ts

@@ -0,0 +1 @@
+export { useHydratedStore } from './use-hydrated-store'

apps/web/shared/hooks/use-hydrated-store.ts

@@ -0,0 +1,24 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+
+export const useHydratedStore = <T, F>(
+	store: (callback: (state: T) => unknown) => unknown,
+	selector: (state: T) => F,
+): F | undefined => {
+	// 1. Достаем сырое значение из стора
+	const result = store(selector) as F
+
+	// 2. Флаг, который скажет нам: "браузер отрендерил компонент?"
+	const [isHydrated, setIsHydrated] = useState(false)
+
+	// 3. useEffect работает ТОЛЬКО в браузере и ТОЛЬКО после первого рендера
+	useEffect(() => {
+		setIsHydrated(true)
+	}, [])
+
+	// 4. Если мы на сервере или это самый первый render в браузере —
+	// отдаем undefined (чтобы верстка совпала с сервером).
+	// Как только отработает useEffect, произойдет ререндер с реальными данными.
+	return isHydrated ? result : undefined
+}

apps/web/widgets/sidebar/index.ts

@@ -0,0 +1 @@
+export { useSideBarStore } from './model/store'

apps/web/widgets/sidebar/model/store.ts

@@ -0,0 +1,10 @@
+import { create } from 'zustand'
+
+import type { SideBarStore } from '../types/sidebar'
+
+export const useSideBarStore = create<SideBarStore>((set) => ({
+	isOpen: false,
+	open: () => set({ isOpen: true }),
+	close: () => set({ isOpen: false }),
+	toggle: () => set((state) => ({ isOpen: !state.isOpen })),
+}))

apps/web/widgets/sidebar/types/sidebar.ts

@@ -0,0 +1,11 @@
+type SideBarStoreState = {
+	isOpen: boolean
+}
+
+type SideBarStoreActions = {
+	open: () => void
+	close: () => void
+	toggle: () => void
+}
+
+export type SideBarStore = SideBarStoreState & SideBarStoreActions