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 (