Fix document.title not working properly

src/components/link.jsx

@@ -17,11 +17,12 @@ const Link = (props) => {
   } catch (e) {}
   let hash = (location.hash || '').replace(/^#/, '').trim();
   if (hash === '') hash = '/';
-  const isActive = hash === props.to;
+  const { to, ...restProps } = props;
+  const isActive = hash === to;
   return (
     <a
-      href={`#${props.to}`}
+      href={`#${to}`}
-      {...props}
+      {...restProps}
       class={`${props.class || ''} ${isActive ? 'is-active' : ''}`}
       onClick={(e) => {
         if (routerLocation) states.prevLocation = routerLocation;

src/pages/home.jsx

@@ -12,10 +12,12 @@ import states, { saveStatus } from '../utils/states';
 import { getCurrentAccountNS } from '../utils/store-utils';
 import useDebouncedCallback from '../utils/useDebouncedCallback';
 import useScroll from '../utils/useScroll';
+import useTitle from '../utils/useTitle';
 
 const LIMIT = 20;
 
 function Home({ hidden }) {
+  useTitle('Home', '/');
   const snapStates = useSnapshot(states);
   const isHomeLocation = snapStates.currentLocation === '/';
   const [uiState, setUIState] = useState('default');

src/pages/status.jsx

@@ -308,6 +308,7 @@ function StatusPage() {
     heroDisplayName && heroContentText
       ? `${heroDisplayName}: "${heroContentText}"`
       : 'Status',
+    '/s/:id',
   );
 
   const closeLink = useMemo(() => {

src/utils/useTitle.js

@@ -1,9 +1,15 @@
 import { useEffect } from 'preact/hooks';
+import { matchPath } from 'react-router-dom';
+import { useSnapshot } from 'valtio';
+
+import states from './states';
 
 const { VITE_CLIENT_NAME: CLIENT_NAME } = import.meta.env;
 
-export default function useTitle(title) {
+export default function useTitle(title, path) {
+  const snapStates = useSnapshot(states);
   useEffect(() => {
+    if (path && !matchPath(path, snapStates.currentLocation)) return;
     document.title = title ? `${title} / ${CLIENT_NAME}` : CLIENT_NAME;
-  }, [title]);
+  }, [title, snapStates.currentLocation]);
 }