Fix titles

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([]);

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([]);

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([]);

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]);
 }