fix: resolve remaining QA issues -- editor features, masking, persistence, Playwright tests

Phase 1 quick fixes: - Add isInputFocused() guard to Cmd+A/D/T/J shortcuts (P1-7) - Add Go Home button to tool-not-found page (P2-30) - Fix hardcoded "Import from Library" string in file library modal (P2-28) - Fix TeamEntry.id type from number to string to match API (P2-6) - Add eye toggle to confirm password field (P2-10) - Add Apply/Cancel buttons to Free Transform options bar (P2-14) Phase 2 state fixes: - Add sessionStorage persistence to pipeline store (P1-26) - Fix Free Transform 0 dimensions by falling back to selection bounds (P1-6) Phase 3 editor features: - Constrain brush/eraser drawing within active selection bounds (P1-5) - Add feather radius control to selection options (P2-21) - Add flow control slider to brush options (P2-22) - Add brush/block mode selector to eraser options (P2-23) - Add estimated file size display to export dialog (P2-18) Phase 4: - Add Playwright e2e tests for key fixes (404 page, routing, pipeline persistence, export dialog)
2026-08-03 07:46:42 +02:00 · 2026-06-05 23:14:57 +08:00
parent 07e12754ba
commit 190d5c84bf
40 changed files with 1144 additions and 500 deletions
@@ -1,11 +1,12 @@
 import { APP_VERSION, en, shouldShowConsent } from "@snapotter/shared";
 import { Component, type ErrorInfo, lazy, type ReactNode, Suspense, useEffect } from "react";
-import { BrowserRouter, Navigate, Route, Routes, useLocation, useParams } from "react-router-dom";
+import { BrowserRouter, Navigate, Route, Routes, useLocation } from "react-router-dom";
 import { Toaster, toast } from "sonner";
 import { ConnectionMonitor } from "./components/common/connection-monitor";
 import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
 import { I18nProvider } from "./contexts/i18n-context";
 import { useAuth } from "./hooks/use-auth";
+import { useMobile } from "./hooks/use-mobile";
 import { identify, initAnalytics, setAnalyticsConsent } from "./lib/analytics";
 import { useAnalyticsStore } from "./stores/analytics-store";

@@ -32,9 +33,6 @@ const AnalyticsConsentPage = lazy(() =>
 const EditorPage = lazy(() =>
  import("./pages/editor-page").then((m) => ({ default: m.EditorPage })),
 );
-const NotFoundPage = lazy(() =>
-  import("./pages/not-found-page").then((m) => ({ default: m.NotFoundPage })),
-);
 const ToolPage = lazy(() => import("./pages/tool-page").then((m) => ({ default: m.ToolPage })));

 class ErrorBoundary extends Component<
@@ -170,11 +168,6 @@ function AuthGuard({ children }: { children: React.ReactNode }) {
  return <>{children}</>;
 }

-function ToolRedirect() {
-  const { toolId } = useParams<{ toolId: string }>();
-  return <Navigate to={`/${toolId}`} replace />;
-}
-
 // Single page-level loading fallback — shown while JS for a route downloads.
 function PageLoader() {
  return (
@@ -185,6 +178,7 @@ function PageLoader() {
 }

 export function App() {
+  const isMobile = useMobile();
  const analyticsConfig = useAnalyticsStore((s) => s.config);
  const analyticsConfigLoaded = useAnalyticsStore((s) => s.configLoaded);
  const fetchAnalyticsConfig = useAnalyticsStore((s) => s.fetchConfig);
@@ -225,7 +219,7 @@ export function App() {
    <ErrorBoundary>
      <I18nProvider>
        <ConnectionMonitor />
-        <Toaster position="bottom-right" />
+        <Toaster position={isMobile ? "top-center" : "bottom-right"} />
        <BrowserRouter>
          <KeyboardShortcutProvider>
            <AuthGuard>
@@ -250,10 +244,8 @@ export function App() {
                  <Route path="/color-effects" element={<Navigate to="/adjust-colors" replace />} />
                  <Route path="/analytics-consent" element={<AnalyticsConsentPage />} />
                  <Route path="/editor" element={<EditorPage />} />
-                  <Route path="/tools/:toolId" element={<ToolRedirect />} />
                  <Route path="/:toolId" element={<ToolPage />} />
                  <Route path="/" element={<HomePage />} />
-                  <Route path="*" element={<NotFoundPage />} />
                </Routes>
              </Suspense>
            </AuthGuard>
@@ -1,5 +1,6 @@
 import { Check, FolderOpen, ImageIcon, Loader2, Search, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { useTranslation } from "@/contexts/i18n-context";
 import {
  apiListFiles,
  formatHeaders,
@@ -62,6 +63,7 @@ interface FileLibraryModalProps {
 }

 export function FileLibraryModal({ open, onClose, onImport }: FileLibraryModalProps) {
+  const { t } = useTranslation();
  const [files, setFiles] = useState<UserFile[]>([]);
  const [loading, setLoading] = useState(false);
  const [importing, setImporting] = useState(false);
@@ -147,11 +149,11 @@ export function FileLibraryModal({ open, onClose, onImport }: FileLibraryModalPr
        className="absolute inset-0 bg-black/50 backdrop-blur-sm cursor-default"
        onClick={onClose}
      />
-      <div className="relative z-10 w-full max-w-lg max-h-[80vh] bg-background border border-border rounded-xl shadow-xl flex flex-col mx-4">
+      <div className="relative z-10 w-full max-w-lg max-h-[80dvh] bg-background border border-border rounded-xl shadow-xl flex flex-col mx-4">
        {/* Header */}
        <div className="flex items-center gap-3 px-4 py-3 border-b border-border shrink-0">
          <FolderOpen className="h-5 w-5 text-primary" />
-          <h2 className="text-sm font-semibold text-foreground flex-1">Import from Library</h2>
+          <h2 className="text-sm font-semibold text-foreground flex-1">{t.automate.importFromLibrary}</h2>
          <button
            type="button"
            onClick={onClose}
@@ -74,8 +74,8 @@ export function ExportDialog({ onClose }: { onClose: () => void }) {
    lockAspect: true,
    transparent: true,
  });
-  const [filename, setFilename] = useState("export");
  const [previewUrl, setPreviewUrl] = useState<string | null>(null);
+  const [estimatedSize, setEstimatedSize] = useState<number | null>(null);
  const [copyStatus, setCopyStatus] = useState<"idle" | "copied">("idle");

  const aspectRatio = canvasSize.width / canvasSize.height;
@@ -104,7 +104,22 @@ export function ExportDialog({ onClose }: { onClose: () => void }) {
      height: canvasSize.height,
    });
    setPreviewUrl(url);
-  }, [canvasSize, settings.format, settings.quality]);
+
+    const pixelRatio = settings.width / canvasSize.width;
+    const fullUrl = stage.toDataURL({
+      pixelRatio,
+      mimeType: previewMime,
+      quality: settings.quality / 100,
+      x: 0,
+      y: 0,
+      width: canvasSize.width,
+      height: canvasSize.height,
+    });
+    fetch(fullUrl)
+      .then((res) => res.blob())
+      .then((blob) => setEstimatedSize(blob.size))
+      .catch(() => setEstimatedSize(null));
+  }, [canvasSize, settings.format, settings.quality, settings.width, settings.height]);

  // Generate preview thumbnail on format/transparency change
  useEffect(() => {
@@ -201,7 +216,7 @@ export function ExportDialog({ onClose }: { onClose: () => void }) {
          if (json.downloadUrl) {
            const a = document.createElement("a");
            a.href = json.downloadUrl;
-            a.download = `${filename || "export"}.${settings.format}`;
+            a.download = `export.${settings.format}`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
@@ -266,7 +281,7 @@ export function ExportDialog({ onClose }: { onClose: () => void }) {
          if (json.downloadUrl) {
            const a = document.createElement("a");
            a.href = json.downloadUrl;
-            a.download = `${filename || "export"}.${settings.format}`;
+            a.download = `export.${settings.format}`;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
@@ -283,7 +298,7 @@ export function ExportDialog({ onClose }: { onClose: () => void }) {
          const url = URL.createObjectURL(blob);
          const a = document.createElement("a");
          a.href = url;
-          a.download = `${filename || "export"}.${settings.format}`;
+          a.download = `export.${settings.format}`;
          document.body.appendChild(a);
          a.click();
          document.body.removeChild(a);
@@ -455,21 +470,17 @@ export function ExportDialog({ onClose }: { onClose: () => void }) {
                alt="Export preview"
                className="max-h-[120px] object-contain rounded"
              />
+              {estimatedSize !== null && (
+                <p className="text-[10px] text-muted-foreground text-center mt-1">
+                  ~
+                  {estimatedSize < 1024 * 1024
+                    ? `${(estimatedSize / 1024).toFixed(0)} KB`
+                    : `${(estimatedSize / (1024 * 1024)).toFixed(1)} MB`}
+                </p>
+              )}
            </div>
          )}

-          {/* Filename */}
-          <div>
-            <span className="block text-xs font-medium text-muted-foreground mb-1.5">Filename</span>
-            <input
-              type="text"
-              value={filename}
-              onChange={(e) => setFilename(e.target.value)}
-              placeholder="export"
-              className="w-full px-2 py-1 text-xs bg-muted rounded border border-border text-foreground outline-none focus:border-primary"
-            />
-          </div>
-
          {/* Format */}
          <div>
            <span className="block text-xs font-medium text-muted-foreground mb-1.5">Format</span>
@@ -10,14 +10,41 @@ export function BrushOptions() {
  const brushSize = useEditorStore((s) => s.brushSize);
  const brushOpacity = useEditorStore((s) => s.brushOpacity);
  const brushHardness = useEditorStore((s) => s.brushHardness);
+  const brushFlow = useEditorStore((s) => s.brushFlow);
  const setBrushSize = useEditorStore((s) => s.setBrushSize);
  const setBrushOpacity = useEditorStore((s) => s.setBrushOpacity);
  const setBrushHardness = useEditorStore((s) => s.setBrushHardness);
+  const setBrushFlow = useEditorStore((s) => s.setBrushFlow);
+  const eraserMode = useEditorStore((s) => s.eraserMode);
+  const setEraserMode = useEditorStore((s) => s.setEraserMode);

  if (!BRUSH_OPTION_TOOLS.has(activeTool)) return null;

  return (
    <div className="flex items-center gap-3">
+      {/* Eraser mode selector */}
+      {activeTool === "eraser" && (
+        <div className="flex items-center gap-1">
+          <span className="text-xs text-muted-foreground w-12 shrink-0">Mode</span>
+          <div className="flex gap-0.5 flex-1">
+            <button
+              type="button"
+              onClick={() => setEraserMode("brush")}
+              className={`flex-1 text-xs py-1 rounded ${eraserMode === "brush" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
+            >
+              Brush
+            </button>
+            <button
+              type="button"
+              onClick={() => setEraserMode("block")}
+              className={`flex-1 text-xs py-1 rounded ${eraserMode === "block" ? "bg-primary text-primary-foreground" : "bg-muted text-muted-foreground"}`}
+            >
+              Block
+            </button>
+          </div>
+        </div>
+      )}
+
      {/* Size */}
      <label className="flex items-center gap-1.5 text-xs text-muted-foreground">
        Size
@@ -84,6 +111,24 @@ export function BrushOptions() {
          <span className="text-[10px]">%</span>
        </label>
      )}
+
+      {/* Flow (not for pencil) */}
+      {activeTool !== "pencil" && (
+        <div className="flex items-center gap-2">
+          <span className="text-xs text-muted-foreground w-12 shrink-0">Flow</span>
+          <input
+            type="range"
+            min={0}
+            max={100}
+            value={Math.round(brushFlow * 100)}
+            onChange={(e) => setBrushFlow(Number(e.target.value) / 100)}
+            className="flex-1 min-w-0"
+          />
+          <span className="text-xs text-muted-foreground tabular-nums w-8 text-end">
+            {Math.round(brushFlow * 100)}%
+          </span>
+        </div>
+      )}
    </div>
  );
 }
@@ -50,6 +50,8 @@ export function SelectionOptions() {
  const setMagicWandTolerance = useEditorStore((s) => s.setMagicWandTolerance);
  const magicWandContiguous = useEditorStore((s) => s.magicWandContiguous);
  const setMagicWandContiguous = useEditorStore((s) => s.setMagicWandContiguous);
+  const selectionFeather = useEditorStore((s) => s.selectionFeather);
+  const setSelectionFeather = useEditorStore((s) => s.setSelectionFeather);

  const selectionType: SelectionType =
    activeTool === "marquee-ellipse"
@@ -170,6 +172,25 @@ export function SelectionOptions() {
        </>
      )}

+      {/* Feather radius */}
+      {(isMarquee || isLasso) && (
+        <>
+          <div className="h-4 w-px bg-border" />
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-muted-foreground shrink-0">Feather:</span>
+            <input
+              type="number"
+              min={0}
+              max={100}
+              value={selectionFeather}
+              onChange={(e) => setSelectionFeather(Number(e.target.value))}
+              className="w-14 px-1.5 py-0.5 text-xs rounded border border-border bg-background text-foreground tabular-nums"
+            />
+            <span className="text-xs text-muted-foreground">px</span>
+          </div>
+        </>
+      )}
+
      {/* Magic Wand tolerance + contiguous */}
      {isMagicWand && (
        <>
@@ -1,4 +1,4 @@
-import { FlipHorizontal2, FlipVertical2, Lock, Unlock } from "lucide-react";
+import { Check, FlipHorizontal2, FlipVertical2, Lock, Unlock, X } from "lucide-react";
 import { useCallback } from "react";
 import type { TransformToolApi } from "@/components/editor/tools/transform-tool";
 import { cn } from "@/lib/utils";
@@ -55,7 +55,7 @@ function NumericInput({
 }

 export function TransformOptions({ api }: { api: TransformToolApi }) {
-  const { values, lockedAspect, setLockedAspect, setValues, flipHorizontal, flipVertical } = api;
+  const { values, lockedAspect, setLockedAspect, setValues, flipHorizontal, flipVertical, applyTransform, cancelTransform } = api;

  return (
    <div className="flex items-center gap-3">
@@ -137,6 +137,24 @@ export function TransformOptions({ api }: { api: TransformToolApi }) {
      >
        <FlipVertical2 className="h-4 w-4" />
      </button>
+
+      <div className="h-5 w-px bg-border mx-1" />
+      <button
+        type="button"
+        onClick={cancelTransform}
+        className="p-1.5 rounded hover:bg-muted text-muted-foreground hover:text-foreground transition-colors"
+        title="Cancel"
+      >
+        <X className="h-4 w-4" />
+      </button>
+      <button
+        type="button"
+        onClick={applyTransform}
+        className="p-1.5 rounded bg-primary text-primary-foreground hover:opacity-90 transition-opacity"
+        title="Apply"
+      >
+        <Check className="h-4 w-4" />
+      </button>
    </div>
  );
 }
@@ -18,7 +18,7 @@ export function useBrushTool() {
    const stage = e.target.getStage();
    if (!stage) return;

-    const { activeTool, foregroundColor, brushSize, brushOpacity, brushHardness, zoom, panOffset } =
+    const { activeTool, foregroundColor, brushSize, brushOpacity, brushHardness, brushFlow, zoom, panOffset } =
      useEditorStore.getState();

    if (activeTool !== "brush" && activeTool !== "pencil") return;
@@ -29,6 +29,15 @@ export function useBrushTool() {
    const x = (pointer.x - panOffset.x) / zoom;
    const y = (pointer.y - panOffset.y) / zoom;

+    const { selection } = useEditorStore.getState();
+    if (selection) {
+      const { bounds } = selection;
+      if (x < bounds.x || x > bounds.x + bounds.width ||
+          y < bounds.y || y > bounds.y + bounds.height) {
+        return;
+      }
+    }
+
    const id = generateId();
    const shadowBlurValue = activeTool === "pencil" ? 0 : brushSize * 0.4 * (1 - brushHardness);

@@ -39,7 +48,7 @@ export function useBrushTool() {
      tension: activeTool === "pencil" ? 0 : 0.5,
      lineCap: "round",
      lineJoin: "round",
-      opacity: brushOpacity,
+      opacity: brushOpacity * brushFlow,
      globalCompositeOperation: "source-over",
      ...(shadowBlurValue > 0 && {
        shadowBlur: shadowBlurValue,
@@ -73,6 +82,15 @@ export function useBrushTool() {
    const x = (pointer.x - panOffset.x) / zoom;
    const y = (pointer.y - panOffset.y) / zoom;

+    const { selection } = useEditorStore.getState();
+    if (selection) {
+      const { bounds } = selection;
+      if (x < bounds.x || x > bounds.x + bounds.width ||
+          y < bounds.y || y > bounds.y + bounds.height) {
+        return;
+      }
+    }
+
    strokeRef.current.points = [...strokeRef.current.points, x, y];

    useEditorStore.getState().updateObject(strokeRef.current.objectId, {
@@ -18,7 +18,7 @@ export function useEraserTool() {
    const stage = e.target.getStage();
    if (!stage) return;

-    const { activeTool, brushSize, brushOpacity, brushHardness, zoom, panOffset } =
+    const { activeTool, brushSize, brushOpacity, brushHardness, eraserMode, zoom, panOffset } =
      useEditorStore.getState();

    if (activeTool !== "eraser") return;
@@ -29,16 +29,31 @@ export function useEraserTool() {
    const x = (pointer.x - panOffset.x) / zoom;
    const y = (pointer.y - panOffset.y) / zoom;

+    const { selection } = useEditorStore.getState();
+    if (selection) {
+      const { bounds } = selection;
+      if (
+        x < bounds.x ||
+        x > bounds.x + bounds.width ||
+        y < bounds.y ||
+        y > bounds.y + bounds.height
+      ) {
+        return;
+      }
+    }
+
    const id = generateId();
    const shadowBlurValue = brushSize * 0.4 * (1 - brushHardness);

+    const isBlock = eraserMode === "block";
+
    const attrs: LineAttrs = {
      points: [x, y],
      stroke: "#000000",
      strokeWidth: brushSize,
-      tension: 0.5,
-      lineCap: "round",
-      lineJoin: "round",
+      tension: isBlock ? 0 : 0.5,
+      lineCap: isBlock ? "butt" : "round",
+      lineJoin: isBlock ? "miter" : "round",
      opacity: brushOpacity,
      globalCompositeOperation: "destination-out",
      ...(shadowBlurValue > 0 && {
@@ -73,6 +88,19 @@ export function useEraserTool() {
    const x = (pointer.x - panOffset.x) / zoom;
    const y = (pointer.y - panOffset.y) / zoom;

+    const { selection } = useEditorStore.getState();
+    if (selection) {
+      const { bounds } = selection;
+      if (
+        x < bounds.x ||
+        x > bounds.x + bounds.width ||
+        y < bounds.y ||
+        y > bounds.y + bounds.height
+      ) {
+        return;
+      }
+    }
+
    strokeRef.current.points = [...strokeRef.current.points, x, y];

    useEditorStore.getState().updateObject(strokeRef.current.objectId, {
@@ -53,7 +53,20 @@ export function useTransformTool(): TransformToolApi {

  // Read values from selected object(s)
  useEffect(() => {
-    if (!isTransforming || selectedObjectIds.length === 0) return;
+    if (!isTransforming) return;
+    if (selectedObjectIds.length === 0) {
+      const sel = useEditorStore.getState().selection;
+      if (sel && sel.bounds.width > 0) {
+        setValuesState({
+          x: sel.bounds.x,
+          y: sel.bounds.y,
+          width: sel.bounds.width,
+          height: sel.bounds.height,
+          rotation: 0,
+        });
+      }
+      return;
+    }
    const obj = objects.find((o) => o.id === selectedObjectIds[0]);
    if (!obj) return;
    const a = obj.attrs as unknown as Record<string, unknown>;
@@ -82,7 +95,26 @@ export function useTransformTool(): TransformToolApi {
  }, [isTransforming, selectedObjectIds]);

  const activate = useCallback(() => {
-    if (selectedObjectIds.length === 0) return;
+    if (selectedObjectIds.length === 0) {
+      const sel = useEditorStore.getState().selection;
+      if (!sel || sel.bounds.width === 0) return;
+      preTransformRef.current = {
+        x: sel.bounds.x,
+        y: sel.bounds.y,
+        width: sel.bounds.width,
+        height: sel.bounds.height,
+        rotation: 0,
+      };
+      setValuesState({
+        x: sel.bounds.x,
+        y: sel.bounds.y,
+        width: sel.bounds.width,
+        height: sel.bounds.height,
+        rotation: 0,
+      });
+      setIsTransforming(true);
+      return;
+    }
    setIsTransforming(true);
    // Store pre-transform state for cancel
    const obj = objects.find((o) => o.id === selectedObjectIds[0]);
@@ -1,25 +1,16 @@
-import {
-  FolderOpen,
-  Globe,
-  LayoutGrid,
-  Menu,
-  Settings as SettingsIcon,
-  Workflow,
-  X,
-} from "lucide-react";
+import { Globe, Menu, X } from "lucide-react";
 import { useState } from "react";
-import { Link } from "react-router-dom";
 import { useTranslation } from "@/contexts/i18n-context";
 import { useMobile } from "@/hooks/use-mobile";
 import { cn } from "@/lib/utils";
 import { useConnectionStore } from "@/stores/connection-store";
 import { Dropzone } from "../common/dropzone";
-import { ImageEditIcon } from "../common/image-edit-icon";
 import { OtterLogo } from "../common/otter-logo";
 import { HelpDialog } from "../help/help-dialog";
 import { SettingsDialog } from "../settings/settings-dialog";
 import { AiInstallIndicator } from "./ai-install-indicator";
 import { Footer } from "./footer";
+import { MobileBottomNav } from "./mobile-bottom-nav";
 import { Sidebar } from "./sidebar";
 import { ToolPanel } from "./tool-panel";

@@ -39,7 +30,7 @@ export function AppLayout({
  const [settingsOpen, setSettingsOpen] = useState(false);
  const [helpOpen, setHelpOpen] = useState(false);
  const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
-  const { t, locale, setLocale, supportedLocales } = useTranslation();
+  const { locale, setLocale, supportedLocales } = useTranslation();
  const isMobile = useMobile();
  const connectionStatus = useConnectionStore((s) => s.status);
  const bannerVisible = connectionStatus !== "connected";
@@ -67,7 +58,7 @@ export function AppLayout({
            className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm cursor-default"
            onClick={() => setMobileSidebarOpen(false)}
          />
-          <div className="fixed inset-y-0 start-0 z-50 w-64 bg-background border-e border-border shadow-xl animate-in slide-in-from-left">
+          <div className="fixed inset-y-0 left-0 z-50 w-64 bg-background border-r border-border shadow-xl animate-in slide-in-from-left">
            <div className="flex items-center justify-between p-3 border-b border-border">
              <div className="flex items-center gap-2">
                <OtterLogo className="h-5 w-5 text-primary" />
@@ -78,9 +69,9 @@ export function AppLayout({
              <button
                type="button"
                onClick={() => setMobileSidebarOpen(false)}
-                className="p-1.5 rounded-lg hover:bg-muted"
+                className="p-2.5 rounded-lg hover:bg-muted"
              >
-                <X className="h-4 w-4" />
+                <X className="h-5 w-5" />
              </button>
            </div>
            <Sidebar
@@ -126,7 +117,7 @@ export function AppLayout({
          <button
            type="button"
            onClick={() => setMobileSidebarOpen(true)}
-            className="p-1.5 rounded-lg hover:bg-muted"
+            className="p-2.5 -ms-1 rounded-lg hover:bg-muted"
          >
            <Menu className="h-5 w-5" />
          </button>
@@ -141,7 +132,7 @@ export function AppLayout({

      {showToolPanel && !isMobile && <ToolPanel />}

-      <main className={cn("flex-1 flex flex-col overflow-hidden", isMobile && "pt-12 pb-16")}>
+      <main className={cn("flex-1 flex flex-col overflow-hidden", isMobile && "pt-12 pb-20")}>
        <div className="flex-1 overflow-y-auto p-6 flex items-center justify-center">
          {children || <Dropzone onFiles={onFiles} onUrlImport={onUrlImport} accept="image/*" />}
        </div>
@@ -150,22 +141,7 @@ export function AppLayout({
      {!isMobile && <Footer />}

      {/* Mobile bottom nav */}
-      {isMobile && (
-        <nav className="fixed bottom-0 left-0 right-0 z-30 bg-background/95 backdrop-blur-sm border-t border-border flex items-center justify-around px-2 py-1.5">
-          <MobileNavItem icon={LayoutGrid} label={t.appLayout.mobileNavTools} href="/" />
-          <MobileNavItem icon={Workflow} label={t.appLayout.mobileNavAutomate} href="/automate" />
-          <MobileNavItem icon={ImageEditIcon} label={t.appLayout.mobileNavEditor} href="/editor" />
-          <MobileNavItem icon={FolderOpen} label={t.appLayout.mobileNavFiles} href="/files" />
-          <button
-            type="button"
-            onClick={() => setSettingsOpen(true)}
-            className="flex flex-col items-center gap-0.5 px-3 py-1 text-muted-foreground"
-          >
-            <SettingsIcon className="h-5 w-5" />
-            <span className="text-[10px]">{t.appLayout.mobileNavSettings}</span>
-          </button>
-        </nav>
-      )}
+      {isMobile && <MobileBottomNav onSettingsClick={() => setSettingsOpen(true)} />}

      {/* Settings dialog */}
      <SettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
@@ -178,23 +154,3 @@ export function AppLayout({
    </div>
  );
 }
-
-function MobileNavItem({
-  icon: Icon,
-  label,
-  href,
-}: {
-  icon: React.ComponentType<{ className?: string }>;
-  label: string;
-  href: string;
-}) {
-  return (
-    <Link
-      to={href}
-      className="flex flex-col items-center gap-0.5 px-3 py-1 text-muted-foreground hover:text-foreground transition-colors"
-    >
-      <Icon className="h-5 w-5" />
-      <span className="text-[10px]">{label}</span>
-    </Link>
-  );
-}
@@ -29,6 +29,7 @@ import {
 import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
 import { useTranslation } from "@/contexts/i18n-context";
 import { useAuth } from "@/hooks/use-auth";
+import { useMobile } from "@/hooks/use-mobile";
 import { apiDelete, apiGet, apiPost, apiPut, clearToken, formatHeaders } from "@/lib/api";
 import { format, plural } from "@/lib/format";
 import { getCategoryName, getToolDescription, getToolName } from "@/lib/tool-i18n";
@@ -124,6 +125,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
  const [section, setSection] = useState<Section>("general");
  const { hasPermission, authEnabled } = useAuth();
  const { t } = useTranslation();
+  const isMobile = useMobile();
  const NAV_ITEMS = useNavItems();

  const visibleNavItems = NAV_ITEMS.filter(
@@ -144,6 +146,60 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {

  if (!open) return null;

+  if (isMobile) {
+    return (
+      <div className="fixed inset-0 z-50 flex flex-col bg-background">
+        {/* Mobile header */}
+        <div className="flex items-center justify-between px-4 pt-4 pb-2 shrink-0">
+          <h2 className="text-sm font-semibold text-foreground">{t.settings.heading}</h2>
+          <button
+            type="button"
+            onClick={onClose}
+            className="p-2.5 rounded-lg hover:bg-muted transition-colors text-muted-foreground hover:text-foreground"
+          >
+            <X className="h-5 w-5" />
+          </button>
+        </div>
+
+        {/* Mobile pill strip nav */}
+        <div className="flex overflow-x-auto gap-1 px-3 pb-2 scrollbar-none shrink-0">
+          {visibleNavItems.map((item) => (
+            <button
+              key={item.id}
+              type="button"
+              onClick={() => setSection(item.id)}
+              className={cn(
+                "flex items-center gap-1.5 px-3 py-1.5 rounded-full text-xs font-medium whitespace-nowrap shrink-0",
+                section === item.id
+                  ? "bg-primary text-primary-foreground"
+                  : "bg-muted text-muted-foreground",
+              )}
+            >
+              <item.icon className="h-3.5 w-3.5" />
+              {item.label}
+            </button>
+          ))}
+        </div>
+
+        {/* Mobile content */}
+        <div className="flex-1 overflow-y-auto p-4">
+          {section === "general" && <GeneralSection />}
+          {section === "system" && <SystemSection />}
+          {section === "security" && <SecuritySection />}
+          {section === "people" && <PeopleSection />}
+          {section === "teams" && <TeamsSection />}
+          {section === "roles" && <RolesSection />}
+          {section === "audit-log" && <AuditLogSection />}
+          {section === "api-keys" && <ApiKeysSection />}
+          {section === "ai-features" && <AiFeaturesSection />}
+          {section === "tools" && <ToolsSection />}
+          {section === "analytics" && <AnalyticsSection />}
+          {section === "about" && <AboutSection />}
+        </div>
+      </div>
+    );
+  }
+
  return (
    <div className="fixed inset-0 z-50 flex items-center justify-center">
      {/* Backdrop */}
@@ -157,7 +213,7 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
      <div
        role="dialog"
        aria-modal="true"
-        className="relative bg-background border border-border rounded-xl shadow-2xl w-full max-w-3xl h-[85vh] flex overflow-hidden"
+        className="relative bg-background border border-border rounded-xl shadow-2xl w-full max-w-3xl h-[85dvh] flex overflow-hidden"
      >
        {/* Sidebar nav */}
        <div className="w-48 border-r border-border bg-muted/30 p-3 space-y-1 shrink-0">
@@ -249,7 +305,7 @@ interface UserEntry {
 }

 interface TeamEntry {
-  id: number;
+  id: string;
  name: string;
  memberCount: number;
  createdAt: string;
@@ -624,6 +680,7 @@ function SecuritySection() {
  const [confirmPassword, setConfirmPassword] = useState("");
  const [showCurrent, setShowCurrent] = useState(false);
  const [showNew, setShowNew] = useState(false);
+  const [showConfirm, setShowConfirm] = useState(false);
  const [submitting, setSubmitting] = useState(false);
  const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);

@@ -634,7 +691,7 @@ function SecuritySection() {
        setMessage({ type: "error", text: t.settings.security.passwordsMismatch });
        return;
      }
-      if (newPassword.length < 4) {
+      if (newPassword.length < 8) {
        setMessage({ type: "error", text: t.settings.security.passwordTooShort });
        return;
      }
@@ -709,14 +766,24 @@ function SecuritySection() {
            </button>
          </div>

-          <input
-            type="password"
-            value={confirmPassword}
-            onChange={(e) => setConfirmPassword(e.target.value)}
-            placeholder={t.settings.security.confirmPasswordPlaceholder}
-            className="w-full px-3 py-2 rounded-lg border border-border bg-background text-sm text-foreground"
-            required
-          />
+          <div className="relative">
+            <input
+              type={showConfirm ? "text" : "password"}
+              value={confirmPassword}
+              onChange={(e) => setConfirmPassword(e.target.value)}
+              placeholder={t.settings.security.confirmPasswordPlaceholder}
+              className="w-full px-3 py-2 pe-10 rounded-lg border border-border bg-background text-sm text-foreground"
+              required
+            />
+            <button
+              type="button"
+              onClick={() => setShowConfirm(!showConfirm)}
+              className="absolute end-2 top-1/2 -translate-y-1/2 p-1 text-muted-foreground hover:text-foreground"
+              tabIndex={-1}
+            >
+              {showConfirm ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
+            </button>
+          </div>

          {message && (
            <p
@@ -778,6 +845,7 @@ function generatePassword(): string {

 function PeopleSection() {
  const { t } = useTranslation();
+  const isMobile = useMobile();
  const [users, setUsers] = useState<UserEntry[]>([]);
  const [maxUsers, setMaxUsers] = useState(5);
  const [loading, setLoading] = useState(true);
@@ -1029,7 +1097,7 @@ function PeopleSection() {
          <h4 className="text-sm font-medium text-foreground">
            {t.settings.people.newMemberHeading}
          </h4>
-          <div className="grid grid-cols-2 gap-3">
+          <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
            <input
              type="text"
              value={newUsername}
@@ -1260,13 +1328,15 @@ function PeopleSection() {

      {/* Users table */}
      <div className="border border-border rounded-lg">
-        {/* Table header */}
-        <div className="grid grid-cols-[1fr_100px_120px_60px] gap-2 px-4 py-2.5 bg-muted/40 rounded-t-lg border-b border-border text-xs font-medium text-muted-foreground uppercase tracking-wide">
-          <span>{t.settings.people.tableHeaderUser}</span>
-          <span>{t.settings.people.tableHeaderRole}</span>
-          <span>{t.settings.people.tableHeaderTeam}</span>
-          <span />
-        </div>
+        {/* Table header (desktop only) */}
+        {!isMobile && (
+          <div className="grid grid-cols-[1fr_100px_120px_60px] gap-2 px-4 py-2.5 bg-muted/40 rounded-t-lg border-b border-border text-xs font-medium text-muted-foreground uppercase tracking-wide">
+            <span>{t.settings.people.tableHeaderUser}</span>
+            <span>{t.settings.people.tableHeaderRole}</span>
+            <span>{t.settings.people.tableHeaderTeam}</span>
+            <span />
+          </div>
+        )}

        {/* Table rows */}
        {filteredUsers.length === 0 ? (
@@ -1277,45 +1347,91 @@ function PeopleSection() {
          filteredUsers.map((u) => (
            <div
              key={u.id}
-              className="grid grid-cols-[1fr_100px_120px_60px] gap-2 items-center px-4 py-3 border-b border-border last:border-0 last:rounded-b-lg hover:bg-muted/20 transition-colors"
+              className={cn(
+                "items-center px-4 py-3 border-b border-border last:border-0 last:rounded-b-lg hover:bg-muted/20 transition-colors",
+                isMobile ? "flex gap-3" : "grid grid-cols-[1fr_100px_120px_60px] gap-2",
+              )}
            >
-              {/* User cell */}
-              <div className="flex items-center gap-3 min-w-0">
-                <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold text-sm shrink-0">
-                  {u.username.charAt(0).toUpperCase()}
-                </div>
-                <span className="text-sm font-medium text-foreground truncate">{u.username}</span>
-                {u.hasOidcLink && u.hasLocalPassword !== false && (
-                  <span className="ms-1.5 text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
-                    {t.auth.methodBoth}
-                  </span>
-                )}
-                {u.hasOidcLink && u.hasLocalPassword === false && (
-                  <span className="ms-1.5 text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
-                    {t.auth.methodOidc}
-                  </span>
-                )}
-              </div>
+              {isMobile ? (
+                <>
+                  {/* Mobile card layout */}
+                  <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold text-sm shrink-0">
+                    {u.username.charAt(0).toUpperCase()}
+                  </div>
+                  <div className="flex-1 min-w-0">
+                    <div className="flex items-center gap-1.5">
+                      <span className="text-sm font-medium text-foreground truncate">
+                        {u.username}
+                      </span>
+                      {u.hasOidcLink && u.hasLocalPassword !== false && (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                          {t.auth.methodBoth}
+                        </span>
+                      )}
+                      {u.hasOidcLink && u.hasLocalPassword === false && (
+                        <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                          {t.auth.methodOidc}
+                        </span>
+                      )}
+                    </div>
+                    <div className="flex items-center gap-2 mt-0.5">
+                      <span
+                        className={cn(
+                          "inline-block px-2 py-0.5 rounded text-xs font-semibold uppercase tracking-wide",
+                          u.role === "admin"
+                            ? "bg-primary/15 text-primary"
+                            : "bg-muted text-muted-foreground",
+                        )}
+                      >
+                        {u.role}
+                      </span>
+                      <span className="text-xs text-muted-foreground truncate">{u.team}</span>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
+                  {/* Desktop row layout */}
+                  <div className="flex items-center gap-3 min-w-0">
+                    <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold text-sm shrink-0">
+                      {u.username.charAt(0).toUpperCase()}
+                    </div>
+                    <span className="text-sm font-medium text-foreground truncate">
+                      {u.username}
+                    </span>
+                    {u.hasOidcLink && u.hasLocalPassword !== false && (
+                      <span className="ms-1.5 text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                        {t.auth.methodBoth}
+                      </span>
+                    )}
+                    {u.hasOidcLink && u.hasLocalPassword === false && (
+                      <span className="ms-1.5 text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
+                        {t.auth.methodOidc}
+                      </span>
+                    )}
+                  </div>

-              {/* Role badge */}
-              <div>
-                <span
-                  className={cn(
-                    "inline-block px-2 py-0.5 rounded text-xs font-semibold uppercase tracking-wide",
-                    u.role === "admin"
-                      ? "bg-primary/15 text-primary"
-                      : "bg-muted text-muted-foreground",
-                  )}
-                >
-                  {u.role}
-                </span>
-              </div>
+                  {/* Role badge */}
+                  <div>
+                    <span
+                      className={cn(
+                        "inline-block px-2 py-0.5 rounded text-xs font-semibold uppercase tracking-wide",
+                        u.role === "admin"
+                          ? "bg-primary/15 text-primary"
+                          : "bg-muted text-muted-foreground",
+                      )}
+                    >
+                      {u.role}
+                    </span>
+                  </div>

-              {/* Team */}
-              <span className="text-sm text-foreground truncate">{u.team}</span>
+                  {/* Team */}
+                  <span className="text-sm text-foreground truncate">{u.team}</span>
+                </>
+              )}

              {/* Actions */}
-              <div className="flex items-center gap-1 justify-end relative">
+              <div className="flex items-center gap-1 justify-end relative shrink-0">
                <button
                  type="button"
                  onClick={(e) => {
@@ -1621,14 +1737,15 @@ function ApiKeysSection() {

 function TeamsSection() {
  const { t } = useTranslation();
+  const isMobile = useMobile();
  const [teams, setTeams] = useState<TeamEntry[]>([]);
  const [loading, setLoading] = useState(true);
  const [showCreateForm, setShowCreateForm] = useState(false);
  const [newTeamName, setNewTeamName] = useState("");
  const [creating, setCreating] = useState(false);
-  const [editingTeamId, setEditingTeamId] = useState<number | null>(null);
+  const [editingTeamId, setEditingTeamId] = useState<string | null>(null);
  const [editingTeamName, setEditingTeamName] = useState("");
-  const [openMenuId, setOpenMenuId] = useState<number | null>(null);
+  const [openMenuId, setOpenMenuId] = useState<string | null>(null);
  const [actionMsg, setActionMsg] = useState<{ type: "success" | "error"; text: string } | null>(
    null,
  );
@@ -1682,7 +1799,7 @@ function TeamsSection() {
  );

  const handleRename = useCallback(
-    async (id: number) => {
+    async (id: string) => {
      if (!editingTeamName.trim()) return;
      try {
        await apiPut(`/v1/teams/${id}`, { name: editingTeamName.trim() });
@@ -1700,7 +1817,7 @@ function TeamsSection() {
  );

  const handleDelete = useCallback(
-    async (id: number, name: string) => {
+    async (id: string, name: string) => {
      if (!confirm(format(t.settings.teams.deleteConfirm, { name }))) return;
      try {
        await apiDelete(`/v1/teams/${id}`);
@@ -1793,11 +1910,14 @@ function TeamsSection() {
      )}

      <div className="border border-border rounded-lg">
-        <div className="grid grid-cols-[1fr_100px_60px] gap-2 px-4 py-2.5 bg-muted/40 rounded-t-lg border-b border-border text-xs font-medium text-muted-foreground uppercase tracking-wide">
-          <span>{t.settings.teams.tableHeaderTeamName}</span>
-          <span>{t.settings.teams.totalMembers}</span>
-          <span />
-        </div>
+        {/* Table header (desktop only) */}
+        {!isMobile && (
+          <div className="grid grid-cols-[1fr_100px_60px] gap-2 px-4 py-2.5 bg-muted/40 rounded-t-lg border-b border-border text-xs font-medium text-muted-foreground uppercase tracking-wide">
+            <span>{t.settings.teams.tableHeaderTeamName}</span>
+            <span>{t.settings.teams.totalMembers}</span>
+            <span />
+          </div>
+        )}

        {teams.length === 0 ? (
          <div className="px-4 py-8 text-center text-sm text-muted-foreground rounded-b-lg">
@@ -1807,9 +1927,12 @@ function TeamsSection() {
          teams.map((tm) => (
            <div
              key={tm.id}
-              className="grid grid-cols-[1fr_100px_60px] gap-2 items-center px-4 py-3 border-b border-border last:border-0 last:rounded-b-lg hover:bg-muted/20 transition-colors"
+              className={cn(
+                "items-center px-4 py-3 border-b border-border last:border-0 last:rounded-b-lg hover:bg-muted/20 transition-colors",
+                isMobile ? "flex gap-3" : "grid grid-cols-[1fr_100px_60px] gap-2",
+              )}
            >
-              <div className="min-w-0">
+              <div className="flex-1 min-w-0">
                {editingTeamId === tm.id ? (
                  <div className="flex items-center gap-2">
                    <input
@@ -1839,11 +1962,20 @@ function TeamsSection() {
                    </button>
                  </div>
                ) : (
-                  <span className="text-sm font-medium text-foreground truncate">{tm.name}</span>
+                  <div>
+                    <span className="text-sm font-medium text-foreground truncate block">
+                      {tm.name}
+                    </span>
+                    {isMobile && (
+                      <span className="text-xs text-muted-foreground">
+                        {tm.memberCount} {plural(tm.memberCount, "member", "members")}
+                      </span>
+                    )}
+                  </div>
                )}
              </div>
-              <span className="text-sm text-muted-foreground">{tm.memberCount}</span>
-              <div className="flex items-center gap-1 justify-end relative">
+              {!isMobile && <span className="text-sm text-muted-foreground">{tm.memberCount}</span>}
+              <div className="flex items-center gap-1 justify-end relative shrink-0">
                <button
                  type="button"
                  onClick={(e) => {
@@ -2304,6 +2436,7 @@ function formatRelativeTime(iso: string): string {

 function AuditLogSection() {
  const { t } = useTranslation();
+  const isMobile = useMobile();
  const [entries, setEntries] = useState<AuditEntry[]>([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
@@ -2369,58 +2502,96 @@ function AuditLogSection() {
        </p>
      ) : (
        <div className="border border-border rounded-lg overflow-hidden">
-          <table className="w-full text-sm">
-            <thead>
-              <tr className="border-b border-border bg-muted/30">
-                <th className="text-start px-3 py-2 font-medium text-muted-foreground">
-                  {t.settings.auditLog.tableHeaderTime}
-                </th>
-                <th className="text-start px-3 py-2 font-medium text-muted-foreground">
-                  {t.settings.auditLog.tableHeaderUser}
-                </th>
-                <th className="text-start px-3 py-2 font-medium text-muted-foreground">
-                  {t.settings.auditLog.tableHeaderAction}
-                </th>
-                <th className="text-start px-3 py-2 font-medium text-muted-foreground">
-                  {t.settings.auditLog.tableHeaderTarget}
-                </th>
-              </tr>
-            </thead>
-            <tbody>
+          {isMobile ? (
+            <div className="divide-y divide-border">
              {entries.map((entry) => (
                <Fragment key={entry.id}>
-                  <tr
-                    className="border-b border-border last:border-0 hover:bg-muted/20 cursor-pointer transition-colors"
+                  <div
+                    className="px-3 py-2.5 hover:bg-muted/20 cursor-pointer transition-colors"
                    onClick={() => setExpandedId(expandedId === entry.id ? null : entry.id)}
                  >
-                    <td className="px-3 py-2 text-muted-foreground whitespace-nowrap">
-                      {formatRelativeTime(entry.createdAt)}
-                    </td>
-                    <td className="px-3 py-2 text-foreground">{entry.actorUsername}</td>
-                    <td className="px-3 py-2">
+                    <div className="flex items-center justify-between gap-2">
                      <span className="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">
                        {entry.action}
                      </span>
-                    </td>
-                    <td className="px-3 py-2 text-muted-foreground">
-                      {entry.targetType
-                        ? `${entry.targetType}${entry.targetId ? ` #${entry.targetId}` : ""}`
-                        : "—"}
-                    </td>
-                  </tr>
+                      <span className="text-xs text-muted-foreground whitespace-nowrap">
+                        {formatRelativeTime(entry.createdAt)}
+                      </span>
+                    </div>
+                    <div className="flex items-center gap-2 mt-1">
+                      <span className="text-sm text-foreground">{entry.actorUsername}</span>
+                      {entry.targetType && (
+                        <span className="text-xs text-muted-foreground">
+                          {entry.targetType}
+                          {entry.targetId ? ` #${entry.targetId}` : ""}
+                        </span>
+                      )}
+                    </div>
+                  </div>
                  {expandedId === entry.id && entry.details && (
-                    <tr className="border-b border-border last:border-0">
-                      <td colSpan={4} className="px-3 py-2 bg-muted/10">
-                        <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono overflow-x-auto">
-                          {JSON.stringify(entry.details, null, 2)}
-                        </pre>
-                      </td>
-                    </tr>
+                    <div className="px-3 py-2 bg-muted/10">
+                      <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono overflow-x-auto">
+                        {JSON.stringify(entry.details, null, 2)}
+                      </pre>
+                    </div>
                  )}
                </Fragment>
              ))}
-            </tbody>
-          </table>
+            </div>
+          ) : (
+            <table className="w-full text-sm">
+              <thead>
+                <tr className="border-b border-border bg-muted/30">
+                  <th className="text-start px-3 py-2 font-medium text-muted-foreground">
+                    {t.settings.auditLog.tableHeaderTime}
+                  </th>
+                  <th className="text-start px-3 py-2 font-medium text-muted-foreground">
+                    {t.settings.auditLog.tableHeaderUser}
+                  </th>
+                  <th className="text-start px-3 py-2 font-medium text-muted-foreground">
+                    {t.settings.auditLog.tableHeaderAction}
+                  </th>
+                  <th className="text-start px-3 py-2 font-medium text-muted-foreground">
+                    {t.settings.auditLog.tableHeaderTarget}
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                {entries.map((entry) => (
+                  <Fragment key={entry.id}>
+                    <tr
+                      className="border-b border-border last:border-0 hover:bg-muted/20 cursor-pointer transition-colors"
+                      onClick={() => setExpandedId(expandedId === entry.id ? null : entry.id)}
+                    >
+                      <td className="px-3 py-2 text-muted-foreground whitespace-nowrap">
+                        {formatRelativeTime(entry.createdAt)}
+                      </td>
+                      <td className="px-3 py-2 text-foreground">{entry.actorUsername}</td>
+                      <td className="px-3 py-2">
+                        <span className="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">
+                          {entry.action}
+                        </span>
+                      </td>
+                      <td className="px-3 py-2 text-muted-foreground">
+                        {entry.targetType
+                          ? `${entry.targetType}${entry.targetId ? ` #${entry.targetId}` : ""}`
+                          : "---"}
+                      </td>
+                    </tr>
+                    {expandedId === entry.id && entry.details && (
+                      <tr className="border-b border-border last:border-0">
+                        <td colSpan={4} className="px-3 py-2 bg-muted/10">
+                          <pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono overflow-x-auto">
+                            {JSON.stringify(entry.details, null, 2)}
+                          </pre>
+                        </td>
+                      </tr>
+                    )}
+                  </Fragment>
+                ))}
+              </tbody>
+            </table>
+          )}
        </div>
      )}

@@ -2545,7 +2716,7 @@ function ToolsSection() {
        />
      </div>

-      <div className="space-y-4 max-h-[50vh] overflow-y-auto">
+      <div className="space-y-4 max-h-[50dvh] overflow-y-auto">
        {CATEGORIES.filter((cat) => groupedTools.has(cat.id)).map((category) => (
          <div key={category.id}>
            <h4 className="text-xs font-semibold uppercase text-muted-foreground tracking-wider mb-2">
@@ -2706,6 +2877,14 @@ function AboutSection() {
        </div>
      </div>

+      <div className="flex items-center gap-4 text-sm">
+        <span className="text-muted-foreground">{t.settings.about.licenseLabel}</span>
+        <div>
+          <span className="font-mono text-foreground">AGPLv3</span>
+          <p className="text-xs text-muted-foreground">{t.settings.about.licenseDescription}</p>
+        </div>
+      </div>
+
      <div className="space-y-2">
        <h4 className="text-sm font-medium text-foreground">{t.settings.about.linksHeading}</h4>
        <div className="flex flex-col gap-1.5">
@@ -2750,13 +2929,19 @@ function SettingRow({
  description: string;
  children: React.ReactNode;
 }) {
+  const isMobile = useMobile();
  return (
-    <div className="flex items-center justify-between py-3 border-b border-border last:border-0">
+    <div
+      className={cn(
+        "py-3 border-b border-border last:border-0",
+        isMobile ? "flex flex-col gap-2" : "flex items-center justify-between",
+      )}
+    >
      <div>
        <p className="text-sm font-medium text-foreground">{label}</p>
        <p className="text-xs text-muted-foreground">{description}</p>
      </div>
-      <div className="shrink-0 ms-4">{children}</div>
+      <div className={cn(!isMobile && "shrink-0 ms-4")}>{children}</div>
    </div>
  );
 }
@@ -41,8 +41,6 @@ const SHAPE_CYCLE: ToolType[] = [
  "shape-polygon",
  "shape-star",
 ];
-// Dodge/burn/sponge cycle
-const DODGE_CYCLE: ToolType[] = ["dodge", "burn", "sponge"];
 // Fill/gradient cycle
 const FILL_CYCLE: ToolType[] = ["fill", "gradient"];

@@ -201,29 +199,12 @@ export function useEditorShortcuts(callbacks?: {
    { preventDefault: true },
  );

-  // O - Dodge/Burn/Sponge (cycles)
+  // O - Dodge tool
  useHotkeys(
    "o",
    () => {
      if (isInputFocused()) return;
-      const current = useEditorStore.getState().activeTool;
-      if (DODGE_CYCLE.includes(current)) {
-        useEditorStore.getState().setTool(cycleSubtool(current, DODGE_CYCLE));
-      } else {
-        useEditorStore.getState().setTool("dodge");
-      }
-    },
-    { preventDefault: true },
-  );
-
-  // Shift+O - Cycle dodge/burn/sponge subtypes
-  useHotkeys(
-    "shift+o",
-    () => {
-      if (isInputFocused()) return;
-      useEditorStore
-        .getState()
-        .setTool(cycleSubtool(useEditorStore.getState().activeTool, DODGE_CYCLE));
+      useEditorStore.getState().setTool("dodge");
    },
    { preventDefault: true },
  );
@@ -380,16 +361,6 @@ export function useEditorShortcuts(callbacks?: {
    { preventDefault: true },
  );

-  // Ctrl+Y / Cmd+Y - Redo (alternative)
-  useHotkeys(
-    "mod+y",
-    (e) => {
-      e.preventDefault();
-      useEditorStore.temporal.getState().redo();
-    },
-    { preventDefault: true },
-  );
-
  // Ctrl+S / Cmd+S - Save project
  useHotkeys(
    "mod+s",
@@ -423,6 +394,7 @@ export function useEditorShortcuts(callbacks?: {
  useHotkeys(
    "mod+a",
    (e) => {
+      if (isInputFocused()) return;
      e.preventDefault();
      const state = useEditorStore.getState();
      const allIds = state.objects.map((o) => o.id);
@@ -435,6 +407,7 @@ export function useEditorShortcuts(callbacks?: {
  useHotkeys(
    "mod+d",
    (e) => {
+      if (isInputFocused()) return;
      e.preventDefault();
      useEditorStore.getState().setSelectedObjects([]);
      useEditorStore.getState().setSelection(null);
@@ -525,6 +498,7 @@ export function useEditorShortcuts(callbacks?: {
  useHotkeys(
    "mod+t",
    (e) => {
+      if (isInputFocused()) return;
      e.preventDefault();
      useEditorStore.getState().setTool("transform");
    },
@@ -535,6 +509,7 @@ export function useEditorShortcuts(callbacks?: {
  useHotkeys(
    "mod+j",
    (e) => {
+      if (isInputFocused()) return;
      e.preventDefault();
      const state = useEditorStore.getState();
      state.duplicateLayer(state.activeLayerId);
@@ -546,6 +521,7 @@ export function useEditorShortcuts(callbacks?: {
  useHotkeys(
    "mod+shift+n",
    (e) => {
+      if (isInputFocused()) return;
      e.preventDefault();
      useEditorStore.getState().addLayer();
    },
@@ -4,7 +4,9 @@ import { Eye, EyeOff, FileImage, LayoutGrid, List, Search } from "lucide-react";
 import { useEffect, useMemo, useState } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { OtterLogo } from "@/components/common/otter-logo";
+import { MobileBottomNav } from "@/components/layout/mobile-bottom-nav";
 import { useTranslation } from "@/contexts/i18n-context";
+import { useMobile } from "@/hooks/use-mobile";
 import { track } from "@/lib/analytics";
 import { apiGet } from "@/lib/api";
 import { ICON_MAP } from "@/lib/icon-map";
@@ -14,6 +16,7 @@ import { useFeaturesStore } from "@/stores/features-store";

 export function FullscreenGridPage() {
  const { t } = useTranslation();
+  const isMobile = useMobile();
  const [search, setSearch] = useState("");
  const [showDetails, setShowDetails] = useState(true);
  const navigate = useNavigate();
@@ -79,7 +82,7 @@ export function FullscreenGridPage() {
  const activeCategories = CATEGORIES.filter((cat) => groupedTools.has(cat.id));

  return (
-    <div className="min-h-screen bg-background text-foreground">
+    <div className={cn("min-h-screen bg-background text-foreground", isMobile && "pb-20")}>
      {/* Top bar */}
      <header className="sticky top-0 z-30 bg-background/95 backdrop-blur-sm border-b border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 py-3 flex items-center gap-4">
@@ -154,6 +157,7 @@ export function FullscreenGridPage() {
          </div>
        )}
      </main>
+      {isMobile && <MobileBottomNav />}
    </div>
  );
 }
@@ -6,6 +6,7 @@ import { ImageViewer } from "@/components/common/image-viewer";
 import { MultiImageViewer } from "@/components/common/multi-image-viewer";
 import { AppLayout } from "@/components/layout/app-layout";
 import { useTranslation } from "@/contexts/i18n-context";
+import { useMobile } from "@/hooks/use-mobile";
 import { ICON_MAP } from "@/lib/icon-map";
 import { getCategoryName, getToolName } from "@/lib/tool-i18n";
 import { useFeaturesStore } from "@/stores/features-store";
@@ -32,6 +33,7 @@ export function HomePage() {
  const location = useLocation();
  const { fetch: fetchSettings, defaultToolView, loaded: settingsLoaded } = useSettingsStore();
  const { fetch: fetchFeatures, bundles, installing, queued } = useFeaturesStore();
+  const isMobile = useMobile();

  useEffect(() => {
    if (location.state?.fromLibrary) {
@@ -93,12 +95,96 @@ export function HomePage() {
    return <AppLayout onFiles={handleFiles} onUrlImport={handleUrlImport} />;
  }

-  // File uploaded — show tool selector on left, image preview on right
+  // File uploaded — mobile: stacked layout
+  if (isMobile && hasFile) {
+    return (
+      <AppLayout showToolPanel={false} onFiles={handleFiles}>
+        <div className="flex flex-col h-full w-full">
+          {/* File info bar */}
+          <div className="flex items-center gap-2 px-4 py-3 border-b border-border">
+            <ICON_MAP.CheckCircle2 className="h-4 w-4 text-green-500 shrink-0" />
+            <span className="truncate text-sm font-medium text-foreground">
+              {selectedFileName ?? files[0].name}
+            </span>
+            <span className="text-xs text-muted-foreground shrink-0">
+              {selectedFileSize ? `${(selectedFileSize / 1024).toFixed(1)} KB` : ""}
+            </span>
+            <button
+              type="button"
+              onClick={reset}
+              className="text-xs text-muted-foreground hover:text-foreground ms-auto shrink-0"
+            >
+              {t.homePage.changeFile}
+            </button>
+          </div>
+
+          {/* Quick action buttons - horizontal scroll */}
+          <div className="flex overflow-x-auto gap-2 px-4 py-3 border-b border-border scrollbar-none">
+            {QUICK_ACTION_IDS.map((id) => {
+              const tool = TOOLS.find((t) => t.id === id);
+              if (!tool) return null;
+              const Icon =
+                (ICON_MAP[tool.icon] as React.ComponentType<{ className?: string }>) ??
+                ICON_MAP.FileImage;
+              const status = getToolStatus(id);
+              return (
+                <button
+                  key={id}
+                  type="button"
+                  onClick={() => navigate(tool.route)}
+                  className="flex items-center gap-2 px-3 py-2 rounded-xl border border-border hover:border-primary hover:bg-primary/5 transition-colors shrink-0"
+                >
+                  <div className="p-1 rounded-lg bg-primary/10 text-primary">
+                    <Icon className="h-4 w-4" />
+                  </div>
+                  <span className="text-xs font-medium text-foreground whitespace-nowrap">
+                    {getToolName(t, tool.id, tool.name)}
+                  </span>
+                  {status === "not_installed" && (
+                    <Download className="h-3.5 w-3.5 text-muted-foreground" />
+                  )}
+                  {status === "queued" && <Clock className="h-3.5 w-3.5 text-muted-foreground" />}
+                  {status === "installing" && (
+                    <Loader2 className="h-3.5 w-3.5 text-muted-foreground animate-spin" />
+                  )}
+                </button>
+              );
+            })}
+          </div>
+
+          {/* Full-width image preview */}
+          <div className="flex-1 flex items-center justify-center p-4 min-h-0">
+            {files.length > 1 ? (
+              <MultiImageViewer />
+            ) : currentEntry?.previewLoading ? (
+              <div className="flex flex-col items-center justify-center h-full gap-3 text-center">
+                <Loader2 className="h-8 w-8 text-muted-foreground animate-spin" />
+                <p className="text-sm text-muted-foreground">{t.homePage.generatingPreview}</p>
+                <p className="text-xs text-muted-foreground/60">{selectedFileName}</p>
+              </div>
+            ) : originalBlobUrl ? (
+              <ImageViewer
+                src={originalBlobUrl}
+                filename={selectedFileName ?? files[0].name}
+                fileSize={selectedFileSize ?? files[0].size}
+              />
+            ) : (
+              <div className="text-center text-muted-foreground">
+                <p>{t.homePage.loadingPreview}</p>
+              </div>
+            )}
+          </div>
+        </div>
+      </AppLayout>
+    );
+  }
+
+  // File uploaded — desktop: tool selector on left, image preview on right
  return (
    <AppLayout showToolPanel={false} onFiles={handleFiles}>
      <div className="flex h-full w-full">
        {/* Left panel: Tool selector */}
-        <div className="w-80 border-r border-border overflow-y-auto shrink-0">
+        <div className="w-64 lg:w-80 border-r border-border overflow-y-auto shrink-0">
          {/* File info */}
          <div className="p-4 border-b border-border">
            <div className="flex items-center gap-2 text-sm">
@@ -9,8 +9,9 @@ import {
 } from "lucide-react";
 import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import type { Crop } from "react-image-crop";
-import { useParams } from "react-router-dom";
+import { Link, useParams } from "react-router-dom";
 import { BeforeAfterSlider } from "@/components/common/before-after-slider";
+import { BottomSheet } from "@/components/common/bottom-sheet";
 import { Dropzone } from "@/components/common/dropzone";
 import { type BgPreviewState, ImageViewer } from "@/components/common/image-viewer";
 import { ReviewPanel } from "@/components/common/review-panel";
@@ -213,7 +214,7 @@ export function ToolPage() {
    },
    [navigateNext, navigatePrev],
  );
-  const [mobileSettingsOpen, setMobileSettingsOpen] = useState(true);
+  const [mobileSettingsOpen, setMobileSettingsOpen] = useState(false);
  const [previewTransform, setPreviewTransform] = useState<PreviewTransform | null>(null);
  const [previewFilter, setPreviewFilter] = useState<string>("");
  const [imageWrapperStyle, setImageWrapperStyle] = useState<React.CSSProperties | null>(null);
@@ -274,7 +275,7 @@ export function ToolPage() {
    setEraserMaskedCount(0);
    setEraserBrushSize(30);
    setEraserSliderInitPos(null);
-    setMobileSettingsOpen(true);
+    setMobileSettingsOpen(false);
  }, [toolId]);

  const toolAccept = registryEntry?.accept;
@@ -346,8 +347,14 @@ export function ToolPage() {
  if (!tool || !registryEntry) {
    return (
      <AppLayout>
-        <div className="flex items-center justify-center h-full text-muted-foreground">
-          {t.toolPage.notFound}
+        <div className="flex flex-col items-center justify-center h-full gap-4 text-muted-foreground">
+          <p className="text-lg font-medium">{t.toolPage.notFound}</p>
+          <Link
+            to="/"
+            className="px-4 py-2 rounded-lg bg-primary text-primary-foreground text-sm font-medium"
+          >
+            {t.common.goHome}
+          </Link>
        </div>
      </AppLayout>
    );
@@ -777,7 +784,7 @@ export function ToolPage() {
    );
  }

-  // Mobile layout: settings above dropzone (stacked)
+  // Mobile layout: full-height image area with BottomSheet for settings
  if (isMobile) {
    return (
      <AppLayout showToolPanel={false}>
@@ -795,18 +802,11 @@ export function ToolPage() {
              onClick={() => setMobileSettingsOpen(!mobileSettingsOpen)}
              className="px-3 py-1.5 rounded-lg border border-border text-xs text-muted-foreground hover:bg-muted"
            >
-              {mobileSettingsOpen ? t.toolPage.hideSettings : t.common.settings}
+              {t.common.settings}
            </button>
          </div>

-          {/* Collapsible settings */}
-          {mobileSettingsOpen && (
-            <div className="p-4 border-b border-border space-y-3 shrink-0 max-h-[40vh] overflow-y-auto">
-              {renderSettingsContent()}
-            </div>
-          )}
-
-          {/* Main area: image viewer */}
+          {/* Main area: image viewer (full height) */}
          <section
            aria-label="Image area"
            className="flex-1 flex flex-col min-h-0 min-w-0"
@@ -825,6 +825,15 @@ export function ToolPage() {
              />
            )}
          </section>
+
+          {/* Settings BottomSheet */}
+          <BottomSheet
+            open={mobileSettingsOpen}
+            onClose={() => setMobileSettingsOpen(false)}
+            title={t.common.settings}
+          >
+            <div className="settings-container space-y-3">{renderSettingsContent()}</div>
+          </BottomSheet>
        </div>
      </AppLayout>
    );
@@ -835,7 +844,7 @@ export function ToolPage() {
    <AppLayout showToolPanel={false}>
      <div className="flex h-full w-full">
        {/* Tool Settings Panel */}
-        <div className="w-72 border-r border-border p-4 space-y-4 overflow-y-auto shrink-0">
+        <div className="settings-container w-72 border-r border-border p-4 space-y-4 overflow-y-auto shrink-0">
          <div className="flex items-center gap-3">
            <div className="p-2 rounded-lg bg-primary text-primary-foreground">
              <IconComponent className="h-5 w-5" />
@@ -8,6 +8,7 @@ import type {
  CanvasObject,
  EditorLayer,
  EditorState,
+  EraserMode,
  FilterConfig,
  SelectionMode,
  StrokeDashStyle,
@@ -152,6 +153,8 @@ export const useEditorStore = create<EditorState & EditorStateExtensions>()(
      brushSize: 10,
      brushOpacity: 1,
      brushHardness: 1,
+      brushFlow: 1,
+      eraserMode: "brush" as EraserMode,

      // --- Colors ---
      foregroundColor: "#000000",
@@ -171,6 +174,7 @@ export const useEditorStore = create<EditorState & EditorStateExtensions>()(
      selectionMode: "new" as SelectionMode,
      magicWandTolerance: 32,
      magicWandContiguous: true,
+      selectionFeather: 0,

      // --- Crop ---
      cropState: null,
@@ -954,6 +958,7 @@ export const useEditorStore = create<EditorState & EditorStateExtensions>()(
      setSelectionMode: (mode) => set({ selectionMode: mode }),
      setMagicWandTolerance: (v) => set({ magicWandTolerance: v }),
      setMagicWandContiguous: (v: boolean) => set({ magicWandContiguous: v }),
+      setSelectionFeather: (v) => set({ selectionFeather: v }),

      invertSelection: () => {
        const { selection, canvasSize } = get();
@@ -1067,6 +1072,8 @@ export const useEditorStore = create<EditorState & EditorStateExtensions>()(
      setBrushSize: (size) => set({ brushSize: Math.max(1, Math.min(MAX_BRUSH_SIZE, size)) }),
      setBrushOpacity: (opacity) => set({ brushOpacity: Math.max(0, Math.min(1, opacity)) }),
      setBrushHardness: (hardness) => set({ brushHardness: Math.max(0, Math.min(1, hardness)) }),
+      setBrushFlow: (flow) => set({ brushFlow: Math.max(0, Math.min(1, flow)) }),
+      setEraserMode: (mode) => set({ eraserMode: mode }),

      // Clipboard
      copyObjects: () => {
@@ -1,4 +1,5 @@
 import { create } from "zustand";
+import { createJSONStorage, persist } from "zustand/middleware";
 import { generateId } from "@/lib/utils";

 export interface PipelineStep {
@@ -30,51 +31,63 @@ interface PipelineState {
  reset: () => void;
 }

-export const usePipelineStore = create<PipelineState>((set, get) => ({
-  steps: [],
-  expandedStepId: null,
-  savedPipelines: [],
+export const usePipelineStore = create<PipelineState>()(
+  persist(
+    (set, get) => ({
+      steps: [],
+      expandedStepId: null,
+      savedPipelines: [],

-  addStep: (toolId) => {
-    const step: PipelineStep = { id: generateId(), toolId, settings: {} };
-    set({ steps: [...get().steps, step], expandedStepId: step.id });
-  },
+      addStep: (toolId) => {
+        const step: PipelineStep = { id: generateId(), toolId, settings: {} };
+        set({ steps: [...get().steps, step], expandedStepId: step.id });
+      },

-  removeStep: (id) => {
-    const { steps, expandedStepId } = get();
-    set({
-      steps: steps.filter((s) => s.id !== id),
-      expandedStepId: expandedStepId === id ? null : expandedStepId,
-    });
-  },
+      removeStep: (id) => {
+        const { steps, expandedStepId } = get();
+        set({
+          steps: steps.filter((s) => s.id !== id),
+          expandedStepId: expandedStepId === id ? null : expandedStepId,
+        });
+      },

-  reorderSteps: (activeId, overId) => {
-    const { steps } = get();
-    const oldIndex = steps.findIndex((s) => s.id === activeId);
-    const newIndex = steps.findIndex((s) => s.id === overId);
-    if (oldIndex < 0 || newIndex < 0) return;
-    const reordered = [...steps];
-    const [moved] = reordered.splice(oldIndex, 1);
-    reordered.splice(newIndex, 0, moved);
-    set({ steps: reordered });
-  },
+      reorderSteps: (activeId, overId) => {
+        const { steps } = get();
+        const oldIndex = steps.findIndex((s) => s.id === activeId);
+        const newIndex = steps.findIndex((s) => s.id === overId);
+        if (oldIndex < 0 || newIndex < 0) return;
+        const reordered = [...steps];
+        const [moved] = reordered.splice(oldIndex, 1);
+        reordered.splice(newIndex, 0, moved);
+        set({ steps: reordered });
+      },

-  updateStepSettings: (id, settings) => {
-    set({ steps: get().steps.map((s) => (s.id === id ? { ...s, settings } : s)) });
-  },
+      updateStepSettings: (id, settings) => {
+        set({ steps: get().steps.map((s) => (s.id === id ? { ...s, settings } : s)) });
+      },

-  setExpandedStep: (id) => set({ expandedStepId: id }),
+      setExpandedStep: (id) => set({ expandedStepId: id }),

-  loadSteps: (rawSteps) => {
-    const steps = rawSteps.map((s) => ({
-      id: generateId(),
-      toolId: s.toolId,
-      settings: { ...s.settings },
-    }));
-    set({ steps, expandedStepId: null });
-  },
+      loadSteps: (rawSteps) => {
+        const steps = rawSteps.map((s) => ({
+          id: generateId(),
+          toolId: s.toolId,
+          settings: { ...s.settings },
+        }));
+        set({ steps, expandedStepId: null });
+      },

-  setSavedPipelines: (pipelines) => set({ savedPipelines: pipelines }),
+      setSavedPipelines: (pipelines) => set({ savedPipelines: pipelines }),

-  reset: () => set({ steps: [], expandedStepId: null, savedPipelines: [] }),
-}));
+      reset: () => set({ steps: [], expandedStepId: null, savedPipelines: [] }),
+    }),
+    {
+      name: "snapotter-pipeline",
+      storage: createJSONStorage(() => sessionStorage),
+      partialize: (state) => ({
+        steps: state.steps,
+        expandedStepId: state.expandedStepId,
+      }),
+    },
+  ),
+);
@@ -1,5 +1,7 @@
 // apps/web/src/types/editor.ts

+export type EraserMode = "brush" | "block";
+
 export type SelectionMode = "new" | "add" | "subtract";

 export type StrokeDashStyle = "solid" | "dashed" | "dotted";
@@ -281,6 +283,8 @@ export interface EditorState {
  brushSize: number;
  brushOpacity: number;
  brushHardness: number;
+  brushFlow: number;
+  eraserMode: EraserMode;

  // Colors
  foregroundColor: string;
@@ -300,6 +304,7 @@ export interface EditorState {
  selectionMode: SelectionMode;
  magicWandTolerance: number;
  magicWandContiguous: boolean;
+  selectionFeather: number;

  // Crop
  cropState: CropState | null;
@@ -425,6 +430,7 @@ export interface EditorState {
  setSelectionMode: (mode: SelectionMode) => void;
  setMagicWandTolerance: (v: number) => void;
  setMagicWandContiguous: (v: boolean) => void;
+  setSelectionFeather: (v: number) => void;
  invertSelection: () => void;

  // Crop
@@ -435,6 +441,8 @@ export interface EditorState {
  setBrushSize: (size: number) => void;
  setBrushOpacity: (opacity: number) => void;
  setBrushHardness: (hardness: number) => void;
+  setBrushFlow: (flow: number) => void;
+  setEraserMode: (mode: EraserMode) => void;

  // Clipboard
  copyObjects: () => void;