feature: Add additional editable metadata

backend/endpoints/responses/rom.py

@@ -85,6 +85,19 @@ class Config:
     {k: NotRequired[v] for k, v in get_type_hints(GamelistMetadata).items()},  # type: ignore[misc]
     total=False,
 )
+ManualMetadata = TypedDict(
+    "ManualMetadata",
+    {
+        "genres": list[str] | None,
+        "franchises": list[str] | None,
+        "companies": list[str] | None,
+        "game_modes": list[str] | None,
+        "age_ratings": list[str] | None,
+        "first_release_date": int | None,
+        "youtube_video_id": str | None,
+    },
+    total=False,
+)
 
 
 def rom_user_schema_factory() -> RomUserSchema:
@@ -239,6 +252,7 @@ class RomSchema(BaseModel):
     flashpoint_metadata: RomFlashpointMetadata | None
     hltb_metadata: RomHLTBMetadata | None
     gamelist_metadata: RomGamelistMetadata | None
+    manual_metadata: ManualMetadata | None
 
     path_cover_small: str | None
     path_cover_large: str | None

backend/endpoints/rom.py

@@ -956,6 +956,7 @@ async def update_rom(
                 "flashpoint_metadata": {},
                 "hltb_metadata": {},
                 "revision": "",
+                "gamelist_metadata": {},
             },
         )
 
@@ -1006,7 +1007,7 @@ async def update_rom(
     raw_hasheous_metadata = parse_raw_metadata(data, "raw_hasheous_metadata")
     raw_flashpoint_metadata = parse_raw_metadata(data, "raw_flashpoint_metadata")
     raw_hltb_metadata = parse_raw_metadata(data, "raw_hltb_metadata")
-
+    raw_manual_metadata = parse_raw_metadata(data, "raw_manual_metadata")
     if cleaned_data["igdb_id"] and raw_igdb_metadata is not None:
         cleaned_data["igdb_metadata"] = raw_igdb_metadata
     if cleaned_data["moby_id"] and raw_moby_metadata is not None:
@@ -1021,6 +1022,8 @@ async def update_rom(
         cleaned_data["flashpoint_metadata"] = raw_flashpoint_metadata
     if cleaned_data["hltb_id"] and raw_hltb_metadata is not None:
         cleaned_data["hltb_metadata"] = raw_hltb_metadata
+    if raw_manual_metadata is not None:
+        cleaned_data["manual_metadata"] = raw_manual_metadata
 
     # Fetch metadata from external sources
     if (

backend/models/rom.py

@@ -210,6 +210,9 @@ class Rom(BaseModel):
     gamelist_metadata: Mapped[dict[str, Any] | None] = mapped_column(
         CustomJSON(), default=dict
     )
+    manual_metadata: Mapped[dict[str, Any] | None] = mapped_column(
+        CustomJSON(), default=dict
+    )
 
     path_cover_s: Mapped[str | None] = mapped_column(Text, default="")
     path_cover_l: Mapped[str | None] = mapped_column(Text, default="")

frontend/src/components/Details/Info/GameInfo.vue

@@ -115,6 +115,57 @@ const coverImageSource = computed(() => {
   }
 });
 
+const ageRatingBadges = computed(() => {
+  const ratings = props.rom.metadatum?.age_ratings || [];
+  const igdbRatings = (props.rom.igdb_metadata as any)?.age_ratings || [];
+  const igdbByRating = new Map(
+    igdbRatings.map((r: any) => [String(r?.rating || "").trim(), r]),
+  );
+  const categorySlug: Record<string, string> = {
+    ESRB: "esrb",
+    PEGI: "pegi",
+    CERO: "cero",
+    USK: "usk",
+    GRAC: "grac",
+    CLASS_IND: "class_ind",
+    ACB: "acb",
+  };
+  const normalizeRatingCode = (rating: string) =>
+    rating.toString().toLowerCase().replace("+", "");
+
+  return ratings.map((entry: any) => {
+    if (typeof entry === "object" && entry?.rating) {
+      return entry;
+    }
+
+    const raw = String(entry);
+    if (raw.includes(":")) {
+      const [categoryRaw, ratingRaw] = raw.split(":");
+      const category = categoryRaw?.trim() || "";
+      const rating = ratingRaw?.trim() || "";
+      const slug = categorySlug[category];
+
+      const rating_cover_url =
+        slug && rating
+          ? `https://www.igdb.com/icons/rating_icons/${slug}/${slug}_${normalizeRatingCode(rating)}.png`
+          : undefined;
+
+      return {
+        rating,
+        category,
+        rating_cover_url,
+      };
+    }
+
+    const igdbMatch = igdbByRating.get(raw.trim());
+    if (igdbMatch) {
+      return igdbMatch;
+    }
+
+    return { rating: raw, category: "", rating_cover_url: undefined };
+  });
+});
+
 function onFilterClick(filter: FilterType, value: string) {
   router.push({
     name: "search",
@@ -181,20 +232,15 @@ function onFilterClick(filter: FilterType, value: string) {
         </v-row>
       </template>
       <!-- Manually add age ratings to display logos -->
-      <template
-        v-if="
-          rom.igdb_metadata?.age_ratings &&
-          rom.igdb_metadata.age_ratings.length > 0
-        "
-      >
+      <template v-if="ageRatingBadges.length > 0">
         <v-row no-gutters class="mt-5">
           <v-col cols="3" xl="2" class="text-capitalize">
             <span>{{ t("rom.age-rating") }}</span>
           </v-col>
           <div class="d-flex" :class="{ 'my-2': xs }">
             <v-img
-              v-for="value in rom.igdb_metadata.age_ratings"
-              :key="value.rating"
+              v-for="value in ageRatingBadges"
+              :key="`${value.category}:${value.rating}`"
               :src="value.rating_cover_url"
               height="50"
               width="50"
@@ -223,7 +269,11 @@ function onFilterClick(filter: FilterType, value: string) {
         </v-row>
       </template>
       <template
-        v-if="rom.merged_screenshots.length > 0 || rom.youtube_video_id"
+        v-if="
+          rom.merged_screenshots.length > 0 ||
+          rom.youtube_video_id ||
+          rom.manual_metadata?.youtube_video_id
+        "
       >
         <v-row no-gutters class="mt-4">
           <v-col>

frontend/src/components/Details/Info/MediaCarousel.vue

@@ -18,7 +18,11 @@ const props = withDefaults(defineProps<Props>(), {
   enableClick: false,
 });
 
-const youtubeVideoId = computed(() => props.rom.youtube_video_id);
+const youtubeVideoId = computed(
+  () =>
+    props.rom.manual_metadata?.youtube_video_id || props.rom.youtube_video_id,
+);
+
 const localVideoPath = computed(() => {
   return (
     props.rom.ss_metadata?.video_path || props.rom.gamelist_metadata?.video_path

frontend/src/components/common/Game/Dialog/EditRom.vue

@@ -12,6 +12,7 @@ import storeRoms, { type SimpleRom } from "@/stores/roms";
 import storeUpload from "@/stores/upload";
 import type { Events } from "@/types/emitter";
 import { getMissingCoverImage } from "@/utils/covers";
+import AdditionalDetails from "./EditRom/AdditionalDetails.vue";
 import MetadataIdSection from "./EditRom/MetadataIdSection.vue";
 import MetadataSections from "./EditRom/MetadataSections.vue";
 
@@ -83,7 +84,6 @@ async function handleRomUpdate(
   successMessage: string,
 ) {
   emitter?.emit("showLoadingDialog", { loading: true, scrim: true });
-
   await romApi
     .updateRom(options)
     .then(({ data }) => {
@@ -106,7 +106,10 @@ async function handleRomUpdate(
       });
     })
     .finally(() => {
-      emitter?.emit("showLoadingDialog", { loading: false, scrim: false });
+      emitter?.emit("showLoadingDialog", {
+        loading: false,
+        scrim: false,
+      });
       closeDialog();
     });
 }
@@ -402,6 +405,10 @@ function handleRomUpdateFromMetadata(updatedRom: UpdateRom) {
           </v-col>
         </v-row>
         <v-expansion-panels class="mt-6">
+          <AdditionalDetails
+            :rom="rom"
+            @update:rom="handleRomUpdateFromMetadata"
+          />
           <MetadataIdSection
             :rom="rom"
             @update:rom="handleRomUpdateFromMetadata"