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>
+          <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" />
+    <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>