add working filter for hidden roms

backend/endpoints/responses/rom.py

@@ -168,11 +168,7 @@ class SimpleRomSchema(RomSchema):
     ) -> SimpleRomSchema | None:
         user_id = request.user.id
 
-        rom_user = RomUserSchema.for_user(user_id, db_rom)
-        if rom_user and rom_user.hidden:
-            return None
-
-        db_rom.rom_user = rom_user
+        db_rom.rom_user = RomUserSchema.for_user(user_id, db_rom)
 
         return cls.model_validate(db_rom)
 

frontend/src/stores/roms.ts

@@ -154,6 +154,13 @@ export default defineStore("roms", {
       }
       if (galleryFilter.selectedStatus) {
         this._filterStatus(galleryFilter.selectedStatus);
+      } else {
+        this._filteredIDs = new Set(
+          // Filter hidden roms if the status is not hidden
+          this.filteredRoms
+            .filter((rom) => !rom.rom_user.hidden)
+            .map((rom) => rom.id),
+        );
       }
     },
     _filterSearch(searchFilter: string) {
@@ -259,8 +266,11 @@ export default defineStore("roms", {
             (rom) =>
               rom.rom_user.status === stf ||
               (stf === "now_playing" && rom.rom_user.now_playing) ||
-              (stf === "backlogged" && rom.rom_user.backlogged),
+              (stf === "backlogged" && rom.rom_user.backlogged) ||
+              (stf === "hidden" && rom.rom_user.hidden),
           )
+          // Filter hidden roms if the status is not hidden
+          .filter((rom) => (stf === "hidden" ? true : !rom.rom_user.hidden))
           .map((rom) => rom.id),
       );
 

frontend/src/utils/index.ts

@@ -367,7 +367,7 @@ export function isRuffleEmulationSupported(
   );
 }
 
-type PlayingStatus = RomUserStatus | "backlogged" | "now_playing";
+type PlayingStatus = RomUserStatus | "backlogged" | "now_playing" | "hidden";
 
 export const romStatusMap: Record<
   PlayingStatus,
@@ -380,6 +380,7 @@ export const romStatusMap: Record<
   completed_100: { emoji: "💯", text: "Completed 100%" },
   retired: { emoji: "🏴", text: "Retired" },
   never_playing: { emoji: "🚫", text: "Never Playing" },
+  hidden: { emoji: "👻", text: "Hidden" },
 };
 
 const inverseRomStatusMap = Object.fromEntries(