mirror of
https://github.com/NousResearch/hermes-agent.git
synced 2026-06-10 08:32:09 +00:00
c9410b3462
* feat(web): add collapsible sidebar for the dashboard The desktop sidebar can now be collapsed to an icon-only rail via a toggle button in the sidebar header. State is persisted in localStorage so it survives page reloads. When collapsed (lg+ only): - Sidebar shrinks from w-64 to w-14 with a smooth width transition - Nav items show only their icon with a native title tooltip - Brand text, plugin headings, system actions, theme/language switchers, auth widget, and footer are hidden - Mobile drawer behavior is unchanged (always full-width) Co-authored-by: Cursor <cursoragent@cursor.com> * fix(web): align sidebar tooltips to sidebar edge consistently Tooltip left position now uses the sidebar's right edge instead of the anchor element's right edge, so narrow anchors (theme/language switchers) align with full-width anchors (nav links, system actions). Co-authored-by: Cursor <cursoragent@cursor.com> * feat(web): add tooltip animations, restore theme label, rename Sessions tab - Sidebar tooltips now animate in with a subtle 120ms ease-out slide; subsequent tooltips within the same hover sequence appear instantly (no delay/animation) following Emil Kowalski's tooltip pattern - Restore theme name label when sidebar is expanded - Rename Sessions segment tab to "History" across all 16 locales Co-authored-by: Cursor <cursoragent@cursor.com> * fix(web): smooth sidebar collapse animation - Remove icon centering on collapse; icons stay left-aligned at px-5 so they don't jump during the width transition - Text labels fade out with opacity transition instead of instant display:none, clipped naturally by overflow-hidden - Slow collapse duration from 450ms to 600ms for a more relaxed feel - Gateway dot always rendered with opacity toggle so it doesn't slide in from the right on collapse - Pin gateway dot at fixed left offset (pl-[1.625rem]) to align with nav icons - Align header toggle button with justify-center when collapsed - Bottom switchers use items-start when collapsed to prevent reflow Co-authored-by: Cursor <cursoragent@cursor.com> --------- Co-authored-by: Cursor <cursoragent@cursor.com>
72 lines
2.4 KiB
TypeScript
72 lines
2.4 KiB
TypeScript
import { Link } from "react-router-dom";
|
|
import type { StatusResponse } from "@/lib/api";
|
|
import { cn } from "@/lib/utils";
|
|
import { useI18n } from "@/i18n";
|
|
|
|
/** Gateway + session summary for the System sidebar block (no separate strip chrome). */
|
|
export function SidebarStatusStrip({ status }: SidebarStatusStripProps) {
|
|
const { t } = useI18n();
|
|
|
|
if (status === null) {
|
|
return (
|
|
<div className="px-5 py-1.5" aria-hidden>
|
|
<div className="h-2 w-[80%] max-w-full animate-pulse rounded-sm bg-midground/10" />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const gw = gatewayLine(status, t);
|
|
const { activeSessionsLabel, gatewayStatusLabel } = t.app;
|
|
|
|
return (
|
|
<Link
|
|
to="/sessions"
|
|
title={t.app.statusOverview}
|
|
className={cn(
|
|
"block text-left",
|
|
"px-5 pb-2 pt-0.5",
|
|
"text-text-secondary",
|
|
"transition-colors hover:text-midground",
|
|
"focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/40",
|
|
"focus-visible:ring-inset",
|
|
)}
|
|
>
|
|
<div className="flex flex-col gap-1 font-mondwest text-xs leading-snug tracking-[0.08em]">
|
|
<p className="break-words">
|
|
<span className="text-text-tertiary">{gatewayStatusLabel}</span>{" "}
|
|
<span className={cn("font-medium", gw.tone)}>{gw.label}</span>
|
|
</p>
|
|
|
|
<p className="break-words">
|
|
<span className="text-text-tertiary">{activeSessionsLabel}</span>{" "}
|
|
<span className="tabular-nums text-text-secondary">
|
|
{status.active_sessions}
|
|
</span>
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
);
|
|
}
|
|
|
|
export function gatewayLine(
|
|
status: StatusResponse,
|
|
t: ReturnType<typeof useI18n>["t"],
|
|
): { label: string; tone: string } {
|
|
const g = t.app.gatewayStrip;
|
|
const byState: Record<string, { label: string; tone: string }> = {
|
|
running: { label: g.running, tone: "text-success" },
|
|
starting: { label: g.starting, tone: "text-warning" },
|
|
startup_failed: { label: g.failed, tone: "text-destructive" },
|
|
stopped: { label: g.stopped, tone: "text-muted-foreground" },
|
|
};
|
|
if (status.gateway_state && byState[status.gateway_state]) {
|
|
return byState[status.gateway_state];
|
|
}
|
|
return status.gateway_running
|
|
? { label: g.running, tone: "text-success" }
|
|
: { label: g.off, tone: "text-muted-foreground" };
|
|
}
|
|
|
|
interface SidebarStatusStripProps {
|
|
status: StatusResponse | null;
|
|
}
|