remanso-space/remanso
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: extract back button into shared component using history navigation

Browse Source 
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Julien Calixte
2026-02-14 20:52:17 +01:00
parent dee80bfbb6
commit 6655c05ddd
3 changed files with 32 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

28
src/components/BackButton.vue Normal file
View File

@@ -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>

24
src/views/PublicNoteListView.vue
View File

@@ -1,4 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import BackButton from "@/components/BackButton.vue"
import { Author, getAka } from "@/modules/atproto/getAka" import { Author, getAka } from "@/modules/atproto/getAka"
import { PublicNoteListItem } from "@/modules/note/models/Note" import { PublicNoteListItem } from "@/modules/note/models/Note"
import { computedAsync, useAsyncState } from "@vueuse/core" import { computedAsync, useAsyncState } from "@vueuse/core"
@@ -57,28 +58,7 @@ const getAlias = (did: string) =>
</li> </li>
</ul> </ul>
</div> </div>
<router-link <BackButton />
: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>
</main> </main>
</template> </template>

24
src/views/PublicNoteView.vue
View File

@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import { useATProtoLinks } from "@/hooks/useATProtoLinks.hook" import { useATProtoLinks } from "@/hooks/useATProtoLinks.hook"
import { markdownBuilder } from "@/hooks/useMarkdown.hook" import { markdownBuilder } from "@/hooks/useMarkdown.hook"
import BackButton from "@/components/BackButton.vue"
import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook" import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
import { getUniqueAka } from "@/modules/atproto/getAka" import { getUniqueAka } from "@/modules/atproto/getAka"
import { getUrl } from "@/modules/atproto/getUrl" import { getUrl } from "@/modules/atproto/getUrl"
@@ -126,28 +127,7 @@ watch(
<span v-if="publishedAt">&nbsp;•&nbsp;{{ publishedAt }}</span> <span v-if="publishedAt">&nbsp;•&nbsp;{{ publishedAt }}</span>
</span> </span>
<article class="note-display" v-html="content"></article> <article class="note-display" v-html="content"></article>
<router-link <BackButton />
: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>
</div> </div>
</div> </div>
</template> </template>