From 83bbfa7e87e16a3c21413fe55524c1d05ce88dab Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Tue, 22 Sep 2026 12:22:20 -0700
Subject: [PATCH] refactor(web): sidebar alerts use the standard variants; one
 keycap (#13043)

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
---
 apps/web/src/components/CommandPalette.tsx    |  4 +-
 .../src/components/CommandPaletteContent.tsx  |  8 +--
 apps/web/src/components/LegacySidebar.tsx     | 19 ++----
 apps/web/src/components/chat/ModelListRow.tsx |  4 +-
 .../components/chat/ProviderStatusBanner.tsx  | 59 ++++++++-----------
 .../src/components/chat/ThreadErrorBanner.tsx |  7 +--
 .../desktop/SnapShotShortcutKeys.tsx          |  2 +-
 .../settings/KeybindingsSettings.tsx          |  4 +-
 .../settings/SettingsSidebarNav.tsx           |  2 +-
 .../components/sidebar/SidebarUpdatePill.tsx  |  2 +-
 apps/web/src/components/ui/alert.tsx          | 10 +++-
 scripts/lint-restyle-ceiling.ts               |  2 +-
 12 files changed, 52 insertions(+), 71 deletions(-)

diff --git a/apps/web/src/components/CommandPalette.tsx b/apps/web/src/components/CommandPalette.tsx
index 912f294d95383066ae29b9edcb0816a2e3233b81..3498acc3304680f45a0d9458cc175d265ac1ab47 100644
--- a/apps/web/src/components/CommandPalette.tsx
+++ b/apps/web/src/components/CommandPalette.tsx
@@ -2874,7 +2874,7 @@ function OpenCommandPaletteDialog(props: {
           }
         >
           <span>{isRemoteProjectPending ? "Working" : remoteProjectButtonLabel}</span>
-          <KbdGroup className="pointer-events-none -me-0.5 items-center gap-1">
+          <KbdGroup className="pointer-events-none -me-0.5">
             <Kbd>Enter</Kbd>
           </KbdGroup>
         </TooltipTrigger>
@@ -2917,7 +2917,7 @@ function OpenCommandPaletteDialog(props: {
           <span>
             {isCloneDestinationStep && isRemoteProjectPending ? "Cloning" : submitActionLabel}
           </span>
-          <KbdGroup className="pointer-events-none -me-0.5 items-center gap-1">
+          <KbdGroup className="pointer-events-none -me-0.5">
             <Kbd>{hasHighlightedBrowseItem ? `${submitModifierLabel} Enter` : "Enter"}</Kbd>
           </KbdGroup>
         </TooltipTrigger>
diff --git a/apps/web/src/components/CommandPaletteContent.tsx b/apps/web/src/components/CommandPaletteContent.tsx
index 8c1a5b0e3c83f22b50c9b3ca3b698109158503df..a21de9a3c650d7218b684cff7a2a618f072c69b4 100644
--- a/apps/web/src/components/CommandPaletteContent.tsx
+++ b/apps/web/src/components/CommandPaletteContent.tsx
@@ -52,7 +52,7 @@ export function CommandPaletteContent({
         <CommandPanel className={panelClassName}>{children}</CommandPanel>
         <CommandFooter className="gap-3 max-sm:flex-col max-sm:items-start">
           <div className="flex items-center gap-3">
-            <KbdGroup className="items-center gap-1.5">
+            <KbdGroup>
               <Kbd>
                 <ArrowUpIcon />
               </Kbd>
@@ -62,18 +62,18 @@ export function CommandPaletteContent({
               <span>Navigate</span>
             </KbdGroup>
             {footerActionLabel !== undefined ? (
-              <KbdGroup className="items-center gap-1.5">
+              <KbdGroup>
                 <Kbd>Enter</Kbd>
                 <span>{footerActionLabel}</span>
               </KbdGroup>
             ) : null}
             {showBackHint ? (
-              <KbdGroup className="items-center gap-1.5">
+              <KbdGroup>
                 <Kbd>Backspace</Kbd>
                 <span>Back</span>
               </KbdGroup>
             ) : null}
-            <KbdGroup className="items-center gap-1.5">
+            <KbdGroup>
               <Kbd>Esc</Kbd>
               <span>{escapeLabel}</span>
             </KbdGroup>
diff --git a/apps/web/src/components/LegacySidebar.tsx b/apps/web/src/components/LegacySidebar.tsx
index abeab989297e9b541baa6b0db7e0a0d17bca68d6..c61c4caff93bd58917fec6de63b045b58326042f 100644
--- a/apps/web/src/components/LegacySidebar.tsx
+++ b/apps/web/src/components/LegacySidebar.tsx
@@ -2673,18 +2673,13 @@ function LocalSecondaryStatus() {
   return (
     <SidebarGroup>
       {connecting.length > 0 ? (
-        <Alert
-          variant="default"
-          className="rounded-2xl border-border/40 bg-accent/40 text-muted-foreground"
-        >
+        <Alert variant="sidebar">
           <Spinner />
-          <AlertTitle className="text-xs font-medium text-foreground">
-            Connecting {connecting.join(", ")}
-          </AlertTitle>
+          <AlertTitle>Connecting {connecting.join(", ")}</AlertTitle>
         </Alert>
       ) : null}
       {failed.length > 0 ? (
-        <Alert variant="warning" className="rounded-2xl border-warning/40 bg-warning/8">
+        <Alert variant="warning">
           <TriangleAlertIcon />
           <AlertTitle>Couldn't connect {failed.map((entry) => entry.label).join(", ")}</AlertTitle>
           <AlertDescription>
@@ -2980,11 +2975,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
               >
                 <SearchIcon />
                 <span className="flex-1 truncate">Search</span>
-                {commandPaletteShortcutLabel ? (
-                  <Kbd className="h-4 min-w-0 rounded-sm px-1.5 text-[10px]">
-                    {commandPaletteShortcutLabel}
-                  </Kbd>
-                ) : null}
+                {commandPaletteShortcutLabel ? <Kbd>{commandPaletteShortcutLabel}</Kbd> : null}
               </CommandDialogTrigger>
             </SidebarMenuItem>
           </SidebarMenu>
@@ -2993,7 +2984,7 @@ const SidebarProjectsContent = memo(function SidebarProjectsContent(
     >
       {showArm64IntelBuildWarning && arm64IntelBuildWarningDescription ? (
         <SidebarGroup>
-          <Alert variant="warning" className="rounded-2xl border-warning/40 bg-warning/8">
+          <Alert variant="warning">
             <TriangleAlertIcon />
             <AlertTitle>Intel build on Apple Silicon</AlertTitle>
             <AlertDescription>{arm64IntelBuildWarningDescription}</AlertDescription>
diff --git a/apps/web/src/components/chat/ModelListRow.tsx b/apps/web/src/components/chat/ModelListRow.tsx
index 1d05374035be7234a46e9eb33f4086f3590ca2ef..9a22a1fc6989d9f57820029ec247a2309d8ecc47 100644
--- a/apps/web/src/components/chat/ModelListRow.tsx
+++ b/apps/web/src/components/chat/ModelListRow.tsx
@@ -98,9 +98,7 @@ export const ModelListRow = memo(function ModelListRow(props: {
         {props.showSelection && props.isSelected ? (
           <CheckIcon className="size-3.5" aria-hidden="true" />
         ) : null}
-        {props.jumpLabel ? (
-          <Kbd className="h-4 min-w-0 rounded-sm px-1.5 text-[10px]">{props.jumpLabel}</Kbd>
-        ) : null}
+        {props.jumpLabel ? <Kbd>{props.jumpLabel}</Kbd> : null}
         <Tooltip>
           <TooltipTrigger
             render={
diff --git a/apps/web/src/components/chat/ProviderStatusBanner.tsx b/apps/web/src/components/chat/ProviderStatusBanner.tsx
index 9e84fc01c920fb9a7169cfafc02cb456ee1a4036..a35be6ed0951ffbd1092884dd5745ed05487d69b 100644
--- a/apps/web/src/components/chat/ProviderStatusBanner.tsx
+++ b/apps/web/src/components/chat/ProviderStatusBanner.tsx
@@ -1,8 +1,8 @@
 import { type ProviderInstanceId, type ServerProvider } from "@t3tools/contracts";
 import { memo } from "react";
 import { InfoIcon, XIcon } from "lucide-react";
-import { cn } from "~/lib/utils";
-import { Button } from "../ui/button";
+import { Alert, AlertAction, AlertDescription, AlertTitle } from "../ui/alert";
+import { Button, InlineButton } from "../ui/button";
 import { formatProviderDriverKindLabel } from "../../providerModels";
 import { Tooltip, TooltipPopup, TooltipTrigger } from "../ui/tooltip";
 
@@ -83,48 +83,37 @@ export const ProviderStatusBanner = memo(function ProviderStatusBanner({
 
   return (
     <div className="pointer-events-auto mx-auto w-fit max-w-[calc(100%-2rem)] pt-3">
-      <div
-        className={cn(
-          "alert-glass relative inline-flex items-center gap-3 rounded-xl border py-3 ps-3.5 pe-10 text-card-foreground text-sm",
-          status.status === "warning"
-            ? "border-warning/32 [&_svg]:text-warning"
-            : "border-destructive/32 text-destructive-foreground [&_svg]:text-destructive",
-        )}
-        data-variant={status.status === "warning" ? "warning" : "error"}
-        role="alert"
+      <Alert
+        variant={status.status === "warning" ? "warning" : "error"}
+        surface="glass"
+        controlAlignment="first-line"
       >
-        <InfoIcon className="size-4 shrink-0" aria-hidden />
-        <div className="flex min-w-0 flex-col gap-1">
-          <div className="font-medium">{title}</div>
+        <InfoIcon />
+        <AlertTitle>{title}</AlertTitle>
+        <AlertDescription>
           <Tooltip>
-            <TooltipTrigger
-              render={<div className="line-clamp-3 text-muted-foreground">{message}</div>}
-            />
+            <TooltipTrigger render={<div className="line-clamp-3" />}>{message}</TooltipTrigger>
             <TooltipPopup side="top" className="whitespace-pre-wrap">
               {message}
             </TooltipPopup>
           </Tooltip>
           {onOpenProviderSetup && hasProviderSetup(status) ? (
-            <Button
-              className="self-start px-0 text-foreground"
-              onClick={() => onOpenProviderSetup(status.instanceId)}
-              size="xs"
-              variant="link"
-            >
+            <InlineButton onClick={() => onOpenProviderSetup(status.instanceId)}>
               Open provider setup
-            </Button>
+            </InlineButton>
           ) : null}
-        </div>
-        <Button
-          aria-label={`Dismiss ${providerName} provider ${status.status}`}
-          className="absolute top-2 right-2 size-6"
-          onClick={onDismiss}
-          size="icon-xs"
-          variant="ghost-muted"
-        >
-          <XIcon aria-hidden className="size-3.5" />
-        </Button>
-      </div>
+        </AlertDescription>
+        <AlertAction>
+          <Button
+            aria-label={`Dismiss ${providerName} provider ${status.status}`}
+            onClick={onDismiss}
+            size="icon-xs"
+            variant="ghost-muted"
+          >
+            <XIcon />
+          </Button>
+        </AlertAction>
+      </Alert>
     </div>
   );
 });
diff --git a/apps/web/src/components/chat/ThreadErrorBanner.tsx b/apps/web/src/components/chat/ThreadErrorBanner.tsx
index df01506ba9eef362214190e1036073985161d73f..c61f7b12b9b94abb779301968a76b08897a0fee6 100644
--- a/apps/web/src/components/chat/ThreadErrorBanner.tsx
+++ b/apps/web/src/components/chat/ThreadErrorBanner.tsx
@@ -43,12 +43,7 @@ export const ThreadErrorBanner = memo(function ThreadErrorBanner({
   if (!error) return null;
   return (
     <div className="pointer-events-auto mx-auto w-fit max-w-[min(48rem,calc(100%-2rem))] pt-3">
-      <Alert
-        variant="error"
-        controlAlignment="first-line"
-        className="alert-glass"
-        data-variant="error"
-      >
+      <Alert variant="error" surface="glass" controlAlignment="first-line">
         <CircleAlertIcon />
         <AlertDescription>
           <Tooltip>
diff --git a/apps/web/src/components/desktop/SnapShotShortcutKeys.tsx b/apps/web/src/components/desktop/SnapShotShortcutKeys.tsx
index 2d233461c59f0f765566d41e4cef70950470a5a2..0a49e4068e85b08d4bfa99468627a8a8d29cab47 100644
--- a/apps/web/src/components/desktop/SnapShotShortcutKeys.tsx
+++ b/apps/web/src/components/desktop/SnapShotShortcutKeys.tsx
@@ -16,7 +16,7 @@ export function SnapShotShortcutKeys({
         const seen = seenLabels.get(label) ?? 0;
         seenLabels.set(label, seen + 1);
         return (
-          <Kbd aria-hidden className="min-w-6 justify-center px-1.5" key={`${label}-${seen}`}>
+          <Kbd aria-hidden key={`${label}-${seen}`}>
             {label}
           </Kbd>
         );
diff --git a/apps/web/src/components/settings/KeybindingsSettings.tsx b/apps/web/src/components/settings/KeybindingsSettings.tsx
index e23c4875279901ef83b7274a797af57930c83c33..4cd64438e0389bfa9fef20b35bb5cb3a0d3974f4 100644
--- a/apps/web/src/components/settings/KeybindingsSettings.tsx
+++ b/apps/web/src/components/settings/KeybindingsSettings.tsx
@@ -79,9 +79,9 @@ function KeybindingPill({ value }: { value: string }) {
     return { part, key: seen === 0 ? part : `${part}-${seen}` };
   });
   return (
-    <KbdGroup className="bg-transparent p-0 shadow-none">
+    <KbdGroup>
       {parts.map(({ part, key }) => (
-        <Kbd key={key} className="min-w-6 justify-center px-1.5">
+        <Kbd key={key}>
           {part === "mod"
             ? navigator.platform.toLowerCase().includes("mac")
               ? "⌘"
diff --git a/apps/web/src/components/settings/SettingsSidebarNav.tsx b/apps/web/src/components/settings/SettingsSidebarNav.tsx
index 665a9f963c47d388f50de4a5bc80a31111034f46..e34d6036a900b365916c51ff73862e3bb9b759b0 100644
--- a/apps/web/src/components/settings/SettingsSidebarNav.tsx
+++ b/apps/web/src/components/settings/SettingsSidebarNav.tsx
@@ -275,7 +275,7 @@ export function SettingsSidebarNav({ pathname }: { pathname: string }) {
                 <XIcon className="size-3" />
               </Button>
             ) : (
-              <Kbd className="h-4 min-w-0 rounded-sm px-1.5 text-[10px]">/</Kbd>
+              <Kbd>/</Kbd>
             )}
           </div>
           {isSearching && results.length === 0 ? (
diff --git a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx
index 613d329bbeef5d42eeebee722e0586d46b5c5dca..e1609d4d3bc41c172e7d5d0801b45c745426627b 100644
--- a/apps/web/src/components/sidebar/SidebarUpdatePill.tsx
+++ b/apps/web/src/components/sidebar/SidebarUpdatePill.tsx
@@ -100,7 +100,7 @@ function SidebarUpdateArchitectureWarningContent() {
   if (!visible || !description) return null;
 
   return (
-    <Alert variant="warning" className="rounded-2xl border-warning/40 bg-warning/8 text-xs">
+    <Alert variant="warning">
       <TriangleAlertIcon />
       <AlertTitle>Intel build on Apple Silicon</AlertTitle>
       <AlertDescription>{description}</AlertDescription>
diff --git a/apps/web/src/components/ui/alert.tsx b/apps/web/src/components/ui/alert.tsx
index e2a08066e6c05bec6e1a4e7f1e3f6486a9d0976e..1521002256ccab9417277a2acd79d8c5de697447 100644
--- a/apps/web/src/components/ui/alert.tsx
+++ b/apps/web/src/components/ui/alert.tsx
@@ -6,9 +6,15 @@ import { cn } from "~/lib/utils";
 
 const alertVariants = cva("relative rounded-xl border px-3.5 py-3 text-card-foreground text-sm", {
   defaultVariants: {
+    surface: "default",
     variant: "default",
   },
   variants: {
+    // "glass" floats the alert over content; alert-glass tints from data-variant.
+    surface: {
+      default: "",
+      glass: "alert-glass",
+    },
     variant: {
       default: "bg-transparent dark:bg-input/32 [&_svg]:text-muted-foreground",
       sidebar:
@@ -45,6 +51,7 @@ function alertChildSlot(child: React.ReactElement): string | undefined {
 function Alert({
   className,
   variant,
+  surface,
   controlAlignment = "center",
   children,
   ...props
@@ -73,8 +80,9 @@ function Alert({
 
   return (
     <div
-      className={cn(alertVariants({ variant }), className)}
+      className={cn(alertVariants({ surface, variant }), className)}
       data-slot="alert"
+      data-variant={variant ?? "default"}
       role="alert"
       {...props}
     >
diff --git a/scripts/lint-restyle-ceiling.ts b/scripts/lint-restyle-ceiling.ts
index 1f284f517959df927bbc8cb232fe655a2e2f253d..06429c1b2e20fabbaac9c0e92f4636ec7e504e31 100644
--- a/scripts/lint-restyle-ceiling.ts
+++ b/scripts/lint-restyle-ceiling.ts
@@ -8,7 +8,7 @@ import * as NodeURL from "node:url";
 // components/ui exports are migrated to variants (see vite.config.ts). This gate keeps the
 // count from growing: CI fails when findings exceed the ceiling. Lower the ceiling when you
 // migrate a file, and delete this script when the rule becomes an error.
-export const RESTYLE_CEILING = 668;
+export const RESTYLE_CEILING = 628;
 
 const RULE = "shadcn(no-restyle)";
 
-- 
2.54.0