[dyad] Fixing dynamic page titles - wrote 5 file(s)

src/app/changelog/page.tsx

@@ -5,10 +5,15 @@ import Link from "next/link";
 import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 import { useTranslation } from "@/context/i18n-context";
+import { useEffect } from "react";
 
 export default function ChangelogPage() {
   const { t } = useTranslation();
 
+  useEffect(() => {
+    document.title = t('changelogPage.title');
+  }, [t]);
+
   return (
     <div className="relative flex flex-col items-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background font-[family-name:var(--font-geist-sans)]">
       <div className="w-full max-w-4xl mx-auto">

src/app/imprint/page.tsx

@@ -5,10 +5,15 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useTranslation } from "@/context/i18n-context";
+import { useEffect } from "react";
 
 export default function ImprintPage() {
   const { t } = useTranslation();
 
+  useEffect(() => {
+    document.title = t('imprintPage.title');
+  }, [t]);
+
   return (
     <div className="relative flex flex-col items-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background">
       <div className="w-full max-w-4xl mx-auto">

src/app/layout.tsx

@@ -17,7 +17,6 @@ const geistMono = Geist_Mono({
 });
 
 export const metadata: Metadata = {
-  title: "Image Web Exporter",
   description: "Upload a picture, then export it in a different resolution and format.",
 };
 

src/app/privacy/page.tsx

@@ -5,10 +5,15 @@ import { Button } from "@/components/ui/button";
 import { ArrowLeft } from "lucide-react";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { useTranslation } from "@/context/i18n-context";
+import { useEffect } from "react";
 
 export default function PrivacyPage() {
   const { t } = useTranslation();
 
+  useEffect(() => {
+    document.title = t('privacyPage.title');
+  }, [t]);
+
   return (
     <div className="relative flex flex-col items-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background">
       <div className="w-full max-w-4xl mx-auto">

src/components/home-page.tsx

@@ -2,10 +2,15 @@
 
 import { ImageConverter } from "@/components/image-converter";
 import { useTranslation } from "@/context/i18n-context";
+import { useEffect } from "react";
 
 export function HomePage() {
   const { t } = useTranslation();
 
+  useEffect(() => {
+    document.title = t('appTitle');
+  }, [t]);
+
   return (
     <div className="relative flex flex-col items-center justify-center min-h-screen p-4 sm:p-8 bg-gray-50 dark:bg-background font-[family-name:var(--font-geist-sans)]">
       <main className="flex flex-col items-center w-full max-w-6xl z-10">