From 60ff94943b85719dc21fa475343f5e02e243ebbb Mon Sep 17 00:00:00 2001
From: Djordje Vlaisavljevic <dzvlais@gmail.com>
Date: Wed, 27 Nov 2024 13:11:56 +0000
Subject: [PATCH] Improved inbox view UI (#21741)

ref
https://linear.app/ghost/issue/AP-609/give-inbox-ui-more-room-to-breathe

- Vertically centered feature image
- Timestamp next to the site title
- More consistent spacing in hover state
---
 apps/admin-x-activitypub/package.json         |  2 +-
 .../src/components/Inbox.tsx                  |  2 +-
 .../src/components/feed/FeedItem.tsx          | 60 ++++++++++---------
 .../src/components/feed/FeedItemStats.tsx     |  2 +-
 4 files changed, 34 insertions(+), 32 deletions(-)

diff --git a/apps/admin-x-activitypub/package.json b/apps/admin-x-activitypub/package.json
index 514e7d82c0..585518a35d 100644
--- a/apps/admin-x-activitypub/package.json
+++ b/apps/admin-x-activitypub/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@tryghost/admin-x-activitypub",
-  "version": "0.3.23",
+  "version": "0.3.24",
   "license": "MIT",
   "repository": {
     "type": "git",
diff --git a/apps/admin-x-activitypub/src/components/Inbox.tsx b/apps/admin-x-activitypub/src/components/Inbox.tsx
index 7a7b057955..0bddd17968 100644
--- a/apps/admin-x-activitypub/src/components/Inbox.tsx
+++ b/apps/admin-x-activitypub/src/components/Inbox.tsx
@@ -86,7 +86,7 @@ const Inbox: React.FC<InboxProps> = ({layout}) => {
                         </div>
                     ) : activities.length > 0 ? (
                         <>
-                            <div className={`mx-auto flex min-h-[calc(100dvh_-_117px)] items-start gap-8`}>
+                            <div className={`mx-auto flex min-h-[calc(100dvh_-_117px)] items-start gap-9`}>
                                 <div className='flex w-full min-w-0 flex-col items-center'>
                                     <div className={`flex w-full min-w-0 flex-col items-start ${layout === 'inbox' ? 'xxxl:max-w-[800px]' : 'max-w-[500px]'}`}>
                                         {layout === 'feed' && <div className='relative mx-[-12px] mb-4 mt-10 flex w-[calc(100%+24px)] items-center p-3'>
diff --git a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx
index e69aff0b8e..892830bd3a 100644
--- a/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx
+++ b/apps/admin-x-activitypub/src/components/feed/FeedItem.tsx
@@ -94,7 +94,7 @@ export function renderFeedAttachment(object: ObjectProperties, layout: string) {
 function renderInboxAttachment(object: ObjectProperties) {
     const attachment = getAttachment(object);
 
-    const videoAttachmentStyles = 'ml-8 shrink-0 rounded-md h-[91px] w-[121px] relative';
+    const videoAttachmentStyles = 'ml-8 md:ml-9 shrink-0 rounded-md h-[91px] w-[121px] relative';
     const imageAttachmentStyles = clsx('object-cover outline outline-1 -outline-offset-1 outline-black/[0.05]', videoAttachmentStyles);
 
     if (!attachment) {
@@ -392,37 +392,39 @@ const FeedItem: React.FC<FeedItemProps> = ({actor, object, layout, type, comment
         return (
             <>
                 {object && (
-                    <div className='group/article relative -mx-4 -my-px flex min-h-[112px] min-w-0 cursor-pointer flex-col justify-between rounded-md px-4 py-7 hover:bg-grey-75' data-layout='inbox' data-object-id={object.id} onClick={onClick}>
-                        <div className='z-10 mb-1.5 flex w-full min-w-0 items-center gap-1.5 text-base text-grey-700 group-hover/article:border-transparent'>
-                            <APAvatar author={author} size='2xs'/>
-                            <span className='min-w-0 truncate break-all font-medium text-grey-900' title={getUsername(author)} data-test-activity-heading>{author.name}</span>
-                            <span className='ml-auto shrink-0 whitespace-nowrap' title={`${timestamp}`}>{getRelativeTimestamp(date)}</span>
-                        </div>
-                        <div className='flex'>
-                            <div className='flex min-h-[73px] w-full min-w-0 flex-col items-start justify-start gap-1'>
-                                <Heading className='w-full max-w-[600px] text-pretty text-[1.6rem] font-semibold leading-tight' level={5} data-test-activity-heading>
-                                    {object.name ? object.name : (
-                                        <span dangerouslySetInnerHTML={{
-                                            __html: stripHtml(object.content)
-                                        }}></span>
-                                    )}
-                                </Heading>
-                                <div dangerouslySetInnerHTML={({__html: stripHtml(object.preview?.content ?? object.content)})} className='ap-note-content line-clamp-2 w-full max-w-[600px] text-pretty text-base leading-normal text-grey-700'></div>
-                                <span className='mt-1 shrink-0 whitespace-nowrap leading-none text-grey-700'>{object.content && `${getReadingTime(object.content)}`}</span>
+                    <div className='group/article relative -mx-6 -my-px flex min-h-[112px] min-w-0 cursor-pointer items-center justify-between rounded-md p-6 hover:bg-grey-75' data-layout='inbox' data-object-id={object.id} onClick={onClick}>
+                        <div>
+                            <div className='z-10 mb-1.5 flex w-full min-w-0 items-center gap-1.5 text-base group-hover/article:border-transparent'>
+                                <APAvatar author={author} size='2xs'/>
+                                <span className='min-w-0 truncate break-all font-medium text-grey-900' title={getUsername(author)} data-test-activity-heading>{author.name}</span>
+                                <span className='shrink-0 whitespace-nowrap text-grey-700 before:mr-1 before:content-["·"]' title={`${timestamp}`}>{getRelativeTimestamp(date)}</span>
                             </div>
-                            {renderInboxAttachment(object)}
-                            <div className='invisible absolute right-4 top-[22px] z-[49] flex gap-3 rounded-full bg-white px-3 py-2 shadow-md-heavy group-hover/article:visible'>
-                                <FeedItemStats
-                                    commentCount={commentCount}
-                                    layout={layout}
-                                    likeCount={1}
-                                    object={object}
-                                    onCommentClick={onCommentClick}
-                                    onLikeClick={onLikeClick}
-                                />
-                                <Menu items={menuItems} open={menuIsOpen} position='end' setOpen={setMenuIsOpen} trigger={UserMenuTrigger}/>
+                            <div className='flex'>
+                                <div className='flex min-h-[73px] w-full min-w-0 flex-col items-start justify-start gap-1'>
+                                    <Heading className='w-full max-w-[600px] text-pretty text-[1.6rem] font-semibold leading-tight' level={5} data-test-activity-heading>
+                                        {object.name ? object.name : (
+                                            <span dangerouslySetInnerHTML={{
+                                                __html: stripHtml(object.content)
+                                            }}></span>
+                                        )}
+                                    </Heading>
+                                    <div dangerouslySetInnerHTML={({__html: stripHtml(object.preview?.content ?? object.content)})} className='ap-note-content line-clamp-2 w-full max-w-[600px] text-pretty text-base leading-normal text-grey-700'></div>
+                                    <span className='mt-1 shrink-0 whitespace-nowrap leading-none text-grey-700'>{object.content && `${getReadingTime(object.content)}`}</span>
+                                </div>
+                                <div className='invisible absolute right-4 top-1/2 z-[49] flex -translate-y-1/2 flex-col gap-3 rounded-full bg-white px-2 py-3 shadow-md group-hover/article:visible'>
+                                    <FeedItemStats
+                                        commentCount={commentCount}
+                                        layout={layout}
+                                        likeCount={1}
+                                        object={object}
+                                        onCommentClick={onCommentClick}
+                                        onLikeClick={onLikeClick}
+                                    />
+                                    <Menu items={menuItems} open={menuIsOpen} position='end' setOpen={setMenuIsOpen} trigger={UserMenuTrigger}/>
+                                </div>
                             </div>
                         </div>
+                        {renderInboxAttachment(object)}
                     </div>
                 )}
             </>
diff --git a/apps/admin-x-activitypub/src/components/feed/FeedItemStats.tsx b/apps/admin-x-activitypub/src/components/feed/FeedItemStats.tsx
index 6dadd8f5f3..f43b099097 100644
--- a/apps/admin-x-activitypub/src/components/feed/FeedItemStats.tsx
+++ b/apps/admin-x-activitypub/src/components/feed/FeedItemStats.tsx
@@ -39,7 +39,7 @@ const FeedItemStats: React.FC<FeedItemStatsProps> = ({
         setTimeout(() => setIsClicked(false), 300);
     };
 
-    return (<div className={`flex ${(layout === 'inbox') ? 'gap-3' : 'gap-5'}`}>
+    return (<div className={`flex ${(layout === 'inbox') ? 'flex-col gap-3' : 'gap-5'}`}>
         <div className='flex gap-1'>
             <Button
                 className={`self-start text-grey-900 transition-opacity hover:opacity-60 ${isClicked ? 'bump' : ''} ${isLiked ? 'ap-red-heart text-red *:!fill-red hover:text-red' : ''}`}