started working on the Feed

.gitignore

@@ -22,3 +22,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+/src/assets/profiles/anja.png
+/src/assets/profiles/kim.png
+/src/assets/profiles/matthias.jpg

src/App.tsx

@@ -1,15 +1,12 @@
 import './App.css';
 import Navbar from './components/Navbar';
 import {BrowserRouter, Routes, Route} from 'react-router-dom';
+import Feed from "./pages/Feed.tsx";
 
 function Home() {
     return <div className="p-4">Home Page</div>;
 }
 
-function Feed() {
-    return <div className="p-4">Feed Page</div>;
-}
-
 function Record() {
     return <div className="p-4">Record Page</div>;
 }

src/data/MockDreams.ts

@@ -0,0 +1,61 @@
+import Dream from '../types/Dream.ts';
+
+export const mockDreams: Dream[] = [
+    new Dream({
+        id: 1,
+        userId: 1,
+        title: 'Mitternachtsbibliothek',
+        date: new Date('2025-06-30T02:15:00Z'),
+        inputType: 'text',
+        input: 'Ich wanderte um Mitternacht in eine riesige Bibliothek, in der jedes Buch sanft leuchtete. Als ich eines aus dem Regal zog, flüsterten seine Seiten mir Geheimnisse zu.',
+        ai: {
+            interpretation: 'Dieses Bild symbolisiert den Wunsch nach Wissen und die Faszination für ungelüftete Geheimnisse. Die leuchtenden Bücher stehen für Inspiration und Erkenntnis, während die nächtliche Atmosphäre auf Introspektion und das Unbewusste hinweist.'
+        }
+    }),
+    new Dream({
+        id: 2,
+        userId: 2,
+        title: 'Unterwasserkonzert',
+        date: new Date('2025-06-25T07:45:00Z'),
+        inputType: 'text',
+        input: 'Ich besuchte ein Konzert unter dem Ozean. Die Musiker waren Delfine, die Melodien anklickten, während Korallenpolypen im Takt zum Rhythmus mit Licht pulsierten.',
+        ai: {
+            interpretation: 'Das Unterwasserkonzert kann als Ausdruck von Kreativität und Harmonie gedeutet werden. Delfine symbolisieren Intelligenz und Spielfreude, Korallenlicht verweist auf emotionale Schwingungen und die Verbindung zum Inneren.'
+        }
+    }),
+    new Dream({
+        id: 3,
+        userId: 3,
+        title: 'Wüstenzug',
+        date: new Date('2025-05-10T04:30:00Z'),
+        inputType: 'text',
+        input: 'Ein Dampflok-Express tuckerte über goldene Dünen unter einem violetten Himmel. Passagiere winkten, während Kamele mit Laternen neben den Schienen herliefen.',
+        ai: {
+            interpretation: 'Der Wüstenzug steht für eine Reise durch unbewusste Räume und persönliche Herausforderungen (Dünen). Der violette Himmel deutet auf Spiritualität hin, während die Laternen der Kamele Hoffnung und Wegweisung symbolisieren.'
+        }
+    }),
+    new Dream({
+        id: 4,
+        userId: 1,
+        title: 'Schwebende Teeparty',
+        date: new Date('2025-04-18T09:00:00Z'),
+        inputType: 'text',
+        input: 'Ich saß mit Freunden auf einer Wolke zu einer Teeparty. Jede Tasse war mit Sternenstaub gefüllt, und der Himmel um uns herum schimmerte in pastelligen Regenbogenfarben.',
+        ai: {
+            interpretation: 'Diese Szene steht für Geborgenheit und Gemeinschaft auf einer höheren Ebene. Der Sternenstaub in den Tassen symbolisiert geteilte Träume, die pastelligen Regenbögen zeigen eine optimistische Grundstimmung und Leichtigkeit.'
+        }
+    }),
+    new Dream({
+        id: 5,
+        userId: 2,
+        title: 'Spiegelgarten',
+        date: new Date('2025-03-05T23:20:00Z'),
+        inputType: 'text',
+        input: 'Ich erkundete einen Garten aus Spiegeln, in denen jeweils eine andere Kindheitserinnerung reflektiert wurde. Als ich einen berührte, hörte ich entferntes Lachen durch das Glas hallen.',
+        ai: {
+            interpretation: 'Der Spiegelgarten repräsentiert Selbsterkenntnis und Rückblick auf die eigene Vergangenheit. Jeder Spiegel steht für ein Fragment der Erinnerung, das entfernte Lachen deutet auf positive Prägungen und emotionale Verankerung hin.'
+        }
+    }),
+];
+
+export default mockDreams;

src/data/MockUsers.ts

@@ -0,0 +1,11 @@
+import User from "../types/User.ts";
+
+export const MockUsers: User[] = [
+    new User(1, "Matthias", "matthias.jpg"),
+    new User(2, "Kim", "kim.png"),
+    new User(3, "Anja", "anja.png"),
+]
+
+export const MockUserMap: Map<number, User> = new Map(MockUsers.map(user => [user.id, user]));
+
+export default MockUsers;

src/index.css

@@ -20,6 +20,20 @@
   border-color: var(--background-color);
 }
 
+.page {
+  background-color: var(--background-color);
+  color: black;
+}
+
+.pagetitle {
+  color: var(--color-fuchsia-50);
+}
+
+.dreampanel {
+  background-color: var(--color-violet-400);
+  color: var(--color-fuchsia-200);
+}
+
 a {
   font-weight: 500;
   color: #646cff;

src/pages/Feed.tsx

@@ -0,0 +1,45 @@
+// src/pages/Feed.tsx
+import {mockDreams} from '../data/MockDreams';
+import Dream from '../types/Dream';
+import type User from "../types/User.ts";
+import {MockUserMap} from "../data/MockUsers.ts";
+
+export default function Feed() {
+    return (
+        <div className="page p-4 space-y-4">
+            <h1 className="pagetitle text-2xl font-bold mb-4">Feed</h1>
+            <ul className="space-y-6">
+                {mockDreams.map((dream: Dream) => {
+                    const user: User | undefined = MockUserMap.get(dream.userId);
+                    return (
+                        <li
+                            key={dream.id}
+                            className="dreampanel border rounded p-4"
+                        >
+                            {user && (
+                                <><img
+                                    src={`/assets/profiles/${user.profilePicture}`}
+                                    alt={user.name}
+                                    className="w-10 h-10 rounded-full"/><span
+                                    className="ml-2 text-sm font-semibold">{user.name} hat geträumt:</span></>
+                            )}
+                            <h2 className="text-xl font-semibold">
+                                {dream.title}
+                            </h2>
+                            <p className="text-sm text-gray-500">
+                                {dream.date.toLocaleDateString('de-DE', {
+                                    day: '2-digit',
+                                    month: '2-digit',
+                                    year: 'numeric',
+                                    hour: '2-digit',
+                                    minute: '2-digit',
+                                })}
+                            </p>
+                            <p className="mt-2 text-gray-700">{dream.input}</p>
+                        </li>
+                    )
+                })}
+            </ul>
+        </div>
+    );
+}

src/types/Dream.ts

@@ -0,0 +1,39 @@
+export default class Dream{
+    id: number;
+    userId: number;
+    title: string;
+    date: Date;
+    inputType: "text" | "image" | "audio" ;
+    input: string;
+    ai?:{
+        interpretation: string;
+        image?: string;
+        audio?: string;
+        video?: string;
+        models?: string;
+    }
+
+    constructor(params: {
+        id: number;
+        userId: number;
+        title: string;
+        date: Date;
+        inputType: "text" | "image" | "audio" ;
+        input: string;
+        ai: {
+            interpretation: string;
+            image?: string;
+            audio?: string;
+            video?: string;
+            models?: string;
+        }
+    }){
+        this.id = params.id;
+        this.userId = params.userId;
+        this.title = params.title;
+        this.date = params.date;
+        this.inputType = params.inputType;
+        this.input = params.input;
+        this.ai= params.ai;
+    }
+}

src/types/User.ts

@@ -0,0 +1,15 @@
+export default class User {
+    id: number;
+    name: string;
+    profilePicture: string;
+
+    constructor(
+        id: number,
+        name: string,
+        profilePicture: string
+    ){
+        this.id = id
+        this.name = name
+        this.profilePicture = profilePicture
+    }
+}