From 378ba259978a22901a0b1345eafeef5bfbea19ee Mon Sep 17 00:00:00 2001
From: Anthony Fu <anthonyfu117@hotmail.com>
Date: Tue, 27 Dec 2022 23:18:16 +0100
Subject: [PATCH] ui: fix double borders

---
 components/common/CommonAlert.vue         |  2 +-
 components/common/CommonPaginator.vue     | 19 ++++++++++++++++---
 components/timeline/TimelineHome.vue      |  2 +-
 components/timeline/TimelinePaginator.vue |  4 ++--
 4 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/components/common/CommonAlert.vue b/components/common/CommonAlert.vue
index 22851b11..ab053427 100644
--- a/components/common/CommonAlert.vue
+++ b/components/common/CommonAlert.vue
@@ -19,7 +19,7 @@ function close() {
 <template>
   <div
     flex="~ gap-2" justify-between items-center
-    class="border-b border-base text-sm text-secondary px4 py2 sm:py4"
+    border="b base" text-sm text-secondary px4 py2 sm:py4
   >
     <div>
       <slot />
diff --git a/components/common/CommonPaginator.vue b/components/common/CommonPaginator.vue
index 869ca6c5..0d96d501 100644
--- a/components/common/CommonPaginator.vue
+++ b/components/common/CommonPaginator.vue
@@ -4,7 +4,14 @@ import { DynamicScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
 import type { Paginator, WsEvents } from 'masto'
 
-const { paginator, stream, keyProp = 'id', virtualScroller = false, eventType = 'update', preprocess } = defineProps<{
+const {
+  paginator,
+  stream,
+  keyProp = 'id',
+  virtualScroller = false,
+  eventType = 'update',
+  preprocess,
+} = defineProps<{
   paginator: Paginator<any, any[]>
   keyProp?: string
   virtualScroller?: boolean
@@ -19,6 +26,7 @@ defineSlots<{
     active?: boolean
     older?: any
     newer?: any
+    index?: number
   }
   updater: {
     number: number
@@ -36,13 +44,17 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
     <slot name="items" :items="items">
       <template v-if="virtualScroller">
         <DynamicScroller
-          v-slot="{ item, active }"
+          v-slot="{ item, active, index }"
           :items="items"
           :min-item-size="200"
           :key-field="keyProp"
           page-mode
         >
-          <slot :item="item" :active="active" />
+          <slot
+            :item="item"
+            :active="active"
+            :index="index"
+          />
         </DynamicScroller>
       </template>
       <template v-else>
@@ -52,6 +64,7 @@ const { items, prevItems, update, state, endAnchor, error } = usePaginator(pagin
           :item="item"
           :older="items[i + 1]"
           :newer="items[i - 1]"
+          :index="i"
         />
       </template>
     </slot>
diff --git a/components/timeline/TimelineHome.vue b/components/timeline/TimelineHome.vue
index e5df1c27..22b60178 100644
--- a/components/timeline/TimelineHome.vue
+++ b/components/timeline/TimelineHome.vue
@@ -23,7 +23,7 @@ function preprocess(items: Status[]) {
 
 <template>
   <div>
-    <PublishWidget draft-key="home" />
+    <PublishWidget draft-key="home" border="b base" />
     <TimelinePaginator v-bind="{ paginator, stream, preprocess }" context="home" />
   </div>
 </template>
diff --git a/components/timeline/TimelinePaginator.vue b/components/timeline/TimelinePaginator.vue
index d064c137..aba3bdf8 100644
--- a/components/timeline/TimelinePaginator.vue
+++ b/components/timeline/TimelinePaginator.vue
@@ -21,14 +21,14 @@ const virtualScroller = $(computedEager(() => useFeatureFlags().experimentalVirt
         {{ $t('timeline.show_new_items', number) }}
       </button>
     </template>
-    <template #default="{ item, older, newer, active }">
+    <template #default="{ item, older, newer, active, index }">
       <template v-if="virtualScroller">
         <DynamicScrollerItem :item="item" :active="active" tag="article">
           <StatusCard
             :status="item" :context="context"
             :connect-reply="item.id === older?.inReplyToId"
             :show-reply-to="!(item.inReplyToId && item.inReplyToId === newer?.id)"
-            :class="{ 'border-t border-base': !(item.inReplyToId && item.inReplyToId === newer?.id) }"
+            :class="{ 'border-t border-base': index !== 0 && !(item.inReplyToId && item.inReplyToId === newer?.id) }"
           />
         </DynamicScrollerItem>
       </template>