Skip to content

Commit ebb6d0f

Browse files
safwan246safwan246
authored
Merge pull request #140 from devxtra-community/features/influcer-side-responsive
influencer-side-responsive
2 parents 1ed46d2 + ab32d04 commit ebb6d0f

14 files changed

Lines changed: 668 additions & 363 deletions

File tree

‎apps/web/app/brand-dashboard/layout.tsx‎

Lines changed: 18 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ export default function BrandDashboardLayout({
2525
}) {
2626
const pathname = usePathname();
2727
const [isSidebarOpen, setIsSidebarOpen] = useState(false);
28-
const { counts, fetchCounts } = useDashboardStore();
28+
const { counts, fetchCounts, isChatActive } = useDashboardStore();
2929

3030
useEffect(() => {
3131
fetchCounts();
@@ -106,21 +106,23 @@ export default function BrandDashboardLayout({
106106
{/* Main Header & Content Area */}
107107
<main className="flex-1 flex flex-col min-w-0 h-[100dvh] overflow-hidden bg-slate-50/50">
108108
{/* Dashboard Header */}
109-
<DashboardHeader
110-
isFixed={false}
111-
showSidebarToggle={true}
112-
hideLogo={true}
113-
onSidebarToggle={() => setIsSidebarOpen(true)}
114-
>
115-
<div className="flex items-center gap-4 sm:gap-6">
116-
<Link
117-
href="/gig-list"
118-
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"
119-
>
120-
Explore Gigs
121-
</Link>
122-
</div>
123-
</DashboardHeader>
109+
<div className={isChatActive ? "hidden lg:block" : "block"}>
110+
<DashboardHeader
111+
isFixed={false}
112+
showSidebarToggle={true}
113+
hideLogo={true}
114+
onSidebarToggle={() => setIsSidebarOpen(true)}
115+
>
116+
<div className="flex items-center gap-6">
117+
<Link
118+
href="/gig-list"
119+
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"
120+
>
121+
Explore gigs
122+
</Link>
123+
</div>
124+
</DashboardHeader>
125+
</div>
124126

125127
<div
126128
className="flex-1 w-full overflow-y-auto custom-scrollbar"

‎apps/web/app/brand-dashboard/messages/page.tsx‎

Lines changed: 35 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,13 @@
11
"use client";
22

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

77
import api from "@/lib/axios.client";
88
import { ChatWindow } from "@/components/chat/ChatWindow";
99
import { useAuthStore } from "@/store/auth.store";
10+
import { useDashboardStore } from "@/store/dashboard.store";
1011

1112
interface Conversation {
1213
gigRequestId: string;
@@ -26,6 +27,8 @@ interface Conversation {
2627

2728
function MessagesContent() {
2829
const searchParams = useSearchParams();
30+
const router = useRouter();
31+
const pathname = usePathname();
2932
const initialGigRequestId = searchParams.get("gigRequestId");
3033

3134
const [searchQuery, setSearchQuery] = useState("");
@@ -35,6 +38,21 @@ function MessagesContent() {
3538
const [fetchedConv, setFetchedConv] = useState<Conversation | null>(null);
3639
const { user } = useAuthStore();
3740
const currentUserId = user?.id;
41+
const { setIsChatActive } = useDashboardStore();
42+
43+
useEffect(() => {
44+
setIsChatActive(!!selectedConvId);
45+
return () => setIsChatActive(false);
46+
}, [selectedConvId, setIsChatActive]);
47+
48+
const handleSelectConv = (id: string | null) => {
49+
setSelectedConvId(id);
50+
if (id) {
51+
router.push(`${pathname}?gigRequestId=${id}`);
52+
} else {
53+
router.push(pathname);
54+
}
55+
};
3856

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

109127
return (
110-
<div className="px-2 sm:px-6 py-6 w-full min-h-[calc(100vh-100px)] flex flex-col max-w-[1600px] mx-auto">
111-
<div className="flex bg-white rounded-[32px] shadow-xl shadow-slate-200/50 border border-slate-100 flex-1 overflow-hidden relative">
128+
<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">
129+
<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">
112130

113131
{/* Sidebar */}
114-
<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`}>
115-
<div className="p-6 pb-4">
116-
<div className="flex items-center justify-between mb-6">
117-
<h1 className="text-2xl font-black text-slate-900 tracking-tight">Messages</h1>
118-
<button className="p-2 text-slate-400 hover:text-emerald-500 hover:bg-emerald-50 rounded-xl transition-all">
119-
<Filter className="w-5 h-5" />
120-
</button>
121-
</div>
132+
<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"}`}>
133+
<div className="p-6">
134+
<h1 className="text-2xl font-black text-gray-900 mb-6">Messages</h1>
122135
<div className="relative">
123136
<div className="absolute inset-y-0 left-0 pl-4 flex items-center pointer-events-none">
124137
<Search className="w-4 h-4 text-slate-400" />
@@ -152,10 +165,10 @@ function MessagesContent() {
152165
) : filteredConvs.map((conv) => (
153166
<button
154167
key={conv.gigRequestId}
155-
onClick={() => setSelectedConvId(conv.gigRequestId)}
156-
className={`w-full p-3.5 rounded-[20px] transition-all flex items-start gap-3 group text-left relative overflow-hidden ${selectedConvId === conv.gigRequestId
157-
? "bg-white shadow-lg shadow-slate-200/50 border border-emerald-100"
158-
: "hover:bg-white hover:shadow-sm border border-transparent"
168+
onClick={() => handleSelectConv(conv.gigRequestId)}
169+
className={`w-full p-4 rounded-[20px] transition-all flex items-start gap-3 group text-left ${selectedConvId === conv.gigRequestId
170+
? "bg-white shadow-lg shadow-gray-200/50 border border-emerald-100"
171+
: "hover:bg-white hover:shadow-md border border-transparent"
159172
}`}
160173
>
161174
{selectedConvId === conv.gigRequestId && (
@@ -187,26 +200,21 @@ function MessagesContent() {
187200

188201
{/* Main Chat Area */}
189202
{selectedConvId && activeConv && currentUserId ? (
190-
<div className={`flex-1 flex-col min-w-0 bg-white relative z-20 ${selectedConvId ? "flex" : "hidden lg:flex"}`}>
203+
<div className={`flex-1 flex flex-col min-w-0 border-l border-gray-100 ${selectedConvId ? "flex" : "hidden lg:flex"}`}>
191204
<ChatWindow
192205
currentUserId={currentUserId}
193206
gigRequestId={selectedConvId}
194207
receiverId={activeConv.user._id}
195208
receiverName={activeConv.user.name}
196209
receiverImage={activeConv.user.profileImage || undefined}
197-
onBack={() => setSelectedConvId(null)}
210+
onBack={() => handleSelectConv(null)}
198211
/>
199212
</div>
200213
) : (
201-
<div className={`flex-1 flex-col items-center justify-center text-slate-400 gap-6 hidden lg:flex bg-slate-50/30`}>
202-
<div className="w-24 h-24 bg-white rounded-full flex items-center justify-center shadow-sm border border-slate-100 relative">
203-
<MessageSquare className="w-10 h-10 text-emerald-100" />
204-
<Sparkles className="w-6 h-6 text-emerald-400 absolute top-4 right-4" />
205-
</div>
206-
<div className="text-center">
207-
<h2 className="font-black text-xl text-slate-700 mb-2">Your Inbox</h2>
208-
<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>
209-
</div>
214+
<div className="hidden lg:flex flex-1 flex-col items-center justify-center text-gray-400 gap-4">
215+
<MessageSquare className="w-14 h-14 opacity-30" />
216+
<p className="font-medium text-sm">Select a conversation to start chatting</p>
217+
<p className="text-xs text-center max-w-[240px]">Conversations appear here once a brand&apos;s gig request is accepted</p>
210218
</div>
211219
)}
212220
</div>

0 commit comments

Comments
 (0)