feat: mobile-responsive settings dialog, homepage, nav, and toast

- Settings dialog: full-screen on mobile with horizontal pill nav, card-based user/team tables, compact audit log, stacked SettingRow - HomePage: stacked mobile layout with horizontal quick actions, tablet-friendly panel widths (w-64 lg:w-80) - Extract MobileBottomNav component with safe-area-inset padding - Add MobileBottomNav to fullscreen grid page - Larger touch targets on hamburger, sidebar close, bottom nav items - Toast repositioned to top-center on mobile (avoids bottom nav overlap) - PWA viewport-fit=cover for notch devices - Fix useMediaQuery null guard for test environment compatibility
2026-08-03 07:46:42 +02:00 · 2026-06-05 23:18:55 +08:00
parent 37f8ebcf66
commit d373ac83dc
9 changed files with 455 additions and 169 deletions
@@ -6,6 +6,7 @@ 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";

@@ -177,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);
@@ -217,7 +219,7 @@ export function App() {
    <ErrorBoundary>
      <I18nProvider>
        <ConnectionMonitor />
-        <Toaster position="bottom-right" />
+        <Toaster position={isMobile ? "top-center" : "bottom-right"} />
        <BrowserRouter>
          <KeyboardShortcutProvider>
            <AuthGuard>
@@ -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";
@@ -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>
-  );
-}
@@ -0,0 +1,54 @@
+import { FolderOpen, LayoutGrid, Settings as SettingsIcon, Workflow } from "lucide-react";
+import { Link } from "react-router-dom";
+import { useTranslation } from "@/contexts/i18n-context";
+import { ImageEditIcon } from "../common/image-edit-icon";
+
+interface MobileBottomNavProps {
+  onSettingsClick?: () => void;
+}
+
+export function MobileBottomNav({ onSettingsClick }: MobileBottomNavProps) {
+  const { t } = useTranslation();
+
+  return (
+    <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-2"
+      style={{ paddingBottom: "max(0.5rem, env(safe-area-inset-bottom))" }}
+    >
+      <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" />
+      {onSettingsClick && (
+        <button
+          type="button"
+          onClick={onSettingsClick}
+          className="flex flex-col items-center gap-0.5 px-3 py-2 text-muted-foreground"
+        >
+          <SettingsIcon className="h-6 w-6" />
+          <span className="text-[10px]">{t.appLayout.mobileNavSettings}</span>
+        </button>
+      )}
+    </nav>
+  );
+}
+
+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-2 text-muted-foreground hover:text-foreground transition-colors"
+    >
+      <Icon className="h-6 w-6" />
+      <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 */}
@@ -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);

@@ -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>
      )}

@@ -2758,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>
  );
 }
@@ -9,12 +9,13 @@ const MOBILE_BREAKPOINT = 768;
 export function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState(() => {
    if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
-    return window.matchMedia(query).matches;
+    return window.matchMedia(query)?.matches ?? false;
  });

  useEffect(() => {
    if (typeof window.matchMedia !== "function") return;
    const mq = window.matchMedia(query);
+    if (!mq) return;
    const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
    mq.addEventListener("change", handler);
    setMatches(mq.matches);
@@ -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,7 +9,7 @@ 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";
@@ -347,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>
    );