feat: improve conversations (#358)

components/conversation/ConversationCard.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
 import type { Conversation } from 'masto'
 
-const props = defineProps<{
+const { conversation } = defineProps<{
   conversation: Conversation
 }>()
+
+const withAccounts = $computed(() =>
+  conversation.accounts.filter(account => account.id !== conversation.lastStatus?.account.id),
+)
 </script>
 
 <template>
   <article flex flex-col gap-2>
-    <div flex gap-2 text-sm px-2>
-      {{ $t('conversation.with') }}
-      <AccountInlineInfo v-for="account in conversation.accounts" :key="account.id" :account="account" />
+    <div absolute flex gap-2 text-sm text-secondary font-bold left-3 px2 pt2>
+      <p mr-1>
+        {{ $t('conversation.with') }}
+      </p>
+      <AccountAvatar v-for="account in withAccounts" :key="account.id" h-5 w-5 :account="account" />
     </div>
-    <StatusCard v-if="conversation.lastStatus" :status="conversation.lastStatus" :actions="false" />
+    <StatusCard v-if="conversation.lastStatus" :decorated="true" :status="conversation.lastStatus" :actions="false" />
   </article>
 </template>

components/status/StatusCard.vue

@@ -96,7 +96,7 @@ const avatarOnAvatar = $(computedEager(() => useFeatureFlags().experimentalAvata
           </div>
           <StatusActionsMore :status="status" mr--2 />
         </div>
-        <div :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''">
+        <div :class="status.visibility === 'direct' ? 'my3 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''">
           <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="filter?.filterAction">
             <template #spoiler>
               <p>{{ filterPhrase ? `${$t('status.filter_hidden_phrase')}: ${filterPhrase}` : status.spoilerText }}</p>

components/status/StatusDetails.vue

@@ -26,7 +26,7 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
       </AccountHoverWrapper>
     </NuxtLink>
     <div
-      :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''"
+      :class="status.visibility === 'direct' ? 'my2 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''"
     >
       <StatusSpoiler :enabled="status.sensitive">
         <template #spoiler>

styles/vars.css

@@ -7,7 +7,7 @@
   --c-bg-active: #f6f6f6;
   --c-bg-code: #00000006;
   --c-bg-selection: #8885;
-  --c-bg-fade: #EA9E4422;
+  --c-bg-fade: #EA9E4411;
 
   --c-text-base: #232323;
   --c-text-code: #7ca72f;
@@ -25,7 +25,7 @@
   --c-bg-base: #111;
   --c-bg-active: #191919;
   --c-bg-code: #ffffff06;
-  --c-bg-fade: #EA9E4422;
+  --c-bg-fade: #EA9E4411;
 
   --c-text-base: #fff;
   --c-text-code: #90be3d;