feat: DM improvements

components/status/StatusCard.vue

@@ -101,7 +101,7 @@ const showRebloggedByAvatarOnAvatar = rebloggedBy && avatarOnAvatar && reblogged
         <div
           space-y-2
           :class="{
-            'my3 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none': status.visibility === 'direct',
+            'my3 p1 px4 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none': status.visibility === 'direct',
           }"
         >
           <StatusSpoiler :enabled="status.sensitive || isFiltered" :filter="isFiltered">
@@ -114,8 +114,9 @@ const showRebloggedByAvatarOnAvatar = rebloggedBy && avatarOnAvatar && reblogged
               v-if="status.mediaAttachments?.length"
               :status="status"
               minimized
+              :class="status.visibility === 'direct' ? 'pb4' : ''"
             />
-            <StatusPreviewCard v-if="status.card" :card="status.card" />
+            <StatusPreviewCard v-if="status.card" :card="status.card" :class="status.visibility === 'direct' ? 'pb4' : ''" />
           </StatusSpoiler>
           <StatusCard
             v-if="status.reblog"

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' ? 'my2 p1 px4 br2 bg-fade border-primary border-1 rounded-3 rounded-tl-none' : ''"
+      :class="status.visibility === 'direct' ? 'my2 p1 px4 br2 bg-fade border-primary-light border-1 rounded-3 rounded-tl-none' : ''"
     >
       <StatusSpoiler :enabled="status.sensitive">
         <template #spoiler>
@@ -39,8 +39,9 @@ const visibility = $computed(() => STATUS_VISIBILITIES.find(v => v.value === sta
         <StatusMedia
           v-if="status.mediaAttachments?.length"
           :status="status"
+          :class="status.visibility === 'direct' ? 'pb4' : ''"
         />
-        <StatusPreviewCard v-if="status.card" :card="status.card" />
+        <StatusPreviewCard v-if="status.card" :card="status.card" :class="status.visibility === 'direct' ? 'pb4' : ''" />
       </StatusSpoiler>
     </div>
     <div flex="~ gap-1" items-center text-secondary text-sm>

styles/vars.css

@@ -1,6 +1,7 @@
 :root {
   --c-primary: #EA9E44;
   --c-primary-active: #C16929;
+  --c-primary-light: #EA9E4466;
   --c-border: #eee;
 
   --c-bg-base: #fff;

unocss.config.ts

@@ -15,6 +15,7 @@ export default defineConfig({
       'border-base': 'border-$c-border',
       'border-strong': 'border-$c-text-base',
       'border-bg-base': 'border-$c-bg-base',
+      'border-primary-light': 'border-$c-primary-light',
 
       // background
       'bg-base': 'bg-$c-bg-base',