fix: include media within content warning

components/status/StatusBody.vue

@@ -5,21 +5,11 @@ const { status } = defineProps<{
   status: Status
 }>()
 const { translation } = useTranslation(status)
-
-const [showContent, toggleContent] = $(useToggle(!status.sensitive))
 </script>
 
 <template>
   <div class="status-body" whitespace-pre-wrap break-words>
-    <template v-if="status.sensitive">
-      {{ status.spoilerText }}
-      <button btn-outline px-2 py-1 text-3 @click="toggleContent()">
-        {{ showContent ? 'Show less' : 'Show more' }}
-      </button>
-    </template>
-
     <ContentRichSetup
-      v-if="showContent"
       :content="translation.visible ? translation.text : status.content"
       :emojis="status.emojis"
     />

components/status/StatusCard.vue

@@ -90,11 +90,16 @@ const timeago = useTimeAgo(() => status.createdAt, {
         </div>
         <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
         <div>
-          <StatusBody :status="status" />
-          <StatusMedia
-            v-if="status.mediaAttachments?.length"
-            :status="status"
-          />
+          <StatusSpoiler :enabled="status.sensitive">
+            <template #spoiler>
+              {{ status.spoilerText }}
+            </template>
+            <StatusBody :status="status" />
+            <StatusMedia
+              v-if="status.mediaAttachments?.length"
+              :status="status"
+            />
+          </StatusSpoiler>
           <StatusCard
             v-if="status.reblog"
             :status="status.reblog" border="~ rounded"

components/status/StatusDetails.vue

@@ -18,11 +18,16 @@ const date = useFormattedDateTime(status.createdAt)
   <div flex flex-col gap-2 py3 px-4>
     <AccountInfo :account="status.account" />
     <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
-    <StatusBody :status="status" text-2xl />
-    <StatusMedia
-      v-if="status.mediaAttachments?.length"
-      :status="status"
-    />
+    <StatusSpoiler :enabled="status.sensitive">
+      <template #spoiler>
+        {{ status.spoilerText }}
+      </template>
+      <StatusBody :status="status" text-2xl />
+      <StatusMedia
+        v-if="status.mediaAttachments?.length"
+        :status="status"
+      />
+    </StatusSpoiler>
     <div>
       <span op50 text-sm>
         {{ date }} · {{ status.application?.name || 'Unknown client' }}

components/status/StatusSpoiler.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+const props = defineProps<{ enabled: boolean }>()
+defineSlots<'spoiler'>()
+
+const [showContent, toggleContent] = $(useToggle(!props.enabled))
+</script>
+
+<template>
+  <div v-if="enabled" flex flex-col items-start gap-2>
+    <slot name="spoiler" />
+    <button btn-outline px-2 py-1 text-3 @click="toggleContent()">
+      {{ showContent ? 'Show less' : 'Show more' }}
+    </button>
+  </div>
+  <slot v-if="showContent" />
+</template>