Merge pull request #77 from AlexisNP/upgrade/nuxt

Upgrade/nuxt

assets/_colors.css

@@ -118,7 +118,8 @@
 
 .event-button,
 .event-popover,
-.event-callout {
+.event-callout,
+.card-color {
   --fg-color: var(--color-foreground);
   --bg-color: var(--color-background);
 
@@ -126,6 +127,13 @@
   transition-timing-function: var(--default-transition-timing-function);
 }
 
+.event-callout hr,
+.card-color hr {
+  transition-property: border-color;
+  transition-duration: var(--default-transition-duration);
+  transition-timing-function: var(--default-transition-timing-function);
+}
+
 .event-button {
   color: var(--fg-color);
   background-color: var(--bg-color);
@@ -206,6 +214,23 @@
   background-color: color-mix(in srgb, var(--bg-color) 50%, var(--color-background));
 }
 
+.card-color {
+  border-color: color-mix(in srgb, var(--bg-color) 30%, var(--color-background));
+  background-color: color-mix(in srgb, var(--bg-color) 10%, var(--color-background));
+
+  hr {
+    border-color: color-mix(in srgb, var(--bg-color) 30%, var(--color-background))
+  }
+}
+.card-color:is(:hover, :focus-visible) {
+  border-color: color-mix(in srgb, var(--bg-color) 40%, var(--color-background));
+  background-color: color-mix(in srgb, var(--bg-color) 20%, var(--color-background));
+
+  hr {
+    border-color: color-mix(in srgb, var(--bg-color) 40%, var(--color-background))
+  }
+}
+
 .bgc {
   display: flex;
   align-items: center;

assets/theme.css

@@ -39,7 +39,7 @@
   --background: hsl(180 0 4.9%);
   --foreground: hsl(210 40% 98%);
 
-  --muted: hsl(244 47% 20%);
+  --muted: hsl(0, 0%, 12%);
   --muted-foreground: hsl(215 20.2% 65.1%);
 
   --popover: hsl(180 0 4.9%);

components/calendar/Calendar.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useCalendar } from "@/stores/CalendarStore"
+import { useCalendar } from "~/stores/CalendarStore"
 import { computed, type Component, type ComputedRef } from "vue"
 
 // import { PhMagnifyingGlass } from '@phosphor-icons/vue'
@@ -40,7 +40,7 @@ onMounted(() => {
 
       <component :is="currentViewComponent" />
 
-      <LazyCalendarSearch />
+      <CalendarSearch />
       <LazyCalendarDialogCategories v-if="!isReadOnly" />
       <LazyCalendarDialogUpdateEvent v-if="!isReadOnly" />
       <LazyCalendarDialogDeleteEvent v-if="!isReadOnly" />

components/calendar/OptionsCTA.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
-import { useCalendar } from "@/stores/CalendarStore"
+import { useCalendar } from "~/stores/CalendarStore"
 import { PhCalendarBlank, PhCheckCircle, PhGear } from "@phosphor-icons/vue"
 import { computed } from "vue"
 

components/calendar/PreviewCard.vue

@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import { cn } from "~/lib/utils";
 import { PhArchive, PhCalendarDots, PhFile, PhFileDashed, PhFilePlus, PhPencil, PhPencilSimpleLine, PhTrash } from "@phosphor-icons/vue";
 import { DateTime } from "luxon";
 import type { Calendar } from "~/models/CalendarConfig";
@@ -23,30 +24,11 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
 
 <template>
   <UiCard
-    class="w-full h-full flex flex-col transition-all hover:bg-slate-50 dark:bg-gray-950 dark:hover:bg-indigo-950 dark:focus-within:outline-gray-900"
+    class="w-full h-full flex flex-col transition-all"
     :link="calendarLink"
-    :class="{
+    :class="cn(
-      'hover:bg-slate-50 dark:hover:bg-sky-950 dark:focus-within:outline-sky-900': !calendar.color,
+      calendar.color ? `card-color element-${calendar.color}` : '',
-      'bg-red-100 dark:bg-red-950 border-red-200 hover:bg-red-50 dark:hover:bg-red-900 dark:border-red-900 dark:focus-within:outline-red-900': calendar.color === 'red',
+    )"
-      'bg-orange-100 dark:bg-orange-950 border-orange-200 hover:bg-orange-50 dark:hover:bg-orange-900 dark:border-orange-900 dark:focus-within:outline-orange-900': calendar.color === 'orange',
-      'bg-amber-100 dark:bg-amber-950 border-amber-200 hover:bg-amber-50 dark:hover:bg-amber-900 dark:border-amber-900 dark:focus-within:outline-amber-900': calendar.color === 'amber',
-      'bg-yellow-100 dark:bg-yellow-950 border-yellow-200 hover:bg-yellow-50 dark:hover:bg-yellow-900 dark:border-yellow-900 dark:focus-within:outline-yellow-900': calendar.color === 'yellow',
-      'bg-lime-100 dark:bg-lime-950 border-lime-200 hover:bg-lime-50 dark:hover:bg-lime-900 dark:border-lime-900 dark:focus-within:outline-lime-900': calendar.color === 'lime',
-      ' bg-green-100 dark:bg-green-950 border-green-200 hover:bg-green-50 dark:hover:bg-green-900 dark:border-green-900 dark:focus-within:outline-green-900': calendar.color === 'green',
-      'bg-emerald-100 dark:bg-emerald-950 border-emerald-200 hover:bg-emerald-50 dark:hover:bg-emerald-900 dark:border-emerald-900 dark:focus-within:outline-emerald-900': calendar.color === 'emerald',
-      'bg-teal-100 dark:bg-teal-950 border-teal-200 hover:bg-teal-50 dark:hover:bg-teal-900 dark:border-teal-900 dark:focus-within:outline-teal-900': calendar.color === 'teal',
-      'bg-cyan-100 dark:bg-cyan-950 border-cyan-200 hover:bg-cyan-50 dark:hover:bg-cyan-900 dark:border-cyan-900 dark:focus-within:outline-cyan-900': calendar.color === 'cyan',
-      'bg-sky-100 dark:bg-sky-950 border-sky-200 hover:bg-sky-50 dark:hover:bg-sky-900 dark:border-sky-900 dark:focus-within:outline-sky-900': calendar.color === 'sky',
-      'bg-blue-100 dark:bg-blue-950 border-blue-200 hover:bg-blue-50 dark:hover:bg-blue-900 dark:border-blue-900 dark:focus-within:outline-blue-900': calendar.color === 'blue',
-      'bg-indigo-100 dark:bg-indigo-950 border-indigo-200 hover:bg-indigo-50 dark:hover:bg-indigo-900 dark:border-indigo-900 dark:focus-within:outline-indigo-900': calendar.color === 'indigo',
-      'bg-violet-100 dark:bg-violet-950 border-violet-200 hover:bg-violet-50 dark:hover:bg-violet-900 dark:border-violet-900 dark:focus-within:outline-violet-900': calendar.color === 'violet',
-      'bg-purple-100 dark:bg-purple-950 border-purple-200 hover:bg-purple-50 dark:hover:bg-purple-900 dark:border-purple-900 dark:focus-within:outline-purple-900': calendar.color === 'purple',
-      'bg-fuchsia-100 dark:bg-fuchsia-950 border-fuchsia-200 hover:bg-fuchsia-50 dark:hover:bg-fuchsia-900 dark:border-fuchsia-900 dark:focus-within:outline-fuchsia-900': calendar.color === 'fuchsia',
-      'bg-pink-100 dark:bg-pink-950 border-pink-200 hover:bg-pink-50 dark:hover:bg-pink-900 dark:border-pink-900 dark:focus-within:outline-pink-900': calendar.color === 'pink',
-      'bg-pink-100 dark:bg-rose-950 border-rose-200 hover:bg-rose-50 dark:hover:bg-rose-900 dark:border-rose-900 dark:focus-within:outline-rose-900': calendar.color === 'rose',
-      'text-slate-100 bg-slate-900 border-slate-700 hover:bg-slate-700 dark:hover:bg-slate-800 dark:border-slate-900 dark:focus-within:outline-slate-900': calendar.color === 'black',
-      ' hover:bg-slate-50 dark:hover:text-slate-900 dark:hover:bg-slate-200 dark:border-slate-700 dark:focus-within:outline-slate-100': calendar.color === 'white',
-    }"
   >
     <UiCardHeader class="gap-4">
       <UiCardTitle class="text-xl pr-12">{{ calendar.name }}</UiCardTitle>
@@ -86,7 +68,9 @@ const calendarLink = computed(() => isOwner.value ? `/my/calendars/${props.calen
       </div>
     </UiCardContent>
 
-    <UiCardFooter>
+    <hr>
+
+    <UiCardFooter class="border-t-0">
       <ul class="grid gap-1 text-sm">
         <li class="flex gap-1 items-center">
           <PhFilePlus size="18" />

components/calendar/dialog/Create.vue

@@ -41,7 +41,7 @@ function handleClose() {
         <PhX size="20" />
       </UiButton>
 
-      <CalendarFormCreate @on-changed-name="onChangedName" @on-close="handleClose" />
+      <CalendarFormCreate v-if="world.id" :world-id="world.id" @on-changed-name="onChangedName" @on-close="handleClose" />
     </UiAlertDialogContent>
   </UiAlertDialog>
 </template>

components/calendar/dialog/CreateEvent.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { RPGDate } from "~/models/Date";
 
-const { eventSkeleton, operationInProgress } = storeToRefs(useCalendar())
+const { eventSkeleton, operationInProgress, currentRPGDate } = storeToRefs(useCalendar())
 const { resetSkeleton } = useCalendar()
 const popoverOpen = ref(false)
 
@@ -39,6 +39,13 @@ function handleClosing() {
   popoverOpen.value = false
   resetSkeleton()
 }
+
+// If the date changes, the popover should close
+// Only for months for now (because it's the only view)
+watch(currentRPGDate, () => {
+  if (!popoverOpen.value) return
+  handleClosing()
+})
 </script>
 
 <template>

components/calendar/dialog/Delete.vue

@@ -22,26 +22,25 @@ async function handleAction(): Promise<void> {
 
   isLoading.value = true
 
-  try {
+  const { error } = await tryCatch($fetch(`/api/calendars/${props.calendar.id}`, { method: "DELETE" }))
-    await $fetch(`/api/calendars/${props.calendar.id}`, { method: "DELETE" })
+
-    emit("on-close")
+  if (error) {
+    toast({
+      title: error.message,
+      variant: "destructive"
+    })
+    isLoading.value = false
+    return
+  }
 
   toast({
     title: t("entity.calendar.deletedToast.title", { calendar: props.calendar.name }),
     variant: "success",
     duration: ToastLifetime.SHORT
   })
-  } catch (err) {
+
-    console.log(err)
+  emit("on-close")
-    if (err instanceof Error) {
-      toast({
-        title: err.message,
-        variant: "destructive"
-      })
-    }
-  } finally {
   isLoading.value = false
-  }
 }
 
 /**

components/calendar/event/Details.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
-import type { RPGDate } from "@/models/Date"
+import type { RPGDate } from "~/models/Date"
-import type { CalendarEvent } from "@/models/CalendarEvent"
+import type { CalendarEvent } from "~/models/CalendarEvent"
-import { useCalendar } from "@/stores/CalendarStore"
+import { useCalendar } from "~/stores/CalendarStore"
 
 import {
   PhHourglassMedium,

components/calendar/event/Event.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
-import type { RPGDate } from "@/models/Date"
+import type { RPGDate } from "~/models/Date"
 import type { CalendarEvent } from "~/models/CalendarEvent"
 
 const props = defineProps<{
@@ -75,7 +75,7 @@ onMounted(() => {
       </button>
     </UiPopoverTrigger>
 
-    <LazyCalendarEventDetails
+    <CalendarEventDetails
       :event
       :spans-multiple-days
       :is-start-event

components/calendar/form/Create.vue

@@ -2,7 +2,11 @@
 import type { Calendar } from "~/models/CalendarConfig";
 import { PhAlarm, PhCalendarDots, PhCircleNotch, PhWrench } from "@phosphor-icons/vue";
 
-const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: [], state: "draft", color: "white" }
+const props = defineProps<{
+  worldId: number
+}>()
+
+const defaultSkeleton: Calendar = { name: "", today: { day: 1, month: 0, year: 0 }, months: [], events: [], categories: [], state: "draft", color: "white" }
 const calendarSkeleton = ref<Calendar>({ ...defaultSkeleton })
 
 onMounted(() => {
@@ -38,16 +42,18 @@ const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeleton
 const isCreatingCalendar = ref<boolean>(false)
 
 async function handleSubmit() {
-  try {
   isCreatingCalendar.value = true
-    await $fetch("/api/calendars/create", { method: "POST", body: { ...calendarSkeleton.value, worldId: 1 } })
+
+  const { error } = await tryCatch($fetch("/api/calendars/create", { method: "POST", body: { ...calendarSkeleton.value, worldId: props.worldId } }))
+
+  if (error) {
+    console.log(error.message)
+    isCreatingCalendar.value = false
+    return
+  }
 
   emit("on-close")
-  } catch (err) {
-    console.log(err)
-  } finally {
   isCreatingCalendar.value = false
-  }
 }
 
 /**

components/calendar/form/CreateEvent.vue

@@ -29,17 +29,16 @@ async function handleSubmit() {
 
   isLoading.value = true
 
-  try {
+  const { error } = await tryCatch(submitSkeleton())
-    await submitSkeleton()
+
+  if (error) {
+    formErrors.message = error.message
+    isLoading.value = false
+    return
+  }
 
   emit("event-created")
-  } catch (err) {
-    if (err instanceof Error) {
-      formErrors.message = err.message
-    }
-  } finally {
   isLoading.value = false
-  }
 }
 
 /**

components/calendar/form/DeleteCategory.vue

@@ -22,21 +22,20 @@ async function handleAction(): Promise<void> {
 
   const categoryName = categorySkeleton.value?.name
 
-  try {
+  const { error } = await tryCatch(deleteCategoryFromSkeleton())
-    await deleteCategoryFromSkeleton()
+
+  if (error) {
+    formErrors.message = error.message
+    isLoading.value = false
+    return
+  }
 
   toast({
     title: t("entity.category.deletedToast.title", { category: categoryName }),
     variant: "success",
     duration: ToastLifetime.MEDIUM
   })
-  } catch (err) {
-    if (err instanceof Error) {
-      formErrors.message = err.message
-    }
-  } finally {
   isLoading.value = false
-  }
 }
 
 /**

components/calendar/form/DeleteEvent.vue

@@ -22,8 +22,13 @@ async function handleAction(): Promise<void> {
 
   const eventTitle = eventSkeleton.value.title
 
-  try {
+  const { error } = await tryCatch(deleteEventFromSkeleton())
-    await deleteEventFromSkeleton()
+
+  if (error) {
+    formErrors.message = error.message
+    isLoading.value = false
+    return
+  }
 
   isDeleteEventModalOpen.value = false
   resetSkeleton()
@@ -33,13 +38,7 @@ async function handleAction(): Promise<void> {
     variant: "success",
     duration: ToastLifetime.MEDIUM
   })
-  } catch (err) {
-    if (err instanceof Error) {
-      formErrors.message = err.message
-    }
-  } finally {
   isLoading.value = false
-  }
 }
 
 /**

components/calendar/form/Update.vue

@@ -34,16 +34,20 @@ const validSkeleton = computed(() => validSkeletonGeneral.value && validSkeleton
 const isUpdatingCalendar = ref<boolean>(false)
 
 async function handleSubmit() {
-  try {
   isUpdatingCalendar.value = true
-    await $fetch(`/api/calendars/${calendarSkeleton.value.id}`, { method: "PATCH", body: { ...calendarSkeleton.value, worldId: props.world?.id } })
+
+  const { error } = await tryCatch(
+    $fetch(`/api/calendars/${calendarSkeleton.value.id}`, { method: "PATCH", body: { ...calendarSkeleton.value, worldId: props.world?.id } })
+  )
+
+  if (error) {
+    console.log(error.message)
+    isUpdatingCalendar.value = false
+    return
+  }
 
   emit("on-close")
-  } catch (err) {
-    console.log(err)
-  } finally {
   isUpdatingCalendar.value = false
-  }
 }
 
 /**

components/calendar/form/UpdateEvent.vue

@@ -23,19 +23,11 @@ async function handleAction() {
 
   isLoading.value = true
 
-  try {
+  const { error } = await tryCatch(updateEventFromSkeleton())
-    await updateEventFromSkeleton()
 
-    emit("event-updated")
+  if (error) {
-
-    toast({
-      title: t("entity.calendar.event.updatedToast.title", { event: eventSkeleton.value.title }),
-      variant: "success",
-      duration: ToastLifetime.SHORT
-    })
-  } catch (err) {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const apiError = (err as any).data as APIError
+    const apiError = (error as any).data as APIError
 
     apiError.data.errors.forEach((error) => {
       toast({
@@ -45,10 +37,21 @@ async function handleAction() {
         duration: ToastLifetime.MEDIUM,
       })
     })
-  } finally {
+
-    resetSkeleton()
     isLoading.value = false
+    return
   }
+
+  emit("event-updated")
+
+  toast({
+    title: t("entity.calendar.event.updatedToast.title", { event: eventSkeleton.value.title }),
+    variant: "success",
+    duration: ToastLifetime.SHORT
+  })
+
+  isLoading.value = false
+  resetSkeleton()
 }
 
 /**

components/calendar/input/EventCategories.vue

@@ -50,7 +50,7 @@ const filteredCategories = computed(() =>
           </ul>
         </template>
 
-        <PhCaretDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <PhCaretDown class="ml-2 size-4 shrink-0 opacity-50" />
       </UiButton>
     </UiPopoverTrigger>
     <UiPopoverContent

components/calendar/input/EventCategory.vue

@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { PhCaretDown } from "@phosphor-icons/vue";
+import { cn } from "~/lib/utils";
 import type { Category } from "~/models/Category";
 
 const isPopoverOpen = ref<boolean>(false)
@@ -39,10 +40,15 @@ const filteredCategories = computed(() =>
           {{ props.placeholder }}
         </template>
         <template v-else>
-          {{ model.name }}
+          <span
+            class="bgc"
+            :class="cn(`element-${model.color}`)"
+          >
+            {{ capitalize(model.name) }}
+          </span>
         </template>
 
-        <PhCaretDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        <PhCaretDown class="ml-2 size-4 shrink-0 opacity-50" />
       </UiButton>
     </UiPopoverTrigger>
     <UiPopoverContent
@@ -51,7 +57,7 @@ const filteredCategories = computed(() =>
       :collision-padding="50"
       class="w-fit h-[33vh] p-0"
     >
-      <UiCommand v-model="model" v-model:searchTerm="searchTerm">
+      <UiCommand v-model="model" v-model:search-term="searchTerm">
         <UiCommandInput :placeholder="$t('entity.category.search')" />
         <UiCommandEmpty>{{ $t('entity.category.notFoundAny') }}</UiCommandEmpty>
         <UiCommandList>
@@ -63,7 +69,12 @@ const filteredCategories = computed(() =>
               class="cursor-pointer"
               @select="handleCatSelect"
             >
-              {{ category.name }}
+              <span
+                class="bgc"
+                :class="cn(`element-${category.color}`)"
+              >
+                {{ capitalize(category.name) }}
+              </span>
             </UiCommandItem>
           </UiCommandGroup>
         </UiCommandList>

components/calendar/input/MonthList.vue

@@ -91,7 +91,7 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
       />
     </div>
     <div class="md:col-span-1">
-      <UiButton size="icon" class="rounded-full h-8 w-8" :disabled="!validNewMonth" @click.prevent="addMonthToModel">
+      <UiButton size="icon" class="rounded-full size-8" :disabled="!validNewMonth" @click.prevent="addMonthToModel">
         <PhPlus size="17"/>
       </UiButton>
     </div>
@@ -103,7 +103,7 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
           <div v-if="model.length" class="hidden md:block col-span-1">
             <ul class="grid gap-y-4 justify-center">
               <li v-for="(m, i) in model" :key="`num-${m.name}`">
-                <UiButton size="icon" variant="secondary" class="h-8 w-8 rounded-full">
+                <UiButton size="icon" variant="secondary" class="size-8 rounded-full">
                   <span class="font-bold text-sm">{{ i + 1 }}</span>
                 </UiButton>
               </li>
@@ -115,7 +115,7 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
               <template v-if="model.length">
                 <li v-for="(m, i) in model" :key="m.name" class="grid md:grid-cols-12 gap-4 md:items-center text-slate-900 bg-slate-200 rounded-md">
                   <div class="md:col-span-1 text-right duration-200 ease-out transition transform origin-top-right">
-                    <UiButton type="button" variant="ghost" size="icon" class="handle rounded-full h-8 w-8">
+                    <UiButton type="button" variant="ghost" size="icon" class="handle rounded-full size-8">
                       <PhList size="17" />
                     </UiButton>
                   </div>
@@ -145,7 +145,7 @@ useSortable(monthSortableList, model.value, { animation: 150, handle: ".handle"
                     <UiTooltipProvider>
                       <UiTooltip>
                         <UiTooltipTrigger as-child>
-                          <UiButton type="button" variant="ghost" size="icon" class="rounded-full h-8 w-8" @click="removeMonthFromModel(i)">
+                          <UiButton type="button" variant="ghost" size="icon" class="rounded-full size-8" @click="removeMonthFromModel(i)">
                             <PhTrash size="17" />
                           </UiButton>
                         </UiTooltipTrigger>

components/calendar/menu/Menu.vue

@@ -1,21 +1,21 @@
 <script lang="ts" setup>
-import { useCalendar } from "@/stores/CalendarStore"
+import { useCalendar } from "~/stores/CalendarStore"
 
 import { PhMagnifyingGlass } from "@phosphor-icons/vue"
 
-const { revealAdvancedSearch } = useCalendar()
+const { revealAdvancedSearch, } = useCalendar()
-const { isReadOnly } = storeToRefs(useCalendar())
+const { isReadOnly, defaultDate } = storeToRefs(useCalendar())
 </script>
 
 <template>
   <header class="mt-2 grid gap-4 border-border border-b-[1px]">
     <div class="px-8 flex items-center justify-between gap-2">
       <menu class="flex items-center gap-2">
-        <li v-if="!isReadOnly">
+        <li>
-          <LazyCalendarDialogQuickCreateEvent />
+          <LazyCalendarDialogQuickCreateEvent v-if="!isReadOnly" />
         </li>
         <li>
-          <CalendarMenuToday />
+          <LazyCalendarMenuToday v-if="defaultDate" />
         </li>
         <li class="ml-4">
           <CalendarCurrentDate />

components/calendar/search/CalendarSearch.vue

@@ -2,13 +2,13 @@
 import {
   isCharacter,
   type Character,
-} from "@/models/Characters"
+} from "~/models/Characters"
-import type { RPGDateOrder } from "@/models/Date"
+import type { RPGDateOrder } from "~/models/Date"
 import {
   isCalendarEvent,
   type CalendarEvent,
 } from "~/models/CalendarEvent"
-import { capitalize } from "@/utils/Strings"
+import { capitalize } from "~/utils/Strings"
 import { useMagicKeys, useScroll, useStorage, whenever } from "@vueuse/core"
 import { computed, ref, watch } from "vue"
 import { searchUnifier, type SearchMode } from "../SearchMode"
@@ -25,6 +25,7 @@ import {
 
 import SearchList from "./lists/SearchList.vue"
 import type { Category } from "~/models/Category"
+import { cn } from "~/lib/utils"
 
 const { isAdvancedSearchOpen, allEvents, categories } = storeToRefs(useCalendar())
 const { characters } = storeToRefs(useCharacters())
@@ -264,9 +265,9 @@ function handleCategoryUnselect(e: Category) {
 <template>
   <UiDialog v-model:open="isAdvancedSearchOpen" @update:open="resetSearch()">
     <UiDialogContent
-      class="flex flex-col flex-nowrap top-16 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
+      class="flex flex-col flex-nowrap top-10 -translate-y-0 data-[state=closed]:slide-out-to-top-[5%] data-[state=open]:slide-in-from-top-[5%]"
       :class="{
-        'bottom-16': searchResults.length > 0
+        'bottom-10': searchResults.length > 0
       }"
     >
       <VisuallyHidden>
@@ -316,8 +317,14 @@ function handleCategoryUnselect(e: Category) {
           <div class="grow flex justify-end items-center gap-1">
             <UiTagsInput class="grow px-0 gap-y-1 w-80">
               <div v-if="selectedCategories.length > 0" class="flex gap-2 flex-wrap items-center px-3">
-                <UiTagsInputItem v-for="item in selectedCategories" :key="item.id" :value="item.name">
+                <UiTagsInputItem v-for="cat in selectedCategories" :key="cat.id" :value="cat.name">
-                  <UiTagsInputItemText class="capitalize cursor-pointer" @click="handleCategoryUnselect(item)" />
+                  <button
+                    class="bgc px-2 capitalize cursor-pointer"
+                    :class="cn(`element-${cat.color}`)"
+                    @click="handleCategoryUnselect(cat)"
+                  >
+                    {{ capitalize(cat.name) }}
+                  </button>
                 </UiTagsInputItem>
               </div>
 
@@ -355,8 +362,13 @@ function handleCategoryUnselect(e: Category) {
                         :key="cat.name"
                         :value="cat"
                         @select.prevent="handleCategorySelect(cat)"
+                      >
+                        <span
+                          class="bgc"
+                          :class="cn(`element-${cat.color}`)"
                         >
                           {{ capitalize(cat.name) }}
+                        </span>
                       </UiCommandItem>
                     </UiCommandGroup>
                   </UiCommandList>
@@ -401,7 +413,7 @@ function handleCategoryUnselect(e: Category) {
         </div>
       </div>
 
-      <hr >
+      <hr>
 
       <div v-if="searchResults.length > 0" ref="searchResultsRef" class="grow overflow-y-auto">
         <SearchList

components/calendar/search/lists/CharacterCallout.vue

@@ -1,10 +1,10 @@
 <script lang="ts" setup>
-import type { Character } from "@/models/Characters"
+import type { Character } from "~/models/Characters"
-import type { RPGDate } from "@/models/Date"
+import type { RPGDate } from "~/models/Date"
-import { useCalendar } from "@/stores/CalendarStore"
+import { useCalendar } from "~/stores/CalendarStore"
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "@/components/ui/tooltip"
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "~/components/ui/tooltip"
-import { Button } from "@/components/ui/button"
+import { Button } from "~/components/ui/button"
 import { PhArrowSquareOut, PhPlant, PhSkull } from "@phosphor-icons/vue"
 
 const props = defineProps<{

components/calendar/search/lists/EventCallout.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
-import type { RPGDate } from "@/models/Date"
+import type { RPGDate } from "~/models/Date"
-import type { CalendarEvent } from "@/models/CalendarEvent"
+import type { CalendarEvent } from "~/models/CalendarEvent"
 
 import { PhArrowSquareOut, PhHourglassMedium, PhAlarm, PhMapPinArea, PhEye } from "@phosphor-icons/vue"
 

components/calendar/search/lists/SearchList.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import { isCharacter, type Character } from "@/models/Characters"
+import { isCharacter, type Character } from "~/models/Characters"
-import type { RPGDate, RPGDateOrder } from "@/models/Date"
+import type { RPGDate, RPGDateOrder } from "~/models/Date"
-import { useCalendar } from "@/stores/CalendarStore"
+import { useCalendar } from "~/stores/CalendarStore"
 import { computed } from "vue"
 import { isCalendarEvent, type CalendarEvent } from "~/models/CalendarEvent"
 import type { SearchMode } from "../../SearchMode"

components/calendar/state/monthly/DayTile.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { RPGDate } from "@/models/Date"
+import type { RPGDate } from "~/models/Date"
-import type { CalendarEvent } from "@/models/CalendarEvent"
+import type { CalendarEvent } from "~/models/CalendarEvent"
 import { useElementBounding } from "@vueuse/core"
 import { storeToRefs } from "pinia"
 import { computed, ref, type ComputedRef } from "vue"

components/calendar/state/monthly/Layout.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useCalendar } from "@/stores/CalendarStore"
+import { useCalendar } from "~/stores/CalendarStore"
 import { useThrottleFn } from "@vueuse/core"
 
 const { currentDate, decrementViewMonth, incrementViewMonth } = useCalendar()

components/calendar/state/yearly/DayTile.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import type { RPGDate } from "@/models/Date"
+import type { RPGDate } from "~/models/Date"
 import { storeToRefs } from "pinia"
 import { computed, type ComputedRef } from "vue"
 

components/calendar/state/yearly/Layout.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { useCalendar } from "@/stores/CalendarStore"
+import { useCalendar } from "~/stores/CalendarStore"
 import { useThrottleFn } from "@vueuse/core"
 
 const { decrementViewYear, incrementViewYear } = useCalendar()

components/global/input/Color.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { cn } from "@/lib/utils";
+import { cn } from "~/lib/utils";
 import { type RPGColor, rpgColors } from "~/models/Color";
 
 const { id, theme = "normal", position = "popper" } = defineProps<{

components/global/user/CTA.vue

@@ -21,8 +21,7 @@ function closeMenu() {
 watch(user, closeMenu)
 
 async function handleGoogleLogin() {
-  try {
+  const { error } = await auth.signInWithOAuth({
-    auth.signInWithOAuth({
     provider: "google",
     options: {
       queryParams: {
@@ -32,18 +31,17 @@ async function handleGoogleLogin() {
       redirectTo: profileUrl
     }
   })
-  } catch (err) {
+
-    console.log(err)
+  if (error) {
+    console.log(error.message)
   }
 }
 
 async function handleLogout() {
-  try {
   const { error } = await auth.signOut()
 
-    if (error) throw error
+  if (error) {
-  } catch (err) {
+    console.log(error.message)
-    console.log(err)
   }
 }
 

components/ui/alert-dialog/AlertDialogAction.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { AlertDialogAction, type AlertDialogActionProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
-import { buttonVariants } from "@/components/ui/button/index"
+import { buttonVariants } from "~/components/ui/button/index"
 
 const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { AlertDialogCancel, type AlertDialogCancelProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
-import { buttonVariants } from "@/components/ui/button/index"
+import { buttonVariants } from "~/components/ui/button/index"
 
 const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/alert-dialog/AlertDialogContent.vue

@@ -8,7 +8,7 @@ import {
   AlertDialogPortal,
   useForwardPropsEmits,
 } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<AlertDialogContentEmits>()

components/ui/alert-dialog/AlertDialogDescription.vue

@@ -4,7 +4,7 @@ import {
   AlertDialogDescription,
   type AlertDialogDescriptionProps,
 } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/alert-dialog/AlertDialogHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { AlertDialogTitle, type AlertDialogTitleProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/avatar/Avatar.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from "vue"
 import { AvatarRoot } from "radix-vue"
 import { type AvatarVariants, avatarVariant } from "."
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = withDefaults(defineProps<{
   class?: HTMLAttributes["class"]

components/ui/badge/Badge.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
 import { type BadgeVariants, badgeVariants } from "."
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   variant?: BadgeVariants["variant"]

components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
-import { MoreHorizontal } from "lucide-vue-next"
+import { PhArrowsHorizontal } from "@phosphor-icons/vue";
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]
@@ -15,7 +15,7 @@ const props = defineProps<{
     :class="cn('flex h-9 w-9 items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontal class="h-4 w-4" />
+      <PhArrowsHorizontal class="size-4" />
     </slot>
     <span class="sr-only">More</span>
   </span>

components/ui/breadcrumb/BreadcrumbItem.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/breadcrumb/BreadcrumbLink.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { PrimitiveProps } from "radix-vue"
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 import { Primitive } from "radix-vue"
 
 const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
@@ -13,7 +13,7 @@ const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes
   <Primitive
     :as="as"
     :as-child="asChild"
-    :class="cn('transition-colors hover:text-foreground', props.class)"
+    :class="cn('transition-colors rounded-[1px] hover:text-primary focus-visible:text-primary underline-offset-4 hover:underline focus-visible:underline focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-4', props.class)"
   >
     <slot />
   </Primitive>

components/ui/breadcrumb/BreadcrumbList.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/breadcrumb/BreadcrumbPage.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
-import { ChevronRight } from "lucide-vue-next"
+import { PhCaretRight } from "@phosphor-icons/vue";
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]
@@ -15,7 +15,7 @@ const props = defineProps<{
     :class="cn('[&>svg]:w-3 [&>svg]:h-3', props.class)"
   >
     <slot>
-      <ChevronRight />
+      <PhCaretRight />
     </slot>
   </li>
 </template>

components/ui/button/Button.vue

@@ -2,7 +2,7 @@
 import type { HTMLAttributes } from "vue"
 import { Primitive, type PrimitiveProps } from "radix-vue"
 import { type ButtonVariants, buttonVariants } from "."
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 interface Props extends PrimitiveProps {
   variant?: ButtonVariants["variant"]

components/ui/card/Card.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]
@@ -25,11 +25,11 @@ const emit = defineEmits(["on-click"])
     <NuxtLink
       v-if="props.link"
       :to="props.link"
-      class="absolute inset-0 z-10 focus-visible:outline-hidden"
+      class="absolute inset-0 z-10 focus-visible:outline-hidden cursor-pointer"
     />
     <button
       v-if="props.hasClick"
-      class="absolute inset-0 z-10 focus-visible:outline-hidden"
+      class="absolute inset-0 z-10 focus-visible:outline-hidden cursor-pointer"
       @click="emit('on-click')" />
   </div>
 </template>

components/ui/card/CardContent.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/card/CardDescription.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/card/CardFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]
@@ -8,7 +8,7 @@ const props = defineProps<{
 </script>
 
 <template>
-  <div :class="cn('flex items-center p-6 border-t-2 border-t-slate-900', props.class)">
+  <div :class="cn('flex items-center p-6 border-t-2 border-t-border', props.class)">
     <slot />
   </div>
 </template>

components/ui/card/CardHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/card/CardTitle.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/checkbox/Checkbox.vue

@@ -2,8 +2,8 @@
 import { type HTMLAttributes, computed } from "vue"
 import type { CheckboxRootEmits, CheckboxRootProps } from "radix-vue"
 import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from "radix-vue"
-import { Check } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCheck } from "@phosphor-icons/vue";
 
 const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<CheckboxRootEmits>()
@@ -21,12 +21,12 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <CheckboxRoot
     v-bind="forwarded"
     :class="
-      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+      cn('peer size-4 shrink-0 rounded-sm border border-primary ring-offset-background focus-visible:outline-hidden focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
          props.class)"
   >
     <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
       <slot>
-        <Check class="h-4 w-4" />
+        <PhCheck class="size-4" />
       </slot>
     </CheckboxIndicator>
   </CheckboxRoot>

components/ui/command/Command.vue

@@ -2,7 +2,7 @@
 import { type HTMLAttributes, computed } from "vue"
 import type { ComboboxRootEmits, ComboboxRootProps } from "radix-vue"
 import { ComboboxRoot, useForwardPropsEmits } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes["class"] }>(), {
   open: true,

components/ui/command/CommandDialog.vue

@@ -2,7 +2,7 @@
 import { useForwardPropsEmits } from "radix-vue"
 import type { DialogRootEmits, DialogRootProps } from "radix-vue"
 import Command from "./Command.vue"
-import { Dialog, DialogContent } from "@/components/ui/dialog"
+import { Dialog, DialogContent } from "~/components/ui/dialog"
 
 const props = defineProps<DialogRootProps>()
 const emits = defineEmits<DialogRootEmits>()

components/ui/command/CommandEmpty.vue

@@ -2,7 +2,7 @@
 import { type HTMLAttributes, computed } from "vue"
 import type { ComboboxEmptyProps } from "radix-vue"
 import { ComboboxEmpty } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/command/CommandGroup.vue

@@ -2,7 +2,7 @@
 import { type HTMLAttributes, computed } from "vue"
 import type { ComboboxGroupProps } from "radix-vue"
 import { ComboboxGroup, ComboboxLabel } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<
   ComboboxGroupProps & {

components/ui/command/CommandInput.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
-import { Search } from "lucide-vue-next"
 import { ComboboxInput, type ComboboxInputProps, useForwardProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
+import { PhMagnifyingGlass } from "@phosphor-icons/vue"
 
 defineOptions({
   inheritAttrs: false
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps)
 
 <template>
   <div class="flex items-center border-b px-3" cmdk-input-wrapper>
-    <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <PhMagnifyingGlass class="mr-2 size-4 shrink-0 opacity-50" />
     <ComboboxInput
       v-bind="{ ...forwardedProps, ...$attrs }"
       auto-focus

components/ui/command/CommandItem.vue

@@ -2,7 +2,7 @@
 import { type HTMLAttributes, computed } from "vue"
 import type { ComboboxItemEmits, ComboboxItemProps } from "radix-vue"
 import { ComboboxItem, useForwardPropsEmits } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<ComboboxItemEmits>()

components/ui/command/CommandList.vue

@@ -2,7 +2,7 @@
 import { type HTMLAttributes, computed } from "vue"
 import type { ComboboxContentEmits, ComboboxContentProps } from "radix-vue"
 import { ComboboxContent, useForwardPropsEmits } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = withDefaults(
   defineProps<ComboboxContentProps & { class?: HTMLAttributes["class"] }>(),

components/ui/command/CommandSeparator.vue

@@ -2,7 +2,7 @@
 import { type HTMLAttributes, computed } from "vue"
 import type { ComboboxSeparatorProps } from "radix-vue"
 import { ComboboxSeparator } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/command/CommandShortcut.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/dialog/DialogContent.vue

@@ -9,8 +9,8 @@ import {
   DialogPortal,
   useForwardPropsEmits
 } from "radix-vue"
-import { X } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhX } from "@phosphor-icons/vue";
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DialogContentEmits>()
@@ -43,7 +43,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       <DialogClose
         class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
       >
-        <X class="w-4 h-4" />
+        <PhX class="w-4 h-4" />
         <span class="sr-only">Close</span>
       </DialogClose>
     </DialogContent>

components/ui/dialog/DialogDescription.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { DialogDescription, type DialogDescriptionProps, useForwardProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/dialog/DialogFooter.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{ class?: HTMLAttributes["class"] }>()
 </script>

components/ui/dialog/DialogHeader.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/dialog/DialogScrollContent.vue

@@ -9,8 +9,8 @@ import {
   DialogPortal,
   useForwardPropsEmits
 } from "radix-vue"
-import { X } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhX } from "@phosphor-icons/vue";
 
 const props = defineProps<DialogContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DialogContentEmits>()
@@ -55,7 +55,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         <DialogClose
           class="absolute top-3 right-3 p-0.5 transition-colors rounded-md hover:bg-secondary"
         >
-          <X class="w-4 h-4" />
+          <PhX class="w-4 h-4" />
           <span class="sr-only">Close</span>
         </DialogClose>
       </DialogContent>

components/ui/dialog/DialogTitle.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { DialogTitle, type DialogTitleProps, useForwardProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<DialogTitleProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -7,8 +7,8 @@ import {
   DropdownMenuItemIndicator,
   useForwardPropsEmits
 } from "radix-vue"
-import { Check } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCheck } from "@phosphor-icons/vue";
 
 const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
@@ -34,7 +34,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   >
     <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Check class="w-4 h-4" />
+        <PhCheck class="size-4" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />

components/ui/dropdown-menu/DropdownMenuContent.vue

@@ -7,7 +7,7 @@ import {
   DropdownMenuPortal,
   useForwardPropsEmits
 } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = withDefaults(
   defineProps<DropdownMenuContentProps & { class?: HTMLAttributes["class"] }>(),

components/ui/dropdown-menu/DropdownMenuItem.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<
   DropdownMenuItemProps & { class?: HTMLAttributes["class"]; inset?: boolean }

components/ui/dropdown-menu/DropdownMenuLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<
   DropdownMenuLabelProps & { class?: HTMLAttributes["class"]; inset?: boolean }

components/ui/dropdown-menu/DropdownMenuRadioItem.vue

@@ -7,8 +7,8 @@ import {
   type DropdownMenuRadioItemProps,
   useForwardPropsEmits
 } from "radix-vue"
-import { Circle } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCircle } from "@phosphor-icons/vue";
 
 const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes["class"] }>()
 
@@ -33,9 +33,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <DropdownMenuItemIndicator>
-        <Circle class="h-2 w-2 fill-current" />
+        <PhCircle class="size-2 text-current" />
       </DropdownMenuItemIndicator>
     </span>
     <slot />

components/ui/dropdown-menu/DropdownMenuSeparator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { DropdownMenuSeparator, type DropdownMenuSeparatorProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<
   DropdownMenuSeparatorProps & {

components/ui/dropdown-menu/DropdownMenuShortcut.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/dropdown-menu/DropdownMenuSubContent.vue

@@ -6,7 +6,7 @@ import {
   type DropdownMenuSubContentProps,
   useForwardPropsEmits
 } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes["class"] }>()
 const emits = defineEmits<DropdownMenuSubContentEmits>()

components/ui/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -5,7 +5,7 @@ import {
   type DropdownMenuSubTriggerProps,
   useForwardProps
 } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 import { PhCaretLeft, PhCaretRight } from "@phosphor-icons/vue";
 
 const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes["class"], arrowDirection?: "left" | "right" }>()
@@ -30,7 +30,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     "
   >
     <template v-if="props.arrowDirection === 'left'">
-      <PhCaretLeft class="mr-auto h-4 w-4" />
+      <PhCaretLeft class="mr-auto size-4" />
 
       <span class="inline-block">
         <slot />
@@ -39,7 +39,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     <template v-else>
       <slot />
 
-      <PhCaretRight class="ml-auto h-4 w-4" />
+      <PhCaretRight class="ml-auto size-4" />
     </template>
   </DropdownMenuSubTrigger>
 </template>

components/ui/input/Input.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
 import { useVModel } from "@vueuse/core"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   defaultValue?: string | number

components/ui/label/Label.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { Label, type LabelProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<LabelProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/pagination/PaginationEllipsis.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationEllipsis, type PaginationEllipsisProps } from "radix-vue"
-import { MoreHorizontal } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhArrowsHorizontal } from "@phosphor-icons/vue";
 
 const props = defineProps<PaginationEllipsisProps & { class?: HTMLAttributes["class"] }>()
 
@@ -16,10 +16,10 @@ const delegatedProps = computed(() => {
 <template>
   <PaginationEllipsis
     v-bind="delegatedProps"
-    :class="cn('w-9 h-9 flex items-center justify-center', props.class)"
+    :class="cn('size-9 flex items-center justify-center', props.class)"
   >
     <slot>
-      <MoreHorizontal />
+      <PhArrowsHorizontal />
     </slot>
   </PaginationEllipsis>
 </template>

components/ui/pagination/PaginationFirst.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationFirst, type PaginationFirstProps } from "radix-vue"
-import { ChevronsLeft } from "lucide-vue-next"
+import { Button } from "~/components/ui/button"
-import { Button } from "@/components/ui/button"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCaretDoubleLeft } from "@phosphor-icons/vue"
 
 const props = withDefaults(
   defineProps<PaginationFirstProps & { class?: HTMLAttributes["class"] }>(),
@@ -23,7 +23,7 @@ const delegatedProps = computed(() => {
   <PaginationFirst v-bind="delegatedProps">
     <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronsLeft class="h-4 w-4" />
+        <PhCaretDoubleLeft class="size-4" />
       </slot>
     </Button>
   </PaginationFirst>

components/ui/pagination/PaginationLast.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationLast, type PaginationLastProps } from "radix-vue"
-import { ChevronsRight } from "lucide-vue-next"
+import { Button } from "~/components/ui/button"
-import { Button } from "@/components/ui/button"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCaretDoubleRight } from "@phosphor-icons/vue"
 
 const props = withDefaults(
   defineProps<PaginationLastProps & { class?: HTMLAttributes["class"] }>(),
@@ -21,9 +21,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationLast v-bind="delegatedProps">
-    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronsRight class="h-4 w-4" />
+        <PhCaretDoubleRight class="size-4" />
       </slot>
     </Button>
   </PaginationLast>

components/ui/pagination/PaginationNext.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationNext, type PaginationNextProps } from "radix-vue"
-import { ChevronRight } from "lucide-vue-next"
+import { Button } from "~/components/ui/button"
-import { Button } from "@/components/ui/button"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCaretRight } from "@phosphor-icons/vue"
 
 const props = withDefaults(
   defineProps<PaginationNextProps & { class?: HTMLAttributes["class"] }>(),
@@ -21,9 +21,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationNext v-bind="delegatedProps">
-    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronRight class="h-4 w-4" />
+        <PhCaretRight class="size-4" />
       </slot>
     </Button>
   </PaginationNext>

components/ui/pagination/PaginationPrev.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { PaginationPrev, type PaginationPrevProps } from "radix-vue"
-import { ChevronLeft } from "lucide-vue-next"
+import { Button } from "~/components/ui/button"
-import { Button } from "@/components/ui/button"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCaretLeft } from "@phosphor-icons/vue"
 
 const props = withDefaults(
   defineProps<PaginationPrevProps & { class?: HTMLAttributes["class"] }>(),
@@ -21,9 +21,9 @@ const delegatedProps = computed(() => {
 
 <template>
   <PaginationPrev v-bind="delegatedProps">
-    <Button :class="cn('w-10 h-10 p-0', props.class)" variant="outline">
+    <Button :class="cn('size-10 p-0', props.class)" variant="outline">
       <slot>
-        <ChevronLeft class="h-4 w-4" />
+        <PhCaretLeft class="size-4" />
       </slot>
     </Button>
   </PaginationPrev>

components/ui/popover/PopoverContent.vue

@@ -7,7 +7,7 @@ import {
   PopoverPortal,
   useForwardPropsEmits
 } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 defineOptions({
   inheritAttrs: false

components/ui/progress/Progress.vue

@@ -5,7 +5,7 @@ import {
   ProgressRoot,
   type ProgressRootProps,
 } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = withDefaults(
   defineProps<ProgressRootProps & { class?: HTMLAttributes["class"] }>(),

components/ui/select/SelectContent.vue

@@ -9,7 +9,7 @@ import {
   useForwardPropsEmits
 } from "radix-vue"
 import { SelectScrollDownButton, SelectScrollUpButton } from "."
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 defineOptions({
   inheritAttrs: false

components/ui/select/SelectGroup.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { SelectGroup, type SelectGroupProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<SelectGroupProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/select/SelectItem.vue

@@ -7,8 +7,8 @@ import {
   SelectItemText,
   useForwardProps
 } from "radix-vue"
-import { Check } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCheck } from "@phosphor-icons/vue";
 
 const props = defineProps<SelectItemProps & { class?: HTMLAttributes["class"] }>()
 
@@ -31,9 +31,9 @@ const forwardedProps = useForwardProps(delegatedProps)
       )
     "
   >
-    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+    <span class="absolute left-2 flex size-3.5 items-center justify-center">
       <SelectItemIndicator>
-        <Check class="h-4 w-4" />
+        <PhCheck class="size-4" />
       </SelectItemIndicator>
     </span>
 

components/ui/select/SelectLabel.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
 import { SelectLabel, type SelectLabelProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<SelectLabelProps & { class?: HTMLAttributes["class"] }>()
 </script>

components/ui/select/SelectScrollDownButton.vue

@@ -5,8 +5,8 @@ import {
   type SelectScrollDownButtonProps,
   useForwardProps
 } from "radix-vue"
-import { ChevronDown } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCaretDown } from "@phosphor-icons/vue";
 
 const props = defineProps<SelectScrollDownButtonProps & { class?: HTMLAttributes["class"] }>()
 
@@ -25,7 +25,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <ChevronDown class="h-4 w-4" />
+      <PhCaretDown class="size-4" />
     </slot>
   </SelectScrollDownButton>
 </template>

components/ui/select/SelectScrollUpButton.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { SelectScrollUpButton, type SelectScrollUpButtonProps, useForwardProps } from "radix-vue"
-import { ChevronUp } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCaretUp } from "@phosphor-icons/vue";
 
 const props = defineProps<SelectScrollUpButtonProps & { class?: HTMLAttributes["class"] }>()
 
@@ -21,7 +21,7 @@ const forwardedProps = useForwardProps(delegatedProps)
     :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
-      <ChevronUp class="h-4 w-4" />
+      <PhCaretUp class="size-4" />
     </slot>
   </SelectScrollUpButton>
 </template>

components/ui/select/SelectSeparator.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { SelectSeparator, type SelectSeparatorProps } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<SelectSeparatorProps & { class?: HTMLAttributes["class"] }>()
 

components/ui/select/SelectTrigger.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { type HTMLAttributes, computed } from "vue"
 import { SelectIcon, SelectTrigger, type SelectTriggerProps, useForwardProps } from "radix-vue"
-import { ChevronDown } from "lucide-vue-next"
+import { cn } from "~/lib/utils"
-import { cn } from "@/lib/utils"
+import { PhCaretDown } from "@phosphor-icons/vue";
 
 const props = defineProps<SelectTriggerProps & { class?: HTMLAttributes["class"] }>()
 
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps)
   >
     <slot />
     <SelectIcon as-child>
-      <ChevronDown class="w-4 h-4 opacity-50" />
+      <PhCaretDown class="size-4 opacity-50" />
     </SelectIcon>
   </SelectTrigger>
 </template>

components/ui/skeleton/Skeleton.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 interface SkeletonProps {
   class?: HTMLAttributes["class"]

components/ui/switch/Switch.vue

@@ -7,7 +7,7 @@ import {
   SwitchThumb,
   useForwardPropsEmits,
 } from "radix-vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<SwitchRootProps & { class?: HTMLAttributes["class"] }>()
 
@@ -31,7 +31,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
     )"
   >
     <SwitchThumb
-      :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
+      :class="cn('pointer-events-none block size-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')"
     />
   </SwitchRoot>
 </template>

components/ui/table/Table.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/table/TableBody.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/table/TableCaption.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]

components/ui/table/TableCell.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { HTMLAttributes } from "vue"
-import { cn } from "@/lib/utils"
+import { cn } from "~/lib/utils"
 
 const props = defineProps<{
   class?: HTMLAttributes["class"]