feat: publish and show sensitive content

components/publish/PublishWidget.vue

@@ -63,6 +63,10 @@ async function pickAttachments() {
   await uploadAttachments(files)
 }
 
+async function toggleSensitive() {
+  draft.params.sensitive = !draft.params.sensitive
+}
+
 async function uploadAttachments(files: File[]) {
   isUploading = true
   for (const file of files) {
@@ -137,6 +141,16 @@ onUnmounted(() => {
         border="2 dashed transparent" p-1
         :class="[isSending ? 'pointer-events-none' : '', isOverDropZone ? '!border-primary' : '']"
       >
+        <div v-if="draft.params.sensitive">
+          <input
+            v-model="draft.params.spoilerText"
+            type="text"
+            placeholder="Write your warning here"
+            p2 border-rounded w-full bg-transparent
+            outline-none border="~ base"
+          >
+        </div>
+
         <textarea
           v-model="draft.params.status"
           :placeholder="placeholder"
@@ -174,6 +188,13 @@ onUnmounted(() => {
 
           <div flex-auto />
 
+          <CommonTooltip placement="bottom" content="Add content warning">
+            <button btn-action-icon @click="toggleSensitive">
+              <div v-if="draft.params.sensitive" i-ri:alarm-warning-fill text-orange />
+              <div v-else i-ri:alarm-warning-line />
+            </button>
+          </CommonTooltip>
+
           <CommonDropdown>
             <button btn-action-icon w-12>
               <div :class="currentVisibility.icon" />

components/status/StatusBody.vue

@@ -5,10 +5,23 @@ 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>
-    <ContentRichSetup :content="translation.visible ? translation.text : status.content" :emojis="status.emojis" />
+    <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"
+    />
   </div>
 </template>