histories are a little messed, will change the logic in the future (techdebt)

frontend/src/components/layout/NavBar.vue

@@ -22,13 +22,23 @@
                     </NavigationMenuLink>
                 </NavigationMenuItem>
 
-                <NavigationMenuItem v-else>
-                    <NavigationMenuLink>
-                        <a href="/home" @click.prevent="logoutClickHandler" class="cursor-pointer">Logout</a>
+                <NavigationMenuItem v-else class="flex flex-row gap-4">
+                    <NavigationMenuLink v-if="coins > 0" href="/user?tab=transaction-history"
+                        class="flex flex-row items-center gap-1">
+                        <div class="flex items-center justify-center w-5 h-5 bg-purple-400 rounded-full shadow-sm">
+                            <span class="text-[10px] font-bold text-purple-900">$</span>
+                        </div>
+
+                        <span class="text-sm font-medium tabular-nums">
+                            {{ coins }} <span class="text-muted-foreground text-xs">Coins</span>
+                        </span>
                     </NavigationMenuLink>
                     <NavigationMenuLink>
                         <RouterLink to="/user">Profile</RouterLink>
                     </NavigationMenuLink>
+                    <NavigationMenuLink>
+                        <a href="/home" @click.prevent="logoutClickHandler" class="cursor-pointer">Logout</a>
+                    </NavigationMenuLink>
                 </NavigationMenuItem>
             </NavigationMenuList>
         </NavigationMenu>
@@ -46,16 +56,20 @@ import {
     NavigationMenuTrigger,
 } from '@/components/ui/navigation-menu'
 import router from '@/router';
+import { ref, watch } from 'vue';
+import { useUserStore } from '@/stores/user';
+
 
 const emits = defineEmits(['logout'])
 const { userLoggedIn } = defineProps(['userLoggedIn'])
+const coins = ref(0);
 
 const biscaStore = useBiscaStore()
 
 const logoutClickHandler = () => {
     if (biscaStore.isGameRunning) {
         const confirmLogout = window.confirm(
-            '⚠️ Jogo em Progresso!\n\nSe fizeres Logout agora, perderás o jogo atual e serás considerado PERDEDOR.\n\nQueres mesmo sair?'
+            'If you leave now this game will count as "FORFEIT". Are you sure you want to logout?'
         )
         if (!confirmLogout) return
 
@@ -67,7 +81,25 @@ const logoutClickHandler = () => {
     }
 
     emits('logout')
-
-    router.push({ name: 'home' }) 
+    router.push('/login')
 }
+
+const fetchUserCoins = async () => {
+    if (userLoggedIn) {
+        try {
+            const response = await useUserStore().getCoins()
+            coins.value = response.data?.coins || 0
+        } catch (error) {
+            console.error('Error fetching user coins', error)
+        }
+    }
+}
+
+watch(() => userLoggedIn, async (isLoggedIn) => {
+    if (isLoggedIn) {
+        await fetchUserCoins()
+    } else {
+        coins.value = 0
+    }
+}, { immediate: true })
 </script>