another step for constructing base project

2026-06-17 22:53:49 +03:30
parent 5b4c0d183f
commit 5388bea320
76 changed files with 3836 additions and 1961 deletions
@@ -0,0 +1,42 @@
+'use client';
+/*
+ * Tiny components that are the ONLY React nodes subscribed to useColorScheme().
+ * When the user flips the theme:
+ *   1. useColorScheme().setMode() sets data-mui-color-scheme on <html>
+ *   2. CSS custom properties resolve to new values → browser repaints
+ *   3. React re-renders ONLY these two components (icon label / switch state)
+ * Nothing above them in the tree is touched.
+ */
+import { FormControlLabel, Switch, Tooltip } from '@mui/material';
+import { useColorScheme } from '@mui/material/styles';
+import { useTranslations } from 'next-intl';
+import { AppIconButton } from '@/components';
+
+/** Icon button for the TopBar dark-mode toggle. */
+export function DarkModeToggleButton() {
+  const { colorScheme, setMode } = useColorScheme();
+  const t = useTranslations('common');
+  const isDark = colorScheme === 'dark';
+  return (
+    <AppIconButton
+      icon={isDark ? 'day' : 'night'}
+      title={isDark ? t('light_mode') : t('dark_mode')}
+      onClick={() => setMode(isDark ? 'light' : 'dark')}
+    />
+  );
+}
+
+/** Labeled switch for the SideBar dark-mode toggle. */
+export function DarkModeFormSwitch() {
+  const { colorScheme, setMode } = useColorScheme();
+  const t = useTranslations('common');
+  const isDark = colorScheme === 'dark';
+  return (
+    <Tooltip title={isDark ? t('light_mode') : t('dark_mode')}>
+      <FormControlLabel
+        label={isDark ? t('dark_mode') : t('light_mode')}
+        control={<Switch checked={isDark} onChange={() => setMode(isDark ? 'light' : 'dark')} />}
+      />
+    </Tooltip>
+  );
+}