refactor: extract back button into shared component using history navigation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/BackButton.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { useRouter } from "vue-router"
+
+const router = useRouter()
+const goBack = () => router.back()
+</script>
+
+<template>
+  <button class="button is-small is-white back-button" @click="goBack">
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      class="icon icon-tabler icon-tabler-arrow-narrow-left"
+      width="28"
+      height="28"
+      viewBox="0 0 24 24"
+      stroke-width="1.5"
+      stroke="currentColor"
+      fill="none"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <line x1="5" y1="12" x2="19" y2="12" />
+      <line x1="5" y1="12" x2="9" y2="16" />
+      <line x1="5" y1="12" x2="9" y2="8" />
+    </svg>
+    return
+  </button>
+</template>

src/views/PublicNoteListView.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import BackButton from "@/components/BackButton.vue"
 import { Author, getAka } from "@/modules/atproto/getAka"
 import { PublicNoteListItem } from "@/modules/note/models/Note"
 import { computedAsync, useAsyncState } from "@vueuse/core"
@@ -57,28 +58,7 @@ const getAlias = (did: string) =>
         </li>
       </ul>
     </div>
-    <router-link
-      :to="{ name: 'Home' }"
-      class="button is-small is-white back-button"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        class="icon icon-tabler icon-tabler-arrow-narrow-left"
-        width="28"
-        height="28"
-        viewBox="0 0 24 24"
-        stroke-width="1.5"
-        stroke="currentColor"
-        fill="none"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <line x1="5" y1="12" x2="19" y2="12" />
-        <line x1="5" y1="12" x2="9" y2="16" />
-        <line x1="5" y1="12" x2="9" y2="8" />
-      </svg>
-      return home
-    </router-link>
+    <BackButton />
   </main>
 </template>
 

src/views/PublicNoteView.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { useATProtoLinks } from "@/hooks/useATProtoLinks.hook"
 import { markdownBuilder } from "@/hooks/useMarkdown.hook"
+import BackButton from "@/components/BackButton.vue"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
 import { getUniqueAka } from "@/modules/atproto/getAka"
 import { getUrl } from "@/modules/atproto/getUrl"
@@ -126,28 +127,7 @@ watch(
         <span v-if="publishedAt">&nbsp;•&nbsp;{{ publishedAt }}</span>
       </span>
       <article class="note-display" v-html="content"></article>
-      <router-link
-        :to="{ name: 'Home' }"
-        class="button is-small is-white back-button"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="icon icon-tabler icon-tabler-arrow-narrow-left"
-          width="28"
-          height="28"
-          viewBox="0 0 24 24"
-          stroke-width="1.5"
-          stroke="currentColor"
-          fill="none"
-          stroke-linecap="round"
-          stroke-linejoin="round"
-        >
-          <line x1="5" y1="12" x2="19" y2="12" />
-          <line x1="5" y1="12" x2="9" y2="16" />
-          <line x1="5" y1="12" x2="9" y2="8" />
-        </svg>
-        return home
-      </router-link>
+      <BackButton />
     </div>
   </div>
 </template>