chore(app): various improvements

nuxt-ui-pro · Feb 12, 2025 · 556ee01 · 556ee01
1 parent 73d4e13
commit 556ee01
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 21 deletions.
diff --git a/app/components/home/HomeDateRangePicker.vue b/app/components/home/HomeDateRangePicker.vue
@@ -85,17 +85,19 @@ const selectRange = (range: { days?: number, months?: number, years?: number })
       icon="i-lucide-calendar"
       class="data-[state=open]:bg-(--ui-bg-elevated) group"
     >
-      <template v-if="selected.start">
-        <template v-if="selected.end">
-          {{ df.format(selected.start) }} - {{ df.format(selected.end) }}
+      <span class="truncate">
+        <template v-if="selected.start">
+          <template v-if="selected.end">
+            {{ df.format(selected.start) }} - {{ df.format(selected.end) }}
+          </template>
+          <template v-else>
+            {{ df.format(selected.start) }}
+          </template>
         </template>
         <template v-else>
-          {{ df.format(selected.start) }}
+          Pick a date
         </template>
-      </template>
-      <template v-else>
-        Pick a date
-      </template>
+      </span>
 
       <template #trailing>
         <UIcon name="i-lucide-chevron-down" class="shrink-0 text-(--ui-text-dimmed) size-5 group-data-[state=open]:rotate-180 transition-transform duration-200" />

diff --git a/app/components/home/HomeStats.vue b/app/components/home/HomeStats.vue
@@ -64,17 +64,20 @@ const { data: stats } = await useAsyncData<Stat[]>('stats', async () => {
 </script>
 
 <template>
-  <UPageGrid class="lg:grid-cols-4 gap-4 sm:gap-6">
+  <UPageGrid class="lg:grid-cols-4 gap-4 sm:gap-6 lg:gap-px">
     <UPageCard
       v-for="(stat, index) in stats"
       :key="index"
       :icon="stat.icon"
       :title="stat.title"
+      to="/contacts"
+      variant="subtle"
       :ui="{
         container: 'gap-y-1.5',
         leading: 'p-2.5 rounded-full bg-(--ui-primary)/10 ring ring-inset ring-(--ui-primary)/25',
         title: 'font-normal text-(--ui-text-muted) text-xs uppercase'
       }"
+      class="lg:rounded-none first:rounded-l-[calc(var(--ui-radius)*2)] last:rounded-r-[calc(var(--ui-radius)*2)] hover:z-1"
     >
       <div class="flex items-center gap-2">
         <span class="text-2xl font-semibold text-(--ui-text-highlighted)">

diff --git a/app/layouts/default.vue b/app/layouts/default.vue
@@ -4,23 +4,19 @@
 const toast = useToast()
 
 const links = [[{
-  id: 'home',
   label: 'Home',
-  icon: 'i-lucide-home',
+  icon: 'i-lucide-house',
   to: '/'
 }, {
-  id: 'inbox',
   label: 'Inbox',
   icon: 'i-lucide-inbox',
   to: '/inbox',
   badge: '4'
 }, {
-  id: 'users',
   label: 'Contacts',
   icon: 'i-lucide-users',
   to: '/contacts'
 }, {
-  id: 'settings',
   label: 'Settings',
   to: '/settings',
   icon: 'i-lucide-settings',
@@ -35,11 +31,7 @@ const links = [[{
   }, {
     label: 'Notifications',
     to: '/settings/notifications'
-  }],
-  tooltip: {
-    text: 'Settings',
-    shortcuts: ['G', 'S']
-  }
+  }]
 }], [{
   label: 'Feedback',
   icon: 'i-lucide-message-circle',

diff --git a/app/pages/index.vue b/app/pages/index.vue
@@ -51,7 +51,8 @@ const period = ref<Period>('daily')
 
       <UDashboardToolbar>
         <template #left>
-          <HomeDateRangePicker v-model="range" class="-ml-2.5" />
+          <!-- NOTE: The `-ml-1` class is used to align with the `DashboardSidebarCollpase` button here. -->
+          <HomeDateRangePicker v-model="range" class="-ml-1" />
 
           <HomePeriodSelect v-model="period" :range="range" />
         </template>

diff --git a/app/pages/settings.vue b/app/pages/settings.vue
@@ -35,7 +35,8 @@ const links = [[{
       </UDashboardNavbar>
 
       <UDashboardToolbar>
-        <UNavigationMenu :items="links" highlight class="-mx-2.5 flex-1" />
+        <!-- NOTE: The `-mx-1` class is used to align with the `DashboardSidebarCollpase` button here. -->
+        <UNavigationMenu :items="links" highlight class="-mx-1 flex-1" />
       </UDashboardToolbar>
     </template>