Show other parents of a note

gdn-app/src/components/CNavbar.vue

@@ -26,7 +26,7 @@ function createSomeNotes() {
 
   const n1 = mkNote("n1");
   const n2 = mkNote("n2", n2n1.id, n2n2.id, n2n3.id);
-  const n3 = mkNote("n3");
+  const n3 = mkNote("n3", n2n1.id);
   const n4 = mkNote("n4");
   const n5 = mkNote("n5", "NaN (not a note)");
 

gdn-app/src/components/CNote.vue

@@ -6,6 +6,7 @@ import {
   RiAddLine,
   RiArrowDownSLine,
   RiArrowRightSLine,
+  RiCornerUpRightLine,
   RiEditLine,
   RiStickyNoteAddLine,
 } from "@remixicon/vue";
@@ -18,12 +19,19 @@ const ui = useUiStore();
 
 const props = defineProps<{
   noteId: string;
+  parentId?: string;
   path: string; // From root to here
   forceOpen?: boolean;
 }>();
 
 const note = computed(() => notes.getNote(props.noteId));
 
+const parents = computed(() => {
+  let parents = notes.getParents(props.noteId);
+  if (props.parentId) parents = parents.difference(new Set([props.parentId]));
+  return [...parents].sort().map((id) => ({ id, text: notes.getNote(id)?.text }));
+});
+
 // Our children and their locally unique keys.
 const children = computed(() => {
   if (!note.value) return [];
@@ -117,6 +125,13 @@ function onCreateEditorFinish(text: string) {
 
 <template>
   <div class="flex flex-col">
+    <!-- Parents -->
+    <div v-if="parents.length > 0" class="pt-1">
+      <div v-for="parent of parents" class="pl-6 text-xs text-neutral-400">
+        <RiCornerUpRightLine size="12px" class="inline" /> {{ parent.text }}
+      </div>
+    </div>
+
     <div
       class="relative flex min-h-6 pl-1"
       :class="focused ? 'bg-neutral-200' : hover ? 'bg-neutral-100' : ''"
@@ -166,9 +181,10 @@ function onCreateEditorFinish(text: string) {
     <!-- Children -->
     <div v-if="open && children.length > 0" class="flex flex-col pl-2">
       <CNote
-        v-for="child in children"
+        v-for="child of children"
         :key="child.key"
         :noteId="child.id"
+        :parentId="props.noteId"
         :path="pathAppend(path, child.key)"
       />
     </div>

gdn-app/src/stores/notes.ts

@@ -1,8 +1,8 @@
 import { defineStore } from "pinia";
-import { ref } from "vue";
+import { computed, ref } from "vue";
 
 export type Note = {
-  id: string;
+  readonly id: string;
   text: string;
   children: string[];
 };
@@ -10,10 +10,26 @@ export type Note = {
 export const useNotesStore = defineStore("notes", () => {
   const notes = ref<Map<string, Note>>(new Map());
 
+  const parents = computed(() => {
+    const result = new Map<string, Set<string>>();
+    for (const note of notes.value.values()) {
+      for (const childId of note.children) {
+        const parents = result.get(childId) || new Set();
+        result.set(childId, parents);
+        parents.add(note.id);
+      }
+    }
+    return result;
+  });
+
   function getNote(id: string): Note | undefined {
     return notes.value.get(id);
   }
 
+  function getParents(id: string): ReadonlySet<string> {
+    return parents.value.get(id) || new Set();
+  }
+
   function createNote(text: string): Note {
     const id = crypto.randomUUID();
     notes.value.set(id, { id, text, children: [] });
@@ -26,6 +42,7 @@ export const useNotesStore = defineStore("notes", () => {
 
   return {
     getNote,
+    getParents,
     createNote,
     clearNotes,
   };