diff --git a/app/package.json b/app/package.json
index a1bc36b..bdc51ea 100644
--- a/app/package.json
+++ b/app/package.json
@@ -15,6 +15,7 @@
"@fontsource/inter": "^5.0.18",
"@mui/icons-material": "^5.15.18",
"@mui/material": "^5.15.18",
+ "@react-spring/web": "^9.7.3",
"@remark-embedder/core": "^3.0.3",
"@tanstack/react-query": "^5.37.1",
"@tauri-apps/api": "^1",
@@ -49,6 +50,7 @@
"@types/react": "^18.2.15",
"@types/react-dom": "^18.2.7",
"@vitejs/plugin-react": "^4.2.1",
+ "rollup-plugin-visualizer": "^5.12.0",
"sass": "^1.77.2",
"typescript": "^5.0.2",
"vite": "^5.0.0"
diff --git a/app/src/App.tsx b/app/src/App.tsx
index d3c3c6f..e5b1e64 100644
--- a/app/src/App.tsx
+++ b/app/src/App.tsx
@@ -63,6 +63,11 @@ export default App;
export function useNodeControls() {
const [nodesOpened, setNodesOpened] = useAtom(nodesOpenedAtom);
return {
+ isOpen: (node_id: string) => nodesOpened.has(node_id),
+ toggleNode: (node_id: string) => {
+ if (nodesOpened.has(node_id)) setNodesOpened(nodesOpened.remove(node_id));
+ else setNodesOpened(nodesOpened.remove(node_id).add(node_id));
+ },
openNode: (node_id: string) => {
setNodesOpened(nodesOpened.remove(node_id).add(node_id));
},
diff --git a/app/src/components/Header.tsx b/app/src/components/Header.tsx
index 39e3704..e577b74 100644
--- a/app/src/components/Header.tsx
+++ b/app/src/components/Header.tsx
@@ -7,12 +7,16 @@ import { useSetAtom } from "jotai";
import { sidebarExpandedAtom } from "./Sidebar";
import { useNodeControls } from "../App";
import { useCallback } from "react";
-
-const version = await getVersion();
+import { useQuery } from "@tanstack/react-query";
export default function Header() {
const { openNode } = useNodeControls();
const setSidebarExpanded = useSetAtom(sidebarExpandedAtom);
+ const versionData = useQuery({
+ queryKey: ["appVersion"],
+ queryFn: getVersion,
+ });
+ const { data: version } = versionData;
const createNewJournalPage = useCallback(() => {
(async () => {
diff --git a/app/src/components/Sidebar.module.scss b/app/src/components/Sidebar.module.scss
index 7076b4e..37d0db5 100644
--- a/app/src/components/Sidebar.module.scss
+++ b/app/src/components/Sidebar.module.scss
@@ -4,7 +4,11 @@
gap: 6px;
background-color: rgba(204, 201, 255);
- padding: 6px;
+ padding: 12px 6px;
+
+ &.expanded {
+ padding: 12px;
+ }
.item {
display: flex;
@@ -19,6 +23,10 @@
background-color: rgba(255, 255, 255, 0.2);
cursor: pointer;
}
+
+ &.active {
+ background-color: rgba(255, 255, 255, 0.75);
+ }
}
&.expanded .item {
diff --git a/app/src/components/Sidebar.tsx b/app/src/components/Sidebar.tsx
index 07d4dae..0c98878 100644
--- a/app/src/components/Sidebar.tsx
+++ b/app/src/components/Sidebar.tsx
@@ -9,7 +9,7 @@ export const sidebarExpandedAtom = atom(false);
export default function Sidebar() {
const sidebarExpanded = useAtomValue(sidebarExpandedAtom);
- const { openNode } = useNodeControls();
+ const { toggleNode, isOpen } = useNodeControls();
return (