bvandeusenandClaude Opus 4.7
cba662a900
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
103 lines
3.2 KiB
Vue
103 lines
3.2 KiB
Vue
<template>
|
||
<div v-if="postId != null" class="fc-postinfo">
|
||
<template v-if="info && info.data">
|
||
<div class="fc-postinfo__main">
|
||
<span class="fc-postinfo__platform">
|
||
{{ info.data.source.platform }}
|
||
</span>
|
||
<span class="fc-postinfo__title">
|
||
{{ info.data.post.title || `Post ${info.data.post.external_post_id}` }}
|
||
</span>
|
||
<RouterLink
|
||
class="fc-postinfo__artist"
|
||
:to="`/artist/${info.data.artist.slug}`"
|
||
>by {{ info.data.artist.name }}</RouterLink>
|
||
<span v-if="date" class="fc-postinfo__date">{{ date }}</span>
|
||
<span
|
||
v-if="info.data.post.attachment_count != null"
|
||
class="fc-postinfo__count"
|
||
>{{ info.data.post.attachment_count }} files</span>
|
||
<a
|
||
v-if="info.data.post.url" :href="info.data.post.url"
|
||
target="_blank" rel="noopener noreferrer"
|
||
>↗ original post</a>
|
||
<a
|
||
v-for="at in (info.data.attachments || [])" :key="at.id"
|
||
class="fc-postinfo__attach"
|
||
:href="at.download_url" :download="at.original_filename"
|
||
>⬇ {{ at.original_filename }}</a>
|
||
</div>
|
||
</template>
|
||
<span v-else-if="info && info.error" class="fc-postinfo__title">
|
||
Post not found
|
||
</span>
|
||
<v-btn size="x-small" variant="text" @click="clear">× Clear</v-btn>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed, watch } from 'vue'
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import { useGalleryStore } from '../../stores/gallery.js'
|
||
import { useProvenanceStore } from '../../stores/provenance.js'
|
||
import { formatPostDate } from '../../utils/date.js'
|
||
|
||
const gallery = useGalleryStore()
|
||
const prov = useProvenanceStore()
|
||
const route = useRoute()
|
||
const router = useRouter()
|
||
|
||
const postId = computed(() => gallery.filter.post_id)
|
||
|
||
watch(
|
||
postId,
|
||
(id) => { if (id != null) prov.loadForPost(id) },
|
||
{ immediate: true }
|
||
)
|
||
|
||
const info = computed(() =>
|
||
postId.value == null ? null : prov.postInfo(postId.value)
|
||
)
|
||
const date = computed(() =>
|
||
info.value && info.value.data
|
||
? formatPostDate(info.value.data.post.date)
|
||
: null
|
||
)
|
||
|
||
function clear() {
|
||
const q = { ...route.query }
|
||
delete q.post_id
|
||
router.push({ query: q })
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.fc-postinfo {
|
||
display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
|
||
padding: 10px 14px; margin-bottom: 14px;
|
||
background: rgb(var(--v-theme-surface));
|
||
border-left: 3px solid rgb(var(--v-theme-accent));
|
||
border-radius: 4px;
|
||
}
|
||
.fc-postinfo__main {
|
||
display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
|
||
flex: 1; min-width: 0;
|
||
}
|
||
.fc-postinfo__platform {
|
||
font-size: 12px; text-transform: lowercase;
|
||
color: rgb(var(--v-theme-on-surface-variant));
|
||
}
|
||
.fc-postinfo__title {
|
||
font-weight: 600; color: rgb(var(--v-theme-on-surface));
|
||
}
|
||
.fc-postinfo__artist { color: rgb(var(--v-theme-accent)); text-decoration: none; }
|
||
.fc-postinfo__date, .fc-postinfo__count {
|
||
font-size: 13px; color: rgb(var(--v-theme-on-surface-variant));
|
||
}
|
||
.fc-postinfo__main a { color: rgb(var(--v-theme-accent)); text-decoration: none; }
|
||
.fc-postinfo__attach {
|
||
font-size: 13px; color: rgb(var(--v-theme-accent));
|
||
text-decoration: none;
|
||
}
|
||
</style>
|