Рабочий чат
This commit is contained in:
@@ -7,12 +7,13 @@ import { ChatApi } from '../infrastructure/chatApi';
|
||||
import { playNotificationSound, isChatMuted, playCallRingtone, stopCallRingtone } from '../../../core/utils/sounds';
|
||||
import { useLang } from '../../../core/infrastructure/i18n';
|
||||
import type { Message, UserBasic, CallInfo, ChatMember } from '../../../core/domain/types';
|
||||
import { Send, Check, Phone, PhoneOff } from 'lucide-react';
|
||||
import { Send, Check, Phone, PhoneOff, Users } from 'lucide-react';
|
||||
import Sidebar from '../../../core/presentation/layouts/Sidebar';
|
||||
import GlobalNavBar from '../../../core/presentation/layouts/GlobalNavBar';
|
||||
import ChatView from './components/ChatView';
|
||||
import CallModal from '../../calls/presentation/components/CallModal';
|
||||
import GroupCallModal from '../../calls/presentation/components/GroupCallModal';
|
||||
import ContactsSidebar from '../../friends/presentation/components/ContactsSidebar';
|
||||
|
||||
export default function ChatPage() {
|
||||
const {
|
||||
@@ -57,6 +58,7 @@ export default function ChatPage() {
|
||||
const groupCallOpenRef = useRef(false);
|
||||
const groupCallChatIdRef = useRef('');
|
||||
|
||||
const [activeTab, setActiveTab] = useState('chats');
|
||||
const { t } = useLang();
|
||||
|
||||
useEffect(() => {
|
||||
@@ -365,22 +367,58 @@ export default function ChatPage() {
|
||||
exit={{ opacity: 0 }}
|
||||
className="h-screen w-screen flex bg-surface-dim overflow-hidden antialiased font-body selection:bg-primary/30"
|
||||
>
|
||||
<GlobalNavBar activeTab="chats" onTabChange={() => {}} />
|
||||
<GlobalNavBar activeTab={activeTab} onTabChange={setActiveTab} />
|
||||
|
||||
<main className="ml-20 flex-1 flex flex-row relative h-full">
|
||||
{/* Chat List (Sidebar) */}
|
||||
<div
|
||||
className={`${activeChat ? 'hidden lg:block' : 'block'} w-full lg:w-[360px] flex-shrink-0 bg-surface-container-low tonal-transition-no-border h-full`}
|
||||
>
|
||||
<Sidebar />
|
||||
</div>
|
||||
{activeTab === 'chats' ? (
|
||||
<>
|
||||
{/* Chat List (Sidebar) */}
|
||||
<div
|
||||
className={`${activeChat ? 'hidden lg:block' : 'block'} w-full lg:w-[360px] flex-shrink-0 bg-surface-container-low h-full overflow-hidden`}
|
||||
>
|
||||
<Sidebar />
|
||||
</div>
|
||||
|
||||
{/* Selected Chat View (Main Area) */}
|
||||
<div
|
||||
className={`${activeChat ? 'block' : 'hidden lg:block'} flex-1 h-full min-w-0 bg-surface-container-lowest m-4 rounded-3xl overflow-hidden relative group slide-on-ice`}
|
||||
>
|
||||
<ChatView onStartCall={handleStartCall} onStartGroupCall={handleStartGroupCall} />
|
||||
</div>
|
||||
{/* Selected Chat View (Main Area) */}
|
||||
<div
|
||||
className={`${activeChat ? 'block' : 'hidden lg:block'} flex-1 h-full min-w-0 bg-surface-container-lowest m-4 rounded-3xl overflow-hidden relative group slide-on-ice`}
|
||||
>
|
||||
<ChatView onStartCall={handleStartCall} onStartGroupCall={handleStartGroupCall} />
|
||||
</div>
|
||||
</>
|
||||
) : activeTab === 'contacts' ? (
|
||||
<div className="flex-1 flex flex-row h-full overflow-hidden">
|
||||
{/* Contacts Sidebar List */}
|
||||
<div className="w-full lg:w-[360px] flex-shrink-0 bg-surface-container-low h-full overflow-hidden antialiased">
|
||||
<ContactsSidebar onSwitchToChat={() => setActiveTab('chats')} />
|
||||
</div>
|
||||
|
||||
{/* Right side placeholder / Profile detail */}
|
||||
<div className="hidden lg:flex flex-1 items-center justify-center bg-surface-base m-4 rounded-3xl overflow-hidden border border-white/5 relative slide-on-ice">
|
||||
<div className="flex flex-col items-center gap-6 max-w-sm text-center">
|
||||
<div className="w-24 h-24 rounded-3xl bg-primary/10 flex items-center justify-center text-primary shadow-inner">
|
||||
<Users size={48} className="knot-logo-spin opacity-50" />
|
||||
</div>
|
||||
<div>
|
||||
<h2 className="text-xl font-bold text-white mb-2">{t('contacts')}</h2>
|
||||
<p className="text-sm text-zinc-500 leading-relaxed max-w-[280px]">
|
||||
{t('selectContactToChat')}
|
||||
</p>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setActiveTab('chats')}
|
||||
className="px-8 py-3 rounded-2xl bg-primary text-on-primary shadow-lg shadow-primary/20 hover:scale-105 active:scale-95 transition-all text-sm font-bold tracking-tight"
|
||||
>
|
||||
{t('backToChats')}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex-1 flex items-center justify-center">
|
||||
<p className="text-zinc-500">Coming soon</p>
|
||||
</div>
|
||||
)}
|
||||
</main>
|
||||
<CallModal
|
||||
key={callSessionId}
|
||||
|
||||
Reference in New Issue
Block a user