Skip to content

influencer-side-responsive #140

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
safwan246 merged 4 commits into from
May 19, 2026
Merged

influencer-side-responsive #140

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9bc73c0
influencer-side-responsive
safwan246 May 19, 2026
645d4c0
Merge branch 'dev' into features/influcer-side-responsive
safwan246 May 19, 2026
cba9403
influencer-side-responsive
safwan246 May 19, 2026
ab32d04
fix(web): resolve lint syntax parsing errors in NotificationBell
safwan246 May 19, 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
34 changes: 18 additions & 16 deletions apps/web/app/brand-dashboard/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function BrandDashboardLayout({
}) {
const pathname = usePathname();
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
const { counts, fetchCounts } = useDashboardStore();
const { counts, fetchCounts, isChatActive } = useDashboardStore();

useEffect(() => {
fetchCounts();
Expand Down Expand Up @@ -106,21 +106,23 @@ export default function BrandDashboardLayout({
{/* Main Header & Content Area */}
<main className="flex-1 flex flex-col min-w-0 h-[100dvh] overflow-hidden bg-slate-50/50">
{/* Dashboard Header */}
<DashboardHeader
isFixed={false}
showSidebarToggle={true}
hideLogo={true}
onSidebarToggle={() => setIsSidebarOpen(true)}
>
<div className="flex items-center gap-4 sm:gap-6">
<Link
href="/gig-list"
className="hidden md:flex items-center justify-center bg-emerald-500 hover:bg-emerald-600 text-white px-5 py-2 rounded-xl font-bold text-xs transition-all shadow-lg shadow-emerald-500/20 hover:-translate-y-0.5"
>
Explore Gigs
</Link>
</div>
</DashboardHeader>
<div className={isChatActive ? "hidden lg:block" : "block"}>
<DashboardHeader
isFixed={false}
showSidebarToggle={true}
hideLogo={true}
onSidebarToggle={() => setIsSidebarOpen(true)}
>
<div className="flex items-center gap-6">
<Link
href="/gig-list"
className="hidden md:flex items-center justify-center bg-emerald-500 hover:bg-emerald-600 text-white px-5 py-2 rounded-xl font-bold text-sm transition-colors shadow-sm"
>
Explore gigs
</Link>
</div>
</DashboardHeader>
</div>

<div
className="flex-1 w-full overflow-y-auto custom-scrollbar"
Expand Down
62 changes: 35 additions & 27 deletions apps/web/app/brand-dashboard/messages/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
"use client";

import React, { useState, useEffect, Suspense } from "react";
import { Search, Loader2, MessageSquare, Sparkles, Filter } from "lucide-react";
import { useSearchParams } from "next/navigation";
import { Search, Loader2, MessageSquare } from "lucide-react";
import { useSearchParams, useRouter, usePathname } from "next/navigation";

import api from "@/lib/axios.client";
import { ChatWindow } from "@/components/chat/ChatWindow";
import { useAuthStore } from "@/store/auth.store";
import { useDashboardStore } from "@/store/dashboard.store";

interface Conversation {
gigRequestId: string;
Expand All @@ -26,6 +27,8 @@ interface Conversation {

function MessagesContent() {
const searchParams = useSearchParams();
const router = useRouter();
const pathname = usePathname();
const initialGigRequestId = searchParams.get("gigRequestId");

const [searchQuery, setSearchQuery] = useState("");
Expand All @@ -35,6 +38,21 @@ function MessagesContent() {
const [fetchedConv, setFetchedConv] = useState<Conversation | null>(null);
const { user } = useAuthStore();
const currentUserId = user?.id;
const { setIsChatActive } = useDashboardStore();

useEffect(() => {
setIsChatActive(!!selectedConvId);
return () => setIsChatActive(false);
}, [selectedConvId, setIsChatActive]);

const handleSelectConv = (id: string | null) => {
setSelectedConvId(id);
if (id) {
router.push(`${pathname}?gigRequestId=${id}`);
} else {
router.push(pathname);
}
};

// Fallback for historical gig requests with no existing messages
useEffect(() => {
Expand Down Expand Up @@ -107,18 +125,13 @@ function MessagesContent() {
};

return (
<div className="px-2 sm:px-6 py-6 w-full min-h-[calc(100vh-100px)] flex flex-col max-w-[1600px] mx-auto">
<div className="flex bg-white rounded-[32px] shadow-xl shadow-slate-200/50 border border-slate-100 flex-1 overflow-hidden relative">
<div className="p-0 lg:px-4 lg:py-4 w-full h-[calc(100vh-80px)] lg:h-[calc(100vh-100px)] flex flex-col overflow-hidden">
<div className="flex bg-white rounded-none lg:rounded-[32px] shadow-none lg:shadow-xl lg:shadow-gray-100/50 border-none lg:border lg:border-gray-100 flex-1 overflow-hidden">

{/* Sidebar */}
<div className={`w-full lg:w-[380px] border-r border-slate-100 flex-col bg-slate-50/50 shrink-0 ${selectedConvId ? "hidden lg:flex" : "flex"} relative z-10`}>
<div className="p-6 pb-4">
<div className="flex items-center justify-between mb-6">
<h1 className="text-2xl font-black text-slate-900 tracking-tight">Messages</h1>
<button className="p-2 text-slate-400 hover:text-emerald-500 hover:bg-emerald-50 rounded-xl transition-all">
<Filter className="w-5 h-5" />
</button>
</div>
<div className={`w-full lg:w-[340px] border-r border-gray-100 flex flex-col bg-gray-50/30 shrink-0 ${selectedConvId ? "hidden lg:flex" : "flex"}`}>
<div className="p-6">
<h1 className="text-2xl font-black text-gray-900 mb-6">Messages</h1>
<div className="relative">
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
<Search className="w-4 h-4 text-slate-400" />
Expand Down Expand Up @@ -152,10 +165,10 @@ function MessagesContent() {
) : filteredConvs.map((conv) => (
<button
key={conv.gigRequestId}
onClick={() => setSelectedConvId(conv.gigRequestId)}
className={`w-full p-3.5 rounded-[20px] transition-all flex items-start gap-3 group text-left relative overflow-hidden ${selectedConvId === conv.gigRequestId
? "bg-white shadow-lg shadow-slate-200/50 border border-emerald-100"
: "hover:bg-white hover:shadow-sm border border-transparent"
onClick={() => handleSelectConv(conv.gigRequestId)}
className={`w-full p-4 rounded-[20px] transition-all flex items-start gap-3 group text-left ${selectedConvId === conv.gigRequestId
? "bg-white shadow-lg shadow-gray-200/50 border border-emerald-100"
: "hover:bg-white hover:shadow-md border border-transparent"
}`}
>
{selectedConvId === conv.gigRequestId && (
Expand Down Expand Up @@ -187,26 +200,21 @@ function MessagesContent() {

{/* Main Chat Area */}
{selectedConvId && activeConv && currentUserId ? (
<div className={`flex-1 flex-col min-w-0 bg-white relative z-20 ${selectedConvId ? "flex" : "hidden lg:flex"}`}>
<div className={`flex-1 flex flex-col min-w-0 border-l border-gray-100 ${selectedConvId ? "flex" : "hidden lg:flex"}`}>
<ChatWindow
currentUserId={currentUserId}
gigRequestId={selectedConvId}
receiverId={activeConv.user._id}
receiverName={activeConv.user.name}
receiverImage={activeConv.user.profileImage || undefined}
onBack={() => setSelectedConvId(null)}
onBack={() => handleSelectConv(null)}
/>
</div>
) : (
<div className={`flex-1 flex-col items-center justify-center text-slate-400 gap-6 hidden lg:flex bg-slate-50/30`}>
<div className="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-sm border border-slate-100 relative">
<MessageSquare className="w-10 h-10 text-emerald-100" />
<Sparkles className="w-6 h-6 text-emerald-400 absolute top-4 right-4" />
</div>
<div className="text-center">
<h2 className="font-black text-xl text-slate-700 mb-2">Your Inbox</h2>
<p className="text-sm font-medium text-slate-500 max-w-[280px]">Select a conversation from the sidebar to view messages, proposals, and deliverables.</p>
</div>
<div className="hidden lg:flex flex-1 flex-col items-center justify-center text-gray-400 gap-4">
<MessageSquare className="w-14 h-14 opacity-30" />
<p className="font-medium text-sm">Select a conversation to start chatting</p>
<p className="text-xs text-center max-w-[240px]">Conversations appear here once a brand&apos;s gig request is accepted</p>
</div>
)}
</div>
Expand Down
Loading
Loading