From e18e8981025ad4f3564af98622c7b2029d222308 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Tue, 28 Jan 2025 22:18:05 +0100
Subject: [PATCH] Display very basic tree of nodes

---
 gdn-app/src/App.vue              | 24 ++++++++++++------------
 gdn-app/src/components/CNote.vue | 15 +++++++++++++++
 gdn-app/src/types.ts             |  4 ++++
 3 files changed, 31 insertions(+), 12 deletions(-)
 create mode 100644 gdn-app/src/components/CNote.vue
 create mode 100644 gdn-app/src/types.ts

diff --git a/gdn-app/src/App.vue b/gdn-app/src/App.vue
index fd75922..7986b7b 100644
--- a/gdn-app/src/App.vue
+++ b/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>
diff --git a/gdn-app/src/components/CNote.vue b/gdn-app/src/components/CNote.vue
new file mode 100644
index 0000000..57a041f
--- /dev/null
+++ b/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>
diff --git a/gdn-app/src/types.ts b/gdn-app/src/types.ts
new file mode 100644
index 0000000..cda19f4
--- /dev/null
+++ b/gdn-app/src/types.ts
@@ -0,0 +1,4 @@
+export type Note = {
+  text: string;
+  children: Note[];
+};