From 22bc52c966c4243efe5b8221e93e4fa783ae81cf Mon Sep 17 00:00:00 2001
From: AlejandroAkbal <37181533+AlejandroAkbal@users.noreply.github.com>
Date: Sat, 14 Mar 2026 21:38:28 -0700
Subject: [PATCH] feat: let users collapse posts inline

---
 components/pages/posts/post/PostComponent.vue | 52 +++++++++++++++----
 1 file changed, 43 insertions(+), 9 deletions(-)

diff --git a/components/pages/posts/post/PostComponent.vue b/components/pages/posts/post/PostComponent.vue
index 0338471b..ca5fa933 100644
--- a/components/pages/posts/post/PostComponent.vue
+++ b/components/pages/posts/post/PostComponent.vue
@@ -29,6 +29,17 @@
   const { isPremium } = useUserData()
 
   const areTagsOpen = ref(false)
+  const isCollapsed = ref(false)
+
+  function toggleCollapsedState() {
+    isCollapsed.value = !isCollapsed.value
+
+    if (!isCollapsed.value) {
+      return
+    }
+
+    areTagsOpen.value = false
+  }
 
   const mediaFile = computed(() => {
     const stripFragment = (url?: string | null) => url?.split('#')[0] ?? null
@@ -96,19 +107,42 @@
   const tagTypesWithTags = computed(() => {
     return Object.keys(props.post.tags).filter((tagType) => props.post.tags[tagType].length > 0)
   })
+
+  const collapsedSummary = computed(() => {
+    const mediaLabel = props.post.media_type === 'animated' ? 'animation' : props.post.media_type
+
+    return `${mediaLabel} #${props.post.id} hidden`
+  })
 </script>
 
 <template>
   <figure class="border-base-0/20 rounded-md border">
-    <PostMedia
-      :mediaAlt="mediaFile.alt"
-      :mediaPosterSrc="mediaFile.posterFile"
-      :mediaSrc="mediaFile.file"
-      :mediaSrcHeight="mediaFile.height"
-      :mediaSrcWidth="mediaFile.width"
-      :mediaType="post.media_type"
-      :postIndex="props.postIndex"
-    />
+    <div
+      v-if="!isCollapsed"
+      :title="`Double-click to hide post #${post.id}`"
+      @dblclick="toggleCollapsedState"
+    >
+      <PostMedia
+        :mediaAlt="mediaFile.alt"
+        :mediaPosterSrc="mediaFile.posterFile"
+        :mediaSrc="mediaFile.file"
+        :mediaSrcHeight="mediaFile.height"
+        :mediaSrcWidth="mediaFile.width"
+        :mediaType="post.media_type"
+        :postIndex="props.postIndex"
+      />
+    </div>
+
+    <button
+      v-else
+      :aria-label="`Show post #${post.id}`"
+      class="hover:hover-bg-util focus-visible:focus-outline-util text-base-content flex min-h-28 w-full flex-col items-center justify-center gap-2 rounded-t-md px-4 py-4 text-center"
+      type="button"
+      @click="toggleCollapsedState"
+    >
+      <span class="text-base-content-highlight text-sm font-semibold">{{ collapsedSummary }}</span>
+      <span class="text-base-content/80 text-xs">Click to show it again</span>
+    </button>
 
     <figcaption>
       <!-- Post description -->