fix: resolve 3 critical UX bugs - home upload, auth, and form submit

1. Home page file drop now shows quick-action tool selector
2. Auth disabled by default in dev (Docker still defaults to true)
3. Tool settings wrapped in forms - Enter key triggers processing

apps/api/src/index.ts

@@ -85,6 +85,11 @@ app.get("/api/v1/health", async () => ({
   ai: {},
 }));
 
+// Public config endpoint (for frontend to know if auth is required)
+app.get("/api/v1/config/auth", async () => ({
+  authEnabled: env.AUTH_ENABLED,
+}));
+
 // Serve SPA in production
 if (process.env.NODE_ENV === "production") {
   await registerStatic(app);

apps/api/src/lib/env.ts

@@ -4,7 +4,7 @@ const envSchema = z.object({
   PORT: z.coerce.number().default(1350),
   AUTH_ENABLED: z
     .enum(["true", "false"])
-    .default("true")
+    .default("false")
     .transform((v) => v === "true"),
   DEFAULT_USERNAME: z.string().default("admin"),
   DEFAULT_PASSWORD: z.string().default("admin"),

apps/api/src/plugins/auth.ts

@@ -176,7 +176,7 @@ function extractToken(request: FastifyRequest): string | null {
 
 // ── Auth middleware ────────────────────────────────────────────────
 
-const PUBLIC_PATHS = ["/api/v1/health", "/api/auth/", "/api/docs"];
+const PUBLIC_PATHS = ["/api/v1/health", "/api/v1/config/", "/api/auth/", "/api/docs"];
 
 function isPublicRoute(url: string): boolean {
   return PUBLIC_PATHS.some((path) => url.startsWith(path));

apps/web/src/components/layout/app-layout.tsx

@@ -19,9 +19,10 @@ import { cn } from "@/lib/utils";
 interface AppLayoutProps {
   children?: React.ReactNode;
   showToolPanel?: boolean;
+  onFiles?: (files: File[]) => void;
 }
 
-export function AppLayout({ children, showToolPanel = true }: AppLayoutProps) {
+export function AppLayout({ children, showToolPanel = true, onFiles }: AppLayoutProps) {
   const [settingsOpen, setSettingsOpen] = useState(false);
   const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
   const isMobile = useMobile();
@@ -89,7 +90,7 @@ export function AppLayout({ children, showToolPanel = true }: AppLayoutProps) {
         )}
       >
         <div className="flex-1 overflow-y-auto p-6 flex items-center justify-center">
-          {children || <Dropzone />}
+          {children || <Dropzone onFiles={onFiles} accept="image/*" />}
         </div>
         {!isMobile && (
           <div className="text-center text-xs text-muted-foreground py-2 border-t border-border">

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

@@ -63,12 +63,18 @@ export function ColorSettings({ toolId }: ColorSettingsProps) {
     { id: "effects", label: "Effects" },
   ];
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (hasFile && hasChanges && !processing) handleProcess();
+  };
+
   return (
-    <div className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4">
       {/* Tabs */}
       <div className="flex gap-1">
         {tabs.map((t) => (
           <button
+            type="button"
             key={t.id}
             onClick={() => setTab(t.id)}
             className={`flex-1 text-xs py-1.5 rounded ${
@@ -146,6 +152,7 @@ export function ColorSettings({ toolId }: ColorSettingsProps) {
           <div className="grid grid-cols-2 gap-1">
             {(["none", "grayscale", "sepia", "invert"] as const).map((e) => (
               <button
+                type="button"
                 key={e}
                 onClick={() => setEffect(e)}
                 className={`text-xs py-2 rounded capitalize transition-colors ${
@@ -164,6 +171,7 @@ export function ColorSettings({ toolId }: ColorSettingsProps) {
       {/* Reset button */}
       {hasChanges && (
         <button
+          type="button"
           onClick={() => {
             setBrightness(0);
             setContrast(0);
@@ -192,7 +200,7 @@ export function ColorSettings({ toolId }: ColorSettingsProps) {
 
       {/* Process */}
       <button
-        onClick={handleProcess}
+        type="submit"
         disabled={!hasFile || !hasChanges || processing}
         className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
       >
@@ -211,7 +219,7 @@ export function ColorSettings({ toolId }: ColorSettingsProps) {
           Download
         </a>
       )}
-    </div>
+    </form>
   );
 }
 

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

@@ -28,19 +28,26 @@ export function CompressSettings() {
   const canProcess =
     mode === "quality" || (mode === "targetSize" && Number(targetSizeKb) > 0);
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (hasFile && canProcess && !processing) handleProcess();
+  };
+
   return (
-    <div className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4">
       {/* Mode toggle */}
       <div>
         <label className="text-sm font-medium text-muted-foreground">Compression Mode</label>
         <div className="flex gap-1 mt-1">
           <button
+            type="button"
             onClick={() => setMode("quality")}
             className={`flex-1 text-xs py-1.5 rounded ${mode === "quality" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
           >
             Quality
           </button>
           <button
+            type="button"
             onClick={() => setMode("targetSize")}
             className={`flex-1 text-xs py-1.5 rounded ${mode === "targetSize" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
           >
@@ -102,7 +109,7 @@ export function CompressSettings() {
 
       {/* Process */}
       <button
-        onClick={handleProcess}
+        type="submit"
         disabled={!hasFile || !canProcess || processing}
         className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
       >
@@ -121,6 +128,6 @@ export function CompressSettings() {
           Download
         </a>
       )}
-    </div>
+    </form>
   );
 }

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

@@ -32,8 +32,13 @@ export function ConvertSettings() {
 
   const hasFile = files.length > 0;
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (hasFile && !processing) handleProcess();
+  };
+
   return (
-    <div className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4">
       {/* Source format */}
       {hasFile && (
         <div>
@@ -98,7 +103,7 @@ export function ConvertSettings() {
 
       {/* Process */}
       <button
-        onClick={handleProcess}
+        type="submit"
         disabled={!hasFile || processing}
         className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
       >
@@ -117,6 +122,6 @@ export function ConvertSettings() {
           Download
         </a>
       )}
-    </div>
+    </form>
   );
 }

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

@@ -41,8 +41,13 @@ export function CropSettings() {
   const hasFile = files.length > 0;
   const hasSize = Number(width) > 0 && Number(height) > 0;
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (hasFile && hasSize && !processing) handleProcess();
+  };
+
   return (
-    <div className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4">
       {/* Position */}
       <div className="grid grid-cols-2 gap-2">
         <div>
@@ -97,6 +102,7 @@ export function CropSettings() {
         <div className="flex gap-1 mt-1">
           {ASPECT_PRESETS.map(({ label, w, h }) => (
             <button
+              type="button"
               key={label}
               onClick={() => applyAspect(w, h)}
               className="flex-1 text-xs py-1.5 rounded bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-colors"
@@ -120,7 +126,7 @@ export function CropSettings() {
 
       {/* Process */}
       <button
-        onClick={handleProcess}
+        type="submit"
         disabled={!hasFile || !hasSize || processing}
         className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
       >
@@ -139,6 +145,6 @@ export function CropSettings() {
           Download
         </a>
       )}
-    </div>
+    </form>
   );
 }

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

@@ -41,19 +41,26 @@ export function ResizeSettings() {
   // Group presets by platform
   const platforms = [...new Set(SOCIAL_MEDIA_PRESETS.map((p) => p.platform))];
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (hasFile && !processing) handleProcess();
+  };
+
   return (
-    <div className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4">
       {/* Mode toggle */}
       <div>
         <label className="text-sm font-medium text-muted-foreground">Resize Mode</label>
         <div className="flex gap-1 mt-1">
           <button
+            type="button"
             onClick={() => setMode("pixels")}
             className={`flex-1 text-xs py-1.5 rounded ${mode === "pixels" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
           >
             Pixels
           </button>
           <button
+            type="button"
             onClick={() => setMode("percentage")}
             className={`flex-1 text-xs py-1.5 rounded ${mode === "percentage" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
           >
@@ -78,6 +85,7 @@ export function ResizeSettings() {
                 />
               </div>
               <button
+                type="button"
                 onClick={() => setLockAspect(!lockAspect)}
                 className="p-1.5 rounded border border-border text-muted-foreground hover:text-foreground"
                 title={lockAspect ? "Unlock aspect ratio" : "Lock aspect ratio"}
@@ -180,7 +188,7 @@ export function ResizeSettings() {
 
       {/* Process button */}
       <button
-        onClick={handleProcess}
+        type="submit"
         disabled={!hasFile || processing}
         className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
       >
@@ -199,6 +207,6 @@ export function ResizeSettings() {
           Download
         </a>
       )}
-    </div>
+    </form>
   );
 }

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

@@ -33,13 +33,19 @@ export function RotateSettings() {
   const hasFile = files.length > 0;
   const hasChanges = angle !== 0 || flipH || flipV;
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (hasFile && hasChanges && !processing) handleProcess();
+  };
+
   return (
-    <div className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4">
       {/* Quick rotate buttons */}
       <div>
         <label className="text-xs text-muted-foreground">Quick Rotate</label>
         <div className="flex gap-2 mt-1">
           <button
+            type="button"
             onClick={rotateLeft}
             className="flex-1 flex items-center justify-center gap-1 py-2 rounded bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-colors text-sm"
           >
@@ -47,6 +53,7 @@ export function RotateSettings() {
             90 Left
           </button>
           <button
+            type="button"
             onClick={rotateRight}
             className="flex-1 flex items-center justify-center gap-1 py-2 rounded bg-muted text-muted-foreground hover:bg-primary hover:text-primary-foreground transition-colors text-sm"
           >
@@ -77,6 +84,7 @@ export function RotateSettings() {
         <label className="text-xs text-muted-foreground">Flip</label>
         <div className="flex gap-2 mt-1">
           <button
+            type="button"
             onClick={() => setFlipH(!flipH)}
             className={`flex-1 flex items-center justify-center gap-1 py-2 rounded text-sm transition-colors ${
               flipH
@@ -88,6 +96,7 @@ export function RotateSettings() {
             Horizontal
           </button>
           <button
+            type="button"
             onClick={() => setFlipV(!flipV)}
             className={`flex-1 flex items-center justify-center gap-1 py-2 rounded text-sm transition-colors ${
               flipV
@@ -114,7 +123,7 @@ export function RotateSettings() {
 
       {/* Process */}
       <button
-        onClick={handleProcess}
+        type="submit"
         disabled={!hasFile || !hasChanges || processing}
         className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
       >
@@ -133,6 +142,6 @@ export function RotateSettings() {
           Download
         </a>
       )}
-    </div>
+    </form>
   );
 }

apps/web/src/components/tools/strip-metadata-settings.tsx

@@ -30,8 +30,13 @@ export function StripMetadataSettings() {
 
   const hasFile = files.length > 0;
 
+  const handleSubmit = (e: React.FormEvent) => {
+    e.preventDefault();
+    if (hasFile && !processing) handleProcess();
+  };
+
   return (
-    <div className="space-y-4">
+    <form onSubmit={handleSubmit} className="space-y-4">
       {/* Strip All */}
       <label className="flex items-center gap-2 text-sm text-foreground font-medium">
         <input
@@ -108,7 +113,7 @@ export function StripMetadataSettings() {
 
       {/* Process */}
       <button
-        onClick={handleProcess}
+        type="submit"
         disabled={!hasFile || processing}
         className="w-full py-2.5 rounded-lg bg-primary text-primary-foreground font-medium disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-2"
       >
@@ -127,6 +132,6 @@ export function StripMetadataSettings() {
           Download
         </a>
       )}
-    </div>
+    </form>
   );
 }

apps/web/src/hooks/use-tool-processor.ts

@@ -43,9 +43,15 @@ export function useToolProcessor(toolId: string) {
         formData.append("file", files[0]);
         formData.append("settings", JSON.stringify(settings));
 
+        const headers: Record<string, string> = {};
+        const token = getToken();
+        if (token) {
+          headers.Authorization = `Bearer ${token}`;
+        }
+
         const res = await fetch(`/api/v1/tools/${toolId}`, {
           method: "POST",
-          headers: { Authorization: `Bearer ${getToken()}` },
+          headers,
           body: formData,
         });
 

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

@@ -1,5 +1,87 @@
+import { useCallback, useState } from "react";
+import { useNavigate } from "react-router-dom";
 import { AppLayout } from "@/components/layout/app-layout";
+import { useFileStore } from "@/stores/file-store";
+import {
+  Maximize2,
+  Minimize2,
+  FileOutput,
+  Eraser,
+  X,
+} from "lucide-react";
+
+const QUICK_ACTIONS = [
+  { id: "resize", name: "Resize", icon: Maximize2, route: "/resize" },
+  { id: "compress", name: "Compress", icon: Minimize2, route: "/compress" },
+  { id: "convert", name: "Convert", icon: FileOutput, route: "/convert" },
+  { id: "remove-background", name: "Remove Background", icon: Eraser, route: "/remove-background" },
+] as const;
 
 export function HomePage() {
-  return <AppLayout />;
+  const { setFiles, files, reset } = useFileStore();
+  const navigate = useNavigate();
+  const [showActions, setShowActions] = useState(false);
+
+  const handleFiles = useCallback(
+    (newFiles: File[]) => {
+      reset();
+      setFiles(newFiles);
+      setShowActions(true);
+    },
+    [setFiles, reset],
+  );
+
+  const handleAction = (route: string) => {
+    setShowActions(false);
+    navigate(route);
+  };
+
+  const handleDismiss = () => {
+    setShowActions(false);
+    reset();
+  };
+
+  return (
+    <AppLayout onFiles={handleFiles}>
+      {/* Quick-action overlay */}
+      {showActions && files.length > 0 && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm">
+          <div className="bg-background rounded-2xl shadow-2xl border border-border p-6 max-w-md w-full mx-4 animate-in fade-in zoom-in-95 duration-200">
+            <div className="flex items-center justify-between mb-4">
+              <h2 className="text-lg font-semibold text-foreground">
+                What would you like to do?
+              </h2>
+              <button
+                onClick={handleDismiss}
+                className="p-1.5 rounded-lg hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+              >
+                <X className="h-4 w-4" />
+              </button>
+            </div>
+
+            <p className="text-sm text-muted-foreground mb-4">
+              <span className="font-medium text-foreground">{files[0].name}</span>
+              {" "}({(files[0].size / 1024).toFixed(1)} KB)
+              {files.length > 1 && ` +${files.length - 1} more`}
+            </p>
+
+            <div className="grid grid-cols-2 gap-3">
+              {QUICK_ACTIONS.map(({ id, name, icon: Icon, route }) => (
+                <button
+                  key={id}
+                  onClick={() => handleAction(route)}
+                  className="flex items-center gap-3 p-3 rounded-xl border border-border hover:border-primary hover:bg-primary/5 transition-colors text-left"
+                >
+                  <div className="p-2 rounded-lg bg-primary/10 text-primary">
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <span className="text-sm font-medium text-foreground">{name}</span>
+                </button>
+              ))}
+            </div>
+          </div>
+        </div>
+      )}
+    </AppLayout>
+  );
 }