From 6655c05ddd0098b4ad3563530c2f0b433660abbd Mon Sep 17 00:00:00 2001
From: Julien Calixte <julienc@bam.tech>
Date: Sat, 14 Feb 2026 20:52:17 +0100
Subject: [PATCH] refactor: extract back button into shared component using
 history navigation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 src/components/BackButton.vue    | 28 ++++++++++++++++++++++++++++
 src/views/PublicNoteListView.vue | 24 ++----------------------
 src/views/PublicNoteView.vue     | 24 ++----------------------
 3 files changed, 32 insertions(+), 44 deletions(-)
 create mode 100644 src/components/BackButton.vue

diff --git a/src/components/BackButton.vue b/src/components/BackButton.vue
new file mode 100644
index 0000000..6baa387
--- /dev/null
+++ b/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>
diff --git a/src/views/PublicNoteListView.vue b/src/views/PublicNoteListView.vue
index f283925..ea5c2c6 100644
--- a/src/views/PublicNoteListView.vue
+++ b/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>
 
diff --git a/src/views/PublicNoteView.vue b/src/views/PublicNoteView.vue
index 017343e..6ba5f56 100644
--- a/src/views/PublicNoteView.vue
+++ b/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>