From 019a36c9bb62a57e9dc36fcbd1add8c4ffb01659 Mon Sep 17 00:00:00 2001
From: Daniel Roe <daniel@roe.dev>
Date: Fri, 25 Nov 2022 12:57:02 +0000
Subject: [PATCH] fix: include media within content warning

---
 components/status/StatusBody.vue    | 10 ----------
 components/status/StatusCard.vue    | 15 ++++++++++-----
 components/status/StatusDetails.vue | 15 ++++++++++-----
 components/status/StatusSpoiler.vue | 16 ++++++++++++++++
 4 files changed, 36 insertions(+), 20 deletions(-)
 create mode 100644 components/status/StatusSpoiler.vue

diff --git a/components/status/StatusBody.vue b/components/status/StatusBody.vue
index 0beab265..9711fa31 100644
--- a/components/status/StatusBody.vue
+++ b/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"
     />
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 93d96e4a..5d049b21 100644
--- a/components/status/StatusCard.vue
+++ b/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"
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index dc548e67..4d4b73e0 100644
--- a/components/status/StatusDetails.vue
+++ b/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' }}
diff --git a/components/status/StatusSpoiler.vue b/components/status/StatusSpoiler.vue
new file mode 100644
index 00000000..14df3326
--- /dev/null
+++ b/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>