Skip to content

improved overall responsiveness #21

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

Merged
rafayhanan merged 1 commit into from
Jan 16, 2026
Merged

improved overall responsiveness #21

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
16 changes: 10 additions & 6 deletions frontend/collab-hub/app/dashboard/invitations/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useState } from "react"
import { InvitationList } from "@/components/users/invitation-list"
import { Sidebar } from "@/components/dashboard/sidebar"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { MobileSidebar } from "@/components/dashboard/mobile-sidebar"
import { CreateProjectDialog } from "@/components/dashboard/create-project-dialog"
import { useCreateProject, useProjects } from "@/hooks/use-projects"
import { Skeleton } from "@/components/ui/skeleton"
Expand All @@ -19,8 +20,8 @@ export default function InvitationsPage() {

if (isLoading) {
return (
<div className="flex h-screen">
<div className="w-64 border-r bg-sidebar">
<div className="flex min-h-screen md:h-screen">
<div className="hidden md:block w-64 border-r bg-sidebar">
<Skeleton className="h-16 w-full" />
<div className="p-4 space-y-2">
{Array.from({ length: 5 }).map((_, i) => (
Expand All @@ -40,13 +41,16 @@ export default function InvitationsPage() {
}

return (
<div className="flex h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} />
<div className="flex min-h-screen md:h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />

<div className="flex-1 flex flex-col overflow-hidden">
<DashboardHeader onCreateProject={() => setIsCreateProjectDialogOpen(true)} />
<DashboardHeader
onCreateProject={() => setIsCreateProjectDialogOpen(true)}
mobileSidebar={<MobileSidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} />}
/>

<main className="flex-1 overflow-auto p-6">
<main className="flex-1 overflow-auto p-4 md:p-6">
<div className="max-w-6xl mx-auto space-y-6">
<div>
<h1 className="text-3xl font-bold tracking-tight">Invitations</h1>
Expand Down
26 changes: 15 additions & 11 deletions frontend/collab-hub/app/dashboard/messages/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useAuth } from "@/hooks/use-auth"
import { useRouter } from "next/navigation"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { Sidebar } from "@/components/dashboard/sidebar"
import { MobileSidebar } from "@/components/dashboard/mobile-sidebar"
import { ChannelList } from "@/components/chat/channel-list"
import { MessageList } from "@/components/chat/message-list"
import { MessageInput } from "@/components/chat/message-input"
Expand Down Expand Up @@ -164,8 +165,8 @@ export default function MessagesPage() {

if (authLoading || projectsLoading || tasksLoading || channelsLoading) {
return (
<div className="flex h-screen">
<div className="w-64 border-r bg-sidebar">
<div className="flex min-h-screen md:h-screen">
<div className="hidden md:block w-64 border-r bg-sidebar">
<Skeleton className="h-16 w-full" />
<div className="p-4 space-y-2">
{Array.from({ length: 5 }).map((_, i) => (
Expand All @@ -175,8 +176,8 @@ export default function MessagesPage() {
</div>
<div className="flex-1">
<Skeleton className="h-16 w-full" />
<div className="flex h-[calc(100vh-4rem)]">
<div className="w-64 border-r">
<div className="flex flex-col md:flex-row h-[calc(100vh-4rem)]">
<div className="md:w-64 border-r">
<Skeleton className="h-full w-full" />
</div>
<div className="flex-1">
Expand All @@ -189,13 +190,16 @@ export default function MessagesPage() {
}

return (
<div className="flex h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} />
<div className="flex min-h-screen md:h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />

<div className="flex-1 flex flex-col overflow-hidden">
<DashboardHeader onCreateProject={() => setIsCreateProjectDialogOpen(true)} />
<DashboardHeader
onCreateProject={() => setIsCreateProjectDialogOpen(true)}
mobileSidebar={<MobileSidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} />}
/>

<div className="flex-1 flex overflow-hidden">
<div className="flex-1 flex flex-col md:flex-row overflow-hidden">
<ChannelList
channels={channels}
activeChannelId={activeChannel?.id}
Expand All @@ -213,8 +217,8 @@ export default function MessagesPage() {
<>
{/* Channel Header */}
<div className="border-b border-border p-4 bg-background">
<div className="flex items-center space-x-3">
<div className="flex items-center space-x-2">
<div className="flex flex-wrap items-center gap-2">
<div className="flex flex-wrap items-center gap-2">
{activeChannel.type === "PROJECT_GENERAL" && <Hash className="h-5 w-5 text-muted-foreground" />}
{activeChannel.type === "TASK_SPECIFIC" && (
<MessageSquare className="h-5 w-5 text-muted-foreground" />
Expand Down Expand Up @@ -250,7 +254,7 @@ export default function MessagesPage() {
</>
) : (
<div className="flex-1 flex items-center justify-center">
<Card className="w-96">
<Card className="w-full max-w-md mx-4">
<CardHeader className="text-center">
<CardTitle className="flex items-center justify-center space-x-2">
<MessageSquare className="h-6 w-6" />
Expand Down
72 changes: 72 additions & 0 deletions frontend/collab-hub/app/dashboard/notifications/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
"use client"

import { useState } from "react"
import { Sidebar } from "@/components/dashboard/sidebar"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { CreateProjectDialog } from "@/components/dashboard/create-project-dialog"
import { NotificationList } from "@/components/notifications/notification-list"
import { MobileSidebar } from "@/components/dashboard/mobile-sidebar"
import { useCreateProject, useProjects } from "@/hooks/use-projects"
import { Skeleton } from "@/components/ui/skeleton"

export default function NotificationsPage() {
const [isCreateProjectDialogOpen, setIsCreateProjectDialogOpen] = useState(false)
const { data: projects = [], isLoading } = useProjects()
const { mutateAsync: createProjectMutation } = useCreateProject()

const handleCreateProject = async (name: string, description: string) => {
await createProjectMutation({ name, description })
}

if (isLoading) {
return (
<div className="flex min-h-screen md:h-screen">
<div className="hidden md:block w-64 border-r bg-sidebar">
<Skeleton className="h-16 w-full" />
<div className="p-4 space-y-2">
{Array.from({ length: 5 }).map((_, i) => (
<Skeleton key={i} className="h-8 w-full" />
))}
</div>
</div>
<div className="flex-1">
<Skeleton className="h-16 w-full" />
<div className="p-6 space-y-4">
<Skeleton className="h-8 w-48" />
<Skeleton className="h-40 w-full" />
</div>
</div>
</div>
)
}

return (
<div className="flex min-h-screen md:h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />

<div className="flex-1 flex flex-col overflow-hidden">
<DashboardHeader
onCreateProject={() => setIsCreateProjectDialogOpen(true)}
mobileSidebar={<MobileSidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} />}
/>

<main className="flex-1 overflow-auto p-4 md:p-6">
<div className="max-w-6xl mx-auto space-y-6">
<div>
<h1 className="text-3xl font-bold tracking-tight">Notifications</h1>
<p className="text-muted-foreground">All your project updates in one place</p>
</div>

<NotificationList />
</div>
</main>
</div>

<CreateProjectDialog
open={isCreateProjectDialogOpen}
onOpenChange={setIsCreateProjectDialogOpen}
onCreateProject={handleCreateProject}
/>
</div>
)
}
20 changes: 12 additions & 8 deletions frontend/collab-hub/app/dashboard/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useAuth } from "@/hooks/use-auth"
import { useRouter } from "next/navigation"
import { Sidebar } from "@/components/dashboard/sidebar"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { MobileSidebar } from "@/components/dashboard/mobile-sidebar"
import { ProjectCard } from "@/components/dashboard/project-card"
import { CreateProjectDialog } from "@/components/dashboard/create-project-dialog"
import { Button } from "@/components/ui/button"
Expand Down Expand Up @@ -62,8 +63,8 @@ export default function DashboardPage() {

if (authLoading || isLoading || projectsLoading || tasksLoading) {
return (
<div className="flex h-screen">
<div className="w-64 border-r bg-sidebar">
<div className="flex min-h-screen md:h-screen">
<div className="hidden md:block w-64 border-r bg-sidebar">
<Skeleton className="h-16 w-full" />
<div className="p-4 space-y-2">
{Array.from({ length: 5 }).map((_, i) => (
Expand Down Expand Up @@ -95,13 +96,16 @@ export default function DashboardPage() {
}

return (
<div className="flex h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateDialogOpen(true)} />
<div className="flex min-h-screen md:h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateDialogOpen(true)} className="hidden md:flex" />

<div className="flex-1 flex flex-col overflow-hidden">
<DashboardHeader onCreateProject={() => setIsCreateDialogOpen(true)} />
<DashboardHeader
onCreateProject={() => setIsCreateDialogOpen(true)}
mobileSidebar={<MobileSidebar projects={projects} onCreateProject={() => setIsCreateDialogOpen(true)} />}
/>

<main className="flex-1 overflow-auto p-6">
<main className="flex-1 overflow-auto p-4 md:p-6">
<div className="max-w-7xl mx-auto space-y-6">
{/* Welcome Section */}
<div className="space-y-2">
Expand Down Expand Up @@ -162,9 +166,9 @@ export default function DashboardPage() {

{/* Projects Section */}
<div className="space-y-4">
<div className="flex items-center justify-between">
<div className="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<h2 className="text-xl font-semibold">Your Projects</h2>
<Button onClick={() => setIsCreateDialogOpen(true)} size="sm">
<Button onClick={() => setIsCreateDialogOpen(true)} size="sm" className="w-full sm:w-auto">
<Plus className="h-4 w-4 mr-2" />
New Project
</Button>
Expand Down
16 changes: 10 additions & 6 deletions frontend/collab-hub/app/dashboard/projects/[id]/members/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { useAuth } from "@/hooks/use-auth"
import { useProject } from "@/hooks/use-projects"
import { Sidebar } from "@/components/dashboard/sidebar"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { MobileSidebar } from "@/components/dashboard/mobile-sidebar"
import { CreateProjectDialog } from "@/components/dashboard/create-project-dialog"
import { useCreateProject, useProjects } from "@/hooks/use-projects"
import { Skeleton } from "@/components/ui/skeleton"
Expand All @@ -30,8 +31,8 @@ export default function ProjectMembersPage() {

if (isLoading || projectsLoading) {
return (
<div className="flex h-screen">
<div className="w-64 border-r bg-sidebar">
<div className="flex min-h-screen md:h-screen">
<div className="hidden md:block w-64 border-r bg-sidebar">
<Skeleton className="h-16 w-full" />
<div className="p-4 space-y-2">
{Array.from({ length: 5 }).map((_, i) => (
Expand All @@ -55,13 +56,16 @@ export default function ProjectMembersPage() {
}

return (
<div className="flex h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} />
<div className="flex min-h-screen md:h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />

<div className="flex-1 flex flex-col overflow-hidden">
<DashboardHeader onCreateProject={() => setIsCreateProjectDialogOpen(true)} />
<DashboardHeader
onCreateProject={() => setIsCreateProjectDialogOpen(true)}
mobileSidebar={<MobileSidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} />}
/>

<main className="flex-1 overflow-auto p-6">
<main className="flex-1 overflow-auto p-4 md:p-6">
<div className="max-w-6xl mx-auto space-y-6">
<div>
<h1 className="text-3xl font-bold tracking-tight">{project.name} - Members</h1>
Expand Down
28 changes: 16 additions & 12 deletions frontend/collab-hub/app/dashboard/projects/[id]/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { useMemo, useState } from "react"
import { useParams } from "next/navigation"
import { Sidebar } from "@/components/dashboard/sidebar"
import { DashboardHeader } from "@/components/dashboard/dashboard-header"
import { MobileSidebar } from "@/components/dashboard/mobile-sidebar"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Badge } from "@/components/ui/badge"
import { Skeleton } from "@/components/ui/skeleton"
Expand Down Expand Up @@ -38,8 +39,8 @@ export default function ProjectDetailPage() {

if (projectsLoading || projectLoading || tasksLoading) {
return (
<div className="flex h-screen">
<div className="w-64 border-r bg-sidebar">
<div className="flex min-h-screen md:h-screen">
<div className="hidden md:block w-64 border-r bg-sidebar">
<Skeleton className="h-16 w-full" />
<div className="p-4 space-y-2">
{Array.from({ length: 5 }).map((_, i) => (
Expand All @@ -60,7 +61,7 @@ export default function ProjectDetailPage() {

if (!project) {
return (
<div className="flex h-screen items-center justify-center">
<div className="flex min-h-screen items-center justify-center p-4">
<Card className="max-w-md w-full">
<CardContent className="p-6 text-center">
<p className="text-muted-foreground">Project not found.</p>
Expand All @@ -74,13 +75,16 @@ export default function ProjectDetailPage() {
}

return (
<div className="flex h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} />
<div className="flex min-h-screen md:h-screen bg-background">
<Sidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} className="hidden md:flex" />

<div className="flex-1 flex flex-col overflow-hidden">
<DashboardHeader onCreateProject={() => setIsCreateProjectDialogOpen(true)} />
<DashboardHeader
onCreateProject={() => setIsCreateProjectDialogOpen(true)}
mobileSidebar={<MobileSidebar projects={projects} onCreateProject={() => setIsCreateProjectDialogOpen(true)} />}
/>

<main className="flex-1 overflow-auto p-6">
<main className="flex-1 overflow-auto p-4 md:p-6">
<div className="max-w-6xl mx-auto space-y-6">
<div className="space-y-1">
<h1 className="text-2xl font-bold text-balance">{project.name}</h1>
Expand Down Expand Up @@ -116,13 +120,13 @@ export default function ProjectDetailPage() {

<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div>
<CardTitle>Project Tasks</CardTitle>
<CardDescription>Tasks associated with this project.</CardDescription>
</div>
<Link href="/dashboard/tasks">
<Button variant="outline" size="sm">
<Button variant="outline" size="sm" className="w-full sm:w-auto">
View All Tasks
</Button>
</Link>
Expand All @@ -134,7 +138,7 @@ export default function ProjectDetailPage() {
) : (
<div className="space-y-3">
{tasks.slice(0, 6).map((task: Task) => (
<div key={task.id} className="flex items-center justify-between border rounded-lg p-3">
<div key={task.id} className="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between border rounded-lg p-3">
<div>
<p className="font-medium">{task.title}</p>
{task.description && <p className="text-sm text-muted-foreground">{task.description}</p>}
Expand All @@ -149,15 +153,15 @@ export default function ProjectDetailPage() {

<Card>
<CardHeader>
<div className="flex items-center justify-between">
<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<div>
<CardTitle>Members</CardTitle>
<CardDescription>
{project.members?.length || 0} member{project.members?.length !== 1 ? "s" : ""}
</CardDescription>
</div>
<Link href={`/dashboard/projects/${project.id}/members`}>
<Button variant="outline" size="sm">
<Button variant="outline" size="sm" className="w-full sm:w-auto">
Manage Members
</Button>
</Link>
Expand Down
Loading