From dd5b1359c1c1bb2fd8e3b08014936e35df9a62e0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Sat, 15 Jun 2024 23:29:38 +0200
Subject: [PATCH] Improve pending status display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 src/components/status-list.tsx                | 1 +
 src/features/event/event-discussion.tsx       | 2 +-
 src/features/status/components/thread.tsx     | 2 +-
 src/features/ui/components/pending-status.tsx | 8 ++++----
 4 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/src/components/status-list.tsx b/src/components/status-list.tsx
index 515f5cc9f5..8e4b6b9435 100644
--- a/src/components/status-list.tsx
+++ b/src/components/status-list.tsx
@@ -139,6 +139,7 @@ const StatusList: React.FC<IStatusList> = ({
       <PendingStatus
         key={statusId}
         idempotencyKey={idempotencyKey}
+        variant={divideType === 'border' ? 'slim' : 'rounded'}
       />
     );
   };
diff --git a/src/features/event/event-discussion.tsx b/src/features/event/event-discussion.tsx
index 5f845dbda3..1f0d69f59d 100644
--- a/src/features/event/event-discussion.tsx
+++ b/src/features/event/event-discussion.tsx
@@ -123,7 +123,7 @@ const EventDiscussion: React.FC<IEventDiscussion> = (props) => {
       <PendingStatus
         key={id}
         idempotencyKey={idempotencyKey}
-        thread
+        variant='default'
       />
     );
   };
diff --git a/src/features/status/components/thread.tsx b/src/features/status/components/thread.tsx
index 5d0641fdc2..9b1bbdd4ce 100644
--- a/src/features/status/components/thread.tsx
+++ b/src/features/status/components/thread.tsx
@@ -275,7 +275,7 @@ const Thread = (props: IThread) => {
       <PendingStatus
         key={id}
         idempotencyKey={idempotencyKey}
-        thread
+        variant='default'
       />
     );
   };
diff --git a/src/features/ui/components/pending-status.tsx b/src/features/ui/components/pending-status.tsx
index bff3d0ac1b..755585b6e9 100644
--- a/src/features/ui/components/pending-status.tsx
+++ b/src/features/ui/components/pending-status.tsx
@@ -22,7 +22,7 @@ interface IPendingStatus {
   className?: string;
   idempotencyKey: string;
   muted?: boolean;
-  thread?: boolean;
+  variant?: 'default' | 'rounded' | 'slim';
 }
 
 interface IPendingStatusMedia {
@@ -43,7 +43,7 @@ const PendingStatusMedia: React.FC<IPendingStatusMedia> = ({ status }) => {
   }
 };
 
-const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, muted, thread = false }) => {
+const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, muted, variant = 'rounded' }) => {
   const status = useAppSelector((state) => {
     const pendingStatus = state.pending_statuses.get(idempotencyKey);
     return pendingStatus ? buildStatus(state, pendingStatus, idempotencyKey) : null;
@@ -59,10 +59,10 @@ const PendingStatus: React.FC<IPendingStatus> = ({ idempotencyKey, className, mu
       <div className={clsx('status', { 'status-reply': !!status.in_reply_to_id, muted })} data-id={status.id}>
         <Card
           className={clsx(`status-${status.visibility}`, {
-            'py-6 sm:p-5': !thread,
+            'py-6 sm:p-5': variant === 'rounded',
             'status-reply': !!status.in_reply_to_id,
           })}
-          variant={thread ? 'default' : 'rounded'}
+          variant={variant}
         >
           <div className='mb-4'>
             <HStack justifyContent='between' alignItems='start'>