add / edit / delete user warrens

frontend/assets/css/tailwind.css

@@ -42,6 +42,24 @@
     --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+        to {
+            height: var(--reka-accordion-content-height);
+        }
+    }
+    @keyframes accordion-up {
+        from {
+            height: var(--reka-accordion-content-height);
+        }
+        to {
+            height: 0;
+        }
+    }
 }
 
 :root {

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'

frontend/layouts/default.vue

@@ -8,17 +8,18 @@ const uploadStore = useUploadStore();
 const route = useRoute();
 const store = useWarrenStore();
 
-store.warrens = await getWarrens();
+await useAsyncData('warrens', async () => {
+    const warrens = await getWarrens();
+    store.warrens = warrens;
+});
 </script>
 
 <template>
     <SidebarProvider>
         <AppSidebar />
-        <main
-            class="flex w-full grow flex-col-reverse overflow-hidden md:flex-col"
-        >
+        <SidebarInset class="flex flex-col-reverse md:flex-col">
             <header
-                class="flex h-16 items-center gap-2 border-t transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:border-t-0 md:border-b"
+                class="bg-background sticky bottom-0 z-10 flex h-16 items-center gap-2 border-t transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 md:top-0 md:bottom-[unset] md:border-t-0 md:border-b"
             >
                 <div class="flex w-full items-center gap-4 px-4">
                     <SidebarTrigger class="[&_svg]:size-4" />
@@ -61,6 +62,6 @@ store.warrens = await getWarrens();
             <div class="flex flex-1 flex-col p-4">
                 <slot />
             </div>
-        </main>
+        </SidebarInset>
     </SidebarProvider>
 </template>

frontend/lib/api/admin/createUserWarren.ts

@@ -0,0 +1,48 @@
+import type { ApiResponse } from '~/shared/types/api';
+import type { UserWarren } from '~/shared/types/warrens';
+import { getApiHeaders } from '..';
+import { toast } from 'vue-sonner';
+
+export async function createUserWarren(
+    userWarren: UserWarren
+): Promise<{ success: true; data: UserWarren } | { success: false }> {
+    const { data, error } = await useFetch<ApiResponse<UserWarren>>(
+        getApiUrl('admin/user-warrens'),
+        {
+            method: 'POST',
+            headers: getApiHeaders(),
+            body: JSON.stringify(userWarren),
+            responseType: 'json',
+        }
+    );
+
+    if (data.value == null) {
+        toast.error('Create user warren', {
+            description: error.value?.data ?? 'Failed to create user warren',
+        });
+
+        return {
+            success: false,
+        };
+    }
+
+    const keys = ['admin-resources'];
+
+    const session = useAuthSession();
+    if (
+        session.value != null &&
+        data.value.data.userId === session.value.user.id
+    ) {
+        keys.push('warrens');
+    }
+    await refreshNuxtData(keys);
+
+    toast.success('Create user warren', {
+        description: 'Successfully created user warren',
+    });
+
+    return {
+        success: true,
+        data: data.value.data,
+    };
+}

frontend/lib/api/admin/deleteUser.ts

@@ -32,7 +32,7 @@ export async function deleteUser(
     await refreshNuxtData('admin-resources');
 
     toast.success('Delete user', {
-        description: 'Successfully delete user',
+        description: 'Successfully deleted user',
     });
 
     return {

frontend/lib/api/admin/deleteUserWarren.ts

@@ -0,0 +1,52 @@
+import type { UserWarren } from '~/shared/types/warrens';
+import { getApiHeaders } from '..';
+import { toast } from 'vue-sonner';
+import type { ApiResponse } from '~/shared/types/api';
+
+export async function deleteUserWarren(
+    userId: string,
+    warrenId: string
+): Promise<{ success: true; data: UserWarren } | { success: false }> {
+    const { data, error } = await useFetch<ApiResponse<UserWarren>>(
+        getApiUrl('admin/user-warrens'),
+        {
+            method: 'DELETE',
+            headers: getApiHeaders(),
+            body: JSON.stringify({
+                userId: userId,
+                warrenId: warrenId,
+            }),
+            responseType: 'json',
+        }
+    );
+
+    if (data.value == null) {
+        toast.error('Delete user warren', {
+            description: error.value?.data ?? 'Failed to delete user warren',
+        });
+
+        return {
+            success: false,
+        };
+    }
+
+    const keys = ['admin-resources'];
+    const session = useAuthSession();
+    if (
+        session.value != null &&
+        data.value.data.userId === session.value.user.id
+    ) {
+        keys.push('warrens');
+    }
+
+    await refreshNuxtData(keys);
+
+    toast.success('Delete user warren', {
+        description: 'Successfully deleted user warren',
+    });
+
+    return {
+        success: true,
+        data: data.value.data,
+    };
+}

frontend/lib/api/admin/editUser.ts

@@ -33,7 +33,14 @@ export async function editUser(
         };
     }
 
-    await refreshNuxtData('admin-resources');
+    const session = useAuthSession();
+    if (session.value != null && data.value.data.id === session.value.user.id) {
+        reloadNuxtApp({
+            ttl: 2000,
+        });
+    } else {
+        await refreshNuxtData('admin-resources');
+    }
 
     toast.success('Edit user', {
         description: 'Successfully edited user',

frontend/lib/api/admin/editUserWarren.ts

@@ -0,0 +1,30 @@
+import type { UserWarren } from '~/shared/types/warrens';
+import { getApiHeaders } from '..';
+import type { ApiResponse } from '~/shared/types/api';
+
+export async function editUserWarren(
+    userWarren: UserWarren
+): Promise<{ success: true; data: UserWarren } | { success: false }> {
+    const { data } = await useFetch<ApiResponse<UserWarren>>(
+        getApiUrl('admin/user-warrens'),
+        {
+            method: 'PATCH',
+            headers: getApiHeaders(),
+            body: JSON.stringify(userWarren),
+            responseType: 'json',
+        }
+    );
+
+    if (data.value == null) {
+        return {
+            success: false,
+        };
+    }
+
+    await refreshNuxtData('admin-resources');
+
+    return {
+        success: true,
+        data: data.value.data,
+    };
+}

frontend/lib/api/admin/fetchAll.ts

@@ -1,5 +1,5 @@
 import type { ApiResponse } from '~/shared/types/api';
-import type { UserWarren, Warren } from '~/shared/types/warrens';
+import type { AdminWarrenData, UserWarren } from '~/shared/types/warrens';
 import { getApiHeaders } from '..';
 import type { AdminResources, AuthUserWithWarrens } from '~/shared/types/admin';
 import type { AuthUser } from '~/shared/types/auth';
@@ -15,7 +15,7 @@ export async function fetchAllAdminResources(): Promise<
         ApiResponse<{
             users: AuthUser[];
             userWarrens: UserWarren[];
-            warrens: Warren[];
+            warrens: AdminWarrenData[];
         }>
     >(getApiUrl('admin/all'), {
         method: 'GET',
@@ -36,7 +36,7 @@ export async function fetchAllAdminResources(): Promise<
             warrens: [],
         }))
         .reduce((acc, u) => ({ ...acc, [u.id]: u }), {});
-    const warrens: Record<string, Warren> = {};
+    const warrens: Record<string, AdminWarrenData> = {};
 
     for (const warren of data.value.data.warrens) {
         warrens[warren.id] = warren;

frontend/lib/api/auth/getSession.ts

@@ -5,9 +5,10 @@ export async function getAuthSessionData(params: {
     sessionType: AuthSessionType;
     sessionId: string;
 }): Promise<
-    { success: true; user: AuthUser; expiresAt: number } | { success: false }
+    | { success: true; user: AuthUser; expiresAt: number }
+    | { success: false; code: number }
 > {
-    const { data, status } = await useFetch<
+    const { data, error, status } = await useFetch<
         ApiResponse<{
             user: AuthUser;
             expiresAt: number;
@@ -23,6 +24,7 @@ export async function getAuthSessionData(params: {
     if (status.value !== 'success' || data.value == null) {
         return {
             success: false,
+            code: error.value?.statusCode ?? 400,
         };
     }
 

frontend/lib/api/warrens.ts

@@ -1,23 +1,22 @@
 import { toast } from 'vue-sonner';
 import type { DirectoryEntry } from '#shared/types';
 import type { ApiResponse } from '#shared/types/api';
-import type { Warren } from '#shared/types/warrens';
+import type { WarrenData } from '#shared/types/warrens';
 import { getApiHeaders, getAuthHeader } from '.';
 
-export async function getWarrens(): Promise<Record<string, Warren>> {
-    const { data, error } = await useFetch<ApiResponse<{ warrens: Warren[] }>>(
-        getApiUrl('warrens'),
-        {
-            method: 'GET',
-            headers: getApiHeaders(),
-        }
-    );
+export async function getWarrens(): Promise<Record<string, WarrenData>> {
+    const { data, error } = await useFetch<
+        ApiResponse<{ warrens: WarrenData[] }>
+    >(getApiUrl('warrens'), {
+        method: 'GET',
+        headers: getApiHeaders(),
+    });
 
     if (data.value == null) {
         throw error.value?.name;
     }
 
-    const warrens: Record<string, Warren> = {};
+    const warrens: Record<string, WarrenData> = {};
 
     for (const warren of data.value.data.warrens) {
         warrens[warren.id] = warren;

frontend/lib/schemas/admin.ts

@@ -17,3 +17,12 @@ export const editUserSchema = object({
         .optional(),
     admin: boolean().required('required'),
 });
+
+export const userWarrenSchema = object({
+    userId: string().uuid().required(),
+    warrenId: string().uuid().required('required'),
+    canListFiles: boolean().required(),
+    canReadFiles: boolean().required(),
+    canModifyFiles: boolean().required(),
+    canDeleteFiles: boolean().required(),
+});

frontend/middleware/authenticated.ts

@@ -1,13 +1,28 @@
-export default defineNuxtRouteMiddleware((to, _from) => {
-    if (
-        useAuthSession().value != null ||
-        to.name === 'login' ||
-        to.name === 'register'
-    ) {
+import { getAuthSessionData } from '~/lib/api/auth/getSession';
+
+export default defineNuxtRouteMiddleware(async (to, _from) => {
+    const session = useAuthSession();
+    if (session.value != null) {
+        const result = await getAuthSessionData({
+            sessionType: session.value.type,
+            sessionId: session.value.id,
+        });
+
+        if (result.success) {
+            return;
+        } else if (result.code === 401) {
+            session.value = null;
+            return navigateTo({
+                path: '/login',
+            });
+        }
+    }
+
+    if (to.name === 'login' || to.name === 'register') {
         return;
     }
 
     return navigateTo({
-        path: 'login',
+        path: '/login',
     });
 });

frontend/middleware/is-admin.ts

@@ -3,7 +3,7 @@ export default defineNuxtRouteMiddleware((_to, _from) => {
 
     if (session == null || !session.user.admin) {
         return navigateTo({
-            path: 'login',
+            path: '/login',
         });
     }
 });

frontend/pages/admin/index.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 definePageMeta({
     layout: 'admin',
-    middleware: ['is-admin'],
+    middleware: ['authenticated', 'is-admin'],
 });
 
 const session = useAuthSession();
@@ -12,13 +12,8 @@ const adminStore = useAdminStore();
     <div class="grid gap-4 lg:grid-cols-2">
         <Card class="overflow-hidden">
             <CardHeader>
-                <CardTitle
-                    ><NuxtLink to="/admin/users">Users</NuxtLink></CardTitle
-                >
-                <CardDescription
-                    >Add users or modify existing users' permissions or
-                    warrens</CardDescription
-                >
+                <CardTitle>Users</CardTitle>
+                <CardDescription>Create or manage users</CardDescription>
             </CardHeader>
             <CardContent class="max-h-64 overflow-hidden">
                 <ScrollArea class="h-full w-full overflow-hidden">
@@ -34,8 +29,7 @@ const adminStore = useAdminStore();
                                     variant="outline"
                                     size="icon"
                                     @click="
-                                        () =>
-                                            adminStore.openEditUserDialog(user)
+                                        () => adminStore.setEditUserDialog(user)
                                     "
                                 >
                                     <Icon name="lucide:pencil" />
@@ -67,5 +61,44 @@ const adminStore = useAdminStore();
                 </div>
             </CardFooter>
         </Card>
+        <Card class="overflow-hidden">
+            <CardHeader>
+                <CardTitle>Warrens</CardTitle>
+                <CardDescription>Create or manage warrens</CardDescription>
+            </CardHeader>
+            <CardContent class="max-h-64 grow overflow-hidden">
+                <ScrollArea class="h-full w-full overflow-hidden">
+                    <div class="flex w-full flex-col gap-2 overflow-hidden">
+                        <AdminWarrenListing
+                            v-for="warren in adminStore.resources.warrens"
+                            :key="warren.id"
+                            :warren
+                        >
+                            <template #actions>
+                                <Button
+                                    class="m-1"
+                                    variant="outline"
+                                    size="icon"
+                                    ><Icon name="lucide:pencil"
+                                /></Button>
+                                <Button
+                                    class="m-1"
+                                    variant="destructive"
+                                    size="icon"
+                                    ><Icon name="lucide:trash-2"
+                                /></Button>
+                            </template>
+                        </AdminWarrenListing>
+                    </div>
+                </ScrollArea>
+            </CardContent>
+            <CardFooter>
+                <div class="mt-4 flex grow flex-row justify-end">
+                    <Button @click="adminStore.openCreateUserDialog"
+                        >Create</Button
+                    >
+                </div>
+            </CardFooter>
+        </Card>
     </div>
 </template>

frontend/pages/admin/stats.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-    layout: 'admin',
-    middleware: ['is-admin'],
-});
-</script>
-
-<template>
-    <p>/admin/stats</p>
-</template>

frontend/pages/admin/users.vue

@@ -1,22 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-    layout: 'admin',
-    middleware: ['is-admin'],
-});
-
-const adminStore = useAdminStore();
-</script>
-
-<template>
-    <div class="flex h-full w-full">
-        <ScrollArea class="h-full grow">
-            <div class="flex w-full flex-col gap-2">
-                <AdminUserListing
-                    v-for="user in adminStore.resources.users"
-                    :key="user.id"
-                    :user
-                />
-            </div>
-        </ScrollArea>
-    </div>
-</template>

frontend/pages/admin/warrens.vue

@@ -1,10 +0,0 @@
-<script setup lang="ts">
-definePageMeta({
-    layout: 'admin',
-    middleware: ['is-admin'],
-});
-</script>
-
-<template>
-    <p>/admin/warrens</p>
-</template>

frontend/pages/login.vue

@@ -46,7 +46,7 @@ const onSubmit = form.handleSubmit(async (values) => {
 </script>
 
 <template>
-    <Card class="w-full max-w-sm">
+    <Card class="w-full max-w-sm border-0 md:border">
         <CardHeader>
             <CardTitle class="text-2xl">Login</CardTitle>
             <CardDescription>

frontend/pages/register.vue

@@ -45,7 +45,7 @@ const onSubmit = form.handleSubmit(async (values) => {
 </script>
 
 <template>
-    <Card class="w-full max-w-sm">
+    <Card class="w-full max-w-sm border-0 md:border">
         <CardHeader>
             <CardTitle class="text-2xl">Register</CardTitle>
             <CardDescription>Create a new user account</CardDescription>

frontend/pages/warrens/index.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ScrollArea } from '@/components/ui/scroll-area';
-import type { Warren } from '#shared/types/warrens';
+import type { WarrenData } from '#shared/types/warrens';
 
 definePageMeta({
     middleware: ['authenticated'],
@@ -8,7 +8,7 @@ definePageMeta({
 
 const store = useWarrenStore();
 
-function selectWarren(warren: Warren) {
+function selectWarren(warren: WarrenData) {
     store.setCurrentWarren(warren.id, '/');
     navigateTo({
         path: '/warrens/files',

frontend/shared/types/admin.ts

@@ -1,9 +1,9 @@
 import type { AuthUser } from './auth';
-import type { UserWarren, Warren } from './warrens';
+import type { AdminWarrenData, UserWarren } from './warrens';
 
 export type AdminResources = {
     users: AuthUserWithWarrens[];
-    warrens: Record<string, Warren>;
+    warrens: Record<string, AdminWarrenData>;
 };
 
 export type AuthUserWithWarrens = AuthUser & {

frontend/shared/types/warrens.ts

@@ -1,15 +1,17 @@
-export type Warren = {
+export interface WarrenData {
     id: string;
     name: string;
+}
+
+export type AdminWarrenData = WarrenData & {
+    path: string;
 };
 
 export type UserWarren = {
     userId: string;
     warrenId: string;
-    canCreateChildren: boolean;
     canListFiles: boolean;
     canReadFiles: boolean;
     canModifyFiles: boolean;
     canDeleteFiles: boolean;
-    canDeleteWarren: boolean;
 };

frontend/stores/admin.ts

@@ -1,5 +1,5 @@
 import type { AuthUser } from '#shared/types/auth';
-import type { AdminResources } from '~/shared/types/admin';
+import type { AdminResources, AuthUserWithWarrens } from '~/shared/types/admin';
 
 export const useAdminStore = defineStore('admin', {
     state: () => ({
@@ -8,7 +8,7 @@ export const useAdminStore = defineStore('admin', {
             warrens: {},
         } as AdminResources,
         createUserDialogOpen: false,
-        editUserDialog: null as { user: AuthUser } | null,
+        editUserDialog: null as { user: AuthUserWithWarrens } | null,
         deleteUserDialog: null as { user: AuthUser } | null,
     }),
     actions: {
@@ -18,7 +18,7 @@ export const useAdminStore = defineStore('admin', {
         closeCreateUserDialog() {
             this.createUserDialogOpen = false;
         },
-        openEditUserDialog(user: AuthUser) {
+        setEditUserDialog(user: AuthUserWithWarrens) {
             this.editUserDialog = { user };
         },
         closeEditUserDialog() {

frontend/stores/index.ts

@@ -1,10 +1,10 @@
 import { defineStore } from 'pinia';
 import type { DirectoryEntry } from '#shared/types';
-import type { Warren } from '#shared/types/warrens';
+import type { WarrenData } from '#shared/types/warrens';
 
 export const useWarrenStore = defineStore('warrens', {
     state: () => ({
-        warrens: {} as Record<string, Warren>,
+        warrens: {} as Record<string, WarrenData>,
         current: null as { warrenId: string; path: string } | null,
         loading: false,
     }),

frontend/utils/warrens.ts

@@ -0,0 +1,31 @@
+import type { UserWarren } from '~/shared/types/warrens';
+
+export type UserWarrenPermissionKey =
+    | 'canListFiles'
+    | 'canReadFiles'
+    | 'canModifyFiles'
+    | 'canDeleteFiles';
+
+export function getUserWarrenPermissions(
+    userWarren: UserWarren
+): [UserWarrenPermissionKey, boolean][] {
+    return [
+        ['canListFiles', userWarren.canListFiles],
+        ['canReadFiles', userWarren.canReadFiles],
+        ['canModifyFiles', userWarren.canModifyFiles],
+        ['canDeleteFiles', userWarren.canDeleteFiles],
+    ];
+}
+
+const PERMISSION_NAMES: Record<UserWarrenPermissionKey, string> = {
+    canListFiles: 'List files',
+    canReadFiles: 'Read files',
+    canModifyFiles: 'Modify files',
+    canDeleteFiles: 'Delete files',
+};
+
+export function getUserWarrenPermissionName(
+    permission: UserWarrenPermissionKey
+): string {
+    return PERMISSION_NAMES[permission];
+}