refactor: ♻️ Improve mobile timeline switching

2025-12-06 08:28:20 +01:00 · 2024-12-26 14:34:59 +01:00 · 2024-12-26 14:34:59 +01:00 · 3ff674017e
parent 466c1eaaac
commit 3ff674017e
10 changed files with 82 additions and 103 deletions
--- a/components/navigation/mobile-navbar.vue
+++ b/components/navigation/mobile-navbar.vue
@ -1,12 +1,10 @@
 <template>
    <div
-        class="fixed md:hidden bottom-0 inset-x-0 border-t h-20 bg-background z-10 flex items-center justify-around *:p-7 *:w-full gap-6 p-6">
-        <Timelines>
-            <Button variant="ghost" size="icon">
-                <Home class="!size-6" />
-            </Button>
-        </Timelines>
-        <Button v-if="identity" :as="NuxtLink" href="/notifications" variant="ghost" size="icon">
+        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">
+        <Button :as="NuxtLink" href="/" variant="ghost" size="icon">
+            <Home class="!size-6" />
+        </Button>
+        <Button :as="NuxtLink" href="/notifications" variant="ghost" size="icon">
            <Bell class="!size-6" />
        </Button>
        <AccountSwitcher>
@ -14,7 +12,7 @@
                <User class="!size-6" />
            </Button>
        </AccountSwitcher>
-        <Button v-if="identity" variant="default" size="icon" :title="m.salty_aloof_turkey_nudge()"
+        <Button variant="default" size="icon" :title="m.salty_aloof_turkey_nudge()"
            @click="useEvent('composer:open')">
            <Pen class="!size-6" />
        </Button>
@ -27,5 +25,4 @@ import * as m from "~/paraglide/messages.js";
 import { NuxtLink } from "#components";
 import AccountSwitcher from "../sidebars/account-switcher.vue";
 import { Button } from "../ui/button";
-import Timelines from "./timelines.vue";
-</script>
+</script>
--- a/components/navigation/timelines.vue
+++ b/components/navigation/timelines.vue
@ -1,55 +1,61 @@
 <template>
-    <Drawer>
-        <DrawerTrigger :as-child="true">
-            <slot />
-        </DrawerTrigger>
-        <DrawerContent>
-            <DrawerClose v-for="item in timelines.filter(
+    <Tabs v-model:model-value="current">
+        <TabsList>
+            <TabsTrigger v-for="timeline in timelines.filter(
                i => i.requiresLogin ? !!identity : true,
-            )" :key="item.name" :as-child="true">
-                <Button :as="NuxtLink" :href="item.url" variant="outline" size="lg" class="w-full">
-                    <component :is="item.icon" />
-                    {{ item.name }}
-                </Button>
-            </DrawerClose>
-            <DialogTitle class="sr-only">{{ m.trite_real_sawfish_drum() }}</DialogTitle>
-            <DialogDescription class="sr-only">{{ m.trite_real_sawfish_drum() }}</DialogDescription>
-        </DrawerContent>
-    </Drawer>
+            )" :key="timeline.value" :value="timeline.value" :as="NuxtLink" :href="timeline.url">
+                {{ timeline.name }}
+            </TabsTrigger>
+        </TabsList>
+    </Tabs>
 </template>

 <script lang="ts" setup>
 import { BedSingle, Globe, House, MapIcon } from "lucide-vue-next";
+import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
 import * as m from "~/paraglide/messages.js";
 import { NuxtLink } from "#components";
-import DrawerContent from "../modals/drawer-content.vue";
-import { Button } from "../ui/button";
-import { Drawer, DrawerTrigger } from "../ui/drawer";

 const timelines = [
    {
        name: m.bland_chunky_sparrow_propel(),
+        value: "home",
        url: "/home",
        icon: House,
        requiresLogin: true,
    },
    {
        name: m.lost_trick_dog_grace(),
+        value: "public",
        url: "/public",
        icon: MapIcon,
        requiresLogin: false,
    },
    {
        name: m.crazy_game_parrot_pave(),
+        value: "local",
        url: "/local",
        icon: BedSingle,
        requiresLogin: false,
    },
    {
        name: m.real_tame_moose_greet(),
+        value: "global",
        url: "/global",
        icon: Globe,
        requiresLogin: false,
    },
 ];
-</script>
+
+const { beforeEach } = useRouter();
+const { path } = useRoute();
+
+const current = computed(() => {
+    if (path === "/") {
+        return identity.value ? "home" : "public";
+    }
+
+    const timeline = timelines.find((i) => i.url === path);
+    return timeline ? timeline.value : "public";
+});
+</script>
--- a/components/sidebars/sidebar.vue
+++ b/components/sidebars/sidebar.vue
@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { ChevronDownIcon } from "lucide-vue-next";
 import {
    Breadcrumb,
    BreadcrumbItem,
@ -14,12 +15,19 @@ import {
    SidebarTrigger,
 } from "~/components/ui/sidebar";
 import { SettingIds } from "~/settings";
+import Timelines from "../navigation/timelines.vue";
 import LeftSidebar from "./left-sidebar.vue";
 import RightSidebar from "./right-sidebar.vue";

 const showRightSidebar = useSetting(SettingIds.NotificationsSidebar);

 const route = useRoute();
+const isMd = useMediaQuery("(max-width: 768px)");
+const showTimelines = computed(
+    () =>
+        ["/", "/home", "/local", "/public", "/global"].includes(route.path) &&
+        isMd.value,
+);
 </script>

 <template>
@ -28,22 +36,36 @@ const route = useRoute();
        <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 class="flex items-center gap-2 px-4">
-                    <SidebarTrigger class="-ml-1" />
-                    <Separator orientation="vertical" class="mr-2 h-4" />
+                <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 class="hidden md:block">
-                                    <component :is="breadcrumb.href ? BreadcrumbLink : BreadcrumbPage" :href="breadcrumb.href">
+                                <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)"
-                                    class="hidden md:block" />
+                                <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>
            </header>
            <div class="flex flex-1 flex-col gap-4 md:p-1 overflow-auto *:z-10">
--- a/index.d.ts
+++ b/index.d.ts
@ -1,12 +1,16 @@
+import type { JSX } from "vue/jsx-runtime";
+
 declare module "#app" {
    interface PageMeta {
        breadcrumbs?: () => {
            text: string;
            href?: string;
+            list?: {
+                text: string;
+                href: string;
+            }[];
        }[];
+        header?: JSX.Element;
        requiresAuth?: boolean;
    }
 }
-
-// It is always important to import/export something when augmenting a type
-export {};
--- a/layouts/app.vue
+++ b/layouts/app.vue
@ -16,7 +16,7 @@
            </CardFooter>
        </Card>
    </Sidebar>
-    <MobileNavbar />
+    <MobileNavbar v-if="identity" />
    <ComposerDialog />
 </template>

--- a/pages/global.vue
+++ b/pages/global.vue
@ -6,7 +6,7 @@
    </div>
 </template>

-<script setup lang="ts">
+<script setup lang="tsx">
 import Global from "~/components/timelines/global.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 import * as m from "~/paraglide/messages.js";
@ -17,14 +17,5 @@ useHead({

 definePageMeta({
    layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        {
-            text: m.real_tame_moose_greet(),
-            href: "/global",
-        },
-    ],
 });
-</script>
+</script>
--- a/pages/home.vue
+++ b/pages/home.vue
@ -6,26 +6,17 @@
    </div>
 </template>

-<script setup lang="ts">
+<script setup lang="tsx">
 import Home from "~/components/timelines/home.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 import * as m from "~/paraglide/messages.js";

 useHead({
-    title: "Home",
+    title: m.bland_chunky_sparrow_propel(),
 });

 definePageMeta({
    layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        {
-            text: m.bland_chunky_sparrow_propel(),
-            href: "/home",
-        },
-    ],
    requiresAuth: true,
 });
-</script>
+</script>
--- a/pages/index.vue
+++ b/pages/index.vue
@ -8,7 +8,7 @@
 </template>


-<script setup lang="ts">
+<script setup lang="tsx">
 import Home from "~/components/timelines/home.vue";
 import Public from "~/components/timelines/public.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
@ -22,19 +22,5 @@ useHead({

 definePageMeta({
    layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        identity.value
-            ? {
-                  text: m.bland_chunky_sparrow_propel(),
-                  href: "/home",
-              }
-            : {
-                  text: m.lost_trick_dog_grace(),
-                  href: "/public",
-              },
-    ],
 });
-</script>
+</script>
--- a/pages/local.vue
+++ b/pages/local.vue
@ -7,7 +7,7 @@
 </template>


-<script lang="ts" setup>
+<script lang="tsx" setup>
 import Local from "~/components/timelines/local.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 import * as m from "~/paraglide/messages.js";
@ -18,14 +18,5 @@ useHead({

 definePageMeta({
    layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        {
-            text: m.crazy_game_parrot_pave(),
-            href: "/local",
-        },
-    ],
 });
-</script>
+</script>
--- a/pages/public.vue
+++ b/pages/public.vue
@ -6,25 +6,16 @@
    </div>
 </template>

-<script setup lang="ts">
+<script setup lang="tsx">
 import Public from "~/components/timelines/public.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 import * as m from "~/paraglide/messages.js";

 useHead({
-    title: "Public",
+    title: m.lost_trick_dog_grace(),
 });

 definePageMeta({
    layout: "app",
-    breadcrumbs: () => [
-        {
-            text: m.steep_aqua_fox_harbor(),
-        },
-        {
-            text: m.lost_trick_dog_grace(),
-            href: "/public",
-        },
-    ],
 });
-</script>
+</script>