fix spacing around messages (#159)

Co-authored-by: theAnuragMishra <theanuragmishra@noreply.coracle.social>
Co-committed-by: theAnuragMishra <theanuragmishra@noreply.coracle.social>

src/app/components/RoomItem.svelte

@@ -37,6 +37,7 @@
     event: TrustedEvent
     replyTo?: (event: TrustedEvent) => void
     showPubkey?: boolean
+    addSpaceBelow?: boolean
     inert?: boolean
     canEdit: (event: TrustedEvent) => boolean
     onEdit: (event: TrustedEvent) => void
@@ -47,6 +48,7 @@
     event,
     replyTo = undefined,
     showPubkey = false,
+    addSpaceBelow = false,
     inert = false,
     canEdit,
     onEdit,
@@ -77,17 +79,20 @@
 <TapTarget
   data-event={event.id}
   onTap={inert ? null : onTap}
-  class="group relative flex w-full cursor-default flex-col p-2 pb-3 text-left hover:bg-base-100/50">
+  class={cx(
+    "group relative flex w-full cursor-default flex-col px-2 py-0.5 text-left hover:bg-base-100/50",
+    {"mt-1.5": showPubkey, "mb-1.5": addSpaceBelow},
+  )}>
   <div class="flex w-full gap-3 overflow-auto">
     {#if showPubkey}
-      <Button onclick={openProfile} class="flex items-start">
+      <Button onclick={openProfile} class="flex items-start pt-1.5 justify-center w-8 shrink-0">
         <ProfileCircle
           pubkey={event.pubkey}
           class="border border-solid border-base-content"
           size={8} />
       </Button>
     {:else}
-      <div class="w-8 min-w-8 max-w-8"></div>
+      <div class="w-8 shrink-0"></div>
     {/if}
     <div class="min-w-0 flex-grow pr-1">
       {#if showPubkey}

src/routes/spaces/[relay]/[h]/+page.svelte

@@ -272,14 +272,21 @@
           elements.push({type: "date", value: date, id: date, showPubkey: false})
         }
 
+        const showPubkey =
+          previousPubkey !== event.pubkey ||
+          event.created_at - previousCreatedAt > int(3, MINUTE) ||
+          previousKind === ROOM_ADD_MEMBER
+
+        if (showPubkey && elements.length > 0) {
+          elements[elements.length - 1].addSpaceBelow = true
+        }
+
         elements.push({
           id: event.id,
           type: "note",
           value: event,
-          showPubkey:
+          showPubkey,
-            previousPubkey !== event.pubkey ||
+          addSpaceBelow: false,
-            event.created_at - previousCreatedAt > int(3, MINUTE) ||
-            previousKind === ROOM_ADD_MEMBER,
         })
 
         previousDate = date
@@ -288,6 +295,9 @@
         previousCreatedAt = event.created_at
         seen.add(event.id)
       }
+      if (elements.length > 0) {
+        elements[elements.length - 1].addSpaceBelow = true
+      }
     }
 
     elements.reverse()
@@ -382,7 +392,7 @@
         <Spinner loading={loadingForward}>Looking for messages...</Spinner>
       </p>
     {/if}
-    {#each elements as { type, id, value, showPubkey } (id)}
+    {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
       {#if type === "new-messages"}
         <div
           {id}
@@ -399,12 +409,13 @@
         {#if event.kind === ROOM_ADD_MEMBER}
           <RoomItemAddMember {url} {event} />
         {:else}
-          <div in:slide class="cv" class:-mt-1={!showPubkey}>
+          <div in:slide class="cv">
             <RoomItem
               {url}
               {event}
               {replyTo}
               {showPubkey}
+              {addSpaceBelow}
               canEdit={canEditEvent}
               onEdit={onEditEvent} />
           </div>

src/routes/spaces/[relay]/chat/+page.svelte

@@ -210,14 +210,21 @@
           elements.push({type: "date", value: date, id: date, showPubkey: false})
         }
 
+        const showPubkey =
+          previousPubkey !== event.pubkey ||
+          event.created_at - previousCreatedAt > int(3, MINUTE) ||
+          previousKind === RELAY_ADD_MEMBER
+
+        if (showPubkey && elements.length > 0) {
+          elements[elements.length - 1].addSpaceBelow = true
+        }
+
         elements.push({
           id: event.id,
           type: "note",
           value: event,
-          showPubkey:
+          showPubkey,
-            previousPubkey !== event.pubkey ||
+          addSpaceBelow: false,
-            event.created_at - previousCreatedAt > int(3, MINUTE) ||
-            previousKind === RELAY_ADD_MEMBER,
         })
 
         previousDate = date
@@ -226,6 +233,9 @@
         previousCreatedAt = event.created_at
         seen.add(event.id)
       }
+      if (elements.length > 0) {
+        elements[elements.length - 1].addSpaceBelow = true
+      }
     }
 
     elements.reverse()
@@ -295,7 +305,7 @@
       <Spinner loading={loadingForward}>Looking for messages...</Spinner>
     </p>
   {/if}
-  {#each elements as { type, id, value, showPubkey } (id)}
+  {#each elements as { type, id, value, showPubkey, addSpaceBelow } (id)}
     {#if type === "new-messages"}
       <div
         {id}
@@ -312,14 +322,15 @@
       {#if event.kind === RELAY_ADD_MEMBER}
         <RoomItemAddMember {url} {event} />
       {:else}
-        <div class:-mt-1={!showPubkey}>
+        <div>
           <RoomItem
             {url}
             {event}
             {replyTo}
             {showPubkey}
             canEdit={canEditEvent}
-            onEdit={onEditEvent} />
+            onEdit={onEditEvent}
+            {addSpaceBelow} />
         </div>
       {/if}
     {/if}