From 232abac215d3fe253149d3763841cb2339e96bd3 Mon Sep 17 00:00:00 2001
From: Jesse Wierzbinski <contact@cpluspatch.com>
Date: Wed, 4 Dec 2024 15:17:47 +0100
Subject: [PATCH] feat: :sparkles: Add breadcrumb navigation to every page

---
 components/sidebars/sidebar.vue             | 22 ++++++++--------
 components/ui/breadcrumb/BreadcrumbLink.vue |  3 ++-
 index.d.ts                                  | 12 +++++++++
 pages/[username]/[uuid].vue                 |  5 ++++
 pages/[username]/index.vue                  | 13 +++++++---
 pages/global.vue                            |  9 +++++++
 pages/home.vue                              | 10 ++++++++
 pages/index.vue                             | 18 ++++++++++++-
 pages/local.vue                             |  9 +++++++
 pages/notifications.vue                     |  7 ++++++
 pages/preferences/[page].vue                |  6 +++++
 pages/preferences/emojis.vue                |  6 +++++
 pages/preferences/index.vue                 |  6 +++++
 pages/public.vue                            |  9 +++++++
 pages/settings/index.vue                    | 28 ---------------------
 15 files changed, 119 insertions(+), 44 deletions(-)
 create mode 100644 index.d.ts
 delete mode 100644 pages/settings/index.vue

diff --git a/components/sidebars/sidebar.vue b/components/sidebars/sidebar.vue
index 3bff4c3..ed34173 100644
--- a/components/sidebars/sidebar.vue
+++ b/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>
diff --git a/components/ui/breadcrumb/BreadcrumbLink.vue b/components/ui/breadcrumb/BreadcrumbLink.vue
index 8ff2a9c..a244330 100644
--- a/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/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>
diff --git a/index.d.ts b/index.d.ts
new file mode 100644
index 0000000..6f0e054
--- /dev/null
+++ b/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 {};
diff --git a/pages/[username]/[uuid].vue b/pages/[username]/[uuid].vue
index a2ef3f7..f5670af 100644
--- a/pages/[username]/[uuid].vue
+++ b/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);
diff --git a/pages/[username]/index.vue b/pages/[username]/index.vue
index 5e2f524..d010c9d 100644
--- a/pages/[username]/index.vue
+++ b/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);
 
diff --git a/pages/global.vue b/pages/global.vue
index 97c935f..a7f08ac 100644
--- a/pages/global.vue
+++ b/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>
\ No newline at end of file
diff --git a/pages/home.vue b/pages/home.vue
index b4436e0..2b608b6 100644
--- a/pages/home.vue
+++ b/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>
\ No newline at end of file
diff --git a/pages/index.vue b/pages/index.vue
index 63d8c26..46eebea 100644
--- a/pages/index.vue
+++ b/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>
\ No newline at end of file
diff --git a/pages/local.vue b/pages/local.vue
index b2660cb..d2da1d6 100644
--- a/pages/local.vue
+++ b/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>
\ No newline at end of file
diff --git a/pages/notifications.vue b/pages/notifications.vue
index 6d59634..d6732f6 100644
--- a/pages/notifications.vue
+++ b/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>
\ No newline at end of file
diff --git a/pages/preferences/[page].vue b/pages/preferences/[page].vue
index 46fb748..1bea049 100644
--- a/pages/preferences/[page].vue
+++ b/pages/preferences/[page].vue
@@ -26,6 +26,12 @@ import {
 
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Preferences",
+        },
+    ],
+    requiresAuth: true,
 });
 
 const route = useRoute();
diff --git a/pages/preferences/emojis.vue b/pages/preferences/emojis.vue
index 532ef8f..e954ce1 100644
--- a/pages/preferences/emojis.vue
+++ b/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(
diff --git a/pages/preferences/index.vue b/pages/preferences/index.vue
index 6a6ee74..e2f5e64 100644
--- a/pages/preferences/index.vue
+++ b/pages/preferences/index.vue
@@ -7,5 +7,11 @@
 <script lang="ts" setup>
 definePageMeta({
     layout: "app",
+    breadcrumbs: [
+        {
+            text: "Preferences",
+        },
+    ],
+    requiresAuth: true,
 });
 </script>
\ No newline at end of file
diff --git a/pages/public.vue b/pages/public.vue
index 5236c0f..e36cb8f 100644
--- a/pages/public.vue
+++ b/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>
\ No newline at end of file
diff --git a/pages/settings/index.vue b/pages/settings/index.vue
deleted file mode 100644
index 751bb06..0000000
--- a/pages/settings/index.vue
+++ /dev/null
@@ -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>
\ No newline at end of file