fix: better mobile usage

src/components/StackedPublicNote.vue

@@ -21,6 +21,7 @@ const atUri = computed(() => props.atUri)
 const atUriProps = computed(() => parseAtUri(atUri.value))
 const did = computed(() => atUriProps.value.did)
 const rkey = computed(() => atUriProps.value.rkey)
+
 const index = computed(() => props.index)
 
 const author = computedAsync(async () => getUniqueAka(did.value))

src/hooks/useATProtoLinks.hook.ts

@@ -2,6 +2,7 @@ import { ComputedRef, onUnmounted, Ref, toValue } from "vue"
 
 import { isExternalLink } from "@/utils/link"
 import { useRouteQueryStackedNotes } from "@/hooks/useRouteQueryStackedNotes.hook"
+import { parseAtUri } from "@/modules/atproto/parseAtUri"
 
 export const useATProtoLinks = (
   className: ComputedRef<string> | string,
@@ -27,8 +28,9 @@ export const useATProtoLinks = (
       window.open(atUri, "_blank")
       return
     }
+    const { rkey } = parseAtUri(atUri)
 
-    addStackedNote(toValue(currentAtUri) ?? "", atUri)
+    addStackedNote(toValue(currentAtUri) ?? "", atUri, rkey)
   }
 
   const LINK_SELECTOR = `.${toValue(className)} a`

src/hooks/useRouteQueryStackedNotes.hook.ts

@@ -20,22 +20,25 @@ export const useRouteQueryStackedNotes = () => {
   const { scrollToNote, isMobile } = useOverlay(false)
 
   const scrollToFocusedNote = (
-    sha: string | null = null,
+    noteId: string | null = null,
     notes: string[] = stackedNotes.value,
   ) => {
     nextTick(() => {
-      const index = sha ? notes.findIndex((noteSHA) => noteSHA === sha) : 0
+      const index = noteId ? notes.findIndex((nid) => nid.includes(noteId)) : 0
 
       if (isMobile.value) {
-        if (sha) {
-          const element = document.querySelector(`.note-${sha}`) as HTMLElement
+        if (noteId) {
+          const element = document.querySelector(
+            `.note-${noteId}`,
+          ) as HTMLElement
+
           const top = (index + 1) * (element?.clientHeight ?? height.value)
           scrollToNote(top)
         } else {
           scrollToNote(0)
         }
       } else {
-        if (sha) {
+        if (noteId) {
           const margin = index * 44
           const left = (index + 1) * getNoteWidth() - margin
           scrollToNote(left)
@@ -46,9 +49,13 @@ export const useRouteQueryStackedNotes = () => {
     })
   }
 
-  const addStackedNote = (currentSha: string, sha: string) => {
+  const addStackedNote = (
+    currentSha: string,
+    sha: string,
+    selector?: string,
+  ) => {
     if (stackedNotes.value.includes(sha)) {
-      scrollToFocusedNote(sha)
+      scrollToFocusedNote(selector ?? sha)
       return
     }
 
@@ -68,7 +75,7 @@ export const useRouteQueryStackedNotes = () => {
       stackedNotes.value = newStackedNotes
     }
 
-    scrollToFocusedNote(sha, stackedNotes.value)
+    scrollToFocusedNote(selector ?? sha, stackedNotes.value)
   }
 
   return {

src/views/PublicNoteView.vue

@@ -12,8 +12,6 @@ import { downloadFont } from "@/utils/downloadFont"
 import { computedAsync } from "@vueuse/core"
 import { computed, nextTick, watch } from "vue"
 import { useResizeContainer } from "@/hooks/useResizeContainer.hook"
-import { publicNoteEventBus } from "@/bus/publicNoteEventBus"
-import { errorMessage } from "@/utils/notif"
 
 const props = defineProps<{ did: string; rkey: string }>()
 const did = computed(() => props.did)
@@ -57,6 +55,7 @@ const content = computed(() =>
       )
     : "",
 )
+
 const publishedAt = computed(() =>
   noteRecord.value?.value.publishedAt
     ? new Date(noteRecord.value?.value.publishedAt).toLocaleDateString()
@@ -89,7 +88,7 @@ watch(
         >
       </div>
 
-      <span class="badge badge-author" v-if="author">
+      <span class="badge badge-author" v-if="author && content">
         <router-link
           :to="{ name: 'PublicNoteListByDidView', params: { did: did } }"
           class="link link-hover"
@@ -204,5 +203,17 @@ watch(
       max-width: var(--note-width);
     }
   }
+
+  @media screen and (max-width: 768px) {
+    flex-wrap: wrap;
+
+    .repo-title-breadcrumb {
+      display: none;
+    }
+
+    .article article {
+      margin-top: 48px;
+    }
+  }
 }
 </style>