Add forceOpen prop to CNote

gdn-app/src/App.vue

@@ -10,7 +10,7 @@ const ui = useUiStore();
   <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 :id="ui.anchor" />
+      <CNote :noteId="ui.anchor" />
     </div>
   </div>
 </template>

gdn-app/src/components/CNote.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import { useNotesStore } from "@/stores/notes";
 import { RiArrowDownSLine, RiArrowRightSLine } from "@remixicon/vue";
-import { computed, ref } from "vue";
+import { computed, ref, watchEffect } from "vue";
 
 const { notes } = useNotesStore();
 
-const props = defineProps<{ id: string | undefined }>();
+const props = defineProps<{
+  noteId?: string;
+  forceOpen?: boolean;
+}>();
+
+const note = computed(() =>
+  props.noteId ? notes.get(props.noteId) : undefined,
+);
 
-const note = computed(() => (props.id ? notes.get(props.id) : undefined));
 const children = computed(() => {
   if (note.value === undefined) return [];
   const seen = new Map<string, number>();
@@ -22,6 +28,12 @@ const children = computed(() => {
 });
 
 const open = ref(false);
+
+// We want to set open to true when forced, but then it should stay true. Hence
+// a computed() combining open and forceOpen would not suffice.
+watchEffect(() => {
+  if (props.forceOpen) open.value = true;
+});
 </script>
 
 <template>
@@ -45,10 +57,10 @@ const open = ref(false);
 
     <!-- Children -->
     <div
-      v-if="note && open"
+      v-if="open && children.length > 0"
       class="flex flex-col border-l border-neutral-300 pl-3"
     >
-      <CNote v-for="[id, key] in children" :id :key></CNote>
+      <CNote v-for="[noteId, key] in children" :key :note-id />
     </div>
   </div>
 </template>