3e90fe2e5b
Filters/sort/search/scope were written to the address bar on every change (a leftover from sharing reproducible examples), giving two sources of truth. Make localStorage the single source: drop the automatic syncUrl from setFilters/setPage. A "Share view" link still hydrates filters on first load, after which the query is stripped from the URL (stripUrlParams) so it stays clean. syncUrl is replaced by shareUrl (builds the link on demand); the serializer now also round-trips scope.
264 lines
9 KiB
TypeScript
264 lines
9 KiB
TypeScript
import { useEffect, useState } from "react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { useQuery } from "@tanstack/react-query";
|
|
import { api, HttpError, type FeedFilters } from "./lib/api";
|
|
import { setLanguage, isSupported, type LangCode } from "./i18n";
|
|
import {
|
|
applyTheme,
|
|
DEFAULT_THEME,
|
|
loadLocalTheme,
|
|
saveLocalTheme,
|
|
type ThemePrefs,
|
|
} from "./lib/theme";
|
|
import { hasFilterParams, paramsToFilters, readPage, stripUrlParams, type Page } from "./lib/urlState";
|
|
import {
|
|
loadLayout,
|
|
normalizeLayout,
|
|
saveLayoutLocal,
|
|
type SidebarLayout,
|
|
} from "./lib/sidebarLayout";
|
|
import { configureNotifications, notify } from "./lib/notifications";
|
|
import { setHintsEnabled } from "./lib/hints";
|
|
import Login from "./components/Login";
|
|
import Header from "./components/Header";
|
|
import Sidebar from "./components/Sidebar";
|
|
import Feed from "./components/Feed";
|
|
import Channels, { type ChannelStatusFilter } from "./components/Channels";
|
|
import Stats from "./components/Stats";
|
|
import SettingsPanel from "./components/SettingsPanel";
|
|
import OnboardingWizard from "./components/OnboardingWizard";
|
|
import { shouldAutoOpenOnboarding } from "./lib/onboarding";
|
|
import Toaster from "./components/Toaster";
|
|
import About from "./components/About";
|
|
import ReleaseNotes from "./components/ReleaseNotes";
|
|
import VersionBanner from "./components/VersionBanner";
|
|
import { CURRENT_VERSION } from "./lib/releaseNotes";
|
|
|
|
const DEFAULT_FILTERS: FeedFilters = {
|
|
tags: [],
|
|
tagMode: "or",
|
|
q: "",
|
|
sort: "newest",
|
|
scope: "my",
|
|
includeNormal: true,
|
|
includeShorts: false,
|
|
includeLive: false,
|
|
show: "unwatched",
|
|
};
|
|
|
|
const FILTERS_KEY = "subfeed.filters";
|
|
|
|
function loadStoredFilters(): FeedFilters {
|
|
try {
|
|
return { ...DEFAULT_FILTERS, ...JSON.parse(localStorage.getItem(FILTERS_KEY) || "{}") };
|
|
} catch {
|
|
return DEFAULT_FILTERS;
|
|
}
|
|
}
|
|
|
|
// URL wins over localStorage so a pasted link reproduces the exact view.
|
|
function loadInitialFilters(): FeedFilters {
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (hasFilterParams(params)) return paramsToFilters(params, DEFAULT_FILTERS);
|
|
return loadStoredFilters();
|
|
}
|
|
|
|
export default function App() {
|
|
const { t } = useTranslation();
|
|
const [theme, setThemeState] = useState<ThemePrefs>(() => loadLocalTheme());
|
|
const [filters, setFiltersState] = useState<FeedFilters>(loadInitialFilters);
|
|
const [view, setView] = useState<"grid" | "list">("grid");
|
|
const [sidebarLayout, setSidebarLayoutState] = useState<SidebarLayout>(loadLayout);
|
|
const [page, setPageState] = useState<Page>(readPage);
|
|
const [settingsOpen, setSettingsOpen] = useState(false);
|
|
const [wizardOpen, setWizardOpen] = useState(false);
|
|
const [channelFilter, setChannelFilter] = useState<ChannelStatusFilter>("all");
|
|
const [aboutOpen, setAboutOpen] = useState(false);
|
|
const [notesOpen, setNotesOpen] = useState(false);
|
|
const [notesHighlight, setNotesHighlight] = useState<string | undefined>(undefined);
|
|
|
|
function openReleaseNotes(highlight?: string) {
|
|
setNotesHighlight(highlight);
|
|
setNotesOpen(true);
|
|
}
|
|
|
|
function setFilters(next: FeedFilters) {
|
|
setFiltersState(next);
|
|
localStorage.setItem(FILTERS_KEY, JSON.stringify(next));
|
|
}
|
|
|
|
function setPage(next: Page) {
|
|
setPageState(next);
|
|
}
|
|
|
|
function setSidebarLayout(next: SidebarLayout) {
|
|
setSidebarLayoutState(next);
|
|
saveLayoutLocal(next);
|
|
api.savePrefs({ sidebarLayout: next }).catch(() => {});
|
|
}
|
|
|
|
useEffect(() => applyTheme(theme), [theme]);
|
|
|
|
// Filters live in localStorage, not the address bar. If we arrived via a "Share view"
|
|
// link, its params have already hydrated the initial state — persist them and strip the
|
|
// query so the URL stays clean from here on.
|
|
useEffect(() => {
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (hasFilterParams(params) || params.has("page")) {
|
|
localStorage.setItem(FILTERS_KEY, JSON.stringify(filters));
|
|
stripUrlParams();
|
|
}
|
|
}, []); // eslint-disable-line react-hooks/exhaustive-deps
|
|
|
|
const meQuery = useQuery({ queryKey: ["me"], queryFn: api.me });
|
|
|
|
// First-login onboarding: prompt the user to connect YouTube (and resume the flow after
|
|
// each consent redirect). Derived from granted scopes + storage flags so it's stable
|
|
// across the full-page OAuth round-trip; dismissible and reopenable from Settings.
|
|
useEffect(() => {
|
|
if (meQuery.data && shouldAutoOpenOnboarding(meQuery.data)) setWizardOpen(true);
|
|
}, [meQuery.data?.id, meQuery.data?.can_read, meQuery.data?.can_write]);
|
|
|
|
// On login, adopt server-stored preferences.
|
|
useEffect(() => {
|
|
const prefs = meQuery.data?.preferences;
|
|
if (!prefs) return;
|
|
if (prefs.theme) {
|
|
const merged = { ...DEFAULT_THEME, ...prefs.theme };
|
|
setThemeState(merged);
|
|
saveLocalTheme(merged);
|
|
}
|
|
if (prefs.view === "grid" || prefs.view === "list") setView(prefs.view);
|
|
if (prefs.sidebarLayout) {
|
|
const l = normalizeLayout(prefs.sidebarLayout);
|
|
setSidebarLayoutState(l);
|
|
saveLayoutLocal(l);
|
|
}
|
|
if (isSupported(prefs.language)) setLanguage(prefs.language);
|
|
if (prefs.notifications) configureNotifications(prefs.notifications);
|
|
if (typeof prefs.hints === "boolean") setHintsEnabled(prefs.hints);
|
|
if (typeof prefs.performanceMode === "boolean")
|
|
document.documentElement.dataset.perf = prefs.performanceMode ? "1" : "";
|
|
// Nudge admins when access requests are waiting (in lieu of a server-push bell).
|
|
const pending = meQuery.data?.pending_invites ?? 0;
|
|
if (meQuery.data?.role === "admin" && pending > 0) {
|
|
notify({
|
|
level: "warning",
|
|
title: t("common.accessRequestsTitle"),
|
|
message: t("common.accessRequestsMessage", { count: pending }),
|
|
});
|
|
}
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, [meQuery.data?.id]);
|
|
|
|
function setTheme(next: ThemePrefs) {
|
|
setThemeState(next);
|
|
saveLocalTheme(next);
|
|
api.savePrefs({ theme: next }).catch(() => {});
|
|
}
|
|
function changeView(v: "grid" | "list") {
|
|
setView(v);
|
|
api.savePrefs({ view: v }).catch(() => {});
|
|
}
|
|
function changeLanguage(code: LangCode) {
|
|
setLanguage(code);
|
|
api.savePrefs({ language: code }).catch(() => {});
|
|
}
|
|
|
|
if (meQuery.isLoading)
|
|
return (
|
|
<div className="min-h-screen grid place-items-center text-muted">{t("common.loading")}</div>
|
|
);
|
|
if (meQuery.error instanceof HttpError && meQuery.error.status === 401)
|
|
return <Login />;
|
|
if (meQuery.error)
|
|
return (
|
|
<div className="min-h-screen grid place-items-center text-muted">
|
|
{t("common.somethingWrong")}
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div className="h-screen flex flex-col bg-bg text-fg">
|
|
<Header
|
|
me={meQuery.data!}
|
|
filters={filters}
|
|
setFilters={setFilters}
|
|
page={page}
|
|
setPage={setPage}
|
|
onOpenSettings={() => setSettingsOpen(true)}
|
|
onOpenAbout={() => setAboutOpen(true)}
|
|
onChangeLanguage={changeLanguage}
|
|
onGoToFullHistory={() => {
|
|
setChannelFilter("needs_full");
|
|
setPage("channels");
|
|
}}
|
|
/>
|
|
<VersionBanner onOpen={() => openReleaseNotes(CURRENT_VERSION)} />
|
|
<div className="flex flex-1 min-h-0">
|
|
{page === "feed" && (
|
|
<Sidebar
|
|
filters={filters}
|
|
setFilters={setFilters}
|
|
layout={sidebarLayout}
|
|
setLayout={setSidebarLayout}
|
|
/>
|
|
)}
|
|
<main className="flex-1 min-w-0 overflow-y-auto">
|
|
{page === "channels" ? (
|
|
<Channels
|
|
canWrite={meQuery.data!.can_write}
|
|
statusFilter={channelFilter}
|
|
setStatusFilter={setChannelFilter}
|
|
onOpenWizard={() => setWizardOpen(true)}
|
|
onViewChannel={(id, name) => {
|
|
setFilters({ ...filters, channelId: id, channelName: name, show: "all" });
|
|
setPage("feed");
|
|
}}
|
|
/>
|
|
) : page === "stats" && meQuery.data!.role === "admin" ? (
|
|
<Stats />
|
|
) : (
|
|
<Feed
|
|
filters={filters}
|
|
setFilters={setFilters}
|
|
view={view}
|
|
canRead={meQuery.data!.can_read}
|
|
onOpenWizard={() => setWizardOpen(true)}
|
|
/>
|
|
)}
|
|
</main>
|
|
</div>
|
|
{settingsOpen && (
|
|
<SettingsPanel
|
|
me={meQuery.data!}
|
|
theme={theme}
|
|
setTheme={setTheme}
|
|
view={view}
|
|
setView={changeView}
|
|
onClose={() => setSettingsOpen(false)}
|
|
onOpenWizard={() => {
|
|
setSettingsOpen(false);
|
|
setWizardOpen(true);
|
|
}}
|
|
/>
|
|
)}
|
|
{wizardOpen && meQuery.data && (
|
|
<OnboardingWizard me={meQuery.data} onClose={() => setWizardOpen(false)} />
|
|
)}
|
|
{aboutOpen && (
|
|
<About
|
|
onClose={() => setAboutOpen(false)}
|
|
onOpenReleaseNotes={() => {
|
|
setAboutOpen(false);
|
|
openReleaseNotes();
|
|
}}
|
|
/>
|
|
)}
|
|
{notesOpen && (
|
|
<ReleaseNotes onClose={() => setNotesOpen(false)} highlight={notesHighlight} />
|
|
)}
|
|
<Toaster />
|
|
</div>
|
|
);
|
|
}
|