From a28f14cb70da6e16df727949168595d449d1d8ba Mon Sep 17 00:00:00 2001
From: patak <matias.capeletto@gmail.com>
Date: Thu, 1 Dec 2022 08:32:07 +0100
Subject: [PATCH] feat: direct messages bubbles (#262)

---
 components/status/StatusCard.vue    |  2 +-
 components/status/StatusDetails.vue | 30 ++++++++++++++++-------------
 styles/vars.css                     |  2 ++
 unocss.config.ts                    |  1 +
 4 files changed, 21 insertions(+), 14 deletions(-)

diff --git a/components/status/StatusCard.vue b/components/status/StatusCard.vue
index 7bb7b208..f348d0d9 100644
--- a/components/status/StatusCard.vue
+++ b/components/status/StatusCard.vue
@@ -81,7 +81,7 @@ const timeago = useTimeAgo(() => status.createdAt, timeAgoOptions)
           <StatusActionsMore :status="status" mr--2 />
         </div>
         <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" pt1 />
-        <div>
+        <div :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''">
           <StatusSpoiler :enabled="status.sensitive">
             <template #spoiler>
               <p>{{ status.spoilerText }}</p>
diff --git a/components/status/StatusDetails.vue b/components/status/StatusDetails.vue
index 8127a981..0616f8ad 100644
--- a/components/status/StatusDetails.vue
+++ b/components/status/StatusDetails.vue
@@ -26,19 +26,23 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
       </AccountHoverWrapper>
     </NuxtLink>
     <StatusReplyingTo v-if="status.inReplyToAccountId" :status="status" />
-    <StatusSpoiler :enabled="status.sensitive">
-      <template #spoiler>
-        <p text-2xl>
-          {{ status.spoilerText }}
-        </p>
-      </template>
-      <StatusBody :status="status" :with-action="false" text-2xl />
-      <StatusPoll v-if="status.poll" :poll="status.poll" />
-      <StatusMedia
-        v-if="status.mediaAttachments?.length"
-        :status="status"
-      />
-    </StatusSpoiler>
+    <div
+      :class="status.visibility === 'direct' ? 'my3 p2 px5 br2 bg-fade rounded-3 rounded-tl-none' : ''"
+    >
+      <StatusSpoiler :enabled="status.sensitive">
+        <template #spoiler>
+          <p text-2xl>
+            {{ status.spoilerText }}
+          </p>
+        </template>
+        <StatusBody :status="status" :with-action="false" text-2xl />
+        <StatusPoll v-if="status.poll" :poll="status.poll" />
+        <StatusMedia
+          v-if="status.mediaAttachments?.length"
+          :status="status"
+        />
+      </StatusSpoiler>
+    </div>
     <div flex="~ gap-1" items-center text-secondary text-sm>
       <div flex>
         <div>{{ createdAt }}</div>
diff --git a/styles/vars.css b/styles/vars.css
index b213ff4b..7d4fc369 100644
--- a/styles/vars.css
+++ b/styles/vars.css
@@ -7,6 +7,7 @@
   --c-bg-active: #f6f6f6;
   --c-bg-code: #00000006;
   --c-bg-selection: #8885;
+  --c-bg-fade: #EA9E4422;
 
   --c-text-base: #232323;
   --c-text-code: #7ca72f;
@@ -24,6 +25,7 @@
   --c-bg-base: #111;
   --c-bg-active: #191919;
   --c-bg-code: #ffffff06;
+  --c-bg-fade: #EA9E4422;
 
   --c-text-base: #fff;
   --c-text-code: #90be3d;
diff --git a/unocss.config.ts b/unocss.config.ts
index cb5cc620..6a20647f 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -19,6 +19,7 @@ export default defineConfig({
       'bg-base': 'bg-$c-bg-base',
       'bg-active': 'bg-$c-bg-active',
       'bg-code': 'bg-$c-bg-code',
+      'bg-fade': 'bg-$c-bg-fade',
 
       // text colors
       'text-base': 'text-$c-text-base',