feat: ✨ Add breadcrumb navigation to every page

components/sidebars/sidebar.vue

@@ -18,6 +18,8 @@ import LeftSidebar from "./left-sidebar.vue";
 import RightSidebar from "./right-sidebar.vue";
 
 const showRightSidebar = useSetting(SettingIds.NotificationsSidebar);
+
+const route = useRoute();
 </script>
 
 <template>
@@ -29,17 +31,17 @@ const showRightSidebar = useSetting(SettingIds.NotificationsSidebar);
                 <div class="flex items-center gap-2 px-4">
                     <SidebarTrigger class="-ml-1" />
                     <Separator orientation="vertical" class="mr-2 h-4" />
-                    <Breadcrumb>
+                    <Breadcrumb v-if="route.meta.breadcrumbs">
                         <BreadcrumbList>
-                            <BreadcrumbItem class="hidden md:block">
-                                <BreadcrumbLink href="#">
-                                    Timelines
-                                </BreadcrumbLink>
-                            </BreadcrumbItem>
-                            <BreadcrumbSeparator class="hidden md:block" />
-                            <BreadcrumbItem>
-                                <BreadcrumbPage>Home</BreadcrumbPage>
-                            </BreadcrumbItem>
+                            <template v-for="(breadcrumb, index) of route.meta.breadcrumbs">
+                                <BreadcrumbItem class="hidden md:block">
+                                    <component :is="breadcrumb.href ? BreadcrumbLink : BreadcrumbPage" :href="breadcrumb.href">
+                                        {{ breadcrumb.text }}
+                                    </component>
+                                </BreadcrumbItem>
+                                <BreadcrumbSeparator v-if="index !== (route.meta.breadcrumbs.length - 1)"
+                                    class="hidden md:block" />
+                            </template>
                         </BreadcrumbList>
                     </Breadcrumb>
                 </div>

components/ui/breadcrumb/BreadcrumbLink.vue

@@ -2,11 +2,12 @@
 import { cn } from "@/lib/utils";
 import { Primitive, type PrimitiveProps } from "radix-vue";
 import type { HTMLAttributes } from "vue";
+import { NuxtLink } from "#components";
 
 const props = withDefaults(
     defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(),
     {
-        as: "a",
+        as: NuxtLink,
     },
 );
 </script>

index.d.ts

@@ -0,0 +1,12 @@
+declare module "#app" {
+    interface PageMeta {
+        breadcrumbs?: {
+            text: string;
+            href?: string;
+        }[];
+        requiresAuth?: boolean;
+    }
+}
+
+// It is always important to import/export something when augmenting a type
+export {};

pages/[username]/[uuid].vue

@@ -16,6 +16,11 @@ import Note from "~/components/notes/note.vue";
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Note",
+        },
+    ],
 });
 
 const element = ref<HTMLElement | null>(null);

pages/[username]/index.vue

@@ -24,15 +24,20 @@ import AccountProfile from "~/components/profiles/profile.vue";
 import AccountTimeline from "~/components/timelines/account.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
-definePageMeta({
-    layout: "app",
-});
-
 const route = useRoute();
 const username = (route.params.username as string).startsWith("@")
     ? (route.params.username as string).substring(1)
     : (route.params.username as string);
 
+definePageMeta({
+    layout: "app",
+    breadcrumbs: [
+        {
+            text: "Profile",
+        },
+    ],
+});
+
 const { account, isLoading } = useAccountFromAcct(client, username);
 const accountId = computed(() => account.value?.id ?? undefined);
 

pages/global.vue

@@ -12,5 +12,14 @@ import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Timelines",
+        },
+        {
+            text: "Global",
+            href: "/global",
+        },
+    ],
 });
 </script>

pages/home.vue

@@ -12,5 +12,15 @@ import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Timelines",
+        },
+        {
+            text: "Home",
+            href: "/home",
+        },
+    ],
+    requiresAuth: true,
 });
 </script>

pages/index.vue

@@ -1,17 +1,33 @@
 <template>
     <div class="mx-auto max-w-2xl w-full">
         <TimelineScroller>
-            <Public />
+            <Home v-if="identity" />
+            <Public v-else />
         </TimelineScroller>
     </div>
 </template>
 
 
 <script setup lang="ts">
+import Home from "~/components/timelines/home.vue";
 import Public from "~/components/timelines/public.vue";
 import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Timelines",
+        },
+        identity.value
+            ? {
+                  text: "Home",
+                  href: "/home",
+              }
+            : {
+                  text: "Public",
+                  href: "/public",
+              },
+    ],
 });
 </script>

pages/local.vue

@@ -13,5 +13,14 @@ import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Timelines",
+        },
+        {
+            text: "Local",
+            href: "/local",
+        },
+    ],
 });
 </script>

pages/notifications.vue

@@ -25,5 +25,12 @@ import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Notifications",
+            href: "/notifications",
+        },
+    ],
+    requiresAuth: true,
 });
 </script>

pages/preferences/[page].vue

@@ -26,6 +26,12 @@ import {
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Preferences",
+        },
+    ],
+    requiresAuth: true,
 });
 
 const route = useRoute();

pages/preferences/emojis.vue

@@ -28,6 +28,12 @@ import { Input } from "~/components/ui/input";
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Preferences",
+        },
+    ],
+    requiresAuth: true,
 });
 
 const emojis = computed(

pages/preferences/index.vue

@@ -7,5 +7,11 @@
 <script lang="ts" setup>
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Preferences",
+        },
+    ],
+    requiresAuth: true,
 });
 </script>

pages/public.vue

@@ -12,5 +12,14 @@ import TimelineScroller from "~/components/timelines/timeline-scroller.vue";
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Timelines",
+        },
+        {
+            text: "Public",
+            href: "/public",
+        },
+    ],
 });
 </script>

pages/settings/index.vue

@@ -1,28 +0,0 @@
-<template>
-<!--     <SettingsSidebar>
-        <template #behaviour>
-            <SettingPage :page="SettingPages.Behaviour" />
-        </template>
-        <template #appearance>
-            <SettingPage :page="SettingPages.Appearance" />
-        </template>
-        <template #account>
-            <ProfileEditor />
-        </template>
-        <template #emojis>
-            <EmojiEditor />
-        </template>
-    </SettingsSidebar> -->
-</template>
-
-<script setup lang="ts">
-/* import EmojiEditor from "~/components/settings/emojis/emojis.vue";
-import SettingPage from "~/components/settings/page.vue";
-import ProfileEditor from "~/components/settings/profile-editor.vue";
-import SettingsSidebar from "~/components/sidebars/settings-sidebar.vue";
-import { SettingPages } from "~/settings";
-
-definePageMeta({
-    layout: "app",
-}); */
-</script>