chore: ⬆️ Upgrade to Nuxt 4

app/components/navigation/mobile-navbar.vue

@@ -0,0 +1,35 @@
+<template>
+    <div
+        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 />
+        </Button>
+        <Button
+            :as="NuxtLink"
+            href="/notifications"
+            variant="ghost"
+            size="icon"
+        >
+            <Bell />
+        </Button>
+        <Button variant="ghost" size="icon">
+            <User />
+        </Button>
+        <Button
+            variant="default"
+            size="icon"
+            :title="m.salty_aloof_turkey_nudge()"
+            @click="useEvent('composer:open')"
+        >
+            <Pen />
+        </Button>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { Bell, Home, Pen, User } from "lucide-vue-next";
+import { NuxtLink } from "#components";
+import * as m from "~~/paraglide/messages.js";
+import { Button } from "../ui/button";
+</script>

app/components/navigation/timelines.vue

@@ -0,0 +1,61 @@
+<template>
+    <Tabs v-model:model-value="current">
+        <TabsList>
+            <TabsTrigger v-for="timeline in timelines.filter(
+                i => i.requiresLogin ? !!identity : true,
+            )" :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 { NuxtLink } from "#components";
+import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs";
+import * as m from "~~/paraglide/messages.js";
+
+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,
+    },
+];
+
+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>