Keep thread navigation within the originating upload list

Record where an upload was opened from in a new useUploadNavContext
state. When a tile is clicked on a user profile, the thread page passes
that context to the upload detail API, which scopes the newer/older
neighbors to that user's uploads. Arrow clicks reseed the context for
the next thread, so the chain stays within the source list without a
URL parameter. Threads opened directly (notification, reload) fall back
to the global order. The breadcrumb reads the same context and shows
the profile path for profile-originated threads, now including the
thread id in the final crumb.

Generated with [Devin](https://devin.ai)

Co-Authored-By: Devin <158243242+devin-ai-integration[bot]@users.noreply.github.com>

app/components/SiteBreadcrumb.vue

@@ -10,6 +10,7 @@ import {
 
 const { t } = useI18n()
 const route = useRoute()
+const navContext = useUploadNavContext()
 
 interface Crumb {
   label: string
@@ -20,7 +21,20 @@ const crumbs = computed<Crumb[]>(() => {
   const list: Crumb[] = [{ label: t('palette.home'), to: '/' }]
   const p = route.path
   if (p === '/') return []
-  if (p.startsWith('/t/')) list.push({ label: t('nav.thread') })
+  if (p.startsWith('/t/')) {
+    // Herkunft aus dem Nav-Kontext — wird von den Pfeilen weitergereicht.
+    // Gilt nur für die hinterlegte Upload-ID (Tile-Klick oder Pfeil-Seed);
+    // direkt geöffnete Threads (Notification, Reload) zeigen den schlichten
+    // Crumb ohne Profilkette
+    const ctx = navContext.value?.uploadId === route.params.id ? navContext.value : null
+    if (ctx?.fromPath) {
+      list.push(
+        { label: t('nav.users'), to: '/users' },
+        { label: ctx.fromLabel ?? t('nav.profile'), to: ctx.fromPath },
+      )
+    }
+    list.push({ label: `${t('nav.thread')} ${route.params.id ?? ''}` })
+  }
   else if (p === '/users') list.push({ label: t('nav.users') })
   else if (p.startsWith('/user/')) {
     list.push({ label: t('nav.users'), to: '/users' }, { label: t('nav.profile') })
@@ -41,9 +55,10 @@ const crumbs = computed<Crumb[]>(() => {
           <BreadcrumbLink v-if="crumb.to" as-child>
             <NuxtLink :to="crumb.to">{{ crumb.label }}</NuxtLink>
           </BreadcrumbLink>
-          <BreadcrumbPage v-else>
+          <BreadcrumbPage v-else-if="i === crumbs.length - 1">
             {{ crumb.label }}
           </BreadcrumbPage>
+          <span v-else>{{ crumb.label }}</span>
         </BreadcrumbItem>
         <BreadcrumbSeparator v-if="i < crumbs.length - 1" />
       </template>

app/components/UploadTile.vue

@@ -37,8 +37,13 @@ const canPlaceholder = computed(() => {
 
 const indicator = useLoadingIndicator()
 const router = useRouter()
+const route = useRoute()
 const navigating = ref(false)
 
+// Herkunft im State merken (kein URL-Param): /user/<id> scopt Thread-Pfeile
+// und Breadcrumbs auf die Uploads dieses Nutzers
+const navContext = useUploadNavContext()
+
 const spanClass = computed(() => {
   if (uniform.value) return ''
   const count = props.upload.commentCount ?? 0
@@ -81,6 +86,11 @@ async function openUpload(e: MouseEvent) {
     url: props.upload.url,
     thumbUrl: props.upload.thumbUrl ?? null,
   }
+  navContext.value = {
+    uploadId: props.upload.id,
+    fromPath: /^\/user\/\d+$/.test(route.path) ? route.path : null,
+    fromLabel: props.upload.userName ?? null,
+  }
 
   try {
     const threadFetch = $fetch(`/api/uploads/${props.upload.id}`)

app/composables/useLastViewedUpload.ts

@@ -15,3 +15,17 @@ export interface PendingUploadMedia {
 export function usePendingUploadMedia() {
   return useState<PendingUploadMedia | null>('pending-upload-media', () => null)
 }
+
+export interface UploadNavContext {
+  uploadId: string
+  fromPath: string | null
+  fromLabel: string | null
+}
+
+// Herkunft der Thread-Navigation (z. B. /user/<id>): beim Tile-Klick gesetzt
+// und von den Thread-Pfeilen für die Folgeseite weitergereicht. Gilt immer
+// nur für die in uploadId hinterlegte Seite — ein direkt geöffneter Thread
+// (Notification, Kommentar-Link, Reload) fällt auf die globale Reihenfolge
+export function useUploadNavContext() {
+  return useState<UploadNavContext | null>('upload-nav-context', () => null)
+}

app/pages/t/[id].vue

@@ -69,16 +69,35 @@ const requestHost = useRequestURL().hostname
 const { user, can } = useAuth()
 const { t, locale } = useI18n()
 
+// Herkunftskontext aus dem State (kein URL-Param): gilt nur, wenn er für
+// genau diesen Thread gesetzt wurde — Tile-Klick oder weitergereichter
+// Pfeil. Der interne API-Call bekommt ihn als from-Param mit
+const navContext = useUploadNavContext()
+const activeContext = computed(() => navContext.value?.uploadId === id.value ? navContext.value : null)
+const apiFrom = computed(() => activeContext.value?.fromPath ? `?from=${encodeURIComponent(activeContext.value.fromPath)}` : '')
+
 // Beim Client-Side-Nav nicht awaiten, damit die Seite sofort rendert und das
 // benannte Medium-Element für die View-Transition im Snapshot vorhanden ist
 const fetchResult = useFetch<{ upload: UploadDetail, comments: CommentItem[], favoritedBy: FavUser[], isFavorited: boolean, isSubscribed: boolean, uploadReactions: UploadReaction[], newerId: string | null, olderId: string | null }>(
-  () => `/api/uploads/${id.value}`,
+  () => `/api/uploads/${id.value}${apiFrom.value}`,
 )
 if (import.meta.server) {
   await fetchResult
 }
 const { data, error, refresh } = fetchResult
 
+// Kontext für den Folgethread neu säen: uploadId wird auf das Ziel gesetzt,
+// fromPath/fromLabel wandern mit — so bleibt die Pfeil-Kette in der
+// Herkunftsliste, ohne dass der Param in der URL auftaucht
+function seedNavContext(nextId: string | null) {
+  if (!nextId) return
+  navContext.value = {
+    uploadId: nextId,
+    fromPath: activeContext.value?.fromPath ?? null,
+    fromLabel: activeContext.value?.fromLabel ?? null,
+  }
+}
+
 function setThreadSubscription(uploadId: string, enabled: boolean) {
   // useFetch-data ist ein shallowRef — nur eine Neuzuweisung triggert Reaktivität
   if (data.value?.upload.id === uploadId) {
@@ -598,7 +617,7 @@ async function deleteComment(commentId: number) {
             class="absolute left-2 top-1/2 -translate-y-1/2 shadow opacity-80 hover:opacity-100"
             as-child
           >
-            <NuxtLink :to="`/t/${data.newerId}`" :aria-label="$t('thread.newer')">
+            <NuxtLink :to="`/t/${data.newerId}`" :aria-label="$t('thread.newer')" @click="seedNavContext(data.newerId)">
               <Icon name="ph:caret-left-fill" class="size-5" />
             </NuxtLink>
           </Button>
@@ -609,7 +628,7 @@ async function deleteComment(commentId: number) {
             class="absolute right-2 top-1/2 -translate-y-1/2 shadow opacity-80 hover:opacity-100"
             as-child
           >
-            <NuxtLink :to="`/t/${data.olderId}`" :aria-label="$t('thread.older')">
+            <NuxtLink :to="`/t/${data.olderId}`" :aria-label="$t('thread.older')" @click="seedNavContext(data.olderId)">
               <Icon name="ph:caret-right-fill" class="size-5" />
             </NuxtLink>
           </Button>

server/api/uploads/[id].get.ts

@@ -55,8 +55,13 @@ export default defineEventHandler(async (event) => {
     .where(eq(comments.uploadId, id))
     .orderBy(asc(comments.createdAt))
 
-  // Nachbarn in Grid-Reihenfolge (createdAt desc, id desc als Tiebreak)
+  // Nachbarn in Grid-Reihenfolge (createdAt desc, id desc als Tiebreak).
+  // Kontext ?from=/user/<id> scopt die Navigation auf die Uploads dieses
+  // Nutzers — so durchläuft man vom Profil aus nur dessen Uploads
   const sessionUser = await getSessionUser(event)
+  const from = String(getQuery(event).from ?? '')
+  const contextUserId = /^\/user\/(\d+)$/.exec(from)?.[1]
+  const scopedToUser = contextUserId ? eq(uploads.userId, Number(contextUserId)) : undefined
   const commentIds = commentRows.map(c => c.id)
   const [reactionRows, uploadReactionRows, favRows, newerRows, olderRows, tagRows, attachmentRows, subscriptionRows] = await Promise.all([
     commentIds.length
@@ -91,18 +96,24 @@ export default defineEventHandler(async (event) => {
     db
       .select({ id: uploads.id })
       .from(uploads)
-      .where(or(
+      .where(and(
+        or(
           gt(uploads.createdAt, upload.createdAt),
           and(eq(uploads.createdAt, upload.createdAt), gt(uploads.id, upload.id)),
+        ),
+        scopedToUser,
       ))
       .orderBy(asc(uploads.createdAt), asc(uploads.id))
       .limit(1),
     db
       .select({ id: uploads.id })
       .from(uploads)
-      .where(or(
+      .where(and(
+        or(
           lt(uploads.createdAt, upload.createdAt),
           and(eq(uploads.createdAt, upload.createdAt), lt(uploads.id, upload.id)),
+        ),
+        scopedToUser,
       ))
       .orderBy(desc(uploads.createdAt), desc(uploads.id))
       .limit(1),