fix(webui): polish delete dialog and sidebar toggles

Co-authored-by: Cursor <cursoragent@cursor.com>

webui/src/components/DeleteConfirm.tsx

@@ -8,6 +8,7 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
 } from "@/components/ui/alert-dialog";
+import { Trash2 } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 interface DeleteConfirmProps {
@@ -26,22 +27,32 @@ export function DeleteConfirm({
   const { t } = useTranslation();
   return (
     <AlertDialog open={open} onOpenChange={(o) => (!o ? onCancel() : undefined)}>
-      <AlertDialogContent>
-        <AlertDialogHeader>
-          <AlertDialogTitle>
+      <AlertDialogContent
+        className="w-[min(calc(100vw-2rem),22.75rem)] gap-0 rounded-[28px] border border-white/70 bg-card/95 p-5 text-center shadow-[0_24px_80px_rgba(15,23,42,0.20)] backdrop-blur-xl data-[state=open]:zoom-in-95 sm:rounded-[28px]"
+      >
+        <AlertDialogHeader className="items-center space-y-0 text-center">
+          <div className="mb-5 grid h-16 w-16 place-items-center rounded-full bg-destructive/10 text-destructive">
+            <div className="grid h-9 w-9 place-items-center rounded-full border border-destructive/20 bg-destructive/5">
+              <Trash2 className="h-5 w-5" strokeWidth={2.4} aria-hidden />
+            </div>
+          </div>
+          <AlertDialogTitle className="text-center text-[20px] font-semibold leading-tight tracking-[-0.02em] text-foreground">
             {t("deleteConfirm.title", { title })}
           </AlertDialogTitle>
-          <AlertDialogDescription>
+          <AlertDialogDescription className="mt-3 max-w-[17rem] text-center text-[14px] leading-6 text-muted-foreground">
             {t("deleteConfirm.description")}
           </AlertDialogDescription>
         </AlertDialogHeader>
-        <AlertDialogFooter>
-          <AlertDialogCancel onClick={onCancel}>
+        <AlertDialogFooter className="mt-7 grid grid-cols-2 gap-3 space-x-0">
+          <AlertDialogCancel
+            onClick={onCancel}
+            className="mt-0 h-11 rounded-full border-0 bg-muted/70 px-5 text-[15px] font-semibold text-foreground shadow-none hover:bg-muted"
+          >
             {t("deleteConfirm.cancel")}
           </AlertDialogCancel>
           <AlertDialogAction
             onClick={onConfirm}
-            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+            className="h-11 rounded-full bg-destructive px-5 text-[15px] font-semibold text-destructive-foreground shadow-[0_10px_25px_rgba(239,68,68,0.28)] hover:bg-destructive/90"
           >
             {t("deleteConfirm.confirm")}
           </AlertDialogAction>

webui/src/components/Sidebar.tsx

@@ -1,6 +1,6 @@
 import { useMemo, useState } from "react";
 import {
-  PanelLeftClose,
+  Menu,
   Search,
   SquarePen,
 } from "lucide-react";
@@ -65,7 +65,7 @@ export function Sidebar(props: SidebarProps) {
           onClick={props.onCollapse}
           className="h-7 w-7 rounded-lg text-muted-foreground/85 hover:bg-sidebar-accent/75 hover:text-sidebar-foreground"
         >
-          <PanelLeftClose className="h-3.5 w-3.5" />
+          <Menu className="h-3.5 w-3.5" />
         </Button>
       </div>
 

webui/src/components/thread/ThreadHeader.tsx

@@ -1,4 +1,4 @@
-import { Menu, Moon, PanelLeftOpen, Settings, Sun } from "lucide-react";
+import { Menu, Moon, Settings, Sun } from "lucide-react";
 import { useTranslation } from "react-i18next";
 
 import { Button } from "@/components/ui/button";
@@ -80,7 +80,7 @@ export function ThreadHeader({
             hideSidebarToggleOnDesktop && "lg:pointer-events-none lg:opacity-0",
           )}
         >
-          <PanelLeftOpen className="h-3.5 w-3.5" />
+          <Menu className="h-3.5 w-3.5" />
         </Button>
         <div className="flex min-w-0 items-center rounded-md px-1.5 py-1 text-[12px] font-medium text-muted-foreground">
           <span className="max-w-[min(60vw,32rem)] truncate">{title}</span>

webui/src/components/ui/alert-dialog.tsx

@@ -15,7 +15,7 @@ const AlertDialogOverlay = React.forwardRef<
   <AlertDialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      "fixed inset-0 z-50 bg-black/60 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-background/45 backdrop-blur-[3px] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className,
     )}
     {...props}
@@ -29,14 +29,16 @@ const AlertDialogContent = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPortal>
     <AlertDialogOverlay />
-    <AlertDialogPrimitive.Content
-      ref={ref}
-      className={cn(
-        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
-        className,
-      )}
-      {...props}
-    />
+    <div className="fixed inset-0 z-50 flex items-center justify-center p-4">
+      <AlertDialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          "grid w-full max-w-lg origin-center gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 sm:rounded-lg",
+          className,
+        )}
+        {...props}
+      />
+    </div>
   </AlertDialogPortal>
 ));
 AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;