perf(assets): optimize image pipeline and fix leaderboard linting (#630)

src/components/features/SkillTreeVisualizer.tsx

@@ -149,6 +149,31 @@ export default function SkillTreeVisualizer({
       window.removeEventListener('close-all-overlays', handleCloseAll);
   }, []);
 
+  // Bind local arrow key shortcuts for node selection cycling
+  useKeyboardShortcuts({
+    arrowright: () => {
+      if (nodes.length === 0) return;
+      const currentIndex = selectedNode ? nodes.findIndex((n) => n.id === selectedNode.id) : -1;
+      const nextIndex = currentIndex === -1 ? 0 : (currentIndex + 1) % nodes.length;
+      setSelectedNode(nodes[nextIndex]);
+    },
+    arrowleft: () => {
+      if (nodes.length === 0) return;
+      const currentIndex = selectedNode ? nodes.findIndex((n) => n.id === selectedNode.id) : -1;
+      const prevIndex = currentIndex === -1 ? nodes.length - 1 : (currentIndex - 1 + nodes.length) % nodes.length;
+      setSelectedNode(nodes[prevIndex]);
+    },
+  });
+
+  // Listen for the escape close-all-overlays event to close the side drawer
+  useEffect(() => {
+    const handleCloseAll = () => {
+      setSelectedNode(null);
+    };
+    window.addEventListener('close-all-overlays', handleCloseAll);
+    return () => window.removeEventListener('close-all-overlays', handleCloseAll);
+  }, []);
+
   return (
     <div
       className={`${styles.container} w-full flex flex-col items-center bg-[#0f1115] p-6 rounded-xl border border-slate-800`}

src/components/gamification/Leaderboard.tsx

@@ -1,8 +1,10 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
 'use client';
 import { useEffect, useState } from 'react';
 import { collection, query, orderBy, limit, getDocs } from 'firebase/firestore';
 import { db } from '@/lib/firebase';
 import { getTier } from '@/lib/gamification';
+import Image from 'next/image';
 
 export function Leaderboard() {
   const [users, setUsers] = useState<any[]>([]);
@@ -48,9 +50,12 @@ export function Leaderboard() {
               <span className="text-gray-400 w-6 text-center font-mono">
                 #{i + 1}
               </span>
-              <img
+              <Image
                 src={u.photoURL ?? '/default-avatar.png'}
-                className="w-8 h-8 rounded-full"
+                alt={u.displayName ?? 'User avatar'}
+                width={32}
+                height={32}
+                className="rounded-full"
               />
               <span className="flex-1 font-medium">
                 {u.displayName ?? 'Anonymous'}