feat: threads improvements (#562)

components/status/StatusCard.vue

@@ -9,6 +9,7 @@ const props = withDefaults(
     hover?: boolean
     faded?: boolean
     showReplyTo?: boolean
+    connectReply?: boolean
   }>(),
   { actions: true, showReplyTo: true },
 )
@@ -60,6 +61,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
 const showRebloggedByAvatarOnAvatar = $computed(() => rebloggedBy && avatarOnAvatar && rebloggedBy.id !== status.account.id)
 
 const isDM = $computed(() => status.visibility === 'direct')
+const isSelf = $computed(() => status.account.id === currentUser.value?.account.id)
 </script>
 
 <template>
@@ -84,6 +86,9 @@ const isDM = $computed(() => status.visibility === 'direct')
         <div v-if="showRebloggedByAvatarOnAvatar" absolute class="-top-1 -left-2" w-9 h-9 border-bg-base border-3 rounded-full>
           <AccountAvatar :account="rebloggedBy" />
         </div>
+        <div v-if="connectReply" w-full h-full flex justify-center>
+          <div h-full class="w-2.5px" bg-border />
+        </div>
       </div>
       <div flex="~ col 1" min-w-0>
         <div flex items-center space-x-1>
@@ -104,39 +109,10 @@ const isDM = $computed(() => status.visibility === 'direct')
           </div>
           <StatusActionsMore :status="status" mr--2 />
         </div>
-        <div
-          space-y-3
-          :class="{
-            'mt2 pt1 pb0.5 px3.5 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none': isDM,
-          }"
-        >
-          <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
-            <template v-if="status.spoilerText || filterPhrase" #spoiler>
-              <p>{{ status.spoilerText || `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
-            </template>
-            <StatusBody :status="status" />
-            <StatusPoll
-              v-if="status.poll"
-              :poll="status.poll"
-            />
-            <StatusMedia
-              v-if="status.mediaAttachments?.length"
-              :status="status"
-            />
-            <StatusPreviewCard
-              v-if="status.card"
-              :card="status.card"
-              :small-picture-only="status.mediaAttachments?.length > 0"
-            />
-            <StatusCard
-              v-if="status.reblog"
-              :status="status.reblog" border="~ rounded"
-              :actions="false"
-            />
-            <div v-if="isDM" />
-          </StatusSpoiler>
+        <StatusContent :status="status" :context="context" mb2 :class="{ mt2: isDM }" />
+        <div>
+          <StatusActions v-if="(actions !== false && !isZenMode)" :status="status" />
         </div>
-        <StatusActions v-if="(actions !== false && !isZenMode)" :status="status" :class="isDM ? 'mt1' : 'mt2'" />
       </div>
     </div>
   </div>

components/status/StatusContent.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import type { FilterContext, Status } from 'masto'
+
+const { status, context } = defineProps<{
+  status: Status
+  context?: FilterContext | 'details'
+}>()
+
+const isDM = $computed(() => status.visibility === 'direct')
+const isSelf = $computed(() => status.account.id === currentUser.value?.account.id)
+const isDetails = $computed(() => context === 'details')
+
+// Content Filter logic
+const filterResult = $computed(() => status.filtered?.length ? status.filtered[0] : null)
+const filter = $computed(() => filterResult?.filter)
+
+// a bit of a hack due to Filter being different in v1 and v2
+// clean up when masto.js supports explicit versions: https://github.com/neet/masto.js/issues/722
+const filterPhrase = $computed(() => filter?.phrase || (filter as any)?.title)
+const isFiltered = $computed(() => filterPhrase && (context && context !== 'details' ? filter?.context.includes(context) : false))
+</script>
+
+<template>
+  <div
+    space-y-3
+    :class="{
+      'pt2 pb0.5 px3.5 br2 border-1 rounded-3 rounded-tl-none': isDM,
+      'bg-fade border-primary-light': isDM && !isSelf,
+      'bg-code border-base': isDM && isSelf,
+    }"
+  >
+    <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
+      <template v-if="status.spoilerText || filterPhrase" #spoiler>
+        <p>{{ status.spoilerText || `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` }}</p>
+      </template>
+      <StatusBody :status="status" :with-action="!isDetails" :class="isDetails ? 'text-xl' : ''" />
+      <StatusPoll
+        v-if="status.poll"
+        :poll="status.poll"
+      />
+      <StatusMedia
+        v-if="status.mediaAttachments?.length"
+        :status="status"
+      />
+      <StatusPreviewCard
+        v-if="status.card"
+        :card="status.card"
+        :small-picture-only="status.mediaAttachments?.length > 0"
+      />
+      <StatusCard
+        v-if="status.reblog"
+        :status="status.reblog" border="~ rounded"
+        :actions="false"
+      />
+      <div v-if="isDM" />
+    </StatusSpoiler>
+  </div>
+</template>

components/status/StatusDetails.vue

@@ -1,10 +1,13 @@
 <script setup lang="ts">
 import type { Status } from 'masto'
 
-const props = defineProps<{
+const props = withDefaults(defineProps<{
   status: Status
   command?: boolean
-}>()
+  actions?: boolean
+}>(), {
+  actions: true,
+})
 
 const status = $computed(() => {
   if (props.status.reblog && props.status.reblog)
@@ -33,37 +36,7 @@ const isDM = $computed(() => status.visibility === 'direct')
         <AccountInfo :account="status.account" />
       </AccountHoverWrapper>
     </NuxtLink>
-    <div
-      space-y-3
-      :class="{
-        'pt2 pb0.5 px3.5 br2 bg-fade border-primary-light border-1 rounded-3': isDM,
-      }"
-    >
-      <StatusSpoiler :enabled="status.sensitive">
-        <template #spoiler>
-          <p text-2xl>
-            {{ status.spoilerText }}
-          </p>
-        </template>
-        <StatusBody :status="status" :with-action="false" text-xl />
-        <StatusPoll
-          v-if="status.poll"
-          :poll="status.poll"
-        />
-        <StatusMedia
-          v-if="status.mediaAttachments?.length"
-          :status="status"
-          full-size
-        />
-        <StatusPreviewCard
-          v-if="status.card"
-          :card="status.card"
-          :small-picture-only="status.mediaAttachments?.length > 0"
-          mt-2
-        />
-        <div v-if="isDM" />
-      </StatusSpoiler>
-    </div>
+    <StatusContent :status="status" context="details" />
     <div flex="~ gap-1" items-center text-secondary text-sm>
       <div flex>
         <div>{{ createdAt }}</div>
@@ -85,6 +58,8 @@ const isDM = $computed(() => status.visibility === 'direct')
         {{ status.application?.name }}
       </div>
     </div>
-    <StatusActions :status="status" details :command="command" border="t base" pt-2 />
+    <div border="t base" pt-2>
+      <StatusActions v-if="actions" :status="status" details :command="command" />
+    </div>
   </div>
 </template>