add a 'close block' button

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 {

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>

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 };

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>
                 );
             })}

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>