Working

app/components/Modal/CreateCategory.vue

@@ -5,6 +5,7 @@ import { COLORS, CreateCategorySchema } from '~~/types/types'
 
 const emit = defineEmits(['closeModal'])
 const { createCategory } = await useCategories()
+const { refreshUserLimits, canCreateCategory } = await useUserLimits()
 const state = reactive({
   name: undefined,
   icon: undefined,
@@ -14,6 +15,12 @@ const state = reactive({
 
 async function handleCreate(event: FormSubmitEvent<CreateCategorySchemaType>) {
   await createCategory(event.data)
+  await refreshUserLimits()
+
+  if (!canCreateCategory()) {
+    useErrorToast('You have reach the limit of categories', 'Subscribe to a paid plan to create more categories')
+  }
+
   emit('closeModal')
   state.color = COLORS[0]
   state.nameVisible = true
@@ -34,7 +41,7 @@ const { loading, search } = useIcons()
           </h3>
           <UButton
             color="gray"
-            variant="soft"
+            variant="ghost"
             icon="i-heroicons-x-mark-20-solid"
             class="p-1"
             @click="$emit('closeModal')"

app/components/Modal/CreateTab.vue

@@ -8,6 +8,7 @@ const props = defineProps<{
 
 const emit = defineEmits(['closeModal'])
 const { createTab } = await useTabs()
+const { refreshUserLimits, canCreateTabInCategory } = await useUserLimits()
 const { categories } = await useCategories()
 
 const state = reactive({
@@ -24,7 +25,16 @@ watchEffect(() => {
 })
 
 async function handleCreate(event: FormSubmitEvent<CreateTabSchemaType>) {
-  await createTab(event.data)
+  await createTab({
+    primary: Boolean(event.data.primary),
+    ...event.data,
+  })
+  await refreshUserLimits()
+
+  if (!canCreateTabInCategory(state.categoryId)) {
+    useErrorToast('You have reach the limit of tabs in this category', 'Subscribe to a paid plan to create more tabs')
+  }
+
   emit('closeModal')
   state.name = undefined
   state.icon = undefined
@@ -47,7 +57,7 @@ const { loading, search } = useIcons()
           </h3>
           <UButton
             color="gray"
-            variant="soft"
+            variant="ghost"
             icon="i-heroicons-x-mark-20-solid"
             class="p-1"
             @click="$emit('closeModal')"

app/components/Modal/DeleteAccount.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+</script>
+
+<template>
+  <UModal>
+    avatar
+    Warning: This will permanently delete your account, all your categories, and all your tabs.
+    ---
+    To verify, type confirm delete account below
+    input
+    confirm
+  </UModal>
+</template>
+
+<style scoped>
+
+</style>

app/components/Modal/DeleteCategory.vue

@@ -7,9 +7,11 @@ const props = defineProps<{
 
 const emit = defineEmits(['closeModal'])
 const { deleteCategory } = await useCategories()
+const { refreshUserLimits } = await useUserLimits()
 
 async function handleDelete() {
   await deleteCategory(props.category.id)
+  await refreshUserLimits()
   emit('closeModal')
 }
 
@@ -28,7 +30,7 @@ defineShortcuts({
           </h3>
           <UButton
             color="gray"
-            variant="soft"
+            variant="ghost"
             icon="i-heroicons-x-mark-20-solid"
             class="p-1"
             @click="$emit('closeModal')"

app/components/Modal/DeleteTab.vue

@@ -7,9 +7,11 @@ const props = defineProps<{
 
 const emit = defineEmits(['closeModal'])
 const { deleteTab } = await useTabs()
+const { refreshUserLimits } = await useUserLimits()
 
 async function handleDelete() {
   await deleteTab(props.tab.id)
+  await refreshUserLimits()
   emit('closeModal')
 }
 
@@ -28,7 +30,7 @@ defineShortcuts({
           </h3>
           <UButton
             color="gray"
-            variant="soft"
+            variant="ghost"
             icon="i-heroicons-x-mark-20-solid"
             class="p-1"
             @click="$emit('closeModal')"

app/components/Modal/UpdateCategory.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { COLORS, type CategoryType, UpdateCategorySchema } from '~~/types/types'
+import type { CategoryType, UpdateCategorySchemaType } from '~~/types/types'
+import { COLORS, UpdateCategorySchema } from '~~/types/types'
 import type { FormSubmitEvent } from '#ui/types'
 
 const props = defineProps<{
@@ -24,7 +25,7 @@ watchEffect(() => {
   state.nameVisible = props.category?.nameVisible
 })
 
-async function handleUpdate(event: FormSubmitEvent<UpdateCategorySchema>) {
+async function handleUpdate(event: FormSubmitEvent<UpdateCategorySchemaType>) {
   await updateCategory({
     id: props.category!.id,
     ...event.data,
@@ -43,7 +44,7 @@ async function handleUpdate(event: FormSubmitEvent<UpdateCategorySchema>) {
           </h3>
           <UButton
             color="gray"
-            variant="soft"
+            variant="ghost"
             icon="i-heroicons-x-mark-20-solid"
             class="p-1"
             @click="$emit('closeModal')"

app/components/Modal/UpdateTab.vue

@@ -18,6 +18,7 @@ const state = reactive({
   color: COLORS[0],
   primary: undefined,
   categoryId: undefined,
+  link: undefined,
 })
 
 watchEffect(() => {
@@ -26,6 +27,7 @@ watchEffect(() => {
   state.color = props.tab?.color
   state.primary = props.tab?.primary
   state.categoryId = props.tab?.categoryId
+  state.link = props.tab?.link
 })
 
 async function handleUpdate(event: FormSubmitEvent<UpdateTabSchemaType>) {
@@ -44,11 +46,11 @@ async function handleUpdate(event: FormSubmitEvent<UpdateTabSchemaType>) {
       <template #header>
         <div class="flex items-center justify-between">
           <h3 class="text-base font-semibold leading-6 text-gray-900 dark:text-white">
-            Update category '{{ tab.name }}'
+            Update tab '{{ tab.name }}'
           </h3>
           <UButton
             color="gray"
-            variant="soft"
+            variant="ghost"
             icon="i-heroicons-x-mark-20-solid"
             class="p-1"
             @click="$emit('closeModal')"
@@ -97,6 +99,10 @@ async function handleUpdate(event: FormSubmitEvent<UpdateTabSchemaType>) {
             <USelect v-model="state.categoryId" :options="categories" option-attribute="name" value-attribute="id" />
           </UFormGroup>
 
+          <UFormGroup label="Link " name="link">
+            <UInput v-model="state.link" type="text" />
+          </UFormGroup>
+
           <UFormGroup>
             <UCheckbox v-model="state.primary" :color="state.color" label="Is the category primary?" />
           </UFormGroup>