From 089c114019e192e2a0cd4c6e3d24319676d78e7e Mon Sep 17 00:00:00 2001
From: Amir Husayn Panahifar <ahp@panahifar.ir>
Date: Sun, 18 Oct 2026 10:51:37 +0330
Subject: [PATCH] =?UTF-8?q?feat:=20mobile-first=20responsive=20overhaul=20?=
 =?UTF-8?q?=E2=80=94=20safe=20areas,=20touch=20targets,=20bottom=20sheet,?=
 =?UTF-8?q?=20bottom=20nav?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Viewport:
- Add `viewport` export with `viewport-fit=cover` (enables CSS safe-area-inset-*
  on bezel-less iOS/Android) and `interactive-widget=resizes-content` (prevents
  layout jumps from virtual keyboard open/close)

iOS zoom prevention:
- input.tsx, textarea.tsx: change text-sm (14px) → text-base sm:text-sm (16px)
  on mobile; iOS Safari auto-zooms any input with font-size < 16px

Touch targets:
- button.tsx: default h-10 → h-11 (44px), sm h-8 → h-9 (36px), icon h-10→h-11
  matching the 44×44px iOS HIG and WCAG 2.5.5 minimum
- Add touch-manipulation to buttons, inputs, textarea to eliminate 300ms tap delay

Dialog → mobile bottom sheet:
- On mobile (< 640px): anchored to bottom with full width, rounded top corners,
  slide-in-from-bottom / slide-out-to-bottom animation, drag handle affordance,
  max-h-[90svh] + overflow-y-auto to prevent viewport overflow
- Safe area padding: pb-[max(1.25rem,env(safe-area-inset-bottom))]
- On desktop (sm+): unchanged centered modal with zoom animation
- Close button gets a 32×32 tap area on mobile

Mobile navigation:
- New bottom-nav.tsx: persistent 3-tab bottom bar (مسیر/مرکز/لیگ) shown below
  md: breakpoint, hidden on desktop; 56px height + safe-area-inset-bottom;
  active tab gets heavier stroke and scale
- Only shown for authenticated non-admin users
- app-shell.tsx: injects BottomNav; main content gets dynamic padding-bottom to
  clear the bar (56px + safe area) on mobile, reverts to py-10 on md:
- Footer: safe-area-inset-bottom padding so content clears iPhone home indicator

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 frontend/src/app/layout.tsx             |  9 ++++-
 frontend/src/components/app-shell.tsx   | 13 +++++--
 frontend/src/components/bottom-nav.tsx  | 47 +++++++++++++++++++++++++
 frontend/src/components/ui/button.tsx   |  8 ++---
 frontend/src/components/ui/dialog.tsx   | 17 +++++++--
 frontend/src/components/ui/input.tsx    |  3 +-
 frontend/src/components/ui/textarea.tsx |  3 +-
 7 files changed, 89 insertions(+), 11 deletions(-)
 create mode 100644 frontend/src/components/bottom-nav.tsx

diff --git a/frontend/src/app/layout.tsx b/frontend/src/app/layout.tsx
index dd4fe69..109e9c9 100644
--- a/frontend/src/app/layout.tsx
+++ b/frontend/src/app/layout.tsx
@@ -1,4 +1,4 @@
-import type { Metadata } from "next";
+import type { Metadata, Viewport } from "next";
 import localFont from "next/font/local";
 import "./globals.css";
 import { Providers } from "@/components/providers";
@@ -37,6 +37,13 @@ export const metadata: Metadata = {
   description: "مسیر یادگیری واقعی پرگار",
 };
 
+export const viewport: Viewport = {
+  width: "device-width",
+  initialScale: 1,
+  viewportFit: "cover",
+  interactiveWidget: "resizes-content",
+};
+
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html
diff --git a/frontend/src/components/app-shell.tsx b/frontend/src/components/app-shell.tsx
index b5ed2bc..540ae15 100644
--- a/frontend/src/components/app-shell.tsx
+++ b/frontend/src/components/app-shell.tsx
@@ -10,6 +10,7 @@ import { useAuth, useAuthHydrated } from "@/lib/auth-store";
 import { http } from "@/lib/api";
 import type { User } from "@/lib/types";
 import { hasInfiniteHearts } from "@/lib/hearts";
+import { BottomNav } from "@/components/bottom-nav";
 
 function SiteFooter() {
   return (
@@ -147,13 +148,21 @@ export function AppShell({ children }: { children: React.ReactNode }) {
           </button>
         </div>
       )}
-      <main className="mx-auto w-full max-w-6xl flex-1 px-4 py-10 sm:px-6">
+      <main
+        className="mx-auto w-full max-w-6xl flex-1 px-4 py-10 sm:px-6 md:pb-10"
+        // Bottom nav is 56px + safe area; only shown for authed non-admin on mobile
+        style={user && !pathname.startsWith("/admin") ? { paddingBottom: "calc(4.5rem + env(safe-area-inset-bottom, 0px))" } : undefined}
+      >
         {allowChildren ? children : null}
       </main>
-      <footer className="border-t border-border/70 bg-muted/20 backdrop-blur">
+      <footer
+        className="border-t border-border/70 bg-muted/20 backdrop-blur"
+        style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }}
+      >
         <SiteFooter />
       </footer>
       {user && <ChatWidget />}
+      {user && !pathname.startsWith("/admin") && <BottomNav />}
     </div>
   );
 }
diff --git a/frontend/src/components/bottom-nav.tsx b/frontend/src/components/bottom-nav.tsx
new file mode 100644
index 0000000..0cb31f7
--- /dev/null
+++ b/frontend/src/components/bottom-nav.tsx
@@ -0,0 +1,47 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import { LayoutGrid, Trophy, TreePine } from "lucide-react";
+import { cn } from "@/lib/utils";
+
+const items = [
+  { href: "/cap", label: "مسیر", icon: TreePine },
+  { href: "/unwrap", label: "مرکز", icon: LayoutGrid },
+  { href: "/leaderboard", label: "لیگ", icon: Trophy },
+];
+
+export function BottomNav() {
+  const pathname = usePathname();
+  return (
+    <nav
+      className="fixed inset-x-0 bottom-0 z-40 border-t border-border bg-card/95 backdrop-blur md:hidden"
+      style={{ paddingBottom: "env(safe-area-inset-bottom, 0px)" }}
+    >
+      <div className="flex">
+        {items.map(({ href, label, icon: Icon }) => {
+          const active = pathname === href || pathname.startsWith(href + "/");
+          return (
+            <Link
+              key={href}
+              href={href}
+              className={cn(
+                "flex flex-1 flex-col items-center justify-center gap-0.5 py-2 text-[11px] font-bold transition-colors min-h-[56px] touch-manipulation",
+                active ? "text-primary" : "text-muted-foreground",
+              )}
+            >
+              <Icon
+                className={cn(
+                  "h-5 w-5 transition-transform",
+                  active && "scale-110",
+                )}
+                strokeWidth={active ? 2.5 : 2}
+              />
+              {label}
+            </Link>
+          );
+        })}
+      </div>
+    </nav>
+  );
+}
diff --git a/frontend/src/components/ui/button.tsx b/frontend/src/components/ui/button.tsx
index efe0f41..8f25da0 100644
--- a/frontend/src/components/ui/button.tsx
+++ b/frontend/src/components/ui/button.tsx
@@ -4,7 +4,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-sans text-sm font-bold transition-all duration-300 ease-[var(--ease-soft)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer select-none active:translate-y-px active:shadow-none",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg border font-sans text-sm font-bold transition-all duration-300 ease-[var(--ease-soft)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 cursor-pointer select-none active:translate-y-px active:shadow-none touch-manipulation",
   {
     variants: {
       variant: {
@@ -18,10 +18,10 @@ const buttonVariants = cva(
         link: "border-transparent text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-10 rounded-lg px-4 py-2",
-        sm: "h-8 rounded-lg px-3 text-xs",
+        default: "h-11 rounded-lg px-4 py-2",
+        sm: "h-9 rounded-lg px-3 text-xs",
         lg: "h-[3.25rem] rounded-2xl px-7 text-base",
-        icon: "h-10 w-10 rounded-xl",
+        icon: "h-11 w-11 rounded-xl",
       },
     },
     defaultVariants: { variant: "default", size: "default" },
diff --git a/frontend/src/components/ui/dialog.tsx b/frontend/src/components/ui/dialog.tsx
index 9780f34..23c2ff8 100644
--- a/frontend/src/components/ui/dialog.tsx
+++ b/frontend/src/components/ui/dialog.tsx
@@ -34,13 +34,26 @@ const DialogContent = React.forwardRef<
     <DialogPrimitive.Content
       ref={ref}
       className={cn(
-        "fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border border-border bg-popover p-6 shadow-md rounded-md duration-300 sm:max-w-lg data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95",
+        // Base (mobile-first): full-width bottom sheet with safe-area clearance
+        "fixed bottom-0 left-0 right-0 z-50 grid w-full max-w-none gap-4 border border-border bg-popover shadow-md duration-300",
+        "rounded-t-2xl rounded-b-none p-5 pb-[max(1.25rem,env(safe-area-inset-bottom))]",
+        "max-h-[90svh] overflow-y-auto",
+        "translate-x-0 translate-y-0",
+        "data-[state=open]:animate-in data-[state=open]:slide-in-from-bottom-4",
+        "data-[state=closed]:animate-out data-[state=closed]:slide-out-to-bottom-full",
+        // Desktop (sm+): centered modal
+        "sm:bottom-auto sm:left-1/2 sm:right-auto sm:top-1/2 sm:max-w-lg sm:max-h-[calc(100svh-4rem)] sm:rounded-md sm:p-6",
+        "sm:-translate-x-1/2 sm:-translate-y-1/2",
+        "sm:data-[state=open]:zoom-in-95 sm:data-[state=closed]:zoom-out-95",
+        "sm:data-[state=open]:fade-in-0 sm:data-[state=closed]:fade-out-0",
         className
       )}
       {...props}
     >
+      {/* Mobile drag handle affordance */}
+      <span className="mx-auto -mt-1 mb-2 block h-1.5 w-10 shrink-0 rounded-full bg-muted-foreground/20 sm:hidden" aria-hidden />
       {children}
-      <DialogPrimitive.Close className="absolute end-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none">
+      <DialogPrimitive.Close className="absolute end-4 top-4 grid h-8 w-8 place-items-center rounded-full opacity-70 transition-opacity hover:opacity-100 focus:outline-none sm:h-auto sm:w-auto sm:rounded-sm">
         <X className="h-4 w-4" />
         <span className="sr-only">بستن</span>
       </DialogPrimitive.Close>
diff --git a/frontend/src/components/ui/input.tsx b/frontend/src/components/ui/input.tsx
index 399e65d..8b04f0f 100644
--- a/frontend/src/components/ui/input.tsx
+++ b/frontend/src/components/ui/input.tsx
@@ -33,7 +33,8 @@ const Input = React.forwardRef<HTMLInputElement, React.InputHTMLAttributes<HTMLI
         type={type}
         className={cn(
           // Fixed height + symmetric vertical padding; avoid clipping Vazirmatn descenders.
-          "box-border h-11 w-full rounded-lg border border-input bg-card px-3.5 py-0 font-sans text-sm font-medium leading-none outline-none transition-colors placeholder:font-sans placeholder:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+          // text-base (16px) prevents iOS Safari auto-zoom on focus; sm: downsizes on desktop
+          "box-border h-11 w-full rounded-lg border border-input bg-card px-3.5 py-0 font-sans text-base sm:text-sm font-medium leading-none outline-none transition-colors touch-manipulation placeholder:font-sans placeholder:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
           latin && "font-latin placeholder:font-latin",
           className
         )}
diff --git a/frontend/src/components/ui/textarea.tsx b/frontend/src/components/ui/textarea.tsx
index e4adc55..1c39fa6 100644
--- a/frontend/src/components/ui/textarea.tsx
+++ b/frontend/src/components/ui/textarea.tsx
@@ -7,7 +7,8 @@ const Textarea = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <textarea
     className={cn(
-      "flex min-h-[120px] w-full rounded-lg border border-input bg-card px-3.5 py-2.5 font-sans text-sm font-medium leading-normal outline-none transition-colors placeholder:font-sans placeholder:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+      // text-base (16px) prevents iOS Safari auto-zoom on focus; sm: downsizes on desktop
+      "flex min-h-[120px] w-full rounded-lg border border-input bg-card px-3.5 py-2.5 font-sans text-base sm:text-sm font-medium leading-normal outline-none transition-colors touch-manipulation placeholder:font-sans placeholder:font-medium placeholder:text-muted-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
       className,
     )}
     ref={ref}