working but sheet styling is ugly

src/lib/pocketbase/services/badges.ts

@@ -1,6 +1,6 @@
 import PocketBase from "pocketbase";
-import { Badge, BadgeProgress } from "@/features/badges/types";
-import { transformBadge, transformBadgeProgress } from "@/lib/pocketbase/util/transform-types";
+import { Badge, BadgeProgress, EarnedBadge } from "@/features/badges/types";
+import { transformBadge, transformBadgeProgress, transformEarnedBadge } from "@/lib/pocketbase/util/transform-types";
 
 export interface PlayerStats {
   player_id: string;
@@ -41,6 +41,14 @@ export function createBadgesService(pb: PocketBase) {
       return results.map(transformBadgeProgress);
     },
 
+     async listEarnedBadges(): Promise<EarnedBadge[]> {
+      const results = await pb.collection("badge_progress").getFullList({
+        filter: `earned = true`,
+        expand: 'player',
+      });
+      return results.map(transformEarnedBadge);
+    },
+
     async createBadgeProgress(data: {
       badge: string;
       player: string;