From 4b6732ccd022be38810211f04900333fd5993d88 Mon Sep 17 00:00:00 2001
From: Joscha <joscha@plugh.de>
Date: Tue, 11 Feb 2025 19:28:39 +0100
Subject: [PATCH] Hide mouse buttons using visibility: hidden

---
 gdn-app/src/components/CNote.vue       |  8 ++++----
 gdn-app/src/components/CNoteButton.vue | 13 +++++++------
 2 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/gdn-app/src/components/CNote.vue b/gdn-app/src/components/CNote.vue
index 152523d..e5b37c9 100644
--- a/gdn-app/src/components/CNote.vue
+++ b/gdn-app/src/components/CNote.vue
@@ -176,14 +176,14 @@ function onCreateEditorFinish(text: string): void {
       <div v-else class="px-1 font-light italic">note not found</div>
 
       <!-- Controls -->
-      <div v-if="hover || pinned" class="absolute right-0 flex h-6 items-center gap-0.5">
-        <CNoteButton v-if="hover" @click.stop="onEditButtonClick">
+      <div class="absolute right-0 flex h-6 items-center gap-0.5">
+        <CNoteButton :visible="hover" @click.stop="onEditButtonClick">
           <RiEditLine size="16px" />
         </CNoteButton>
-        <CNoteButton v-if="hover" @click.stop="onCreateButtonClick">
+        <CNoteButton :visible="hover" @click.stop="onCreateButtonClick">
           <RiStickyNoteAddLine size="16px" />
         </CNoteButton>
-        <CNoteButton :inverted="pinned" @click.stop="onPinButtonClick">
+        <CNoteButton :visible="hover || pinned" :inverted="pinned" @click.stop="onPinButtonClick">
           <RiPushpinFill v-if="pinned" size="16px" />
           <RiPushpinLine v-else size="16px" />
         </CNoteButton>
diff --git a/gdn-app/src/components/CNoteButton.vue b/gdn-app/src/components/CNoteButton.vue
index ede1c5c..4bedc98 100644
--- a/gdn-app/src/components/CNoteButton.vue
+++ b/gdn-app/src/components/CNoteButton.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-const props = defineProps<{
+const { visible, inverted = false } = defineProps<{
+  visible: boolean;
   inverted?: boolean;
 }>();
 </script>
@@ -7,11 +8,11 @@ const props = defineProps<{
 <template>
   <div
     class="flex select-none items-center rounded-sm border p-0.5 transition hover:bg-neutral-200 active:scale-95"
-    :class="
-      props.inverted
-        ? 'border-black bg-black text-white hover:bg-neutral-600'
-        : 'bg-white text-black'
-    "
+    :class="{
+      'bg-white text-black': !inverted,
+      'border-black bg-black text-white hover:bg-neutral-600': inverted,
+      hidden: !visible,
+    }"
   >
     <slot></slot>
   </div>