Render notes from store

gdn-app/src/App.vue

@@ -1,22 +1,16 @@
 <script setup lang="ts">
 import CNavbar from "./components/CNavbar.vue";
 import CNote from "./components/CNote.vue";
-import { Note } from "./types";
+import { useUiStore } from "./stores/ui";
 
-const testNote: Note = {
+const ui = useUiStore();
-  text: "hello",
-  children: [
-    { text: "world", children: [] },
-    { text: "foo", children: [] },
-  ],
-};
 </script>
 
 <template>
   <div class="flex h-screen touch-pan-x touch-pan-y flex-col">
     <CNavbar />
     <div class="h-full overflow-auto px-2 py-1">
-      <CNote :note="testNote" />
+      <CNote :id="ui.anchor" />
     </div>
   </div>
 </template>

gdn-app/src/components/CNavbar.vue

@@ -1,10 +1,33 @@
 <script setup lang="ts">
 import { useReposStore } from "@/stores/repos";
-import { RiDeleteBinFill, RiSettings3Fill } from "@remixicon/vue";
+import { RiDeleteBinFill, RiNodeTree, RiSettings3Fill } from "@remixicon/vue";
 import CNavbarButton from "./CNavbarButton.vue";
 import CNavbarDropdown from "./CNavbarDropdown.vue";
+import { useUiStore } from "@/stores/ui";
+import { useNotesStore } from "@/stores/notes";
 
 const repos = useReposStore();
+const notes = useNotesStore();
+const ui = useUiStore();
+
+function createSomeNodes() {
+  notes.clearNotes();
+
+  const root = notes.addNote("root");
+  ui.anchor = root.id;
+
+  notes.appendChildNote(root.id, "n1")!;
+  const n2 = notes.appendChildNote(root.id, "n2")!;
+  notes.appendChildNote(root.id, "n3")!;
+  notes.appendChildNote(root.id, "n4")!;
+  const n5 = notes.appendChildNote(root.id, "n5")!;
+
+  notes.appendChildNote(n2.id, "n2n1")!;
+  notes.appendChildNote(n2.id, "n2n2")!;
+  notes.appendChildNote(n2.id, "n2n3")!;
+
+  n5.children.push("NaN (Not a Note)");
+}
 </script>
 
 <template>
@@ -15,6 +38,11 @@ const repos = useReposStore();
       <CNavbarDropdown />
     </div>
 
+    <!-- Temporary button for testing -->
+    <CNavbarButton @click="createSomeNodes">
+      <RiNodeTree size="16px" class="inline" />
+    </CNavbarButton>
+
     <!-- Temporary delete button until I add proper repo settings -->
     <CNavbarButton
       v-show="repos.selectedRepo !== undefined"

gdn-app/src/components/CNote.vue

@@ -1,15 +1,43 @@
 <script setup lang="ts">
-import { Note } from "@/types";
+import { useNotesStore } from "@/stores/notes";
+import { RiArrowDownSLine, RiArrowRightSLine } from "@remixicon/vue";
+import { computed, ref } from "vue";
 
-const props = defineProps<{ note: Note }>();
+const { notes } = useNotesStore();
+
+const props = defineProps<{ id: string | undefined }>();
+
+const note = computed(() => (props.id ? notes.get(props.id) : undefined));
+const open = ref(false);
 </script>
 
 <template>
-  <div class="flex flex-row gap-1">
-    <div>•</div>
   <div class="flex flex-col">
-      <div>{{ props.note.text }}</div>
+    <div class="flex flex-row gap-1" @click="open = !open">
-      <CNote v-for="child in props.note.children" :note="child"></CNote>
+      <div
+        v-if="note && note.children.length > 0 && !open"
+        class="flex items-center"
+      >
+        <RiArrowRightSLine size="16px" />
+      </div>
+      <div
+        v-else-if="note && note.children.length > 0"
+        class="flex items-center"
+      >
+        <RiArrowDownSLine size="16px" />
+      </div>
+      <div v-else class="flex items-center">
+        <RiArrowRightSLine size="16px" class="text-neutral-400" />
+      </div>
+      <!-- <div v-else class="text-neutral-500">v</div> -->
+      <div v-if="note">{{ note.text }}</div>
+      <div v-else class="font-light italic">note not found</div>
+    </div>
+    <div
+      v-if="note && open"
+      class="flex flex-col border-l border-neutral-300 pl-3"
+    >
+      <CNote v-for="child in note.children" :id="child"></CNote>
     </div>
   </div>
 </template>

gdn-app/src/stores/notes.ts

@@ -0,0 +1,37 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+type Note = {
+  id: string;
+  text: string;
+  children: string[];
+};
+
+export const useNotesStore = defineStore("notes", () => {
+  const notes = ref<Map<string, Note>>(new Map());
+
+  function addNote(text: string): Note {
+    const id = crypto.randomUUID();
+    notes.value.set(id, { id, text, children: [] });
+    return notes.value.get(id)!; // Re-getting so returned Note is reactive
+  }
+
+  function appendChildNote(parentId: string, text: string): Note | undefined {
+    const parent = notes.value.get(parentId);
+    if (parent === undefined) return undefined;
+    const note = addNote(text);
+    parent.children.push(note.id);
+    return note;
+  }
+
+  function clearNotes() {
+    notes.value.clear();
+  }
+
+  return {
+    notes,
+    addNote,
+    appendChildNote,
+    clearNotes,
+  };
+});

gdn-app/src/stores/ui.ts

@@ -0,0 +1,10 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+export const useUiStore = defineStore("ui", () => {
+  const anchor = ref<string>();
+
+  return {
+    anchor,
+  };
+});

gdn-app/src/types.ts

@@ -1,4 +0,0 @@
-export type Note = {
-  text: string;
-  children: Note[];
-};