Render notes from store

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>
-      <CNote v-for="child in props.note.children" :note="child"></CNote>
+  <div class="flex flex-col">
+    <div class="flex flex-row gap-1" @click="open = !open">
+      <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>