From 914a57e951b7b0739a2992fd453847963190cbeb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Mon, 13 Oct 2025 18:43:07 +0200
Subject: [PATCH] pl-fe: status ui changes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/components/account.tsx | 10 -----
 packages/pl-fe/src/components/status.tsx  | 49 ++++++++++++++---------
 2 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/packages/pl-fe/src/components/account.tsx b/packages/pl-fe/src/components/account.tsx
index 0f27aa026..c8e707905 100644
--- a/packages/pl-fe/src/components/account.tsx
+++ b/packages/pl-fe/src/components/account.tsx
@@ -102,7 +102,6 @@ interface IAccount {
   withDate?: boolean;
   withLinkToProfile?: boolean;
   withRelationship?: boolean;
-  showEdit?: boolean;
   approvalStatus?: StatusApprovalStatus | null;
   emoji?: string;
   emojiUrl?: string;
@@ -130,7 +129,6 @@ const Account = ({
   withDate = false,
   withLinkToProfile = true,
   withRelationship = true,
-  showEdit = false,
   approvalStatus,
   emoji,
   emojiUrl,
@@ -383,14 +381,6 @@ const Account = ({
                   </>
                 )}
 
-                {showEdit ? (
-                  <>
-                    <Text tag='span' theme='muted' size='sm'>&middot;</Text>
-
-                    <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
-                  </>
-                ) : null}
-
                 {actionType === 'muting' && account.mute_expires_at ? (
                   <>
                     <Text tag='span' theme='muted' size='sm'>&middot;</Text>
diff --git a/packages/pl-fe/src/components/status.tsx b/packages/pl-fe/src/components/status.tsx
index af377a828..12b631193 100644
--- a/packages/pl-fe/src/components/status.tsx
+++ b/packages/pl-fe/src/components/status.tsx
@@ -23,6 +23,7 @@ import { useStatusMetaStore } from 'pl-fe/stores/status-meta';
 import { textForScreenReader } from 'pl-fe/utils/status';
 
 import EventPreview from './event-preview';
+import RelativeTimestamp from './relative-timestamp';
 import StatusActionBar from './status-action-bar';
 import StatusContent from './status-content';
 import StatusLanguagePicker from './status-language-picker';
@@ -383,25 +384,35 @@ const Status: React.FC<IStatus> = (props) => {
       >
         {statusInfo}
 
-        <AccountContainer
-          key={actualStatus.account_id}
-          id={actualStatus.account_id}
-          timestamp={actualStatus.created_at}
-          timestampUrl={statusUrl}
-          action={accountAction}
-          hideActions={!accountAction}
-          showEdit={!!actualStatus.edited_at}
-          showAccountHoverCard={hoverable}
-          withLinkToProfile={hoverable}
-          approvalStatus={actualStatus.approval_status}
-          avatarSize={avatarSize}
-          items={(
-            <>
-              <StatusTypeIcon visibility={actualStatus.visibility} />
-              <StatusLanguagePicker status={actualStatus} />
-            </>
-          )}
-        />
+        <div className='flex'>
+          <div className='grow'>
+            <AccountContainer
+              key={actualStatus.account_id}
+              id={actualStatus.account_id}
+              action={accountAction}
+              hideActions={!accountAction}
+              showAccountHoverCard={hoverable}
+              withLinkToProfile={hoverable}
+              approvalStatus={actualStatus.approval_status}
+              avatarSize={avatarSize}
+            />
+          </div>
+
+          <div className='flex flex-row-reverse items-center gap-1 self-baseline'>
+            <Link to={statusUrl} className='hover:underline' onClick={(event) => event.stopPropagation()}>
+              <RelativeTimestamp timestamp={actualStatus.created_at} theme='muted' size='sm' className='whitespace-nowrap' />
+            </Link>
+            <StatusTypeIcon visibility={actualStatus.visibility} />
+            <StatusLanguagePicker status={actualStatus} />
+            {!!actualStatus.edited_at && (
+              <>
+                <Text tag='span' theme='muted' size='sm'>&middot;</Text>
+
+                <Icon className='size-4 text-gray-700 dark:text-gray-600' src={require('@phosphor-icons/core/regular/pencil-simple.svg')} />
+              </>
+            )}
+          </div>
+        </div>
 
         <div className='status__content-wrapper'>
           <StatusReplyMentions status={actualStatus} hoverable={hoverable} />