From 86049dd8b51fffd9f726b95c02fe244613d2f204 Mon Sep 17 00:00:00 2001
From: Anthony GAEREMYNCK <1@anthony.sh>
Date: Sun, 2 Aug 2026 15:57:35 +0200
Subject: [PATCH] feat: add Header with language switcher and theme toggle

Also disables Vitest file parallelism since concurrent astro builds
across test files raced on the shared dist/ output.
---
 .../plans/2026-08-02-ombrora-hub-landing.md   |  2 +
 src/components/Header.astro                   | 20 ++++++++++
 src/components/LanguageSwitcher.astro         | 14 +++++++
 src/components/ThemeToggle.astro              | 37 +++++++++++++++++++
 src/pages/en/index.astro                      |  2 +
 src/pages/fr/index.astro                      |  2 +
 tests/header.test.ts                          | 35 ++++++++++++++++++
 vitest.config.ts                              |  7 ++++
 8 files changed, 119 insertions(+)
 create mode 100644 src/components/Header.astro
 create mode 100644 src/components/LanguageSwitcher.astro
 create mode 100644 src/components/ThemeToggle.astro
 create mode 100644 tests/header.test.ts
 create mode 100644 vitest.config.ts

diff --git a/docs/superpowers/plans/2026-08-02-ombrora-hub-landing.md b/docs/superpowers/plans/2026-08-02-ombrora-hub-landing.md
index 68f95fc..0cd7958 100644
--- a/docs/superpowers/plans/2026-08-02-ombrora-hub-landing.md
+++ b/docs/superpowers/plans/2026-08-02-ombrora-hub-landing.md
@@ -468,6 +468,8 @@ describe('BaseLayout SEO tags and theming', () => {
 
 Note: from this task on, tests call `npm run build` themselves via `beforeAll`, so `npm run test` alone is sufficient going forward. Astro inlines small stylesheets into a `<style>` tag during build rather than emitting an external `<link>` — the test accepts either form.
 
+Once a second build-triggering test file exists (Task 4 onward), Vitest's default parallel file execution races multiple concurrent `astro build` runs against the same `dist/` directory. Add `vitest.config.ts` at the repo root with `test: { fileParallelism: false }` to force test files to run sequentially.
+
 - [ ] **Step 2: Run the test and confirm it fails**
 
 Run: `npm run test -- tests/seo-theme.test.ts`
diff --git a/src/components/Header.astro b/src/components/Header.astro
new file mode 100644
index 0000000..ba0e660
--- /dev/null
+++ b/src/components/Header.astro
@@ -0,0 +1,20 @@
+---
+import LanguageSwitcher from './LanguageSwitcher.astro';
+import ThemeToggle from './ThemeToggle.astro';
+import { getDictionary } from '../i18n';
+import type { Locale } from '../i18n/locale';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const t = getDictionary(locale);
+---
+<header class="site-header">
+  <a class="brand" href={`/${locale}/`}>{t.nav.brand}</a>
+  <div class="header-actions">
+    <LanguageSwitcher locale={locale} />
+    <ThemeToggle locale={locale} />
+  </div>
+</header>
diff --git a/src/components/LanguageSwitcher.astro b/src/components/LanguageSwitcher.astro
new file mode 100644
index 0000000..5e62c61
--- /dev/null
+++ b/src/components/LanguageSwitcher.astro
@@ -0,0 +1,14 @@
+---
+import { otherLocale, swapLocalePath } from '../i18n/locale';
+import type { Locale } from '../i18n/locale';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const target = otherLocale(locale);
+const href = swapLocalePath(Astro.url.pathname, locale, target);
+const label = target === 'en' ? 'English' : 'Français';
+---
+<a class="language-switcher" href={href} hreflang={target}>{label}</a>
diff --git a/src/components/ThemeToggle.astro b/src/components/ThemeToggle.astro
new file mode 100644
index 0000000..63f3c24
--- /dev/null
+++ b/src/components/ThemeToggle.astro
@@ -0,0 +1,37 @@
+---
+import { getDictionary } from '../i18n';
+import type { Locale } from '../i18n/locale';
+
+interface Props {
+  locale: Locale;
+}
+
+const { locale } = Astro.props;
+const t = getDictionary(locale);
+---
+<button
+  type="button"
+  class="theme-toggle"
+  data-label-to-dark={t.theme.toggleToDark}
+  data-label-to-light={t.theme.toggleToLight}
+  aria-label={t.theme.toggleToDark}
+>
+  🌙
+</button>
+<script is:inline>
+  (function () {
+    document.querySelectorAll('.theme-toggle').forEach(function (btn) {
+      btn.addEventListener('click', function () {
+        var html = document.documentElement;
+        var current = html.getAttribute('data-theme');
+        var next = current === 'dark' ? 'light' : 'dark';
+        html.setAttribute('data-theme', next);
+        localStorage.setItem('ombrora-theme', next);
+        btn.setAttribute(
+          'aria-label',
+          next === 'dark' ? btn.dataset.labelToDark : btn.dataset.labelToLight
+        );
+      });
+    });
+  })();
+</script>
diff --git a/src/pages/en/index.astro b/src/pages/en/index.astro
index abe3be6..e2a8e07 100644
--- a/src/pages/en/index.astro
+++ b/src/pages/en/index.astro
@@ -1,8 +1,10 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
+import Header from '../../components/Header.astro';
 
 const locale = 'en';
 ---
 <BaseLayout locale={locale}>
+  <Header locale={locale} />
   <h1>Ombrora</h1>
 </BaseLayout>
diff --git a/src/pages/fr/index.astro b/src/pages/fr/index.astro
index 46fd0cb..859a252 100644
--- a/src/pages/fr/index.astro
+++ b/src/pages/fr/index.astro
@@ -1,8 +1,10 @@
 ---
 import BaseLayout from '../../layouts/BaseLayout.astro';
+import Header from '../../components/Header.astro';
 
 const locale = 'fr';
 ---
 <BaseLayout locale={locale}>
+  <Header locale={locale} />
   <h1>Ombrora</h1>
 </BaseLayout>
diff --git a/tests/header.test.ts b/tests/header.test.ts
new file mode 100644
index 0000000..b2b2537
--- /dev/null
+++ b/tests/header.test.ts
@@ -0,0 +1,35 @@
+import { describe, it, expect, beforeAll } from 'vitest';
+import { execSync } from 'node:child_process';
+import { readFileSync } from 'node:fs';
+
+describe('Header, language switcher, theme toggle', () => {
+  beforeAll(() => {
+    execSync('npm run build', { stdio: 'inherit' });
+  });
+
+  it('renders the brand link on both locales', () => {
+    const en = readFileSync('dist/en/index.html', 'utf-8');
+    const fr = readFileSync('dist/fr/index.html', 'utf-8');
+    expect(en).toContain('class="brand" href="/en/"');
+    expect(fr).toContain('class="brand" href="/fr/"');
+  });
+
+  it('language switcher on /en/ links to /fr/ and vice versa', () => {
+    const en = readFileSync('dist/en/index.html', 'utf-8');
+    const fr = readFileSync('dist/fr/index.html', 'utf-8');
+    expect(en).toContain('class="language-switcher" href="/fr/"');
+    expect(fr).toContain('class="language-switcher" href="/en/"');
+  });
+
+  it('theme toggle button carries localized aria-labels', () => {
+    const en = readFileSync('dist/en/index.html', 'utf-8');
+    const fr = readFileSync('dist/fr/index.html', 'utf-8');
+    expect(en).toContain('aria-label="Switch to dark mode"');
+    expect(fr).toContain('aria-label="Passer en mode sombre"');
+  });
+
+  it('theme toggle click handler flips data-theme and persists to localStorage', () => {
+    const en = readFileSync('dist/en/index.html', 'utf-8');
+    expect(en).toContain("localStorage.setItem('ombrora-theme', next)");
+  });
+});
diff --git a/vitest.config.ts b/vitest.config.ts
new file mode 100644
index 0000000..f3b9767
--- /dev/null
+++ b/vitest.config.ts
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+  test: {
+    fileParallelism: false,
+  },
+});