working

app/components/App/Category.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import type { CategoryType } from '~~/types/types'
+
+defineProps<{
+  category: CategoryType
+  dropdownItems: { label: string, icon: string, color: string, click: (category: CategoryType) => void }[]
+}>()
+defineEmits(['createTab'])
+
+const { canCreateTabInCategory } = await useUserLimit()
+</script>
+
+<template>
+  <div v-if="category" class="flex items-center mb-4" :class="category.nameVisible ? 'justify-between' : 'justify-end'">
+    <div v-if="category.nameVisible" class="flex items-center gap-2 mb-4" :class="`text-${category.color}-500`">
+      <UIcon :name="category.icon" size="28" />
+      <h1 class="font-bold text-2xl">
+        {{ category.name }}
+      </h1>
+    </div>
+    <div class="flex gap-4">
+      <UButton
+        v-if="canCreateTabInCategory(category.id)"
+        color="gray"
+        variant="solid"
+        label="New tab"
+        icon="i-ph:plus-circle-duotone"
+        @click.prevent="$emit('createTab')"
+      />
+      <UDropdown
+        :items="dropdownItems"
+        :popper="{ placement: 'bottom-end', arrow: true }"
+        :ui="{ width: 'w-40', shadow: 'shadow-xl' }"
+      >
+        <UButton
+          color="white"
+          variant="solid"
+          icon="i-ph:dots-three-outline-vertical-duotone"
+        />
+
+        <template #item="{ item }">
+          <div class="w-full flex items-center justify-between" @click.prevent="item.click(category)">
+            <span
+              class="truncate"
+              :class="`text-${item.color}-500`"
+            >
+              {{ item.label }}
+            </span>
+            <UIcon
+              :name="item.icon"
+              class="flex-shrink-0 h-4 w-4 ms-auto"
+              :class="`text-${item.color}-500`"
+            />
+          </div>
+        </template>
+      </UDropdown>
+    </div>
+  </div>
+</template>

app/components/App/Header.vue

@@ -1,9 +1,9 @@
 <script setup lang="ts">
 const colorMode = useColorMode()
 const { user, loggedIn, clear } = useUserSession()
-
 const isSettingsOpen = ref(false)
 
+const isDark = computed(() => colorMode.preference === 'dark')
 const items = [
   [{
     slot: 'account',
@@ -13,26 +13,28 @@ const items = [
     label: 'Home',
     icon: 'i-ph:house-line-duotone',
     action: () => navigateTo('/'),
+    shortcut: 'H',
   }, {
     label: 'Settings',
     icon: 'i-ph:gear-six-duotone',
-    action: () => {
-      isSettingsOpen.value = true
-    },
+    action: () => isSettingsOpen.value = true,
+    shortcut: 'S',
   }, {
-    label: 'Profile',
-    icon: 'i-ph:person-arms-spread-duotone',
-    action: () => navigateTo('/profile'),
+    label: isDark.value ? 'Light mode' : 'Dark mode',
+    icon: isDark.value ? 'i-ph:moon-duotone' : 'i-ph:sun-duotone',
+    action: () => toggleColorMode(),
+    shortcut: 'T',
   }],
   [{
     slot: 'logout',
     label: 'Sign out',
     icon: 'i-ph:sign-out-bold',
+    shortcut: 'L',
   }],
 ]
 
 function toggleColorMode() {
-  colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
+  colorMode.preference = isDark.value ? 'light' : 'dark'
 }
 
 async function logout() {
@@ -43,6 +45,8 @@ async function logout() {
 
 defineShortcuts({
   t: () => toggleColorMode(),
+  s: () => isSettingsOpen.value = !isSettingsOpen.value,
+  l: async () => await logout(),
 })
 </script>
 
@@ -58,7 +62,13 @@ defineShortcuts({
           </h1>
           <div class="flex items-center gap-2">
             <ClientOnly>
-              <UDropdown v-if="loggedIn" :items="items" mode="hover" :ui="{ item: { disabled: 'cursor-text select-text' } }" :popper="{ placement: 'bottom-start' }">
+              <UDropdown
+                v-if="loggedIn"
+                :items="items"
+                mode="hover"
+                :ui="{ item: { disabled: 'cursor-text select-text' } }"
+                :popper="{ placement: 'bottom-end' }"
+              >
                 <UAvatar :src="user.avatar" />
 
                 <template #account>
@@ -74,26 +84,28 @@ defineShortcuts({
 
                 <template #item="{ item }">
                   <div class="w-full flex justify-between items-center" @click.prevent="item.action()">
-                    <span class="truncate">{{ item.label }}</span>
-                    <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
+                    <div class="gap-2 flex items-center">
+                      <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
+                      <span class="truncate">{{ item.label }}</span>
+                    </div>
+                    <UKbd v-if="item.shortcut">
+                      {{ item.shortcut }}
+                    </UKbd>
                   </div>
                 </template>
 
                 <template #logout="{ item }">
                   <div class="w-full flex justify-between items-center" @click="logout()">
-                    <span class="truncate">{{ item.label }}</span>
-                    <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500 ms-auto" />
+                    <div class="flex gap-2 items-center">
+                      <UIcon :name="item.icon" class="flex-shrink-0 h-4 w-4 text-gray-400 dark:text-gray-500" />
+                      <span class="truncate">{{ item.label }}</span>
+                    </div>
+                    <UKbd v-if="item.shortcut">
+                      {{ item.shortcut }}
+                    </UKbd>
                   </div>
                 </template>
               </UDropdown>
-              <UButton
-                :icon="$colorMode.preference === 'dark' ? 'i-ph:moon-duotone' : 'i-ph:sun-duotone'"
-                color="gray"
-                square
-                size="md"
-                variant="ghost"
-                @click="toggleColorMode"
-              />
             </clientonly>
           </div>
         </div>
@@ -111,10 +123,12 @@ defineShortcuts({
         </template>
 
         <template #default>
-          Hey
-          Delete account
-          Change user details
-          {{ user }}
+          <div class="space-y-12">
+            <div>
+              Delete account
+              Change user details
+            </div>
+          </div>
         </template>
       </UCard>
     </USlideover>

app/components/App/Tab.vue

@@ -5,8 +5,16 @@ defineProps<{
   tab: TabType
 }>()
 
+const { setTabPrimary } = await useTabs()
+
 // DropDown Items
 const items = [[
+  {
+    label: 'Toggle favorite',
+    icon: 'i-ph:star-duotone',
+    color: 'yellow',
+    click: tab => setTabPrimary(tab, !tab.primary),
+  },
   {
     label: 'Edit',
     icon: 'i-ph:pencil-duotone',
@@ -56,12 +64,12 @@ function openDeleteTabModal(tab: TabType) {
       <div class="flex items-center justify-between h-full">
         <div class="flex gap-4 items-center h-full">
           <UBadge :color="tab.color" class="p-2" variant="soft">
-            <UIcon :name="`i-ph:${tab.icon}`" size="32" />
+            <UIcon :name="tab.icon" size="32" />
           </UBadge>
           <div class="flex flex-col gap-1">
-            <div :class="`text-${tab.color}-400`" class="text-xl font-medium">
-              <p>{{ tab.name }}</p>
-            </div>
+            <p :class="`text-${tab.color}-400`" class="text-xl font-medium truncate">
+              {{ tab.name }}
+            </p>
           </div>
         </div>
         <UDropdown
@@ -71,8 +79,10 @@ function openDeleteTabModal(tab: TabType) {
         >
           <UButton
             color="gray"
-            variant="soft"
-            icon="i-ph:dots-three-outline-vertical-duotone"
+            variant="ghost"
+            :padded="false"
+            size="sm"
+            icon="i-ph:dots-three-outline-duotone"
           />
 
           <template #item="{ item }">