leaderboard теперь показывает данные из БД. Приложение работает

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>