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

---
 .../src/app/Navigation/ToggleNavigation.tsx   | 52 +++++++++++++------
 .../frontend/src/components/ui/Modal.tsx      | 21 ++++----
 .../src/context/ConceptOptionsContext.tsx     | 11 +++-
 3 files changed, 55 insertions(+), 29 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/components/ui/Modal.tsx b/rsconcept/frontend/src/components/ui/Modal.tsx
index 41b2a31b..76af1d17 100644
--- a/rsconcept/frontend/src/components/ui/Modal.tsx
+++ b/rsconcept/frontend/src/components/ui/Modal.tsx
@@ -12,7 +12,6 @@ import BadgeHelp from '../info/BadgeHelp';
 import { CProps } from '../props';
 import Button from './Button';
 import MiniButton from './MiniButton';
-import Overlay from './Overlay';
 
 export interface ModalProps extends CProps.Styling {
   /** Title of the modal window. */
@@ -105,20 +104,20 @@ function Modal({
           'border rounded-xl bg-prim-100'
         )}
       >
-        <Overlay position='right-2 top-2'>
-          <MiniButton
-            noPadding
-            titleHtml={prepareTooltip('Закрыть диалоговое окно', 'ESC')}
-            icon={<IconClose size='1.25rem' />}
-            onClick={handleCancel}
-          />
-        </Overlay>
         {helpTopic && !hideHelpWhen?.() ? (
-          <Overlay position='left-2 top-2'>
+          <div className='float-left mt-2 ml-2'>
             <BadgeHelp topic={helpTopic} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} padding='p-0' />
-          </Overlay>
+          </div>
         ) : null}
 
+        <MiniButton
+          noPadding
+          titleHtml={prepareTooltip('Закрыть диалоговое окно', 'ESC')}
+          icon={<IconClose size='1.25rem' />}
+          className='float-right mt-2 mr-2'
+          onClick={handleCancel}
+        />
+
         {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
 
         <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(() => {