ui: restyling navbar

pages/bookmarks.vue

@@ -9,10 +9,10 @@ const paginator = masto.bookmarks.getIterator()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:bookmark-fill h-6 mr-1 /><span>Bookmarks</span>
+      <span text-lg font-bold>Bookmarks</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />

pages/conversations.vue

@@ -9,10 +9,10 @@ const paginator = masto.conversations.getIterator()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:at-line h-6 mr-1 /><span>Conversations</span>
+      <span text-lg font-bold>Conversations</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <ConversationPaginator :paginator="paginator" />

pages/explore.vue

@@ -12,7 +12,7 @@ const paginator = masto.trends.getStatuses()
       <div i-ri:hashtag h-6 mr-1 /><span>Explore</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <!-- TODO: Tabs for trending statuses, tags, and links -->

pages/favourites.vue

@@ -9,10 +9,10 @@ const paginator = masto.favourites.getIterator()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:heart-fill h-6 mr-1 /><span>Favourites</span>
+      <span text-lg font-bold>Favourites</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />

pages/home.vue

@@ -9,10 +9,10 @@ const paginator = masto.timelines.getHomeIterable()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:home-fill h-6 mr-1 /><span>Home</span>
+      <span text-lg font-bold>Home</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />

pages/notifications.vue

@@ -14,13 +14,15 @@ const paginator = $computed(() => {
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:notification-2-fill h-6 mr-1 /><span>Notifications</span>
+      <span text-lg font-bold>Notifications</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
+    </template>
+    <template #header>
+      <CommonTabs v-model="tab" :options="tabNames" />
     </template>
     <slot>
-      <CommonTabs v-model="tab" :options="tabNames" />
       <NotificationPaginator :key="tab" :paginator="paginator" />
     </slot>
   </MainContent>

pages/public/index.vue

@@ -6,10 +6,10 @@ const paginator = masto.timelines.getPublicIterable()
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:earth-fill h-6 mr-1 /><span>Federated Timeline</span>
+  <span text-lg font-bold>Federated Timeline</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />

pages/public/local.vue

@@ -4,17 +4,16 @@ const router = useRouter()
 if (!token.value)
   router.replace('/public')
 
-
 const { data: timelines } = await useAsyncData('timelines-home', () => masto.timelines.fetchPublic({ local: true }).then(r => r.value))
 </script>
 
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:group-fill h-6 mr-1 /><span>Local timeline</span>
+      <span text-lg font-bold>Local timeline</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelineList :timelines="timelines" />

pages/tags/[tag].vue

@@ -8,10 +8,10 @@ const paginator = masto.timelines.getHashtagIterable(tag)
 <template>
   <MainContent>
     <template #title>
-      <div i-ri:hashtag h-6 mr-1 /><span>{{ tag }}</span>
+      <span text-lg font-bold>#{{ tag }}</span>
     </template>
     <template #actions>
-      <div color-gray i-ri:equalizer-fill mr-1 h-6 />
+      <div i-ri:equalizer-fill mr-1 h-6 />
     </template>
     <slot>
       <TimelinePaginator :paginator="paginator" />