test refactor

client/src/shared/model/theme.ts

@@ -0,0 +1,5 @@
+import type { PaletteMode } from '@mui/material'
+
+export type ColorScheme = 'craft' | 'forest' | 'ocean' | 'berry'
+
+export type ThemeModePreference = 'system' | PaletteMode

client/src/shared/ui/ModeSwitcher/ModeSwitcher.tsx

@@ -0,0 +1,32 @@
+import DarkModeOutlinedIcon from '@mui/icons-material/DarkModeOutlined'
+import LightModeOutlinedIcon from '@mui/icons-material/LightModeOutlined'
+import IconButton from '@mui/material/IconButton'
+import Tooltip from '@mui/material/Tooltip'
+import type { ThemeModePreference } from '@/shared/model/theme'
+
+type Props = {
+  mode: ThemeModePreference
+  resolvedMode: 'light' | 'dark'
+  onCycleMode: () => void
+}
+
+function getModeLabel(mode: ThemeModePreference, resolvedMode: 'light' | 'dark'): string {
+  switch (mode) {
+    case 'system':
+      return `Авто (${resolvedMode === 'dark' ? 'тёмная' : 'светлая'})`
+    case 'light':
+      return 'Светлая'
+    case 'dark':
+      return 'Тёмная'
+  }
+}
+
+export function ModeSwitcher({ mode, resolvedMode, onCycleMode }: Props) {
+  return (
+    <Tooltip title={`Тема: ${getModeLabel(mode, resolvedMode)}`}>
+      <IconButton color="inherit" onClick={onCycleMode} aria-label="Переключить тему">
+        {resolvedMode === 'dark' ? <LightModeOutlinedIcon /> : <DarkModeOutlinedIcon />}
+      </IconButton>
+    </Tooltip>
+  )
+}

client/src/shared/ui/ModeSwitcher/index.ts

@@ -0,0 +1 @@
+export { ModeSwitcher } from './ModeSwitcher'

client/src/shared/ui/SchemeSwitcher/SchemeSwitcher.tsx

@@ -0,0 +1,61 @@
+import CheckCircleRoundedIcon from '@mui/icons-material/CheckCircleRounded'
+import Box from '@mui/material/Box'
+import IconButton from '@mui/material/IconButton'
+import { Cherry, Hammer, Trees, WavesHorizontal } from 'lucide-react'
+import type { ColorScheme } from '@/shared/model/theme'
+
+type Props = {
+  value: ColorScheme
+  onChange: (scheme: ColorScheme) => void
+  orientation?: 'horizontal' | 'vertical'
+}
+
+const SCHEMES: { key: ColorScheme; color: string; label: string; icon: React.ReactNode }[] = [
+  { key: 'craft', color: '#6D4C41', label: 'Крафт', icon: <Hammer size={14} /> },
+  { key: 'forest', color: '#2E7D32', label: 'Лес', icon: <Trees size={14} /> },
+  { key: 'ocean', color: '#1565C0', label: 'Океан', icon: <WavesHorizontal size={14} /> },
+  { key: 'berry', color: '#7B1FA2', label: 'Ягоды', icon: <Cherry size={14} /> },
+]
+
+export function SchemeSwitcher({ value, onChange, orientation = 'horizontal' }: Props) {
+  return (
+    <Box
+      sx={{
+        display: 'flex',
+        flexDirection: orientation === 'vertical' ? 'column' : 'row',
+        gap: 0.5,
+        alignItems: 'center',
+      }}
+    >
+      {SCHEMES.map((s) => {
+        const active = value === s.key
+        return (
+          <IconButton
+            key={s.key}
+            onClick={() => onChange(s.key)}
+            size="small"
+            title={s.label}
+            sx={{
+              width: 30,
+              height: 30,
+              minWidth: 30,
+              bgcolor: s.color,
+              border: 2,
+              borderColor: active ? 'common.white' : 'rgba(255,255,255,0.4)',
+              boxShadow: active ? `0 0 0 1.5px ${s.color}, 0 0 8px ${s.color}99` : 'none',
+              transform: active ? 'scale(1.1)' : 'scale(1)',
+              color: 'common.white',
+              transition: 'all 0.2s ease',
+              '&:hover': {
+                transform: 'scale(1.2)',
+                bgcolor: s.color,
+              },
+            }}
+          >
+            {active ? <CheckCircleRoundedIcon sx={{ fontSize: 14 }} /> : s.icon}
+          </IconButton>
+        )
+      })}
+    </Box>
+  )
+}

client/src/shared/ui/SchemeSwitcher/index.ts

@@ -0,0 +1 @@
+export { SchemeSwitcher } from './SchemeSwitcher'