Put delete workspace in settings

src-web/components/WorkpaceSettingsDialog.tsx

@@ -1,5 +1,7 @@
+import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
 import { useUpdateWorkspace } from '../hooks/useUpdateWorkspace';
 import { useWorkspaces } from '../hooks/useWorkspaces';
+import { Button } from './core/Button';
 import { PlainInput } from './core/PlainInput';
 import { VStack } from './core/Stacks';
 import { MarkdownEditor } from './MarkdownEditor';
@@ -12,12 +14,12 @@ export function WorkspaceSettingsDialog({ workspaceId }: Props) {
   const updateWorkspace = useUpdateWorkspace(workspaceId ?? null);
   const workspaces = useWorkspaces();
   const workspace = workspaces.find((w) => w.id === workspaceId);
+  const { mutate: deleteWorkspace } = useDeleteWorkspace();
 
   if (workspace == null) return null;
 
   return (
-    <VStack space={3} className="pb-3 max-h-[50vh]">
-        {workspace.id}
+    <VStack space={3} alignItems="start" className="pb-3 max-h-[50vh]">
       <PlainInput
         label="Workspace Name"
         defaultValue={workspace.name}
@@ -31,8 +33,14 @@ export function WorkspaceSettingsDialog({ workspaceId }: Props) {
         defaultValue={workspace.description}
         stateKey={`description.${workspace.id}`}
         onChange={(description) => updateWorkspace.mutate({ description })}
-        heightMode='auto'
+        heightMode="auto"
       />
+
+      <VStack space={3} className="mt-3" alignItems="start">
+        <Button onClick={() => deleteWorkspace()} color="danger" variant="border">
+          Delete Workspace
+        </Button>
+      </VStack>
     </VStack>
   );
 }

src-web/components/WorkspaceActionsDropdown.tsx

@@ -3,7 +3,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useActiveWorkspace } from '../hooks/useActiveWorkspace';
 import { useCreateWorkspace } from '../hooks/useCreateWorkspace';
 import { useDeleteSendHistory } from '../hooks/useDeleteSendHistory';
-import { useDeleteWorkspace } from '../hooks/useDeleteWorkspace';
+import { useDialog } from '../hooks/useDialog';
 import { useOpenWorkspace } from '../hooks/useOpenWorkspace';
 import { useSettings } from '../hooks/useSettings';
 import { useWorkspaces } from '../hooks/useWorkspaces';
@@ -14,7 +14,6 @@ import type { DropdownItem } from './core/Dropdown';
 import { Icon } from './core/Icon';
 import type { RadioDropdownItem } from './core/RadioDropdown';
 import { RadioDropdown } from './core/RadioDropdown';
-import { useDialog } from '../hooks/useDialog';
 import { OpenWorkspaceDialog } from './OpenWorkspaceDialog';
 import { WorkspaceSettingsDialog } from './WorkpaceSettingsDialog';
 
@@ -27,13 +26,12 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   const workspaces = useWorkspaces();
   const activeWorkspace = useActiveWorkspace();
   const activeWorkspaceId = activeWorkspace?.id ?? null;
-  const deleteWorkspace = useDeleteWorkspace(activeWorkspace);
-  const createWorkspace = useCreateWorkspace();
+  const { mutate: createWorkspace } = useCreateWorkspace();
+  const { mutate: deleteSendHistory } = useDeleteSendHistory();
   const dialog = useDialog();
   const settings = useSettings();
   const openWorkspace = useOpenWorkspace();
   const openWorkspaceNewWindow = settings?.openWorkspaceNewWindow ?? null;
-  const deleteSendHistory = useDeleteSendHistory();
 
   const orderedWorkspaces = useMemo(
     () => [...workspaces].sort((a, b) => (a.name.localeCompare(b.name) > 0 ? 1 : -1)),
@@ -69,21 +67,14 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
         key: 'delete-responses',
         label: 'Clear Send History',
         leftSlot: <Icon icon="history" />,
-        onSelect: deleteSendHistory.mutate,
-      },
-      {
-        key: 'delete',
-        label: 'Delete Workspace',
-        leftSlot: <Icon icon="trash" />,
-        onSelect: deleteWorkspace.mutate,
-        variant: 'danger',
+        onSelect: deleteSendHistory,
       },
       { type: 'separator' },
       {
         key: 'create-workspace',
         label: 'New Workspace',
         leftSlot: <Icon icon="plus" />,
-        onSelect: createWorkspace.mutate,
+        onSelect: createWorkspace,
       },
     ];
 
@@ -91,9 +82,8 @@ export const WorkspaceActionsDropdown = memo(function WorkspaceActionsDropdown({
   }, [
     activeWorkspace?.id,
     activeWorkspaceId,
-    createWorkspace.mutate,
-    deleteSendHistory.mutate,
-    deleteWorkspace.mutate,
+    createWorkspace,
+    deleteSendHistory,
     dialog,
     orderedWorkspaces,
   ]);

src-web/hooks/useDeleteWorkspace.tsx

@@ -10,13 +10,13 @@ import { useFastMutation } from './useFastMutation';
 import { removeModelById } from './useSyncModelStores';
 import { workspacesAtom } from './useWorkspaces';
 
-export function useDeleteWorkspace(workspace: Workspace | null) {
+export function useDeleteWorkspace() {
   const confirm = useConfirm();
   const setWorkspaces = useSetAtom(workspacesAtom);
   const navigate = useNavigate();
 
   return useFastMutation<Workspace | null, string>({
-    mutationKey: ['delete_workspace', workspace?.id],
+    mutationKey: ['delete_workspace'],
     mutationFn: async () => {
       const workspace = getActiveWorkspace();
       const confirmed = await confirm({