From 6062570fe87f1fa0670bd1ad81c1866e49e9c036 Mon Sep 17 00:00:00 2001
From: Torsten Schulz <tsschulz@gmx.net>
Date: Thu, 17 Jul 2025 16:52:11 +0200
Subject: [PATCH] Changed menu that dialogues can be opened too; added random
 chat

---
 backend/controllers/navigationController.js   |  12 +-
 frontend/src/components/AppNavigation.vue     | 323 +++++++++++-------
 .../src/dialogues/chat/RandomChatDialog.vue   | 188 ++++++----
 frontend/src/store/index.js                   |   2 -
 frontend/src/views/social/ForumView.vue       | 141 +++++---
 5 files changed, 415 insertions(+), 251 deletions(-)

diff --git a/backend/controllers/navigationController.js b/backend/controllers/navigationController.js
index d3c9fd9..291ffda 100644
--- a/backend/controllers/navigationController.js
+++ b/backend/controllers/navigationController.js
@@ -78,15 +78,21 @@ const menuStructure = {
         children: {
             multiChat: {
                 visible: ["over12"],
-                action: "openMultiChat"
+                action: "openMultiChat",
+                view: "window",
+                class: "multiChatWindow"
             },
             randomChat: {
                 visible: ["over12"],
-                action: "openRanomChat"
+                action: "openRanomChat",
+                view: "window",
+                class: "randomChatDialog"
             },
             eroticChat: {
                 visible: ["over18"],
-                action: "openEroticChat"
+                action: "openEroticChat",
+                view: "window",
+                class: "eroticChatWindow"
             }
         }
     },
diff --git a/frontend/src/components/AppNavigation.vue b/frontend/src/components/AppNavigation.vue
index 79a9f0e..1a92c9d 100644
--- a/frontend/src/components/AppNavigation.vue
+++ b/frontend/src/components/AppNavigation.vue
@@ -1,50 +1,104 @@
 <template>
   <nav>
     <ul>
-      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem"
-        @click="openPage(item.path ?? null, !!item.children)">
-        <span v-if="item.icon" :style="`background-image:url('/images/icons/${item.icon}')`"
-          class="menu-icon">&nbsp;</span>
+      <!-- Hauptmenü -->
+      <li
+        v-for="(item, key) in menu"
+        :key="key"
+        class="mainmenuitem"
+        @click="handleItem(item, $event)"
+      >
+        <span
+          v-if="item.icon"
+          :style="`background-image:url('/images/icons/${item.icon}')`"
+          class="menu-icon"
+        >&nbsp;</span>
         <span>{{ $t(`navigation.${key}`) }}</span>
+
+        <!-- Untermenü Ebene 1 -->
         <ul v-if="item.children" class="submenu1">
-          <li v-for="(subitem, subkey) in item.children" :key="subitem.text"
-            @click="openPage(subitem.path ?? null, !!subitem.children && subkey !== 'forum')">
-            <span v-if="subitem.icon" :style="`background-image:url('/images/icons/${subitem.icon}')`"
-              class="submenu-icon">&nbsp;</span>
+          <li
+            v-for="(subitem, subkey) in item.children"
+            :key="subkey"
+            @click="handleItem(subitem, $event)"
+          >
+            <span
+              v-if="subitem.icon"
+              :style="`background-image:url('/images/icons/${subitem.icon}')`"
+              class="submenu-icon"
+            >&nbsp;</span>
             <span>{{ $t(`navigation.m-${key}.${subkey}`) }}</span>
-            <span v-if="subkey === 'forum'" class="subsubmenu">&#x25B6;</span>
-            <span v-else-if="subitem.children" class="subsubmenu">&#x25B6;</span> 
-            <ul v-if="subkey === 'forum' && forumList.length > 0" class="submenu2">
-              <li v-for="forum in forumList" :key="forum.id" @click="openForum(forum.id, $event)">
+            <span
+              v-if="subkey === 'forum' || subitem.children"
+              class="subsubmenu"
+            >&#x25B6;</span>
+
+            <!-- Forum‑Unterliste -->
+            <ul
+              v-if="subkey === 'forum' && forumList.length"
+              class="submenu2"
+            >
+              <li
+                v-for="forum in forumList"
+                :key="forum.id"
+                @click="handleItem({ action: 'openForum', params: forum.id }, $event)"
+              >
                 {{ forum.name }}
               </li>
             </ul>
-            <ul v-else-if="subitem.children" class="submenu2">
-              <li v-for="(subsubitem, subsubkey) in subitem.children" :key="subsubitem.text"
-                @click="openPage(subsubitem.path ?? null)">
-                <span v-if="subsubitem.icon" :style="`background-image:url('/images/icons/${subsubitem.icon}')`"
-                  class="submenu-icon">&nbsp;</span>
+
+            <!-- Weiteres Untermenü Ebene 2 -->
+            <ul
+              v-else-if="subitem.children"
+              class="submenu2"
+            >
+              <li
+                v-for="(subsubitem, subsubkey) in subitem.children"
+                :key="subsubkey"
+                @click="handleItem(subsubitem, $event)"
+              >
+                <span
+                  v-if="subsubitem.icon"
+                  :style="`background-image:url('/images/icons/${subsubitem.icon}')`"
+                  class="submenu-icon"
+                >&nbsp;</span>
                 <span>{{ $t(`navigation.m-${key}.m-${subkey}.${subsubkey}`) }}</span>
               </li>
             </ul>
           </li>
-          <li v-if="item.showLoggedinFriends === 1 && friendsList.length > 0" v-for="friend in friendsList" :key="friend.id">
+
+          <!-- Eingeloggte Freunde -->
+          <li
+            v-if="item.showLoggedinFriends === 1 && friendsList.length"
+            v-for="friend in friendsList"
+            :key="friend.id"
+            @click="handleItem({ action: 'openChat', params: friend.id }, $event)"
+          >
             {{ friend.username }}
             <ul class="submenu2">
-              <li @click="openChat(friend.id)">{{ $t('navigation.m-friends.chat') }}</li>
-              <li @click="openProfile(friend.id)">{{ $t('navigation.m-friends.profile') }}</li>
+              <li
+                @click="handleItem({ action: 'openChat', params: friend.id }, $event)"
+              >
+                {{ $t('navigation.m-friends.chat') }}
+              </li>
+              <li
+                @click="handleItem({ action: 'openProfile', params: friend.id }, $event)"
+              >
+                {{ $t('navigation.m-friends.profile') }}
+              </li>
             </ul>
           </li>
         </ul>
-        <ul class="submenu1">
-        </ul>
       </li>
     </ul>
+
     <div class="right-block">
       <span @click="accessMailbox" class="mailbox"></span>
       <span class="logoutblock">
-        <span class="username">{{ user.username }} </span>
-        <span @click="logout" class="menuitem">{{ $t('navigation.logout') }}</span>
+        <span class="username">{{ user.username }}</span>
+        <span @click="logout" class="menuitem">
+          {{ $t('navigation.logout') }}
+        </span>
       </span>
     </div>
   </nav>
@@ -52,109 +106,123 @@
 
 <script>
 import { mapGetters, mapActions } from 'vuex';
+import { createApp } from 'vue';
 import apiClient from '@/utils/axios.js';
 
+import RandomChatDialog from '../dialogues/chat/RandomChatDialog.vue';
+
+// Wichtig: die zentrale Instanzen importieren
+import store from '@/store';
+import router from '@/router';
+import i18n from '@/i18n';
+
 export default {
   name: 'AppNavigation',
+  components: {
+    RandomChatDialog
+  },
   data() {
     return {
       forumList: [],
-      friendsList: [],
-    }
+      friendsList: []
+    };
   },
   computed: {
-    ...mapGetters(['menu', 'user', 'menuNeedsUpdate', 'socket']),
+    ...mapGetters(['menu', 'user', 'menuNeedsUpdate', 'socket'])
   },
   watch: {
-    menuNeedsUpdate(newValue) {
-      if (newValue) {
-        this.loadMenu();
-      }
+    menuNeedsUpdate(newVal) {
+      if (newVal) this.loadMenu();
     },
-    socket(newValue) {
-      if (newValue) {
-        newValue.on('forumschanged', (data) => {
-          this.fetchForums();
-        });
-        newValue.on('friendloginchanged', () => {
-          this.fetchFriends();
-        });
-        newValue.on('reloadmenu', () => {
-          this.loadMenu();
-        })
+    socket(newSocket) {
+      if (newSocket) {
+        newSocket.on('forumschanged', this.fetchForums);
+        newSocket.on('friendloginchanged', this.fetchFriends);
+        newSocket.on('reloadmenu', this.loadMenu);
       }
     }
   },
   created() {
-    if (this.user && this.user.id) {
+    if (this.user?.id) {
       this.loadMenu();
       this.fetchForums();
       this.fetchFriends();
-    } else {
-      console.log(this.user);
-    }
-  },
-  mounted() {
-    if (this.$store.getters.socket) {
-      this.$store.getters.socket.on('forumschanged', (data) => {
-        this.fetchForums();
-      });
-      this.$store.getters.socket.on('friendloginchanged', () => {
-        this.fetchFriends();
-      });
     }
   },
   beforeUnmount() {
-    if (this.$store.getters.socket) {
-      this.$store.getters.socket.off('forumschanged');
-      this.$store.getters.socket.off('friendloginchanged');
+    const sock = this.socket;
+    if (sock) {
+      sock.off('forumschanged');
+      sock.off('friendloginchanged');
+      sock.off('reloadmenu');
     }
   },
   methods: {
     ...mapActions(['loadMenu', 'logout']),
-    openPage(url, hasSubmenu = false) {
-      if (hasSubmenu) {
-        return;
-      }
-      if (url) {
-        this.$router.push(url);
-      }
-    },
-    openForum(forumId, event) {
-      event.stopPropagation();
-      console.log('openForum', forumId);
-      this.$router.push({ name: 'Forum', params: { id: forumId } });
-    },
 
     async fetchForums() {
       try {
-        const response = await apiClient.get('/api/forum');
-        this.forumList = response.data;
-      } catch (error) {
-        console.error('Error fetching forums:', error);
+        const res = await apiClient.get('/api/forum');
+        this.forumList = res.data;
+      } catch (err) {
+        console.error('Error fetching forums:', err);
       }
     },
 
     async fetchFriends() {
       try {
-        const response = await apiClient.get('/api/socialnetwork/friends/loggedin');
-        this.friendsList = response.data;
-      } catch (error) {
-        console.error('Error fetching friends:', error);
+        const res = await apiClient.get('/api/socialnetwork/friends/loggedin');
+        this.friendsList = res.data;
+      } catch (err) {
+        console.error('Error fetching friends:', err);
       }
     },
 
-    async openProfile(hashedId) {
-      console.log(hashedId);
-      this.$root.$refs.userProfileDialog.userId = hashedId;
+    openForum(forumId) {
+      this.$router.push({ name: 'Forum', params: { id: forumId } });
+    },
+
+    openProfile(userId) {
+      this.$root.$refs.userProfileDialog.userId = userId;
       this.$root.$refs.userProfileDialog.open();
     },
 
-    async openChat(hashedId) { 
-      try {
-        
-      } catch (error) {
-        
+    openChat(userId) {
+      console.log('openChat:', userId);
+      // Datei erstellen und ans body anhängen
+      const container = document.createElement('div');
+      document.body.appendChild(container);
+      // Programmatisch ein neues App-Instance randomChatauen, mit Store, Router & i18n
+      this.$root.$refs.randomChatDialog.open(contact);
+    },
+
+    /**
+     * Einheitliche Klick‑Logik:
+     * 1) Nur aufklappen, wenn noch Untermenüs existieren
+     * 2) Bei `view`: Dialog/Window öffnen
+     * 3) Bei `action`: custom action aufrufen
+     * 4) Sonst: normale Router-Navigation
+     */
+    handleItem(item, event) {
+      event.stopPropagation();
+
+      // 1) nur aufklappen
+      if (item.children) return;
+
+      // 2) view → Dialog/Window
+      if (item.view) {
+        this.$root.$refs[item.class].open();
+        return;
+      }
+
+      // 3) custom action (openForum, openChat, ...)
+      if (item.action && typeof this[item.action] === 'function') {
+        return this[item.action](item.params, event);
+      }
+
+      // 4) Standard‑Navigation
+      if (item.path) {
+        this.$router.push(item.path);
       }
     }
   }
@@ -165,15 +233,15 @@ export default {
 @import '../assets/styles.scss';
 
 nav,
-nav>ul {
+nav > ul {
   display: flex;
   justify-content: space-between;
-  background-color: #F9A22C;
-  color: #000000;
+  background-color: #f9a22c;
+  color: #000;
   padding: 0;
-  flex-direction: row;
   margin: 0;
   cursor: pointer;
+  flex-direction: row;
   z-index: 999;
 }
 
@@ -183,22 +251,22 @@ ul {
   margin: 0;
 }
 
-nav>ul>li {
+nav > ul > li {
   padding: 0 1em;
   line-height: 2.5em;
   transition: background-color 0.25s;
 }
 
-nav>ul>li:hover {
-  background-color: #D37C06;
+nav > ul > li:hover {
+  background-color: #d37c06;
   white-space: nowrap;
 }
 
-nav>ul>li:hover>span {
-  color: #000000;
+nav > ul > li:hover > span {
+  color: #000;
 }
 
-nav>ul>li:hover>ul {
+nav > ul > li:hover > ul {
   display: inline-block;
 }
 
@@ -218,7 +286,7 @@ a {
 
 .menuitem {
   cursor: pointer;
-  color: #7E471B;
+  color: #7e471b;
 }
 
 .mailbox {
@@ -236,84 +304,93 @@ a {
 
 .submenu1 {
   position: absolute;
-  border: 1px solid #7E471B;
-  background-color: #F9A22C;
+  border: 1px solid #7e471b;
+  background-color: #f9a22c;
   left: 0;
   top: 2.5em;
   max-height: 0;
   overflow: visible;
   opacity: 0;
   visibility: hidden;
-  transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s 0.05s;
+  transition: max-height 0.25s ease-in-out,
+    opacity 0.05s ease-in-out,
+    visibility 0s 0.05s;
 }
 
 .mainmenuitem:hover .submenu1 {
   max-height: 500px;
   opacity: 1;
   visibility: visible;
-  transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s;
+  transition: max-height 0.25s ease-in-out,
+    opacity 0.05s ease-in-out,
+    visibility 0s;
 }
 
-.submenu1>li {
+.submenu1 > li {
   padding: 0.5em;
   line-height: 1em;
-  color: #7E471B;
+  color: #7e471b;
   position: relative;
 }
 
-.submenu1>li:hover {
-  color: #000000;
-  background-color: #D37C06;
+.submenu1 > li:hover {
+  color: #000;
+  background-color: #d37c06;
+}
+
+.menu-icon,
+.submenu-icon {
+  display: inline-block;
+  background-repeat: no-repeat;
+  line-height: 1em;
 }
 
 .menu-icon {
   width: 24px;
   height: 24px;
   margin-right: 3px;
-  background-repeat: no-repeat;
-  display: inline-block;
-  line-height: 1.6em;
 }
 
 .submenu-icon {
   width: 1.2em;
   height: 1em;
   margin-right: 3px;
-  background-repeat: no-repeat;
-  display: inline-block;
-  line-height: 1em;
   background-size: 1.2em 1.2em;
 }
 
 .submenu2 {
   position: absolute;
-  background-color: #F9A22C;
+  background-color: #f9a22c;
   left: 100%;
   top: 0;
-  border: 1px solid #7E471B;
+  border: 1px solid #7e471b;
   max-height: 0;
   overflow: hidden;
   opacity: 0;
   visibility: hidden;
-  transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s 0.05s;
+  transition: max-height 0.25s ease-in-out,
+    opacity 0.05s ease-in-out,
+    visibility 0s 0.05s;
 }
 
-.submenu1>li:hover .submenu2 {
+.submenu1 > li:hover .submenu2 {
   max-height: 500px;
   opacity: 1;
   visibility: visible;
-  transition: max-height 0.25s ease-in-out, opacity 0.05s ease-in-out, visibility 0s;
+  transition: max-height 0.25s ease-in-out,
+    opacity 0.05s ease-in-out,
+    visibility 0s;
 }
 
-.submenu2>li {
+.submenu2 > li {
   padding: 0.5em;
   line-height: 1em;
-  color: #7E471B;
+  color: #7e471b;
 }
 
-.submenu2>li:hover {
-  color: #000000;
-  background-color: #D37C06;
+.submenu2 > li:hover {
+  color: #000;
+  background-color: #d37c06;
 }
 
 .subsubmenu {
diff --git a/frontend/src/dialogues/chat/RandomChatDialog.vue b/frontend/src/dialogues/chat/RandomChatDialog.vue
index 267f165..52f0aac 100644
--- a/frontend/src/dialogues/chat/RandomChatDialog.vue
+++ b/frontend/src/dialogues/chat/RandomChatDialog.vue
@@ -1,6 +1,6 @@
 <template>
-    <DialogWidget ref="dialog" title="randomchat.title" icon="dice24.png" :show-close=true :buttons="buttons"
-        :modal=false :isTitleTranslated=true @close="closeDialog" name="RandomChat">
+    <DialogWidget ref="dialog" title="randomchat.title" icon="dice24.png" :show-close="true" :buttons="buttons"
+        :modal="false" :isTitleTranslated="true" @close="closeDialog" name="RandomChat">
         <div v-if="chatIsRunning" class="randomchat">
             <div class="headline">
                 {{ $t("randomchat.agerange") }}
@@ -12,36 +12,42 @@
                     <div>
                         <label><input type="checkbox" v-model="searchmale" />{{ $t("randomchat.gender.male") }}</label>
                         <label><input type="checkbox" v-model="searchfemale" />{{ $t("randomchat.gender.female")
-                            }}</label>
+                        }}</label>
                     </div>
                 </span>
                 <label><input type="checkbox" v-model="camonlysearch" />{{ $t("randomchat.camonly") }}</label>
                 <label><input type="checkbox" v-model="showcam" />{{ $t("randomchat.showcam") }}</label>
-                <img v-if="isLoggedIn" src="/images/icons/friendsadd16.png" ::tooltip="$t('randomchat.addfriend')" />
+                <img v-if="isLoggedIn" src="/images/icons/friendsadd16.png" :tooltip="$t('randomchat.addfriend')" />
                 <label><input type="checkbox" v-model="autosearch" />{{ $t("randomchat.autosearch") }}</label>
                 <button @click="nextUser" v-if="partner != null">{{ $t("randomchat.jumptonext") }}</button>
-                <button @click="startSearch" v-if="partner == null && !searching">{{ $t("randomchat.startsearch") }}</button>
+                <button @click="startSearch" v-if="partner == null && !searching">{{ $t("randomchat.startsearch")
+                }}</button>
             </div>
             <div class="output">
-                <div v-for="message in messages" v-html="renderMessage(message)">
-                </div>
+                <div v-for="message in messages" v-html="renderMessage(message)" />
             </div>
             <div class="inputline">
-                <label>{{ $t("randomchat.input") }}&nbsp;<input type="text" v-model="inputtext" @keyup.enter="sendMessage" /></label>
+                <label>
+                    {{ $t("randomchat.input") }}&nbsp;
+                    <input type="text" v-model="inputtext" @keyup.enter="sendMessage" />
+                </label>
                 <img src="/images/icons/enter16.png" @click="sendMessage" />
                 <img src="/images/icons/dice16.png" />
             </div>
         </div>
         <div v-else>
             <div>
-                <label>{{ $t("randomchat.age") }} <input type="number" v-model="age" min="18" max="150"
-                        value="18" /></label>
+                <label>{{ $t("randomchat.age") }}
+                    <input type="number" v-model="age" min="18" max="150" value="18" />
+                </label>
             </div>
             <div>
-                <label>{{ $t("randomchat.gender.title") }} <select v-model="gender">
+                <label>{{ $t("randomchat.gender.title") }}
+                    <select v-model="gender">
                         <option value="f">{{ $t("randomchat.gender.female") }}</option>
                         <option value="m">{{ $t("randomchat.gender.male") }}</option>
-                    </select></label>
+                    </select>
+                </label>
             </div>
             <div>
                 <button @click="startRandomChat()">{{ $t("randomchat.start") }}</button>
@@ -51,7 +57,7 @@
 </template>
 
 <script>
-import DialogWidget from '@/components/DialogWidget.vue'; 
+import DialogWidget from '@/components/DialogWidget.vue';
 import { mapGetters } from 'vuex';
 import axios from 'axios';
 
@@ -61,122 +67,165 @@ export default {
         DialogWidget,
     },
     computed: {
-        ...mapGetters(['isLoggedIn']),
+        ...mapGetters(['isLoggedIn', 'user']),
         buttons() {
-            return [{ text: this.$t("randomchat.close")}];
+            return [{ text: this.$t('randomchat.close') }];
         },
     },
     data() {
         return {
             chatIsRunning: false,
             age: 18,
-            gender: "f",
+            gender: 'f',
             agefromsearch: 18,
             agetosearch: 150,
             searchmale: true,
             searchfemale: true,
+            camonlysearch: false,
+            showcam: false,
             autosearch: false,
             inputtext: '',
             searching: false,
-            userId: null, 
+            userId: null, // ID, die vom Chat-Backend beim Register zurückkommt
             searchInterval: null,
             messages: [],
             partner: null,
             messagesInterval: null,
-        }
+        };
     },
     methods: {
         async open() {
+            if (this.user && Array.isArray(this.user.param)) {
+                const bdParam = this.user.param.find(p => p.name === 'birthdate')?.value;
+                if (bdParam) {
+                    const birth = new Date(bdParam);
+                    const ageYears = Math.floor(
+                        (Date.now() - birth.getTime()) / (365.25 * 24 * 60 * 60 * 1000)
+                    );
+                    this.age = ageYears;
+                }
+                const gParam = this.user.param.find(p => p.name === 'gender')?.value;
+                if (gParam != null) {
+                    // value==='1' ⇒ männlich
+                    this.gender = gParam === '1' ? 'm' : 'f';
+                }
+            }
             this.$refs.dialog.open();
         },
+
+        async closeDialog() {
+            // ① Stoppe alle laufenden Intervalle
+            if (this.searchInterval) {
+                clearInterval(this.searchInterval);
+                this.searchInterval = null;
+            }
+            if (this.messagesInterval) {
+                clearInterval(this.messagesInterval);
+                this.messagesInterval = null;
+            }
+            // ② verlasse Chat auf Server-Seite
+            this.$refs.dialog.close();
+            await axios.post('/api/chat/exit', { id: this.userId });
+            await this.removeUserFromChat();
+            // Reset-Status
+            this.chatIsRunning = false;
+            this.partner = null;
+            this.messages = [];
+        },
+
         async registerUser() {
             try {
                 const response = await axios.post('/api/chat/register', {
                     gender: this.gender,
-                    age: this.age
+                    age: this.age,
                 });
-                this.userId = response.data.id; 
+                this.userId = response.data.id;
             } catch (error) {
                 console.error('Error registering user:', error);
             }
         },
+
         async closeDialog() {
             this.$refs.dialog.close();
-            await axios.push('/api/chat/exit', { id: this.userId })
+            await axios.post('/api/chat/exit', { id: this.userId });
             await this.removeUserFromChat();
         },
+
         async startRandomChat() {
             this.chatIsRunning = true;
             await this.registerUser();
             await this.startSearch();
         },
+
         async startSearch() {
             this.searching = true;
             await this.findMatch();
-            this.messages.push({ type: "system", tr: "randomchat.waitingForMatch" })
+            this.messages.push({ type: 'system', tr: 'randomchat.waitingForMatch' });
             this.searchInterval = setInterval(this.findMatch, 500);
         },
+
         async findMatch() {
             try {
                 const response = await axios.post('/api/chat/findMatch', {
                     genders: this.getSearchGenders(),
-                    age: {
-                        min: this.agefromsearch,
-                        max: this.agetosearch
-                    }, 
-                    id: this.userId
+                    age: { min: this.agefromsearch, max: this.agetosearch },
+                    id: this.userId,
                 });
-                if (response.data.status && response.data.status === 'matched') {
+                if (response.data.status === 'matched') {
                     this.searching = false;
-                    if (this.searchInterval) {
-                        clearInterval(this.searchInterval);
-                        this.searchInterval = null;
-                    }
-                    const initText = this.$t("randomchat.chatpartner")
-                        .replace("<gender>", this.$t(`randomchat.partnergender${response.data.user.gender}`))
-                        .replace("<age>", response.data.user.age);
-                    this.messages = [];
-                    this.messages.push({ "type": "system", text: initText })
+                    clearInterval(this.searchInterval);
+                    const initText = this.$t('randomchat.chatpartner')
+                        .replace(
+                            '<gender>',
+                            this.$t(`randomchat.partnergender${response.data.user.gender}`)
+                        )
+                        .replace('<age>', response.data.user.age);
+                    this.messages = [{ type: 'system', text: initText }];
                     this.partner = response.data.user;
                     this.messagesInterval = setInterval(this.getNewMessages, 250);
-                } else {
-                    if (this.autosearch && !this.searching && ! this.searchInterval) {
-                        this.searchInterval = setInterval(this.findMatch, 500);
-                    }
+                } else if (this.autosearch && !this.searchInterval) {
+                    this.searchInterval = setInterval(this.findMatch, 500);
                 }
             } catch (error) {
                 console.error('Error finding match:', error);
             }
         },
+
         getSearchGenders() {
             const genders = [];
             if (this.searchmale) genders.push('m');
             if (this.searchfemale) genders.push('f');
             return genders;
         },
+
         async sendMessage() {
-            if (this.inputtext.trim() !== '') {
-                const response = await axios.post('/api/chat/sendMessage', { from: this.userId, to: this.partner.id, text: this.inputtext });
-                this.messages.push({ type: "self", text: response.data.text });
-                this.inputtext = '';
-            }
+            if (!this.inputtext.trim()) return;
+            const response = await axios.post('/api/chat/sendMessage', {
+                from: this.userId,
+                to: this.partner.id,
+                text: this.inputtext,
+            });
+            this.messages.push({ type: 'self', text: response.data.text });
+            this.inputtext = '';
         },
+
         async getNewMessages() {
-            if (!this.partner) {
-                return;
-            }
-            const response = await axios.post('/api/chat/getMessages', { to: this.userId, from: this.partner.id });
-            const messages = response.data.filter(item => !item.activity);
-            const activities = response.data.filter(item => item.activity);
-            for (let i = 0; i < activities.length; ++i) {
-                const activity = activities[i];
-                if (activity.activity === 'otheruserleft') {
+            if (!this.partner) return;
+            const response = await axios.post('/api/chat/getMessages', {
+                to: this.userId,
+                from: this.partner.id,
+            });
+            const newMsgs = response.data.filter((m) => !m.activity);
+            const activities = response.data.filter((m) => m.activity);
+            activities.forEach((act) => {
+                if (act.activity === 'otheruserleft') {
                     this.partner = null;
                     this.messages.push({ type: 'system', tr: 'randomchat.userleftchat' });
                 }
-            }
-            this.messages.push(...messages);
+            });
+            this.messages.push(...newMsgs);
         },
+
         async removeUserFromChat() {
             try {
                 await axios.post('/api/chat/remove', { id: this.userId });
@@ -184,31 +233,27 @@ export default {
                 console.error('Error removing user from chat:', error);
             }
         },
+
         async nextUser() {
             await axios.post('/api/chat/leave', { id: this.userId });
             this.partner = null;
             this.messages.push({ type: 'system', tr: 'randomchat.selfstopped' });
             if (this.autosearch) {
                 this.searchInterval = setInterval(this.findMatch, 500);
-                this.messages.push({ type: "system", tr: "randomchat.waitingForMatch" })
+                this.messages.push({ type: 'system', tr: 'randomchat.waitingForMatch' });
             }
         },
+        
         renderMessage(message) {
-            let className = '';
-            let tr = '';
             if (message.type === 'system') {
-                const text = message.tr ? this.$t(message.tr) : message.text;
-                return `<span class="rc-system">${text}</span>`;
-            } else if (message.type === 'self') {
-                className = 'rc-self';
-                tr = this.$t('randomchat.self');
-            } else {
-                className = 'rc-partner';
-                tr = this.$t('randomchat.partner');
+                const txt = message.tr ? this.$t(message.tr) : message.text;
+                return `<span class="rc-system">${txt}</span>`;
             }
-            return `<span class="${className}">${tr}: </span>${message.text}`;
-        }
-    }
+            const cls = message.type === 'self' ? 'rc-self' : 'rc-partner';
+            const who = message.type === 'self' ? this.$t('randomchat.self') : this.$t('randomchat.partner');
+            return `<span class="${cls}">${who}: </span>${message.text}`;
+        },
+    },
 };
 </script>
 
@@ -271,5 +316,4 @@ export default {
 .inputline>label>input {
     flex: 1;
 }
-
 </style>
diff --git a/frontend/src/store/index.js b/frontend/src/store/index.js
index d6dacca..8e1d327 100644
--- a/frontend/src/store/index.js
+++ b/frontend/src/store/index.js
@@ -157,10 +157,8 @@ const store = createStore({
 
         const retryConnection = (reconnectFn) => {
           setTimeout(() => {
-            console.log('Retrying Daemon WebSocket connection...');
             reconnectFn();
           }, 1000);
-          console.log('Retrying Daemon WebSocket connection...');
         };
         connectDaemonSocket();
       }
diff --git a/frontend/src/views/social/ForumView.vue b/frontend/src/views/social/ForumView.vue
index fb65620..29a558c 100644
--- a/frontend/src/views/social/ForumView.vue
+++ b/frontend/src/views/social/ForumView.vue
@@ -1,9 +1,13 @@
 <template>
     <h2>{{ $t('socialnetwork.forum.title') }} {{ forumName }}</h2>
     <div class="creationtoggler">
-        <button @click="createNewTopic">{{ $t(!inCreation ? 'socialnetwork.forum.showNewTopic' :
-            'socialnetwork.forum.hideNewTopic') }}</button>
+        <button @click="createNewTopic">
+            {{ $t(!inCreation
+                ? 'socialnetwork.forum.showNewTopic'
+                : 'socialnetwork.forum.hideNewTopic') }}
+        </button>
     </div>
+
     <div v-if="inCreation">
         <div>
             <label class="newtitle">
@@ -14,13 +18,26 @@
         <div class="editor-container">
             <EditorContent :editor="editor" class="editor" />
         </div>
-        <button @click="saveNewTopic">{{ $t('socialnetwork.forum.createNewTopic') }}</button>
+        <button @click="saveNewTopic">
+            {{ $t('socialnetwork.forum.createNewTopic') }}
+        </button>
     </div>
+
     <div v-else-if="titles.length > 0">
-        <!-- PAGINATION + TABLE bleibt unverändert -->
-        <!-- ... -->
+        <!-- hier kommt deine bestehende TABLE + PAGINATION hin -->
+        <table>
+          <!-- Kopfzeile, Spalten etc. -->
+        </table>
+        <div class="pagination">
+          <button @click="goToPage(page-1)" :disabled="page<=1">‹</button>
+          <span>{{ page }} / {{ totalPages }}</span>
+          <button @click="goToPage(page+1)" :disabled="page>=totalPages">›</button>
+        </div>
+    </div>
+
+    <div v-else>
+        {{ $t('socialnetwork.forum.noTitles') }}
     </div>
-    <div v-else>{{ $t('socialnetwork.forum.noTitles') }}</div>
 </template>
 
 <script>
@@ -30,18 +47,10 @@ import apiClient from '../../utils/axios'
 
 export default {
     name: 'ForumView',
-    components: {
-        EditorContent,
-    },
-    computed: {
-        totalPages() {
-            return Math.ceil(this.numberOfItems / 25);
-        }
-    },
+    components: { EditorContent },
     data() {
         return {
-            forumName: 'test',
-            forumId: 0,
+            forumName: '',
             page: 1,
             numberOfItems: 0,
             titles: [],
@@ -50,57 +59,94 @@ export default {
             editor: null,
         }
     },
+    computed: {
+        // Neu: Forum‑ID immer direkt aus der Route ziehen
+        forumId() {
+            return this.$route.params.id
+        },
+        totalPages() {
+            return Math.ceil(this.numberOfItems / 25)
+        }
+    },
+    watch: {
+        // Sobald sich die Route‑ID ändert, zurück auf Seite 1 und neu laden
+        forumId: {
+            handler() {
+                this.page = 1
+                this.loadForum()
+            },
+            immediate: true
+        },
+        // Wenn sich die Seite ändert, ebenfalls neu laden
+        page(newPage, oldPage) {
+            if (newPage !== oldPage) {
+                this.loadForum()
+            }
+        }
+    },
     async mounted() {
-        this.forumId = this.$route.params.id;
-        await this.loadForum();
-
+        // Editor initialisieren
         this.editor = new Editor({
             extensions: [StarterKit],
             content: '',
-        });
+        })
     },
     beforeUnmount() {
-        if (this.editor) this.editor.destroy();
+        if (this.editor) this.editor.destroy()
     },
     methods: {
         async loadForum() {
-            const response = await apiClient.get(`/api/forum/${this.forumId}/${this.page}`);
-            this.setData(response.data);
+            try {
+                const { data } = await apiClient.get(
+                    `/api/forum/${this.forumId}/${this.page}`
+                )
+                this.forumName     = data.name
+                this.titles        = data.titles
+                this.numberOfItems = data.totalTopics
+            } catch (err) {
+                console.error('Fehler beim Laden des Forums', err)
+            }
         },
         createNewTopic() {
-            this.inCreation = !this.inCreation;
+            this.inCreation = !this.inCreation
             if (this.inCreation && this.editor) {
-                this.editor.commands.setContent('');
+                this.editor.commands.setContent('')
             }
         },
         async saveNewTopic() {
-            const content = this.editor ? this.editor.getHTML() : '';
-            const response = await apiClient.post('/api/forum/topic', {
-                forumId: this.forumId,
-                title: this.newTitle,
-                content,
-            });
-            this.setData(response.data);
-            this.inCreation = false;
-        },
-        setData(data) {
-            this.forumName = data.name;
-            this.titles = data.titles;
-            this.page = data.page;
-            this.numberOfItems = data.totalTopics;
+            const content = this.editor ? this.editor.getHTML() : ''
+            if (!this.newTitle.trim() || !content.trim()) return
+            try {
+                const { data } = await apiClient.post(
+                    '/api/forum/topic',
+                    {
+                        forumId: this.forumId,
+                        title:   this.newTitle,
+                        content
+                    }
+                )
+                // Neu: Server kann aktuelle Liste zurückliefern
+                this.forumName     = data.name
+                this.titles        = data.titles
+                this.numberOfItems = data.totalTopics
+                this.page          = data.page
+                this.inCreation    = false
+                this.newTitle      = ''
+            } catch (err) {
+                console.error('Fehler beim Erstellen des Themas', err)
+            }
         },
         goToPage(page) {
             if (page >= 1 && page <= this.totalPages) {
-                this.page = page;
-                this.loadForum();
+                this.page = page
             }
         },
         openProfile(id) {
-            this.$root.$refs.userProfileDialog.userId = id;
-            this.$root.$refs.userProfileDialog.open();
+            this.$root.$refs.userProfileDialog.userId = id
+            this.$root.$refs.userProfileDialog.open()
         },
         openTopic(topicId) {
-            this.$router.push(`/socialnetwork/forumtopic/${topicId}`);
+            this.$router.push(`/socialnetwork/forumtopic/${topicId}`)
         },
     }
 }
@@ -110,17 +156,14 @@ export default {
 .creationtoggler {
     margin-bottom: 1em;
 }
-
 .newtitle {
     display: flex;
     gap: 1em;
     vertical-align: middle;
 }
-
 .newtitle input {
     flex: 1;
 }
-
 .editor-container {
     margin: 1em 0;
     border: 1px solid #ccc;
@@ -128,23 +171,19 @@ export default {
     min-height: 200px;
     background-color: white;
 }
-
 .editor {
     min-height: 150px;
     outline: none;
 }
-
 .pagination {
     display: flex;
     justify-content: center;
     gap: 0.5em;
     margin: 1em 0;
 }
-
 .pagination button {
     padding: 0.5em 1em;
 }
-
 .pagination span {
     padding: 0.5em;
 }