fix: refine polling and settings layout

frontend/src/views/LiveRoomsView.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, onMounted, reactive, ref } from "vue";
+import { computed, onBeforeUnmount, onMounted, reactive, ref } from "vue";
 import { ElMessage } from "element-plus";
 import apiClient, { getApiErrorMessage } from "@/api/client";
 import { useViewport } from "@/composables/useViewport";
@@ -13,6 +13,7 @@ import {
 } from "@/types";
 
 const inheritValue = "__inherit__";
+const AUTO_REFRESH_INTERVAL_MS = 15000;
 
 const loading = ref(false);
 const submitLoading = ref(false);
@@ -98,6 +99,7 @@ const importDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 72
 const recordDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 440px)" : "440px"));
 const settingsDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 720px)" : "720px"));
 const deleteDialogWidth = computed(() => (isMobile.value ? "min(100vw - 24px, 560px)" : "clamp(480px, 46vw, 560px)"));
+let autoRefreshTimer: number | null = null;
 
 async function loadRooms() {
   loading.value = true;
@@ -113,6 +115,59 @@ async function loadRooms() {
   }
 }
 
+function shouldAutoRefreshRooms() {
+  return !document.hidden &&
+    !loading.value &&
+    !createDialogVisible.value &&
+    !importDialogVisible.value &&
+    !recordDialogVisible.value &&
+    !settingsDialogVisible.value &&
+    !deleteDialogVisible.value &&
+    selectedRooms.value.length === 0 &&
+    !submitLoading.value &&
+    !importLoading.value &&
+    !exportLoading.value &&
+    !batchActionLoading.value &&
+    !startLoading.value &&
+    !settingsLoading.value &&
+    !deletingRoom.value &&
+    !togglingRoomId.value;
+}
+
+async function autoRefreshRooms() {
+  if (!shouldAutoRefreshRooms()) {
+    return;
+  }
+
+  try {
+    const { data } = await apiClient.get<LiveRoom[]>("/live-rooms");
+    rooms.value = data;
+    loadError.value = "";
+  } catch {
+    // Keep the current view stable; the background poller will try again.
+  }
+}
+
+function startAutoRefresh() {
+  stopAutoRefresh();
+  autoRefreshTimer = window.setInterval(() => {
+    void autoRefreshRooms();
+  }, AUTO_REFRESH_INTERVAL_MS);
+}
+
+function stopAutoRefresh() {
+  if (autoRefreshTimer !== null) {
+    window.clearInterval(autoRefreshTimer);
+    autoRefreshTimer = null;
+  }
+}
+
+function handleVisibilityChange() {
+  if (!document.hidden) {
+    void autoRefreshRooms();
+  }
+}
+
 function openCreateDialog() {
   createDialogVisible.value = true;
 }
@@ -469,7 +524,16 @@ function nullableStringFromSelect(value: string | number) {
   return value === inheritValue ? null : String(value);
 }
 
-onMounted(loadRooms);
+onMounted(async () => {
+  await loadRooms();
+  startAutoRefresh();
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+});
+
+onBeforeUnmount(() => {
+  stopAutoRefresh();
+  document.removeEventListener("visibilitychange", handleVisibilityChange);
+});
 </script>
 
 <template>