Fix broken title updating in web app (#3253)

React can hoist the title tag, but apparently this feature is missing
from Preact.

Author: AndreasArvidsson

packages/app-web/src/Cheatsheet.tsx

@@ -1,10 +1,11 @@
 import { Cheatsheet as OriginalCheatsheet } from "@cursorless/lib-cheatsheet";
 import defaultCheatsheetInfo from "@cursorless/lib-cheatsheet/defaultSpokenForms";
+import { Title } from "./Title";
 
 export function Cheatsheet() {
   return (
     <>
-      <title>Cursorless cheatsheet</title>
+      <Title>Cursorless cheatsheet</Title>
       <OriginalCheatsheet cheatsheetInfo={defaultCheatsheetInfo} />
     </>
   );

packages/app-web/src/LandingPage.tsx

@@ -1,12 +1,13 @@
 import { Button } from "./Button";
 import { EmbeddedVideo } from "./EmbeddedVideo";
+import { Title } from "./Title";
 import { DESCRIPTION, NAME, TITLE, YOUTUBE_SLUG } from "./constants";
 import Logo from "./logo.svg?react";
 
 export function LandingPage() {
   return (
     <>
-      <title>{TITLE}</title>
+      <Title>{TITLE}</Title>
 
       <main className="landing-page">
         <div className="container">

packages/app-web/src/Title.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from "preact/hooks";
+
+interface Props {
+  children: string;
+}
+
+export function Title({ children }: Props) {
+  useEffect(() => {
+    if (children !== document.title) {
+      document.title = children;
+    }
+  }, [children]);
+
+  return null;
+}