From 48ce020c8fc73f5a5df2c05b63145f24c499300b Mon Sep 17 00:00:00 2001
From: Ivan <8611739+IRBorisov@users.noreply.github.com>
Date: Thu, 19 Dec 2024 18:48:43 +0300
Subject: [PATCH] F: Improve theme switcher

---
 .../src/app/Navigation/ToggleNavigation.tsx   | 52 +++++++++++++------
 .../src/context/ConceptOptionsContext.tsx     | 11 +++-
 2 files changed, 45 insertions(+), 18 deletions(-)

diff --git a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
index 3f22354d..5a696366 100644
--- a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
@@ -1,35 +1,53 @@
 import clsx from 'clsx';
 
-import { IconPin, IconUnpin } from '@/components/Icons';
+import { IconDarkTheme, IconLightTheme, IconPin, IconUnpin } from '@/components/Icons';
 import { useConceptOptions } from '@/context/ConceptOptionsContext';
 import { globals, PARAMETER } from '@/utils/constants';
 
 function ToggleNavigation() {
-  const { noNavigationAnimation, toggleNoNavigation } = useConceptOptions();
+  const { noNavigationAnimation, noNavigation, toggleNoNavigation, toggleDarkMode, darkMode } = useConceptOptions();
+  const iconSize = !noNavigationAnimation ? '0.75rem' : '1rem';
   return (
-    <button
-      type='button'
-      tabIndex={-1}
+    <div
       className={clsx(
         'absolute top-0 right-0 z-navigation',
-        'min-h-[2rem] min-w-[2rem] sm:min-w-fit',
-        'flex items-center justify-center',
-        'clr-hover',
-        'select-none'
+        'min-h-[2rem] min-w-[2rem]',
+        'flex items-center justify-center gap-1',
+        'select-none',
+        !noNavigation && 'flex-col-reverse'
       )}
-      onClick={toggleNoNavigation}
-      data-tooltip-id={globals.tooltip}
-      data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}
       style={{
         transitionProperty: 'height, width, background-color',
         transitionDuration: `${PARAMETER.moveDuration}ms`,
-        height: noNavigationAnimation ? '1.2rem' : '3rem',
-        width: noNavigationAnimation ? '3rem' : '1.2rem'
+        height: noNavigationAnimation ? '2rem' : '3rem',
+        width: noNavigationAnimation ? '3rem' : '2rem'
       }}
     >
-      {!noNavigationAnimation ? <IconPin /> : null}
-      {noNavigationAnimation ? <IconUnpin /> : null}
-    </button>
+      {!noNavigationAnimation ? (
+        <button
+          tabIndex={-1}
+          type='button'
+          className='p-1 rounded-full'
+          onClick={toggleDarkMode}
+          data-tooltip-id={globals.tooltip}
+          data-tooltip-content={darkMode ? 'Тема: Темная' : 'Тема: Светлая'}
+        >
+          {darkMode ? <IconDarkTheme size='0.75rem' /> : null}
+          {!darkMode ? <IconLightTheme size='0.75rem' /> : null}
+        </button>
+      ) : null}
+      <button
+        tabIndex={-1}
+        type='button'
+        className='p-1 rounded-full'
+        onClick={toggleNoNavigation}
+        data-tooltip-id={globals.tooltip}
+        data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}
+      >
+        {!noNavigationAnimation ? <IconPin size={iconSize} /> : null}
+        {noNavigationAnimation ? <IconUnpin size={iconSize} /> : null}
+      </button>
+    </div>
   );
 }
 
diff --git a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
index 118337e5..ffdd8416 100644
--- a/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
+++ b/rsconcept/frontend/src/context/ConceptOptionsContext.tsx
@@ -1,6 +1,7 @@
 'use client';
 
 import { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
+import { flushSync } from 'react-dom';
 
 import Tooltip from '@/components/ui/Tooltip';
 import useLocalStorage from '@/hooks/useLocalStorage';
@@ -99,7 +100,15 @@ export const OptionsState = ({ children }: React.PropsWithChildren) => {
   );
 
   const toggleDarkMode = useCallback(() => {
-    setDarkMode(prev => !prev);
+    if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
+      setDarkMode(prev => !prev);
+    } else {
+      document.startViewTransition(() => {
+        flushSync(() => {
+          setDarkMode(prev => !prev);
+        });
+      });
+    }
   }, [setDarkMode]);
 
   const mainHeight = useMemo(() => {