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.

Optimistic toggles keep the cheap in-place update: 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);
   }