feat(schedule): add sub/dub toggle to the schedule page

Add a Sub/Dub toggle to /schedule, selected via a ?type= query param and defaulting to the countdown source but independent of it. Relabel the nav item from "Subtitle Schedule" to "Anime Schedule" to reflect both tracks.

6 files changed, 74 insertions, 7 deletions

diff --git a/src/lib/CommandPalette/actions.ts b/src/lib/CommandPalette/actions.ts
index 19d7394e..d10a0b88 100644
--- a/src/lib/CommandPalette/actions.ts
+++ b/src/lib/CommandPalette/actions.ts
@@ -80,9 +80,9 @@ export const defaultActions = (): CommandPaletteAction[] => {
 			],
 		},
 		{
-			name: l.navigation.subtitleSchedule,
+			name: l.navigation.animeSchedule,
 			url: "/schedule",
-			tags: ["anime", "subs"],
+			tags: ["anime", "subs", "dubs", "schedule"],
 		},
 		{
 			name: l.navigation.hololive,
diff --git a/src/lib/Locale/english.ts b/src/lib/Locale/english.ts
index 91a3bdb3..fafcf5ef 100644
--- a/src/lib/Locale/english.ts
+++ b/src/lib/Locale/english.ts
@@ -6,7 +6,7 @@ const English: Locale = {
 	navigation: {
 		home: "Home",
 		completed: "Completed",
-		subtitleSchedule: "Subtitle Schedule",
+		animeSchedule: "Anime Schedule",
 		newReleases: "New Releases",
 		tools: "Tools",
 		settings: "Settings",
@@ -704,6 +704,10 @@ const English: Locale = {
 		continuingFromPreviousSeason: "Continuing from previous season",
 		loadingSubtitle: "Loading subtitle schedule ...",
 		loadingSchedule: "Loading schedule ...",
+		tracks: {
+			sub: "Sub",
+			dub: "Dub",
+		},
 	},
 	events: {
 		summary: "Events",
diff --git a/src/lib/Locale/japanese.ts b/src/lib/Locale/japanese.ts
index 5c905aea..60b92506 100644
--- a/src/lib/Locale/japanese.ts
+++ b/src/lib/Locale/japanese.ts
@@ -6,7 +6,7 @@ const Japanese: Locale = {
 	navigation: {
 		home: "ホーム",
 		completed: "完結メディア",
-		subtitleSchedule: "字幕放送スケジュール",
+		animeSchedule: "アニメスケジュール",
 		newReleases: "新着リリース",
 		tools: "ツール",
 		settings: "設定",
@@ -18,6 +18,12 @@ const Japanese: Locale = {
 		myProfile: "プロフィール",
 		myBadgeWall: "バッジウォール",
 	},
+	schedule: {
+		tracks: {
+			sub: "字幕",
+			dub: "吹き替え",
+		},
+	},
 	settings: {
 		fields: {
 			notice: "お知らせ：",
diff --git a/src/lib/Locale/layout.ts b/src/lib/Locale/layout.ts
index 99466aa2..e53d0884 100644
--- a/src/lib/Locale/layout.ts
+++ b/src/lib/Locale/layout.ts
@@ -12,7 +12,7 @@ export interface Locale {
 	navigation: {
 		home: LocaleValue;
 		completed: LocaleValue;
-		subtitleSchedule: LocaleValue;
+		animeSchedule: LocaleValue;
 		newReleases: LocaleValue;
 		tools: LocaleValue;
 		settings: LocaleValue;
@@ -636,6 +636,10 @@ export interface Locale {
 		continuingFromPreviousSeason?: LocaleValue;
 		loadingSubtitle?: LocaleValue;
 		loadingSchedule?: LocaleValue;
+		tracks?: {
+			sub: LocaleValue;
+			dub: LocaleValue;
+		};
 	};
 	events?: {
 		summary?: LocaleValue;
diff --git a/src/lib/Schedule/Days.svelte b/src/lib/Schedule/Days.svelte
index 987bc816..754d3f61 100644
--- a/src/lib/Schedule/Days.svelte
+++ b/src/lib/Schedule/Days.svelte
@@ -23,6 +23,7 @@ import LinkedTooltip from "$lib/Tooltip/LinkedTooltip.svelte";
 import anime from "$stores/anime";
 import identity from "$stores/identity";
 import lastPruneTimes from "$stores/lastPruneTimes";
+import locale from "$stores/locale";
 
 export let schedule: AiringSchedule;
 export let scheduledMedia: Partial<Media[]>;
@@ -36,7 +37,33 @@ let day: string | null = parseOrDefault(urlParameters, "day", null);
 
 let mediaListPromise: Promise<Media[]>;
 
-$: source = ($settings.countdownSource === "dub" ? "dub" : "sub") as AirType;
+const trackParameter: string | null = parseOrDefault(
+	urlParameters,
+	"type",
+	null,
+);
+
+// The view track defaults to the countdown source but is overridable via the
+// in-page toggle and a ?type= query param, independent of the global setting.
+let selectedTrack: AirType =
+	trackParameter === "sub" || trackParameter === "dub"
+		? trackParameter
+		: $settings.countdownSource === "dub"
+			? "dub"
+			: "sub";
+
+$: source = selectedTrack;
+
+const selectTrack = (track: AirType) => {
+	selectedTrack = track;
+
+	if (browser) {
+		const url = new URL(window.location.href);
+
+		url.searchParams.set("type", track);
+		history.replaceState(history.state, "", url);
+	}
+};
 
 onMount(async () => {
 	if (user === undefined || $identity.id === -2)
@@ -135,6 +162,25 @@ const episode = (media: Media, weekday: string) => {
 };
 </script>
 
+<div class="track-toggle" role="group" aria-label="Schedule track">
+  <button
+    type="button"
+    aria-pressed={source === 'sub'}
+    class:button-action={source === 'sub'}
+    onclick={() => selectTrack('sub')}
+  >
+    {$locale().schedule?.tracks?.sub ?? 'Sub'}
+  </button>
+  <button
+    type="button"
+    aria-pressed={source === 'dub'}
+    class:button-action={source === 'dub'}
+    onclick={() => selectTrack('dub')}
+  >
+    {$locale().schedule?.tracks?.dub ?? 'Dub'}
+  </button>
+</div>
+
 {#await mediaListPromise}
   <Message message="Loading media lists ..." />
 
@@ -237,6 +283,13 @@ const episode = (media: Media, weekday: string) => {
 <style lang="scss">
   @use "breakpoints" as *;
 
+  .track-toggle {
+    grid-column: 1 / -1;
+    display: flex;
+    gap: 0.5em;
+    margin-bottom: 0.5em;
+  }
+
   .countdown {
     white-space: nowrap;
     float: right;
diff --git a/src/lib/Settings/Categories/Display.svelte b/src/lib/Settings/Categories/Display.svelte
index fba40a56..47f79648 100644
--- a/src/lib/Settings/Categories/Display.svelte
+++ b/src/lib/Settings/Categories/Display.svelte
@@ -299,7 +299,7 @@ const onHelperChange = () => {
 />
 <SettingCheckboxToggle
   setting="displayScheduleListMode"
-  text={$locale().navigation.subtitleSchedule}
+  text={$locale().navigation.animeSchedule}
   lineBreak={false}
   invert
 />