feat(m5a): channel manager, tabbed settings panel, per-user sync status

Backend: /api/channels (list + PATCH priority/hidden + attach/detach user tags),
user-tag CRUD on /api/tags, /api/sync/my-status (per-user channel sync counts).
Frontend: feed|channels page nav (URL-synced) from the account menu; a slide-in
tabbed Settings panel (Appearance, Notifications=6b sound+duration, Sync status +
actions + admin pause/resume, Account); a channel manager with priority, hide,
per-channel user tags, sync badges and 'view in feed'. Notifications now honor the
configurable sound + auto-dismiss settings.

frontend/src/lib/api.ts

@@ -133,6 +133,35 @@ export interface SyncStatus {
   is_admin: boolean;
 }
 
+export interface MyStatus {
+  channels_total: number;
+  channels_details_synced: number;
+  channels_recent_synced: number;
+  channels_deep_done: number;
+  channels_recent_pending: number;
+  channels_deep_pending: number;
+  my_videos: number;
+  quota_used_today: number;
+  quota_remaining_today: number;
+  paused: boolean;
+}
+
+export interface ManagedChannel {
+  id: string;
+  title: string | null;
+  handle: string | null;
+  thumbnail_url: string | null;
+  subscriber_count: number | null;
+  video_count: number | null;
+  stored_videos: number;
+  priority: number;
+  hidden: boolean;
+  tag_ids: number[];
+  details_synced: boolean;
+  recent_synced: boolean;
+  backfill_done: boolean;
+}
+
 export const api = {
   me: (): Promise<Me> => req("/api/me"),
   tags: (): Promise<Tag[]> => req("/api/tags"),
@@ -147,6 +176,24 @@ export const api = {
   resumeSync: () => req("/api/sync/resume", { method: "POST" }),
   savePrefs: (p: Record<string, any>) =>
     req("/api/me/preferences", { method: "PUT", body: JSON.stringify(p) }),
+
+  // --- channel manager ---
+  myStatus: (): Promise<MyStatus> => req("/api/sync/my-status"),
+  channels: (): Promise<ManagedChannel[]> => req("/api/channels"),
+  updateChannel: (id: string, patch: { priority?: number; hidden?: boolean }) =>
+    req(`/api/channels/${id}`, { method: "PATCH", body: JSON.stringify(patch) }),
+  attachChannelTag: (id: string, tagId: number) =>
+    req(`/api/channels/${id}/tags`, { method: "POST", body: JSON.stringify({ tag_id: tagId }) }),
+  detachChannelTag: (id: string, tagId: number) =>
+    req(`/api/channels/${id}/tags/${tagId}`, { method: "DELETE" }),
+  syncSubscriptions: () => req("/api/sync/subscriptions", { method: "POST" }),
+
+  // --- user tags ---
+  createTag: (t: { name: string; color?: string; category?: string }) =>
+    req("/api/tags", { method: "POST", body: JSON.stringify(t) }),
+  updateTag: (id: number, patch: { name?: string; color?: string }) =>
+    req(`/api/tags/${id}`, { method: "PATCH", body: JSON.stringify(patch) }),
+  deleteTag: (id: number) => req(`/api/tags/${id}`, { method: "DELETE" }),
 };
 
 export { HttpError };

frontend/src/lib/notifications.ts

@@ -44,10 +44,58 @@ export interface NotifyInput {
 }
 
 const HISTORY_KEY = "subfeed.notifications";
+const SETTINGS_KEY = "subfeed.notifSettings";
 const MAX_HISTORY = 100;
-const DEFAULT_TTL = 6000;
 const ERROR_TTL = 15000;
 
+// 6b: per-account notification settings (persisted by the Settings panel into the
+// server `preferences`, mirrored to localStorage so they apply before login).
+export interface NotifSettings {
+  sound: boolean; // play a short tone on attention-needing notifications
+  durationMs: number; // auto-dismiss time for info/success toasts
+}
+const DEFAULT_SETTINGS: NotifSettings = { sound: false, durationMs: 6000 };
+let config: NotifSettings = loadSettings();
+
+function loadSettings(): NotifSettings {
+  try {
+    return { ...DEFAULT_SETTINGS, ...JSON.parse(localStorage.getItem(SETTINGS_KEY) || "{}") };
+  } catch {
+    return DEFAULT_SETTINGS;
+  }
+}
+
+export function getNotifSettings(): NotifSettings {
+  return config;
+}
+
+export function configureNotifications(p: Partial<NotifSettings>): void {
+  config = { ...config, ...p };
+  try {
+    localStorage.setItem(SETTINGS_KEY, JSON.stringify(config));
+  } catch {
+    /* ignore */
+  }
+}
+
+let audioCtx: AudioContext | null = null;
+function beep(): void {
+  try {
+    const Ctx = window.AudioContext || (window as unknown as { webkitAudioContext: typeof AudioContext }).webkitAudioContext;
+    audioCtx = audioCtx || new Ctx();
+    const osc = audioCtx.createOscillator();
+    const gain = audioCtx.createGain();
+    osc.connect(gain);
+    gain.connect(audioCtx.destination);
+    osc.frequency.value = 660;
+    gain.gain.value = 0.04;
+    osc.start();
+    osc.stop(audioCtx.currentTime + 0.12);
+  } catch {
+    /* autoplay blocked or unsupported — ignore */
+  }
+}
+
 let items: Notification[] = load();
 let listeners: Array<() => void> = [];
 let counter = items.reduce((m, n) => Math.max(m, n.id), 0) + 1;
@@ -107,7 +155,7 @@ export function notify(input: NotifyInput): number {
     ? undefined
     : level === "error" || level === "fatal"
       ? ERROR_TTL
-      : DEFAULT_TTL;
+      : config.durationMs;
   items = [
     ...items,
     {
@@ -125,6 +173,9 @@ export function notify(input: NotifyInput): number {
     },
   ];
   emit();
+  if (config.sound && (requiresInteraction || level === "error" || level === "fatal")) {
+    beep();
+  }
   if (duration) setTimeout(() => dismiss(id), duration);
   return id;
 }

frontend/src/lib/urlState.ts

@@ -74,9 +74,19 @@ export function hasFilterParams(params: URLSearchParams): boolean {
   return KEYS.some((k) => params.has(k));
 }
 
-/** Reflect the current filters into the address bar without adding history entries. */
-export function syncUrl(f: FeedFilters): void {
-  const qs = filtersToParams(f).toString();
+export type Page = "feed" | "channels";
+
+export function readPage(): Page {
+  return new URLSearchParams(window.location.search).get("page") === "channels"
+    ? "channels"
+    : "feed";
+}
+
+/** Reflect the current filters + page into the address bar without adding history entries. */
+export function syncUrl(f: FeedFilters, page: Page = "feed"): void {
+  const params = filtersToParams(f);
+  if (page !== "feed") params.set("page", page);
+  const qs = params.toString();
   const url = qs ? `${window.location.pathname}?${qs}` : window.location.pathname;
   window.history.replaceState(null, "", url);
 }