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.

1 files changed, 54 insertions, 1 deletions

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;