ui: redesign spoiler

components/status/StatusCard.vue

@@ -49,8 +49,9 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
     <div v-if="rebloggedBy" pl8>
       <div flex="~ wrap" gap-1 items-center text-secondary text-sm>
         <div i-ri:repeat-fill mr-1 />
-        <AccountInlineInfo font-bold :account="rebloggedBy" />
+        <i18n-t keypath="status.reblogged">
-        reblogged
+          <AccountInlineInfo font-bold :account="rebloggedBy" />
+        </i18n-t>
       </div>
     </div>
     <div flex gap-4>
@@ -82,7 +83,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
         <div>
           <StatusSpoiler :enabled="status.sensitive">
             <template #spoiler>
-              {{ status.spoilerText }}
+              <p>{{ status.spoilerText }}</p>
             </template>
             <StatusBody :status="status" />
             <StatusPoll v-if="status.poll" :poll="status.poll" />

components/status/StatusDetails.vue

@@ -27,7 +27,9 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
     <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
     <StatusSpoiler :enabled="status.sensitive">
       <template #spoiler>
-        {{ status.spoilerText }}
+        <p text-2xl>
+          {{ status.spoilerText }}
+        </p>
       </template>
       <StatusBody :status="status" :with-action="false" text-2xl />
       <StatusPoll v-if="status.poll" :poll="status.poll" />

components/status/StatusSpoiler.vue

@@ -10,11 +10,19 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div v-if="enabled" flex flex-col items-start gap-2>
+  <div v-if="enabled" flex flex-col items-start>
-    <slot name="spoiler" />
+    <div class="content-rich">
-    <button btn-outline px-2 py-1 text-3 @click="toggleContent()">
+      <slot name="spoiler" />
-      {{ showContent ? 'Show less' : 'Show more' }}
+    </div>
-    </button>
+    <div flex="~ gap-1 center" w-full>
+      <div border="t base" w-5 h-1px />
+      <button btn-text px-2 py-1 text-3 flex="~ center gap-2" :class="showContent ? '' : 'filter-saturate-0 hover:filter-saturate-100'" @click="toggleContent()">
+        <div v-if="showContent" i-ri:eye-line />
+        <div v-else i-ri:eye-close-line />
+        {{ showContent ? $t('status.spoiler_show_less') : $t('status.spoiler_show_more') }}
+      </button>
+      <div border="t base" flex-auto h-1px />
+    </div>
   </div>
   <slot v-if="!enabled || showContent" />
 </template>

locales/en-US.json

@@ -104,6 +104,11 @@
     "loading": "Loading...",
     "uploading": "Uploading..."
   },
+  "status": {
+    "spoiler_show_less": "Show less",
+    "spoiler_show_more": "Show more",
+    "reblogged": "{0} reblogged"
+  },
   "tab": {
     "media": "Media",
     "notifications_all": "All",

locales/zh-CN.json

@@ -104,6 +104,11 @@
     "loading": "加载中...",
     "uploading": "上传中..."
   },
+  "status": {
+    "reblogged": "{0} 转发了",
+    "spoiler_show_less": "隐藏",
+    "spoiler_show_more": "显示更多"
+  },
   "tab": {
     "media": "媒体",
     "notifications_all": "全部",