Make RSS button more visible

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>

src/components/ui/icon-button/icon-button.tsx

@@ -15,14 +15,18 @@ interface IIconButton extends React.ButtonHTMLAttributes<HTMLButtonElement> {
   theme?: 'seamless' | 'outlined' | 'secondary' | 'transparent' | 'dark';
   /** Override the data-testid */
   'data-testid'?: string;
+  /** URL address */
+  href?: string;
 }
 
 /** A clickable icon. */
 const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef<HTMLButtonElement>): JSX.Element => {
   const { src, className, iconClassName, text, theme = 'seamless', ...filteredProps } = props;
 
+  const Component = (props.href ? 'a' : 'button') as 'button';
+
   return (
-    <button
+    <Component
       ref={ref}
       type='button'
       className={clsx('flex items-center space-x-2 rounded-full p-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:ring-offset-0', {
@@ -34,6 +38,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
       }, className)}
       {...filteredProps}
       data-testid={filteredProps['data-testid'] || 'icon-button'}
+      {...(props.href ? { target: '_blank' } as any : {})}
     >
       <SvgIcon src={src} className={iconClassName} />
 
@@ -42,7 +47,7 @@ const IconButton = React.forwardRef((props: IIconButton, ref: React.ForwardedRef
           {text}
         </Text>
       ) : null}
-    </button>
+    </Component>
   );
 });
 

src/features/account/components/header.tsx

@@ -284,7 +284,7 @@ const Header: React.FC<IHeader> = ({ account }) => {
       return [];
     }
 
-    if (features.rssFeeds && account.local) {
+    if (!ownAccount && features.rssFeeds && account.local) {
       menu.push({
         text: intl.formatMessage(messages.subscribeFeed),
         icon: require('@tabler/icons/outline/rss.svg'),
@@ -591,6 +591,25 @@ const Header: React.FC<IHeader> = ({ account }) => {
     );
   };
 
+  const renderRssButton = () => {
+    if (ownAccount || !features.rssFeeds || !account.local) {
+      return null;
+    }
+
+    const href = software === MASTODON ? `${account.url}.rss` : `${account.url}/feed.rss`;
+
+    return (
+      <IconButton
+        src={require('@tabler/icons/outline/rss.svg')}
+        href={href}
+        title={intl.formatMessage(messages.subscribeFeed)}
+        theme='outlined'
+        className='px-2'
+        iconClassName='h-4 w-4'
+      />
+    );
+  };
+
   const info = makeInfo();
   const menu = makeMenu();
 
@@ -647,6 +666,8 @@ const Header: React.FC<IHeader> = ({ account }) => {
                 </DropdownMenu>
               )}
 
+              {renderRssButton()}
+
               <ActionButton account={account} />
             </HStack>
           </div>