From 36a35b5fcc6a0990159717d5e49a41900e7cd131 Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Wed, 7 Dec 2022 00:51:29 +0100
Subject: [PATCH] feat: improve conversations (#358)

---
 components/conversation/ConversationCard.vue | 16 +++++++++++-----
 components/status/StatusCard.vue             |  2 +-
 components/status/StatusDetails.vue          |  2 +-
 styles/vars.css                              |  4 ++--
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/components/conversation/ConversationCard.vue b/components/conversation/ConversationCard.vue
index faf94255..a7ae5eb2 100644
--- a/components/conversation/ConversationCard.vue
+++ b/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>
diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index a7527f70..cc3b43f9 100644
--- a/components/status/StatusCard.vue
+++ b/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>
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index d489e539..45105fbd 100644
--- a/components/status/StatusDetails.vue
+++ b/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>
diff --git a/styles/vars.css b/styles/vars.css
index 7d4fc369..157019b6 100644
--- a/styles/vars.css
+++ b/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;