Skip to content

feat: Implement comprehensive mobile responsiveness across all pages #55

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
androemeda wants to merge 10 commits into
base: main
Choose a base branch
from
Open

feat: Implement comprehensive mobile responsiveness across all pages #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
3b5c48e
landing page
androemeda Mar 18, 2026
bb6eb82
"/chat" page
androemeda Mar 18, 2026
5c95cef
/search/[bmid] page
androemeda Mar 18, 2026
77f3621
/analyze/[id] page
androemeda Mar 18, 2026
25e3c0e
/admin/settings page
androemeda Mar 18, 2026
87fd704
/admin page
androemeda Mar 18, 2026
32d8276
admin/knowledge-base
androemeda Mar 18, 2026
7dc0d05
added mobile sidebar toggle to all pages for better navigation
androemeda Mar 18, 2026
97cf431
touchups
androemeda Mar 18, 2026
140a94f
added button import
androemeda Mar 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
72 changes: 52 additions & 20 deletions frontend/app/admin/knowledge-base/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,10 @@ import {
FolderOpen,
File,
Plus,
Menu,
} from "lucide-react";
import { useSidebar } from "@/components/ui/sidebar";
import Image from "next/image";

interface KnowledgeFile {
name: string;
Expand All @@ -29,6 +32,7 @@ interface FileContent {
}

export default function KnowledgeBasePage() {
const { toggleSidebar, isMobile } = useSidebar();
const [files, setFiles] = useState<KnowledgeFile[]>([]);
const [filteredFiles, setFilteredFiles] = useState<KnowledgeFile[]>([]);
const [loading, setLoading] = useState(true);
Expand Down Expand Up @@ -190,39 +194,65 @@ export default function KnowledgeBasePage() {

return (
<div className="min-h-screen bg-slate-50">
<div className="container mx-auto p-8 max-w-7xl">
{/* Mobile Header */}
{isMobile && (
<header className="bg-white border-b border-slate-200 px-4 py-3 flex items-center gap-3 flex-shrink-0">
<Button
variant="ghost"
size="sm"
onClick={toggleSidebar}
className="md:hidden"
>
<Menu className="h-5 w-5" />
</Button>
<div className="flex items-center gap-2">
<Image
src="/VCellLogo.png"
alt="VCell Logo"
width={40}
height={40}
className="rounded w-10 h-10 object-contain"
/>
<span className="text-lg font-semibold text-slate-900">
Knowledge Base
</span>
</div>
</header>
)}

<div className="container mx-auto p-4 sm:p-6 md:p-8 max-w-7xl">
{/* Header */}
<div className="mb-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-extrabold text-blue-900 flex items-center gap-3">
<FolderOpen className="h-8 w-8 text-blue-500" />
Knowledge Base Management
<div className="mb-6 sm:mb-8">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1">
<h1 className="text-2xl sm:text-3xl font-extrabold text-blue-900 flex items-center gap-2 sm:gap-3">
<FolderOpen className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500 flex-shrink-0" />
<span className="break-words">Knowledge Base Management</span>
</h1>
<p className="text-slate-600 mt-2">
<p className="text-slate-600 mt-1 sm:mt-2 text-sm sm:text-base">
Upload, manage, and organize knowledge base files
</p>
</div>
<div className="flex gap-3">
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
<Button
onClick={() => setShowUploadModal(true)}
className="inline-flex items-center gap-2 px-4 py-2 rounded border border-green-600 text-green-700 bg-white font-semibold shadow-sm transition-colors hover:bg-green-50"
className="inline-flex items-center justify-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded border border-green-600 text-green-700 bg-white font-semibold shadow-sm transition-colors hover:bg-green-50 text-sm whitespace-nowrap"
>
<Plus className="h-4 w-4" /> Upload File
<Plus className="h-3 w-3 sm:h-4 sm:w-4" /> Upload File
</Button>
<Button
onClick={() => window.open("/admin", "_blank")}
className="inline-flex items-center gap-2 px-4 py-2 rounded border border-blue-600 text-blue-700 bg-white font-semibold shadow-sm transition-colors hover:bg-blue-50"
className="inline-flex items-center justify-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded border border-blue-600 text-blue-700 bg-white font-semibold shadow-sm transition-colors hover:bg-blue-50 text-sm whitespace-nowrap"
>
<FileText className="h-4 w-4" /> Back to Dashboard
<FileText className="h-3 w-3 sm:h-4 sm:w-4" /> Back to Dashboard
</Button>
</div>
</div>
</div>

{/* Search and Filters */}
<Card className="shadow-lg border-slate-200 mb-8">
<CardContent className="p-6">
<Card className="shadow-lg border-slate-200 mb-6 sm:mb-8">
<CardContent className="p-4 sm:p-5 md:p-6">
<div className="flex items-center gap-4">
<div className="flex-1 relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-slate-400" />
Expand All @@ -239,11 +269,13 @@ export default function KnowledgeBasePage() {

{/* Files Table */}
<Card className="shadow-lg border-slate-200">
<CardHeader className="bg-gradient-to-r from-blue-100 to-blue-50 border-b border-slate-200 px-6 py-5">
<CardTitle className="text-2xl font-extrabold text-blue-900 flex items-center gap-3">
<FileText className="h-6 w-6 text-blue-500" />
Knowledge Base Files
<Badge className="ml-2 bg-blue-600 text-white">
<CardHeader className="bg-gradient-to-r from-blue-100 to-blue-50 border-b border-slate-200 px-4 sm:px-5 md:px-6 py-4 sm:py-5">
<CardTitle className="text-lg sm:text-xl md:text-2xl font-extrabold text-blue-900 flex flex-wrap items-center justify-between gap-2 sm:gap-3">
<div className="flex items-center gap-2 sm:gap-3">
<FileText className="h-5 w-5 sm:h-6 sm:w-6 text-blue-500 flex-shrink-0" />
<span>Knowledge Base Files</span>
</div>
<Badge className="bg-blue-600 text-white px-3 py-1.5 text-sm font-semibold rounded-md">
{files.length} files
</Badge>
</CardTitle>
Expand Down
56 changes: 43 additions & 13 deletions frontend/app/admin/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ import {
Trash2,
Save,
X,
Menu,
} from "lucide-react";
import { useSidebar } from "@/components/ui/sidebar";
import Image from "next/image";

interface User {
id: string;
Expand All @@ -40,6 +43,7 @@ interface DashboardStats {
}

export default function AdminDashboard() {
const { toggleSidebar, isMobile } = useSidebar();
const [stats, setStats] = useState<DashboardStats>({
totalUsers: 0,
totalConversations: 0,
Expand Down Expand Up @@ -272,31 +276,57 @@ export default function AdminDashboard() {

return (
<div className="min-h-screen bg-slate-50">
<div className="container mx-auto p-8 max-w-7xl">
{/* Mobile Header */}
{isMobile && (
<header className="bg-white border-b border-slate-200 px-4 py-3 flex items-center gap-3 flex-shrink-0">
<Button
variant="ghost"
size="sm"
onClick={toggleSidebar}
className="md:hidden"
>
<Menu className="h-5 w-5" />
</Button>
<div className="flex items-center gap-2">
<Image
src="/VCellLogo.png"
alt="VCell Logo"
width={40}
height={40}
className="rounded w-10 h-10 object-contain"
/>
<span className="text-lg font-semibold text-slate-900">
Admin Dashboard
</span>
</div>
</header>
)}

<div className="container mx-auto p-4 sm:p-6 md:p-8 max-w-7xl">
{/* Header */}
<div className="mb-8">
<div className="flex items-center justify-between">
<div>
<h1 className="text-3xl font-extrabold text-blue-900 flex items-center gap-3">
<Shield className="h-8 w-8 text-blue-500" />
Admin Dashboard
<div className="mb-6 sm:mb-8">
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between gap-4">
<div className="flex-1">
<h1 className="text-2xl sm:text-3xl font-extrabold text-blue-900 flex items-center gap-2 sm:gap-3">
<Shield className="h-6 w-6 sm:h-8 sm:w-8 text-blue-500 flex-shrink-0" />
<span className="break-words">Admin Dashboard</span>
</h1>
<p className="text-slate-600 mt-2">
<p className="text-slate-600 mt-1 sm:mt-2 text-sm sm:text-base">
Manage users, conversations, and system resources
</p>
</div>
<div className="flex gap-3">
<div className="flex flex-col sm:flex-row gap-2 sm:gap-3">
<Button
onClick={() => window.open("/admin/knowledge-base", "_blank")}
className="inline-flex items-center gap-2 px-4 py-2 rounded border border-green-600 text-green-700 bg-white font-semibold shadow-sm transition-colors hover:bg-green-50"
className="inline-flex items-center justify-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded border border-green-600 text-green-700 bg-white font-semibold shadow-sm transition-colors hover:bg-green-50 text-sm whitespace-nowrap"
>
<FileText className="h-4 w-4" /> Knowledge Base
<FileText className="h-3 w-3 sm:h-4 sm:w-4" /> Knowledge Base
</Button>
<Button
onClick={() => window.open("/admin/settings", "_blank")}
className="inline-flex items-center gap-2 px-4 py-2 rounded border border-blue-600 text-blue-700 bg-white font-semibold shadow-sm transition-colors hover:bg-blue-50"
className="inline-flex items-center justify-center gap-1 sm:gap-2 px-3 sm:px-4 py-2 rounded border border-blue-600 text-blue-700 bg-white font-semibold shadow-sm transition-colors hover:bg-blue-50 text-sm whitespace-nowrap"
>
<Settings className="h-4 w-4" /> Settings
<Settings className="h-3 w-3 sm:h-4 sm:w-4" /> Settings
</Button>
</div>
</div>
Expand Down
Loading