ui: restyling navbar

components/account/AccountPaginator.vue

@@ -9,7 +9,6 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t base"
   >
     <template #default="{ item }">
       <AccountCard

components/common/CommonTabs.vue

@@ -1,9 +1,11 @@
 <script setup lang="ts">
 defineProps<{
-  modelValue: string
   options: string[]
 }>()
-defineEmits(['update:modelValue'])
+
+const { modelValue } = defineModel<{
+  modelValue: string
+}>()
 
 function toValidName(otpion: string) {
   return otpion.toLowerCase().replace(/[^a-zA-Z0-9]/g, '-')
@@ -11,11 +13,27 @@ function toValidName(otpion: string) {
 </script>
 
 <template>
-  <div flex w-full>
+  <div flex w-full text-lg>
     <template v-for="option in options" :key="option">
       <input
-        :id="`tab-${toValidName(option)}`" :checked="modelValue === option" :value="option" type="radio" name="tabs" display="none" @change="$emit('update:modelValue', option)"
-      ><label flex w-full justify-center h-8 cursor-pointer :for="`tab-${toValidName(option)}`" :class="modelValue === option ? 'color-primary' : 'hover:color-purple'" tabindex="1" @keypress.enter="$emit('update:modelValue', option)">{{ option }}</label>
+        :id="`tab-${toValidName(option)}`"
+        :checked="modelValue === option"
+        :value="option"
+        type="radio"
+        name="tabs"
+        display="none"
+        @change="modelValue = option"
+      ><label
+        flex flex-1 cursor-pointer pt2 m1 rounded transition-all
+        :for="`tab-${toValidName(option)}`"
+        tabindex="1"
+        hover:bg-active
+        @keypress.enter="modelValue = option"
+      ><span
+        mxa px2
+        :class="modelValue === option ? 'font-bold border-b-3 border-primary' : 'op50 hover:op50'"
+      >{{ option }}</span>
+      </label>
     </template>
   </div>
 </template>

components/conversation/ConversationPaginator.vue

@@ -9,7 +9,6 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t base"
   >
     <template #default="{ item }">
       <ConversationCard

components/main/MainContent.vue

@@ -1,14 +1,19 @@
 <template>
   <div relative>
-    <div sticky top-0 bg="#222" z10>
-      <div flex justify-between>
-        <div p3 flex gap-1>
+    <div
+      sticky top-0 z10
+      border="b base"
+      backdrop="blur-10px brightness-120 dark:brightness-80"
+    >
+      <div flex justify-between px5 py4>
+        <div flex gap-1>
           <slot name="title" />
         </div>
-        <div p3 flex>
+        <div flex>
           <slot name="actions" />
         </div>
       </div>
+      <slot name="header" />
     </div>
     <div>
       <slot />

components/notification/NotificationCard.vue

@@ -18,7 +18,7 @@ const displayName = $computed(() => getDisplayName(notification.account))
     </template>
     <template v-if="notification.type === 'follow_request'">
       <div flex ml-4>
-        <div i-ri:user-follow-fill mr-3 color-gray />{{ displayName }} requested to follow you
+        <div i-ri:user-follow-fill mr-3 />{{ displayName }} requested to follow you
       </div>
       <!-- TODO: accept request -->
       <AccountCard :account="notification.account" p3 />

components/notification/NotificationPaginator.vue

@@ -9,12 +9,11 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t base"
   >
     <template #default="{ item }">
       <NotificationCard
         :notification="item"
-        border="t base" pt-4
+        border="b base" pt-4
       />
     </template>
   </CommonPaginator>

components/timeline/TimelinePaginator.vue

@@ -9,7 +9,6 @@ const { paginator } = defineProps<{
 <template>
   <CommonPaginator
     :paginator="paginator"
-    border="t base"
   >
     <template #default="{ item }">
       <StatusCard