added a dream page

.gitignore

@@ -25,3 +25,8 @@ dist-ssr
 /public/assets/profiles/anja.png
 /public/assets/profiles/kim.png
 /public/assets/profiles/matthias.jpg
+/public/assets/dreampics/01.png
+/public/assets/dreampics/02.png
+/public/assets/dreampics/03.png
+/public/assets/dreampics/04.png
+/public/assets/dreampics/05.png

src/App.tsx

@@ -1,7 +1,8 @@
 import './App.css';
 import Navbar from './components/Navbar';
-import {BrowserRouter, Routes, Route} from 'react-router-dom';
+import {BrowserRouter, Route, Routes} from 'react-router-dom';
 import Feed from "./pages/Feed.tsx";
+import DreamPage from "./pages/DreamPage.tsx";
 
 function Home() {
     return <div className="p-4">Home Page</div>;
@@ -22,15 +23,18 @@ function Profile() {
 export default function App() {
     return (
         <BrowserRouter>
-            <div className="pb-16">
+            <div className="pb-16 min-h-screen">
-                <Navbar/>
+                <div className="mx-auto w-full max-w-md">
-                <Routes>
+                    <Navbar/>
-                    <Route path="/" element={<Home/>}/>
+                    <Routes>
-                    <Route path="/feed" element={<Feed/>}/>
+                        <Route path="/" element={<Home/>}/>
-                    <Route path="/record" element={<Record/>}/>
+                        <Route path="/feed" element={<Feed/>}/>
-                    <Route path="/archive" element={<Archive/>}/>
+                        <Route path="/record" element={<Record/>}/>
-                    <Route path="/profile" element={<Profile/>}/>
+                        <Route path="/archive" element={<Archive/>}/>
-                </Routes>
+                        <Route path="/profile" element={<Profile/>}/>
+                        <Route path="/dream/:id" element={<DreamPage/>}/>
+                    </Routes>
+                </div>
             </div>
         </BrowserRouter>
     );

src/pages/DreamPage.tsx

@@ -0,0 +1,104 @@
+// src/pages/DreamPage.tsx
+
+import {type NavigateFunction, useNavigate, useParams} from 'react-router-dom';
+import {mockDreams} from '../data/MockDreams';
+import MockUsers from '../data/MockUsers';
+import User from '../types/User';
+import type Dream from "../types/Dream.ts";
+
+export default function DreamPage() {
+    const {id} = useParams<{ id: string }>();
+    const navigate: NavigateFunction = useNavigate();
+
+    const dream: Dream | undefined = mockDreams.find(d => d.id === Number(id));
+    const user: User | undefined = dream ? MockUsers.find(u => u.id === dream.userId) : undefined;
+
+    if (!dream) {
+        return (<div className="page p-4">
+            <button
+                onClick={() => navigate(-1)}
+                className="mb-4 hover:underline"
+                style={{ color: 'var(--accent)' }}
+            >
+                ← Zurück
+            </button>
+            <p style={{ color: 'var(--text-muted)' }}>Traum nicht gefunden.</p>
+        </div>);
+    }
+
+    return (<div className="page min-h-screen">
+        {/* Header */}
+        <div className="relative" style={{ background: 'var(--accent-gradient)' }}>
+            <div className="p-6 text-white">
+                <button
+                    onClick={() => navigate(-1)}
+                    className="absolute top-4 left-4 p-2 rounded-full bg-white/20 backdrop-blur-sm"
+                >
+                    ←
+                </button>
+                <div className="flex items-center space-x-4 mt-8">
+                    {user && (<img
+                        src={`/assets/profiles/${user.profilePicture}`}
+                        alt={user.name}
+                        className="w-16 h-16 rounded-full border-4 border-white/30 object-cover"
+                    />)}
+                    <div>
+                        <h1 className="font-bold !text-xl sm:!text-2xl md:!text-3xl lg:!text-4xl">
+                            {dream.title}
+                        </h1>
+                        {user && (<p className="mt-1 text-white/80">
+                            {user.name} •{' '}
+                            {dream.date.toLocaleDateString('de-DE', {
+                                day: '2-digit',
+                                month: '2-digit',
+                                year: 'numeric',
+                                hour: '2-digit',
+                                minute: '2-digit',
+                            })}
+                        </p>)}
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        {/* Inhalt */}
+        <div className="p-4 space-y-6">
+            <div className="dream-card rounded-2xl p-6">
+                <div className="flex items-center mb-4">
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>Traum-Beschreibung</span>
+                </div>
+                <p className="leading-relaxed text-lg">
+                    {dream.input}
+                </p>
+            </div>
+
+            {dream.ai?.interpretation && (<div
+                className="dreamPanel rounded-2xl p-6">
+                <div className="flex items-center mb-4">
+                    <span className="font-medium" style={{ color: 'var(--accent)' }}>KI-Interpretation</span>
+                </div>
+                <p className="leading-relaxed">
+                    {dream.ai.interpretation}
+                </p>
+            </div>)}
+
+            <div className="dream-card rounded-2xl p-6">
+                <h2 className="text-lg font-semibold mb-3">Details</h2>
+                <div className="space-y-2" style={{ color: 'var(--text-muted)' }}>
+                    <div className="flex justify-between">
+                        <span>Eingabetyp</span>
+                        <span className="capitalize">{dream.inputType}</span>
+                    </div>
+                    <div className="flex justify-between">
+                        <span>Datum</span>
+                        <span>
+                            {dream.date.toLocaleDateString('de-DE', {
+                                day: '2-digit', month: '2-digit', year: 'numeric',
+                            })}
+                          </span>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>);
+}

src/pages/Feed.tsx

@@ -3,6 +3,7 @@ import {mockDreams} from '../data/MockDreams';
 import Dream from '../types/Dream';
 import type User from "../types/User.ts";
 import {MockUserMap} from "../data/MockUsers.ts";
+import {NavLink} from "react-router-dom";
 
 export default function Feed() {
     const sortedDreams = [...mockDreams].sort((a, b) => b.date.getTime() - a.date.getTime());
@@ -13,27 +14,29 @@ export default function Feed() {
                     {sortedDreams.map((dream: Dream) => {
                         const user: User | undefined = MockUserMap.get(dream.userId);
                         return (
-                            <li key={dream.id} className="dream-card mb-4">
+                            <NavLink key={dream.id} to={`/dream/${dream.id}`}>
-                                <div className="flex rounded items-center mb-2"><img
+                                <li className="dream-card mb-4">
-                                    src={`/assets/profiles/${user?.profilePicture}`}
+                                    <div className="flex rounded items-center mb-2"><img
-                                    alt={user?.name}
+                                        src={`/assets/profiles/${user?.profilePicture}`}
-                                    className="w-10 h-10 rounded-full"/>
+                                        alt={user?.name}
-                                    <span className="ml-4 font-semibold">{user?.name} hat geträumt:</span>
+                                        className="w-10 h-10 rounded-full"/>
-                                </div>
+                                        <span className="ml-4 font-semibold">{user?.name} hat geträumt:</span>
-                                <h2 className="title">
+                                    </div>
-                                    {dream.title}
+                                    <h2 className="title">
-                                </h2>
+                                        {dream.title}
-                                <p className="mt-2 line-clamp-2">{dream.input}</p>
+                                    </h2>
-                                <p className="timestamp mt-2">
+                                    <p className="mt-2 line-clamp-2">{dream.input}</p>
-                                    {dream.date.toLocaleDateString('de-DE', {
+                                    <p className="timestamp mt-2">
-                                        day: '2-digit',
+                                        {dream.date.toLocaleDateString('de-DE', {
-                                        month: '2-digit',
+                                            day: '2-digit',
-                                        year: 'numeric',
+                                            month: '2-digit',
-                                        hour: '2-digit',
+                                            year: 'numeric',
-                                        minute: '2-digit',
+                                            hour: '2-digit',
-                                    })}
+                                            minute: '2-digit',
-                                </p>
+                                        })}
-                            </li>
+                                    </p>
+                                </li>
+                            </NavLink>
                         )
                     })}
                 </ul>