fix: ai audit improvements

src/components/ListCard.vue

@@ -1,10 +1,9 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { RouterLink } from 'vue-router'
 import type { LocalList } from '@/database/db'
 import { useListsStore } from '@/stores/lists'
-import { useClickOutside } from '@/composables/useClickOutside'
-import { useEscapeKey } from '@/composables/useEscapeKey'
+import { useDismissableMenu } from '@/composables/useDismissableMenu'
 
 const props = defineProps<{ list: LocalList }>()
 const emit = defineEmits<{
@@ -13,8 +12,11 @@ const emit = defineEmits<{
 }>()
 
 const listsStore = useListsStore()
-const isMenuOpen = ref(false)
-const menuContainerRef = ref<HTMLElement | null>(null)
+const {
+  isOpen: isMenuOpen,
+  containerRef: menuContainerRef,
+  toggle: toggleMenu,
+} = useDismissableMenu()
 
 // The server always reports total_items/completed_items once a list has
 // synced at least once, so the common case never touches the store's full
@@ -31,19 +33,6 @@ const completedCount = computed(() =>
     : listsStore.itemsForList(props.list.id).filter((item) => item.is_completed).length,
 )
 
-useClickOutside(menuContainerRef, () => {
-  isMenuOpen.value = false
-})
-useEscapeKey(() => {
-  if (isMenuOpen.value) isMenuOpen.value = false
-})
-
-function toggleMenu(event: Event) {
-  event.preventDefault()
-  event.stopPropagation()
-  isMenuOpen.value = !isMenuOpen.value
-}
-
 function handleShare(event: Event) {
   event.preventDefault()
   event.stopPropagation()
@@ -57,7 +46,6 @@ function handleDelete(event: Event) {
   isMenuOpen.value = false
   emit('delete', props.list)
 }
-
 </script>
 
 <template>
@@ -125,7 +113,9 @@ function handleDelete(event: Event) {
             stroke-linejoin="round"
           >
             <polyline points="3 6 5 6 21 6" />
-            <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" />
+            <path
+              d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"
+            />
             <line x1="10" y1="11" x2="10" y2="17" />
             <line x1="14" y1="11" x2="14" y2="17" />
           </svg>