feat: implement Players component with data fetching and loading state; remove mock data and enhance error handling in database service

pages/Players.tsx

@@ -0,0 +1,80 @@
+import React, { useState, useEffect } from 'react';
+import { Player } from '../types';
+import { dbService } from '../services/DatabaseService';
+
+interface PlayersProps {
+  onSelectPlayer: (id: string) => void;
+}
+
+const Players: React.FC<PlayersProps> = ({ onSelectPlayer }) => {
+  const [players, setPlayers] = useState<Player[]>([]);
+  const [loading, setLoading] = useState(true);
+
+  useEffect(() => {
+    const loadData = async () => {
+      setLoading(true);
+      try {
+        await dbService.fetchAll();
+      } catch (error) {
+        console.warn('Failed to fetch fresh data:', error);
+        // Continue with cached data
+      }
+      setLoading(false);
+    };
+
+    // Subscribe to database updates
+    const unsubDb = dbService.subscribe(() => {
+      setPlayers(dbService.getPlayers());
+    });
+
+    // Load fresh data on mount
+    loadData();
+
+    return unsubDb;
+  }, []);
+
+  return (
+    <div className="animate-in fade-in">
+       <div className="flex justify-between items-center mb-6">
+         <h2 className="text-2xl font-bold">Bürgerverzeichnis</h2>
+         <div className="relative">
+            <input
+              type="text"
+              placeholder="Filtern nach Tag oder Name..."
+              className="bg-surfaceHighlight border border-border rounded-lg pl-10 pr-4 py-2 text-sm text-textMain focus:border-accentInfo focus:outline-none w-64 transition-colors"
+            />
+         </div>
+       </div>
+
+       {loading ? (
+         <div className="flex justify-center py-20">
+           <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-accentInfo"></div>
+         </div>
+       ) : (
+         <div className="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4">
+           {players.map(player => (
+             <div
+               key={player.uuid}
+               onClick={() => onSelectPlayer(player.uuid)}
+               className="group bg-surface border border-border p-4 rounded-xl cursor-pointer hover:border-accentInfo/50 transition-all duration-200 hover:shadow-card"
+             >
+               <div className="flex items-center gap-4">
+                 <div className="w-12 h-12 rounded-md flex items-center justify-center font-bold text-lg text-textMuted group-hover:text-textMain transition-colors">
+                   <img src={"https://minotar.net/armor/bust/"+player.username+"/500.png"}></img>
+                 </div>
+                 <div>
+                   <div className="font-semibold text-textMain group-hover:text-accentInfo transition-colors">{player.username}</div>
+                   <div className="text-xs text-textMuted mt-1 flex gap-2">
+                      {player.tags.slice(0, 2).map(t => <span key={t}>{t}</span>)}
+                   </div>
+                 </div>
+               </div>
+             </div>
+           ))}
+         </div>
+       )}
+    </div>
+  );
+};
+
+export default Players;