F: Improve theme switcher

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
+    <div
-      type='button'
-      tabIndex={-1}
       className={clsx(
         'absolute top-0 right-0 z-navigation',
-        'min-h-[2rem] min-w-[2rem] sm:min-w-fit',
+        'min-h-[2rem] min-w-[2rem]',
-        'flex items-center justify-center',
+        'flex items-center justify-center gap-1',
-        'clr-hover',
+        'select-none',
-        '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',
+        height: noNavigationAnimation ? '2rem' : '3rem',
-        width: noNavigationAnimation ? '3rem' : '1.2rem'
+        width: noNavigationAnimation ? '3rem' : '2rem'
       }}
     >
-      {!noNavigationAnimation ? <IconPin /> : null}
+      {!noNavigationAnimation ? (
-      {noNavigationAnimation ? <IconUnpin /> : null}
+        <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>
   );
 }
 

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,19 +104,19 @@ function Modal({
           'border rounded-xl bg-prim-100'
         )}
       >
-        <Overlay position='right-2 top-2'>
+        {helpTopic && !hideHelpWhen?.() ? (
+          <div className='float-left mt-2 ml-2'>
+            <BadgeHelp topic={helpTopic} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} padding='p-0' />
+          </div>
+        ) : null}
+
         <MiniButton
           noPadding
           titleHtml={prepareTooltip('Закрыть диалоговое окно', 'ESC')}
           icon={<IconClose size='1.25rem' />}
+          className='float-right mt-2 mr-2'
           onClick={handleCancel}
         />
-        </Overlay>
-        {helpTopic && !hideHelpWhen?.() ? (
-          <Overlay position='left-2 top-2'>
-            <BadgeHelp topic={helpTopic} className={clsx(PARAMETER.TOOLTIP_WIDTH, 'sm:max-w-[40rem]')} padding='p-0' />
-          </Overlay>
-        ) : null}
 
         {header ? <h1 className='px-12 py-2 select-none'>{header}</h1> : null}
 

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(() => {
+    if (!document.startViewTransition || window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
       setDarkMode(prev => !prev);
+    } else {
+      document.startViewTransition(() => {
+        flushSync(() => {
+          setDarkMode(prev => !prev);
+        });
+      });
+    }
   }, [setDarkMode]);
 
   const mainHeight = useMemo(() => {