feat: ✨ Add breadcrumb navigation to every page

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>