Files
BRETT/app/components/SiteBreadcrumb.vue
T
FliesentischKingandDevin 25a7867946 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>
2026-10-04 19:54:37 +02:00

68 lines
2.2 KiB
Vue

<script setup lang="ts">
import {
Breadcrumb,
BreadcrumbItem,
BreadcrumbLink,
BreadcrumbList,
BreadcrumbPage,
BreadcrumbSeparator,
} from '@/components/ui/breadcrumb'
const { t } = useI18n()
const route = useRoute()
const navContext = useUploadNavContext()
interface Crumb {
label: string
to?: string
}
const crumbs = computed<Crumb[]>(() => {
const list: Crumb[] = [{ label: t('palette.home'), to: '/' }]
const p = route.path
if (p === '/') return []
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') })
}
else if (p === '/settings') list.push({ label: t('nav.settings') })
else if (p === '/admin') list.push({ label: t('nav.admin') })
else if (p === '/login') list.push({ label: t('auth.login') })
else if (p === '/register') list.push({ label: t('auth.register') })
return list
})
</script>
<template>
<Breadcrumb v-if="crumbs.length > 1" class="px-4 py-2 lg:px-6">
<BreadcrumbList>
<template v-for="(crumb, i) in crumbs" :key="i">
<BreadcrumbItem>
<BreadcrumbLink v-if="crumb.to" as-child>
<NuxtLink :to="crumb.to">{{ crumb.label }}</NuxtLink>
</BreadcrumbLink>
<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>
</BreadcrumbList>
</Breadcrumb>
</template>