Implement basic listing and creating playlist

app/components/internal/PlaylistSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ChevronsUpDown, Music4 } from 'lucide-vue-next';
+import { ChevronsUpDown, Music4, Plus } from 'lucide-vue-next';
 import Frame from '@/components/ui/frame/Frame.vue';
 import Select from '@/components/ui/select/Select.vue';
 import SelectCustomTrigger from '@/components/ui/select/SelectCustomTrigger.vue';
@@ -10,26 +10,43 @@ import SelectSeparator from '@/components/ui/select/SelectSeparator.vue';
 import SelectGroup from '@/components/ui/select/SelectGroup.vue';
 import SelectItem from '@/components/ui/select/SelectItem.vue';
 import { usePlaylists } from '@/composeables/api/playlist-controller/playlist-controller';
+import Skeleton from '@/components/ui/skeleton/Skeleton.vue';
+import PlaylistsNotFound from '@/components/internal/playlists/select/PlaylistsNotFound.vue';
+import Button from '../ui/button/Button.vue';
+import PlaylistCreateDialog from './playlists/select/PlaylistCreateDialog.vue';
 
 const {
     open: sidebarOpen,
 } = useSidebar()
 
 const { isLoading, isError, error, data } = usePlaylists();
+
+const selectedPlaylist = ref(-1);
+
+watch(data, (value) => {
+    const newValue = value?.data[0]?.id || -1;
+    if (selectedPlaylist.value === -1) {
+        selectedPlaylist.value = newValue;
+    }
+});
 </script>
 
 <template>
-    <Select>
+    <Select v-model="selectedPlaylist">
         <div v-if="sidebarOpen" class="hover:bg-sidebar-muted cursor-pointer rounded-md select-none">
             <SelectCustomTrigger class="w-full flex p-2 gap-2 items-center">
                 <Frame borderRadius="round" background="primary" padding="dense" margin="none">
                     <Music4 class="text-primary-foreground" :size="24" />
                 </Frame>
                 <div class="overflow-hidden text-start">
-                    <h4 class="text-xl font-semibold tracking-tight truncate">
-                        My playlist
+                    <Skeleton v-if="isLoading" class="w-32 h-5 rounded-full" />
+                    <h4 v-else-if="data" class="text-xl font-semibold tracking-tight truncate">
+                        <!-- TODO: i18n -->
+                        {{data.data.find(playlist => playlist.id === selectedPlaylist)?.title ||
+                            'No playlist selected'}}
                     </h4>
                     <p class="text-sm text-muted-foreground">
+                        <!-- TODO: Actual track count -->
                         11 track(s)
                     </p>
                 </div>
@@ -51,25 +68,26 @@ const { isLoading, isError, error, data } = usePlaylists();
             <UiSpinner />
         </SelectContent>
         <SelectContent class="w-full" v-else-if="isError">
-            <SelectLabel>{{ error?.message }}</SelectLabel>
+            <SelectLabel>{{ error }}</SelectLabel>
         </SelectContent>
         <SelectContent class="w-full" v-else-if="data">
             <SelectLabel>Playlists</SelectLabel>
             <SelectSeparator />
             <SelectGroup>
-                <SelectItem value="test">
-                    <span>Test</span>
-                </SelectItem>
-                <SelectItem value="second">
-                    <span>Second</span>
-                </SelectItem>
-                <SelectItem value="third">
-                    <span>Third</span>
-                </SelectItem>
-                <SelectItem value="fourth">
-                    <span>Fourth</span>
+                <SelectItem v-for="item in data.data" :key="item.id" :value="item.id || -1">
+                    <span>{{ item.title }}</span>
                 </SelectItem>
+                <PlaylistsNotFound v-if="data.data.length === 0" />
             </SelectGroup>
+            <SelectSeparator v-if="data.data.length > 0" />
+            <PlaylistCreateDialog v-if="data.data.length > 0">
+                <template #trigger>
+                    <Button variant="outline" size="icon" class="w-full">
+                        <Plus />
+                        Create playlist
+                    </Button>
+                </template>
+            </PlaylistCreateDialog>
         </SelectContent>
     </Select>
 </template>

app/components/internal/playlists/select/PlaylistCreateDialog.vue

@@ -0,0 +1,97 @@
+<script setup lang="ts">
+import { toTypedSchema } from "@vee-validate/zod"
+import { useForm } from "vee-validate"
+import * as z from "zod"
+
+import {
+    Dialog,
+    DialogContent,
+    DialogDescription,
+    DialogFooter,
+    DialogHeader,
+    DialogTitle,
+    DialogTrigger,
+} from '@/components/ui/dialog'
+import Button from '~/components/ui/button/Button.vue';
+import Input from '~/components/ui/input/Input.vue';
+import { toast } from "vue-sonner"
+import { FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage } from "~/components/ui/form"
+import { getPlaylistsQueryKey, useCreatePlaylist } from "~/composeables/api/playlist-controller/playlist-controller"
+import { useQueryClient } from "@tanstack/vue-query";
+
+const formSchema = toTypedSchema(z.object({
+    playlistName: z.string().min(2).max(50).default(''),
+}))
+
+const { isFieldDirty, handleSubmit, resetForm } = useForm({
+    validationSchema: formSchema,
+})
+
+const queryClient = useQueryClient();
+const { mutate: createPlaylistMutation } = useCreatePlaylist({
+    mutation: {
+        onSuccess: () => {
+            queryClient.invalidateQueries({ queryKey: getPlaylistsQueryKey() });
+            toast('Successfully created playlist', {
+                description: `Playlist created successfully`,
+            });
+        },
+        onError: () => {
+            toast.error('Cannot create playlist', {
+                description: 'Error occurred during playlist creation, please try again later.',
+            });
+        },
+    },
+});
+
+const onSubmit = handleSubmit(async (values) => {
+    const playlistName = values['playlistName'];
+    open.value = false;
+    createPlaylistMutation({
+        data: {
+            title: playlistName,
+        },
+    });
+})
+
+const open = ref(false)
+</script>
+
+<template>
+    <Dialog v-model:open="open">
+        <DialogTrigger as-child>
+            <slot name="trigger">
+                Create playlist
+            </slot>
+        </DialogTrigger>
+        <DialogContent class="sm:max-w-[425px]">
+            <form @submit.prevent="onSubmit">
+                <DialogHeader>
+                    <DialogTitle>Edit profile</DialogTitle>
+                    <DialogDescription>
+                        Create name for your playlist.
+                    </DialogDescription>
+                </DialogHeader>
+                <div class="py-4">
+                    <FormField v-slot="{ componentField }" name="playlistName" :validate-on-blur="!isFieldDirty">
+                        <FormItem>
+                            <FormLabel>Name</FormLabel>
+                            <FormControl>
+                                <Input type="text" placeholder="shadcn" v-bind="componentField" />
+                            </FormControl>
+                            <FormDescription>
+                                This is your public display name.
+                            </FormDescription>
+                            <FormMessage />
+                        </FormItem>
+                    </FormField>
+                </div>
+                <DialogFooter>
+                    <Button type="submit">
+                        Create
+                    </Button>
+                </DialogFooter>
+            </form>
+        </DialogContent>
+    </Dialog>
+</template>

app/components/internal/playlists/select/PlaylistsNotFound.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { FileMusicIcon } from 'lucide-vue-next';
+import Button from '@/components/ui/button/Button.vue';
+import Empty from '@/components/ui/empty/Empty.vue';
+import EmptyContent from '@/components/ui/empty/EmptyContent.vue';
+import EmptyDescription from '@/components/ui/empty/EmptyDescription.vue';
+import EmptyHeader from '@/components/ui/empty/EmptyHeader.vue';
+import EmptyMedia from '@/components/ui/empty/EmptyMedia.vue';
+import EmptyTitle from '@/components/ui/empty/EmptyTitle.vue';
+import PlaylistCreateDialog from './PlaylistCreateDialog.vue';
+
+</script>
+
+<template>
+    <Empty>
+        <EmptyHeader>
+            <EmptyMedia variant="icon">
+                <FileMusicIcon />
+            </EmptyMedia>
+            <EmptyTitle>No playlists found</EmptyTitle>
+            <EmptyDescription>No playlists found, create one right now!</EmptyDescription>
+        </EmptyHeader>
+        <EmptyContent>
+            <PlaylistCreateDialog>
+                <template #trigger>
+                    <Button>Create playlist</Button>
+                </template>
+            </PlaylistCreateDialog>
+        </EmptyContent>
+    </Empty>
+</template>

app/components/ui/dialog/Dialog.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from "reka-ui"
+import { DialogRoot, useForwardPropsEmits } from "reka-ui"
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <DialogRoot
+    data-slot="dialog"
+    v-bind="forwarded"
+  >
+    <slot />
+  </DialogRoot>
+</template>

app/components/ui/dialog/DialogClose.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from "reka-ui"
+import { DialogClose } from "reka-ui"
+
+const props = defineProps<DialogCloseProps>()
+</script>
+
+<template>
+  <DialogClose
+    data-slot="dialog-close"
+    v-bind="props"
+  >
+    <slot />
+  </DialogClose>
+</template>

app/components/ui/dialog/DialogContent.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+import DialogOverlay from "./DialogOverlay.vue"
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogContent
+      data-slot="dialog-content"
+      v-bind="forwarded"
+      :class="
+        cn(
+          'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
+      >
+        <X />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

app/components/ui/dialog/DialogDescription.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogDescription, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogDescription
+    data-slot="dialog-description"
+    v-bind="forwardedProps"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

app/components/ui/dialog/DialogFooter.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{ class?: HTMLAttributes["class"] }>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-footer"
+    :class="cn('flex flex-col-reverse gap-2 sm:flex-row sm:justify-end', props.class)"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/dialog/DialogHeader.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="dialog-header"
+    :class="cn('flex flex-col gap-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/dialog/DialogOverlay.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogOverlay } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <DialogOverlay
+    data-slot="dialog-overlay"
+    v-bind="delegatedProps"
+    :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)"
+  >
+    <slot />
+  </DialogOverlay>
+</template>

app/components/ui/dialog/DialogScrollContent.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { X } from "lucide-vue-next"
+import {
+  DialogClose,
+  DialogContent,
+
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <X class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

app/components/ui/dialog/DialogTitle.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { DialogTitle, useForwardProps } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+  <DialogTitle
+    data-slot="dialog-title"
+    v-bind="forwardedProps"
+    :class="cn('text-lg leading-none font-semibold', props.class)"
+  >
+    <slot />
+  </DialogTitle>
+</template>

app/components/ui/dialog/DialogTrigger.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { DialogTriggerProps } from "reka-ui"
+import { DialogTrigger } from "reka-ui"
+
+const props = defineProps<DialogTriggerProps>()
+</script>
+
+<template>
+  <DialogTrigger
+    data-slot="dialog-trigger"
+    v-bind="props"
+  >
+    <slot />
+  </DialogTrigger>
+</template>

app/components/ui/dialog/index.ts

@@ -0,0 +1,10 @@
+export { default as Dialog } from "./Dialog.vue"
+export { default as DialogClose } from "./DialogClose.vue"
+export { default as DialogContent } from "./DialogContent.vue"
+export { default as DialogDescription } from "./DialogDescription.vue"
+export { default as DialogFooter } from "./DialogFooter.vue"
+export { default as DialogHeader } from "./DialogHeader.vue"
+export { default as DialogOverlay } from "./DialogOverlay.vue"
+export { default as DialogScrollContent } from "./DialogScrollContent.vue"
+export { default as DialogTitle } from "./DialogTitle.vue"
+export { default as DialogTrigger } from "./DialogTrigger.vue"

app/components/ui/empty/Empty.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty"
+    :class="cn(
+      'flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/empty/EmptyContent.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-content"
+    :class="cn(
+      'flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm',
+      props.class,
+    )"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/empty/EmptyDescription.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <p
+    data-slot="empty-description"
+    :class="cn(
+      'text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </p>
+</template>

app/components/ui/empty/EmptyHeader.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+
+defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-header"
+    :class="cn(
+      'flex max-w-sm flex-col items-center gap-2 text-center',
+      $attrs.class ?? '',
+    )"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/empty/EmptyMedia.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { EmptyMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { emptyMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: EmptyMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-icon"
+    :data-variant="variant"
+    :class="cn(emptyMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/empty/EmptyTitle.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue"
+import type { EmptyMediaVariants } from "."
+import { cn } from "@/lib/utils"
+import { emptyMediaVariants } from "."
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+  variant?: EmptyMediaVariants["variant"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="empty-icon"
+    :data-variant="variant"
+    :class="cn(emptyMediaVariants({ variant }), props.class)"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/empty/index.ts

@@ -0,0 +1,26 @@
+import type { VariantProps } from "class-variance-authority"
+import { cva } from "class-variance-authority"
+
+export { default as Empty } from "./Empty.vue"
+export { default as EmptyContent } from "./EmptyContent.vue"
+export { default as EmptyDescription } from "./EmptyDescription.vue"
+export { default as EmptyHeader } from "./EmptyHeader.vue"
+export { default as EmptyMedia } from "./EmptyMedia.vue"
+export { default as EmptyTitle } from "./EmptyTitle.vue"
+
+export const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+)
+
+export type EmptyMediaVariants = VariantProps<typeof emptyMediaVariants>

app/components/ui/form/FormControl.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { Slot } from "reka-ui"
+import { useFormField } from "./useFormField"
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    data-slot="form-control"
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
+    :aria-invalid="!!error"
+  >
+    <slot />
+  </Slot>
+</template>

app/components/ui/form/FormDescription.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { formDescriptionId } = useFormField()
+</script>
+
+<template>
+  <p
+    :id="formDescriptionId"
+    data-slot="form-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot />
+  </p>
+</template>

app/components/ui/form/FormItem.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { useId } from "reka-ui"
+import { provide } from "vue"
+import { cn } from "@/lib/utils"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
+</script>
+
+<template>
+  <div
+    data-slot="form-item"
+    :class="cn('grid gap-2', props.class)"
+  >
+    <slot />
+  </div>
+</template>

app/components/ui/form/FormLabel.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { cn } from "@/lib/utils"
+import { Label } from '@/components/ui/label'
+import { useFormField } from "./useFormField"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const { error, formItemId } = useFormField()
+</script>
+
+<template>
+  <Label
+    data-slot="form-label"
+    :data-error="!!error"
+    :class="cn(
+      'data-[error=true]:text-destructive',
+      props.class,
+    )"
+    :for="formItemId"
+  >
+    <slot />
+  </Label>
+</template>

app/components/ui/form/FormMessage.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { ErrorMessage } from "vee-validate"
+import { toValue } from "vue"
+import { cn } from "@/lib/utils"
+import { useFormField } from "./useFormField"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+
+const { name, formMessageId } = useFormField()
+</script>
+
+<template>
+  <ErrorMessage
+    :id="formMessageId"
+    data-slot="form-message"
+    as="p"
+    :name="toValue(name)"
+    :class="cn('text-destructive text-sm', props.class)"
+  />
+</template>

app/components/ui/form/index.ts

@@ -0,0 +1,7 @@
+export { default as FormControl } from "./FormControl.vue"
+export { default as FormDescription } from "./FormDescription.vue"
+export { default as FormItem } from "./FormItem.vue"
+export { default as FormLabel } from "./FormLabel.vue"
+export { default as FormMessage } from "./FormMessage.vue"
+export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+export { Form, Field as FormField, FieldArray as FormFieldArray } from "vee-validate"

app/components/ui/form/injectionKeys.ts

@@ -0,0 +1,4 @@
+import type { InjectionKey } from "vue"
+
+export const FORM_ITEM_INJECTION_KEY
+  = Symbol() as InjectionKey<string>

app/components/ui/form/useFormField.ts

@@ -0,0 +1,30 @@
+import { FieldContextKey } from "vee-validate"
+import { computed, inject } from "vue"
+import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys"
+
+export function useFormField() {
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
+
+  if (!fieldContext)
+    throw new Error("useFormField should be used within <FormField>")
+
+  const { name, errorMessage: error, meta } = fieldContext
+  const id = fieldItemContext
+
+  const fieldState = {
+    valid: computed(() => meta.valid),
+    isDirty: computed(() => meta.dirty),
+    isTouched: computed(() => meta.touched),
+    error,
+  }
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  }
+}

app/components/ui/label/Label.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { LabelProps } from "reka-ui"
+import type { HTMLAttributes } from "vue"
+import { reactiveOmit } from "@vueuse/core"
+import { Label } from "reka-ui"
+import { cn } from "@/lib/utils"
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
+
+const delegatedProps = reactiveOmit(props, "class")
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </Label>
+</template>

app/components/ui/label/index.ts

@@ -0,0 +1 @@
+export { default as Label } from "./Label.vue"

app/components/ui/sonner/Sonner.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { ToasterProps } from "vue-sonner"
+import { Toaster as Sonner } from "vue-sonner"
+
+const props = defineProps<ToasterProps>()
+</script>
+
+<template>
+  <Sonner
+    class="toaster group"
+    v-bind="props"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+
+    }"
+  />
+</template>

app/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue"

app/composeables/api/axios-instance.ts

@@ -12,7 +12,11 @@ export const axiosInstance = <T>(
         ...config,
         ...{
             ...options,
-            baseURL: baseURL
+            baseURL: baseURL,
+            auth: {
+                username: 'user',
+                password: 'password',
+            }
         },
         cancelToken: source.token,
     });

app/layouts/clear.vue

@@ -1,4 +1,7 @@
 <template>
+    <ClientOnly>
+        <Sonner />
+    </ClientOnly>
     <div class="flex flex-1">
         <div class="w-full">
             <header v-if="slots.header">
@@ -13,6 +16,8 @@
 
 <script setup>
 import { useSlots } from 'vue'
+import Sonner from '~/components/ui/sonner/Sonner.vue';
+import 'vue-sonner/style.css'
 
 const slots = useSlots()
 </script>

app/layouts/default.vue

@@ -1,4 +1,7 @@
 <template>
+    <ClientOnly>
+        <Toaster />
+    </ClientOnly>
     <AppSidebar />
     <SidebarInset>
         <div class="flex flex-1">
@@ -21,5 +24,8 @@
 import { useSlots } from 'vue'
 import AppSidebar from '@/components/ui/sidebar/AppSidebar.vue';
 import SidebarInset from '@/components/ui/sidebar/SidebarInset.vue';
+import { Toaster } from '~/components/ui/sonner';
+import 'vue-sonner/style.css'
+
 const slots = useSlots()
 </script>