add autofocus, update themes, translate 'submit'

src/views/board/board.tsx

@@ -67,7 +67,14 @@ const Board = () => {
         <>
           {rules && rules.length > 0 && <SubplebbitRules subplebbitAddress={subplebbitAddress} createdAt={createdAt} rules={rules} />}
           {description && description.length > 0 && (
-            <SubplebbitDescription avatarUrl={suggested?.avatarUrl} subplebbitAddress={subplebbitAddress} createdAt={createdAt} description={description} title={title} />
+            <SubplebbitDescription
+              avatarUrl={suggested?.avatarUrl}
+              subplebbitAddress={subplebbitAddress}
+              createdAt={createdAt}
+              description={description}
+              shortAddress={shortAddress}
+              title={title}
+            />
           )}
         </>
       )}

src/views/catalog/catalog.tsx

@@ -8,6 +8,7 @@ import useWindowWidth from '../../hooks/use-window-width';
 import CatalogRow from '../../components/catalog-row';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import styles from './catalog.module.css';
+import _ from 'lodash';
 
 const lastVirtuosoStates: { [key: string]: StateSnapshot } = {};
 
@@ -32,7 +33,7 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
         author: { displayName: '## Board Mods' },
         content: description,
         link: avatarUrl,
-        title: 'Welcome to ' + (title || `p/${shortAddress}`),
+        title: t('welcome_to_board', { board: title || `p/${shortAddress}` }),
         pinned: true,
         locked: true,
       });
@@ -44,13 +45,13 @@ const useFeedRows = (columnCount: number, feed: any, isFeedLoaded: boolean, subp
         timestamp: createdAt,
         author: { displayName: '## Board Mods' },
         content: rules.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n'),
-        title: 'Rules',
+        title: _.capitalize(t('rules')),
         pinned: true,
         locked: true,
       });
     }
     return _feed;
-  }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl]);
+  }, [feed, description, rules, address, isFeedLoaded, createdAt, title, shortAddress, avatarUrl, t]);
 
   // Memoize rows calculation, ensuring it updates on changes to the modified feed or column count
   const rows = useMemo(() => {

src/views/post-page/post-page.tsx

@@ -16,7 +16,7 @@ const PostPage = () => {
   const { commentCid, subplebbitAddress } = params;
 
   const subplebbit = useSubplebbit({ subplebbitAddress });
-  const { createdAt, description, rules, suggested, title } = subplebbit;
+  const { createdAt, description, rules, shortAddress, suggested, title } = subplebbit;
 
   const location = useLocation();
   const isInDescriptionView = isDescriptionView(location.pathname, params);
@@ -36,7 +36,14 @@ const PostPage = () => {
     <div className={styles.content}>
       {showReplyModal && activeCid && <ReplyModal closeModal={closeModal} parentCid={activeCid} />}
       {isInDescriptionView ? (
-        <SubplebbitDescription avatarUrl={suggested?.avatarUrl} createdAt={createdAt} description={description} subplebbitAddress={subplebbitAddress} title={title} />
+        <SubplebbitDescription
+          avatarUrl={suggested?.avatarUrl}
+          createdAt={createdAt}
+          description={description}
+          subplebbitAddress={subplebbitAddress}
+          shortAddress={shortAddress}
+          title={title}
+        />
       ) : isInRulesView ? (
         <SubplebbitRules createdAt={createdAt} rules={rules} subplebbitAddress={subplebbitAddress} />
       ) : (