feat(ui): drop-zone hint mode separation (convert vs compress)

The homepage drop-zone advertised "Supported: HEIC · JPG · PNG · WebP
· BMP · TIFF · GIF · DOCX · PDF · TXT · MD · XLSX · CSV · JSON · MP4
· MOV · AVI · MKV · WebM · MP3 · WAV · FLAC · OGG · M4A" regardless
of the mode toggle, even though the compress path only accepts a much
narrower subset (JPG/PNG/WebP/TIFF + MP4/AVI/MOV/MKV/WebM). Users would
upload an MP3 in compress mode, see a 422, and bounce.

Adds two side-by-side hint blocks in index.html (`supported-convert`,
`supported-compress`) and toggles `hidden` from app.js::setMode based
on the active mode. Server-side validation is unchanged — this is
purely a UI affordance to set expectations correctly before upload.

New tests/test_homepage_drop_zone_modes.py asserts both blocks are
present with the expected `hidden` defaults so a future template
refactor can't silently revert this.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: MrChengLen

app/static/js/app.js

@@ -120,6 +120,17 @@ function setMode(mode) {
     compressMode = 'quality';
   }
 
+  // Drop-zone help text differs per mode: convert covers all source formats,
+  // compress is limited to JPG/PNG/WebP/TIFF + MP4/AVI/MOV/MKV/WebM. The
+  // server rejects mismatches anyway, but showing the right list up-front
+  // keeps users from uploading e.g. an MP3 only to see a 422.
+  const supConv = document.getElementById('supported-convert');
+  const supComp = document.getElementById('supported-compress');
+  if (supConv && supComp) {
+    supConv.classList.toggle('hidden', mode !== 'convert');
+    supComp.classList.toggle('hidden', mode !== 'compress');
+  }
+
   updateConvertOptionsVisibility();
   renderFileList();
   updateQualityVisibility();

app/templates/index.html

@@ -47,11 +47,15 @@ <h1 class="text-h-page text-ink">{{ _('Convert & Compress Files') }}</h1>
             </svg>
             <p class="text-gray-400">{{ _('Drag & drop your files here') }}</p>
             <p class="text-xs text-gray-600">{{ _('or click to browse (multi-file supported)') }}</p>
-            <p class="text-xs text-gray-700 mt-2">
+            <p id="supported-convert" class="text-xs text-gray-700 mt-2">
               {{ _('Supported: HEIC · JPG · PNG · WebP · BMP · TIFF · GIF') }}<br>
               {{ _('DOCX · PDF · TXT · MD · XLSX · CSV · JSON') }}<br>
               {{ _('MP4 · MOV · AVI · MKV · WebM · MP3 · WAV · FLAC · OGG · M4A') }}
             </p>
+            <p id="supported-compress" class="hidden text-xs text-gray-700 mt-2">
+              {{ _('Supported: JPG · PNG · WebP · TIFF') }}<br>
+              {{ _('MP4 · MOV · AVI · MKV · WebM') }}
+            </p>
           </div>
 
           <div id="drop-selected" class="hidden space-y-2">

tests/test_homepage_drop_zone_modes.py

@@ -0,0 +1,38 @@
+# SPDX-License-Identifier: AGPL-3.0-or-later
+"""Drop-zone help text must carry both mode-specific blocks.
+
+The convert and compress modes accept different input formats — convert
+covers all source formats including audio and documents, while compress
+only handles JPG/PNG/WebP/TIFF and MP4/AVI/MOV/MKV/WebM. The homepage
+renders both lists side-by-side; `app/static/js/app.js::setMode()`
+toggles their visibility. If a future refactor drops one of the two
+elements, the user sees a stale or empty caption — this test fails first.
+"""
+
+from __future__ import annotations
+
+
+def test_homepage_carries_both_supported_lists(client):
+    res = client.get("/")
+    assert res.status_code == 200
+    html = res.text
+    assert 'id="supported-convert"' in html, "convert-mode caption missing"
+    assert 'id="supported-compress"' in html, "compress-mode caption missing"
+
+
+def test_compress_caption_lists_only_image_and_video_formats(client):
+    """Compress mode must NOT advertise audio, document, or spreadsheet formats —
+    those have no compressor. Adding them back would mislead the user."""
+    res = client.get("/")
+    assert res.status_code == 200
+    html = res.text
+
+    start = html.find('id="supported-compress"')
+    assert start != -1
+    end = html.find("</p>", start)
+    block = html[start:end]
+
+    for forbidden in ["MP3", "WAV", "FLAC", "OGG", "M4A", "DOCX", "PDF", "XLSX", "CSV"]:
+        assert forbidden not in block, (
+            f"compress-mode caption advertises {forbidden} but no compressor exists for it"
+        )