pl-fe: add alternative tombstone label

Signed-off-by: mkljczk <git@mkljczk.pl>

packages/pl-fe/src/components/status.tsx

@@ -299,11 +299,7 @@ const Status: React.FC<IStatus> = (props) => {
   if (!status) return null;
 
   if (status.deleted) return (
-    <Tombstone
-      id={status.id}
-      onMoveUp={onMoveUp}
-      onMoveDown={onMoveDown}
-    />
+    <Tombstone id={status.id} onMoveUp={onMoveUp} onMoveDown={onMoveDown} deleted />
   );
 
   if (filtered && status.showFiltered !== false) {

packages/pl-fe/src/components/tombstone.tsx

@@ -8,10 +8,11 @@ interface ITombstone {
   id: string;
   onMoveUp?: (statusId: string) => void;
   onMoveDown?: (statusId: string) => void;
+  deleted?: boolean;
 }
 
 /** Represents a deleted item. */
-const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown }) => {
+const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown, deleted }) => {
   const handlers = {
     moveUp: () => onMoveUp?.(id),
     moveDown: () => onMoveDown?.(id),
@@ -25,10 +26,9 @@ const Tombstone: React.FC<ITombstone> = ({ id, onMoveUp, onMoveDown }) => {
           tabIndex={0}
         >
           <Text theme='muted'>
-            <FormattedMessage
-              id='statuses.tombstone'
-              defaultMessage='One or more posts are unavailable.'
-            />
+            {deleted
+              ? <FormattedMessage id='statuses.tombstone.deleted' defaultMessage='The post is deleted.' />
+              : <FormattedMessage id='statuses.tombstone' defaultMessage='One or more posts are unavailable.' />}
           </Text>
         </div>
       </div>

packages/pl-fe/src/features/status/components/thread-status.tsx

@@ -26,12 +26,7 @@ const ThreadStatus: React.FC<IThreadStatus> = (props): JSX.Element => {
   if (isDeleted) {
     return (
       <div className='py-4 pb-8'>
-        <Tombstone
-          key={id}
-          id={id}
-          onMoveUp={props.onMoveUp}
-          onMoveDown={props.onMoveDown}
-        />
+        <Tombstone id={id} onMoveUp={props.onMoveUp} onMoveDown={props.onMoveDown} deleted />
       </div>
     );
   }

packages/pl-fe/src/features/status/components/thread.tsx

@@ -329,7 +329,7 @@ const Thread: React.FC<IThread> = ({
   const focusedStatus = (
     <div className={clsx({ 'pb-4': hasDescendants })} key={status.id}>
       {status.deleted ? (
-        <Tombstone id={status.id} onMoveUp={handleMoveUp} onMoveDown={handleMoveDown} />
+        <Tombstone id={status.id} onMoveUp={handleMoveUp} onMoveDown={handleMoveDown} deleted />
       ) : (
         <HotKeys handlers={handlers}>
           <div

packages/pl-fe/src/locales/en.json

@@ -1543,6 +1543,7 @@
   "status_list.queue_label": "Click to see {count} new {count, plural, one {post} other {posts}}",
   "statuses.quote_tombstone": "Post is unavailable.",
   "statuses.tombstone": "One or more posts are unavailable.",
+  "statuses.tombstone.deleted": "The post is deleted.",
   "streamfield.add": "Add",
   "streamfield.remove": "Remove",
   "suggestions.dismiss": "Dismiss suggestion",