feat(sessions): merge the activity feed into a tab on /sessions

Sessions and Activity Feed are two views of the same event pipeline, so
they now share one page: /sessions renders a tab bar (Sessions | Activity
Feed) with the active view in the ?view= query param, and /activity
redirects to /sessions?view=events. The sidebar entry is dropped.

The tab bar itself moves out of SettingsHub into components/PageTabs so
both hubs share it, and DocumentTitle loses the two branches for paths
that now only redirect.
This commit is contained in:
2026-08-26 09:17:17 +07:00
parent 341197aac0
commit bcfeeb5140
8 changed files with 136 additions and 48 deletions
+12 -31
View File
@@ -7,6 +7,7 @@ import type { ComponentType } from "react";
import { useSearchParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Boxes, Settings as SettingsIcon, SquareTerminal, MousePointerClick } from "lucide-react";
import { PageTabs } from "../components/PageTabs";
import { Settings } from "./Settings";
import { CcConfig } from "./CcConfig";
@@ -45,37 +46,17 @@ export function SettingsHub() {
return (
<div className="space-y-6">
<div
role="tablist"
aria-label={t("tools.label", "Tools")}
className="flex items-center gap-1.5 overflow-x-auto no-scrollbar border-b border-border/60 pb-2"
>
{TOOL_TABS.map(({ id, labelKey, Icon, Panel }) => {
const isActive = id === active.id;
return (
<button
key={id}
type="button"
role="tab"
aria-selected={isActive}
onClick={() =>
setParams(id === DASHBOARD_TAB.id ? {} : { tool: id }, { replace: true })
}
className={`inline-flex items-center gap-1.5 text-xs whitespace-nowrap px-3 py-1.5 rounded-lg border transition-colors flex-shrink-0 ${
isActive
? "bg-accent/15 border-accent/30 text-accent"
: "border-border text-fg-secondary hover:text-fg-primary hover:bg-surface-3"
}`}
>
<Icon className="w-3.5 h-3.5" />
{t(labelKey)}
{!Panel && (
<span className="text-[10px] text-fg-muted">{t("tools.soonBadge", "soon")}</span>
)}
</button>
);
})}
</div>
<PageTabs
ariaLabel={t("tools.label", "Tools")}
activeId={active.id}
onSelect={(id) => setParams(id === DASHBOARD_TAB.id ? {} : { tool: id }, { replace: true })}
tabs={TOOL_TABS.map(({ id, labelKey, Icon, Panel }) => ({
id,
Icon,
label: t(labelKey),
...(Panel ? {} : { badge: t("tools.soonBadge", "soon") }),
}))}
/>
{active.Panel ? (
<active.Panel />