From 5aa1eaf13af842ebd78b4b7cfdbe8e563fc1e700 Mon Sep 17 00:00:00 2001 From: plebeius Date: Sun, 28 Dec 2025 23:13:25 +0100 Subject: [PATCH] fix(views): use directory codes in document titles and fix order --- src/views/board/board.tsx | 32 +++++++++++++++++++++++++++++--- src/views/catalog/catalog.tsx | 20 +++++++++++++++----- src/views/post/post.tsx | 22 ++++++++++++++++++---- 3 files changed, 62 insertions(+), 12 deletions(-) diff --git a/src/views/board/board.tsx b/src/views/board/board.tsx index dc8a689b..6c34ac54 100644 --- a/src/views/board/board.tsx +++ b/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; diff --git a/src/views/catalog/catalog.tsx b/src/views/catalog/catalog.tsx index 731543db..42de23d4 100644 --- a/src/views/catalog/catalog.tsx +++ b/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; - if (isInAllView) documentTitle = t('all'); - else if (isInSubscriptionsView) documentTitle = t('subscriptions'); + const boardIdentifier = params.boardIdentifier || boardIdentifierProp; + const isDirectory = boardIdentifier ? isDirectoryBoard(boardIdentifier, defaultSubplebbits) : false; + + 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(() => { diff --git a/src/views/post/post.tsx b/src/views/post/post.tsx index a0a8429a..dec15532 100644 --- a/src/views/post/post.tsx +++ b/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'; - document.title = isInAllView ? `${t('all')} - 5chan` : postDucumentTitle; - }, [title, shortAddress, subplebbitAddress, post?.title, post?.content, isInAllView, t]); + const postTitlePart = postTitle ? ` - ${postTitle.trim()}...` : ''; + document.title = `${boardTitle}${postTitlePart} - 5chan`; + }, [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));