refactor(locale): move hardcoded UI strings into english locale

Adds optional namespaces (common, errors, commandPalette, headTitle,
notifications, schedule, events, home, reader, routes, badgePreview,
badgeWall) and extends existing ones (settings.*, lists.*, tools.*,
user.*, hololive.*) on the Locale interface. New fields are optional
so japanese.ts can omit them; svelte-i18n's fallbackLocale handles
the runtime miss.

HeadTitle gains an optional routeKey prop for type-safe lookup.
defaultActions becomes a factory so the command palette re-reads
locale on language toggle. The existing JP feedback translation
in routes/settings is preserved via japanese.ts.

Out of scope (kept hardcoded): service-worker.ts, app.html,
Landing*.svelte, tools.ts registry, Easter Event 2025 pages.

1 files changed, 21 insertions, 13 deletions

diff --git a/src/lib/List/MediaRoulette.svelte b/src/lib/List/MediaRoulette.svelte
index 3fbc89d6..dc9a2269 100644
--- a/src/lib/List/MediaRoulette.svelte
+++ b/src/lib/List/MediaRoulette.svelte
@@ -3,6 +3,7 @@ import type { Media } from "$lib/Data/AniList/media";
 import ParallaxImage from "$lib/Image/ParallaxImage.svelte";
 import { outboundLink } from "$lib/Media/links";
 import settings from "$stores/settings";
+import locale from "$stores/locale";
 import { mediaTitle } from "./mediaTitle";
 
 interface Props {
@@ -96,14 +97,16 @@ const handleOverlayClick = (e: MouseEvent) => {
   }}
 >
   <div class="roulette-container card {isClosing ? 'fade-out' : 'fade-in'}">
-    <button class="close-button" onclick={handleClose} aria-label="Close roulette">&times;</button>
+    <button class="close-button" onclick={handleClose} aria-label={$locale().lists.roulette?.closeAriaLabel}
+      >&times;</button
+    >
 
     <h3 class="roulette-title">
-      {type === 'anime' ? 'Watch' : 'Read'} Roulette
+      {type === 'anime' ? $locale().lists.roulette?.watchTitle : $locale().lists.roulette?.readTitle}
     </h3>
 
     {#if media.length === 0}
-      <p>No media available for roulette.</p>
+      <p>{$locale().lists.roulette?.noMedia}</p>
     {:else}
       <div class="roulette-display" class:spinning={isSpinning} class:result={showResult}>
         {#if currentMedia}
@@ -129,13 +132,18 @@ const handleOverlayClick = (e: MouseEvent) => {
                   target="_blank"
                   class="view-link"
                 >
-                  View on {$settings.displayOutboundLinksTo === 'anilist'
-                    ? 'AniList'
-                    : $settings.displayOutboundLinksTo === 'livechartme'
-                      ? 'LiveChart.me'
-                      : $settings.displayOutboundLinksTo === 'animeschedule'
-                        ? 'AnimeSchedule'
-                        : 'MyAnimeList'}
+                  {$locale({
+                    values: {
+                      site:
+                        $settings.displayOutboundLinksTo === 'anilist'
+                          ? 'AniList'
+                          : $settings.displayOutboundLinksTo === 'livechartme'
+                            ? 'LiveChart.me'
+                            : $settings.displayOutboundLinksTo === 'animeschedule'
+                              ? 'AnimeSchedule'
+                              : 'MyAnimeList'
+                    }
+                  }).lists.roulette?.viewOn}
                 </a>
               {/if}
             </div>
@@ -145,11 +153,11 @@ const handleOverlayClick = (e: MouseEvent) => {
 
       <div class="roulette-actions">
         {#if !isSpinning && !showResult}
-          <button onclick={startRoulette}>Spin!</button>
+          <button onclick={startRoulette}>{$locale().lists.roulette?.spin}</button>
         {:else if showResult}
-          <button onclick={startRoulette}>Spin Again</button>
+          <button onclick={startRoulette}>{$locale().lists.roulette?.spinAgain}</button>
         {:else}
-          <button disabled>Spinning ...</button>
+          <button disabled>{$locale().lists.roulette?.spinning}</button>
         {/if}
       </div>
     {/if}