Display very basic tree of nodes

gdn-app/src/App.vue

@@ -1,22 +1,22 @@
 <script setup lang="ts">
+import CNote from "./components/CNote.vue";
 import Navbar from "./components/Navbar.vue";
+import { Note } from "./types";
+
+const testNote: Note = {
+  text: "hello",
+  children: [
+    { text: "world", children: [] },
+    { text: "foo", children: [] },
+  ],
+};
 </script>
 
 <template>
   <div class="flex h-screen touch-pan-x touch-pan-y flex-col">
     <Navbar />
-    <div class="h-full overflow-auto">
-      <template v-for="_ in 6">
-        <p class="p-1 font-thin">The quick brown fox Qiii</p>
-        <p class="p-1 font-extralight">The quick brown fox Qiii</p>
-        <p class="p-1 font-light">The quick brown fox Qiii</p>
-        <p class="p-1 font-normal">The quick brown fox Qiii</p>
-        <p class="p-1 font-medium">The quick brown fox Qiii</p>
-        <p class="p-1 font-semibold">The quick brown fox Qiii</p>
-        <p class="p-1 font-bold">The quick brown fox Qiii</p>
-        <p class="p-1 font-extrabold">The quick brown fox Qiii</p>
-        <p class="p-1 font-black">The quick brown fox Qiii</p>
-      </template>
+    <div class="h-full overflow-auto px-2 py-1">
+      <CNote :note="testNote" />
     </div>
   </div>
 </template>

gdn-app/src/components/CNote.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { Note as Note } from "@/types";
+
+const props = defineProps<{ note: Note }>();
+</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>
+  </div>
+</template>

gdn-app/src/types.ts

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