fix(state): scope all per-account localStorage by account id

Multi-account-in-one-browser (esp. with per-tab accounts) leaked one account's client state
into another via shared localStorage keys. Scope every account-specific key by the tab's active
account (accountKey/readAccount/writeAccount/useAccountPersistedState helpers), so nothing bleeds
across accounts or tabs:

- Real leaks: selected playlist, client notification history + settings, onboarding-dismissed.
- UI position: feed page, channel-manager filter/view + tables, playlist sort, Settings/Stats/
  Users/Config tabs.
- Previously DB-adopted caches (theme, hints, performance mode, sidebar layout, nav/filter
  collapse) — now the cache is per-account too, so there's no flash of the other account's value
  on login.

Kept intentionally global: siftlode.lang (needed pre-login on the Welcome page; the DB pref still
scopes it per-account after sign-in) and siftlode.seenVersion (a per-browser 'new version' banner).
E2EE private keys (IndexedDB) and the chat-dock key were already per-user.

frontend/src/components/AdminUsers.tsx

@@ -4,7 +4,7 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { Ban, Check, RotateCcw, Shield, Trash2, UserPlus, X } from "lucide-react";
 import { api, type AdminUserRow, type Invite, type Me } from "../lib/api";
 import { notify } from "../lib/notifications";
-import { LS } from "../lib/storage";
+import { LS, setAccountRaw } from "../lib/storage";
 import Tooltip from "./Tooltip";
 import { Section } from "./ui/form";
 import { useConfirm } from "./ConfirmProvider";
@@ -20,7 +20,7 @@ export const ADMIN_USERS_TAB_KEY = LS.adminUsersTab;
 export const ADMIN_USERS_ACCESS_TAB = "access";
 
 export function focusAccessRequestsTab(): void {
-  localStorage.setItem(ADMIN_USERS_TAB_KEY, ADMIN_USERS_ACCESS_TAB);
+  setAccountRaw(ADMIN_USERS_TAB_KEY, ADMIN_USERS_ACCESS_TAB);
 }
 
 export default function AdminUsers({ me }: { me: Me }) {

frontend/src/components/ChannelDiscovery.tsx

@@ -2,6 +2,7 @@ import { useTranslation } from "react-i18next";
 import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { UserPlus } from "lucide-react";
 import { api, HttpError, type DiscoveredChannel } from "../lib/api";
+import { accountKey } from "../lib/storage";
 import { formatViews } from "../lib/format";
 import { notify } from "../lib/notifications";
 import Tooltip from "./Tooltip";
@@ -173,7 +174,7 @@ export default function ChannelDiscovery({
           rows={rows}
           columns={columns}
           rowKey={(c) => c.id}
-          persistKey="siftlode.channelDiscoveryTable"
+          persistKey={accountKey("siftlode.channelDiscoveryTable") ?? undefined}
           controlsPosition="top"
           emptyText={t("channels.discovery.empty")}
         />

frontend/src/components/Channels.tsx

@@ -17,6 +17,7 @@ import {
   X,
 } from "lucide-react";
 import { api, HttpError, type ManagedChannel, type Tag } from "../lib/api";
+import { accountKey } from "../lib/storage";
 import { useDismiss } from "../lib/useDismiss";
 import { formatEta, formatTotalHours, formatViews, relativeTime } from "../lib/format";
 import { notify } from "../lib/notifications";
@@ -569,7 +570,7 @@ export default function Channels({
           rows={visibleChannels}
           columns={columns}
           rowKey={(c) => c.id}
-          persistKey="siftlode.channelsTable"
+          persistKey={accountKey("siftlode.channelsTable") ?? undefined}
           controlsPosition="top"
           controlsLeading={statusChips}
           rowClassName={(c) => (c.hidden ? "opacity-60" : "")}

frontend/src/components/Playlists.tsx

@@ -37,7 +37,7 @@ import {
 import { api, type Playlist, type Video } from "../lib/api";
 import { formatDuration } from "../lib/format";
 import { notify } from "../lib/notifications";
-import { LS, readMerged, writeJSON } from "../lib/storage";
+import { getAccountRaw, LS, readAccountMerged, setAccountRaw, writeAccount } from "../lib/storage";
 import { useUndoable } from "../lib/useUndoable";
 import PlayerModal from "./PlayerModal";
 import UndoToolbar from "./UndoToolbar";
@@ -188,18 +188,18 @@ export default function Playlists({ canWrite }: { canWrite: boolean }) {
   const confirm = useConfirm();
   // Persist the selected playlist so F5 keeps it (the de-URL refactor dropped it from the URL).
   const [selectedId, setSelectedId] = useState<number | null>(() => {
-    const s = localStorage.getItem(LS.playlist);
+    const s = getAccountRaw(LS.playlist);
     return s ? Number(s) : null;
   });
   useEffect(() => {
-    if (selectedId != null) localStorage.setItem(LS.playlist, String(selectedId));
+    if (selectedId != null) setAccountRaw(LS.playlist, String(selectedId));
   }, [selectedId]);
   const selectedRef = useRef<HTMLButtonElement | null>(null);
   const scrolledRef = useRef(false);
   // How the left playlist rail is ordered (persisted).
-  const [plSort, setPlSort] = useState<PlSort>(() => readMerged(LS.plSort, PL_SORT_DEFAULT));
+  const [plSort, setPlSort] = useState<PlSort>(() => readAccountMerged(LS.plSort, PL_SORT_DEFAULT));
   useEffect(() => {
-    writeJSON(LS.plSort, plSort);
+    writeAccount(LS.plSort, plSort);
   }, [plSort]);
   const [newName, setNewName] = useState("");
   const [renaming, setRenaming] = useState(false);

frontend/src/components/SettingsPanel.tsx

@@ -4,7 +4,7 @@ import { useQueryClient } from "@tanstack/react-query";
 import { Bell, Monitor, Trash2, User } from "lucide-react";
 import { SCHEMES, type Scheme, type ThemePrefs } from "../lib/theme";
 import { api, type Me } from "../lib/api";
-import { LS, usePersistedState } from "../lib/storage";
+import { LS, useAccountPersistedState } from "../lib/storage";
 import Avatar from "./Avatar";
 import { notify, type NotifSettings } from "../lib/notifications";
 import Tooltip from "./Tooltip";
@@ -54,7 +54,7 @@ export default function SettingsPanel({
   onOpenWizard: () => void;
 }) {
   const { t } = useTranslation();
-  const [tabRaw, setTab] = usePersistedState(LS.settingsTab, "appearance");
+  const [tabRaw, setTab] = useAccountPersistedState(LS.settingsTab, "appearance");
   // Clamp at render so a stale/removed tab id falls back to Appearance.
   const tab: TabId = TABS.some((tabItem) => tabItem.id === tabRaw)
     ? (tabRaw as TabId)

frontend/src/components/Stats.tsx

@@ -5,7 +5,7 @@ import { History, Pause, Play, RefreshCw } from "lucide-react";
 import { api, type AdminQuotaRow, type Me } from "../lib/api";
 import { formatEta, quotaActionLabel } from "../lib/format";
 import { notify } from "../lib/notifications";
-import { LS, usePersistedState } from "../lib/storage";
+import { LS, useAccountPersistedState } from "../lib/storage";
 import Tooltip from "./Tooltip";
 import { Section, SettingRow } from "./ui/form";
 
@@ -18,7 +18,7 @@ type StatsTab = "overview" | "system";
 export default function Stats({ me }: { me: Me }) {
   const { t } = useTranslation();
   const isAdmin = me.role === "admin";
-  const [tabRaw, setTab] = usePersistedState(LS.statsTab, "overview");
+  const [tabRaw, setTab] = useAccountPersistedState(LS.statsTab, "overview");
   // Clamp at render: only admins may land on the System tab (covers a stale stored value).
   const tab: StatsTab = tabRaw === "system" && isAdmin ? "system" : "overview";
 

frontend/src/components/Tabs.tsx

@@ -1,4 +1,4 @@
-import { usePersistedState } from "../lib/storage";
+import { useAccountPersistedState } from "../lib/storage";
 
 // Reusable horizontal pill tab-rail for in-page sub-navigation (Configuration, Users & roles…).
 // The active tab is persisted to localStorage so a reload (F5) keeps the user where they were,
@@ -10,9 +10,9 @@ export interface TabDef {
   badge?: number; // optional count pill (e.g. pending requests); hidden when 0/undefined
 }
 
-/** Persisted active-tab state — the canonical helper now lives in lib/storage as
- * `usePersistedState`; re-exported here under its original name for existing call sites. */
-export const usePersistedTab = usePersistedState;
+/** Persisted active-tab state, scoped to the current account (so one account's last tab doesn't
+ * carry into another in the same browser) — re-exported under its original name for call sites. */
+export const usePersistedTab = useAccountPersistedState;
 
 export default function Tabs({
   tabs,