refactor(frontend): the flat components/ folder moves into shell/, modules/<page>/ and features/<name>/
A pure move (git mv, history kept): 333 files leave components/, which now holds only the platform layer (ui/) and the legal pages. The shell is the frame (App, header, nav rail, palette, boot); each page lives in modules/<page>/ with its rail, store and tests; what several pages share sits in features/<name>/; the shared-link page is watch/. Domain-free helpers went straight to ui/ (ViewSwitcher, FilterRail, the confirm dialog, the language switcher, the copy rows). Every relative specifier was rewritten (imports, dynamic imports, vi.mock, new URL), and the contract tests that scan sources now scan the whole app source, not only components/ — each glob was counted before and after so none went green over fewer files. The locale-format rule matched `/src/components/` only, so the move would have taken ~300 files out from under its i18n-singleton check; it now covers every folder that holds components, with a test per folder.
This commit is contained in:
@@ -0,0 +1,192 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { qk } from "../../lib/queryKeys";
|
||||
import { History, RefreshCw } from "lucide-react";
|
||||
import { api } from "../../lib/api";
|
||||
import { formatEta, formatNumber, quotaActionLabel } from "../../lib/format";
|
||||
import { notify } from "../../lib/notifications";
|
||||
import { notifyYouTubeActionError } from "../../lib/youtubeErrors";
|
||||
import { useWizard } from "../../features/wizard/wizardContext";
|
||||
import Tooltip from "../../components/ui/Tooltip";
|
||||
import { LoadingState, StateMessage } from "../../components/ui/QueryState";
|
||||
import { Section } from "../../components/ui/form";
|
||||
import { SectionLabel } from "../../components/ui/Headings";
|
||||
import { StatBars, StatTile, StatTiles } from "../../components/ui/StatTiles";
|
||||
import { notifyActionError } from "../../lib/actionErrors";
|
||||
import { Button } from "../../components/ui/Button";
|
||||
|
||||
// Usage & stats page: your sync status, your own API usage and the manual sync actions (they used to
|
||||
// live in Settings → Sync; they moved here so Settings stays config-only). The instance-wide quota
|
||||
// view is the activity page's Quota tab.
|
||||
export default function Stats() {
|
||||
return (
|
||||
<div className="px-4 pb-4 pt-3 max-w-4xl mx-auto">
|
||||
<Overview />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
// Per-user view: sync status + your own API usage + the manual sync actions.
|
||||
function Overview() {
|
||||
const { t, i18n } = useTranslation();
|
||||
const lang = i18n.language;
|
||||
const qc = useQueryClient();
|
||||
// The 403 case needs somewhere to go, or the toast names a fix the user cannot reach from here.
|
||||
const { openWizard } = useWizard();
|
||||
const status = useQuery({ queryKey: qk.myStatus(), queryFn: api.myStatus });
|
||||
const usage = useQuery({ queryKey: qk.myUsage(), queryFn: api.myUsage });
|
||||
const s = status.data;
|
||||
const syncSubs = useMutation({
|
||||
mutationFn: () => api.syncSubscriptions(),
|
||||
onSuccess: (r: { subscriptions?: number }) => {
|
||||
qc.invalidateQueries({ queryKey: qk.myStatus() });
|
||||
qc.invalidateQueries({ queryKey: qk.channels() });
|
||||
notify({
|
||||
level: "success",
|
||||
message: t("stats.sync.synced", { count: r.subscriptions ?? 0 }),
|
||||
});
|
||||
},
|
||||
// The same helper and the same wizard handle as the Channels page: it translates the 403 into
|
||||
// "connect YouTube" WITH a button that opens the wizard — instead of surfacing the route's bare
|
||||
// English detail under a Hungarian UI — and delegates everything else to notifyActionError so
|
||||
// the server's own reason wins, which is what makes the SEC-14 cooldown read as a pace limit
|
||||
// rather than "Sync failed".
|
||||
onError: (e) => notifyYouTubeActionError(e, t("stats.sync.syncFailed"), openWizard),
|
||||
});
|
||||
const deepAll = useMutation({
|
||||
mutationFn: () => api.deepAll(true),
|
||||
onSuccess: (r: { updated?: number }) => {
|
||||
qc.invalidateQueries({ queryKey: qk.myStatus() });
|
||||
qc.invalidateQueries({ queryKey: qk.channels() });
|
||||
notify({
|
||||
level: "success",
|
||||
message: t("stats.sync.fullHistoryRequested", { count: r.updated ?? 0 }),
|
||||
});
|
||||
},
|
||||
onError: (e) => notifyActionError(e, t("stats.sync.fullHistoryFailed")),
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<Section title={t("stats.sync.myStatus")}>
|
||||
{s ? (
|
||||
<StatTiles>
|
||||
<StatTile
|
||||
label={t("stats.sync.channels")}
|
||||
hint={t("stats.sync.channelsHint")}
|
||||
value={formatNumber(s.channels_total, lang)}
|
||||
/>
|
||||
<StatTile
|
||||
label={t("stats.sync.recentSynced")}
|
||||
hint={t("stats.sync.recentSyncedHint")}
|
||||
value={`${formatNumber(s.channels_recent_synced, lang)}/${formatNumber(s.channels_total, lang)}`}
|
||||
/>
|
||||
<StatTile
|
||||
label={t("stats.sync.fullHistory")}
|
||||
hint={t("stats.sync.fullHistoryHint")}
|
||||
value={`${formatNumber(s.channels_deep_done, lang)}/${formatNumber(s.channels_deep_requested, lang)}`}
|
||||
/>
|
||||
{s.deep_pending_count > 0 && (
|
||||
<StatTile
|
||||
label={t("stats.sync.fullHistoryEta")}
|
||||
hint={t("stats.sync.fullHistoryEtaHint", { count: s.deep_pending_count })}
|
||||
value={formatEta(t, s.deep_eta_seconds)}
|
||||
/>
|
||||
)}
|
||||
<StatTile
|
||||
label={t("stats.sync.myVideos")}
|
||||
hint={t("stats.sync.myVideosHint")}
|
||||
value={formatNumber(s.my_videos, lang)}
|
||||
/>
|
||||
<StatTile
|
||||
label={t("stats.sync.quotaLeft")}
|
||||
hint={t("stats.sync.quotaLeftHint")}
|
||||
value={formatNumber(s.quota_remaining_today, lang)}
|
||||
/>
|
||||
</StatTiles>
|
||||
) : status.isError ? (
|
||||
<StateMessage tone="error" onRetry={() => status.refetch()}>
|
||||
{t("common.loadError")}
|
||||
</StateMessage>
|
||||
) : (
|
||||
<LoadingState label={t("stats.sync.loading")} />
|
||||
)}
|
||||
</Section>
|
||||
|
||||
<Section title={t("stats.sync.apiUsage")}>
|
||||
{usage.data ? (
|
||||
<>
|
||||
<StatTiles>
|
||||
<StatTile
|
||||
label={t("stats.sync.today")}
|
||||
hint={t("stats.sync.todayHint")}
|
||||
value={formatNumber(usage.data.today, lang)}
|
||||
/>
|
||||
<StatTile
|
||||
label={t("stats.sync.last7d")}
|
||||
value={formatNumber(usage.data.last_7d, lang)}
|
||||
/>
|
||||
<StatTile
|
||||
label={t("stats.sync.last30d")}
|
||||
value={formatNumber(usage.data.last_30d, lang)}
|
||||
/>
|
||||
<StatTile
|
||||
label={t("stats.sync.allTime")}
|
||||
value={formatNumber(usage.data.all_time, lang)}
|
||||
/>
|
||||
</StatTiles>
|
||||
{Object.keys(usage.data.by_action).length > 0 && (
|
||||
<div className="mt-4">
|
||||
<SectionLabel level={3} className="mb-2">
|
||||
{t("stats.sync.byAction")}
|
||||
</SectionLabel>
|
||||
<StatBars
|
||||
label={t("stats.sync.byAction")}
|
||||
format={(n) => formatNumber(n, lang)}
|
||||
rows={Object.entries(usage.data.by_action).map(([action, units]) => ({
|
||||
id: action,
|
||||
label: quotaActionLabel(t, action),
|
||||
value: units,
|
||||
}))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : usage.isError ? (
|
||||
<StateMessage tone="error" onRetry={() => usage.refetch()}>
|
||||
{t("common.loadError")}
|
||||
</StateMessage>
|
||||
) : usage.isLoading ? (
|
||||
<LoadingState label={t("stats.sync.loading")} />
|
||||
) : (
|
||||
<div className="text-muted text-sm">{t("stats.sync.noUsage")}</div>
|
||||
)}
|
||||
</Section>
|
||||
|
||||
<Section title={t("stats.sync.actions")}>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
<Tooltip hint={t("stats.sync.syncSubscriptionsHint")}>
|
||||
<Button
|
||||
variant="glass"
|
||||
icon={<RefreshCw />}
|
||||
loading={syncSubs.isPending}
|
||||
onClick={() => syncSubs.mutate()}
|
||||
>
|
||||
{t("stats.sync.syncSubscriptions")}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
<Tooltip hint={t("stats.sync.backfillEverythingHint")}>
|
||||
<Button
|
||||
variant="glass"
|
||||
icon={<History />}
|
||||
loading={deepAll.isPending}
|
||||
onClick={() => deepAll.mutate()}
|
||||
>
|
||||
{t("stats.sync.backfillEverything")}
|
||||
</Button>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</Section>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user