nicolium: new component but for status links

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>

packages/nicolium/src/components/statuses/status-link.tsx

@@ -0,0 +1,37 @@
+import { Link } from '@tanstack/react-router';
+import React from 'react';
+
+import { useFrontendConfig } from '@/hooks/use-frontend-config';
+import { useLoggedIn } from '@/hooks/use-logged-in';
+
+import type { Account, Status } from 'pl-api';
+
+interface IStatusLink extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  status: Pick<Status, 'id' | 'url'>;
+  account: Pick<Account, 'acct' | 'local'>;
+}
+
+const StatusLink: React.FC<IStatusLink> = ({ status, account, ...props }) => {
+  const { isLoggedIn } = useLoggedIn();
+  const { allowDisplayingRemoteNoLogin } = useFrontendConfig();
+
+  const local = 'local' in account ? account.local : !account.acct.includes('@');
+
+  if (!isLoggedIn && !local && !allowDisplayingRemoteNoLogin) {
+    return (
+      <a href={status.url} {...props} target='_blank' rel='noopener noreferrer'>
+        {props.children}
+      </a>
+    );
+  }
+
+  return (
+    <Link
+      to='/@{$username}/posts/$statusId'
+      params={{ username: account.acct, statusId: status.id }}
+      {...props}
+    />
+  );
+};
+
+export { StatusLink };

packages/nicolium/src/components/statuses/status.tsx

@@ -40,6 +40,7 @@ import StatusActionBar from './status-action-bar';
 import StatusContent from './status-content';
 import StatusInfo from './status-info';
 import StatusLanguagePicker from './status-language-picker';
+import { StatusLink } from './status-link';
 import StatusReactionsBar from './status-reactions-bar';
 import StatusReplyMentions from './status-reply-mentions';
 import Tombstone from './tombstone';
@@ -59,9 +60,9 @@ const AccountInfo: React.FC<IAccountInfo> = React.memo(({ status }) => {
   const intl = useIntl();
   return (
     <div className='flex flex-row-reverse items-center gap-1 self-baseline'>
-      <Link
-        to='/@{$username}/posts/$statusId'
-        params={{ username: status.account.acct, statusId: status.id }}
+      <StatusLink
+        status={status}
+        account={status.account}
         className='hover:underline'
         onClick={(event) => {
           event.stopPropagation();
@@ -73,7 +74,7 @@ const AccountInfo: React.FC<IAccountInfo> = React.memo(({ status }) => {
           size='sm'
           className='whitespace-nowrap'
         />
-      </Link>
+      </StatusLink>
       <StatusTypeIcon visibility={status.visibility} />
       <StatusLanguagePicker status={status} />
       {!!status.edited_at && (

packages/nicolium/src/modals/media-modal.tsx

@@ -5,7 +5,6 @@ import iconArrowsOutSimple from '@phosphor-icons/core/regular/arrows-out-simple.
 import iconDownloadSimple from '@phosphor-icons/core/regular/download-simple.svg';
 import iconX from '@phosphor-icons/core/regular/x.svg';
 import { animated, useSpring } from '@react-spring/web';
-import { Link } from '@tanstack/react-router';
 import { useDrag } from '@use-gesture/react';
 import clsx from 'clsx';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
@@ -18,6 +17,7 @@ import ZoomableImage from '@/components/media/zoomable-image';
 import MissingIndicator from '@/components/missing-indicator';
 import PlaceholderStatus from '@/components/placeholders/placeholder-status';
 import StatusActionBar from '@/components/statuses/status-action-bar';
+import { StatusLink } from '@/components/statuses/status-link';
 import Icon from '@/components/ui/icon';
 import IconButton from '@/components/ui/icon-button';
 import Thread from '@/features/status/components/thread';
@@ -187,12 +187,9 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
         }
 
         const link = status && (
-          <Link
-            to='/@{$username}/posts/$statusId'
-            params={{ username: status.account.acct, statusId: status.id }}
-          >
+          <StatusLink status={status} account={status.account}>
             <FormattedMessage id='lightbox.view_context' defaultMessage='View context' />
-          </Link>
+          </StatusLink>
         );
 
         if (attachment.type === 'image') {