0.11.1: drawer mouse trigger and clip track / audio behavior

src/components/ClipartDrawer.vue

@@ -4,9 +4,24 @@ import { PhArrowClockwise, PhCaretLeft, PhCaretRight, PhFolderOpen, PhImagesSqua
 import { useClipartStore } from '@/stores/clipart'
 import { readAudioDuration, readAsDataUrl } from '@/lib/fileLoader'
 import { clearAudioDragSource, setAudioDragSource } from '@/composables/useAudioDragSource'
+import { useFullscreen } from '@/composables/useFullscreen'
 import { t } from '@/i18n'
 
 const clipart = useClipartStore()
+const { isFullscreen } = useFullscreen()
+
+// In browser-fullscreen mode the drawer auto-opens on tab hover and
+// auto-closes when the mouse leaves the drawer — no click-toggle.
+function onTabClick() {
+  if (isFullscreen.value) return
+  clipart.toggle()
+}
+function onTabEnter() {
+  if (isFullscreen.value) clipart.setOpen(true)
+}
+function onDrawerLeave() {
+  if (isFullscreen.value) clipart.setOpen(false)
+}
 
 onMounted(() => {
   clipart.initialize()
@@ -64,11 +79,12 @@ function onItemDragStart(e: DragEvent, index: number) {
 </script>
 
 <template>
-  <aside class="clipart-drawer" :class="{ open: clipart.open }">
+  <aside class="clipart-drawer" :class="{ open: clipart.open }" @mouseleave="onDrawerLeave">
     <button
       class="drawer-tab"
       v-tooltip="clipart.open ? t('clipart.close') : t('clipart.open')"
-      @click="clipart.toggle()"
+      @click="onTabClick"
+      @mouseenter="onTabEnter"
     >
       <component :is="clipart.open ? PhCaretLeft : PhCaretRight" :size="14" />
     </button>