first commit

client/src/components/FeedSidebar.tsx

@@ -0,0 +1,68 @@
+import { useAuth } from '@/hooks/useAuth';
+import { useCats } from '@/hooks/useCats';
+import { Avatar, AvatarFallback } from '@/components/ui/avatar';
+import { Link } from 'react-router-dom';
+import { Trophy } from 'lucide-react';
+
+export default function FeedSidebar() {
+  const { user } = useAuth();
+  const { data } = useCats(1);
+
+  const usersMap = new Map<number, { username: string; points: number }>();
+  if (data?.cats) {
+    for (const cat of data.cats) {
+      if (!usersMap.has(cat.user_id)) {
+        usersMap.set(cat.user_id, { username: cat.username, points: cat.user_points });
+      }
+    }
+  }
+
+  const topUsers = Array.from(usersMap.entries())
+    .sort((a, b) => b[1].points - a[1].points)
+    .slice(0, 5);
+
+  return (
+    <div className="space-y-6">
+      {user && (
+        <Link to="/profile" className="flex items-center gap-3 group">
+          <Avatar className="h-10 w-10">
+            <AvatarFallback className="bg-foreground text-background text-sm">
+              {user.username.charAt(0).toUpperCase()}
+            </AvatarFallback>
+          </Avatar>
+          <div>
+            <p className="text-sm font-medium group-hover:underline">{user.username}</p>
+            <p className="text-xs text-muted-foreground">{user.points} pts</p>
+          </div>
+        </Link>
+      )}
+
+      <div>
+        <div className="flex items-center gap-1.5 mb-3">
+          <Trophy className="h-3.5 w-3.5 text-muted-foreground" />
+          <h3 className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">Leaderboard</h3>
+        </div>
+        {topUsers.length === 0 ? (
+          <p className="text-xs text-muted-foreground">No users yet</p>
+        ) : (
+          <div className="space-y-2.5">
+            {topUsers.map(([id, u], i) => (
+              <Link key={id} to={`/profile/${id}`} className="flex items-center gap-2.5 group">
+                <span className={`w-4 text-center text-xs font-mono font-bold ${
+                  i === 0 ? 'text-foreground' : 'text-muted-foreground'
+                }`}>{i + 1}</span>
+                <Avatar className="h-6 w-6">
+                  <AvatarFallback className="text-[9px] bg-foreground text-background">
+                    {u.username.charAt(0).toUpperCase()}
+                  </AvatarFallback>
+                </Avatar>
+                <span className="text-xs flex-1 truncate group-hover:underline">{u.username}</span>
+                <span className="text-xs font-mono text-muted-foreground">{u.points}</span>
+              </Link>
+            ))}
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}