Sidebar chat menu: add Delete, remove colour and icon pickers

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>

web/src/components/ChatView.tsx

@@ -1,6 +1,6 @@
 import { takePrefill } from "../share";
 import { Icon } from "./Icon";
-import { FileChip, FileFigure, fileType, imageSize, imageSrc, formatSize } from "./FileFigure";
+import { FileChip, FileFigure, fileType, imageSize, imageSrc } from "./FileFigure";
 import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, type ReactNode, type RefObject } from "react";
 import { del, get, patch, post, put } from "../api";
 import { useFetch, useModels } from "../hooks";
@@ -24,7 +24,8 @@ import { UsageOverlay } from "./UsageOverlay";
 import { RewindDialog } from "./RewindDialog";
 import { ShellsChip } from "./ShellsPanel";
 import { TodoList, ToolCard } from "./ToolCard";
-import { choiceDialog, confirmDialog, promptDialog, toast } from "../dialogs";
+import { promptDialog, toast } from "../dialogs";
+import { deleteChat } from "../chatActions";
 import { ChatTabBar, ChatTabPanes, useChatTabs } from "./ChatTabs";
 import { ColorSwatches, IconPicker } from "./ColorSwatches";
 import { ProjectPermissions } from "./ProjectPermissions";
@@ -757,30 +758,7 @@ export function ChatView({ sessionId, onMenu, onClosePane }: { sessionId: string
   };
 
   const remove = async () => {
-    // Does the chat have a folder of its own? Then ask whether it goes too.
-    const folder = session.parent_id ? undefined : await get<{ own: boolean; path?: string; files?: number; bytes?: number; git?: boolean; truncated?: boolean }>(`/sessions/${sessionId}/folder`).catch(() => undefined);
-    let withFolder = false;
-    if (folder?.own) {
-      const size = `${folder.truncated ? "> " : ""}${t("chat.folderFiles", { n: folder.files ?? 0 })}, ${formatSize(folder.bytes ?? 0)}`;
-      const choice = await choiceDialog({
-        title: t("chat.deleteTitle"),
-        message: `${t("chat.deleteWithFolder", { path: folder.path ?? "", size })}${folder.git ? `\n\n${t("chat.folderHasGit")}` : ""}`,
-        choices: [
-          { value: "chat", label: t("chat.deleteOnlyChat") },
-          { value: "both", label: t("chat.deleteChatAndFolder"), danger: true },
-        ],
-      });
-      if (!choice) return;
-      withFolder = choice === "both";
-    } else if (!(await confirmDialog({ message: t("chat.deleteConfirm"), danger: true, confirmLabel: t("common.delete") }))) return;
-    try {
-      const r = await del<{ folder_deleted?: boolean; folder_error?: string }>(`/sessions/${sessionId}${withFolder ? "?delete_folder=true" : ""}`);
-      if (r?.folder_error) toast(r.folder_error);
-      else if (r?.folder_deleted) toast(t("chat.folderDeleted"), "success");
-    } catch (e: any) {
-      return void toast(e.message);
-    }
-    navigate(session.parent_id ? `/s/${session.parent_id}` : "/new");
+    if (await deleteChat(session)) navigate(session.parent_id ? `/s/${session.parent_id}` : "/new");
   };
 
   // Context usage of the last request relative to the model's window.

web/src/components/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { ColorSwatches, IconPicker } from "./ColorSwatches";
+import { deleteChat } from "../chatActions";
 import { Icon } from "./Icon";
 import { StatusLeds } from "./StatusLeds";
 import { cycleThemeMode, getThemeMode, onThemeChange } from "../theme";
@@ -98,11 +98,21 @@ function SessionRow({ s, active, attention, busy, folders }: { s: Session; activ
               <Icon name="folder-up" /> {t("sidebar.removeFromFolder")}
             </button>
           )}
-          <ColorSwatches value={s.color} onChange={(color) => (setMenu(false), organise(s.id, { color }))} />
-          <IconPicker value={s.icon} color={s.color} onChange={(icon) => (setMenu(false), organise(s.id, { icon }))} />
           <button role="menuitem" onClick={() => (setMenu(false), organise(s.id, { archived: !s.archived }))}>
             <Icon name="archive" /> {t(s.archived ? "sidebar.unarchive" : "sidebar.archiveOne")}
           </button>
+          {!s.shared && (
+            <button
+              role="menuitem"
+              className="danger"
+              onClick={async () => {
+                setMenu(false);
+                if ((await deleteChat(s)) && active) navigate("/new");
+              }}
+            >
+              <Icon name="trash" /> {t("chat.delete")}
+            </button>
+          )}
         </div>
       )}
     </div>