feat: support sorting tasks and exit dialogs on ESC key (#148)

web/src/components/ui/dialog/DialogContent.vue

@@ -11,6 +11,7 @@ import {
 } from "reka-ui"
 import { cn } from "@/lib/utils"
 import DialogOverlay from "./DialogOverlay.vue"
+import { onMounted, onUnmounted, ref } from "vue"
 
 defineOptions({
   inheritAttrs: false,
@@ -24,17 +25,46 @@ const emits = defineEmits<DialogContentEmits>()
 const delegatedProps = reactiveOmit(props, "class")
 
 const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const contentRef = ref<any>(null)
+
+const handleKeyDown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    const contents = document.querySelectorAll('[data-slot="dialog-content"]')
+    if (contents.length > 0) {
+      const topContent = contents[contents.length - 1]
+      const el = contentRef.value?.$el || contentRef.value
+      if (el && el === topContent) {
+        const closeBtn = el.querySelector('[data-slot="dialog-close"]') as HTMLElement
+        if (closeBtn) {
+          closeBtn.click()
+        } else {
+          emits('escapeKeyDown', event)
+        }
+      }
+    }
+  }
+}
+
+onMounted(() => {
+  window.addEventListener('keydown', handleKeyDown, true)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('keydown', handleKeyDown, true)
+})
 </script>
 
 <template>
   <DialogPortal>
     <DialogOverlay />
     <DialogContent
+      ref="contentRef"
       data-slot="dialog-content"
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg overflow-y-auto custom-scrollbar',
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] max-h-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg overflow-y-auto custom-scrollbar focus:outline-none',
           props.class,
         )"
     >