Implement metadata completeness indicator

Implement sorting by completeness

app/src/main/frontend/components/general/MetadataCompletenessIndicator.tsx

@@ -0,0 +1,27 @@
+import GameDto from "Frontend/generated/org/gameyfin/app/games/dto/GameDto";
+import {useMemo} from "react";
+import {CircularProgress} from "@heroui/react";
+import {metadataCompleteness} from "Frontend/util/utils";
+
+interface MetadataCompletenessIndicatorProps {
+    game: GameDto;
+}
+
+export default function MetadataCompletenessIndicator({game}: MetadataCompletenessIndicatorProps) {
+    const completeness = useMemo(() => metadataCompleteness(game), [game]);
+
+    const color = useMemo(() => {
+        return completeness > 80 ? "success" : completeness > 50 ? "warning" : "danger";
+    }, [completeness]);
+
+    return <div className="flex flex-row items-center gap-1">
+        <CircularProgress
+            color={color}
+            value={completeness}
+            disableAnimation
+            size="sm"
+            strokeWidth={5}
+        />
+        <p>{completeness}% </p>
+    </div>;
+}

app/src/main/frontend/components/general/library/LibraryManagementGames.tsx

@@ -26,6 +26,8 @@ import {useMemo, useState} from "react";
 import EditGameMetadataModal from "Frontend/components/general/modals/EditGameMetadataModal";
 import MatchGameModal from "Frontend/components/general/modals/MatchGameModal";
 import {GameAdminDto} from "Frontend/dtos/GameDtos";
+import MetadataCompletenessIndicator from "Frontend/components/general/MetadataCompletenessIndicator";
+import {metadataCompleteness} from "Frontend/util/utils";
 
 interface LibraryManagementGamesProps {
     library: LibraryDto;
@@ -67,6 +69,9 @@ export default function LibraryManagementGames({library}: LibraryManagementGames
                 case "downloadCount":
                     cmp = a.metadata.downloadCount - b.metadata.downloadCount;
                     break;
+                case "completeness":
+                    cmp = metadataCompleteness(a) - metadataCompleteness(b);
+                    break;
                 default:
                     return 0; // No sorting if the column is not recognized
             }
@@ -160,6 +165,7 @@ export default function LibraryManagementGames({library}: LibraryManagementGames
                 <TableColumn key="addedToLibrary" allowsSorting>Added to library</TableColumn>
                 <TableColumn key="downloadCount" allowsSorting>Download count</TableColumn>
                 <TableColumn>Path</TableColumn>
+                <TableColumn key="completeness" allowsSorting>Completeness</TableColumn>
                 {/* width={1} keeps the column as far to the right as possible*/}
                 <TableColumn width={1}>Actions</TableColumn>
             </TableHeader>
@@ -182,6 +188,9 @@ export default function LibraryManagementGames({library}: LibraryManagementGames
                         <TableCell>
                             {item.metadata.path}
                         </TableCell>
+                        <TableCell>
+                            <MetadataCompletenessIndicator game={item}/>
+                        </TableCell>
                         <TableCell>
                             <div className="flex flex-row gap-2">
                                 <Button isIconOnly size="sm" onPress={() => toggleMatchConfirmed(item)}>