From b2b1ba078e99351f2c57a1848aad494e6e35b8c3 Mon Sep 17 00:00:00 2001
From: Alexander Andreev <a.andreev@omniagency.ru>
Date: Mon, 5 Jan 2026 16:10:25 +0300
Subject: [PATCH] =?UTF-8?q?leaderboard=20=D1=82=D0=B5=D0=BF=D0=B5=D1=80?=
 =?UTF-8?q?=D1=8C=20=D0=BF=D0=BE=D0=BA=D0=B0=D0=B7=D1=8B=D0=B2=D0=B0=D0=B5?=
 =?UTF-8?q?=D1=82=20=D0=B4=D0=B0=D0=BD=D0=BD=D1=8B=D0=B5=20=D0=B8=D0=B7=20?=
 =?UTF-8?q?=D0=91=D0=94.=20=D0=9F=D1=80=D0=B8=D0=BB=D0=BE=D0=B6=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=B8=D0=B5=20=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=B0=D0=B5?=
 =?UTF-8?q?=D1=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/pages/leaderboard.vue | 51 +++++++++++++++++++--------------------
 1 file changed, 25 insertions(+), 26 deletions(-)

diff --git a/app/pages/leaderboard.vue b/app/pages/leaderboard.vue
index e03c658..4fe1410 100644
--- a/app/pages/leaderboard.vue
+++ b/app/pages/leaderboard.vue
@@ -1,38 +1,37 @@
 <template>
   <div class="leaderboard-container">
     <h3>Monthly Leaderboard</h3>
-    <ul class="leaderboard-list">
-      <li class="leaderboard-item">
-        <span class="rank">1.</span>
-        <span class="name">Papa Smurf</span>
-        <span class="exp">9800 EXP</span>
-      </li>
-      <li class="leaderboard-item self">
-        <span class="rank">2.</span>
-        <span class="name">Smurfette</span>
-        <span class="exp">8500 EXP</span>
-      </li>
-      <li class="leaderboard-item">
-        <span class="rank">3.</span>
-        <span class="name">Brainy Smurf</span>
-        <span class="exp">8250 EXP</span>
-      </li>
-      <li class="leaderboard-item">
-        <span class="rank">4.</span>
-        <span class="name">Hefty Smurf</span>
-        <span class="exp">7600 EXP</span>
-      </li>
-      <li class="leaderboard-item">
-        <span class="rank">5.</span>
-        <span class="name">Jokey Smurf</span>
-        <span class="exp">6100 EXP</span>
+    <div v-if="pending" class="loading">Loading leaderboard...</div>
+    <div v-else-if="error" class="error-container">
+      <p>An error occurred while fetching the leaderboard. Please try again.</p>
+    </div>
+    <ul v-else class="leaderboard-list">
+      <li 
+        v-for="entry in leaderboard" 
+        :key="entry.rank + entry.nickname" 
+        class="leaderboard-item"
+        :class="{ 'self': currentUser && currentUser.nickname === entry.nickname }"
+      >
+        <span class="rank">{{ entry.rank }}.</span>
+        <span class="name">{{ entry.nickname }}</span>
+        <span class="exp">{{ entry.exp }} EXP</span>
       </li>
     </ul>
   </div>
 </template>
 
 <script setup lang="ts">
-// No logic, just visual placeholders
+import { useAuth } from '~/composables/useAuth';
+
+const { user: currentUser } = useAuth(); // Get current authenticated user
+
+const { data, pending, error } = await useFetch('/api/leaderboard', {
+  lazy: true,
+  server: false,
+});
+
+const leaderboard = computed(() => data.value?.leaderboard || []);
+
 </script>
 
 <style scoped>