From 1226a7948e5004236b532ca0c77eb22b0d1654c5 Mon Sep 17 00:00:00 2001
From: keven1024 <keven@fudaoyuan.icu>
Date: Fri, 1 May 2026 14:22:21 +0800
Subject: [PATCH] feat(front): add Command components for command palette
 functionality including Command, CommandDialog, CommandInput, and related
 components

---
 front/components/ui/command/Command.vue       | 89 +++++++++++++++++++
 front/components/ui/command/CommandDialog.vue | 36 ++++++++
 front/components/ui/command/CommandEmpty.vue  | 22 +++++
 front/components/ui/command/CommandGroup.vue  | 46 ++++++++++
 front/components/ui/command/CommandInput.vue  | 43 +++++++++
 front/components/ui/command/CommandItem.vue   | 80 +++++++++++++++++
 front/components/ui/command/CommandList.vue   | 25 ++++++
 .../ui/command/CommandSeparator.vue           | 17 ++++
 .../components/ui/command/CommandShortcut.vue | 14 +++
 front/components/ui/command/index.ts          | 25 ++++++
 front/components/ui/dialog/Dialog.vue         | 15 ++++
 front/components/ui/dialog/DialogClose.vue    | 12 +++
 front/components/ui/dialog/DialogContent.vue  | 49 ++++++++++
 .../ui/dialog/DialogDescription.vue           | 19 ++++
 front/components/ui/dialog/DialogFooter.vue   | 25 ++++++
 front/components/ui/dialog/DialogHeader.vue   | 14 +++
 front/components/ui/dialog/DialogOverlay.vue  | 26 ++++++
 .../ui/dialog/DialogScrollContent.vue         | 53 +++++++++++
 front/components/ui/dialog/DialogTitle.vue    | 19 ++++
 front/components/ui/dialog/DialogTrigger.vue  | 12 +++
 front/components/ui/dialog/index.ts           | 10 +++
 front/components/ui/popover/Popover.vue       | 15 ++++
 front/components/ui/popover/PopoverAnchor.vue | 12 +++
 .../components/ui/popover/PopoverContent.vue  | 38 ++++++++
 .../components/ui/popover/PopoverTrigger.vue  | 12 +++
 front/components/ui/popover/index.ts          |  4 +
 26 files changed, 732 insertions(+)
 create mode 100644 front/components/ui/command/Command.vue
 create mode 100644 front/components/ui/command/CommandDialog.vue
 create mode 100644 front/components/ui/command/CommandEmpty.vue
 create mode 100644 front/components/ui/command/CommandGroup.vue
 create mode 100644 front/components/ui/command/CommandInput.vue
 create mode 100644 front/components/ui/command/CommandItem.vue
 create mode 100644 front/components/ui/command/CommandList.vue
 create mode 100644 front/components/ui/command/CommandSeparator.vue
 create mode 100644 front/components/ui/command/CommandShortcut.vue
 create mode 100644 front/components/ui/command/index.ts
 create mode 100644 front/components/ui/dialog/Dialog.vue
 create mode 100644 front/components/ui/dialog/DialogClose.vue
 create mode 100644 front/components/ui/dialog/DialogContent.vue
 create mode 100644 front/components/ui/dialog/DialogDescription.vue
 create mode 100644 front/components/ui/dialog/DialogFooter.vue
 create mode 100644 front/components/ui/dialog/DialogHeader.vue
 create mode 100644 front/components/ui/dialog/DialogOverlay.vue
 create mode 100644 front/components/ui/dialog/DialogScrollContent.vue
 create mode 100644 front/components/ui/dialog/DialogTitle.vue
 create mode 100644 front/components/ui/dialog/DialogTrigger.vue
 create mode 100644 front/components/ui/dialog/index.ts
 create mode 100644 front/components/ui/popover/Popover.vue
 create mode 100644 front/components/ui/popover/PopoverAnchor.vue
 create mode 100644 front/components/ui/popover/PopoverContent.vue
 create mode 100644 front/components/ui/popover/PopoverTrigger.vue
 create mode 100644 front/components/ui/popover/index.ts

diff --git a/front/components/ui/command/Command.vue b/front/components/ui/command/Command.vue
new file mode 100644
index 0000000..4097836
--- /dev/null
+++ b/front/components/ui/command/Command.vue
@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { reactive, ref, watch } from 'vue'
+import { cn } from '@/lib/utils'
+import { provideCommandContext } from '.'
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+    modelValue: '',
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+    search: '',
+    filtered: {
+        /** The count of all visible items. */
+        count: 0,
+        /** Map from visible item id to its search score. */
+        items: new Map() as Map<string, number>,
+        /** Set of groups with at least one visible item. */
+        groups: new Set() as Set<string>,
+    },
+})
+
+function filterItems() {
+    if (!filterState.search) {
+        filterState.filtered.count = allItems.value.size
+        // Do nothing, each item will know to show itself because search is empty
+        return
+    }
+
+    // Reset the groups
+    filterState.filtered.groups = new Set()
+    let itemCount = 0
+
+    // Check which items should be included
+    for (const [id, value] of allItems.value) {
+        const score = contains(value, filterState.search)
+        filterState.filtered.items.set(id, score ? 1 : 0)
+        if (score) itemCount++
+    }
+
+    // Check which groups have at least 1 item shown
+    for (const [groupId, group] of allGroups.value) {
+        for (const itemId of group) {
+            if (filterState.filtered.items.get(itemId)! > 0) {
+                filterState.filtered.groups.add(groupId)
+                break
+            }
+        }
+    }
+
+    filterState.filtered.count = itemCount
+}
+
+watch(
+    () => filterState.search,
+    () => {
+        filterItems()
+    }
+)
+
+provideCommandContext({
+    allItems,
+    allGroups,
+    filterState,
+})
+</script>
+
+<template>
+    <ListboxRoot
+        data-slot="command"
+        v-bind="forwarded"
+        :class="cn('bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md', props.class)"
+    >
+        <slot />
+    </ListboxRoot>
+</template>
diff --git a/front/components/ui/command/CommandDialog.vue b/front/components/ui/command/CommandDialog.vue
new file mode 100644
index 0000000..bf130e6
--- /dev/null
+++ b/front/components/ui/command/CommandDialog.vue
@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { useForwardPropsEmits } from 'reka-ui'
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from '@/components/ui/dialog'
+import Command from './Command.vue'
+
+const props = withDefaults(
+    defineProps<
+        DialogRootProps & {
+            title?: string
+            description?: string
+        }
+    >(),
+    {
+        title: 'Command Palette',
+        description: 'Search for a command to run...',
+    }
+)
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <Dialog v-slot="slotProps" v-bind="forwarded">
+        <DialogContent class="overflow-hidden p-0">
+            <DialogHeader class="sr-only">
+                <DialogTitle>{{ title }}</DialogTitle>
+                <DialogDescription>{{ description }}</DialogDescription>
+            </DialogHeader>
+            <Command>
+                <slot v-bind="slotProps" />
+            </Command>
+        </DialogContent>
+    </Dialog>
+</template>
diff --git a/front/components/ui/command/CommandEmpty.vue b/front/components/ui/command/CommandEmpty.vue
new file mode 100644
index 0000000..3e2a617
--- /dev/null
+++ b/front/components/ui/command/CommandEmpty.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Primitive } from 'reka-ui'
+import { computed } from 'vue'
+import { cn } from '@/lib/utils'
+import { useCommand } from '.'
+
+const props = defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const { filterState } = useCommand()
+const isRender = computed(() => !!filterState.search && filterState.filtered.count === 0)
+</script>
+
+<template>
+    <Primitive v-if="isRender" data-slot="command-empty" v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+        <slot />
+    </Primitive>
+</template>
diff --git a/front/components/ui/command/CommandGroup.vue b/front/components/ui/command/CommandGroup.vue
new file mode 100644
index 0000000..699381a
--- /dev/null
+++ b/front/components/ui/command/CommandGroup.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { ListboxGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxGroup, ListboxGroupLabel, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted } from 'vue'
+import { cn } from '@/lib/utils'
+import { provideCommandGroupContext, useCommand } from '.'
+
+const props = defineProps<
+    ListboxGroupProps & {
+        class?: HTMLAttributes['class']
+        heading?: string
+    }
+>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const { allGroups, filterState } = useCommand()
+const id = useId()
+
+const isRender = computed(() => (!filterState.search ? true : filterState.filtered.groups.has(id)))
+
+provideCommandGroupContext({ id })
+onMounted(() => {
+    if (!allGroups.value.has(id)) allGroups.value.set(id, new Set())
+})
+onUnmounted(() => {
+    allGroups.value.delete(id)
+})
+</script>
+
+<template>
+    <ListboxGroup
+        v-bind="delegatedProps"
+        :id="id"
+        data-slot="command-group"
+        :class="cn('text-foreground overflow-hidden p-1', props.class)"
+        :hidden="isRender ? undefined : true"
+    >
+        <ListboxGroupLabel v-if="heading" data-slot="command-group-heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+            {{ heading }}
+        </ListboxGroupLabel>
+        <slot />
+    </ListboxGroup>
+</template>
diff --git a/front/components/ui/command/CommandInput.vue b/front/components/ui/command/CommandInput.vue
new file mode 100644
index 0000000..0806ba8
--- /dev/null
+++ b/front/components/ui/command/CommandInput.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { ListboxFilterProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Search } from 'lucide-vue-next'
+import { ListboxFilter, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { useCommand } from '.'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps<
+    ListboxFilterProps & {
+        class?: HTMLAttributes['class']
+    }
+>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+
+const { filterState } = useCommand()
+</script>
+
+<template>
+    <div data-slot="command-input-wrapper" class="flex h-9 items-center gap-2 border-b px-3">
+        <Search class="size-4 shrink-0 opacity-50" />
+        <ListboxFilter
+            v-bind="{ ...forwardedProps, ...$attrs }"
+            v-model="filterState.search"
+            data-slot="command-input"
+            auto-focus
+            :class="
+                cn(
+                    'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50',
+                    props.class
+                )
+            "
+        />
+    </div>
+</template>
diff --git a/front/components/ui/command/CommandItem.vue b/front/components/ui/command/CommandItem.vue
new file mode 100644
index 0000000..354274e
--- /dev/null
+++ b/front/components/ui/command/CommandItem.vue
@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit, useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import { cn } from '@/lib/utils'
+import { useCommand, useCommandGroup } from '.'
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+    if (!filterState.search) {
+        return true
+    } else {
+        const filteredCurrentItem = filterState.filtered.items.get(id)
+        // If the filtered items is undefined means not in the all times map yet
+        // Do the first render to add into the map
+        if (filteredCurrentItem === undefined) {
+            return true
+        }
+
+        // Check with filter
+        return filteredCurrentItem > 0
+    }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+    if (!(currentElement.value instanceof HTMLElement)) return
+
+    // textValue to perform filter
+    allItems.value.set(id, currentElement.value.textContent ?? props.value?.toString() ?? '')
+
+    const groupId = groupContext?.id
+    if (groupId) {
+        if (!allGroups.value.has(groupId)) {
+            allGroups.value.set(groupId, new Set([id]))
+        } else {
+            allGroups.value.get(groupId)?.add(id)
+        }
+    }
+})
+onUnmounted(() => {
+    allItems.value.delete(id)
+})
+</script>
+
+<template>
+    <ListboxItem
+        v-if="isRender"
+        v-bind="forwarded"
+        :id="id"
+        ref="itemRef"
+        data-slot="command-item"
+        :class="
+            cn(
+                'data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+                props.class
+            )
+        "
+        @select="
+            () => {
+                filterState.search = ''
+            }
+        "
+    >
+        <slot />
+    </ListboxItem>
+</template>
diff --git a/front/components/ui/command/CommandList.vue b/front/components/ui/command/CommandList.vue
new file mode 100644
index 0000000..cfd10c5
--- /dev/null
+++ b/front/components/ui/command/CommandList.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { ListboxContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ListboxContent, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ListboxContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <ListboxContent
+        data-slot="command-list"
+        v-bind="forwarded"
+        :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+    >
+        <div role="presentation">
+            <slot />
+        </div>
+    </ListboxContent>
+</template>
diff --git a/front/components/ui/command/CommandSeparator.vue b/front/components/ui/command/CommandSeparator.vue
new file mode 100644
index 0000000..d39433c
--- /dev/null
+++ b/front/components/ui/command/CommandSeparator.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { Separator } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <Separator data-slot="command-separator" v-bind="delegatedProps" :class="cn('bg-border -mx-1 h-px', props.class)">
+        <slot />
+    </Separator>
+</template>
diff --git a/front/components/ui/command/CommandShortcut.vue b/front/components/ui/command/CommandShortcut.vue
new file mode 100644
index 0000000..f5ac344
--- /dev/null
+++ b/front/components/ui/command/CommandShortcut.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <span data-slot="command-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+        <slot />
+    </span>
+</template>
diff --git a/front/components/ui/command/index.ts b/front/components/ui/command/index.ts
new file mode 100644
index 0000000..f614577
--- /dev/null
+++ b/front/components/ui/command/index.ts
@@ -0,0 +1,25 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
+
+export const [useCommand, provideCommandContext] = createContext<{
+    allItems: Ref<Map<string, string>>
+    allGroups: Ref<Map<string, Set<string>>>
+    filterState: {
+        search: string
+        filtered: { count: number; items: Map<string, number>; groups: Set<string> }
+    }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+    id?: string
+}>('CommandGroup')
diff --git a/front/components/ui/dialog/Dialog.vue b/front/components/ui/dialog/Dialog.vue
new file mode 100644
index 0000000..3601ab3
--- /dev/null
+++ b/front/components/ui/dialog/Dialog.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <DialogRoot v-slot="slotProps" data-slot="dialog" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </DialogRoot>
+</template>
diff --git a/front/components/ui/dialog/DialogClose.vue b/front/components/ui/dialog/DialogClose.vue
new file mode 100644
index 0000000..ad206f1
--- /dev/null
+++ b/front/components/ui/dialog/DialogClose.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui'
+import { DialogClose } from 'reka-ui'
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+    <DialogClose data-slot="dialog-close" v-bind="props">
+        <slot />
+    </DialogClose>
+</template>
diff --git a/front/components/ui/dialog/DialogContent.vue b/front/components/ui/dialog/DialogContent.vue
new file mode 100644
index 0000000..23b5fa8
--- /dev/null
+++ b/front/components/ui/dialog/DialogContent.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import DialogOverlay from './DialogOverlay.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<DialogContentProps & { class?: HTMLAttributes['class']; showCloseButton?: boolean }>(), {
+    showCloseButton: true,
+})
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay />
+        <DialogContent
+            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)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+                    props.class
+                )
+            "
+        >
+            <slot />
+
+            <DialogClose
+                v-if="showCloseButton"
+                data-slot="dialog-close"
+                class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+            >
+                <X />
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>
diff --git a/front/components/ui/dialog/DialogDescription.vue b/front/components/ui/dialog/DialogDescription.vue
new file mode 100644
index 0000000..4469bbe
--- /dev/null
+++ b/front/components/ui/dialog/DialogDescription.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogDescription, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <DialogDescription data-slot="dialog-description" v-bind="forwardedProps" :class="cn('text-muted-foreground text-sm', props.class)">
+        <slot />
+    </DialogDescription>
+</template>
diff --git a/front/components/ui/dialog/DialogFooter.vue b/front/components/ui/dialog/DialogFooter.vue
new file mode 100644
index 0000000..92a7115
--- /dev/null
+++ b/front/components/ui/dialog/DialogFooter.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { DialogClose } from 'reka-ui'
+import { cn } from '@/lib/utils'
+import { Button } from '@/components/ui/button'
+
+const props = withDefaults(
+    defineProps<{
+        class?: HTMLAttributes['class']
+        showCloseButton?: boolean
+    }>(),
+    {
+        showCloseButton: false,
+    }
+)
+</script>
+
+<template>
+    <div data-slot="dialog-footer" :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)">
+        <slot />
+        <DialogClose v-if="showCloseButton" as-child>
+            <Button variant="outline"> Close </Button>
+        </DialogClose>
+    </div>
+</template>
diff --git a/front/components/ui/dialog/DialogHeader.vue b/front/components/ui/dialog/DialogHeader.vue
new file mode 100644
index 0000000..abb5add
--- /dev/null
+++ b/front/components/ui/dialog/DialogHeader.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <div data-slot="dialog-header" :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>
diff --git a/front/components/ui/dialog/DialogOverlay.vue b/front/components/ui/dialog/DialogOverlay.vue
new file mode 100644
index 0000000..30d8f1f
--- /dev/null
+++ b/front/components/ui/dialog/DialogOverlay.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogOverlay } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+    <DialogOverlay
+        data-slot="dialog-overlay"
+        v-bind="delegatedProps"
+        :class="
+            cn(
+                'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80',
+                props.class
+            )
+        "
+    >
+        <slot />
+    </DialogOverlay>
+</template>
diff --git a/front/components/ui/dialog/DialogScrollContent.vue b/front/components/ui/dialog/DialogScrollContent.vue
new file mode 100644
index 0000000..3af6a73
--- /dev/null
+++ b/front/components/ui/dialog/DialogScrollContent.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { X } from 'lucide-vue-next'
+import { DialogClose, DialogContent, DialogOverlay, DialogPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        >
+            <DialogContent
+                :class="
+                    cn(
+                        'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+                        props.class
+                    )
+                "
+                v-bind="{ ...$attrs, ...forwarded }"
+                @pointer-down-outside="
+                    (event) => {
+                        const originalEvent = event.detail.originalEvent
+                        const target = originalEvent.target as HTMLElement
+                        if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+                            event.preventDefault()
+                        }
+                    }
+                "
+            >
+                <slot />
+
+                <DialogClose class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary">
+                    <X class="w-4 h-4" />
+                    <span class="sr-only">Close</span>
+                </DialogClose>
+            </DialogContent>
+        </DialogOverlay>
+    </DialogPortal>
+</template>
diff --git a/front/components/ui/dialog/DialogTitle.vue b/front/components/ui/dialog/DialogTitle.vue
new file mode 100644
index 0000000..2f7bb0a
--- /dev/null
+++ b/front/components/ui/dialog/DialogTitle.vue
@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { DialogTitle, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <DialogTitle data-slot="dialog-title" v-bind="forwardedProps" :class="cn('text-lg leading-none font-semibold', props.class)">
+        <slot />
+    </DialogTitle>
+</template>
diff --git a/front/components/ui/dialog/DialogTrigger.vue b/front/components/ui/dialog/DialogTrigger.vue
new file mode 100644
index 0000000..668686a
--- /dev/null
+++ b/front/components/ui/dialog/DialogTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from 'reka-ui'
+import { DialogTrigger } from 'reka-ui'
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+    <DialogTrigger data-slot="dialog-trigger" v-bind="props">
+        <slot />
+    </DialogTrigger>
+</template>
diff --git a/front/components/ui/dialog/index.ts b/front/components/ui/dialog/index.ts
new file mode 100644
index 0000000..baa7d61
--- /dev/null
+++ b/front/components/ui/dialog/index.ts
@@ -0,0 +1,10 @@
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogOverlay } from './DialogOverlay.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
diff --git a/front/components/ui/popover/Popover.vue b/front/components/ui/popover/Popover.vue
new file mode 100644
index 0000000..14c2d78
--- /dev/null
+++ b/front/components/ui/popover/Popover.vue
@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <PopoverRoot v-slot="slotProps" data-slot="popover" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </PopoverRoot>
+</template>
diff --git a/front/components/ui/popover/PopoverAnchor.vue b/front/components/ui/popover/PopoverAnchor.vue
new file mode 100644
index 0000000..1da5879
--- /dev/null
+++ b/front/components/ui/popover/PopoverAnchor.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverAnchorProps } from 'reka-ui'
+import { PopoverAnchor } from 'reka-ui'
+
+const props = defineProps<PopoverAnchorProps>()
+</script>
+
+<template>
+    <PopoverAnchor data-slot="popover-anchor" v-bind="props">
+        <slot />
+    </PopoverAnchor>
+</template>
diff --git a/front/components/ui/popover/PopoverContent.vue b/front/components/ui/popover/PopoverContent.vue
new file mode 100644
index 0000000..f749531
--- /dev/null
+++ b/front/components/ui/popover/PopoverContent.vue
@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(), {
+    align: 'center',
+    sideOffset: 4,
+})
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <PopoverPortal>
+        <PopoverContent
+            data-slot="popover-content"
+            v-bind="{ ...$attrs, ...forwarded }"
+            :class="
+                cn(
+                    'bg-popover text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md origin-(--reka-popover-content-transform-origin) outline-hidden',
+                    props.class
+                )
+            "
+        >
+            <slot />
+        </PopoverContent>
+    </PopoverPortal>
+</template>
diff --git a/front/components/ui/popover/PopoverTrigger.vue b/front/components/ui/popover/PopoverTrigger.vue
new file mode 100644
index 0000000..5f78604
--- /dev/null
+++ b/front/components/ui/popover/PopoverTrigger.vue
@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import type { PopoverTriggerProps } from 'reka-ui'
+import { PopoverTrigger } from 'reka-ui'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+    <PopoverTrigger data-slot="popover-trigger" v-bind="props">
+        <slot />
+    </PopoverTrigger>
+</template>
diff --git a/front/components/ui/popover/index.ts b/front/components/ui/popover/index.ts
new file mode 100644
index 0000000..d724e78
--- /dev/null
+++ b/front/components/ui/popover/index.ts
@@ -0,0 +1,4 @@
+export { default as Popover } from './Popover.vue'
+export { default as PopoverAnchor } from './PopoverAnchor.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'