refactor: 💄 Improve note rendering UI

components/navigation/mobile-navbar.vue

@@ -1,20 +1,20 @@
 <template>
     <div
-        class="fixed md:hidden bottom-0 inset-x-0 border-t h-20 bg-background z-10 flex items-center justify-around *:h-full *:w-full gap-6 px-4 py-2">
+        class="fixed md:hidden bottom-0 inset-x-0 border-t h-16 bg-background z-10 flex items-center justify-around *:h-full *:w-full gap-6 px-4 py-2 [&>a>svg]:size-5 [&>button>svg]:size-5">
         <Button :as="NuxtLink" href="/" variant="ghost" size="icon">
-            <Home class="!size-6" />
+            <Home />
         </Button>
         <Button :as="NuxtLink" href="/notifications" variant="ghost" size="icon">
-            <Bell class="!size-6" />
+            <Bell />
         </Button>
         <AccountSwitcher>
             <Button variant="ghost" size="icon">
-                <User class="!size-6" />
+                <User />
             </Button>
         </AccountSwitcher>
         <Button variant="default" size="icon" :title="m.salty_aloof_turkey_nudge()"
             @click="useEvent('composer:open')">
-            <Pen class="!size-6" />
+            <Pen />
         </Button>
     </div>
 </template>

components/notes/actions.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex flex-row w-full items-stretch justify-around text-sm *:max-w-28 *:w-full *:text-muted-foreground">
+    <div class="flex flex-row w-full gap-x-6 items-stretch justify-start text-sm *:max-w-14 *:w-full *:text-muted-foreground">
         <Button variant="ghost" @click="emit('reply')" :title="m.drab_tense_turtle_comfort()" :disabled="!identity">
             <Reply class="size-5 text-primary" />
             {{ numberFormat(replyCount) }}

components/notes/content.vue

@@ -19,7 +19,7 @@
             $style.content,
         ]" v-html="content" v-render-emojis="emojis"></div>
         <div v-if="isOverflowing && collapsed"
-            class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black/5 to-transparent rounded-b"></div>
+            class="absolute inset-x-0 bottom-0 h-36 bg-gradient-to-t from-black/5 to-transparent rounded-b-md"></div>
         <Button v-if="isOverflowing" @click="collapsed = !collapsed"
             class="absolute bottom-2 right-1/2 translate-x-1/2">{{
                 collapsed

components/notes/header.vue

@@ -36,7 +36,7 @@
         <div class="flex flex-col gap-1 justify-center items-end" v-if="!smallLayout">
             <NuxtLink :href="noteUrlAsPath" class="text-xs text-muted-foreground"
                 :title="visibilities[visibility].text">
-                <component :is="visibilities[visibility].icon" class="size-5" />
+                <component :is="visibilities[visibility].icon" class="size-4" />
             </NuxtLink>
         </div>
     </div>

components/sidebars/sidebar.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { cn } from "@/lib/utils";
 import { ChevronDownIcon } from "lucide-vue-next";
 import {
     Breadcrumb,
@@ -33,44 +34,11 @@ const showTimelines = computed(
 <template>
     <SidebarProvider>
         <LeftSidebar />
-        <SidebarInset>
-            <header
-                class="flex h-16 shrink-0 items-center gap-2 transition-[width,height] ease-linear group-has-[[data-collapsible=icon]]/sidebar-wrapper:h-12 overflow-hidden bg-background">
-                <div :key="route.path" class="flex items-center gap-2 px-4 max-w-full">
-                    <SidebarTrigger class="-ml-1 shrink-0" />
-                    <Separator v-if="route.meta.breadcrumbs" orientation="vertical" class="mr-2 h-4" />
-                    <Breadcrumb v-if="route.meta.breadcrumbs">
-                        <BreadcrumbList>
-                            <template v-for="(breadcrumb, index) of route.meta.breadcrumbs()">
-                                <BreadcrumbItem>
-                                    <component v-if="!breadcrumb.links"
-                                        :is="breadcrumb.href ? BreadcrumbLink : BreadcrumbPage" :href="breadcrumb.href">
-                                        {{ breadcrumb.text }}
-                                    </component>
-                                    <DropdownMenu v-else>
-                                        <DropdownMenuTrigger class="flex items-center gap-1">
-                                            {{ breadcrumb.text }}
-                                            <ChevronDownIcon class="size-4" />
-                                        </DropdownMenuTrigger>
-                                        <DropdownMenuContent align="start">
-                                            <DropdownMenuItem v-for="link of breadcrumb.links" :key="link.href"
-                                                :as="BreadcrumbLink" :href="link.href">
-                                                {{ link.text }}
-                                            </DropdownMenuItem>
-                                        </DropdownMenuContent>
-                                    </DropdownMenu>
-                                </BreadcrumbItem>
-                                <BreadcrumbSeparator v-if="index !== (route.meta.breadcrumbs().length - 1)" />
-                            </template>
-                        </BreadcrumbList>
-                    </Breadcrumb>
-                    <Separator v-if="showTimelines" orientation="vertical" class="h-4" />
-                    <Timelines v-if="showTimelines" />
-                </div>
+        <SidebarInset :class="cn('relative !overflow-y-auto !h-svh', !isMd && 'pt-4')">
+            <header v-if="showTimelines" class="flex h-16 items-center bg-background/80 backdrop-blur-2xl sticky top-0 inset-x-0 z-10 p-4">
+                <Timelines />
             </header>
-            <div class="flex flex-1 flex-col gap-4 md:p-1 overflow-auto *:z-10">
             <slot />
-            </div>
         </SidebarInset>
         <RightSidebar v-if="identity" v-show="showRightSidebar.value" />
     </SidebarProvider>