document title rework

package.json

@@ -32,6 +32,7 @@
     "react-day-picker": "^8.9.1",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-helmet": "^6.1.0",
     "react-router-dom": "^6.20.0",
     "sort-by": "^1.2.0",
     "tailwind-merge": "^2.0.0",
@@ -43,6 +44,7 @@
     "@types/node": "^20.10.1",
     "@types/react": "^18.2.37",
     "@types/react-dom": "^18.2.15",
+    "@types/react-helmet": "^6.1.9",
     "@typescript-eslint/eslint-plugin": "^6.10.0",
     "@typescript-eslint/parser": "^6.10.0",
     "@vitejs/plugin-react-swc": "^3.5.0",

src/App.tsx

@@ -1,8 +1,11 @@
+import { useMemo } from "react";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
 } from "./components/ui/tooltip";
+import { Helmet } from "react-helmet";
+import { useFormData } from "./lib/hooks";
 import { Title } from "./components/title";
 import { Counter } from "./components/counter";
 import { Toaster } from "./components/ui/toaster";
@@ -11,8 +14,17 @@ import { SettingsToggle } from "./components/settings-toggle";
 import { BackgroundImage } from "./components/background-image";
 
 export default function App() {
+  const [{ title: _title }] = useFormData();
+  const title = useMemo(
+    () => "Event Horizon" + (_title ? ` - ${_title}` : ""),
+    [_title]
+  );
+
   return (
     <>
+      <Helmet>
+        <title>{title}</title>
+      </Helmet>
       <div className="absolute top-0 left-0 h-[100vh] w-[100vw] overflow-hidden flex justify-center items-center opacity-40 z-[-1] blur-sm">
         <BackgroundImage />
       </div>