External/SnapOtter
1
0
Fork 0
mirror of https://github.com/snapotter-hq/SnapOtter.git synced 2026-08-03 07:46:42 +02:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
- 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
This commit is contained in:
SnapOtter
2026-06-05 23:18:55 +08:00
parent 37f8ebcf66
commit d373ac83dc
9 changed files with 455 additions and 169 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/index.html
+1 -1
View File
@@ -2,7 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
<title>SnapOtter</title> <title>SnapOtter</title>
<meta name="description" content="Open-source, self-hosted image processing platform" /> <meta name="description" content="Open-source, self-hosted image processing platform" />
<meta name="theme-color" content="#3b82f6" /> <meta name="theme-color" content="#3b82f6" />
apps/web/src/App.tsx
+3 -1
View File
@@ -6,6 +6,7 @@ import { ConnectionMonitor } from "./components/common/connection-monitor";
import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider"; import { KeyboardShortcutProvider } from "./components/common/keyboard-shortcut-provider";
import { I18nProvider } from "./contexts/i18n-context"; import { I18nProvider } from "./contexts/i18n-context";
import { useAuth } from "./hooks/use-auth"; import { useAuth } from "./hooks/use-auth";
import { useMobile } from "./hooks/use-mobile";
import { identify, initAnalytics, setAnalyticsConsent } from "./lib/analytics"; import { identify, initAnalytics, setAnalyticsConsent } from "./lib/analytics";
import { useAnalyticsStore } from "./stores/analytics-store"; import { useAnalyticsStore } from "./stores/analytics-store";
@@ -177,6 +178,7 @@ function PageLoader() {
} }
export function App() { export function App() {
const isMobile = useMobile();
const analyticsConfig = useAnalyticsStore((s) => s.config); const analyticsConfig = useAnalyticsStore((s) => s.config);
const analyticsConfigLoaded = useAnalyticsStore((s) => s.configLoaded); const analyticsConfigLoaded = useAnalyticsStore((s) => s.configLoaded);
const fetchAnalyticsConfig = useAnalyticsStore((s) => s.fetchConfig); const fetchAnalyticsConfig = useAnalyticsStore((s) => s.fetchConfig);
@@ -217,7 +219,7 @@ export function App() {
<ErrorBoundary> <ErrorBoundary>
<I18nProvider> <I18nProvider>
<ConnectionMonitor /> <ConnectionMonitor />
<Toaster position="bottom-right" /> <Toaster position={isMobile ? "top-center" : "bottom-right"} />
<BrowserRouter> <BrowserRouter>
<KeyboardShortcutProvider> <KeyboardShortcutProvider>
<AuthGuard> <AuthGuard>
apps/web/src/components/layout/app-layout.tsx
+8 -52
View File
@@ -1,25 +1,16 @@
import { import { Globe, Menu, X } from "lucide-react";
FolderOpen,
Globe,
LayoutGrid,
Menu,
Settings as SettingsIcon,
Workflow,
X,
} from "lucide-react";
import { useState } from "react"; import { useState } from "react";
import { Link } from "react-router-dom";
import { useTranslation } from "@/contexts/i18n-context"; import { useTranslation } from "@/contexts/i18n-context";
import { useMobile } from "@/hooks/use-mobile"; import { useMobile } from "@/hooks/use-mobile";
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { useConnectionStore } from "@/stores/connection-store"; import { useConnectionStore } from "@/stores/connection-store";
import { Dropzone } from "../common/dropzone"; import { Dropzone } from "../common/dropzone";
import { ImageEditIcon } from "../common/image-edit-icon";
import { OtterLogo } from "../common/otter-logo"; import { OtterLogo } from "../common/otter-logo";
import { HelpDialog } from "../help/help-dialog"; import { HelpDialog } from "../help/help-dialog";
import { SettingsDialog } from "../settings/settings-dialog"; import { SettingsDialog } from "../settings/settings-dialog";
import { AiInstallIndicator } from "./ai-install-indicator"; import { AiInstallIndicator } from "./ai-install-indicator";
import { Footer } from "./footer"; import { Footer } from "./footer";
import { MobileBottomNav } from "./mobile-bottom-nav";
import { Sidebar } from "./sidebar"; import { Sidebar } from "./sidebar";
import { ToolPanel } from "./tool-panel"; import { ToolPanel } from "./tool-panel";
@@ -39,7 +30,7 @@ export function AppLayout({
const [settingsOpen, setSettingsOpen] = useState(false); const [settingsOpen, setSettingsOpen] = useState(false);
const [helpOpen, setHelpOpen] = useState(false); const [helpOpen, setHelpOpen] = useState(false);
const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false); const [mobileSidebarOpen, setMobileSidebarOpen] = useState(false);
const { t, locale, setLocale, supportedLocales } = useTranslation(); const { locale, setLocale, supportedLocales } = useTranslation();
const isMobile = useMobile(); const isMobile = useMobile();
const connectionStatus = useConnectionStore((s) => s.status); const connectionStatus = useConnectionStore((s) => s.status);
const bannerVisible = connectionStatus !== "connected"; const bannerVisible = connectionStatus !== "connected";
@@ -78,9 +69,9 @@ export function AppLayout({
<button <button
type="button" type="button"
onClick={() => setMobileSidebarOpen(false)} 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> </button>
</div> </div>
<Sidebar <Sidebar
@@ -126,7 +117,7 @@ export function AppLayout({
<button <button
type="button" type="button"
onClick={() => setMobileSidebarOpen(true)} 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" /> <Menu className="h-5 w-5" />
</button> </button>
@@ -141,7 +132,7 @@ export function AppLayout({
{showToolPanel && !isMobile && <ToolPanel />} {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"> <div className="flex-1 overflow-y-auto p-6 flex items-center justify-center">
{children || <Dropzone onFiles={onFiles} onUrlImport={onUrlImport} accept="image/*" />} {children || <Dropzone onFiles={onFiles} onUrlImport={onUrlImport} accept="image/*" />}
</div> </div>
@@ -150,22 +141,7 @@ export function AppLayout({
{!isMobile && <Footer />} {!isMobile && <Footer />}
{/* Mobile bottom nav */} {/* Mobile bottom nav */}
{isMobile && ( {isMobile && <MobileBottomNav onSettingsClick={() => setSettingsOpen(true)} />}
<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>
)}
{/* Settings dialog */} {/* Settings dialog */}
<SettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} /> <SettingsDialog open={settingsOpen} onClose={() => setSettingsOpen(false)} />
@@ -178,23 +154,3 @@ export function AppLayout({
</div> </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>
);
}
apps/web/src/components/layout/mobile-bottom-nav.tsx
+54
View File
@@ -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>
);
}
apps/web/src/components/settings/settings-dialog.tsx
+285 -108
View File
@@ -29,6 +29,7 @@ import {
import { Fragment, useCallback, useEffect, useMemo, useState } from "react"; import { Fragment, useCallback, useEffect, useMemo, useState } from "react";
import { useTranslation } from "@/contexts/i18n-context"; import { useTranslation } from "@/contexts/i18n-context";
import { useAuth } from "@/hooks/use-auth"; import { useAuth } from "@/hooks/use-auth";
import { useMobile } from "@/hooks/use-mobile";
import { apiDelete, apiGet, apiPost, apiPut, clearToken, formatHeaders } from "@/lib/api"; import { apiDelete, apiGet, apiPost, apiPut, clearToken, formatHeaders } from "@/lib/api";
import { format, plural } from "@/lib/format"; import { format, plural } from "@/lib/format";
import { getCategoryName, getToolDescription, getToolName } from "@/lib/tool-i18n"; 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 [section, setSection] = useState<Section>("general");
const { hasPermission, authEnabled } = useAuth(); const { hasPermission, authEnabled } = useAuth();
const { t } = useTranslation(); const { t } = useTranslation();
const isMobile = useMobile();
const NAV_ITEMS = useNavItems(); const NAV_ITEMS = useNavItems();
const visibleNavItems = NAV_ITEMS.filter( const visibleNavItems = NAV_ITEMS.filter(
@@ -144,6 +146,60 @@ export function SettingsDialog({ open, onClose }: SettingsDialogProps) {
if (!open) return null; 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 ( return (
<div className="fixed inset-0 z-50 flex items-center justify-center"> <div className="fixed inset-0 z-50 flex items-center justify-center">
{/* Backdrop */} {/* Backdrop */}
@@ -249,7 +305,7 @@ interface UserEntry {
} }
interface TeamEntry { interface TeamEntry {
id: number; id: string;
name: string; name: string;
memberCount: number; memberCount: number;
createdAt: string; createdAt: string;
@@ -624,6 +680,7 @@ function SecuritySection() {
const [confirmPassword, setConfirmPassword] = useState(""); const [confirmPassword, setConfirmPassword] = useState("");
const [showCurrent, setShowCurrent] = useState(false); const [showCurrent, setShowCurrent] = useState(false);
const [showNew, setShowNew] = useState(false); const [showNew, setShowNew] = useState(false);
const [showConfirm, setShowConfirm] = useState(false);
const [submitting, setSubmitting] = useState(false); const [submitting, setSubmitting] = useState(false);
const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null); const [message, setMessage] = useState<{ type: "success" | "error"; text: string } | null>(null);
@@ -709,14 +766,24 @@ function SecuritySection() {
</button> </button>
</div> </div>
<input <div className="relative">
type="password" <input
value={confirmPassword} type={showConfirm ? "text" : "password"}
onChange={(e) => setConfirmPassword(e.target.value)} value={confirmPassword}
placeholder={t.settings.security.confirmPasswordPlaceholder} onChange={(e) => setConfirmPassword(e.target.value)}
className="w-full px-3 py-2 rounded-lg border border-border bg-background text-sm text-foreground" placeholder={t.settings.security.confirmPasswordPlaceholder}
required 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 && ( {message && (
<p <p
@@ -778,6 +845,7 @@ function generatePassword(): string {
function PeopleSection() { function PeopleSection() {
const { t } = useTranslation(); const { t } = useTranslation();
const isMobile = useMobile();
const [users, setUsers] = useState<UserEntry[]>([]); const [users, setUsers] = useState<UserEntry[]>([]);
const [maxUsers, setMaxUsers] = useState(5); const [maxUsers, setMaxUsers] = useState(5);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
@@ -1029,7 +1097,7 @@ function PeopleSection() {
<h4 className="text-sm font-medium text-foreground"> <h4 className="text-sm font-medium text-foreground">
{t.settings.people.newMemberHeading} {t.settings.people.newMemberHeading}
</h4> </h4>
<div className="grid grid-cols-2 gap-3"> <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
<input <input
type="text" type="text"
value={newUsername} value={newUsername}
@@ -1260,13 +1328,15 @@ function PeopleSection() {
{/* Users table */} {/* Users table */}
<div className="border border-border rounded-lg"> <div className="border border-border rounded-lg">
{/* Table header */} {/* Table header (desktop only) */}
<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"> {!isMobile && (
<span>{t.settings.people.tableHeaderUser}</span> <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.tableHeaderRole}</span> <span>{t.settings.people.tableHeaderUser}</span>
<span>{t.settings.people.tableHeaderTeam}</span> <span>{t.settings.people.tableHeaderRole}</span>
<span /> <span>{t.settings.people.tableHeaderTeam}</span>
</div> <span />
</div>
)}
{/* Table rows */} {/* Table rows */}
{filteredUsers.length === 0 ? ( {filteredUsers.length === 0 ? (
@@ -1277,45 +1347,91 @@ function PeopleSection() {
filteredUsers.map((u) => ( filteredUsers.map((u) => (
<div <div
key={u.id} 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 */} {isMobile ? (
<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"> {/* Mobile card layout */}
{u.username.charAt(0).toUpperCase()} <div className="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary font-semibold text-sm shrink-0">
</div> {u.username.charAt(0).toUpperCase()}
<span className="text-sm font-medium text-foreground truncate">{u.username}</span> </div>
{u.hasOidcLink && u.hasLocalPassword !== false && ( <div className="flex-1 min-w-0">
<span className="ms-1.5 text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground"> <div className="flex items-center gap-1.5">
{t.auth.methodBoth} <span className="text-sm font-medium text-foreground truncate">
</span> {u.username}
)} </span>
{u.hasOidcLink && u.hasLocalPassword === false && ( {u.hasOidcLink && u.hasLocalPassword !== false && (
<span className="ms-1.5 text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground"> <span className="text-[10px] px-1.5 py-0.5 rounded bg-muted text-muted-foreground">
{t.auth.methodOidc} {t.auth.methodBoth}
</span> </span>
)} )}
</div> {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 */} {/* Role badge */}
<div> <div>
<span <span
className={cn( className={cn(
"inline-block px-2 py-0.5 rounded text-xs font-semibold uppercase tracking-wide", "inline-block px-2 py-0.5 rounded text-xs font-semibold uppercase tracking-wide",
u.role === "admin" u.role === "admin"
? "bg-primary/15 text-primary" ? "bg-primary/15 text-primary"
: "bg-muted text-muted-foreground", : "bg-muted text-muted-foreground",
)} )}
> >
{u.role} {u.role}
</span> </span>
</div> </div>
{/* Team */} {/* Team */}
<span className="text-sm text-foreground truncate">{u.team}</span> <span className="text-sm text-foreground truncate">{u.team}</span>
</>
)}
{/* Actions */} {/* Actions */}
<div className="flex items-center gap-1 justify-end relative"> <div className="flex items-center gap-1 justify-end relative shrink-0">
<button <button
type="button" type="button"
onClick={(e) => { onClick={(e) => {
@@ -1621,14 +1737,15 @@ function ApiKeysSection() {
function TeamsSection() { function TeamsSection() {
const { t } = useTranslation(); const { t } = useTranslation();
const isMobile = useMobile();
const [teams, setTeams] = useState<TeamEntry[]>([]); const [teams, setTeams] = useState<TeamEntry[]>([]);
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
const [showCreateForm, setShowCreateForm] = useState(false); const [showCreateForm, setShowCreateForm] = useState(false);
const [newTeamName, setNewTeamName] = useState(""); const [newTeamName, setNewTeamName] = useState("");
const [creating, setCreating] = useState(false); const [creating, setCreating] = useState(false);
const [editingTeamId, setEditingTeamId] = useState<number | null>(null); const [editingTeamId, setEditingTeamId] = useState<string | null>(null);
const [editingTeamName, setEditingTeamName] = useState(""); 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>( const [actionMsg, setActionMsg] = useState<{ type: "success" | "error"; text: string } | null>(
null, null,
); );
@@ -1682,7 +1799,7 @@ function TeamsSection() {
); );
const handleRename = useCallback( const handleRename = useCallback(
async (id: number) => { async (id: string) => {
if (!editingTeamName.trim()) return; if (!editingTeamName.trim()) return;
try { try {
await apiPut(`/v1/teams/${id}`, { name: editingTeamName.trim() }); await apiPut(`/v1/teams/${id}`, { name: editingTeamName.trim() });
@@ -1700,7 +1817,7 @@ function TeamsSection() {
); );
const handleDelete = useCallback( const handleDelete = useCallback(
async (id: number, name: string) => { async (id: string, name: string) => {
if (!confirm(format(t.settings.teams.deleteConfirm, { name }))) return; if (!confirm(format(t.settings.teams.deleteConfirm, { name }))) return;
try { try {
await apiDelete(`/v1/teams/${id}`); await apiDelete(`/v1/teams/${id}`);
@@ -1793,11 +1910,14 @@ function TeamsSection() {
)} )}
<div className="border border-border rounded-lg"> <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"> {/* Table header (desktop only) */}
<span>{t.settings.teams.tableHeaderTeamName}</span> {!isMobile && (
<span>{t.settings.teams.totalMembers}</span> <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 /> <span>{t.settings.teams.tableHeaderTeamName}</span>
</div> <span>{t.settings.teams.totalMembers}</span>
<span />
</div>
)}
{teams.length === 0 ? ( {teams.length === 0 ? (
<div className="px-4 py-8 text-center text-sm text-muted-foreground rounded-b-lg"> <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) => ( teams.map((tm) => (
<div <div
key={tm.id} 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 ? ( {editingTeamId === tm.id ? (
<div className="flex items-center gap-2"> <div className="flex items-center gap-2">
<input <input
@@ -1839,11 +1962,20 @@ function TeamsSection() {
</button> </button>
</div> </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> </div>
<span className="text-sm text-muted-foreground">{tm.memberCount}</span> {!isMobile && <span className="text-sm text-muted-foreground">{tm.memberCount}</span>}
<div className="flex items-center gap-1 justify-end relative"> <div className="flex items-center gap-1 justify-end relative shrink-0">
<button <button
type="button" type="button"
onClick={(e) => { onClick={(e) => {
@@ -2304,6 +2436,7 @@ function formatRelativeTime(iso: string): string {
function AuditLogSection() { function AuditLogSection() {
const { t } = useTranslation(); const { t } = useTranslation();
const isMobile = useMobile();
const [entries, setEntries] = useState<AuditEntry[]>([]); const [entries, setEntries] = useState<AuditEntry[]>([]);
const [total, setTotal] = useState(0); const [total, setTotal] = useState(0);
const [page, setPage] = useState(1); const [page, setPage] = useState(1);
@@ -2369,58 +2502,96 @@ function AuditLogSection() {
</p> </p>
) : ( ) : (
<div className="border border-border rounded-lg overflow-hidden"> <div className="border border-border rounded-lg overflow-hidden">
<table className="w-full text-sm"> {isMobile ? (
<thead> <div className="divide-y divide-border">
<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) => ( {entries.map((entry) => (
<Fragment key={entry.id}> <Fragment key={entry.id}>
<tr <div
className="border-b border-border last:border-0 hover:bg-muted/20 cursor-pointer transition-colors" className="px-3 py-2.5 hover:bg-muted/20 cursor-pointer transition-colors"
onClick={() => setExpandedId(expandedId === entry.id ? null : entry.id)} onClick={() => setExpandedId(expandedId === entry.id ? null : entry.id)}
> >
<td className="px-3 py-2 text-muted-foreground whitespace-nowrap"> <div className="flex items-center justify-between gap-2">
{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"> <span className="font-mono text-xs bg-muted px-1.5 py-0.5 rounded">
{entry.action} {entry.action}
</span> </span>
</td> <span className="text-xs text-muted-foreground whitespace-nowrap">
<td className="px-3 py-2 text-muted-foreground"> {formatRelativeTime(entry.createdAt)}
{entry.targetType </span>
? `${entry.targetType}${entry.targetId ? ` #${entry.targetId}` : ""}` </div>
: "—"} <div className="flex items-center gap-2 mt-1">
</td> <span className="text-sm text-foreground">{entry.actorUsername}</span>
</tr> {entry.targetType && (
<span className="text-xs text-muted-foreground">
{entry.targetType}
{entry.targetId ? ` #${entry.targetId}` : ""}
</span>
)}
</div>
</div>
{expandedId === entry.id && entry.details && ( {expandedId === entry.id && entry.details && (
<tr className="border-b border-border last:border-0"> <div className="px-3 py-2 bg-muted/10">
<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">
<pre className="text-xs text-muted-foreground whitespace-pre-wrap font-mono overflow-x-auto"> {JSON.stringify(entry.details, null, 2)}
{JSON.stringify(entry.details, null, 2)} </pre>
</pre> </div>
</td>
</tr>
)} )}
</Fragment> </Fragment>
))} ))}
</tbody> </div>
</table> ) : (
<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> </div>
)} )}
@@ -2758,13 +2929,19 @@ function SettingRow({
description: string; description: string;
children: React.ReactNode; children: React.ReactNode;
}) { }) {
const isMobile = useMobile();
return ( 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> <div>
<p className="text-sm font-medium text-foreground">{label}</p> <p className="text-sm font-medium text-foreground">{label}</p>
<p className="text-xs text-muted-foreground">{description}</p> <p className="text-xs text-muted-foreground">{description}</p>
</div> </div>
<div className="shrink-0 ms-4">{children}</div> <div className={cn(!isMobile && "shrink-0 ms-4")}>{children}</div>
</div> </div>
); );
} }
apps/web/src/hooks/use-mobile.ts
+2 -1
View File
@@ -9,12 +9,13 @@ const MOBILE_BREAKPOINT = 768;
export function useMediaQuery(query: string): boolean { export function useMediaQuery(query: string): boolean {
const [matches, setMatches] = useState(() => { const [matches, setMatches] = useState(() => {
if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false; if (typeof window === "undefined" || typeof window.matchMedia !== "function") return false;
return window.matchMedia(query).matches; return window.matchMedia(query)?.matches ?? false;
}); });
useEffect(() => { useEffect(() => {
if (typeof window.matchMedia !== "function") return; if (typeof window.matchMedia !== "function") return;
const mq = window.matchMedia(query); const mq = window.matchMedia(query);
if (!mq) return;
const handler = (e: MediaQueryListEvent) => setMatches(e.matches); const handler = (e: MediaQueryListEvent) => setMatches(e.matches);
mq.addEventListener("change", handler); mq.addEventListener("change", handler);
setMatches(mq.matches); setMatches(mq.matches);
apps/web/src/pages/fullscreen-grid-page.tsx
+5 -1
View File
@@ -4,7 +4,9 @@ import { Eye, EyeOff, FileImage, LayoutGrid, List, Search } from "lucide-react";
import { useEffect, useMemo, useState } from "react"; import { useEffect, useMemo, useState } from "react";
import { Link, useNavigate } from "react-router-dom"; import { Link, useNavigate } from "react-router-dom";
import { OtterLogo } from "@/components/common/otter-logo"; import { OtterLogo } from "@/components/common/otter-logo";
import { MobileBottomNav } from "@/components/layout/mobile-bottom-nav";
import { useTranslation } from "@/contexts/i18n-context"; import { useTranslation } from "@/contexts/i18n-context";
import { useMobile } from "@/hooks/use-mobile";
import { track } from "@/lib/analytics"; import { track } from "@/lib/analytics";
import { apiGet } from "@/lib/api"; import { apiGet } from "@/lib/api";
import { ICON_MAP } from "@/lib/icon-map"; import { ICON_MAP } from "@/lib/icon-map";
@@ -14,6 +16,7 @@ import { useFeaturesStore } from "@/stores/features-store";
export function FullscreenGridPage() { export function FullscreenGridPage() {
const { t } = useTranslation(); const { t } = useTranslation();
const isMobile = useMobile();
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const [showDetails, setShowDetails] = useState(true); const [showDetails, setShowDetails] = useState(true);
const navigate = useNavigate(); const navigate = useNavigate();
@@ -79,7 +82,7 @@ export function FullscreenGridPage() {
const activeCategories = CATEGORIES.filter((cat) => groupedTools.has(cat.id)); const activeCategories = CATEGORIES.filter((cat) => groupedTools.has(cat.id));
return ( 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 */} {/* Top bar */}
<header className="sticky top-0 z-30 bg-background/95 backdrop-blur-sm border-b border-border"> <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"> <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> </div>
)} )}
</main> </main>
{isMobile && <MobileBottomNav />}
</div> </div>
); );
} }
apps/web/src/pages/home-page.tsx
+88 -2
View File
@@ -6,6 +6,7 @@ import { ImageViewer } from "@/components/common/image-viewer";
import { MultiImageViewer } from "@/components/common/multi-image-viewer"; import { MultiImageViewer } from "@/components/common/multi-image-viewer";
import { AppLayout } from "@/components/layout/app-layout"; import { AppLayout } from "@/components/layout/app-layout";
import { useTranslation } from "@/contexts/i18n-context"; import { useTranslation } from "@/contexts/i18n-context";
import { useMobile } from "@/hooks/use-mobile";
import { ICON_MAP } from "@/lib/icon-map"; import { ICON_MAP } from "@/lib/icon-map";
import { getCategoryName, getToolName } from "@/lib/tool-i18n"; import { getCategoryName, getToolName } from "@/lib/tool-i18n";
import { useFeaturesStore } from "@/stores/features-store"; import { useFeaturesStore } from "@/stores/features-store";
@@ -32,6 +33,7 @@ export function HomePage() {
const location = useLocation(); const location = useLocation();
const { fetch: fetchSettings, defaultToolView, loaded: settingsLoaded } = useSettingsStore(); const { fetch: fetchSettings, defaultToolView, loaded: settingsLoaded } = useSettingsStore();
const { fetch: fetchFeatures, bundles, installing, queued } = useFeaturesStore(); const { fetch: fetchFeatures, bundles, installing, queued } = useFeaturesStore();
const isMobile = useMobile();
useEffect(() => { useEffect(() => {
if (location.state?.fromLibrary) { if (location.state?.fromLibrary) {
@@ -93,12 +95,96 @@ export function HomePage() {
return <AppLayout onFiles={handleFiles} onUrlImport={handleUrlImport} />; 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 ( return (
<AppLayout showToolPanel={false} onFiles={handleFiles}> <AppLayout showToolPanel={false} onFiles={handleFiles}>
<div className="flex h-full w-full"> <div className="flex h-full w-full">
{/* Left panel: Tool selector */} {/* 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 */} {/* File info */}
<div className="p-4 border-b border-border"> <div className="p-4 border-b border-border">
<div className="flex items-center gap-2 text-sm"> <div className="flex items-center gap-2 text-sm">
apps/web/src/pages/tool-page.tsx
+9 -3
View File
@@ -9,7 +9,7 @@ import {
} from "lucide-react"; } from "lucide-react";
import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react"; import { Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
import type { Crop } from "react-image-crop"; 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 { BeforeAfterSlider } from "@/components/common/before-after-slider";
import { BottomSheet } from "@/components/common/bottom-sheet"; import { BottomSheet } from "@/components/common/bottom-sheet";
import { Dropzone } from "@/components/common/dropzone"; import { Dropzone } from "@/components/common/dropzone";
@@ -347,8 +347,14 @@ export function ToolPage() {
if (!tool || !registryEntry) { if (!tool || !registryEntry) {
return ( return (
<AppLayout> <AppLayout>
<div className="flex items-center justify-center h-full text-muted-foreground"> <div className="flex flex-col items-center justify-center h-full gap-4 text-muted-foreground">
{t.toolPage.notFound} <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> </div>
</AppLayout> </AppLayout>
); );