feat: добавить навигацию и fallback для документаций

- подключён рендер task-list чекбоксов в VitePress

- добавлена общая навигация к списку документаций и репозиторию

- синхронизирована тема главной страницы и VitePress

- добавлен HTML-каркас главной страницы для клиентов без JS

- обновлено авторство документации в футере

src/App.css

@@ -378,6 +378,15 @@
   text-align: center;
 }
 
+.footer a {
+  color: var(--text-secondary);
+  text-decoration: none;
+}
+
+.footer a:hover {
+  color: var(--accent-cool);
+}
+
 @media (max-width: 768px) {
   .page {
     justify-content: flex-start;

src/App.tsx

@@ -3,15 +3,17 @@ import { useEffect, useLayoutEffect, useState } from 'react'
 import { docs } from './config/docs.config'
 import './App.css'
 
-type ThemeMode = 'system' | 'dark' | 'light'
-type ResolvedTheme = Exclude<ThemeMode, 'system'>
+type ThemeMode = 'auto' | 'dark' | 'light'
+type ResolvedTheme = Exclude<ThemeMode, 'auto'>
 
 const DARK_THEME_QUERY = '(prefers-color-scheme: dark)'
-const THEME_STORAGE_KEY = 'all-docs-theme'
+const THEME_STORAGE_KEY = 'vitepress-theme-appearance'
+const LEGACY_THEME_STORAGE_KEY = 'all-docs-theme'
 const repositoryUrl = 'https://gromlab.ru/gromov/docs'
+const authorUrl = 'https://gromlab.ru/gromov'
 
 const themeOptions: ReadonlyArray<{
-  value: Exclude<ThemeMode, 'system'>
+  value: Exclude<ThemeMode, 'auto'>
   ariaLabel: string
   title: string
 }> = [
@@ -55,7 +57,7 @@ const themeIconByMode = {
 const canUseDom = () => typeof window !== 'undefined' && typeof document !== 'undefined'
 
 const isThemeMode = (value: string | null): value is ThemeMode => {
-  return value === 'system' || value === 'dark' || value === 'light'
+  return value === 'auto' || value === 'dark' || value === 'light'
 }
 
 const getSystemTheme = (): ResolvedTheme => {
@@ -65,15 +67,20 @@ const getSystemTheme = (): ResolvedTheme => {
 }
 
 const resolveTheme = (theme: ThemeMode): ResolvedTheme => {
-  return theme === 'system' ? getSystemTheme() : theme
+  return theme === 'auto' ? getSystemTheme() : theme
 }
 
 const getStoredTheme = (): ThemeMode => {
-  if (!canUseDom()) return 'dark'
+  if (!canUseDom()) return 'auto'
 
   const storedTheme = window.localStorage.getItem(THEME_STORAGE_KEY)
+  const legacyTheme = window.localStorage.getItem(LEGACY_THEME_STORAGE_KEY)
 
-  return isThemeMode(storedTheme) ? storedTheme : 'dark'
+  if (isThemeMode(storedTheme)) return storedTheme
+  if (legacyTheme === 'system') return 'auto'
+  if (isThemeMode(legacyTheme)) return legacyTheme
+
+  return 'auto'
 }
 
 const applyTheme = (theme: ThemeMode) => {
@@ -82,14 +89,11 @@ const applyTheme = (theme: ThemeMode) => {
   const resolvedTheme = resolveTheme(theme)
 
   document.documentElement.dataset.theme = theme
+  document.documentElement.classList.toggle('dark', resolvedTheme === 'dark')
   document.documentElement.style.colorScheme = resolvedTheme
 
-  if (theme === 'system') {
-    window.localStorage.removeItem(THEME_STORAGE_KEY)
-    return
-  }
-
   window.localStorage.setItem(THEME_STORAGE_KEY, theme)
+  window.localStorage.removeItem(LEGACY_THEME_STORAGE_KEY)
 }
 
 function useTheme() {
@@ -106,11 +110,12 @@ function useTheme() {
 
     const mediaQuery = window.matchMedia(DARK_THEME_QUERY)
     const handleSystemThemeChange = () => {
-      if (theme !== 'system') return
+      if (theme !== 'auto') return
 
       const nextResolvedTheme = resolveTheme(theme)
 
       document.documentElement.style.colorScheme = nextResolvedTheme
+      document.documentElement.classList.toggle('dark', nextResolvedTheme === 'dark')
       setResolvedTheme(nextResolvedTheme)
     }
 
@@ -119,13 +124,34 @@ function useTheme() {
     return () => mediaQuery.removeEventListener('change', handleSystemThemeChange)
   }, [theme])
 
+  useEffect(() => {
+    if (!canUseDom()) return undefined
+
+    const syncStoredTheme = () => {
+      setTheme(getStoredTheme())
+    }
+    const handleStorageChange = (event: StorageEvent) => {
+      if (event.key === THEME_STORAGE_KEY || event.key === LEGACY_THEME_STORAGE_KEY) {
+        syncStoredTheme()
+      }
+    }
+
+    window.addEventListener('storage', handleStorageChange)
+    window.addEventListener('focus', syncStoredTheme)
+
+    return () => {
+      window.removeEventListener('storage', handleStorageChange)
+      window.removeEventListener('focus', syncStoredTheme)
+    }
+  }, [])
+
   return { theme, resolvedTheme, setTheme }
 }
 
 function ThemeToggle() {
   const { theme, resolvedTheme, setTheme } = useTheme()
-  const toggleTheme = (value: Exclude<ThemeMode, 'system'>) => {
-    setTheme(theme === value ? 'system' : value)
+  const toggleTheme = (value: Exclude<ThemeMode, 'auto'>) => {
+    setTheme(theme === value ? 'auto' : value)
   }
 
   return (
@@ -282,7 +308,9 @@ function App() {
         })}
       </section>
 
-      <footer className="footer">Рабочее пространство документаций</footer>
+      <footer className="footer">
+        Автор документации: <a href={authorUrl}>Сергей Громов</a>
+      </footer>
     </main>
   )
 }