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/common/dropzone.tsx

@@ -16,7 +16,7 @@ interface DropzoneProps {
 // Append explicit extensions so they are selectable.
 function expandAccept(accept?: string): string | undefined {
   if (!accept?.includes("image/*")) return accept;
-  return `${accept},.heic,.heif,.hif,.jxl,.ico,.dng,.cr2,.cr3,.nef,.nrw,.arw,.orf,.rw2,.raf,.pef,.3fr,.iiq,.srw,.x3f,.rwl,.gpr,.fff,.mrw,.mef,.kdc,.dcr,.erf,.ptx,.tga,.psd,.exr,.hdr,.svgz,.jp2,.j2k,.j2c,.jpc,.jpf,.jpx,.qoi,.eps,.epsf,.dds,.cur,.apng,.dpx,.cin,.fits,.fit,.fts,.ppm,.pgm,.pbm,.pnm,.pam,.pfm`;
+  return `${accept},.avif,.heic,.heif,.hif,.jxl,.ico,.dng,.cr2,.cr3,.nef,.nrw,.arw,.orf,.rw2,.raf,.pef,.3fr,.iiq,.srw,.x3f,.rwl,.gpr,.fff,.mrw,.mef,.kdc,.dcr,.erf,.ptx,.tga,.psd,.exr,.hdr,.svgz,.jp2,.j2k,.j2c,.jpc,.jpf,.jpx,.qoi,.eps,.epsf,.dds,.cur,.apng,.dpx,.cin,.fits,.fit,.fts,.ppm,.pgm,.pbm,.pnm,.pam,.pfm`;
 }
 
 export function Dropzone({

apps/web/src/components/files/file-upload-area.tsx

@@ -57,7 +57,7 @@ export function FileUploadArea() {
         </div>
         <input
           type="file"
-          accept="image/*,.heic,.heif,.hif,.jxl,.dng,.cr2,.cr3,.nef,.nrw,.arw,.orf,.rw2,.raf,.pef,.3fr,.iiq,.srw,.x3f,.rwl,.gpr,.fff,.mrw,.mef,.kdc,.dcr,.erf,.ptx,.tga,.psd,.exr,.hdr,.svgz,.jp2,.j2k,.qoi,.eps,.dds,.cur,.apng,.dpx,.cin,.fits,.ppm,.pgm,.pbm,.pfm"
+          accept="image/*,.avif,.heic,.heif,.hif,.jxl,.dng,.cr2,.cr3,.nef,.nrw,.arw,.orf,.rw2,.raf,.pef,.3fr,.iiq,.srw,.x3f,.rwl,.gpr,.fff,.mrw,.mef,.kdc,.dcr,.erf,.ptx,.tga,.psd,.exr,.hdr,.svgz,.jp2,.j2k,.qoi,.eps,.dds,.cur,.apng,.dpx,.cin,.fits,.ppm,.pgm,.pbm,.pfm"
           multiple
           className="hidden"
           onChange={handleInputChange}

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"
         />

apps/web/src/pages/automate-page.tsx

@@ -162,7 +162,7 @@ export function AutomatePage() {
     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 picked = Array.from((e.target as HTMLInputElement).files || []);
       if (picked.length > 0) addFiles(picked);

apps/web/src/pages/editor-page.tsx

@@ -92,7 +92,7 @@ export function EditorPage() {
   const handleOpenImage = useCallback(() => {
     const input = document.createElement("input");
     input.type = "file";
-    input.accept = "image/*,.psd,.tga,.exr,.hdr";
+    input.accept = "image/*,.avif,.psd,.tga,.exr,.hdr";
     input.onchange = async () => {
       const file = input.files?.[0];
       if (!file) return;

apps/web/src/pages/tool-page.tsx

@@ -291,7 +291,7 @@ export function ToolPage() {
     input.type = "file";
     input.multiple = true;
     input.accept =
-      "image/*,.heic,.heif,.hif,.jxl,.dng,.cr2,.cr3,.nef,.nrw,.arw,.orf,.rw2,.raf,.pef,.3fr,.iiq,.srw,.x3f,.rwl,.gpr,.fff,.mrw,.mef,.kdc,.dcr,.erf,.ptx,.tga,.psd,.exr,.hdr,.svgz,.jp2,.j2k,.qoi,.eps,.dds,.cur,.apng,.dpx,.cin,.fits,.ppm,.pgm,.pbm,.pfm";
+      "image/*,.avif,.heic,.heif,.hif,.jxl,.dng,.cr2,.cr3,.nef,.nrw,.arw,.orf,.rw2,.raf,.pef,.3fr,.iiq,.srw,.x3f,.rwl,.gpr,.fff,.mrw,.mef,.kdc,.dcr,.erf,.ptx,.tga,.psd,.exr,.hdr,.svgz,.jp2,.j2k,.qoi,.eps,.dds,.cur,.apng,.dpx,.cin,.fits,.ppm,.pgm,.pbm,.pfm";
     input.onchange = (e) => {
       const newFiles = Array.from((e.target as HTMLInputElement).files || []);
       if (newFiles.length > 0) addFiles(newFiles);