Add temporary button to go back to previous note

gdn-app/src/components/CNavbar.vue

@@ -2,7 +2,12 @@
 import { Note, useNotesStore } from "@/stores/notes";
 import { useReposStore } from "@/stores/repos";
 import { useUiStore } from "@/stores/ui";
-import { RiDeleteBinFill, RiNodeTree, RiSettings3Fill } from "@remixicon/vue";
+import {
+  RiArrowLeftDoubleLine,
+  RiDeleteBinFill,
+  RiNodeTree,
+  RiSettings3Fill,
+} from "@remixicon/vue";
 import { onMounted } from "vue";
 import CNavbarButton from "./CNavbarButton.vue";
 import CNavbarDropdown from "./CNavbarDropdown.vue";
@@ -32,7 +37,7 @@ function createSomeNotes(): void {
 
   const root = mkNote("root", n1.id, n2.id, n3.id, n4.id, n5.id, n2.id);
 
-  ui.anchorId = root.id;
+  ui.pushAnchorId(root.id);
 
   // Shuffle children of root
   root.children = root.children
@@ -54,6 +59,11 @@ onMounted(() => {
       <CNavbarDropdown />
     </div>
 
+    <!-- Temporary back button -->
+    <CNavbarButton title="Go back" @click="ui.popAnchorId()">
+      <RiArrowLeftDoubleLine size="16px" class="inline" />
+    </CNavbarButton>
+
     <!-- Temporary button for testing -->
     <CNavbarButton title="Create dummy note tree" @click="createSomeNotes">
       <RiNodeTree size="16px" class="inline" />

gdn-app/src/components/CNote.vue

@@ -132,7 +132,7 @@ function onCreateEditorFinish(text: string): void {
 }
 
 function onMoveButtonClick(): void {
-  ui.anchorId = props.segment.id;
+  ui.pushAnchorId(props.segment.id);
 }
 </script>
 

gdn-app/src/stores/ui.ts

@@ -1,11 +1,21 @@
 import { Segment, Path as UiPath } from "@/lib/path";
 import { defineStore } from "pinia";
-import { ref, watchEffect } from "vue";
+import { computed, ref, watchEffect } from "vue";
 
 export const useUiStore = defineStore("ui", () => {
-  const anchorId = ref<string>();
+  const history = ref<
+    {
+      anchorId: string;
+      focusPath: UiPath;
+      openPaths: Set<string>;
+    }[]
+  >([]);
+
+  const _anchorId = ref<string>();
+  const anchorId = computed(() => _anchorId.value);
   const focusPath = ref<UiPath>(new UiPath());
   const openPaths = ref<Set<string>>(new Set());
+
   const pinned = ref<{ segment: Segment; parentId?: string }>();
 
   // Ensure all nodes on the focusPath are unfolded.
@@ -16,6 +26,36 @@ export const useUiStore = defineStore("ui", () => {
     }
   });
 
+  function pushAnchorId(id: string): void {
+    if (_anchorId.value) {
+      history.value.push({
+        anchorId: _anchorId.value,
+        focusPath: focusPath.value,
+        openPaths: openPaths.value,
+      });
+    }
+
+    _anchorId.value = id;
+    focusPath.value = new UiPath();
+    openPaths.value = new Set();
+  }
+
+  function popAnchorId(): void {
+    // Temporary solution until I implement some UI for anchorId===undefined
+    if (history.value.length === 0) return;
+
+    const entry = history.value.pop();
+    if (entry) {
+      _anchorId.value = entry.anchorId;
+      focusPath.value = entry.focusPath;
+      openPaths.value = entry.openPaths;
+    } else {
+      _anchorId.value = undefined;
+      focusPath.value = new UiPath();
+      openPaths.value = new Set();
+    }
+  }
+
   function isOpen(path: UiPath): boolean {
     return openPaths.value.has(path.fmt());
   }
@@ -53,6 +93,8 @@ export const useUiStore = defineStore("ui", () => {
   return {
     anchorId,
     focusPath,
+    pushAnchorId,
+    popAnchorId,
     isOpen,
     setOpen,
     toggleOpen,