diff --git a/src/components/boards-bar/boards-bar.tsx b/src/components/boards-bar/boards-bar.tsx index 1ec5a285..5f9af297 100644 --- a/src/components/boards-bar/boards-bar.tsx +++ b/src/components/boards-bar/boards-bar.tsx @@ -5,7 +5,7 @@ import getShortAddress from '../../lib/get-short-address'; import { useAccountComment } from '@bitsocialhq/pkc-react-hooks'; import useAccountsStore from '@bitsocialhq/pkc-react-hooks/dist/stores/accounts'; import { isAllView, isCatalogView, isModView, isSubscriptionsView } from '../../lib/utils/view-utils'; -import { useDirectories, DirectoryCommunity } from '../../hooks/use-directories'; +import { useDirectories, useDirectoriesMetadata, DirectoryCommunity } from '../../hooks/use-directories'; import { useBoardPath, useResolvedSubplebbitAddress } from '../../hooks/use-resolved-subplebbit-address'; import { getBoardPath, extractDirectoryFromTitle } from '../../lib/utils/route-utils'; import useCreateBoardModalStore from '../../stores/use-create-board-modal-store'; @@ -17,6 +17,7 @@ import styles from './boards-bar.module.css'; import capitalize from 'lodash/capitalize'; import debounce from 'lodash/debounce'; import lowerCase from 'lodash/lowerCase'; +import startCase from 'lodash/startCase'; const SearchBar = ({ setShowSearchBar }: { setShowSearchBar: (show: boolean) => void }) => { const { t } = useTranslation(); @@ -313,6 +314,7 @@ const BoardsBarMobile = ({ subplebbitAddress }: { subplebbitAddress?: string }) const { t } = useTranslation(); const navigate = useNavigate(); const directories = useDirectories(); + const directoriesMetadata = useDirectoriesMetadata(); const displaySubplebbitAddress = subplebbitAddress && subplebbitAddress.length > 30 ? subplebbitAddress.slice(0, 30).concat('...') : subplebbitAddress; const [showSearchBar, setShowSearchBar] = useState(false); @@ -344,32 +346,40 @@ const BoardsBarMobile = ({ subplebbitAddress }: { subplebbitAddress?: string }) // Check if current subplebbit is a directory board const currentIsDirectoryBoard = directoryBoards.some((board) => board.address === subplebbitAddress); + // Build multiboards with full titles, then combine with directory boards and sort alphabetically + const sortedBoardOptions = useMemo(() => { + const allTitle = directoriesMetadata?.title || '/all/ - All 5chan Directories'; + const subsTitle = '/subs/ - Subscriptions'; + const modTitle = `/mod/ - ${startCase(t('boards_you_moderate'))}`; + + const multiboards: Array<{ value: string; label: string }> = [ + { value: 'all', label: allTitle }, + { value: 'subs', label: subsTitle }, + ...(accountSubplebbitAddresses.length > 0 ? [{ value: 'mod', label: modTitle }] : []), + ]; + + const directoryOptions = directoryBoards.map((board) => { + const directoryCode = extractDirectoryFromTitle(board.title!); + return { value: directoryCode!, label: board.title! }; + }); + + return [...multiboards, ...directoryOptions].sort((a, b) => a.label.localeCompare(b.label, undefined, { sensitivity: 'base' })); + }, [directoriesMetadata?.title, t, accountSubplebbitAddresses.length, directoryBoards]); + const boardSelect = ( );