Claude improvements

src/components/Header.astro

@@ -1,37 +1,37 @@
 ---
-import { site } from '../lib/site';
+import { navItems, site } from '../lib/site';
 
 const current = Astro.url.pathname;
 
-const navItems = [
-  { href: '/articles/', label: 'Articles' },
-  { href: '/projects/', label: 'Projects' },
-  { href: '/about/', label: 'About' },
-  { href: '/rss.xml', label: 'RSS' },
-];
-
 function isCurrent(href: string) {
-  return href !== '/rss.xml' && current.startsWith(href);
+  if (href === '/') return current === '/';
+  return current.startsWith(href);
 }
 ---
 
 <a class="skip-link" href="#content">Skip to content</a>
-<header class="site-header" aria-label="Site header">
+<header class="site-header">
   <a class="site-title" href="/">{site.name}</a>
   <div class="header-actions">
-    <nav class="site-nav" aria-label="Primary navigation">
+    <nav class="site-nav" aria-label="Primary">
       {
-        navItems.map((item) => (
-          <a href={item.href} aria-current={isCurrent(item.href) ? 'page' : undefined}>
-            {item.label}
-          </a>
-        ))
+        navItems
+          .filter((item) => item.href !== '/')
+          .map((item) => (
+            <a href={item.href} aria-current={isCurrent(item.href) ? 'page' : undefined}>
+              {item.label}
+            </a>
+          ))
       }
     </nav>
-    <label class="theme-control" for="theme-switcher">
-      <span class="sr-only">Use dark theme</span>
-      <input id="theme-switcher" class="theme-switcher" type="checkbox" name="theme" />
-    </label>
+    <button
+      id="theme-switcher"
+      class="theme-switcher"
+      type="button"
+      aria-label="Toggle dark theme"
+      aria-pressed="false"
+    >
+    </button>
   </div>
 </header>
 
@@ -46,15 +46,11 @@ function isCurrent(href: string) {
       try {
         const value = localStorage.getItem(key);
         if (value === 'light' || value === 'dark') return value;
-
         const legacyValue = localStorage.getItem(legacyKey);
-        if (legacyValue !== null) {
-          return JSON.parse(legacyValue) ? 'dark' : 'light';
-        }
+        if (legacyValue !== null) return JSON.parse(legacyValue) ? 'dark' : 'light';
       } catch {
         return null;
       }
-
       return null;
     };
 
@@ -63,22 +59,33 @@ function isCurrent(href: string) {
     const apply = (theme) => {
       document.documentElement.dataset.theme = theme;
       document.documentElement.style.colorScheme = theme;
-      switcher.checked = theme === 'dark';
+      if (switcher) switcher.setAttribute('aria-pressed', String(theme === 'dark'));
     };
 
-    if (!switcher) return;
-
     apply(getStored() || getSystemTheme());
 
-    switcher.addEventListener('change', () => {
-      const theme = switcher.checked ? 'dark' : 'light';
+    if (!switcher) return;
+
+    const reduced = matchMedia('(prefers-reduced-motion: reduce)');
+
+    const runApply = (theme) => {
+      if (!reduced.matches && typeof document.startViewTransition === 'function') {
+        document.startViewTransition(() => apply(theme));
+      } else {
+        apply(theme);
+      }
+    };
+
+    switcher.addEventListener('click', () => {
+      const current = switcher.getAttribute('aria-pressed') === 'true' ? 'dark' : 'light';
+      const next = current === 'dark' ? 'light' : 'dark';
       try {
-        localStorage.setItem(key, theme);
-        localStorage.setItem(legacyKey, JSON.stringify(theme === 'dark'));
+        localStorage.setItem(key, next);
+        localStorage.setItem(legacyKey, JSON.stringify(next === 'dark'));
       } catch {
         // The switch still applies for the current page when storage is unavailable.
       }
-      apply(theme);
+      runApply(next);
     });
 
     media.addEventListener('change', () => {