From 91d7392c34141ad0411f84f7ca46ea0f0182e5cf Mon Sep 17 00:00:00 2001
From: sawka <mike.sawka@gmail.com>
Date: Thu, 16 May 2024 13:22:46 -0700
Subject: [PATCH] add a 'close block' button

---
 frontend/app/block/block.less        | 13 +++++++++++++
 frontend/app/block/block.tsx         | 15 ++++++++++++---
 frontend/app/store/global.ts         | 12 +++++++++++-
 frontend/app/tab/tab.tsx             |  2 +-
 frontend/app/workspace/workspace.tsx |  2 +-
 5 files changed, 38 insertions(+), 6 deletions(-)

diff --git a/frontend/app/block/block.less b/frontend/app/block/block.less
index 07d35b715..fb1c6024f 100644
--- a/frontend/app/block/block.less
+++ b/frontend/app/block/block.less
@@ -13,12 +13,25 @@
 
     .block-header {
         display: flex;
+        flex-direction: row;
         flex-shrink: 0;
         height: 30px;
         width: 100%;
         align-items: center;
         justify-content: center;
         background-color: var(--panel-bg-color);
+
+        .block-header-text {
+            padding-left: 5px;
+        }
+
+        .close-button {
+            font-size: 12px;
+            padding-right: 5px;
+            &:hover {
+                cursor: pointer;
+            }
+        }
     }
 
     .block-content {
diff --git a/frontend/app/block/block.tsx b/frontend/app/block/block.tsx
index 6f0cf590e..135d3562c 100644
--- a/frontend/app/block/block.tsx
+++ b/frontend/app/block/block.tsx
@@ -3,7 +3,7 @@
 
 import * as React from "react";
 import * as jotai from "jotai";
-import { atoms, blockDataMap } from "@/store/global";
+import { atoms, blockDataMap, removeBlockFromTab } from "@/store/global";
 
 import { TerminalView } from "@/app/view/term";
 import { PreviewView } from "@/app/view/preview";
@@ -11,9 +11,14 @@ import { CenteredLoadingDiv } from "@/element/quickelems";
 
 import "./block.less";
 
-const Block = ({ blockId }: { blockId: string }) => {
+const Block = ({ tabId, blockId }: { tabId: string; blockId: string }) => {
     const blockRef = React.useRef<HTMLDivElement>(null);
     const [dims, setDims] = React.useState({ width: 0, height: 0 });
+
+    function handleClose() {
+        removeBlockFromTab(tabId, blockId);
+    }
+
     React.useEffect(() => {
         if (!blockRef.current) {
             return;
@@ -36,9 +41,13 @@ const Block = ({ blockId }: { blockId: string }) => {
     return (
         <div className="block" ref={blockRef}>
             <div key="header" className="block-header">
-                <div className="text-fixed">
+                <div className="block-header-text text-fixed">
                     Block [{blockId.substring(0, 8)}] {dims.width}x{dims.height}
                 </div>
+                <div className="flex-spacer" />
+                <div className="close-button" onClick={() => handleClose()}>
+                    <i className="fa fa-solid fa-xmark-large" />
+                </div>
             </div>
             <div key="content" className="block-content">
                 <React.Suspense fallback={<CenteredLoadingDiv />}>{blockElem}</React.Suspense>
diff --git a/frontend/app/store/global.ts b/frontend/app/store/global.ts
index 6abc56949..d62f604f1 100644
--- a/frontend/app/store/global.ts
+++ b/frontend/app/store/global.ts
@@ -87,4 +87,14 @@ function useBlockAtom<T>(blockId: string, name: string, makeFn: () => jotai.Atom
     return atom as jotai.Atom<T>;
 }
 
-export { globalStore, atoms, getBlockSubject, addBlockIdToTab, blockDataMap, useBlockAtom };
+function removeBlockFromTab(tabId: string, blockId: string) {
+    let tabArr = globalStore.get(atoms.tabsAtom);
+    const newTabArr = produce(tabArr, (draft) => {
+        const tab = draft.find((tab) => tab.tabid == tabId);
+        tab.blockIds = tab.blockIds.filter((id) => id !== blockId);
+    });
+    globalStore.set(atoms.tabsAtom, newTabArr);
+    removeBlock(blockId);
+}
+
+export { globalStore, atoms, getBlockSubject, addBlockIdToTab, blockDataMap, useBlockAtom, removeBlockFromTab };
diff --git a/frontend/app/tab/tab.tsx b/frontend/app/tab/tab.tsx
index cb71ce9c0..6b762936a 100644
--- a/frontend/app/tab/tab.tsx
+++ b/frontend/app/tab/tab.tsx
@@ -19,7 +19,7 @@ const TabContent = ({ tabId }: { tabId: string }) => {
             {tabData.blockIds.map((blockId: string) => {
                 return (
                     <div key={blockId} className="block-container">
-                        <Block blockId={blockId} />
+                        <Block tabId={tabId} blockId={blockId} />
                     </div>
                 );
             })}
diff --git a/frontend/app/workspace/workspace.tsx b/frontend/app/workspace/workspace.tsx
index e08d37325..3f3f8c575 100644
--- a/frontend/app/workspace/workspace.tsx
+++ b/frontend/app/workspace/workspace.tsx
@@ -102,7 +102,7 @@ function Workspace() {
         <div className="workspace">
             <TabBar />
             <div className="workspace-tabcontent">
-                <TabContent tabId={activeTabId} />
+                <TabContent key={activeTabId} tabId={activeTabId} />
                 <Widgets />
             </div>
         </div>