From d445cf2a71f95a704082366de704b5f018a0d401 Mon Sep 17 00:00:00 2001
From: Michael Zhang <mail@mzhang.io>
Date: Mon, 27 May 2024 20:45:20 -0500
Subject: [PATCH] close nodes

---
 app/src/App.tsx                            | 13 +++++++++----
 app/src/components/Header.tsx              |  8 ++++----
 app/src/components/NodeDisplay.module.scss | 10 +++++++---
 app/src/components/NodeDisplay.tsx         | 21 ++++++++++++++++++---
 app/src/components/SearchBar.tsx           |  4 ++--
 app/src/components/Sidebar.tsx             |  4 ++--
 6 files changed, 42 insertions(+), 18 deletions(-)

diff --git a/app/src/App.tsx b/app/src/App.tsx
index aa22cd4..d3c3c6f 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -22,7 +22,7 @@ export const nodesOpenedAtom = atom<OrderedSet<string>>(OrderedSet<string>());
 
 function App() {
 	const nodesOpened = useAtomValue(nodesOpenedAtom);
-	const openNode = useOpenNode();
+	const { openNode } = useNodeControls();
 
 	// Open today's journal entry if it's not already opened
 	useEffect(() => {
@@ -60,9 +60,14 @@ function App() {
 
 export default App;
 
-export function useOpenNode() {
+export function useNodeControls() {
 	const [nodesOpened, setNodesOpened] = useAtom(nodesOpenedAtom);
-	return (node_id: string) => {
-		setNodesOpened(nodesOpened.remove(node_id).add(node_id));
+	return {
+		openNode: (node_id: string) => {
+			setNodesOpened(nodesOpened.remove(node_id).add(node_id));
+		},
+		closeNode: (node_id: string) => {
+			setNodesOpened(nodesOpened.remove(node_id));
+		},
 	};
 }
diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
index 8cbf1f5..39e3704 100644
--- a/app/src/components/Header.tsx
+++ b/app/src/components/Header.tsx
@@ -5,13 +5,13 @@ import { getVersion } from "@tauri-apps/api/app";
 import ListIcon from "@mui/icons-material/List";
 import { useSetAtom } from "jotai";
 import { sidebarExpandedAtom } from "./Sidebar";
-import { nodesOpenedAtom, useOpenNode } from "../App";
+import { useNodeControls } from "../App";
 import { useCallback } from "react";
 
 const version = await getVersion();
 
 export default function Header() {
-	const openNode = useOpenNode();
+	const { openNode } = useNodeControls();
 	const setSidebarExpanded = useSetAtom(sidebarExpandedAtom);
 
 	const createNewJournalPage = useCallback(() => {
@@ -40,14 +40,14 @@ export default function Header() {
 					type="button"
 					onClick={() => setSidebarExpanded((prev) => !prev)}
 				>
-					<ListIcon />
+					<ListIcon fontSize="inherit" />
 				</button>
 				<div className={styles.brand}>
 					<span className={styles.title}>Panorama</span>
 					<span className={styles.version}>v{version}</span>
 				</div>
 				<button type="button" onClick={createNewJournalPage}>
-					<NoteAddIcon />
+					<NoteAddIcon fontSize="inherit" />
 				</button>
 				<SearchBar />
 			</div>
diff --git a/app/src/components/NodeDisplay.module.scss b/app/src/components/NodeDisplay.module.scss
index 74c72f1..9950d01 100644
--- a/app/src/components/NodeDisplay.module.scss
+++ b/app/src/components/NodeDisplay.module.scss
@@ -26,8 +26,7 @@
 
   font-size: 0.6rem;
   display: flex;
-  align-items: center;
-  gap: 6px;
+  align-items: stretch;
   padding: 0 6px;
 
   button {
@@ -41,10 +40,15 @@
     &:hover {
       background-color: rgba(0, 0, 0, 0.25);
     }
+
+    &.closeButton:hover {
+      background-color: red;
+      color: white;
+    }
   }
 
   span {
-    padding: 2px 0;
+    padding: 6px;
   }
 }
 
diff --git a/app/src/components/NodeDisplay.tsx b/app/src/components/NodeDisplay.tsx
index cc61fab..d688093 100644
--- a/app/src/components/NodeDisplay.tsx
+++ b/app/src/components/NodeDisplay.tsx
@@ -1,10 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import styles from "./NodeDisplay.module.scss";
 import ReactTimeAgo from "react-time-ago";
-import JournalPage from "./nodes/JournalPage";
 import { getNode } from "../lib/getNode";
 import FirstPageIcon from "@mui/icons-material/FirstPage";
-import { useOpenNode } from "../App";
+import MoreVertIcon from "@mui/icons-material/MoreVert";
+import CloseIcon from "@mui/icons-material/Close";
+import { useNodeControls } from "../App";
 
 export interface NodeDisplayProps {
 	id: string;
@@ -48,7 +49,8 @@ export default function NodeDisplay({ id, idx }: NodeDisplayProps) {
 }
 
 function NodeDisplayHeaderLoaded({ idx, id, data }) {
-	const openNode = useOpenNode();
+	const { openNode, closeNode } = useNodeControls();
+
 	return (
 		<>
 			{idx === 0 || (
@@ -68,6 +70,19 @@ function NodeDisplayHeaderLoaded({ idx, id, data }) {
 					</>
 				)}
 			</span>
+			<div className="spacer" />
+
+			<button type="button">
+				<MoreVertIcon fontSize="inherit" />
+			</button>
+
+			<button
+				type="button"
+				className={styles.closeButton}
+				onClick={() => closeNode(id)}
+			>
+				<CloseIcon fontSize="inherit" />
+			</button>
 		</>
 	);
 }
diff --git a/app/src/components/SearchBar.tsx b/app/src/components/SearchBar.tsx
index 5254ca4..843fa48 100644
--- a/app/src/components/SearchBar.tsx
+++ b/app/src/components/SearchBar.tsx
@@ -14,7 +14,7 @@ import {
 import { useDebounce } from "use-debounce";
 import { useEffect, useState } from "react";
 import { atom, useAtom, useSetAtom } from "jotai";
-import { nodesOpenedAtom, useOpenNode } from "../App";
+import { useNodeControls } from "../App";
 
 const searchQueryAtom = atom("");
 const showMenuAtom = atom(false);
@@ -89,7 +89,7 @@ export default function SearchBar() {
 function SearchMenu({ results }) {
 	const setSearchQuery = useSetAtom(searchQueryAtom);
 	const setShowMenu = useSetAtom(showMenuAtom);
-	const openNode = useOpenNode();
+	const { openNode } = useNodeControls();
 
 	return (
 		<div className={styles.searchResults}>
diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx
index 724b56b..07d4dae 100644
--- a/app/src/components/Sidebar.tsx
+++ b/app/src/components/Sidebar.tsx
@@ -3,13 +3,13 @@ import styles from "./Sidebar.module.scss";
 import classNames from "classnames";
 import EmailIcon from "@mui/icons-material/Email";
 import SettingsIcon from "@mui/icons-material/Settings";
-import { useOpenNode } from "../App";
+import { useNodeControls } from "../App";
 
 export const sidebarExpandedAtom = atom(false);
 
 export default function Sidebar() {
 	const sidebarExpanded = useAtomValue(sidebarExpandedAtom);
-	const openNode = useOpenNode();
+	const { openNode } = useNodeControls();
 
 	return (
 		<div