Merge pull request #203 from vaishnavijha12/fix/mobile-responsiveness-130

frontend/src/app/dashboard/page.tsx

@@ -4,17 +4,41 @@ import { useEffect, useState, useCallback } from "react";
 import dynamic from "next/dynamic";
 import { useRouter } from "next/navigation";
 import { useAuth } from "@/lib/auth";
-import {
-  api,
-  CONNECTION_ERROR_BANNER_MESSAGE,
-  CONNECTION_ERROR_MESSAGE,
-} from "@/lib/api";
-
+import { api, CONNECTION_ERROR_BANNER_MESSAGE, CONNECTION_ERROR_MESSAGE } from "@/lib/api";
 import Header from "@/components/layout/Header";
 import DocumentSidebar from "@/components/document/DocumentSidebar";
 import ChatPanel from "@/components/chat/ChatPanel";
-import PDFViewer from "@/components/document/PDFViewer";
-import { Skeleton } from "@/components/ui/skeleton";
+
+function PDFViewerSkeleton() {
+  return (
+    <div
+      className="h-full flex flex-col bg-background"
+      aria-busy="true"
+      aria-label="Loading PDF viewer"
+    >
+      <div className="flex items-center justify-between px-3 py-2 border-b border-border/50 bg-card/50 shrink-0">
+        <div className="flex items-center gap-2">
+          <div className="h-7 w-7 rounded-md bg-muted/70 animate-pulse" />
+          <div className="h-7 w-20 rounded-md bg-muted/70 animate-pulse" />
+          <div className="h-7 w-7 rounded-md bg-muted/70 animate-pulse" />
+        </div>
+        <div className="flex items-center gap-2">
+          <div className="h-7 w-7 rounded-md bg-muted/70 animate-pulse" />
+          <div className="h-4 w-10 rounded bg-muted/70 animate-pulse" />
+          <div className="h-7 w-7 rounded-md bg-muted/70 animate-pulse" />
+        </div>
+      </div>
+      <div className="flex-1 p-4">
+        <div className="h-full rounded-lg border border-border/50 bg-muted/40 animate-pulse" />
+      </div>
+    </div>
+  );
+}
+
+const PDFViewer = dynamic(() => import("@/components/document/PDFViewer"), {
+  ssr: false,
+  loading: () => <PDFViewerSkeleton />,
+});
 
 export interface DocInfo {
   summary: string;
@@ -28,23 +52,6 @@ export interface DocInfo {
   uploaded_at: string;
 }
 
-function DocumentSkeleton() {
-  return (
-    <div className="w-72 flex-shrink-0 border-r border-border/50 p-4 space-y-4">
-      {[1, 2, 3, 4].map((item) => (
-        <div
-          key={item}
-          className="rounded-lg border border-border/50 p-4 space-y-3"
-        >
-          <Skeleton className="h-4 w-[180px]" />
-          <Skeleton className="h-3 w-[120px]" />
-          <Skeleton className="h-3 w-[90px]" />
-        </div>
-      ))}
-    </div>
-  );
-}
-
 export default function DashboardPage() {
   const { user, loading } = useAuth();
   const router = useRouter();
@@ -55,7 +62,6 @@ export default function DashboardPage() {
   const [sidebarOpen, setSidebarOpen] = useState(true);
   const [viewerOpen, setViewerOpen] = useState(true);
   const [connectionError, setConnectionError] = useState("");
-  const [documentsLoading, setDocumentsLoading] = useState(true);
 
     // Auth guard
   useEffect(() => {
@@ -77,31 +83,23 @@ export default function DashboardPage() {
   // Load documents
   const loadDocuments = useCallback(async () => {
     try {
-      setDocumentsLoading(true);
-
       const data = await api.get<{ documents?: DocInfo[]; items?: DocInfo[] }>(
         "/api/v1/documents/"
       );
-
       setDocuments(data?.documents ?? data?.items ?? []);
       setConnectionError("");
     } catch (err) {
-      const message =
-        err instanceof Error ? err.message : CONNECTION_ERROR_MESSAGE;
-
+      const message = err instanceof Error ? err.message : CONNECTION_ERROR_MESSAGE;
       setConnectionError(
         message === CONNECTION_ERROR_MESSAGE
           ? CONNECTION_ERROR_BANNER_MESSAGE
           : `⚠️ ${message}`
       );
-    } finally {
-      setDocumentsLoading(false);
     }
   }, []);
 
   useEffect(() => {
     if (!user) return;
-
     void (async () => {
       await loadDocuments();
     })();
@@ -112,11 +110,9 @@ export default function DashboardPage() {
     const hasPending = (documents || []).some(
       (d) => d.status === "pending" || d.status === "processing"
     );
-
     if (!hasPending) return;
 
     const interval = setInterval(loadDocuments, 3000);
-
     return () => clearInterval(interval);
   }, [documents, loadDocuments]);
 
@@ -128,6 +124,19 @@ export default function DashboardPage() {
     );
   }
 
+  // Shared sidebar content — used by both desktop panel and mobile sheet
+  const sidebarContent = (
+    <DocumentSidebar
+      documents={documents}
+      activeDoc={activeDoc}
+      onSelectDoc={(doc) => {
+        setActiveDoc(doc);
+        setPdfPage(1);
+      }}
+      onDocumentsChange={loadDocuments}
+    />
+  );
+
   return (
     <div className="h-screen flex flex-col overflow-hidden">
       <Header
@@ -135,6 +144,7 @@ export default function DashboardPage() {
         onToggleSidebar={() => setSidebarOpen(!sidebarOpen)}
         viewerOpen={viewerOpen}
         onToggleViewer={() => setViewerOpen(!viewerOpen)}
+        mobileSheetContent={sidebarContent}
       />
 
       {connectionError && (
@@ -147,49 +157,35 @@ export default function DashboardPage() {
       )}
 
       <div className="flex-1 flex overflow-hidden">
-        {/* ── Left: Document Sidebar / Skeleton ──────────────── */}
-        {sidebarOpen &&
-          (documentsLoading ? (
-            <DocumentSkeleton />
-          ) : (
-            <div className="w-72 flex-shrink-0 border-r border-border/50 overflow-hidden animate-fade-in-up">
-              <DocumentSidebar
-                documents={documents}
-                activeDoc={activeDoc}
-                onSelectDoc={(doc) => {
-                  setActiveDoc(doc);
-                  setPdfPage(1);
-                }}
-                onDocumentsChange={loadDocuments}
-              />
-            </div>
-          ))}
-
-        {/* ── Center: Chat Panel ─────────────────── */}
+        {/* ── Left: Document Sidebar — desktop only (md+) ─────────── */}
+        {sidebarOpen && (
+          <div className="hidden md:block w-72 flex-shrink-0 border-r border-border/50 overflow-hidden animate-fade-in-up">
+            {sidebarContent}
+          </div>
+        )}
+
+        {/* ── Center: Chat Panel ──────────────────────────────────── */}
         <div className="flex-1 min-w-0 flex flex-col">
           <ChatPanel
             activeDoc={activeDoc}
             onCitationClick={(page) => {
               setPdfPage(page);
-
               if (!viewerOpen) setViewerOpen(true);
             }}
           />
         </div>
 
-        {/* ── Right: PDF Viewer ──────────────────── */}
-        {viewerOpen &&
-          activeDoc &&
-          activeDoc.original_name.endsWith(".pdf") && (
-            <div className="w-[480px] flex-shrink-0 border-l border-border/50 overflow-hidden animate-fade-in-up">
-              <PDFViewer
-                documentId={activeDoc.id}
-                currentPage={pdfPage}
-                onPageChange={setPdfPage}
-                totalPages={activeDoc.page_count}
-              />
-            </div>
-          )}
+        {/* ── Right: PDF Viewer — hidden on mobile ────────────────── */}
+        {viewerOpen && activeDoc && activeDoc.original_name.endsWith(".pdf") && (
+          <div className="hidden md:block w-[480px] flex-shrink-0 border-l border-border/50 overflow-hidden animate-fade-in-up">
+            <PDFViewer
+              documentId={activeDoc.id}
+              currentPage={pdfPage}
+              onPageChange={setPdfPage}
+              totalPages={activeDoc.page_count}
+            />
+          </div>
+        )}
       </div>
     </div>
   );

frontend/src/components/layout/Header.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useState } from "react";
 import { useAuth } from "@/lib/auth";
 import { useTranslation } from "react-i18next";
 import { useRouter } from "next/navigation";
@@ -22,29 +23,38 @@ import {
   Moon,
   Shield,
   Sun,
+  Menu,
+  X,
 } from "lucide-react";
-import { useSyncExternalStore } from "react";
 import { useTheme } from "next-themes";
-import ApiKeyManager from "@/components/auth/ApiKeyManager";
-
+import { useSyncExternalStore } from "react";
 
 interface HeaderProps {
   sidebarOpen: boolean;
   onToggleSidebar: () => void;
   viewerOpen: boolean;
   onToggleViewer: () => void;
+  /** Pass DocumentSidebar JSX so the mobile sheet can render it */
+  mobileSheetContent?: React.ReactNode;
 }
 
 const subscribe = () => () => {};
 const getSnapshot = () => true;
 const getServerSnapshot = () => false;
 
-export default function Header({ sidebarOpen, onToggleSidebar, viewerOpen, onToggleViewer }: HeaderProps) {
+export default function Header({
+  sidebarOpen,
+  onToggleSidebar,
+  viewerOpen,
+  onToggleViewer,
+  mobileSheetContent,
+}: HeaderProps) {
   const { user, logout } = useAuth();
   const { t, i18n } = useTranslation();
   const router = useRouter();
   const { theme, setTheme } = useTheme();
-  const mounted = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot); // ← replaces useState + useEffect
+  const mounted = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+  const [sheetOpen, setSheetOpen] = useState(false);
 
   const isDark = theme === "dark";
   const toggleTheme = () => setTheme(isDark ? "light" : "dark");
@@ -68,79 +78,147 @@ export default function Header({ sidebarOpen, onToggleSidebar, viewerOpen, onTog
   };
 
   return (
-    <header className="h-14 flex items-center justify-between px-4 border-b border-border/50 bg-card/50 backdrop-blur-md flex-shrink-0 z-50">
-      {/* Left */}
-      <div className="flex items-center gap-3">
-        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleSidebar} title={sidebarOpen ? t("header.closeSidebar") : t("header.openSidebar")}>
-          {sidebarOpen ? <PanelLeftClose className="w-4 h-4" /> : <PanelLeftOpen className="w-4 h-4" />}
-        </Button>
+    <>
+      <header className="h-14 flex items-center justify-between px-4 border-b border-border/50 bg-card/50 backdrop-blur-md flex-shrink-0 z-50">
+        {/* Left */}
+        <div className="flex items-center gap-3">
+          {/* Hamburger — mobile only */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 md:hidden"
+            onClick={() => setSheetOpen(true)}
+            title="Open sidebar"
+          >
+            <Menu className="w-4 h-4" />
+          </Button>
 
-        <div className="flex items-center gap-2">
-          <div className="w-7 h-7 rounded-lg bg-primary/15 flex items-center justify-center">
-            <Brain className="w-4 h-4 text-primary" />
+          {/* Desktop sidebar toggle — hidden on mobile */}
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8 hidden md:inline-flex"
+            onClick={onToggleSidebar}
+            title={sidebarOpen ? "Close sidebar" : "Open sidebar"}
+          >
+            {sidebarOpen ? (
+              <PanelLeftClose className="w-4 h-4" />
+            ) : (
+              <PanelLeftOpen className="w-4 h-4" />
+            )}
+          </Button>
+
+          <div className="flex items-center gap-2">
+            <div className="w-7 h-7 rounded-lg bg-primary/15 flex items-center justify-center">
+              <Brain className="w-4 h-4 text-primary" />
+            </div>
+            <span className="font-semibold text-sm hidden sm:inline">
+              Document AI Analyst
+            </span>
           </div>
-          <span className="font-semibold text-sm hidden sm:inline">{t("common.appName")}</span>
         </div>
-      </div>
-
-      {/* Right */}
-      <div className="flex items-center gap-2">
-        <Button variant="ghost" size="icon" className="h-8 w-8" onClick={onToggleViewer} title={viewerOpen ? t("header.closeViewer") : t("header.openViewer")}>
-          {viewerOpen ? <PanelRightClose className="w-4 h-4" /> : <PanelRightOpen className="w-4 h-4" />}
-        </Button>
 
-        {mounted && (
-          <Button variant="ghost" size="icon" className="h-8 w-8" onClick={toggleTheme} title={isDark ? t("header.lightMode") : t("header.darkMode")}>
-            {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+        {/* Right */}
+        <div className="flex items-center gap-2">
+          <Button
+            variant="ghost"
+            size="icon"
+            className="h-8 w-8"
+            onClick={onToggleViewer}
+            title={viewerOpen ? "Close viewer" : "Open viewer"}
+          >
+            {viewerOpen ? (
+              <PanelRightClose className="w-4 h-4" />
+            ) : (
+              <PanelRightOpen className="w-4 h-4" />
+            )}
           </Button>
-        )}
-
-        <select
-          aria-label={t("common.language")}
-          value={i18n.resolvedLanguage || "en"}
-          onChange={(e) => void i18n.changeLanguage(e.target.value)}
-          className="h-8 rounded-md border border-border bg-background px-2 text-xs text-foreground"
-        >
-          <option value="en">{languageLabel("en")}</option>
-          <option value="hi">{languageLabel("hi")}</option>
-          <option value="es">{languageLabel("es")}</option>
-          <option value="fr">{languageLabel("fr")}</option>
-        </select>
-
-        <DropdownMenu>
-          <DropdownMenuTrigger
-            render={
-              <button className="flex items-center h-8 gap-2 px-2 rounded-md hover:bg-accent transition-colors cursor-pointer">
-                <Avatar className="w-6 h-6">
-                  <AvatarFallback className="text-[10px] bg-primary/20 text-primary">
-                    {user?.username?.slice(0, 2).toUpperCase() || "U"}
-                  </AvatarFallback>
-                </Avatar>
-                <span className="text-sm hidden sm:inline">{user?.username}</span>
-              </button>
-            }
-          />
-
-          <DropdownMenuContent align="end" className="w-56">
-            <div className="px-3 py-2">
-              <p className="text-sm font-medium">{user?.username}</p>
-              <p className="text-xs text-muted-foreground truncate">{user?.email}</p>
-            </div>
-            <DropdownMenuSeparator />
-            {user?.is_admin && (
-              <DropdownMenuItem className="cursor-pointer" onClick={() => router.push("/admin")}>
-                <Shield className="w-4 h-4 mr-2" />
-                Admin metrics
+
+          {mounted && (
+            <Button
+              variant="ghost"
+              size="icon"
+              className="h-8 w-8"
+              onClick={toggleTheme}
+              title={isDark ? "Light mode" : "Dark mode"}
+            >
+              {isDark ? <Sun className="w-4 h-4" /> : <Moon className="w-4 h-4" />}
+            </Button>
+          )}
+
+          <DropdownMenu>
+            <DropdownMenuTrigger className="flex items-center h-8 gap-2 px-2 rounded-md hover:bg-accent transition-colors cursor-pointer">
+              <Avatar className="w-6 h-6">
+                <AvatarFallback className="text-[10px] bg-primary/20 text-primary">
+                  {user?.username?.slice(0, 2).toUpperCase() || "U"}
+                </AvatarFallback>
+              </Avatar>
+              <span className="text-sm hidden sm:inline">{user?.username}</span>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent align="end" className="w-48">
+              <div className="px-3 py-2">
+                <p className="text-sm font-medium">{user?.username}</p>
+                <p className="text-xs text-muted-foreground truncate">{user?.email}</p>
+              </div>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem
+                className="text-destructive cursor-pointer"
+                onClick={handleLogout}
+              >
+                <LogOut className="w-4 h-4 mr-2" />
+                Sign out
               </DropdownMenuItem>
-            )}
-            {user?.is_admin && <DropdownMenuSeparator />}
-            <DropdownMenuItem className="text-destructive cursor-pointer" onClick={handleLogout}>
-              <LogOut className="w-4 h-4 mr-2" />
-              {t("header.signOut")}
-            </DropdownMenuItem>
-          </DropdownMenuContent>
-        </DropdownMenu>
+            </DropdownMenuContent>
+          </DropdownMenu>
+        </div>
+      </header>
+
+      {/* ── Mobile Navigation Sheet ──────────────────────────────────── */}
+      {/* Backdrop */}
+      {sheetOpen && (
+        <div
+          className="fixed inset-0 z-40 bg-black/50 backdrop-blur-sm md:hidden"
+          onClick={() => setSheetOpen(false)}
+          aria-hidden="true"
+        />
+      )}
+
+      {/* Slide-in panel */}
+<aside
+  className={[
+    "fixed inset-y-0 left-0 z-50 w-72 flex flex-col",
+    "bg-sidebar border-r border-sidebar-border",
+    "transform transition-transform duration-300 ease-in-out md:hidden",
+    sheetOpen ? "translate-x-0" : "-translate-x-full",
+  ].join(" ")}
+  aria-label="Mobile navigation"
+  aria-hidden={!sheetOpen}
+  inert={!sheetOpen ? true : undefined}
+>
+  {/* Sheet header */}
+  <div className="h-14 flex items-center justify-between px-4 border-b border-sidebar-border flex-shrink-0">
+    <div className="flex items-center gap-2">
+      <div className="w-7 h-7 rounded-lg bg-primary/15 flex items-center justify-center">
+        <Brain className="w-4 h-4 text-primary" />
       </div>
-    </header>
+      <span className="font-semibold text-sm">Document AI Analyst</span>
+    </div>
+    <Button
+      variant="ghost"
+      size="icon"
+      className="h-8 w-8"
+      onClick={() => setSheetOpen(false)}
+      aria-label="Close navigation"
+    >
+      <X className="w-4 h-4" />
+    </Button>
+  </div>
+
+  {/* Sidebar content */}
+  <div className="flex-1 overflow-hidden">
+     {sheetOpen ? mobileSheetContent : null}
+  </div>
+</aside>
+    </>
   );
 }