From 1585aa16230227783d0501571b3dd0024b507ce2 Mon Sep 17 00:00:00 2001
From: Andreas Arvidsson <andreas.arvidsson87@gmail.com>
Date: Tue, 24 Mar 2026 17:44:02 +0100
Subject: [PATCH] Fix broken title updating in web app

---
 packages/app-web/src/Cheatsheet.tsx  |  3 ++-
 packages/app-web/src/LandingPage.tsx |  3 ++-
 packages/app-web/src/Title.tsx       | 15 +++++++++++++++
 3 files changed, 19 insertions(+), 2 deletions(-)
 create mode 100644 packages/app-web/src/Title.tsx

diff --git a/packages/app-web/src/Cheatsheet.tsx b/packages/app-web/src/Cheatsheet.tsx
index 86bb9269a7..e57c4952f4 100644
--- a/packages/app-web/src/Cheatsheet.tsx
+++ b/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} />
     </>
   );
diff --git a/packages/app-web/src/LandingPage.tsx b/packages/app-web/src/LandingPage.tsx
index c46fb13c98..f1eea1671d 100644
--- a/packages/app-web/src/LandingPage.tsx
+++ b/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">
diff --git a/packages/app-web/src/Title.tsx b/packages/app-web/src/Title.tsx
new file mode 100644
index 0000000000..a62516ff63
--- /dev/null
+++ b/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;
+}