Feature: add settings

README.md

@@ -53,4 +53,4 @@ _Link to the backend repo:_ https://github.com/chertik77/TaskPro-backend
 
 ## Languages and Tools
 
-![Languages and Tools](https://skills.syvixor.com/api/icons?i=ts,react,dndkit,baseui,tanstack,betterauth,heyapi,stanjs,axios,datefns,motion,reactdatepicker,reacthookform,lucide,valibot,tailwind,tailwindmerge,fusejs,commitlint,eslint,prettier,githubactions,fsd,yarn,vercel,vite,vscode,figma&perline=10)
+![Languages and Tools](https://skills.syvixor.com/api/icons?i=ts,react,dndkit,baseui,tanstack,betterauth,heyapi,stanjs,axios,datefns,motion,reactdatepicker,reacthookform,lucide,thesvg,valibot,tailwind,tailwindmerge,fusejs,commitlint,eslint,prettier,githubactions,fsd,yarn,vercel,vite,vscode,figma&perline=10)

eslint.config.ts

@@ -46,13 +46,22 @@ export default defineConfig(
             'Direct access to `import.meta.env` is forbidden. Use `@/shared/config` instead.'
         }
       ],
+      'no-restricted-imports': [
+        'error',
+        {
+          name: 'motion/react',
+          importNames: ['motion'],
+          message: 'Do not import motion. Use m from motion/react-m instead.'
+        }
+      ],
       'newline-before-return': 'error',
       'arrow-body-style': ['warn', 'as-needed']
     }
   },
   {
     rules: {
       'jsx-a11y/no-autofocus': 'off',
+      '@eslint-react/no-array-index-key': 'off',
       '@typescript-eslint/consistent-type-imports': 'error',
       '@typescript-eslint/no-import-type-side-effects': 'error',
       '@typescript-eslint/consistent-indexed-object-style': 'error',

index.html

@@ -5,6 +5,33 @@
     <meta
       name="viewport"
       content="width=device-width, initial-scale=1.0" />
+    <script>
+      ;(() => {
+        const root = document.documentElement
+
+        let appearance = {}
+
+        appearance =
+          JSON.parse(localStorage.getItem('taskpro-appearance')) || {}
+
+        let theme =
+          appearance.theme ?? localStorage.getItem('taskpro-theme') ?? 'light'
+
+        if (theme === 'system') {
+          theme = window.matchMedia('(prefers-color-scheme: dark)').matches
+            ? 'dark'
+            : 'light'
+        }
+
+        root.dataset.theme = theme
+        root.dataset.fontSize = appearance.fontSize ?? 'medium'
+        root.dataset.animations = appearance.animations ?? 'system'
+
+        if (appearance.accentColor) {
+          root.style.setProperty('--accent-color', appearance.accentColor)
+        }
+      })()
+    </script>
     <meta
       name="description"
       content="The ultimate task management tool for individuals and teams. Organize tasks, set deadlines, track progress, and increase productivity with TaskPro." />

openapi-ts.config.ts

@@ -8,13 +8,14 @@ export default defineConfig({
   input: `${process.env.VITE_API_BASE_URL}/openapi.json`,
   output: 'src/shared/api/generated',
   plugins: [
+    'valibot',
     '@tanstack/react-query',
     {
       name: '@hey-api/client-axios',
+      throwOnError: true,
       runtimeConfigPath: 'src/shared/lib/openapi/hey-api.ts'
     },
     { enums: 'javascript', name: '@hey-api/typescript' },
-    { name: '@hey-api/sdk', transformer: true },
-    { name: '@hey-api/transformers', dates: true }
+    { name: '@hey-api/sdk', validator: true }
   ]
 })

package.json

@@ -1,11 +1,10 @@
 {
   "name": "task-pro-frontend",
   "private": true,
+  "type": "module",
   "engines": {
     "node": ">=24.0.0"
   },
-  "version": "0.0.0",
-  "type": "module",
   "scripts": {
     "dev": "vite --open",
     "build": "tsc && vite build",
@@ -20,6 +19,7 @@
   },
   "dependencies": {
     "@base-ui/react": "^1.6.0",
+    "@better-auth/passkey": "^1.6.23",
     "@daypicker/react": "^10.0.1",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/sortable": "^10.0.0",
@@ -28,6 +28,7 @@
     "@radix-ui/react-roving-focus": "^1.1.15",
     "@tanstack/react-query": "^5.101.2",
     "@tanstack/react-router": "1.170.17",
+    "@thesvg/react": "^3.2.8",
     "@vercel/analytics": "^2.0.1",
     "@vercel/speed-insights": "^2.0.0",
     "axios": "^1.18.1",
@@ -41,9 +42,9 @@
     "react": "^19.2.7",
     "react-dom": "^19.2.7",
     "react-hook-form": "7.81.0",
-    "sonner": "^2.0.7",
     "stan-js": "^1.9.1",
     "tailwind-merge": "^3.6.0",
+    "use-context-selector": "^2.0.0",
     "use-debounce": "^10.1.1",
     "valibot": "^1.4.2"
   },

src/app/ambient/react-query.d.ts

@@ -1,13 +1,15 @@
 import type { QueryKey } from '@tanstack/react-query'
 import type { AxiosError } from 'axios'
+import type { BetterFetchError } from 'better-auth/react'
 
 declare module '@tanstack/react-query' {
   interface Register {
-    defaultError: AxiosError
+    defaultError: AxiosError | BetterFetchError
     mutationMeta: {
       invalidates?: QueryKey[]
       successMessage?: string
-      errorMessage?: string | ((error?: AxiosError) => string)
+      errorMessage?:
+        string | ((error?: AxiosError | BetterFetchError) => string | undefined)
     }
   }
 }

src/app/index.css

@@ -32,6 +32,8 @@
 }
 
 @theme inline {
+  --default-transition-duration: 0.3s;
+
   --font-*: initial;
   --font-poppins: 'Poppins', sans-serif;
 
@@ -45,46 +47,47 @@
   --color-white: #ffffff;
   --color-white-soft: #fcfcfc;
   --color-white-muted: #f6f6f7;
-  --color-brand: #bedbb0;
-  --color-brand-light: #9dc888;
-  --color-blue: #8fa1d0;
+  --color-accent: var(--accent-color);
+  --color-priority-low: #9bb7d4;
+  --color-priority-medium: #e5a8b7;
   --color-red: #dc2626;
-  --color-pink: #e09cb5;
+  --color-green: #bedbb0;
+  --color-green-light: #9dc888;
 
   --text-*: initial;
-  --text-xs: 8px;
+  --text-xs: calc(8px * var(--font-scale));
   --text-xs--line-height: normal;
   --text-xs--font-weight: 400;
   --text-xs--letter-spacing: -0.16px;
 
-  --text-sm: 10px;
+  --text-sm: calc(10px * var(--font-scale));
   --text-sm--line-height: normal;
   --text-sm--font-weight: 400;
   --text-sm--letter-spacing: -0.2px;
 
-  --text-md: 12px;
+  --text-md: calc(12px * var(--font-scale));
   --text-md--line-height: normal;
   --text-md--letter-spacing: -0.24px;
 
-  --text-base: 14px;
+  --text-base: calc(14px * var(--font-scale));
   --text-base--line-height: 1.28;
   --text-base--letter-spacing: -0.28px;
 
-  --text-lg: 16px;
+  --text-lg: calc(16px * var(--font-scale));
   --text-lg--line-height: normal;
   --text-lg--letter-spacing: -0.64px;
 
-  --text-xl: 18px;
+  --text-xl: calc(18px * var(--font-scale));
   --text-xl--line-height: normal;
   --text-xl--font-weight: 500;
   --text-xl--letter-spacing: -0.36px;
 
-  --text-2xl: 28px;
+  --text-2xl: calc(28px * var(--font-scale));
   --text-2xl--line-height: normal;
   --text-2xl--font-weight: 600;
   --text-2xl--letter-spacing: -1.12px;
 
-  --text-3xl: 40px;
+  --text-3xl: calc(40px * var(--font-scale));
   --text-3xl--line-height: normal;
   --text-3xl--font-weight: 600;
   --text-3xl--letter-spacing: -1.6px;
@@ -146,13 +149,50 @@
 }
 
 @layer base {
+  :root {
+    --accent-color: var(--color-green);
+    --font-scale: 1;
+  }
+
   button:not(:disabled),
   [role='button']:not(:disabled) {
     cursor: pointer;
   }
+
+  html[data-animations='off'] *,
+  html[data-animations='off'] *::before,
+  html[data-animations='off'] *::after {
+    animation-duration: 0s !important;
+    animation-iteration-count: 1 !important;
+    transition-duration: 0s !important;
+    scroll-behavior: auto !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    html[data-animations='system'] *,
+    html[data-animations='system'] *::before,
+    html[data-animations='system'] *::after {
+      animation-duration: 0s !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0s !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
+  html[data-font-size='small'] {
+    --font-scale: 0.92;
+  }
+
+  html[data-font-size='medium'] {
+    --font-scale: 1;
+  }
+
+  html[data-font-size='large'] {
+    --font-scale: 1.12;
+  }
 }
 
-@custom-variant dark (&:where(.dark, .dark *));
+@custom-variant dark (&:where(html[data-theme='dark'] *));
 
 @custom-variant hocus {
   @media (hover: hover) {
@@ -209,11 +249,11 @@
 }
 
 @utility styled-outline {
-  @apply outline-brand outline-2;
+  @apply outline-accent outline-2;
 }
 
 @utility bg-soft-green {
-  @apply to-brand bg-linear-180 from-white;
+  @apply to-green bg-linear-180 from-white;
 }
 
 @utility disable-text-selection {

src/app/providers/RouteProvider.tsx

@@ -9,7 +9,7 @@ export const RouterProvider = () => (
     defaultPendingComponent={() => (
       <div className='fixed top-0 right-0 block h-12 w-screen'>
         <div className='bg-soft-green flex h-screen items-center justify-center'>
-          <Loader className='size-12' />
+          <Loader className='size-12 stroke-black' />
         </div>
       </div>
     )}

src/app/providers/ToastProvider.tsx

@@ -1,22 +1,3 @@
-import { Toaster } from 'sonner'
+import { Toaster } from '@/shared/ui'
 
-import { useMe } from '@/entities/user'
-
-import { useTabletAndBelowMediaQuery } from '@/shared/lib'
-
-export const ToastProvider = () => {
-  const user = useMe()
-
-  const isTabletAndBelow = useTabletAndBelowMediaQuery()
-
-  return (
-    <Toaster
-      position={isTabletAndBelow ? 'top-center' : 'bottom-right'}
-      richColors
-      closeButton
-      duration={5000}
-      theme={user?.theme === 'dark' ? 'dark' : 'light'}
-      className='text-balance'
-    />
-  )
-}
+export const ToastProvider = () => <Toaster />

src/app/routes/dashboard/$boardId.tsx

@@ -7,5 +7,14 @@ import { Board } from '@/widgets/kanban-board'
 export const Route = createFileRoute('/dashboard/$boardId')({
   component: Board,
   validateSearch: TaskContracts.TaskSearchSchema,
-  search: { middlewares: [stripSearchParams({ search: '' })] }
+  search: {
+    middlewares: [
+      stripSearchParams({
+        search: '',
+        priority: [],
+        deadline: [],
+        labels: []
+      })
+    ]
+  }
 })

src/app/routes/dashboard/settings/general.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute } from '@tanstack/react-router'
+
+import { GeneralSettings } from '@/features/settings/general'
+
+export const Route = createFileRoute('/dashboard/settings/general')({
+  component: GeneralSettings
+})

src/app/routes/dashboard/settings/index.tsx

@@ -0,0 +1,7 @@
+import { createFileRoute, redirect } from '@tanstack/react-router'
+
+export const Route = createFileRoute('/dashboard/settings/')({
+  beforeLoad: () => {
+    throw redirect({ to: '/dashboard/settings/general' })
+  }
+})