fix: refresh the v2 gallery when a ROM is edited or matched

The v2 gallery renders from `galleryRoms.byPosition`, but every v2 write site
only patched v1's `stores/roms`, whose `_allRoms` the gallery never reads.
Edits and matches replace the ROM with a fresh object from the API response,
so the card kept showing the pre-edit name and cover until its window happened
to be refetched. Optimistic toggles appeared to work only because they mutate
the cached object in place, and the gallery holds that same reference.

Add `useRomSync` and route the v2 write sites through it:

- `syncRom` fans a write out to both stores. `galleryRoms.update` already
  existed for exactly this and had no callers.
- `applyRomWrite` (edit / match dialogs) also refetches when an in-place swap
  would leave the list lying: any active filter, since a match rewrites
  provider ids, name and the metadata behind half the drawer, or a change to
  the value the gallery is currently ordered by.
- `refreshAfterUserStateChange` covers favourite / status writes, guarded
  narrowly on the filters those can actually move. The existing "drop it from
  the Favourites view" branches check v1's collection context, which v2 never
  sets, so they were dead under v2.
- `refreshIfOrderedBy` covers writes that mutate the cached ROM in place,
  leaving `applyRomWrite` nothing to diff: clearing `last_played` has to
  reorder a gallery sorted by it.

Optimistic toggles keep the cheap in-place update, since invalidating the
windows costs skeletons and the scroll position.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>

Author: sdornan

frontend/src/v2/components/Dialogs/DeleteManualDialog.vue

@@ -10,6 +10,7 @@ import { useI18n } from "vue-i18n";
 import romApi from "@/services/api/rom";
 import storeRoms, { type DetailedRom } from "@/stores/roms";
 import type { Events } from "@/types/emitter";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 
 defineOptions({ inheritAttrs: false });
@@ -18,6 +19,7 @@ const { t } = useI18n();
 const emitter = inject<Emitter<Events>>("emitter");
 const snackbar = useSnackbar();
 const romsStore = storeRoms();
+const { syncRom } = useRomSync();
 
 const show = ref(false);
 const rom = ref<DetailedRom | null>(null);
@@ -48,7 +50,7 @@ async function refreshRom() {
   try {
     const { data } = await romApi.getRom({ romId: rom.value.id });
     romsStore.currentRom = data;
-    romsStore.update(data);
+    syncRom(data);
   } catch (error) {
     console.error(error);
   }

frontend/src/v2/components/Dialogs/EditRomDialog.vue

@@ -30,6 +30,7 @@ import MetadataIdSection from "@/v2/components/EditRom/MetadataIdSection.vue";
 import RawMetadataPanel from "@/v2/components/EditRom/RawMetadataPanel.vue";
 import GameCard from "@/v2/components/GameCard/GameCard.vue";
 import { useBreakpoint } from "@/v2/composables/useBreakpoint";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 import { getMissingCoverImage } from "@/v2/utils/covers";
 
@@ -59,6 +60,7 @@ const coverFileInput = ref<HTMLInputElement | null>(null);
 const saving = ref(false);
 const emitter = inject<Emitter<Events>>("emitter");
 const snackbar = useSnackbar();
+const { applyRomWrite } = useRomSync();
 
 const openHandler = async (romToEdit: SimpleRom) => {
   show.value = true;
@@ -242,7 +244,7 @@ async function handleRomUpdate(
   try {
     const { data } = await romApi.updateRom(options);
     snackbar.success(successMessage, { icon: "mdi-check-bold" });
-    romsStore.update(data as SimpleRom);
+    applyRomWrite(data as SimpleRom);
     if (route.name === "rom") romsStore.currentRom = data;
   } catch (error: unknown) {
     console.error(error);

frontend/src/v2/components/Dialogs/ManualUploadTargetDialog.vue

@@ -12,6 +12,7 @@ import romApi from "@/services/api/rom";
 import storeRoms, { type DetailedRom } from "@/stores/roms";
 import storeUpload from "@/stores/upload";
 import type { Events } from "@/types/emitter";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 
 defineOptions({ inheritAttrs: false });
@@ -20,6 +21,7 @@ const { t } = useI18n();
 const emitter = inject<Emitter<Events>>("emitter");
 const snackbar = useSnackbar();
 const romsStore = storeRoms();
+const { syncRom } = useRomSync();
 const uploadStore = storeUpload();
 
 const show = ref(false);
@@ -44,7 +46,7 @@ async function refreshRom() {
   try {
     const { data } = await romApi.getRom({ romId: rom.value.id });
     romsStore.currentRom = data;
-    romsStore.update(data);
+    syncRom(data);
   } catch (error) {
     console.error(error);
   }

frontend/src/v2/components/Dialogs/MatchRomDialog.vue

@@ -31,6 +31,7 @@ import type {
   MatchVariant,
 } from "@/v2/components/MatchRom/types";
 import { useBreakpoint } from "@/v2/composables/useBreakpoint";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 
 defineOptions({ inheritAttrs: false });
@@ -71,6 +72,7 @@ const matchedRoms = ref<SearchRom[]>([]);
 const emitter = inject<Emitter<Events>>("emitter");
 const snackbar = useSnackbar();
 const heartbeat = storeHeartbeat();
+const { applyRomWrite } = useRomSync();
 
 // Active body variant — the toolbar selector toggles between the
 // gallery-style grid and the master/detail list, mirroring the
@@ -257,7 +259,7 @@ async function onBodyConfirm(payload: ConfirmPayload) {
     snackbar.success(t("rom.rom-updated-successfully"), {
       icon: "mdi-check-bold",
     });
-    romsStore.update(data as SimpleRom);
+    applyRomWrite(data as SimpleRom);
     if (route.name === "rom") romsStore.currentRom = data;
   } catch (error: unknown) {
     const axiosErr = error as { response?: { data?: { detail?: string } } };

frontend/src/v2/components/Gallery/SelectionBar.vue

@@ -53,6 +53,7 @@ import type { Events } from "@/types/emitter";
 import { romStatusMap } from "@/utils";
 import { useBreakpoint } from "@/v2/composables/useBreakpoint";
 import { useCan } from "@/v2/composables/useCan";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 import storeGallerySelection from "@/v2/stores/gallerySelection";
 import {
@@ -75,6 +76,7 @@ const snackbar = useSnackbar();
 const selection = storeGallerySelection();
 const collectionsStore = storeCollections();
 const romsStore = storeRoms();
+const { syncRom, refreshAfterUserStateChange } = useRomSync();
 
 const canRefresh = useCan("rom.refresh");
 const canDownload = useCan("rom.download");
@@ -122,6 +124,8 @@ async function bulkFavorite() {
       // roms so the UI reflects the new membership immediately.
       romsStore.remove(selection.roms);
     }
+    // The branch above only covers v1's gallery context; v2 tracks its own.
+    refreshAfterUserStateChange();
     snackbar.success(
       allFavorited.value
         ? t("gallery.selection-unfavorite-success", { n: ids.length })
@@ -178,7 +182,7 @@ async function applyStatus(data: Partial<RomUserData>) {
     if (!rom.rom_user) continue;
     before.set(rom.id, { ...rom.rom_user });
     Object.assign(rom.rom_user, data);
-    romsStore.update(rom);
+    syncRom(rom);
   }
 
   const results = await Promise.allSettled(
@@ -189,10 +193,13 @@ async function applyStatus(data: Partial<RomUserData>) {
     const snapshot = before.get(rom.id);
     if (rom.rom_user && snapshot) {
       Object.assign(rom.rom_user, snapshot);
-      romsStore.update(rom);
+      syncRom(rom);
     }
   }
 
+  // Once for the whole batch, after the reverts are in.
+  refreshAfterUserStateChange();
+
   const ok = roms.length - failed.length;
   if (failed.length === 0) {
     snackbar.success(t("gallery.selection-status-success", { n: ok }));

frontend/src/v2/components/GameDetails/FilesTab/FilesTab.vue

@@ -53,6 +53,7 @@ import storeRoms from "@/stores/roms";
 import { getDownloadLink } from "@/utils";
 import { useCan } from "@/v2/composables/useCan";
 import { useConfirm } from "@/v2/composables/useConfirm";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 import FileRow from "./FileRow.vue";
 import FilesSummary from "./FilesSummary.vue";
@@ -67,6 +68,7 @@ const confirm = useConfirm();
 const route = useRoute();
 const router = useRouter();
 const romsStore = storeRoms();
+const { syncRom } = useRomSync();
 
 const canUpload = useCan("rom.upload");
 const hasDeleteGrant = useCan("rom.delete");
@@ -578,7 +580,7 @@ async function refreshRom() {
   try {
     const { data } = await romApi.getRom({ romId: props.rom.id });
     romsStore.currentRom = data;
-    romsStore.update(data);
+    syncRom(data);
   } catch (error) {
     console.error(error);
   }

frontend/src/v2/components/GameDetails/MainSiblingToggle.vue

@@ -15,8 +15,8 @@ import { computed } from "vue";
 import { useI18n } from "vue-i18n";
 import type { RomUserData } from "@/__generated__";
 import romApi from "@/services/api/rom";
-import storeRoms from "@/stores/roms";
 import type { DetailedRom } from "@/stores/roms";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 
 defineOptions({ inheritAttrs: false });
@@ -27,7 +27,7 @@ const props = defineProps<{
 
 const { t } = useI18n();
 const snackbar = useSnackbar();
-const romsStore = storeRoms();
+const { syncRom } = useRomSync();
 
 const visible = computed(
   () => props.rom.sibling_roms.length > 0 && props.rom.rom_user != null,
@@ -48,13 +48,13 @@ async function toggle() {
   const data: Partial<RomUserData> = { is_main_sibling: next };
 
   ru.is_main_sibling = next;
-  romsStore.update(props.rom);
+  syncRom(props.rom);
 
   try {
     await romApi.updateUserRomProps({ romId: props.rom.id, data });
   } catch {
     ru.is_main_sibling = before;
-    romsStore.update(props.rom);
+    syncRom(props.rom);
     snackbar.error(t("rom.update-default-failed"), {
       icon: "mdi-alert-circle-outline",
     });

frontend/src/v2/components/GameDetails/ManualSubtab.vue

@@ -18,6 +18,7 @@ import type { Events } from "@/types/emitter";
 import { FRONTEND_RESOURCES_PATH } from "@/utils";
 import { useCan } from "@/v2/composables/useCan";
 import { useConfirm } from "@/v2/composables/useConfirm";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 
 const PdfViewer = defineAsyncComponent(
@@ -41,6 +42,7 @@ const emitter = inject<Emitter<Events>>("emitter");
 const snackbar = useSnackbar();
 const confirm = useConfirm();
 const romsStore = storeRoms();
+const { syncRom } = useRomSync();
 const { t } = useI18n();
 
 // Every manual endpoint (upload / redownload / delete) gates on the ROM write
@@ -141,7 +143,7 @@ async function refreshRom() {
   try {
     const { data } = await romApi.getRom({ romId: props.rom.id });
     romsStore.currentRom = data;
-    romsStore.update(data);
+    syncRom(data);
   } catch (error) {
     console.error(error);
   }

frontend/src/v2/components/GameDetails/MediaTab.vue

@@ -21,6 +21,7 @@ import storeRoms, { type DetailedRom } from "@/stores/roms";
 import storeUpload from "@/stores/upload";
 import { useCan } from "@/v2/composables/useCan";
 import { useConfirm } from "@/v2/composables/useConfirm";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 
 const ManualSubtab = defineAsyncComponent(
@@ -49,6 +50,7 @@ const props = defineProps<{ rom: DetailedRom }>();
 const snackbar = useSnackbar();
 const confirm = useConfirm();
 const romsStore = storeRoms();
+const { syncRom } = useRomSync();
 const uploadStore = storeUpload();
 const { t } = useI18n();
 
@@ -159,7 +161,7 @@ async function refreshRom() {
   try {
     const { data } = await romApi.getRom({ romId: props.rom.id });
     romsStore.currentRom = data;
-    romsStore.update(data);
+    syncRom(data);
   } catch (error) {
     console.error(error);
   }

frontend/src/v2/components/GameDetails/SaveDataTab.vue

@@ -36,6 +36,7 @@ import storeRoms from "@/stores/roms";
 import AssetList from "@/v2/components/shared/AssetList.vue";
 import AssetStrip from "@/v2/components/shared/AssetStrip.vue";
 import { useConfirm } from "@/v2/composables/useConfirm";
+import { useRomSync } from "@/v2/composables/useRomSync";
 import { useSnackbar } from "@/v2/composables/useSnackbar";
 
 // Slot payload from AssetList/AssetStrip is the full save|state union; these
@@ -138,6 +139,7 @@ const uploadingStates = ref(false);
 const snackbar = useSnackbar();
 const confirm = useConfirm();
 const romsStore = storeRoms();
+const { syncRom } = useRomSync();
 
 function errorMessage(err: unknown): string {
   if (axios.isAxiosError(err)) {
@@ -152,7 +154,7 @@ async function refreshRom() {
   try {
     const { data } = await romApi.getRom({ romId: props.rom.id });
     romsStore.currentRom = data;
-    romsStore.update(data);
+    syncRom(data);
   } catch (error) {
     console.error(error);
   }