d560825685
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.
55 lines
1.7 KiB
TypeScript
55 lines
1.7 KiB
TypeScript
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,
|
|
// per the app's "persist UI state across reload" convention.
|
|
|
|
export interface TabDef {
|
|
id: string;
|
|
label: string;
|
|
badge?: number; // optional count pill (e.g. pending requests); hidden when 0/undefined
|
|
}
|
|
|
|
/** 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,
|
|
active,
|
|
onChange,
|
|
}: {
|
|
tabs: TabDef[];
|
|
active: string;
|
|
onChange: (id: string) => void;
|
|
}) {
|
|
return (
|
|
<div className="flex flex-wrap gap-1 mb-4">
|
|
{tabs.map((tb) => {
|
|
const on = tb.id === active;
|
|
return (
|
|
<button
|
|
key={tb.id}
|
|
onClick={() => onChange(tb.id)}
|
|
className={`inline-flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm transition ${
|
|
on
|
|
? "bg-accent text-accent-fg font-medium shadow-md shadow-accent/20"
|
|
: "text-muted hover:text-fg hover:bg-card/60"
|
|
}`}
|
|
>
|
|
{tb.label}
|
|
{tb.badge != null && tb.badge > 0 && (
|
|
<span
|
|
className={`text-[11px] leading-none px-1.5 py-0.5 rounded-full ${
|
|
on ? "bg-accent-fg/20" : "bg-accent/20 text-accent"
|
|
}`}
|
|
>
|
|
{tb.badge}
|
|
</span>
|
|
)}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
}
|