From 8fc5d72576a91de86bceebbb83c069024ef0834b Mon Sep 17 00:00:00 2001
From: iamdoubz <>
Date: Sun, 12 Jul 2026 12:53:22 -0500
Subject: [PATCH] feat(i18n): convert ThemeToggle to t() (Batch F)

---
 src/lib/components/ThemeToggle.svelte | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/lib/components/ThemeToggle.svelte b/src/lib/components/ThemeToggle.svelte
index 3fca540..601524b 100644
--- a/src/lib/components/ThemeToggle.svelte
+++ b/src/lib/components/ThemeToggle.svelte
@@ -3,6 +3,7 @@
   // plain <select> — three icon buttons instead of a text dropdown, defaults
   // to "system" so the app follows the OS until the user picks an override.
   import { Monitor, Sun, Moon } from "@lucide/svelte";
+  import { t } from "../i18n/index.svelte";
 
   interface Props {
     value: "system" | "light" | "dark";
@@ -10,21 +11,23 @@
   }
   let { value, onchange }: Props = $props();
 
+  // labelKey resolves through t() in the template so a language switch relabels
+  // the buttons (a t() call in this module-level const would evaluate once).
   const options = [
-    { id: "system", label: "Match system", Icon: Monitor },
-    { id: "light", label: "Light", Icon: Sun },
-    { id: "dark", label: "Dark", Icon: Moon },
+    { id: "system", labelKey: "theme.system", Icon: Monitor },
+    { id: "light", labelKey: "theme.light", Icon: Sun },
+    { id: "dark", labelKey: "theme.dark", Icon: Moon },
   ] as const;
 </script>
 
-<div class="toggle" role="radiogroup" aria-label="Theme">
+<div class="toggle" role="radiogroup" aria-label={t("theme.group")}>
   {#each options as opt (opt.id)}
     <button
       role="radio"
       aria-checked={value === opt.id}
       class:active={value === opt.id}
-      title={opt.label}
-      aria-label={opt.label}
+      title={t(opt.labelKey)}
+      aria-label={t(opt.labelKey)}
       onclick={() => onchange(opt.id)}
     >
       <opt.Icon size={15} strokeWidth={2} aria-hidden="true" />