Merge improvement/frontend-decompose

Maintenance epic phase 4: formatter/i18n consolidation + a god-component split.
- formatEta + Scheduler countdown 'now' now translated (time.eta.* in EN/HU/DE),
  fixing a trilingual-rule violation; relative-time + total-duration formatters
  consolidated into lib/format.ts; orphaned notifications.time.* keys removed.
- PlayerModal's ~140 lines of pure description link-parsing extracted to
  lib/descriptionLinks.tsx (testable; slims the 659-line component).
Deferred as readability-only / lower-ROI (no duplication removed): AuthCard split
from Welcome, PlaylistRail/usePlaylistYoutubeSync from Playlists, EmptyState/Loading
+ Badge unification, pause/resume+sync query hooks.
Verified: tsc + vite build clean; localdev browser smoke (player opens, Stats renders,
zero console errors / no missing-key warnings).

frontend/src/components/Channels.tsx

@@ -15,7 +15,7 @@ import {
 } from "lucide-react";
 import { api, HttpError, type ManagedChannel, type Tag } from "../lib/api";
 import { useDismiss } from "../lib/useDismiss";
-import { formatEta, formatViews, relativeTime } from "../lib/format";
+import { formatEta, formatTotalHours, formatViews, relativeTime } from "../lib/format";
 import { notify } from "../lib/notifications";
 import Tooltip from "./Tooltip";
 import DataTable, { type Column } from "./DataTable";
@@ -28,13 +28,6 @@ export type ChannelsView = "subscribed" | "discovery";
 
 export type ChannelStatusFilter = "all" | "needs_full" | "fully_synced" | "hidden";
 
-// Compact total-duration label for a whole channel (hours-scale, so H:MM:SS would be huge).
-function fmtTotalDuration(sec: number): string {
-  if (!sec) return "—";
-  const h = Math.round(sec / 3600);
-  return h >= 1 ? `${h.toLocaleString()} h` : `${Math.max(1, Math.round(sec / 60))} m`;
-}
-
 const STATUS_FILTERS: { id: ChannelStatusFilter; labelKey: string }[] = [
   { id: "all", labelKey: "channels.filters.all" },
   { id: "needs_full", labelKey: "channels.filters.needsFull" },
@@ -287,7 +280,7 @@ export default function Channels({
       nowrap: true,
       sortable: true,
       sortValue: (c) => c.total_duration_seconds,
-      render: (c) => <span className="text-muted tabular-nums">{fmtTotalDuration(c.total_duration_seconds)}</span>,
+      render: (c) => <span className="text-muted tabular-nums">{formatTotalHours(c.total_duration_seconds)}</span>,
     },
     {
       key: "types",

frontend/src/components/NotificationsPanel.tsx

@@ -19,7 +19,7 @@ import {
   type VideoHiddenMeta,
   type VideoWatchedMeta,
 } from "../lib/notifications";
-import { channelYouTubeUrl } from "../lib/format";
+import { channelYouTubeUrl, relativeFromMs, relativeTime } from "../lib/format";
 import type { Page } from "../lib/urlState";
 import { LEVEL_STYLE } from "./Toaster";
 
@@ -29,22 +29,6 @@ import { LEVEL_STYLE } from "./Toaster";
 // there's one indicator and one place to look. Transient toasts still pop via the Toaster.
 const POLL_MS = 8000;
 
-function relativeTime(iso: string | null, t: (k: string, o?: any) => string): string {
-  if (!iso) return "";
-  return relativeFromMs(new Date(iso).getTime(), t);
-}
-
-function relativeFromMs(ms: number, t: (k: string, o?: any) => string): string {
-  const secs = Math.max(0, Math.round((Date.now() - ms) / 1000));
-  // Reuse the bell's relative-time strings (notifications.time.*) — same format, no dupes.
-  if (secs < 60) return t("notifications.time.justNow");
-  const mins = Math.round(secs / 60);
-  if (mins < 60) return t("notifications.time.minutes", { count: mins });
-  const hours = Math.round(mins / 60);
-  if (hours < 24) return t("notifications.time.hours", { count: hours });
-  return t("notifications.time.days", { count: Math.round(hours / 24) });
-}
-
 export default function NotificationsPanel({
   filters,
   setFilters,
@@ -253,7 +237,7 @@ function NotificationRow({
         <div className="flex items-baseline gap-2">
           <span className="font-medium text-sm">{title}</span>
           <span className="text-[11px] text-muted shrink-0">
-            {relativeTime(n.created_at, t)}
+            {relativeTime(n.created_at)}
           </span>
         </div>
         {body && <div className="text-sm text-muted mt-0.5">{body}</div>}
@@ -338,7 +322,7 @@ function ClientActivityRow({
         {n.title && <div className="text-sm font-semibold">{n.title}</div>}
         <div className="text-sm break-words">{n.message}</div>
         <div className="flex items-center gap-2 mt-0.5">
-          <span className="text-[11px] text-muted">{relativeFromMs(n.ts, t)}</span>
+          <span className="text-[11px] text-muted">{relativeFromMs(n.ts)}</span>
           {needsAction && (
             <span className="text-[10px] uppercase tracking-wide font-semibold text-accent">
               {t("notifications.actionNeeded")}

frontend/src/components/PlayerModal.tsx

@@ -1,6 +1,5 @@
-import { useEffect, useRef, useState, type ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
 import { useTranslation } from "react-i18next";
-import type { TFunction } from "i18next";
 import { createPortal } from "react-dom";
 import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { AlertTriangle, ArrowLeft, Check, CheckCheck, ExternalLink, SkipBack, SkipForward, X } from "lucide-react";
@@ -8,152 +7,9 @@ import Avatar from "./Avatar";
 import AddToPlaylist from "./AddToPlaylist";
 import { api, type Video } from "../lib/api";
 import { channelYouTubeUrl, formatDuration, formatViews, relativeTime } from "../lib/format";
+import { renderDescription } from "../lib/descriptionLinks";
 import { useBackToClose } from "../lib/history";
 
-// Turn a description into clickable nodes:
-//  - bare timestamps (mm:ss / hh:mm:ss) → seek the inline player
-//  - a YouTube link to the *current* video → seek (to its t= if any)
-//  - a YouTube link to *another* video → load it in the inline player
-//  - emails → mailto:, hashtags → YouTube's hashtag page, other URLs → new tab
-const URL_RE = /(https?:\/\/[^\s<>]+)/g;
-// One pass over plain text for the three inline token kinds (email | hashtag | timestamp).
-const INLINE_RE =
-  /([A-Za-z0-9._%+-]+@[A-Za-z0-9-]+\.[A-Za-z0-9.-]+)|(#[\p{L}\p{N}_]+)|(\b(?:\d{1,2}:)?\d{1,2}:\d{2}\b)/gu;
-
-function tsToSeconds(ts: string): number {
-  const parts = ts.split(":").map((n) => parseInt(n, 10));
-  return parts.length === 3
-    ? parts[0] * 3600 + parts[1] * 60 + parts[2]
-    : parts[0] * 60 + parts[1];
-}
-
-// Parse a YouTube `t`/`start` param: "90", "90s", or "1h2m3s".
-function parseStart(t: string | null): number | null {
-  if (!t) return null;
-  if (/^\d+$/.test(t)) return parseInt(t, 10) || null;
-  const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/);
-  if (!m) return null;
-  const total =
-    parseInt(m[1] || "0", 10) * 3600 +
-    parseInt(m[2] || "0", 10) * 60 +
-    parseInt(m[3] || "0", 10);
-  return total || null;
-}
-
-// Extract a video id (+ optional start) from a YouTube URL, else null.
-function parseYouTube(url: string): { id: string; start: number | null } | null {
-  let u: URL;
-  try {
-    u = new URL(url);
-  } catch {
-    return null;
-  }
-  const host = u.hostname.replace(/^www\./, "");
-  let id: string | null = null;
-  if (host === "youtu.be") {
-    id = u.pathname.slice(1) || null;
-  } else if (host === "youtube.com" || host === "m.youtube.com" || host === "music.youtube.com") {
-    if (u.pathname === "/watch") id = u.searchParams.get("v");
-    else {
-      const m = u.pathname.match(/^\/(?:shorts|embed|live)\/([^/?#]+)/);
-      if (m) id = m[1];
-    }
-  }
-  if (!id) return null;
-  return { id, start: parseStart(u.searchParams.get("t") || u.searchParams.get("start")) };
-}
-
-function renderDescription(
-  text: string,
-  opts: {
-    currentId: string;
-    onSeek: (seconds: number) => void;
-    onLoadVideo: (id: string, start: number | null) => void;
-    t: TFunction;
-  }
-): ReactNode[] {
-  const { t } = opts;
-  const out: ReactNode[] = [];
-  let key = 0;
-  const linkCls = "text-accent hover:underline break-all";
-  // Tidy YouTube descriptions: drop trailing spaces and remove blank lines entirely
-  // (they're just noise in the popover), keeping single line breaks.
-  const clean = text.replace(/[ \t]+\n/g, "\n").replace(/\n{2,}/g, "\n").trim();
-  for (const chunk of clean.split(URL_RE)) {
-    if (/^https?:\/\//.test(chunk)) {
-      const href = chunk.replace(/[.,;:!?)\]]+$/, "");
-      const yt = parseYouTube(href);
-      if (yt) {
-        const sameVideo = yt.id === opts.currentId;
-        out.push(
-          <button
-            key={key++}
-            onClick={() =>
-              sameVideo ? opts.onSeek(yt.start ?? 0) : opts.onLoadVideo(yt.id, yt.start)
-            }
-            className={linkCls}
-            title={sameVideo ? t("player.jumpToTime") : t("player.playInApp")}
-          >
-            {href}
-          </button>
-        );
-      } else {
-        out.push(
-          <a key={key++} href={href} target="_blank" rel="noreferrer" className={linkCls}>
-            {href}
-          </a>
-        );
-      }
-      continue;
-    }
-    // Plain text: pull out emails, hashtags and bare timestamps.
-    INLINE_RE.lastIndex = 0;
-    let last = 0;
-    let m: RegExpExecArray | null;
-    while ((m = INLINE_RE.exec(chunk))) {
-      if (m.index > last) out.push(<span key={key++}>{chunk.slice(last, m.index)}</span>);
-      if (m[1]) {
-        // Email — trim trailing punctuation the domain rule may have swallowed.
-        const email = m[1].replace(/[.,;:]+$/, "");
-        out.push(
-          <a key={key++} href={`mailto:${email}`} className={linkCls}>
-            {email}
-          </a>
-        );
-        if (m[1].length > email.length) out.push(<span key={key++}>{m[1].slice(email.length)}</span>);
-      } else if (m[2]) {
-        // Hashtag → YouTube's hashtag feed (mirrors native YouTube behavior).
-        const tag = m[2].slice(1);
-        out.push(
-          <a
-            key={key++}
-            href={`https://www.youtube.com/hashtag/${encodeURIComponent(tag)}`}
-            target="_blank"
-            rel="noreferrer"
-            className={linkCls}
-          >
-            {m[2]}
-          </a>
-        );
-      } else {
-        const ts = m[3];
-        out.push(
-          <button
-            key={key++}
-            onClick={() => opts.onSeek(tsToSeconds(ts))}
-            className="text-accent hover:underline"
-          >
-            {ts}
-          </button>
-        );
-      }
-      last = m.index + m[0].length;
-    }
-    if (last < chunk.length) out.push(<span key={key++}>{chunk.slice(last)}</span>);
-  }
-  return out;
-}
-
 // Experiment (branch experiment/inline-player): play the video in-app via the
 // YouTube IFrame Player API (not a bare embed) so we can read playback position
 // and resume where the user left off. The modal closes via the in-card Close

frontend/src/components/Scheduler.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
+import i18n from "../i18n";
 import { useMutation, useQueryClient } from "@tanstack/react-query";
 import {
   Activity,
@@ -31,7 +32,7 @@ function secsUntil(iso: string | null): number | null {
 }
 
 function fmtCountdown(s: number): string {
-  if (s <= 0) return "now";
+  if (s <= 0) return i18n.t("time.eta.now");
   if (s < 60) return `${s}s`;
   const m = Math.floor(s / 60);
   if (m < 60) return `${m}m ${s % 60}s`;

frontend/src/i18n/locales/de/notifications.json

@@ -11,11 +11,5 @@
   "openInManager": "Kanalverwaltung",
   "openOnYouTube": "Auf YouTube öffnen",
   "unhidden": "Eingeblendet „{{title}}”",
-  "unwatched": "Als nicht angesehen markiert „{{title}}”",
+  "unwatched": "Als nicht angesehen markiert „{{title}}”"
-  "time": {
-    "justNow": "gerade eben",
-    "minutes": "vor {{count}} Min.",
-    "hours": "vor {{count}} Std.",
-    "days": "vor {{count}} T."
-  }
 }

frontend/src/i18n/locales/de/time.json

@@ -6,5 +6,14 @@
   "daysAgo": "vor {{count}} T.",
   "weeksAgo": "vor {{count}} Wo.",
   "monthsAgo": "vor {{count}} Mon.",
-  "yearsAgo": "vor {{count}} J."
+  "yearsAgo": "vor {{count}} J.",
+  "eta": {
+    "now": "jetzt",
+    "done": "fertig",
+    "lessThanHour": "< 1 Stunde",
+    "hours_one": "~{{count}} Stunde",
+    "hours_other": "~{{count}} Stunden",
+    "days_one": "~{{count}} Tag",
+    "days_other": "~{{count}} Tage"
+  }
 }

frontend/src/i18n/locales/en/notifications.json

@@ -11,11 +11,5 @@
   "openInManager": "Channel manager",
   "openOnYouTube": "Open on YouTube",
   "unhidden": "Unhidden “{{title}}”",
-  "unwatched": "Unwatched “{{title}}”",
+  "unwatched": "Unwatched “{{title}}”"
-  "time": {
-    "justNow": "just now",
-    "minutes": "{{count}}m ago",
-    "hours": "{{count}}h ago",
-    "days": "{{count}}d ago"
-  }
 }

frontend/src/i18n/locales/en/time.json

@@ -6,5 +6,14 @@
   "daysAgo": "{{count}}d ago",
   "weeksAgo": "{{count}} wk ago",
   "monthsAgo": "{{count}} mo ago",
-  "yearsAgo": "{{count}} yr ago"
+  "yearsAgo": "{{count}} yr ago",
+  "eta": {
+    "now": "now",
+    "done": "done",
+    "lessThanHour": "< 1 hour",
+    "hours_one": "~{{count}} hour",
+    "hours_other": "~{{count}} hours",
+    "days_one": "~{{count}} day",
+    "days_other": "~{{count}} days"
+  }
 }

frontend/src/i18n/locales/hu/notifications.json

@@ -11,11 +11,5 @@
   "openInManager": "Csatornakezelő",
   "openOnYouTube": "Megnyitás a YouTube-on",
   "unhidden": "Megjelenítve: „{{title}}”",
-  "unwatched": "Megtekintés visszavonva: „{{title}}”",
+  "unwatched": "Megtekintés visszavonva: „{{title}}”"
-  "time": {
-    "justNow": "az imént",
-    "minutes": "{{count}} perce",
-    "hours": "{{count}} órája",
-    "days": "{{count}} napja"
-  }
 }

frontend/src/i18n/locales/hu/time.json

@@ -6,5 +6,14 @@
   "daysAgo": "{{count}} napja",
   "weeksAgo": "{{count}} hete",
   "monthsAgo": "{{count}} hónapja",
-  "yearsAgo": "{{count}} éve"
+  "yearsAgo": "{{count}} éve",
+  "eta": {
+    "now": "most",
+    "done": "kész",
+    "lessThanHour": "< 1 óra",
+    "hours_one": "~{{count}} óra",
+    "hours_other": "~{{count}} óra",
+    "days_one": "~{{count}} nap",
+    "days_other": "~{{count}} nap"
+  }
 }

frontend/src/lib/descriptionLinks.tsx

@@ -0,0 +1,147 @@
+import type { ReactNode } from "react";
+import type { TFunction } from "i18next";
+
+// Turn a video description into clickable nodes:
+//  - bare timestamps (mm:ss / hh:mm:ss) → seek the inline player
+//  - a YouTube link to the *current* video → seek (to its t= if any)
+//  - a YouTube link to *another* video → load it in the inline player
+//  - emails → mailto:, hashtags → YouTube's hashtag page, other URLs → new tab
+// Pure logic (no React state), factored out of PlayerModal so it's testable on its own.
+const URL_RE = /(https?:\/\/[^\s<>]+)/g;
+// One pass over plain text for the three inline token kinds (email | hashtag | timestamp).
+const INLINE_RE =
+  /([A-Za-z0-9._%+-]+@[A-Za-z0-9-]+\.[A-Za-z0-9.-]+)|(#[\p{L}\p{N}_]+)|(\b(?:\d{1,2}:)?\d{1,2}:\d{2}\b)/gu;
+
+function tsToSeconds(ts: string): number {
+  const parts = ts.split(":").map((n) => parseInt(n, 10));
+  return parts.length === 3
+    ? parts[0] * 3600 + parts[1] * 60 + parts[2]
+    : parts[0] * 60 + parts[1];
+}
+
+// Parse a YouTube `t`/`start` param: "90", "90s", or "1h2m3s".
+function parseStart(t: string | null): number | null {
+  if (!t) return null;
+  if (/^\d+$/.test(t)) return parseInt(t, 10) || null;
+  const m = t.match(/^(?:(\d+)h)?(?:(\d+)m)?(?:(\d+)s)?$/);
+  if (!m) return null;
+  const total =
+    parseInt(m[1] || "0", 10) * 3600 +
+    parseInt(m[2] || "0", 10) * 60 +
+    parseInt(m[3] || "0", 10);
+  return total || null;
+}
+
+// Extract a video id (+ optional start) from a YouTube URL, else null.
+function parseYouTube(url: string): { id: string; start: number | null } | null {
+  let u: URL;
+  try {
+    u = new URL(url);
+  } catch {
+    return null;
+  }
+  const host = u.hostname.replace(/^www\./, "");
+  let id: string | null = null;
+  if (host === "youtu.be") {
+    id = u.pathname.slice(1) || null;
+  } else if (host === "youtube.com" || host === "m.youtube.com" || host === "music.youtube.com") {
+    if (u.pathname === "/watch") id = u.searchParams.get("v");
+    else {
+      const m = u.pathname.match(/^\/(?:shorts|embed|live)\/([^/?#]+)/);
+      if (m) id = m[1];
+    }
+  }
+  if (!id) return null;
+  return { id, start: parseStart(u.searchParams.get("t") || u.searchParams.get("start")) };
+}
+
+export function renderDescription(
+  text: string,
+  opts: {
+    currentId: string;
+    onSeek: (seconds: number) => void;
+    onLoadVideo: (id: string, start: number | null) => void;
+    t: TFunction;
+  }
+): ReactNode[] {
+  const { t } = opts;
+  const out: ReactNode[] = [];
+  let key = 0;
+  const linkCls = "text-accent hover:underline break-all";
+  // Tidy YouTube descriptions: drop trailing spaces and remove blank lines entirely
+  // (they're just noise in the popover), keeping single line breaks.
+  const clean = text.replace(/[ \t]+\n/g, "\n").replace(/\n{2,}/g, "\n").trim();
+  for (const chunk of clean.split(URL_RE)) {
+    if (/^https?:\/\//.test(chunk)) {
+      const href = chunk.replace(/[.,;:!?)\]]+$/, "");
+      const yt = parseYouTube(href);
+      if (yt) {
+        const sameVideo = yt.id === opts.currentId;
+        out.push(
+          <button
+            key={key++}
+            onClick={() =>
+              sameVideo ? opts.onSeek(yt.start ?? 0) : opts.onLoadVideo(yt.id, yt.start)
+            }
+            className={linkCls}
+            title={sameVideo ? t("player.jumpToTime") : t("player.playInApp")}
+          >
+            {href}
+          </button>
+        );
+      } else {
+        out.push(
+          <a key={key++} href={href} target="_blank" rel="noreferrer" className={linkCls}>
+            {href}
+          </a>
+        );
+      }
+      continue;
+    }
+    // Plain text: pull out emails, hashtags and bare timestamps.
+    INLINE_RE.lastIndex = 0;
+    let last = 0;
+    let m: RegExpExecArray | null;
+    while ((m = INLINE_RE.exec(chunk))) {
+      if (m.index > last) out.push(<span key={key++}>{chunk.slice(last, m.index)}</span>);
+      if (m[1]) {
+        // Email — trim trailing punctuation the domain rule may have swallowed.
+        const email = m[1].replace(/[.,;:]+$/, "");
+        out.push(
+          <a key={key++} href={`mailto:${email}`} className={linkCls}>
+            {email}
+          </a>
+        );
+        if (m[1].length > email.length) out.push(<span key={key++}>{m[1].slice(email.length)}</span>);
+      } else if (m[2]) {
+        // Hashtag → YouTube's hashtag feed (mirrors native YouTube behavior).
+        const tag = m[2].slice(1);
+        out.push(
+          <a
+            key={key++}
+            href={`https://www.youtube.com/hashtag/${encodeURIComponent(tag)}`}
+            target="_blank"
+            rel="noreferrer"
+            className={linkCls}
+          >
+            {m[2]}
+          </a>
+        );
+      } else {
+        const ts = m[3];
+        out.push(
+          <button
+            key={key++}
+            onClick={() => opts.onSeek(tsToSeconds(ts))}
+            className="text-accent hover:underline"
+          >
+            {ts}
+          </button>
+        );
+      }
+      last = m.index + m[0].length;
+    }
+    if (last < chunk.length) out.push(<span key={key++}>{chunk.slice(last)}</span>);
+  }
+  return out;
+}

frontend/src/lib/format.ts

@@ -2,8 +2,14 @@ import i18n from "../i18n";
 
 export function relativeTime(iso: string | null): string {
   if (!iso) return "";
-  const then = new Date(iso).getTime();
+  return relativeFromMs(new Date(iso).getTime());
-  const secs = Math.max(0, (Date.now() - then) / 1000);
+}
+
+/** Relative-time label from an epoch-millis timestamp (the ms-based half of relativeTime, for
+ * client-side notifications whose timestamps are already numbers). One implementation, one
+ * set of `time.*` strings — shared instead of re-implemented per component. */
+export function relativeFromMs(ms: number): string {
+  const secs = Math.max(0, (Date.now() - ms) / 1000);
   const units: [number, string][] = [
     [60, "time.secondsAgo"],
     [3600, "time.minutesAgo"],
@@ -51,17 +57,21 @@ export function quotaActionLabel(action: string): string {
   return i18n.t(`quotaActions.${action}`, { defaultValue: action });
 }
 
-/** Coarse, human ETA for a remaining duration in seconds ("~3 hours", "~2 days"). */
+/** Coarse, human ETA for a remaining duration in seconds ("~3 hours", "~2 days"). Translated
+ * via the `time.eta.*` keys (was hardcoded English, violating the trilingual rule). */
 export function formatEta(seconds: number): string {
-  if (seconds <= 0) return "done";
+  if (seconds <= 0) return i18n.t("time.eta.done");
   const hours = seconds / 3600;
-  if (hours < 1) return "< 1 hour";
+  if (hours < 1) return i18n.t("time.eta.lessThanHour");
-  if (hours < 24) {
+  if (hours < 24) return i18n.t("time.eta.hours", { count: Math.round(hours) });
-    const h = Math.round(hours);
+  return i18n.t("time.eta.days", { count: Math.round(hours / 24) });
-    return `~${h} hour${h === 1 ? "" : "s"}`;
 }
-  const d = Math.round(hours / 24);
+
-  return `~${d} day${d === 1 ? "" : "s"}`;
+/** Compact whole-channel total length ("12 h", "45 m"), hours-scale so H:MM:SS isn't huge. */
+export function formatTotalHours(sec: number): string {
+  if (!sec) return "—";
+  const h = Math.round(sec / 3600);
+  return h >= 1 ? `${h.toLocaleString()} h` : `${Math.max(1, Math.round(sec / 60))} m`;
 }
 
 export function formatViews(n: number | null): string {