replaced single dream type tag with dynamic tags display in DreamCard for improved categorization and flexibility in UI rendering

Signed-off-by: Matthias Puchstein <matthias@puchstein.bayern>

src/components/DreamCard.tsx

@@ -55,15 +55,17 @@ export default function DreamCard({dream, user, animationDelay = 0}: DreamCardPr
                     {formatDateWithTime(dream.date)}
                 </p>
                 <div className="flex space-x-2">
-                    {/* Display dream type as a tag */}
-                    <span className="px-2 py-1 text-xs rounded-full"
-                          style={{
-                              background: 'var(--accent-gradient)',
-                              color: 'white',
-                              boxShadow: '0 2px 5px var(--shadow)'
-                          }}>
-                        {dream.input.inputType}
-                    </span>
+                    {/* Display dream tags */}
+                    {dream.tags.map((tag, index) => (
+                        <span key={index} className="px-2 py-1 text-xs rounded-full"
+                              style={{
+                                  background: 'var(--accent-gradient)',
+                                  color: 'white',
+                                  boxShadow: '0 2px 5px var(--shadow)'
+                              }}>
+                            {tag}
+                        </span>
+                    ))}
                 </div>
             </div>
         </li>

src/data/MockDreams.ts

@@ -8,111 +8,162 @@ function getRandomDateInRange() {
     return new Date(randomTime);
 }
 
-export const mockDreams: Dream[] = [new Dream({
-    id: 1, userId: 1, title: 'Mitternachtsbibliothek', date: new Date('2025-07-17T03:25:57Z'), input: {
-        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.',
-    } as TextInput, 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.',
-        image: '01.png',
-        video: '01.mp4',
-        audio: '01.mp3',
-    }
-}), new Dream({
-    id: 2, userId: 2, title: 'Unterwasserkonzert', date: getRandomDateInRange(), input: {
-        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.',
-    } as TextInput, 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.',
-        image: '02.png',
-        video: '02.mp4',
-    }
-}), new Dream({
-    id: 3, userId: 3, title: 'Wüstenzug', date: getRandomDateInRange(), input: {
-        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.',
-    } as TextInput, 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.',
-        image: '03.png',
-        video: '03.mp4',
-    }
-}), new Dream({
-    id: 4, userId: 1, title: 'Schwebende Teeparty', date: getRandomDateInRange(), input: {
-        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.',
-    } as TextInput, 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.',
-        image: '04.png'
-    }
-}), new Dream({
-    id: 5, userId: 2, title: 'Spiegelgarten', date: getRandomDateInRange(), input: {
-        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.',
-    } as TextInput, 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.',
-        image: '05.png',
-        audio: '05.mp3'
-    }
-}), new Dream({
-    id: 6, userId: 1, title: 'Crystal Forest', date: getRandomDateInRange(), input: {
-        inputType: 'image',
-        img: 'crystal_forest.jpg',
-        imgAlt: 'A glowing forest made of crystals under a starry sky',
-        description: 'I wandered through a glowing forest where every tree was made of shimmering crystal, reflecting thousands of stars above.',
-    } as ImageInput, ai: {
-        interpretation: 'The crystal forest represents clarity and the search for inner truth. The reflections of stars symbolize inspiration and the connection between your dreams and aspirations.',
-    },
-}), new Dream({
-    id: 7, userId: 2, title: 'Mirror Lake', date: getRandomDateInRange(), input: {
-        inputType: 'image',
-        img: 'mirror_lake.jpg',
-        imgAlt: 'A perfectly still lake reflecting the moon and clouds',
-        description: 'I stood at the edge of a silent lake, its surface so calm it looked like a perfect mirror, reflecting the moon and drifting clouds.',
-    } as ImageInput, ai: {
-        interpretation: 'The mirror lake suggests self-reflection and emotional calm. The moon and clouds indicate subconscious thoughts and the ever-changing nature of your feelings.',
-    },
-}), new Dream({
-    id: 8, userId: 3, title: 'Floating City', date: getRandomDateInRange(), input: {
-        inputType: 'image',
-        img: 'floating_city.jpg',
-        imgAlt: 'A futuristic city floating above the clouds at sunrise',
-        description: 'I explored a futuristic city that floated above the clouds, with golden sunlight streaming through transparent walkways.',
-    } as ImageInput, ai: {
-        interpretation: 'The floating city symbolizes ambition and the desire to rise above limitations. The sunrise and golden light represent hope and new beginnings.',
-        image: 'floating_city_ai.png',
-    },
-}), new Dream({
-    id: 9, userId: 4, title: 'Quantenreise', date: getRandomDateInRange(), input: {
-        inputType: 'text',
-        input: 'Ich reiste durch einen Tunnel aus pulsierenden Datenströmen. Jede Berührung löste neue Realitäten aus, die sich wie Fraktale vor mir entfalteten.',
-    } as TextInput, ai: {
-        interpretation: 'Die Quantenreise symbolisiert deine Faszination für Möglichkeiten und Parallelwelten. Die Datenströme repräsentieren Informationsverarbeitung und Entscheidungsfindung in deinem Unterbewusstsein.',
-    }
-}), new Dream({
-    id: 10, userId: 4, title: 'Neuronales Netzwerk', date: getRandomDateInRange(), input: {
-        inputType: 'text',
-        input: 'Ich befand mich in einem riesigen neuronalen Netzwerk, wo Gedanken als leuchtende Impulse zwischen synaptischen Verbindungen tanzten. Ich konnte sie mit meinen Händen formen und lenken.',
-    } as TextInput, ai: {
-        interpretation: 'Das neuronale Netzwerk spiegelt dein Interesse an künstlicher Intelligenz und dem menschlichen Bewusstsein wider. Die Fähigkeit, Gedanken zu formen, deutet auf deinen Wunsch nach Kontrolle über deine mentalen Prozesse hin.',
-    }
-}), new Dream({
-    id: 11, userId: 4, title: 'Digitaler Garten', date: getRandomDateInRange(), input: {
-        inputType: 'image',
-        img: 'digital_garden.jpg',
-        imgAlt: 'Ein Garten aus leuchtenden Codezeilen und holografischen Pflanzen',
-        description: 'Ich pflegte einen Garten, in dem Pflanzen aus Codezeilen und Algorithmen wuchsen. Jede Blüte entfaltete sich zu einer neuen Technologie.',
-    } as ImageInput, ai: {
-        interpretation: 'Der digitale Garten verkörpert deine kreative Verbindung von Natur und Technologie. Er zeigt, wie du Innovation als organischen, wachsenden Prozess betrachtest.',
-    }
-}), new Dream({
-    id: 12, userId: 4, title: 'Zeitschleife', date: getRandomDateInRange(), input: {
-        inputType: 'text',
-        input: 'Ich erlebte denselben Tag immer wieder, konnte aber jedes Mal kleine Änderungen vornehmen. Mit jeder Iteration wurde die Realität komplexer und unvorhersehbarer.',
-    } as TextInput, ai: {
-        interpretation: 'Die Zeitschleife reflektiert deine Gedanken über Kausalität und die Auswirkungen kleiner Entscheidungen. Sie symbolisiert auch den Wunsch, Fehler zu korrigieren und verschiedene Möglichkeiten zu erkunden.',
-    }
-}),
+export const mockDreams: Dream[] = [
+    // Traum 1
+    new Dream({
+        id: 1,
+        userId: 1,
+        title: 'Mitternachtsbibliothek',
+        date: new Date('2025-07-17T03:25:57Z'),
+        tags: ['Wissen', 'Geheimnisse', 'Inspiration'],
+        input: {
+            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.'
+        } as TextInput,
+        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.',
+            image: '01.png',
+            video: '01.mp4',
+            audio: '01.mp3'
+        }
+    }),
 
-];
+    // Traum 2
+    new Dream({
+        id: 2,
+        userId: 2,
+        title: 'Unterwasserkonzert',
+        date: getRandomDateInRange(),
+        tags: ['Kreativität', 'Harmonie', 'Ozean'],
+        input: {
+            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.'
+        } as TextInput,
+        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.',
+            image: '02.png',
+            video: '02.mp4'
+        }
+    }),
 
-export default mockDreams;
+    // Traum 3
+    new Dream({
+        id: 3,
+        userId: 3,
+        title: 'Wüstenzug',
+        date: getRandomDateInRange(),
+        tags: ['Reise', 'Herausforderung', 'Spiritualität'],
+        input: {
+            inputType: 'image',
+            description: 'Ein Dampflok-Express tuckerte über goldene Dünen unter einem violetten Himmel. Passagiere winkten, während Kamele mit Laternen neben den Schienen herliefen.',
+            img: '03.png',
+            imgAlt: ''
+        } as ImageInput,
+        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.',
+            image: '03.png',
+            video: '03.mp4'
+        }
+    }),
+
+    // Traum 4
+    new Dream({
+        id: 4,
+        userId: 1,
+        title: 'Schwebende Teeparty',
+        date: getRandomDateInRange(),
+        tags: ['Gemeinschaft', 'Geborgenheit', 'Leichtigkeit'],
+        input: {
+            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.'
+        } as TextInput,
+        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.',
+            image: '04.png'
+        }
+    }),
+
+    // Traum 5
+    new Dream({
+        id: 5,
+        userId: 2,
+        title: 'Spiegelgarten',
+        date: getRandomDateInRange(),
+        tags: ['Selbsterkenntnis', 'Erinnerung', 'Vergangenheit'],
+        input: {
+            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.'
+        } as TextInput,
+        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.',
+            image: '05.png',
+            audio: '05.mp3'
+        }
+    }),
+
+    // Traum 9 (userId 4)
+    new Dream({
+        id: 9,
+        userId: 4,
+        title: 'Quantenreise',
+        date: getRandomDateInRange(),
+        tags: ['Faszination', 'Parallelwelten', 'Informationsverarbeitung'],
+        input: {
+            inputType: 'text',
+            input: 'Ich reiste durch einen Tunnel aus pulsierenden Datenströmen. Jede Berührung löste neue Realitäten aus, die sich wie Fraktale vor mir entfalteten.'
+        } as TextInput,
+        ai: {
+            interpretation: 'Die Quantenreise symbolisiert deine Faszination für Möglichkeiten und Parallelwelten. Die Datenströme repräsentieren Informationsverarbeitung und Entscheidungsfindung in deinem Unterbewusstsein.'
+        }
+    }),
+
+    // Traum 10 (userId 4)
+    new Dream({
+        id: 10,
+        userId: 4,
+        title: 'Neuronales Netzwerk',
+        date: getRandomDateInRange(),
+        tags: ['KI', 'Bewusstsein', 'Kontrolle'],
+        input: {
+            inputType: 'text',
+            input: 'Ich befand mich in einem riesigen neuronalen Netzwerk, wo Gedanken als leuchtende Impulse zwischen synaptischen Verbindungen tanzten. Ich konnte sie mit meinen Händen formen und lenken.'
+        } as TextInput,
+        ai: {
+            interpretation: 'Das neuronale Netzwerk spiegelt dein Interesse an künstlicher Intelligenz und dem menschlichen Bewusstsein wider. Die Fähigkeit, Gedanken zu formen, deutet auf deinen Wunsch nach Kontrolle über deine mentalen Prozesse hin.'
+        }
+    }),
+
+    // Traum 11 (userId 4)
+    new Dream({
+        id: 11,
+        userId: 4,
+        title: 'Digitaler Garten',
+        date: getRandomDateInRange(),
+        tags: ['Natur', 'Technologie', 'Innovation'],
+        input: {
+            inputType: 'image',
+            img: 'digital_garden.jpg',
+            imgAlt: 'Ein Garten aus leuchtenden Codezeilen und holografischen Pflanzen',
+            description: 'Ich pflegte einen Garten, in dem Pflanzen aus Codezeilen und Algorithmen wuchsen. Jede Blüte entfaltete sich zu einer neuen Technologie.'
+        } as ImageInput,
+        ai: {
+            interpretation: 'Der digitale Garten verkörpert deine kreative Verbindung von Natur und Technologie. Er zeigt, wie du Innovation als organischen, wachsenden Prozess betrachtest.'
+        }
+    }),
+
+    // Traum 12 (userId 4)
+    new Dream({
+        id: 12,
+        userId: 4,
+        title: 'Zeitschleife',
+        date: getRandomDateInRange(),
+        tags: ['Kausalität', 'Entscheidungen', 'Realität'],
+        input: {
+            inputType: 'text',
+            input: 'Ich erlebte denselben Tag immer wieder, konnte aber jedes Mal kleine Änderungen vornehmen. Mit jeder Iteration wurde die Realität komplexer und unvorhersehbarer.'
+        } as TextInput,
+        ai: {
+            interpretation: 'Die Zeitschleife reflektiert deine Gedanken über Kausalität und die Auswirkungen kleiner Entscheidungen. Sie symbolisiert auch den Wunsch, Fehler zu korrigieren und verschiedene Möglichkeiten zu erkunden.'
+        }
+    })
+];