From 8453f6ee53fb110315b18a63a5863e6342e39c99 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Thu, 6 Feb 2025 02:55:33 +0100
Subject: [PATCH] Add nonfunctional text box to create new notes

---
 gdn-app/src/App.vue                     |  7 +++-
 gdn-app/src/components/CNote.vue        | 46 +++++++++++++++++++++----
 gdn-app/src/components/CNoteButton.vue  |  7 ++++
 gdn-app/src/components/CNoteCreator.vue | 43 +++++++++++++++++++++++
 4 files changed, 96 insertions(+), 7 deletions(-)
 create mode 100644 gdn-app/src/components/CNoteButton.vue
 create mode 100644 gdn-app/src/components/CNoteCreator.vue

diff --git a/gdn-app/src/App.vue b/gdn-app/src/App.vue
index b597a88..f2590b5 100644
--- a/gdn-app/src/App.vue
+++ b/gdn-app/src/App.vue
@@ -10,7 +10,12 @@ const ui = useUiStore();
   <div class="flex h-screen touch-pan-x touch-pan-y flex-col">
     <CNavbar />
     <div class="h-full overflow-auto p-1">
-      <CNote :noteId="ui.anchor" :path="[]" :focusPath="ui.focusPath" />
+      <CNote
+        v-if="ui.anchor"
+        :noteId="ui.anchor"
+        :path="[]"
+        :focusPath="ui.focusPath"
+      />
     </div>
   </div>
 </template>
diff --git a/gdn-app/src/components/CNote.vue b/gdn-app/src/components/CNote.vue
index 073ef1b..b84e1d7 100644
--- a/gdn-app/src/components/CNote.vue
+++ b/gdn-app/src/components/CNote.vue
@@ -1,21 +1,25 @@
 <script setup lang="ts">
 import { useNotesStore } from "@/stores/notes";
 import { useUiStore } from "@/stores/ui";
-import { RiArrowDownSLine, RiArrowRightSLine } from "@remixicon/vue";
+import {
+  RiArrowDownSLine,
+  RiArrowRightSLine,
+  RiStickyNoteAddLine,
+} from "@remixicon/vue";
 import { computed, ref, watchEffect } from "vue";
+import CNoteButton from "./CNoteButton.vue";
+import CNoteCreator from "./CNoteCreator.vue";
 
 const notes = useNotesStore();
 const ui = useUiStore();
 
 const props = defineProps<{
-  noteId?: string;
+  noteId: string;
   path: number[]; // From root to here
   focusPath?: number[]; // From here to focus
 }>();
 
-const note = computed(() =>
-  props.noteId ? notes.notes.get(props.noteId) : undefined,
-);
+const note = computed(() => notes.notes.get(props.noteId));
 
 // Our children and their locally unique keys.
 const children = computed(() => {
@@ -35,6 +39,8 @@ const open = ref(false);
 
 const focused = computed(() => props.focusPath?.length === 0);
 
+const creating = ref(false);
+
 // We want to set open to true when we're on the focus path, but then it should
 // stay true. Hence a computed() combining open and forceOpen would not suffice.
 watchEffect(() => {
@@ -42,6 +48,16 @@ watchEffect(() => {
   if (props.focusPath && props.focusPath.length > 0) open.value = true;
 });
 
+// Abort creating a child node whenever we stop being focused.
+watchEffect(() => {
+  if (!focused.value) creating.value = false;
+});
+
+// Ensure the creator component is visible.
+watchEffect(() => {
+  if (creating.value) open.value = true;
+});
+
 function focusPathFor(index: number): number[] | undefined {
   if (!props.focusPath) return undefined;
   if (index !== props.focusPath[0]) return undefined;
@@ -79,7 +95,7 @@ function onClick() {
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div class="relative flex flex-col">
     <div
       class="flex flex-row gap-1 pl-1"
       :class="focused ? ['bg-neutral-200'] : ['hover:bg-neutral-100']"
@@ -113,5 +129,23 @@ function onClick() {
         :focusPath="focusPathFor(index)"
       />
     </div>
+
+    <div v-if="creating" class="pl-2">
+      <CNoteCreator
+        :parent-id="props.noteId"
+        @close="creating = false"
+        @finish="creating = false"
+      />
+    </div>
+
+    <!-- Controls -->
+    <div
+      v-if="focused"
+      class="absolute right-0.5 flex h-6 items-center gap-0.5"
+    >
+      <CNoteButton @click="creating = true">
+        <RiStickyNoteAddLine size="16px" />
+      </CNoteButton>
+    </div>
   </div>
 </template>
diff --git a/gdn-app/src/components/CNoteButton.vue b/gdn-app/src/components/CNoteButton.vue
new file mode 100644
index 0000000..6f6ec02
--- /dev/null
+++ b/gdn-app/src/components/CNoteButton.vue
@@ -0,0 +1,7 @@
+<template>
+  <div
+    class="flex select-none items-center rounded-sm border bg-white p-0.5 transition hover:scale-110 active:scale-95"
+  >
+    <slot></slot>
+  </div>
+</template>
diff --git a/gdn-app/src/components/CNoteCreator.vue b/gdn-app/src/components/CNoteCreator.vue
new file mode 100644
index 0000000..3acb4b2
--- /dev/null
+++ b/gdn-app/src/components/CNoteCreator.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { RiAddLine, RiCheckLine, RiCloseLine } from "@remixicon/vue";
+import CNoteButton from "./CNoteButton.vue";
+import { onMounted, ref, useTemplateRef } from "vue";
+
+const emit = defineEmits<{
+  (e: "close"): void;
+  (e: "finish", text: string): void;
+}>();
+
+const input = useTemplateRef<HTMLInputElement>("input");
+const text = ref("");
+
+onMounted(() => input.value?.focus());
+</script>
+
+<template>
+  <div class="flex flex-row items-center gap-1 pl-1 pr-0.5">
+    <!-- Fold/unfold symbol -->
+    <div class="flex items-center">
+      <div class="rounded">
+        <RiAddLine size="16px" />
+      </div>
+    </div>
+
+    <!-- Text -->
+    <input
+      ref="input"
+      v-model="text"
+      type="text"
+      class="z-1 flex-1 bg-neutral-100"
+      autofocus
+    />
+
+    <CNoteButton @click="emit('finish', text)">
+      <RiCheckLine size="16px" />
+    </CNoteButton>
+
+    <CNoteButton @click="emit('close')">
+      <RiCloseLine size="16px" />
+    </CNoteButton>
+  </div>
+</template>