From af54b21bf30858fc787b2c3823908b956d7977e0 Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Thu, 14 Nov 2024 17:42:43 +0000
Subject: [PATCH] Fixed separator showing even after the last list item
 (#21620)

close
https://linear.app/ghost/issue/AP-528/remove-unnecessary-separator-after-last-list-items

- Previously, in some components, we relied on CSS and all elements in
the list being the same type of an HTML element to show the separator.
Now, we've extracted the separator into its own component and place
after all items during mapping except the last one.
---
 .../src/components/Activities.tsx             | 39 +++++------
 .../src/components/Inbox.tsx                  | 38 ++++++-----
 .../src/components/Profile.tsx                | 65 ++++++++++---------
 .../src/components/Search.tsx                 | 24 ++++---
 .../components/activities/ActivityItem.tsx    |  2 +-
 .../src/components/global/Separator.tsx       |  7 ++
 .../components/global/ViewProfileModal.tsx    | 36 +++++-----
 .../components/navigation/MainNavigation.tsx  |  2 +-
 8 files changed, 118 insertions(+), 95 deletions(-)
 create mode 100644 apps/admin-x-activitypub/src/components/global/Separator.tsx

diff --git a/apps/admin-x-activitypub/src/components/Activities.tsx b/apps/admin-x-activitypub/src/components/Activities.tsx
index b32a5e7641..4eaa795f58 100644
--- a/apps/admin-x-activitypub/src/components/Activities.tsx
+++ b/apps/admin-x-activitypub/src/components/Activities.tsx
@@ -8,6 +8,7 @@ import APAvatar, {AvatarBadge} from './global/APAvatar';
 import ActivityItem, {type Activity} from './activities/ActivityItem';
 import ArticleModal from './feed/ArticleModal';
 import MainNavigation from './navigation/MainNavigation';
+import Separator from './global/Separator';
 import ViewProfileModal from './global/ViewProfileModal';
 
 import getUsername from '../utils/get-username';
@@ -184,28 +185,24 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
                     (isLoading === false && activities.length > 0) && (
                         <>
                             <div className='mt-8 flex w-full max-w-[560px] flex-col'>
-                                {activities?.map(activity => (
-                                    <ActivityItem
-                                        key={activity.id}
-                                        url={getActivityUrl(activity) || getActorUrl(activity)}
-                                        onClick={() => handleActivityClick(activity)}
-                                    >
-                                        <APAvatar author={activity.actor} badge={getActivityBadge(activity)} />
-                                        <div className='min-w-0'>
-                                            <div className='truncate text-grey-600'>
-                                                <span className='mr-1 font-bold text-black'>{activity.actor.name}</span>
-                                                {getUsername(activity.actor)}
+                                {activities?.map((activity, index) => (
+                                    <React.Fragment key={activity.id}>
+                                        <ActivityItem
+                                            url={getActivityUrl(activity) || getActorUrl(activity)}
+                                            onClick={() => handleActivityClick(activity)}
+                                        >
+                                            <APAvatar author={activity.actor} badge={getActivityBadge(activity)} />
+                                            <div className='min-w-0'>
+                                                <div className='truncate text-grey-600'>
+                                                    <span className='mr-1 font-bold text-black'>{activity.actor.name}</span>
+                                                    {getUsername(activity.actor)}
+                                                </div>
+                                                <div className=''>{getActivityDescription(activity)}</div>
+                                                {getExtendedDescription(activity)}
                                             </div>
-                                            <div className=''>{getActivityDescription(activity)}</div>
-                                            {getExtendedDescription(activity)}
-                                        </div>
-                                        {/* <FollowButton
-                                            className='ml-auto'
-                                            following={isFollower(activity.actor.id)}
-                                            handle={getUsername(activity.actor)}
-                                            type='link'
-                                        /> */}
-                                    </ActivityItem>
+                                        </ActivityItem>
+                                        {index < activities.length - 1 && <Separator />}
+                                    </React.Fragment>
                                 ))}
                             </div>
                             <div ref={loadMoreRef} className='h-1'></div>
diff --git a/apps/admin-x-activitypub/src/components/Inbox.tsx b/apps/admin-x-activitypub/src/components/Inbox.tsx
index 7baedec7e7..08295edd4e 100644
--- a/apps/admin-x-activitypub/src/components/Inbox.tsx
+++ b/apps/admin-x-activitypub/src/components/Inbox.tsx
@@ -5,6 +5,7 @@ import FeedItem from './feed/FeedItem';
 import MainNavigation from './navigation/MainNavigation';
 import NiceModal from '@ebay/nice-modal-react';
 import React, {useEffect, useRef} from 'react';
+import Separator from './global/Separator';
 import ViewProfileModal from './global/ViewProfileModal';
 import getName from '../utils/get-name';
 import getUsername from '../utils/get-username';
@@ -94,7 +95,7 @@ const Inbox: React.FC<InboxProps> = ({}) => {
                                                     onCommentClick={() => handleViewContent(activity, true, updateActivity)}
                                                 />
                                                 {index < activities.length - 1 && (
-                                                    <div className="h-px w-full bg-grey-200"></div>
+                                                    <Separator />
                                                 )}
                                             </li>
                                         ))}
@@ -107,29 +108,28 @@ const Inbox: React.FC<InboxProps> = ({}) => {
                                     </ul>
                                 </div>
                                 <div className='sticky top-[135px] ml-auto w-full max-w-[300px] max-lg:hidden xxxl:sticky xxxl:right-[40px]'>
-                                    <h2 className='mb-2 text-lg font-semibold'>You might also like...</h2>
+                                    <h2 className='mb-2 text-lg font-semibold'>You might also like</h2>
                                     {isLoadingSuggested ? (
                                         <LoadingIndicator size="sm" />
                                     ) : (
                                         <ul className='grow'>
-                                            {suggested.map((profile) => {
+                                            {suggested.map((profile, index) => {
                                                 const actor = profile.actor;
                                                 // const isFollowing = profile.isFollowing;
                                                 return (
-                                                    <li key={actor.id}>
-                                                        <ActivityItem url={actor.url} onClick={() => NiceModal.show(ViewProfileModal, {
-                                                            profile: getUsername(actor),
-                                                            onFollow: () => {},
-                                                            onUnfollow: () => {}
-                                                        })}>
-                                                            <APAvatar author={actor} />
-                                                            <div>
-                                                                <div className='text-grey-600'>
-                                                                    <span className='mr-1 truncate font-bold text-black'>{getName(actor)}</span>
-                                                                    <div className='truncate text-sm'>{getUsername(actor)}</div>
+                                                    <React.Fragment key={actor.id}>
+                                                        <li key={actor.id}>
+                                                            <ActivityItem url={actor.url} onClick={() => NiceModal.show(ViewProfileModal, {
+                                                                profile: getUsername(actor),
+                                                                onFollow: () => {},
+                                                                onUnfollow: () => {}
+                                                            })}>
+                                                                <APAvatar author={actor} />
+                                                                <div className='flex min-w-0 flex-col'>
+                                                                    <span className='block w-full truncate font-bold text-black'>{getName(actor)}</span>
+                                                                    <span className='block w-full truncate text-sm text-grey-600'>{getUsername(actor)}</span>
                                                                 </div>
-                                                            </div>
-                                                            {/* <FollowButton
+                                                                {/* <FollowButton
                                                                 className='ml-auto'
                                                                 following={isFollowing}
                                                                 handle={getUsername(actor)}
@@ -137,8 +137,10 @@ const Inbox: React.FC<InboxProps> = ({}) => {
                                                                 onFollow={() => updateSuggestedProfile(actor.id!, {isFollowing: true})}
                                                                 onUnfollow={() => updateSuggestedProfile(actor.id!, {isFollowing: false})}
                                                             /> */}
-                                                        </ActivityItem>
-                                                    </li>
+                                                            </ActivityItem>
+                                                        </li>
+                                                        {index < suggested.length - 1 && <Separator />}
+                                                    </React.Fragment>
                                                 );
                                             })}
                                         </ul>
diff --git a/apps/admin-x-activitypub/src/components/Profile.tsx b/apps/admin-x-activitypub/src/components/Profile.tsx
index e35ce8cfc0..e9b2987738 100644
--- a/apps/admin-x-activitypub/src/components/Profile.tsx
+++ b/apps/admin-x-activitypub/src/components/Profile.tsx
@@ -8,6 +8,7 @@ import getName from '../utils/get-name';
 import getUsername from '../utils/get-username';
 import {ActorProperties} from '@tryghost/admin-x-framework/api/activitypub';
 
+import Separator from './global/Separator';
 import ViewProfileModal from './global/ViewProfileModal';
 import {Button, Heading, List, NoValueLabel, Tab, TabView} from '@tryghost/admin-x-design-system';
 import {handleViewContent} from '../utils/content-handlers';
@@ -102,7 +103,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
                                         onCommentClick={() => handleViewContent(activity, true)}
                                     />
                                     {index < posts.length - 1 && (
-                                        <div className="h-px w-full bg-grey-200"></div>
+                                        <Separator />
                                     )}
                                 </li>
                             ))}
@@ -147,7 +148,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
                                         onCommentClick={() => handleViewContent(activity, true)}
                                     />
                                     {index < liked.length - 1 && (
-                                        <div className="h-px w-full bg-grey-200"></div>
+                                        <Separator />
                                     )}
                                 </li>
                             ))}
@@ -178,25 +179,28 @@ const Profile: React.FC<ProfileProps> = ({}) => {
                         </NoValueLabel>
                     ) : (
                         <List>
-                            {following.slice(0, visibleFollowing).map((item) => {
+                            {following.slice(0, visibleFollowing).map((item, index) => {
                                 return (
-                                    <ActivityItem
-                                        key={item.id}
-                                        url={item.url}
-                                        onClick={() => handleUserClick(item)}
-                                    >
-                                        <APAvatar author={item} />
-                                        <div>
-                                            <div className='text-grey-600'>
-                                                <span className='mr-1 font-bold text-black'>{getName(item)}</span>
-                                                <div className='text-sm'>{getUsername(item)}</div>
+                                    <React.Fragment key={item.id}>
+                                        <ActivityItem
+                                            key={item.id}
+                                            url={item.url}
+                                            onClick={() => handleUserClick(item)}
+                                        >
+                                            <APAvatar author={item} />
+                                            <div>
+                                                <div className='text-grey-600'>
+                                                    <span className='mr-1 font-bold text-black'>{getName(item)}</span>
+                                                    <div className='text-sm'>{getUsername(item)}</div>
+                                                </div>
                                             </div>
-                                        </div>
-                                        {/* <Button className='ml-auto' color='grey' label='Unfollow' link={true} onClick={(e) => {
+                                            {/* <Button className='ml-auto' color='grey' label='Unfollow' link={true} onClick={(e) => {
                                             e?.preventDefault();
                                             alert('Implement me!');
                                         }} /> */}
-                                    </ActivityItem>
+                                        </ActivityItem>
+                                        {index < following.length - 1 && <Separator />}
+                                    </React.Fragment>
                                 );
                             })}
                         </List>
@@ -226,21 +230,24 @@ const Profile: React.FC<ProfileProps> = ({}) => {
                         </NoValueLabel>
                     ) : (
                         <List>
-                            {followers.slice(0, visibleFollowers).map((item) => {
+                            {followers.slice(0, visibleFollowers).map((item, index) => {
                                 return (
-                                    <ActivityItem
-                                        key={item.id}
-                                        url={item.url}
-                                        onClick={() => handleUserClick(item)}
-                                    >
-                                        <APAvatar author={item} />
-                                        <div>
-                                            <div className='text-grey-600'>
-                                                <span className='mr-1 font-bold text-black'>{item.name || getName(item) || 'Unknown'}</span>
-                                                <div className='text-sm'>{getUsername(item)}</div>
+                                    <React.Fragment key={item.id}>
+                                        <ActivityItem
+                                            key={item.id}
+                                            url={item.url}
+                                            onClick={() => handleUserClick(item)}
+                                        >
+                                            <APAvatar author={item} />
+                                            <div>
+                                                <div className='text-grey-600'>
+                                                    <span className='mr-1 font-bold text-black'>{item.name || getName(item) || 'Unknown'}</span>
+                                                    <div className='text-sm'>{getUsername(item)}</div>
+                                                </div>
                                             </div>
-                                        </div>
-                                    </ActivityItem>
+                                        </ActivityItem>
+                                        {index < followers.length - 1 && <Separator />}
+                                    </React.Fragment>
                                 );
                             })}
                         </List>
diff --git a/apps/admin-x-activitypub/src/components/Search.tsx b/apps/admin-x-activitypub/src/components/Search.tsx
index 0d3598a273..a7b59352be 100644
--- a/apps/admin-x-activitypub/src/components/Search.tsx
+++ b/apps/admin-x-activitypub/src/components/Search.tsx
@@ -12,6 +12,7 @@ import MainNavigation from './navigation/MainNavigation';
 import NiceModal from '@ebay/nice-modal-react';
 import ViewProfileModal from './global/ViewProfileModal';
 
+import Separator from './global/Separator';
 import {useSearchForUser, useSuggestedProfiles} from '../hooks/useActivityPubQueries';
 
 interface SearchResultItem {
@@ -103,13 +104,18 @@ const SuggestedAccounts: React.FC<{
                     <LoadingIndicator size='md'/>
                 </div>
             )}
-            {profiles.map(profile => (
-                <SearchResult
-                    key={profile.actor.id}
-                    result={profile}
-                    update={onUpdate}
-                />
-            ))}
+            {profiles.map((profile, index) => {
+                return (
+                    <React.Fragment key={profile.actor.id}>
+                        <SearchResult
+                            key={profile.actor.id}
+                            result={profile}
+                            update={onUpdate}
+                        />
+                        {index < profiles.length - 1 && <Separator />}
+                    </React.Fragment>
+                );
+            })}
         </>
     );
 };
@@ -141,8 +147,8 @@ const Search: React.FC<SearchProps> = ({}) => {
     return (
         <>
             <MainNavigation page='search' />
-            <div className='z-0 flex w-full flex-col items-center pt-8'>
-                <div className='relative flex w-full max-w-[560px] items-center '>
+            <div className='z-0 mx-auto flex w-full max-w-[560px] flex-col items-center pt-8'>
+                <div className='relative flex w-full items-center'>
                     <Icon className='absolute left-3 top-3 z-10' colorClass='text-grey-500' name='magnifying-glass' size='sm' />
                     <TextField
                         className='mb-6 mr-12 flex h-10 w-full items-center rounded-lg border border-transparent bg-grey-100 px-[33px] py-1.5 transition-colors focus:border-green focus:bg-white focus:outline-2 dark:border-transparent dark:bg-grey-925 dark:text-white dark:placeholder:text-grey-800 dark:focus:border-green dark:focus:bg-grey-950 tablet:mr-0'
diff --git a/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx b/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx
index 08b8515b9c..b07cc4c73e 100644
--- a/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx
+++ b/apps/admin-x-activitypub/src/components/activities/ActivityItem.tsx
@@ -23,7 +23,7 @@ const ActivityItem: React.FC<ActivityItemProps> = ({children, url = null, onClic
     const childrenArray = React.Children.toArray(children);
 
     const Item = (
-        <div className='relative flex w-full max-w-[560px] cursor-pointer flex-col border-b border-grey-100 before:absolute before:inset-x-[-8px] before:inset-y-[-1px] before:rounded-md before:bg-grey-50 before:opacity-0 before:transition-opacity hover:z-10 hover:cursor-pointer hover:border-b-transparent hover:before:opacity-100 dark:border-grey-950 dark:before:bg-grey-950' onClick={() => {
+        <div className='relative flex w-full max-w-[560px] cursor-pointer flex-col before:absolute before:inset-x-[-8px] before:inset-y-[-1px] before:rounded-md before:bg-grey-50 before:opacity-0 before:transition-opacity hover:z-10 hover:cursor-pointer hover:border-b-transparent hover:before:opacity-100 dark:before:bg-grey-950' onClick={() => {
             if (!url && onClick) {
                 onClick();
             }
diff --git a/apps/admin-x-activitypub/src/components/global/Separator.tsx b/apps/admin-x-activitypub/src/components/global/Separator.tsx
new file mode 100644
index 0000000000..943ba11489
--- /dev/null
+++ b/apps/admin-x-activitypub/src/components/global/Separator.tsx
@@ -0,0 +1,7 @@
+import React from 'react';
+
+const Separator: React.FC = () => {
+    return <div className='h-px w-full bg-grey-150 dark:bg-grey-950' />;
+};
+
+export default Separator; 
\ No newline at end of file
diff --git a/apps/admin-x-activitypub/src/components/global/ViewProfileModal.tsx b/apps/admin-x-activitypub/src/components/global/ViewProfileModal.tsx
index 0b696918e7..b219dc8220 100644
--- a/apps/admin-x-activitypub/src/components/global/ViewProfileModal.tsx
+++ b/apps/admin-x-activitypub/src/components/global/ViewProfileModal.tsx
@@ -13,6 +13,7 @@ import APAvatar from '../global/APAvatar';
 import ActivityItem from '../activities/ActivityItem';
 import FeedItem from '../feed/FeedItem';
 import FollowButton from '../global/FollowButton';
+import Separator from './Separator';
 import getName from '../../utils/get-name';
 import getUsername from '../../utils/get-username';
 
@@ -81,23 +82,26 @@ const ActorList: React.FC<ActorListProps> = ({
                     </NoValueLabel>
                 ) : (
                     <List>
-                        {actorData.map(({actor, isFollowing}) => {
+                        {actorData.map(({actor, isFollowing}, index) => {
                             return (
-                                <ActivityItem key={actor.id} url={actor.url}>
-                                    <APAvatar author={actor} />
-                                    <div>
-                                        <div className='text-grey-600'>
-                                            <span className='mr-1 font-bold text-black'>{getName(actor)}</span>
-                                            <div className='text-sm'>{getUsername(actor)}</div>
+                                <React.Fragment key={actor.id}>
+                                    <ActivityItem key={actor.id} url={actor.url}>
+                                        <APAvatar author={actor} />
+                                        <div>
+                                            <div className='text-grey-600'>
+                                                <span className='mr-1 font-bold text-black'>{getName(actor)}</span>
+                                                <div className='text-sm'>{getUsername(actor)}</div>
+                                            </div>
                                         </div>
-                                    </div>
-                                    <FollowButton
-                                        className='ml-auto'
-                                        following={isFollowing}
-                                        handle={getUsername(actor)}
-                                        type='link'
-                                    />
-                                </ActivityItem>
+                                        <FollowButton
+                                            className='ml-auto'
+                                            following={isFollowing}
+                                            handle={getUsername(actor)}
+                                            type='link'
+                                        />
+                                    </ActivityItem>
+                                    {index < actorData.length - 1 && <Separator />}
+                                </React.Fragment>
                             );
                         })}
                     </List>
@@ -188,7 +192,7 @@ const ViewProfileModal: React.FC<ViewProfileModalProps> = ({
                                 onCommentClick={() => {}}
                             />
                             {index < posts.length - 1 && (
-                                <div className="h-px w-full bg-grey-200"></div>
+                                <Separator />
                             )}
                         </div>
                     ))}
diff --git a/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx b/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx
index 76a1c18628..71557d714a 100644
--- a/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx
+++ b/apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx
@@ -29,7 +29,7 @@ const MainNavigation: React.FC<MainNavigationProps> = ({
             </div>
             <div className='col-[3/4] flex items-center justify-end gap-2 px-8'>
                 {page === 'home' &&
-                <div className='mr-3'>
+                <div>
                     <Tooltip content="Inbox">
                         <Button className='!px-2' icon='listview' iconColorClass={layout === 'inbox' ? 'text-black' : 'text-grey-400'} size='sm' onClick={setInbox} />
                     </Tooltip>