feat(provenance): PostInfoHeader for the post-filtered gallery

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-18 20:17:02 -04:00
parent b69d637b77
commit 06f4c81418
1 changed files with 93 additions and 0 deletions
@@ -0,0 +1,93 @@
+<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>
+      </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; }
+</style>