Pin notes

gdn-app/src/components/CNote.vue

@@ -1,13 +1,15 @@
 <script setup lang="ts">
 import { useNotesStore } from "@/stores/notes";
 import { useUiStore } from "@/stores/ui";
-import { pathAppend } from "@/util";
+import { pathAppend, pathSlice } from "@/util";
 import {
   RiAddLine,
   RiArrowDownSLine,
   RiArrowRightSLine,
   RiCornerUpRightLine,
   RiEditLine,
+  RiPushpinFill,
+  RiPushpinLine,
   RiStickyNoteAddLine,
 } from "@remixicon/vue";
 import { computed, ref, watchEffect } from "vue";
@@ -53,6 +55,7 @@ const mayOpen = computed(() => children.value.length > 0);
 const open = computed(() => mayOpen.value && ui.isOpen(props.path));
 
 const focused = computed(() => ui.focusPath === props.path);
+const pinned = computed(() => ui.isPinned(props.path));
 const hover = computed(() => hovering.value && mode.value !== "editing");
 
 const creating = computed(() => mode.value === "creating");
@@ -86,6 +89,11 @@ function onClick() {
   ui.toggleOpen(props.path);
 }
 
+function onPinButtonClick() {
+  if (pinned.value) ui.unsetPinned();
+  else ui.setPinned(props.path);
+}
+
 function onEditButtonClick() {
   if (!note.value) return;
   mode.value = "editing";
@@ -168,13 +176,17 @@ function onCreateEditorFinish(text: string) {
       <div v-else class="px-1 font-light italic">note not found</div>
 
       <!-- Controls -->
-      <div v-if="hover" class="absolute right-0 flex h-6 items-center gap-0.5">
-        <CNoteButton @click.stop="onEditButtonClick">
+      <div v-if="hover || pinned" class="absolute right-0 flex h-6 items-center gap-0.5">
+        <CNoteButton v-if="hover" @click.stop="onEditButtonClick">
           <RiEditLine size="16px" />
         </CNoteButton>
-        <CNoteButton @click.stop="onCreateButtonClick">
+        <CNoteButton v-if="hover" @click.stop="onCreateButtonClick">
           <RiStickyNoteAddLine size="16px" />
         </CNoteButton>
+        <CNoteButton :inverted="pinned" @click.stop="onPinButtonClick">
+          <RiPushpinFill v-if="pinned" size="16px" />
+          <RiPushpinLine v-else size="16px" />
+        </CNoteButton>
       </div>
     </div>
 

gdn-app/src/components/CNoteButton.vue

@@ -1,6 +1,13 @@
+<script setup lang="ts">
+const props = defineProps<{
+  inverted?: boolean;
+}>();
+</script>
+
 <template>
   <div
-    class="flex select-none items-center rounded-sm border bg-white p-0.5 transition hover:scale-110 active:scale-95"
+    class="flex select-none items-center rounded-sm border p-0.5 transition hover:scale-110 active:scale-95"
+    :class="props.inverted ? 'bg-black text-white' : 'bg-white text-black'"
   >
     <slot></slot>
   </div>