Hide mouse buttons using visibility: hidden

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>

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>