fix(views): use directory codes in document titles and fix order

src/views/board/board.tsx

@@ -13,7 +13,7 @@ import useTimeFilter, { timeFilterNameToSeconds } from '../../hooks/use-time-fil
 import useInterfaceSettingsStore from '../../stores/use-interface-settings-store';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
 import useSortingStore from '../../stores/use-sorting-store';
-import { getSubplebbitAddress } from '../../lib/utils/route-utils';
+import { getSubplebbitAddress, isDirectoryBoard } from '../../lib/utils/route-utils';
 import ErrorDisplay from '../../components/error-display/error-display';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import { Post } from '../post';
@@ -324,9 +324,35 @@ const Board = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp, t
 
   useEffect(() => {
     if (!isVisible) return;
-    const boardTitle = title ? title : shortAddress || subplebbitAddress;
+    const boardIdentifier = params.boardIdentifier || boardIdentifierProp;
+    const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, defaultSubplebbits) : false;
+
+    let boardTitle: string;
+    if (isInAllView) {
+      boardTitle = t('all');
+    } else if (isInSubscriptionsView) {
+      boardTitle = t('subscriptions');
+    } else if (isInModView) {
+      boardTitle = t('mod');
+    } else if (isDirectory) {
+      boardTitle = `/${boardIdentifier}/`;
+    } else {
+      boardTitle = title ? title : shortAddress || subplebbitAddress || '';
+    }
     document.title = boardTitle + ' - 5chan';
-  }, [title, shortAddress, subplebbitAddress, isVisible]);
+  }, [
+    title,
+    shortAddress,
+    subplebbitAddress,
+    isVisible,
+    params.boardIdentifier,
+    boardIdentifierProp,
+    defaultSubplebbits,
+    isInAllView,
+    isInSubscriptionsView,
+    isInModView,
+    t,
+  ]);
 
   const shouldShowErrorToUser = error?.message && feed.length === 0;
 

src/views/catalog/catalog.tsx

@@ -14,7 +14,7 @@ import useCatalogStyleStore from '../../stores/use-catalog-style-store';
 import useFeedResetStore from '../../stores/use-feed-reset-store';
 import useSortingStore from '../../stores/use-sorting-store';
 import useCatalogFiltersStore from '../../stores/use-catalog-filters-store';
-import { getSubplebbitAddress } from '../../lib/utils/route-utils';
+import { getSubplebbitAddress, isDirectoryBoard } from '../../lib/utils/route-utils';
 import CatalogRow from '../../components/catalog-row';
 import LoadingEllipsis from '../../components/loading-ellipsis';
 import styles from './catalog.module.css';
@@ -491,11 +491,21 @@ const Catalog = ({ feedCacheKey, viewType, boardIdentifier: boardIdentifierProp,
 
   useEffect(() => {
     if (!isVisible) return;
-    let documentTitle = title ? title : shortAddress;
+    const boardIdentifier = params.boardIdentifier || boardIdentifierProp;
-    if (isInAllView) documentTitle = t('all');
+    const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, defaultSubplebbits) : false;
-    else if (isInSubscriptionsView) documentTitle = t('subscriptions');
+
+    let documentTitle: string;
+    if (isInAllView) {
+      documentTitle = t('all');
+    } else if (isInSubscriptionsView) {
+      documentTitle = t('subscriptions');
+    } else if (isDirectory) {
+      documentTitle = `/${boardIdentifier}/`;
+    } else {
+      documentTitle = title ? title : shortAddress || subplebbitAddress || '';
+    }
     document.title = documentTitle + ` - ${t('catalog')} - 5chan`;
-  }, [title, shortAddress, isInAllView, isInSubscriptionsView, t, isVisible]);
+  }, [title, shortAddress, subplebbitAddress, isInAllView, isInSubscriptionsView, t, isVisible, params.boardIdentifier, boardIdentifierProp, defaultSubplebbits]);
 
   // Clear matched filters when component mounts or when subplebbit changes
   useEffect(() => {

src/views/post/post.tsx

@@ -5,6 +5,8 @@ import useSubplebbitsStore from '@plebbit/plebbit-react-hooks/dist/stores/subple
 import { useLocation, useParams } from 'react-router-dom';
 import { isAllView } from '../../lib/utils/view-utils';
 import { useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address';
+import { useDefaultSubplebbits } from '../../hooks/use-default-subplebbits';
+import { isDirectoryBoard } from '../../lib/utils/route-utils';
 import useIsMobile from '../../hooks/use-is-mobile';
 import ErrorDisplay from '../../components/error-display/error-display';
 import PostDesktop from '../../components/post-desktop';
@@ -60,6 +62,7 @@ const PostPage = () => {
   const comment = useComment({ commentCid });
   const subplebbit = useSubplebbit({ subplebbitAddress });
   const { shortAddress, title } = subplebbit || {};
+  const defaultSubplebbits = useDefaultSubplebbits();
 
   // if the comment is a reply, return the post comment instead, then the reply will be highlighted in the thread
   const postComment = useComment({ commentCid: comment?.postCid });
@@ -77,11 +80,22 @@ const PostPage = () => {
   }, []);
 
   useEffect(() => {
-    const boardTitle = title ? title : shortAddress || subplebbitAddress;
+    const boardIdentifier = params.boardIdentifier;
+    const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, defaultSubplebbits) : false;
+
+    let boardTitle: string;
+    if (isInAllView) {
+      boardTitle = t('all');
+    } else if (isDirectory) {
+      boardTitle = `/${boardIdentifier}/`;
+    } else {
+      boardTitle = title ? title : shortAddress || subplebbitAddress || '';
+    }
+
     const postTitle = post?.title?.slice(0, 30) || post?.content?.slice(0, 30);
-    const postDucumentTitle = (postTitle ? postTitle.trim() + '... - ' : '') + boardTitle + ' - 5chan';
+    const postTitlePart = postTitle ? ` - ${postTitle.trim()}...` : '';
-    document.title = isInAllView ? `${t('all')} - 5chan` : postDucumentTitle;
+    document.title = `${boardTitle}${postTitlePart} - 5chan`;
-  }, [title, shortAddress, subplebbitAddress, post?.title, post?.content, isInAllView, t]);
+  }, [title, shortAddress, subplebbitAddress, post?.title, post?.content, isInAllView, t, params.boardIdentifier, defaultSubplebbits]);
 
   // probably not necessary to show the error to the user if the post loaded successfully
   const shouldShowErrorToUser = post?.error && ((post?.replyCount > 0 && post?.replies?.length === 0) || (post?.state === 'failed' && post?.error));