From f897e2534b751405b8466d32554a60bdcddae9d0 Mon Sep 17 00:00:00 2001
From: Bryan Van Deusen <bryan.vandeusen@fabledsword.com>
Date: Mon, 15 Jun 2026 00:42:14 -0400
Subject: [PATCH] feat(posts): full-width body for image-less posts (drop dead
 'no images' box)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Text-only Patreon posts (WIP/announcement/poll — the bulk of a creator's feed)
rendered a big empty 'No images attached to this post' placeholder taking half
the card. Render the media column only when the post HAS images; image-less posts
let the title + body span the full width. Removes the now-dead PostEmptyThumbs.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 frontend/src/components/posts/PostCard.vue    | 55 +++++++++----------
 .../src/components/posts/PostEmptyThumbs.vue  | 35 ------------
 2 files changed, 27 insertions(+), 63 deletions(-)
 delete mode 100644 frontend/src/components/posts/PostEmptyThumbs.vue

diff --git a/frontend/src/components/posts/PostCard.vue b/frontend/src/components/posts/PostCard.vue
index 29f15f9..9b2388d 100644
--- a/frontend/src/components/posts/PostCard.vue
+++ b/frontend/src/components/posts/PostCard.vue
@@ -25,36 +25,36 @@
     </div>
 
     <div class="fc-post-card__body">
-      <div class="fc-post-card__media">
-        <template v-if="images.length">
-          <!-- Images open the post-scoped image modal (look bigger + arrow
-               through ALL the post's images) — the card never expands. -->
+      <!-- Media column only when the post HAS images. Text-only posts (the bulk
+           of Patreon WIP/announcement/poll posts) let the body span the full
+           card width instead of padding a dead "no images" placeholder. -->
+      <div v-if="images.length" class="fc-post-card__media">
+        <!-- Images open the post-scoped image modal (look bigger + arrow
+             through ALL the post's images) — the card never expands. -->
+        <button
+          type="button" class="fc-post-card__hero"
+          aria-label="Open images" @click="openModal(hero.image_id)"
+        >
+          <img :src="hero.thumbnail_url" alt="hero thumbnail" loading="lazy" />
+        </button>
+        <div
+          v-if="rail.length || moreCount" class="fc-post-card__rail"
+          :style="{ '--fc-rail-cols': railCols }"
+        >
           <button
-            type="button" class="fc-post-card__hero"
-            aria-label="Open images" @click="openModal(hero.image_id)"
+            v-for="t in rail" :key="t.image_id" type="button"
+            class="fc-post-card__rail-cell"
+            aria-label="Open image" @click="openModal(t.image_id)"
           >
-            <img :src="hero.thumbnail_url" alt="hero thumbnail" loading="lazy" />
+            <img :src="t.thumbnail_url" alt="thumbnail" loading="lazy" />
           </button>
-          <div
-            v-if="rail.length || moreCount" class="fc-post-card__rail"
-            :style="{ '--fc-rail-cols': railCols }"
-          >
-            <button
-              v-for="t in rail" :key="t.image_id" type="button"
-              class="fc-post-card__rail-cell"
-              aria-label="Open image" @click="openModal(t.image_id)"
-            >
-              <img :src="t.thumbnail_url" alt="thumbnail" loading="lazy" />
-            </button>
-            <button
-              v-if="moreCount > 0" type="button"
-              class="fc-post-card__rail-more"
-              :aria-label="`Open ${moreCount} more images`"
-              @click="openModalAtMore"
-            >+{{ moreCount }}</button>
-          </div>
-        </template>
-        <PostEmptyThumbs v-else />
+          <button
+            v-if="moreCount > 0" type="button"
+            class="fc-post-card__rail-more"
+            :aria-label="`Open ${moreCount} more images`"
+            @click="openModalAtMore"
+          >+{{ moreCount }}</button>
+        </div>
       </div>
 
       <div class="fc-post-card__text">
@@ -128,7 +128,6 @@ import { RouterLink } from 'vue-router'
 import { useModalStore } from '../../stores/modal.js'
 import { usePostsStore } from '../../stores/posts.js'
 import { toPlainText } from '../../utils/htmlSanitize.js'
-import PostEmptyThumbs from './PostEmptyThumbs.vue'
 import PostSeriesMenu from './PostSeriesMenu.vue'
 
 const props = defineProps({
diff --git a/frontend/src/components/posts/PostEmptyThumbs.vue b/frontend/src/components/posts/PostEmptyThumbs.vue
deleted file mode 100644
index 9927424..0000000
--- a/frontend/src/components/posts/PostEmptyThumbs.vue
+++ /dev/null
@@ -1,35 +0,0 @@
-<template>
-  <div class="fc-post-empty">
-    <v-icon size="48" class="fc-post-empty__icon">mdi-image-off-outline</v-icon>
-    <div class="fc-post-empty__text">No images attached to this post</div>
-  </div>
-</template>
-
-<script setup>
-// No props — pure presentational placeholder.
-</script>
-
-<style scoped>
-.fc-post-empty {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 12px;
-  padding: 32px 16px;
-  border: 1px dashed rgb(var(--v-theme-on-surface-variant));
-  border-radius: 8px;
-  background: rgba(20, 23, 26, 0.3);
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-}
-.fc-post-empty__icon {
-  color: rgb(var(--v-theme-on-surface-variant));
-  opacity: 0.6;
-}
-.fc-post-empty__text {
-  color: rgb(var(--v-theme-on-surface-variant));
-  font-size: 0.9rem;
-}
-</style>