add / edit / delete user warrens

frontend/components/SidebarAdminMenu.vue

@@ -20,34 +20,6 @@ const route = useRoute();
                     <span>Administration</span>
                 </SidebarMenuButton>
             </NuxtLink>
-            <SidebarMenuSub>
-                <SidebarMenuSubItem>
-                    <NuxtLink to="/admin/users" as-child>
-                        <SidebarMenuSubButton
-                            :is-active="route.path === '/admin/users'"
-                        >
-                            <Icon name="lucide:users" />
-                            <span>Users</span>
-                        </SidebarMenuSubButton>
-                    </NuxtLink>
-                    <NuxtLink to="/admin/warrens" as-child>
-                        <SidebarMenuSubButton
-                            :is-active="route.path === '/admin/warrens'"
-                        >
-                            <Icon name="lucide:folder-tree" />
-                            <span>Warrens</span>
-                        </SidebarMenuSubButton>
-                    </NuxtLink>
-                    <!-- <NuxtLink to="/admin/stats" as-child>
-                        <SidebarMenuSubButton
-                            :is-active="route.path === '/admin/stats'"
-                        >
-                            <Icon name="lucide:bar-chart-3" />
-                            <span>Stats</span>
-                        </SidebarMenuSubButton>
-                    </NuxtLink> -->
-                </SidebarMenuSubItem>
-            </SidebarMenuSub>
         </SidebarMenuItem>
     </SidebarMenu>
 </template>

frontend/components/admin/AddUserWarrenDialog.vue

@@ -0,0 +1,248 @@
+<script setup lang="ts">
+import {
+    Combobox,
+    ComboboxAnchor,
+    ComboboxEmpty,
+    ComboboxGroup,
+    ComboboxInput,
+    ComboboxItem,
+    ComboboxItemIndicator,
+    ComboboxList,
+} from '@/components/ui/combobox';
+import {
+    AlertDialog,
+    AlertDialogTrigger,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogDescription,
+    AlertDialogContent,
+    AlertDialogFooter,
+    AlertDialogCancel,
+} from '@/components/ui/alert-dialog';
+import { toTypedSchema } from '@vee-validate/yup';
+import { useForm } from 'vee-validate';
+import { userWarrenSchema } from '~/lib/schemas/admin';
+import type { AuthUserWithWarrens } from '~/shared/types/admin';
+import { createUserWarren } from '~/lib/api/admin/createUserWarren';
+
+const adminStore = useAdminStore();
+
+const { user } = defineProps<{
+    user: AuthUserWithWarrens;
+}>();
+
+const availableWarrens = computed<typeof adminStore.resources.warrens>(() =>
+    Object.entries(adminStore.resources.warrens)
+        .filter(
+            ([_, warren]) =>
+                user.warrens.findIndex((uw) => uw.warrenId === warren.id) === -1
+        )
+        .reduce((acc, [key, value]) => ({ ...acc, [key]: value }), {})
+);
+
+const creating = ref(false);
+const open = ref(false);
+
+const form = useForm({
+    validationSchema: toTypedSchema(userWarrenSchema),
+    initialValues: {
+        userId: user.id,
+        canListFiles: false,
+        canReadFiles: false,
+        canModifyFiles: false,
+        canDeleteFiles: false,
+    },
+});
+
+const onSubmit = form.handleSubmit(async (values) => {
+    if (creating.value) {
+        return;
+    }
+
+    creating.value = true;
+
+    const result = await createUserWarren(values);
+
+    if (result.success) {
+        form.resetForm();
+        open.value = false;
+    }
+
+    creating.value = false;
+});
+</script>
+
+<template>
+    <AlertDialog v-model:open="open">
+        <AlertDialogTrigger as-child>
+            <slot />
+        </AlertDialogTrigger>
+        <AlertDialogContent>
+            <AlertDialogHeader>
+                <AlertDialogTitle>Add user warren</AlertDialogTitle>
+                <AlertDialogDescription
+                    >Assign {{ user.name }} current user to an existing
+                    warren</AlertDialogDescription
+                >
+            </AlertDialogHeader>
+
+            <div class="flex flex-col">
+                <Combobox>
+                    <ComboboxAnchor as-child>
+                        <ComboboxTrigger as-child>
+                            <Button variant="outline" class="justify-between">
+                                {{
+                                    (form.values.warrenId
+                                        ? adminStore.resources.warrens[
+                                              form.values.warrenId
+                                          ].name
+                                        : undefined) ?? 'Select warren'
+                                }}
+
+                                <Icon
+                                    name="lucide:chevrons-up-down"
+                                    class="ml-2 h-4 w-4 shrink-0 opacity-50"
+                                />
+                            </Button>
+                        </ComboboxTrigger>
+                    </ComboboxAnchor>
+
+                    <ComboboxList>
+                        <div class="relative w-full max-w-sm items-center">
+                            <ComboboxInput
+                                class="h-10 rounded-none border-0 focus-visible:ring-0"
+                                placeholder="Select warren..."
+                                :display-value="(warren) => warren?.name"
+                            />
+                            <span
+                                class="absolute inset-y-0 start-0 flex items-center justify-center px-3"
+                            >
+                                <Icon
+                                    name="lucide:search"
+                                    class="text-muted-foreground size-4"
+                                />
+                            </span>
+                        </div>
+
+                        <ComboboxEmpty>No warrens found</ComboboxEmpty>
+
+                        <ComboboxGroup>
+                            <ComboboxItem
+                                v-for="warren in availableWarrens"
+                                :key="warren.id"
+                                :value="warren"
+                                @select="
+                                    () => {
+                                        form.setFieldValue(
+                                            'warrenId',
+                                            warren.id
+                                        );
+                                    }
+                                "
+                            >
+                                {{ warren.name }}
+
+                                <ComboboxItemIndicator>
+                                    <Icon
+                                        name="lucide:check"
+                                        class="ml-auto h-4 w-4"
+                                    />
+                                </ComboboxItemIndicator>
+                            </ComboboxItem>
+                        </ComboboxGroup>
+                    </ComboboxList>
+                </Combobox>
+
+                <span
+                    v-if="form.errors.value.warrenId"
+                    class="text-destructive-foreground text-sm"
+                    >{{ form.errors.value.warrenId }}</span
+                >
+            </div>
+
+            <form
+                id="add-user-warren-form"
+                class="flex w-full flex-col gap-4"
+                @submit.prevent="onSubmit"
+            >
+                <FormField type="hidden" name="userId" :value="user.id" />
+
+                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+                    <FormField
+                        v-slot="{ value, handleChange }"
+                        name="canListFiles"
+                    >
+                        <FormItem class="flex flex-row justify-between">
+                            <FormLabel class="grow">List files</FormLabel>
+                            <FormControl>
+                                <Switch
+                                    :model-value="value"
+                                    @update:model-value="handleChange"
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+
+                    <FormField
+                        v-slot="{ value, handleChange }"
+                        name="canReadFiles"
+                    >
+                        <FormItem class="flex flex-row justify-between">
+                            <FormLabel class="grow">Read files</FormLabel>
+                            <FormControl>
+                                <Switch
+                                    :model-value="value"
+                                    @update:model-value="handleChange"
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+
+                    <FormField
+                        v-slot="{ value, handleChange }"
+                        name="canModifyFiles"
+                    >
+                        <FormItem class="flex flex-row justify-between">
+                            <FormLabel class="grow">Modify files</FormLabel>
+                            <FormControl>
+                                <Switch
+                                    :model-value="value"
+                                    @update:model-value="handleChange"
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+
+                    <FormField
+                        v-slot="{ value, handleChange }"
+                        name="canDeleteFiles"
+                    >
+                        <FormItem class="flex flex-row justify-between">
+                            <FormLabel class="grow">Delete files</FormLabel>
+                            <FormControl>
+                                <Switch
+                                    :model-value="value"
+                                    @update:model-value="handleChange"
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+                </div>
+            </form>
+
+            <AlertDialogFooter class="space-y-0">
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <Button
+                    type="submit"
+                    form="add-user-warren-form"
+                    :disabled="creating"
+                    >Add</Button
+                >
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>

frontend/components/admin/CreateUserDialog.vue

@@ -121,11 +121,14 @@ const onSubmit = form.handleSubmit(async (values) => {
                 </FormField>
             </form>
 
-            <AlertDialogFooter>
+            <AlertDialogFooter class="gap-y-0">
                 <AlertDialogCancel variant="outline" @click="cancel"
                     >Cancel</AlertDialogCancel
                 >
-                <AlertDialogAction type="submit" form="create-user-form"
+                <AlertDialogAction
+                    type="submit"
+                    form="create-user-form"
+                    :disabled="creating"
                     >Create</AlertDialogAction
                 >
             </AlertDialogFooter>

frontend/components/admin/DeleteUserDialog.vue

@@ -97,7 +97,7 @@ async function submit() {
                     </div>
                 </div>
             </AlterDialogContent>
-            <AlertDialogFooter>
+            <AlertDialogFooter class="gap-y-0">
                 <AlertDialogCancel @click="close">Cancel</AlertDialogCancel>
                 <AlertDialogAction
                     :disabled="!emailMatches || deleting"

frontend/components/admin/EditUserDialog.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { Accordion } from '@/components/ui/accordion';
 import {
     AlertDialog,
     AlertDialogAction,
@@ -14,14 +15,14 @@ import { useForm } from 'vee-validate';
 import { toTypedSchema } from '@vee-validate/yup';
 import { editUserSchema } from '~/lib/schemas/admin';
 import { editUser } from '~/lib/api/admin/editUser';
-import type { AuthUser } from '~/shared/types/auth';
+import type { AuthUserWithWarrens } from '~/shared/types/admin';
 
 const adminStore = useAdminStore();
 
 const isValid = computed(() => Object.keys(form.errors.value).length < 1);
 
 // We'll only update this value if there is a user to prevent layout shifts on close
-const user = ref<AuthUser>();
+const user = ref<AuthUserWithWarrens>();
 const editing = ref(false);
 
 const isChanged = computed(() => {
@@ -52,8 +53,13 @@ const form = useForm({
 
 adminStore.$subscribe((_mutation, state) => {
     if (state.editUserDialog != null && !editing.value) {
-        user.value = state.editUserDialog.user;
-        form.setValues(user.value);
+        user.value = state.resources.users.find(
+            (u) => u.id === state.editUserDialog?.user.id
+        );
+
+        if (user.value != null) {
+            form.setValues(user.value);
+        }
     }
 });
 
@@ -73,7 +79,14 @@ const onSubmit = form.handleSubmit(async (values) => {
     });
 
     if (result.success) {
-        close();
+        const newUser: AuthUserWithWarrens = {
+            id: result.user.id,
+            name: result.user.name,
+            email: result.user.email,
+            admin: result.user.admin,
+            warrens: user.value.warrens,
+        };
+        adminStore.setEditUserDialog(newUser);
     }
 
     editing.value = false;
@@ -83,102 +96,141 @@ const onSubmit = form.handleSubmit(async (values) => {
 <template>
     <AlertDialog :open="adminStore.editUserDialog != null">
         <AlertDialogTrigger><slot /></AlertDialogTrigger>
-        <AlertDialogContent @escape-key-down="close">
-            <AlertDialogHeader>
+        <AlertDialogContent
+            v-if="user != null"
+            class="flex max-h-[95vh] flex-col"
+            @escape-key-down="close"
+        >
+            <AlertDialogHeader class="shrink">
                 <AlertDialogTitle>Edit user</AlertDialogTitle>
                 <AlertDialogDescription>
-                    Edit the user's fields, manage permissions or assign warrens
+                    Modify the user's fields, manage permissions or assign
+                    warrens
                 </AlertDialogDescription>
             </AlertDialogHeader>
 
-            <form
-                id="edit-user-form"
-                class="flex flex-col gap-2"
-                @submit.prevent="onSubmit"
+            <ScrollArea
+                class="flex h-full grow flex-col justify-start overflow-hidden"
             >
-                <FormField v-slot="{ componentField }" name="name">
-                    <FormItem>
-                        <FormLabel>Username</FormLabel>
-                        <FormControl>
-                            <Input
-                                v-bind="componentField"
-                                id="username"
-                                type="text"
-                                placeholder="confused-cat"
-                                autocomplete="off"
-                                data-1p-ignore
-                                data-protonpass-ignore
-                                data-bwignore
-                            />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                </FormField>
+                <form
+                    id="edit-user-form"
+                    class="flex flex-col gap-2"
+                    @submit.prevent="onSubmit"
+                >
+                    <FormField v-slot="{ componentField }" name="name">
+                        <FormItem>
+                            <FormLabel>Username</FormLabel>
+                            <FormControl>
+                                <Input
+                                    v-bind="componentField"
+                                    id="username"
+                                    type="text"
+                                    placeholder="confused-cat"
+                                    autocomplete="off"
+                                    data-1p-ignore
+                                    data-protonpass-ignore
+                                    data-bwignore
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
 
-                <FormField v-slot="{ componentField }" name="email">
-                    <FormItem>
-                        <FormLabel>Email</FormLabel>
-                        <FormControl>
-                            <Input
-                                v-bind="componentField"
-                                id="email"
-                                type="email"
-                                placeholder="confusedcat@example.com"
-                                autocomplete="off"
-                                data-1p-ignore
-                                data-protonpass-ignore
-                                data-bwignore
-                            />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                </FormField>
+                    <FormField v-slot="{ componentField }" name="email">
+                        <FormItem>
+                            <FormLabel>Email</FormLabel>
+                            <FormControl>
+                                <Input
+                                    v-bind="componentField"
+                                    id="email"
+                                    type="email"
+                                    placeholder="confusedcat@example.com"
+                                    autocomplete="off"
+                                    data-1p-ignore
+                                    data-protonpass-ignore
+                                    data-bwignore
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
 
-                <FormField v-slot="{ componentField }" name="password">
-                    <FormItem>
-                        <FormLabel>Password</FormLabel>
-                        <FormControl>
-                            <Input
-                                v-bind="componentField"
-                                id="password"
-                                type="password"
-                                autocomplete="off"
-                                data-1p-ignore
-                                data-protonpass-ignore
-                                data-bwignore
-                            />
-                        </FormControl>
-                        <FormMessage />
-                        <FormDescription
-                            >Leave empty to keep the current
-                            password</FormDescription
+                    <FormField v-slot="{ componentField }" name="password">
+                        <FormItem>
+                            <FormLabel>Password</FormLabel>
+                            <FormControl>
+                                <Input
+                                    v-bind="componentField"
+                                    id="password"
+                                    type="password"
+                                    autocomplete="off"
+                                    data-1p-ignore
+                                    data-protonpass-ignore
+                                    data-bwignore
+                                />
+                            </FormControl>
+                            <FormMessage />
+                            <FormDescription
+                                >Leave empty to keep the current
+                                password</FormDescription
+                            >
+                        </FormItem>
+                    </FormField>
+
+                    <FormField v-slot="{ value, handleChange }" name="admin">
+                        <FormItem>
+                            <FormLabel>Admin</FormLabel>
+                            <FormControl>
+                                <Switch
+                                    id="admin"
+                                    :model-value="value"
+                                    @update:model-value="handleChange"
+                                />
+                            </FormControl>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+
+                    <AlertDialogAction
+                        type="submit"
+                        form="edit-user-form"
+                        :disabled="!isChanged || !isValid"
+                        >Save</AlertDialogAction
+                    >
+                </form>
+
+                <Separator orientation="horizontal" class="my-4" />
+
+                <div class="flex w-full flex-col gap-2">
+                    <AdminAddUserWarrenDialog :user>
+                        <Button variant="outline" size="icon">
+                            <Icon name="lucide:folder-plus" />
+                        </Button>
+                    </AdminAddUserWarrenDialog>
+
+                    <Accordion
+                        v-if="user.warrens.length > 0"
+                        class="flex w-full flex-col gap-2"
+                        collapsible
+                        type="single"
+                    >
+                        <AdminUserWarrenListing
+                            v-for="warren in user.warrens"
+                            :key="warren.warrenId"
+                            :user-warren="warren"
+                        />
+                    </Accordion>
+                    <div v-else class="flex flex-col gap-4">
+                        <span class="text-muted-foreground"
+                            >This user is not assigned to any warrens</span
                         >
-                    </FormItem>
-                </FormField>
-
-                <FormField v-slot="{ value, handleChange }" name="admin">
-                    <FormItem>
-                        <FormLabel>Admin</FormLabel>
-                        <FormControl>
-                            <Switch
-                                id="admin"
-                                :model-value="value"
-                                @update:model-value="handleChange"
-                            />
-                        </FormControl>
-                        <FormMessage />
-                    </FormItem>
-                </FormField>
-            </form>
+                    </div>
+                </div>
+                <Separator orientation="horizontal" class="mt-4" />
+            </ScrollArea>
 
             <AlertDialogFooter class="gap-y-0">
-                <AlertDialogCancel @click="close">Cancel</AlertDialogCancel>
-                <AlertDialogAction
-                    type="submit"
-                    form="edit-user-form"
-                    :disabled="!isChanged || !isValid"
-                    >Save</AlertDialogAction
-                >
+                <AlertDialogCancel @click="close">Close</AlertDialogCancel>
             </AlertDialogFooter>
         </AlertDialogContent>
     </AlertDialog>

frontend/components/admin/UserListing.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AuthUser } from '#shared/types/auth';
 
+const session = useAuthSession();
 const { user } = defineProps<{
     user: AuthUser;
 }>();
@@ -12,13 +13,20 @@ const AVATAR =
 
 <template>
     <div
-        class="group/user bg-accent/30 flex cursor-pointer flex-row items-center justify-between gap-4 overflow-hidden rounded-lg p-2 pl-3"
+        class="group/user bg-accent/30 flex flex-row items-center justify-between gap-4 overflow-hidden rounded-lg p-2 pl-3"
     >
         <Avatar>
             <AvatarImage :src="AVATAR" />
         </Avatar>
         <div class="flex min-w-0 shrink grow flex-col leading-4">
-            <span class="truncate text-sm font-medium">{{ user.name }}</span>
+            <span class="truncate text-sm font-medium">
+                {{ user.name }}
+                <span
+                    v-if="user.id === session?.user.id"
+                    class="text-muted-foreground font-normal"
+                    >(You)</span
+                >
+            </span>
             <span class="text-muted-foreground truncate text-xs">{{
                 user.email
             }}</span>

frontend/components/admin/UserWarrenListing.vue

@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import {
+    AccordionItem,
+    AccordionTrigger,
+    AccordionContent,
+} from '@/components/ui/accordion';
+import { useDebounceFn } from '@vueuse/core';
+import { toast } from 'vue-sonner';
+import { deleteUserWarren } from '~/lib/api/admin/deleteUserWarren';
+import { editUserWarren } from '~/lib/api/admin/editUserWarren';
+import type { UserWarren } from '~/shared/types/warrens';
+
+const props = defineProps<{
+    userWarren: UserWarren;
+}>();
+const userWarren = props.userWarren;
+
+const adminStore = useAdminStore();
+
+const updatePermissionsDebounced = useDebounceFn(
+    async (userWarren: UserWarren) => {
+        const result = await editUserWarren(userWarren);
+
+        if (result.success) {
+            toast.success('Permissions', {
+                description: `Successfully updated the user's permissions`,
+            });
+        } else {
+            toast.error('Permissions', {
+                description: `Failed to update the user's permissions`,
+            });
+        }
+    },
+    1000,
+    { maxWait: 5000 }
+);
+
+function permissionChanged(userWarren: UserWarren) {
+    updatePermissionsDebounced(userWarren);
+}
+
+async function onDeleteClicked() {
+    const { success } = await deleteUserWarren(
+        userWarren.userId,
+        userWarren.warrenId
+    );
+    if (!success) {
+        return;
+    }
+
+    if (adminStore.editUserDialog != null) {
+        // TODO: remove
+        /* adminStore.editUserDialog.user.warrens =
+            adminStore.editUserDialog.user.warrens.filter(
+                (uw) =>
+                    uw.userId !== userWarren.userId ||
+                    uw.warrenId != userWarren.warrenId
+            ); */
+    }
+}
+</script>
+
+<template>
+    <AccordionItem
+        :value="userWarren.warrenId"
+        class="bg-accent/30 group/user-warren w-full justify-start rounded-md"
+    >
+        <AccordionTrigger class="items-center px-4">
+            <div class="flex w-full flex-row justify-between">
+                <div
+                    class="flex w-full flex-col gap-0 overflow-hidden text-left leading-4"
+                >
+                    <span class="font-medium !no-underline">{{
+                        adminStore.resources.warrens[userWarren.warrenId]?.name
+                    }}</span>
+                    <span class="text-muted-foreground text-xs">{{
+                        adminStore.resources.warrens[userWarren.warrenId]?.path
+                    }}</span>
+                </div>
+                <Button
+                    class="transition-all not-pointer-coarse:opacity-0 not-pointer-coarse:group-hover/user-warren:opacity-100"
+                    variant="destructive"
+                    size="icon"
+                    @click="onDeleteClicked"
+                >
+                    <Icon name="lucide:trash-2" />
+                </Button>
+            </div>
+        </AccordionTrigger>
+        <AccordionContent class="px-4">
+            <div class="grid w-full grid-cols-1 gap-4 pt-1 sm:grid-cols-2">
+                <div
+                    v-for="[permissionKey] in getUserWarrenPermissions(
+                        userWarren
+                    )"
+                    :key="permissionKey"
+                    class="flex w-full flex-row items-center justify-between"
+                >
+                    <Label :for="permissionKey" class="grow">{{
+                        getUserWarrenPermissionName(permissionKey)
+                    }}</Label>
+                    <Switch
+                        :id="permissionKey"
+                        v-model="userWarren[permissionKey]"
+                        @update:model-value="
+                            () => permissionChanged(userWarren)
+                        "
+                    />
+                </div>
+            </div>
+        </AccordionContent>
+    </AccordionItem>
+</template>

frontend/components/admin/WarrenListing.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { AdminWarrenData } from '~/shared/types/warrens';
+
+const { warren } = defineProps<{
+    warren: AdminWarrenData;
+}>();
+</script>
+
+<template>
+    <div
+        class="group/warren bg-accent/30 flex shrink grow flex-row items-center gap-4 rounded-lg p-2 pl-4"
+    >
+        <Icon class="size-5" name="lucide:folder-root" />
+        <div class="flex min-w-0 shrink grow flex-col leading-4">
+            <p class="truncate text-sm font-medium">{{ warren.name }}</p>
+            <span class="text-muted-foreground truncate text-xs">{{
+                warren.path
+            }}</span>
+        </div>
+        <div
+            class="flex justify-end transition-all not-pointer-coarse:opacity-0 not-pointer-coarse:group-hover/warren:opacity-100"
+        >
+            <slot name="actions" />
+        </div>
+    </div>
+</template>

frontend/components/ui/accordion/Accordion.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import {
+  AccordionRoot,
+  type AccordionRootEmits,
+  type AccordionRootProps,
+  useForwardPropsEmits,
+} from 'reka-ui'
+
+const props = defineProps<AccordionRootProps>()
+const emits = defineEmits<AccordionRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AccordionRoot data-slot="accordion" v-bind="forwarded">
+    <slot />
+  </AccordionRoot>
+</template>

frontend/components/ui/accordion/AccordionContent.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionContent, type AccordionContentProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="delegatedProps"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', props.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

frontend/components/ui/accordion/AccordionItem.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { AccordionItem, type AccordionItemProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <AccordionItem
+    data-slot="accordion-item"
+    v-bind="forwardedProps"
+    :class="cn('border-b last:border-b-0', props.class)"
+  >
+    <slot />
+  </AccordionItem>
+</template>

frontend/components/ui/accordion/AccordionTrigger.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronDown } from 'lucide-vue-next'
+import {
+  AccordionHeader,
+  AccordionTrigger,
+  type AccordionTriggerProps,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<AccordionTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <AccordionHeader class="flex">
+    <AccordionTrigger
+      data-slot="accordion-trigger"
+      v-bind="delegatedProps"
+      :class="
+        cn(
+          'focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',
+          props.class,
+        )
+      "
+    >
+      <slot />
+      <slot name="icon">
+        <ChevronDown
+          class="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200"
+        />
+      </slot>
+    </AccordionTrigger>
+  </AccordionHeader>
+</template>

frontend/components/ui/accordion/index.ts

@@ -0,0 +1,4 @@
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'

frontend/components/ui/combobox/Combobox.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { ComboboxRoot, type ComboboxRootEmits, type ComboboxRootProps, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<ComboboxRootProps>()
+const emits = defineEmits<ComboboxRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <ComboboxRoot
+    data-slot="combobox"
+    v-bind="forwarded"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>

frontend/components/ui/combobox/ComboboxAnchor.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxAnchorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxAnchor, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxAnchorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxAnchor
+    data-slot="combobox-anchor"
+    v-bind="forwarded"
+    :class="cn('w-[200px]', props.class)"
+  >
+    <slot />
+  </ComboboxAnchor>
+</template>

frontend/components/ui/combobox/ComboboxEmpty.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxEmpty } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ComboboxEmpty
+    data-slot="combobox-empty"
+    v-bind="delegatedProps"
+    :class="cn('py-6 text-center text-sm', props.class)"
+  >
+    <slot />
+  </ComboboxEmpty>
+</template>

frontend/components/ui/combobox/ComboboxGroup.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxGroup, ComboboxLabel } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class']
+  heading?: string
+}>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ComboboxGroup
+    data-slot="combobox-group"
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>

frontend/components/ui/combobox/ComboboxInput.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { SearchIcon } from 'lucide-vue-next'
+import { ComboboxInput, type ComboboxInputEmits, type ComboboxInputProps, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+defineOptions({
+  inheritAttrs: false,
+})
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class']
+}>()
+
+const emits = defineEmits<ComboboxInputEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <div
+    data-slot="command-input-wrapper"
+    class="flex h-9 items-center gap-2 border-b px-3"
+  >
+    <SearchIcon class="size-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      data-slot="command-input"
+      :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,
+      )"
+
+      v-bind="{ ...forwarded, ...$attrs }"
+    >
+      <slot />
+    </ComboboxInput>
+  </div>
+</template>

frontend/components/ui/combobox/ComboboxItem.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxItem, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ComboboxItemEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxItem
+    data-slot="combobox-item"
+    v-bind="forwarded"
+    :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=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`, props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>

frontend/components/ui/combobox/ComboboxItemIndicator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxItemIndicatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxItemIndicator, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxItemIndicatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxItemIndicator
+    data-slot="combobox-item-indicator"
+    v-bind="forwarded"
+    :class="cn('ml-auto', props.class)"
+  >
+    <slot />
+  </ComboboxItemIndicator>
+</template>

frontend/components/ui/combobox/ComboboxList.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxContent, ComboboxPortal, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  position: 'popper',
+  align: 'center',
+  sideOffset: 4,
+})
+const emits = defineEmits<ComboboxContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <ComboboxPortal disabled>
+    <ComboboxContent
+      data-slot="combobox-list"
+      v-bind="forwarded"
+      :class="cn('z-50 w-[200px] rounded-md border bg-popover text-popover-foreground origin-(--reka-combobox-content-transform-origin) overflow-hidden shadow-md outline-none 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', props.class)"
+    >
+      <slot />
+    </ComboboxContent>
+  </ComboboxPortal>
+</template>

frontend/components/ui/combobox/ComboboxSeparator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxSeparator } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <ComboboxSeparator
+    data-slot="combobox-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border -mx-1 h-px', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>

frontend/components/ui/combobox/ComboboxTrigger.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { ComboboxTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxTrigger
+    data-slot="combobox-trigger"
+    v-bind="forwarded"
+    :class="cn('', props.class)"
+    tabindex="0"
+  >
+    <slot />
+  </ComboboxTrigger>
+</template>

frontend/components/ui/combobox/ComboboxViewport.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxViewportProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ComboboxViewport, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<ComboboxViewportProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <ComboboxViewport
+    data-slot="combobox-viewport"
+    v-bind="forwarded"
+    :class="cn('max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto', props.class)"
+  >
+    <slot />
+  </ComboboxViewport>
+</template>

frontend/components/ui/combobox/index.ts

@@ -0,0 +1,12 @@
+export { default as Combobox } from './Combobox.vue'
+export { default as ComboboxAnchor } from './ComboboxAnchor.vue'
+export { default as ComboboxEmpty } from './ComboboxEmpty.vue'
+export { default as ComboboxGroup } from './ComboboxGroup.vue'
+export { default as ComboboxInput } from './ComboboxInput.vue'
+export { default as ComboboxItem } from './ComboboxItem.vue'
+export { default as ComboboxItemIndicator } from './ComboboxItemIndicator.vue'
+export { default as ComboboxList } from './ComboboxList.vue'
+export { default as ComboboxSeparator } from './ComboboxSeparator.vue'
+export { default as ComboboxViewport } from './ComboboxViewport.vue'
+
+export { ComboboxCancel, ComboboxTrigger } from 'reka-ui'

frontend/components/ui/popover/Popover.vue

@@ -0,0 +1,18 @@
+<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
+    data-slot="popover"
+    v-bind="forwarded"
+  >
+    <slot />
+  </PopoverRoot>
+</template>

frontend/components/ui/popover/PopoverAnchor.vue

@@ -0,0 +1,15 @@
+<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>

frontend/components/ui/popover/PopoverContent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+  PopoverContent,
+  type PopoverContentEmits,
+  type PopoverContentProps,
+  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="{ ...forwarded, ...$attrs }"
+      :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>

frontend/components/ui/popover/PopoverTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { PopoverTrigger, type PopoverTriggerProps } from 'reka-ui'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+  <PopoverTrigger
+    data-slot="popover-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </PopoverTrigger>
+</template>

frontend/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'

frontend/components/ui/tabs/Tabs.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsRoot, useForwardPropsEmits } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<TabsRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <TabsRoot
+    data-slot="tabs"
+    v-bind="forwarded"
+    :class="cn('flex flex-col gap-2', props.class)"
+  >
+    <slot />
+  </TabsRoot>
+</template>

frontend/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsContent, type TabsContentProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsContentProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

frontend/components/ui/tabs/TabsList.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsList, type TabsListProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsListProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    v-bind="delegatedProps"
+    :class="cn(
+      'bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]',
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsList>
+</template>

frontend/components/ui/tabs/TabsTrigger.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { TabsTrigger, type TabsTriggerProps, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<TabsTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <TabsTrigger
+    data-slot="tabs-trigger"
+    v-bind="forwardedProps"
+    :class="cn(
+      `data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4`,
+      props.class,
+    )"
+  >
+    <slot />
+  </TabsTrigger>
+</template>

frontend/components/ui/tabs/index.ts

@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsContent } from './TabsContent.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'