rust/forkmessager
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects 3 Releases Wiki Activity

Минимальная адаптация под мобилку

Browse Source
This commit is contained in:
Халимов Рустам
2026-04-07 12:29:41 +03:00
parent 852efa090e
commit 02043d4d97
13 changed files with 309 additions and 180 deletions
Download Patch File Download Diff File Expand all files Collapse all files
client-web/src/modules/chats/presentation/ChatPage.tsx
+5 -3
View File
@@ -373,11 +373,13 @@ export default function ChatPage() {
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="h-screen w-screen flex bg-surface-dim overflow-hidden antialiased font-body selection:bg-primary/30"
className="h-[100dvh] w-screen flex flex-col lg:flex-row bg-surface-dim overflow-hidden"
>
<GlobalNavBar activeTab={activeTab} onTabChange={setActiveTab} />
<div className={`${activeChat ? 'hidden lg:block' : 'block'}`}>
<GlobalNavBar activeTab={activeTab} onTabChange={setActiveTab} />
</div>
<main className="ml-20 flex-1 flex flex-row relative h-full">
<main className={`lg:ml-20 flex-1 flex flex-row relative h-full safe-area-bottom`}>
{activeTab === 'chats' ? (
<>
{/* Chat List (Sidebar) */}
client-web/src/modules/chats/presentation/components/ChatView.tsx
+38 -4
View File
@@ -900,13 +900,13 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
openSearch();
}
}}
className="p-2 rounded-xl hover:bg-surface-container-highest/40 transition-all duration-300 text-on-surface-variant hover:text-primary slide-on-ice"
className="hidden lg:flex p-2 rounded-xl hover:bg-surface-container-highest/40 transition-all duration-300 text-on-surface-variant hover:text-primary slide-on-ice"
>
{showSearch ? <span className="material-symbols-outlined">close</span> : <span className="material-symbols-outlined">search</span>}
</button>
{!isFavorites && config?.webRtc?.enabled && (
<>
<div className="hidden lg:flex items-center gap-1.5">
<button
onClick={() => {
if (chat.type === 'personal' && otherMember) {
@@ -931,7 +931,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
<span className="material-symbols-outlined">videocam</span>
</button>
)}
</>
</div>
)}
<div className="relative" ref={topMenuRef}>
@@ -957,6 +957,40 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
<Search size={16} />
{t('searchMessages')}
</button>
{!isFavorites && config?.webRtc?.enabled && (
<>
<button
onClick={() => {
setShowTopMenu(false);
if (chat.type === 'personal' && otherMember) {
onStartCall?.(otherMember.user, 'voice');
} else if (chat.type === 'group') {
onStartGroupCall?.(chat.id, chat.name || 'Group', 'voice');
}
}}
className="lg:hidden flex items-center gap-3 w-full px-4 py-2.5 text-sm text-zinc-300 hover:bg-surface-hover hover:text-white transition-colors"
>
<Phone size={16} />
{t('call')}
</button>
{config?.webRtc?.enableVideoCalls && (
<button
onClick={() => {
setShowTopMenu(false);
if (chat.type === 'personal' && otherMember) {
onStartCall?.(otherMember.user, 'video');
} else if (chat.type === 'group') {
onStartGroupCall?.(chat.id, chat.name || 'Group', 'video');
}
}}
className="lg:hidden flex items-center gap-3 w-full px-4 py-2.5 text-sm text-zinc-300 hover:bg-surface-hover hover:text-white transition-colors"
>
<Video size={16} />
{t('videoCall')}
</button>
)}
</>
)}
{!isFavorites && chat.type === 'personal' && otherMember && (
<button
onClick={() => {
@@ -1337,7 +1371,7 @@ export default function ChatView({ onStartCall, onStartGroupCall }: { onStartCal
</AnimatePresence>
</div>
<footer className="flex-shrink-0 bg-surface-container-lowest/40 backdrop-blur-xl border-t border-white/5 pb-safe relative z-50">
<footer className="flex-shrink-0 bg-surface-container-lowest/40 backdrop-blur-xl border-t border-white/5 safe-area-bottom relative z-50">
<MessageInput chatId={activeChat} />
</footer>
</>
client-web/src/modules/chats/presentation/components/GroupSettings.tsx
+1 -1
View File
@@ -338,7 +338,7 @@ export default function GroupSettings({ chat, onClose, onGoToMessage }: GroupSet
animate={{ opacity: 1, x: 0, scale: 1 }}
exit={{ opacity: 0, x: 50, scale: 0.95 }}
transition={{ type: 'spring', damping: 25, stiffness: 300 }}
className="fixed right-3 top-3 bottom-3 w-[900px] max-w-[calc(100%-24px)] bg-surface-secondary/90 backdrop-blur-3xl shadow-2xl shadow-black/80 border border-white/5 rounded-[2rem] z-50 flex flex-col overflow-hidden ring-1 ring-white/10"
className="fixed inset-0 lg:inset-auto lg:right-3 lg:top-3 lg:bottom-3 w-full lg:w-[900px] lg:max-w-[calc(100%-24px)] bg-surface-secondary/90 backdrop-blur-3xl shadow-2xl shadow-black/80 border-none lg:border lg:border-white/5 lg:rounded-[2rem] z-50 flex flex-col overflow-hidden ring-1 ring-white/10"
>
{/* Header */}
<div className="flex items-center justify-between p-4 border-b border-border/40">
client-web/src/modules/chats/presentation/components/NewChatModal.tsx
+2 -2
View File
@@ -124,10 +124,10 @@ export default function NewChatModal({ onClose, onOpenTelegramImport }: NewChatM
initial={{ opacity: 0, scale: 0.95, y: 20 }}
animate={{ opacity: 1, scale: 1, y: 0 }}
exit={{ opacity: 0, scale: 0.95, y: 20 }}
className="fixed inset-0 z-50 flex items-center justify-center p-4"
className="fixed inset-0 z-50 flex items-center justify-center lg:p-4"
onClick={(e) => e.target === e.currentTarget && onClose()}
>
<div className="w-full max-w-md rounded-[2.5rem] bg-surface-container/60 backdrop-blur-3xl shadow-[0_48px_80px_-16px_rgba(0,0,0,0.7)] border border-white/5 overflow-hidden flex flex-col" role="dialog" aria-modal="true" aria-label={t('newChat')}>
<div className="w-full lg:max-w-md h-full lg:h-auto lg:rounded-[2.5rem] bg-surface-container/60 backdrop-blur-3xl shadow-[0_48px_80px_-16px_rgba(0,0,0,0.7)] border-none lg:border lg:border-white/5 overflow-hidden flex flex-col" role="dialog" aria-modal="true" aria-label={t('newChat')}>
{/* Шапка */}
<div className="flex items-center justify-between p-7 pb-4">
<div className="flex items-center gap-4">