fix: add .avif to all file picker accept strings

AVIF was missing from expandAccept() and every inline accept attribute,
causing the OS file picker to gray out .avif files. Drag-and-drop was
unaffected because it bypasses the accept filter. Added .avif to
dropzone.tsx expandAccept (covers all Dropzone pickers) plus 12 inline
accept strings across tool settings, pages, and file-upload-area.

apps/web/src/components/tools/beautify-settings.tsx

@@ -614,7 +614,7 @@ export function BeautifyControls({
               <input
                 ref={bgInputRef}
                 type="file"
-                accept="image/*,.heic,.heif,.hif"
+                accept="image/*,.avif,.heic,.heif,.hif"
                 onChange={(e) => {
                   const file = e.target.files?.[0] ?? null;
                   setBgImageFile(file);

apps/web/src/components/tools/collage-preview.tsx

@@ -105,7 +105,7 @@ function UploadArea() {
     const input = document.createElement("input");
     input.type = "file";
     input.multiple = true;
-    input.accept = "image/*,.heic,.heif,.hif";
+    input.accept = "image/*,.avif,.heic,.heif,.hif";
     input.onchange = (e) => {
       const files = Array.from((e.target as HTMLInputElement).files || []);
       if (files.length > 0) addImages(files);
@@ -595,7 +595,7 @@ function ImageStrip() {
     const input = document.createElement("input");
     input.type = "file";
     input.multiple = true;
-    input.accept = "image/*,.heic,.heif,.hif";
+    input.accept = "image/*,.avif,.heic,.heif,.hif";
     input.onchange = (e) => {
       const files = Array.from((e.target as HTMLInputElement).files || []);
       if (files.length > 0) store.addImages(files);

apps/web/src/components/tools/compare-settings.tsx

@@ -58,7 +58,7 @@ export function CompareSettings() {
           id="compare-second-image"
           ref={secondInputRef}
           type="file"
-          accept="image/*,.heic,.heif,.hif"
+          accept="image/*,.avif,.heic,.heif,.hif"
           onChange={(e) => setSecondFile(e.target.files?.[0] ?? null)}
           className="hidden"
         />

apps/web/src/components/tools/compose-settings.tsx

@@ -65,7 +65,7 @@ export function ComposeSettings() {
           id="compose-overlay-image"
           ref={overlayInputRef}
           type="file"
-          accept="image/*,.heic,.heif,.hif"
+          accept="image/*,.avif,.heic,.heif,.hif"
           onChange={(e) => setOverlayFile(e.target.files?.[0] ?? null)}
           className="hidden"
         />

apps/web/src/components/tools/meme-generator-preview.tsx

@@ -192,7 +192,7 @@ function TemplateGallery() {
         <input
           ref={fileInputRef}
           type="file"
-          accept="image/*,.heic,.heif,.hif"
+          accept="image/*,.avif,.heic,.heif,.hif"
           onChange={handleFileChange}
           className="hidden"
         />

apps/web/src/components/tools/qr-generate-settings.tsx

@@ -666,7 +666,7 @@ export function QrGenerateSettings() {
           <input
             ref={logoInputRef}
             type="file"
-            accept="image/*,.heic,.heif,.hif"
+            accept="image/*,.avif,.heic,.heif,.hif"
             onChange={handleLogoUpload}
             className="hidden"
           />

apps/web/src/components/tools/remove-bg-settings.tsx

@@ -369,7 +369,7 @@ export function RemoveBgControls({ settings: _settings, onChange }: RemoveBgCont
                 Choose background image
                 <input
                   type="file"
-                  accept="image/*,.heic,.heif,.hif"
+                  accept="image/*,.avif,.heic,.heif,.hif"
                   className="hidden"
                   onChange={(e) => {
                     const file = e.target.files?.[0];

apps/web/src/components/tools/watermark-image-settings.tsx

@@ -110,7 +110,7 @@ export function WatermarkImageSettings() {
         <input
           ref={watermarkInputRef}
           type="file"
-          accept="image/*,.heic,.heif,.hif"
+          accept="image/*,.avif,.heic,.heif,.hif"
           onChange={(e) => setWatermarkFile(e.target.files?.[0] ?? null)}
           className="hidden"
         />