remove settings debounce in favour of save queuea

web/e2e/key-login.spec.ts

@@ -38,7 +38,7 @@ test.describe('API key login flow', () => {
     await page.click('button[type="submit"]')
 
     await expect(page).toHaveURL(/\/key-settings/)
-    await expect(page.locator('h1')).toContainText('Poster Settings')
+    await expect(page.locator('h1')).toContainText('Image Settings')
     await expect(page.locator('text=e2e-test-key')).toBeVisible()
   })
 

web/e2e/key-settings.spec.ts

@@ -50,27 +50,25 @@ test.describe('key settings (self-service)', () => {
 
     await loginWithApiKey(page, request)
 
-    await expect(page.locator('h1')).toContainText('Poster Settings')
+    await expect(page.locator('h1')).toContainText('Image Settings')
     await expect(page.locator('text=settings-test-key')).toBeVisible()
 
-    // Settings form should be present with defaults
-    const select = page.getByTestId('poster-source-select')
-    await expect(select).toBeVisible()
-    await expect(select).toHaveValue('t')
+    // Settings form should be present with fanart checkbox
+    await expect(page.getByTestId('fanart-checkbox')).toBeVisible()
   })
 
   test('auto-saves and shows confirmation', async ({ page, request }) => {
     await loginWithApiKey(page, request)
 
     // Change a setting to trigger auto-save
-    await page.getByTestId('poster-source-select').selectOption('f')
+    await page.getByTestId('fanart-checkbox').check()
 
     // Wait for auto-save confirmation
     await expect(page.locator('text=Saved')).toBeVisible({ timeout: 5000 })
   })
 
-  test('fanart options appear when fanart is selected', async ({ page, request }) => {
-    // Ensure global source is "tmdb" so fanart options start hidden
+  test('fanart options enabled when fanart is checked', async ({ page, request }) => {
+    // Ensure global source is "tmdb" so fanart is unchecked
     const adminToken = await ensureAdmin(request)
     await request.put('/api/admin/settings', {
       headers: {
@@ -82,32 +80,33 @@ test.describe('key settings (self-service)', () => {
 
     await loginWithApiKey(page, request)
 
-    // Language should not be visible initially
-    await expect(page.locator('label:has-text("Language")')).not.toBeVisible()
+    // Language and textless should be visible but disabled initially
+    await expect(page.getByTestId('fanart-lang-select')).toBeDisabled()
+    await expect(page.getByTestId('textless-checkbox')).toBeDisabled()
 
-    // Select fanart
-    await page.getByTestId('poster-source-select').selectOption('f')
+    // Check fanart
+    await page.getByTestId('fanart-checkbox').check()
 
-    // Now language and textless should appear
-    await expect(page.locator('label:has-text("Language")')).toBeVisible()
-    await expect(page.locator('label:has-text("Prefer textless")')).toBeVisible()
+    // Now language and textless should be enabled
+    await expect(page.getByTestId('fanart-lang-select')).toBeEnabled()
+    await expect(page.getByTestId('textless-checkbox')).toBeEnabled()
   })
 
   test('settings persist after auto-save and reload', async ({ page, request }) => {
     await loginWithApiKey(page, request)
 
-    // Change to fanart
-    await page.getByTestId('poster-source-select').selectOption('f')
+    // Enable fanart
+    await page.getByTestId('fanart-checkbox').check()
 
     // Wait for auto-save confirmation
     await expect(page.locator('text=Saved')).toBeVisible({ timeout: 5000 })
 
     // Reload
     await page.reload()
-    await expect(page.locator('h1')).toContainText('Poster Settings')
+    await expect(page.locator('h1')).toContainText('Image Settings')
 
     // Settings should persist
-    await expect(page.getByTestId('poster-source-select')).toHaveValue('f')
+    await expect(page.getByTestId('fanart-checkbox')).toBeChecked()
   })
 
   test('rating display section is visible', async ({ page, request }) => {
@@ -140,11 +139,11 @@ test.describe('key settings (self-service)', () => {
 
     await loginWithApiKey(page, request)
 
-    // Global is now "tmdb", key has no overrides → should show "tmdb"
-    await expect(page.getByTestId('poster-source-select')).toHaveValue('t')
+    // Global is now "tmdb", key has no overrides → fanart should be unchecked
+    await expect(page.getByTestId('fanart-checkbox')).not.toBeChecked()
 
-    // Change to fanart — auto-save triggers
-    await page.getByTestId('poster-source-select').selectOption('f')
+    // Enable fanart — auto-save triggers
+    await page.getByTestId('fanart-checkbox').check()
     await expect(page.locator('text=Saved')).toBeVisible({ timeout: 5000 })
 
     // Wait for "Using defaults" badge to disappear (confirms custom settings saved)
@@ -153,9 +152,9 @@ test.describe('key settings (self-service)', () => {
     // Reset to defaults
     await page.locator('button:has-text("Reset to defaults")').click()
 
-    // Should be back to global default ("tmdb")
+    // Should be back to global default (fanart unchecked)
     await expect(page.locator('text=Using defaults')).toBeVisible({ timeout: 10000 })
-    await expect(page.getByTestId('poster-source-select')).toHaveValue('t')
+    await expect(page.getByTestId('fanart-checkbox')).not.toBeChecked()
   })
 
   test('reset to defaults does not trigger a spurious auto-save', async ({ page, request }) => {
@@ -171,13 +170,13 @@ test.describe('key settings (self-service)', () => {
     await loginWithApiKey(page, request)
 
     // Change a setting so we have custom overrides
-    await page.getByTestId('poster-source-select').selectOption('f')
+    await page.getByTestId('fanart-checkbox').check()
     await expect(page.locator('text=Saved')).toBeVisible({ timeout: 5000 })
     await expect(page.locator('text=Using defaults')).not.toBeVisible()
 
     // Start tracking network requests after clicking reset
     const requestsAfterReset: string[] = []
-    await page.route('**/api/self/settings', (route) => {
+    await page.route('**/api/key/me/settings', (route) => {
       requestsAfterReset.push(route.request().method())
       route.continue()
     })
@@ -188,8 +187,8 @@ test.describe('key settings (self-service)', () => {
     // Should show "Using defaults" badge
     await expect(page.locator('text=Using defaults')).toBeVisible({ timeout: 10000 })
 
-    // Wait long enough for any debounced auto-save to fire (600ms debounce + margin)
-    await page.waitForTimeout(2000)
+    // Wait for any auto-save to fire
+    await page.waitForTimeout(1000)
 
     // Should have seen DELETE + GET, but no PUT
     const putCount = requestsAfterReset.filter(m => m === 'PUT').length
@@ -219,7 +218,7 @@ test.describe('key settings (self-service)', () => {
     await expect(page.locator('text=Saved')).toBeVisible({ timeout: 5000 })
 
     await page.reload()
-    await expect(page.locator('h1')).toContainText('Poster Settings')
+    await expect(page.locator('h1')).toContainText('Image Settings')
     await expect(page.getByTestId('poster-badge-direction-select')).toHaveValue('h')
   })
 
@@ -248,7 +247,7 @@ test.describe('key settings (self-service)', () => {
 
     // Reload and verify persistence
     await page.reload()
-    await expect(page.locator('h1')).toContainText('Poster Settings')
+    await expect(page.locator('h1')).toContainText('Image Settings')
 
     const reloadedSelects = page.locator('select').filter({ has: page.locator('option[value="i"]') })
     await expect(reloadedSelects.first()).toHaveValue('t')

web/e2e/settings.spec.ts

@@ -164,8 +164,8 @@ test.describe('settings', () => {
     const newValue = currentValue === '7' ? '2' : '7'
     await limitInput.fill(newValue)
 
-    // Wait for debounced update (500ms) + network
-    await page.waitForTimeout(1500)
+    // Wait for network
+    await page.waitForTimeout(1000)
 
     const newSrc = await previewImg.getAttribute('src')
     // Blob URL should change when preview is re-fetched

web/src/__tests__/components/RenderSettingsForm.spec.ts

@@ -95,7 +95,7 @@ describe('RenderSettingsForm', () => {
     expect(src).toContain('blob:')
   })
 
-  it('updates preview after debounce when ratings_limit changes', async () => {
+  it('updates preview when ratings_limit changes', async () => {
     const fetchPreview = makeFetchPreview()
     const wrapper = mountForm({}, fetchPreview)
     await flushPromises()
@@ -104,42 +104,14 @@ describe('RenderSettingsForm', () => {
     // Change the limit
     const limitInput = wrapper.find('input[type="number"]')
     await limitInput.setValue(5)
-    await flushPromises()
-
-    // Before debounce fires, fetchPreview should not have been called again
-    expect(fetchPreview).not.toHaveBeenCalled()
 
-    // Advance past debounce timer
-    vi.advanceTimersByTime(600)
+    // Advance past preview debounce timer
+    vi.advanceTimersByTime(500)
     await flushPromises()
 
     expect(fetchPreview).toHaveBeenCalledWith(5, expect.any(String), expect.any(String), expect.any(String), expect.any(String), expect.any(String))
   })
 
-  it('debounces rapid changes — only last value triggers fetch', async () => {
-    const fetchPreview = makeFetchPreview()
-    const wrapper = mountForm({}, fetchPreview)
-    await flushPromises()
-    fetchPreview.mockClear()
-
-    const limitInput = wrapper.find('input[type="number"]')
-
-    // Rapid changes
-    await limitInput.setValue(1)
-    vi.advanceTimersByTime(200)
-    await limitInput.setValue(4)
-    vi.advanceTimersByTime(200)
-    await limitInput.setValue(7)
-
-    // Advance past final debounce
-    vi.advanceTimersByTime(600)
-    await flushPromises()
-
-    // Should only have been called once with the final value
-    expect(fetchPreview).toHaveBeenCalledTimes(1)
-    expect(fetchPreview).toHaveBeenCalledWith(7, expect.any(String), expect.any(String), expect.any(String), expect.any(String), expect.any(String))
-  })
-
   it('shows loading state while preview loads', async () => {
     // Use a fetch that never resolves to keep loading state
     const fetchPreview = vi.fn().mockReturnValue(new Promise(() => {}))

web/src/components/RenderSettingsForm.vue

@@ -153,8 +153,6 @@ watch(() => props.settings, (s) => {
   applySettings(s)
   nextTick(() => {
     syncing = false
-    // Cancel any save timer queued by watchers during the sync
-    if (saveTimer) { clearTimeout(saveTimer); saveTimer = null }
   })
 })
 
@@ -164,8 +162,13 @@ function revertEdits() {
   nextTick(() => { syncing = false })
 }
 
+let pendingSave = false
+
 async function autoSave() {
-  if (saving.value) return
+  if (saving.value) {
+    pendingSave = true
+    return
+  }
   saving.value = true
   error.value = ''
   showCheck.value = false
@@ -204,25 +207,25 @@ async function autoSave() {
     revertEdits()
   } finally {
     saving.value = false
+    if (pendingSave) {
+      pendingSave = false
+      autoSave()
+    }
   }
 }
 
-let saveTimer: ReturnType<typeof setTimeout> | null = null
-
-// Auto-save on any setting change (debounced)
+// Auto-save on any setting change
 watch(
   [editSource, editLang, editTextless, editRatingsLimit, editRatingsOrder, editPosterPosition, editLogoRatingsLimit, editBackdropRatingsLimit, editPosterBadgeStyle, editLogoBadgeStyle, editBackdropBadgeStyle, editPosterLabelStyle, editLogoLabelStyle, editBackdropLabelStyle, editPosterBadgeDirection],
   () => {
     if (syncing) return
-    if (saveTimer) clearTimeout(saveTimer)
-    saveTimer = setTimeout(autoSave, 600)
+    autoSave()
   },
   { deep: true },
 )
 
 async function handleReset() {
   if (!props.resetSettings) return
-  if (saveTimer) { clearTimeout(saveTimer); saveTimer = null }
   saving.value = true
   error.value = ''
   showCheck.value = false
@@ -230,17 +233,7 @@ async function handleReset() {
   try {
     const ok = await props.resetSettings()
     if (ok) {
-      const updated = await props.loadSettings()
-      if (updated) {
-        syncing = true
-        currentSettings.value = updated
-        applySettings(updated)
-        nextTick(() => {
-          syncing = false
-          // Cancel any save timer queued by watchers during the sync
-          if (saveTimer) { clearTimeout(saveTimer); saveTimer = null }
-        })
-      }
+      await props.loadSettings()
       showCheck.value = true
       checkTimeout = setTimeout(() => (showCheck.value = false), 1500)
     } else {
@@ -373,7 +366,6 @@ onBeforeUnmount(() => {
   if (posterPreviewTimer) clearTimeout(posterPreviewTimer)
   if (logoPreviewTimer) clearTimeout(logoPreviewTimer)
   if (backdropPreviewTimer) clearTimeout(backdropPreviewTimer)
-  if (saveTimer) clearTimeout(saveTimer)
   if (posterPreview.value.src) URL.revokeObjectURL(posterPreview.value.src)
   if (logoPreview.value.src) URL.revokeObjectURL(logoPreview.value.src)
   if (backdropPreview.value.src) URL.revokeObjectURL(backdropPreview.value.src)