perf(ui): streamline session sidebar state

2026-08-26 00:42:36 +08:00
parent 3b7d5e1c34
commit 26dbc2f309
84 changed files with 5159 additions and 2809 deletions
@@ -0,0 +1,75 @@
+import React from 'react';
+import { Button } from '@/components/ui/button';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { Icon } from "@/components/icon/Icon";
+import { useI18n } from '@/lib/i18n';
+
+type Props = {
+  onOpenSettings: () => void;
+  onOpenShortcuts: () => void;
+  onOpenAbout: () => void;
+  onOpenUpdate: () => void;
+  showRuntimeButtons?: boolean;
+  showUpdateButton?: boolean;
+};
+
+const footerButtonClassName = 'inline-flex h-8 w-8 items-center justify-center rounded-md text-muted-foreground hover:bg-interactive-hover/50 hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/50';
+
+export function SidebarFooter({
+  onOpenSettings,
+  onOpenShortcuts,
+  onOpenAbout,
+  onOpenUpdate,
+  showRuntimeButtons = true,
+  showUpdateButton = true,
+}: Props): React.ReactNode {
+  const { t } = useI18n();
+
+  if (!showRuntimeButtons && !showUpdateButton) {
+    return null;
+  }
+
+  return (
+    <div className="flex shrink-0 items-center justify-start gap-1 px-2.5 py-2">
+      {showRuntimeButtons ? (
+        <>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button type="button" onClick={onOpenSettings} className={footerButtonClassName} aria-label={t('sessions.sidebar.footer.actions.settings')}>
+                <Icon name="settings-3" className="h-4.5 w-4.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={4}><p>{t('sessions.sidebar.footer.actions.settings')}</p></TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button type="button" onClick={onOpenShortcuts} className={footerButtonClassName} aria-label={t('sessions.sidebar.footer.actions.shortcuts')}>
+                <Icon name="command" className="h-4.5 w-4.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={4}><p>{t('sessions.sidebar.footer.actions.shortcuts')}</p></TooltipContent>
+          </Tooltip>
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <button type="button" onClick={onOpenAbout} className={footerButtonClassName} aria-label={t('sessions.sidebar.footer.actions.aboutOpenChamber')}>
+                <Icon name="information" className="h-4.5 w-4.5" />
+              </button>
+            </TooltipTrigger>
+            <TooltipContent side="top" sideOffset={4}><p>{t('sessions.sidebar.footer.actions.aboutOpenChamber')}</p></TooltipContent>
+          </Tooltip>
+        </>
+      ) : null}
+      {showUpdateButton ? (
+        <Button
+          type="button"
+          variant="default"
+          size="xs"
+          className="ml-auto border-[var(--status-info-border)] bg-[var(--status-info-background)] text-[var(--status-info)] hover:bg-[var(--status-info-background)]/80 hover:text-[var(--status-info)] dark:border-[var(--status-info-border)] dark:bg-[var(--status-info-background)] dark:hover:bg-[var(--status-info-background)]/80"
+          onClick={onOpenUpdate}
+        >
+          {t('sessions.sidebar.footer.actions.update')}
+        </Button>
+      ) : null}
+    </div>
+  );
+}