websockets implemented

frontend/src/components/AppNavigation.vue

@@ -1,7 +1,8 @@
 <template>
   <nav>
     <ul>
-      <li v-for="(item, key) in menu" :key="key" class="mainmenuitem" @click="openPage(item.path ?? null, !!item.children)">
+      <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>
         <span>{{ $t(`navigation.${key}`) }}</span>
@@ -18,6 +19,15 @@
               </li>
             </ul>
           </li>
+          <li v-if="item.showLoggedinFriends === 1 && friendsList.length > 0" v-for="friend in friendsList" :key="friend.id">
+            {{ 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>
+            </ul>
+          </li>
+        </ul>
+        <ul class="submenu1">
         </ul>
       </li>
     </ul>
@@ -39,28 +49,44 @@ export default {
   name: 'AppNavigation',
   data() {
     return {
-      forumList: []
+      forumList: [],
+      friendsList: [],
     }
   },
   computed: {
-    ...mapGetters(['menu', 'user']),
+    ...mapGetters(['menu', 'user', 'menuNeedsUpdate']),
+  },
+  watch: {
+    menuNeedsUpdate(newValue) {
+      if (newValue) {
+        console.log('Menu needs update, loading menu...');
+        this.loadMenu();
+      }
+    },
   },
   created() {
     if (this.user && this.user.id) {
       this.loadMenu();
       this.fetchForums();
+      this.fetchFriends();
     } else {
       console.log(this.user);
     }
   },
   mounted() {
-    this.forumInterval = setInterval(() => {
-      this.fetchForums();
-    }, 60000);
+    if (this.$store.getters.socket) {
+      this.$store.getters.socket.on('forumschanged', (data) => {
+        this.fetchForums();
+      });
+      this.$store.getters.socket.on('friendloginchanged', () => {
+        this.fetchFriends();
+      });
+    }
   },
-  beforeDestroy() {
-    if (this.forumInterval) {
-      clearInterval(this.forumInterval);
+  beforeUnmount() {
+    if (this.$store.getters.socket) {
+      this.$store.getters.socket.off('forumschanged');
+      this.$store.getters.socket.off('friendloginchanged');
     }
   },
   methods: {
@@ -70,7 +96,6 @@ export default {
         return;
       }
       if (url) {
-        console.log('openPage', url);
         this.$router.push(url);
       }
     },
@@ -87,6 +112,29 @@ export default {
       } catch (error) {
         console.error('Error fetching forums:', error);
       }
+    },
+
+    async fetchFriends() {
+      try {
+        const response = await apiClient.get('/api/socialnetwork/friends/loggedin');
+        this.friendsList = response.data;
+      } catch (error) {
+        console.error('Error fetching friends:', error);
+      }
+    },
+
+    async openProfile(hashedId) {
+      console.log(hashedId);
+      this.$root.$refs.userProfileDialog.userId = hashedId;
+      this.$root.$refs.userProfileDialog.open();
+    },
+
+    async openChat(hashedId) { 
+      try {
+        
+      } catch (error) {
+        
+      }
     }
   }
 };

frontend/src/components/FolderItem.vue

@@ -6,11 +6,11 @@
                 <span @click="$emit('delete-folder', folder)" class="icon delete-icon" title="Delete folder">✖</span>
             </span>
             <template v-for="i in depth">
-                <span v-if="showPipe(i)" class="marker filler">|</span>
+                <span v-if="showPipe(i)" class="marker filler tee">|</span>
                 <span v-else class="marker filler">&nbsp;</span>
             </template>
             <span v-if="isLastItem" class="end-marker marker">⌞</span>
-            <span v-else class="marker">&#x251C;</span>
+            <span v-else class="marker tee">&#x251C;</span>
             <span class="folder-name-text">&nbsp;{{ folder.name }}</span>
         </div>
 
@@ -115,4 +115,8 @@ export default {
 .folder-name-text {
     cursor: pointer;
 }
+
+.tee {
+    margin: 0 1px 0 -1px;
+}
 </style>