diff --git a/src/pages/followed-hashtags.jsx b/src/pages/followed-hashtags.jsx index 8964b74f..414b1d8c 100644 --- a/src/pages/followed-hashtags.jsx +++ b/src/pages/followed-hashtags.jsx @@ -5,9 +5,11 @@ import Link from '../components/link'; import Loader from '../components/loader'; import Menu from '../components/menu'; import { api } from '../utils/api'; +import useTitle from '../utils/useTitle'; function FollowedHashtags() { const { masto, instance } = api(); + useTitle(`Followed Hashtags`, `/ft`); const [uiState, setUiState] = useState('default'); const [followedHashtags, setFollowedHashtags] = useState([]); diff --git a/src/pages/lists.jsx b/src/pages/lists.jsx index 2ab28e53..9d084928 100644 --- a/src/pages/lists.jsx +++ b/src/pages/lists.jsx @@ -5,9 +5,11 @@ import Link from '../components/link'; import Loader from '../components/loader'; import Menu from '../components/menu'; import { api } from '../utils/api'; +import useTitle from '../utils/useTitle'; function Lists() { const { masto } = api(); + useTitle(`Lists`, `/l`); const [uiState, setUiState] = useState('default'); const [lists, setLists] = useState([]); diff --git a/src/pages/search.jsx b/src/pages/search.jsx index be1d4028..684bc56a 100644 --- a/src/pages/search.jsx +++ b/src/pages/search.jsx @@ -11,6 +11,7 @@ import Menu from '../components/menu'; import NameText from '../components/name-text'; import Status from '../components/status'; import { api } from '../utils/api'; +import useTitle from '../utils/useTitle'; function Search() { const { masto, instance, authenticated } = api(); @@ -18,6 +19,8 @@ function Search() { const [searchParams, setSearchParams] = useSearchParams(); const searchFieldRef = useRef(); const q = searchParams.get('q'); + useTitle(q ? `Search: ${q}` : 'Search', `/search`); + const [statusResults, setStatusResults] = useState([]); const [accountResults, setAccountResults] = useState([]); const [hashtagResults, setHashtagResults] = useState([]); diff --git a/src/utils/useTitle.js b/src/utils/useTitle.js index 8761c38d..80dd592a 100644 --- a/src/utils/useTitle.js +++ b/src/utils/useTitle.js @@ -8,8 +8,22 @@ const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env; export default function useTitle(title, path) { const snapStates = useSnapshot(states); + const { currentLocation } = snapStates; + let paths = []; + // Workaround for matchPath not working for optional path segments + // https://github.com/remix-run/react-router/discussions/9862 + if (/:\w+\?/.test(path)) { + paths.push(path.replace(/\?/g, '')); + paths.push(path.replace(/\/?:\w+\?/g, '')); + } + let matched = false; + if (paths.length) { + matched = paths.some((p) => matchPath(p, currentLocation)); + } else { + matched = matchPath(path, currentLocation); + } useEffect(() => { - if (path && !matchPath(path, snapStates.currentLocation)) return; + if (path && !matched) return; document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME; }, [title, snapStates.currentLocation]); }