Add cell toolbar multi-actions with clear outputs and delete cell (#208)

* fixed issue 126. must be paired with update to runt

* format clean up for failed test

---------

Co-authored-by: greg <greg@gregs-MacBook-Pro.local>

Author: grej

src/components/notebook/AiCell.tsx

@@ -64,6 +64,18 @@ export const AiCell: React.FC<AiCellProps> = ({
     mobileStyle: "chat-bubble",
   });
 
+  const clearCellOutputs = useCallback(async () => {
+    if (hasOutputs) {
+      store.commit(
+        events.cellOutputsCleared({
+          cellId: cell.id,
+          wait: false,
+          clearedBy: "current-user",
+        })
+      );
+    }
+  }, [cell.id, store, hasOutputs]);
+
   const executeAiPrompt = useCallback(async () => {
     // Use localSource instead of cell.source to get the current typed content
     const sourceToExecute = localSource || cell.source;
@@ -244,6 +256,8 @@ export const AiCell: React.FC<AiCellProps> = ({
           onMoveUp={onMoveUp}
           onMoveDown={onMoveDown}
           onDeleteCell={onDeleteCell}
+          onClearOutputs={clearCellOutputs}
+          hasOutputs={hasOutputs}
           toggleSourceVisibility={toggleSourceVisibility}
           toggleAiContextVisibility={toggleAiContextVisibility}
           playButton={

src/components/notebook/Cell.tsx

@@ -106,6 +106,18 @@ export const Cell: React.FC<CellProps> = ({
     );
   }, [cell.id, cell.aiContextVisible, store]);
 
+  const clearCellOutputs = useCallback(async () => {
+    if (hasOutputs) {
+      store.commit(
+        events.cellOutputsCleared({
+          cellId: cell.id,
+          wait: false,
+          clearedBy: "current-user",
+        })
+      );
+    }
+  }, [cell.id, store, hasOutputs]);
+
   const executeCell = useCallback(async () => {
     // Use localSource instead of cell.source to get the current typed content
     const sourceToExecute = localSource || cell.source;
@@ -321,6 +333,8 @@ export const Cell: React.FC<CellProps> = ({
           onMoveUp={onMoveUp}
           onMoveDown={onMoveDown}
           onDeleteCell={onDeleteCell}
+          onClearOutputs={clearCellOutputs}
+          hasOutputs={hasOutputs}
           toggleSourceVisibility={toggleSourceVisibility}
           toggleAiContextVisibility={toggleAiContextVisibility}
           playButton={

src/components/notebook/SqlCell.tsx

@@ -80,6 +80,18 @@ export const SqlCell: React.FC<SqlCellProps> = ({
     );
   }, [localQuery, cell.id, cell.executionCount, store]);
 
+  const clearCellOutputs = useCallback(async () => {
+    if (hasOutputs) {
+      store.commit(
+        events.cellOutputsCleared({
+          cellId: cell.id,
+          wait: false,
+          clearedBy: "current-user",
+        })
+      );
+    }
+  }, [cell.id, store, hasOutputs]);
+
   const interruptQuery = useCallback(() => {
     // Find the current execution in the queue for this cell
     const executionQueue = store.query(
@@ -198,6 +210,8 @@ export const SqlCell: React.FC<SqlCellProps> = ({
           onMoveUp={onMoveUp}
           onMoveDown={onMoveDown}
           onDeleteCell={onDeleteCell}
+          onClearOutputs={clearCellOutputs}
+          hasOutputs={hasOutputs}
           toggleSourceVisibility={toggleSourceVisibility}
           toggleAiContextVisibility={toggleAiContextVisibility}
           playButton={

src/components/notebook/shared/CellControls.tsx

@@ -1,5 +1,11 @@
 import React from "react";
 import { Button } from "@/components/ui/button";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
 import {
   Plus,
   ChevronUp,
@@ -9,6 +15,8 @@ import {
   ArrowUp,
   ArrowDown,
   X,
+  MoreVertical,
+  Eraser,
 } from "lucide-react";
 import { tables } from "@runt/schema";
 
@@ -19,6 +27,8 @@ interface CellControlsProps {
   onMoveUp: () => void;
   onMoveDown: () => void;
   onDeleteCell: () => void;
+  onClearOutputs: () => void;
+  hasOutputs: boolean;
   toggleSourceVisibility: () => void;
   toggleAiContextVisibility?: () => void;
   playButton?: React.ReactNode;
@@ -31,6 +41,8 @@ export const CellControls: React.FC<CellControlsProps> = ({
   onMoveUp,
   onMoveDown,
   onDeleteCell,
+  onClearOutputs,
+  hasOutputs,
   toggleSourceVisibility,
   toggleAiContextVisibility,
   playButton,
@@ -113,15 +125,28 @@ export const CellControls: React.FC<CellControlsProps> = ({
         >
           <ArrowDown className="h-3 w-3" />
         </Button>
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={onDeleteCell}
-          className="hover:bg-muted/80 h-7 w-7 p-0 text-red-500 hover:text-red-600"
-          title="Delete cell"
-        >
-          <X className="h-3 w-3" />
-        </Button>
+        <DropdownMenu>
+          <DropdownMenuTrigger asChild>
+            <Button
+              variant="ghost"
+              size="sm"
+              className="hover:bg-muted/80 h-7 w-7 p-0"
+              title="More options"
+            >
+              <MoreVertical className="h-3 w-3" />
+            </Button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent align="end">
+            <DropdownMenuItem onClick={onClearOutputs} disabled={!hasOutputs}>
+              <Eraser className="mr-2 h-4 w-4" />
+              <span>Clear outputs</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem onClick={onDeleteCell} variant="destructive">
+              <X className="mr-2 h-4 w-4" />
+              <span>Delete cell</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
       </div>
     </div>
   );