Pierre/MAD-Platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added optimizations for mobile

Browse Source
This commit is contained in:
Pierre
2026-02-08 15:27:44 +01:00
parent f1e9e3f8d4
commit da2e32d004
28 changed files with 1667 additions and 1075 deletions
Download Patch File Download Diff File Expand all files Collapse all files

62
components/Messagerie.tsx
View File

@@ -45,6 +45,7 @@ export default function Messagerie() {
const [selectedConversation, setSelectedConversation] = useState<string | null>(null);
const [showNewConversation, setShowNewConversation] = useState(false);
const [showGroupSettings, setShowGroupSettings] = useState(false);
const [showSidebar, setShowSidebar] = useState(false);
const { data: conversations, error, mutate } = useSWR<Conversation[]>(
'/api/conversations',
@@ -69,20 +70,41 @@ export default function Messagerie() {
};
return (
<div className="flex h-[calc(100vh-80px)] bg-white">
<div className="flex h-[calc(100vh-80px)] bg-white relative">
{/* Overlay pour mobile */}
{showSidebar && (
<div
className="fixed inset-0 bg-black/50 z-40 md:hidden"
onClick={() => setShowSidebar(false)}
/>
)}
{/* Liste des conversations */}
<div className="w-80 border-r border-gray-200 flex flex-col">
<div className={`absolute md:relative w-80 border-r border-gray-200 flex flex-col bg-white z-50 md:z-auto h-full transition-transform duration-300 ${
showSidebar ? 'translate-x-0' : '-translate-x-full md:translate-x-0'
}`}>
<div className="p-4 border-b border-gray-200 flex items-center justify-between">
<h2 className="text-lg font-semibold text-gray-900">Messages</h2>
<button
onClick={() => setShowNewConversation(true)}
className="p-2 rounded-lg bg-lblue text-white hover:bg-dblue transition-colors"
title="Nouvelle conversation"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
</button>
<div className="flex items-center gap-2">
<button
onClick={() => setShowNewConversation(true)}
className="p-2 rounded-lg bg-lblue text-white hover:bg-dblue transition-colors"
title="Nouvelle conversation"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
</svg>
</button>
<button
onClick={() => setShowSidebar(false)}
className="p-2 rounded-lg hover:bg-gray-100 transition-colors md:hidden"
title="Fermer"
>
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
</div>
</div>
<div className="flex-1 overflow-y-auto">
@@ -106,6 +128,7 @@ export default function Messagerie() {
key={conversation.id}
onClick={() => {
setSelectedConversation(conversation.id);
setShowSidebar(false); // Fermer la sidebar sur mobile après sélection
if (conversation.type === 'group') {
setShowGroupSettings(false);
}
@@ -149,7 +172,7 @@ export default function Messagerie() {
)}
</div>
{conversation.lastMessage ? (
<p className="text-sm text-gray-600 truncate">
<p className="text-xs md:text-sm text-gray-600 truncate">
{conversation.type === 'group' && conversation.lastMessage.senderName
? `${conversation.lastMessage.senderName}: `
: ''}
@@ -158,7 +181,7 @@ export default function Messagerie() {
: conversation.lastMessage.content || '📎 Fichier'}
</p>
) : (
<p className="text-sm text-gray-400 italic">Aucun message</p>
<p className="text-xs md:text-sm text-gray-400 italic">Aucun message</p>
)}
</div>
</div>
@@ -170,17 +193,18 @@ export default function Messagerie() {
</div>
{/* Fenêtre de chat */}
<div className="flex-1 flex flex-col">
<div className="flex-1 flex flex-col w-full">
{selectedConversation && selectedConv ? (
<ChatWindow
conversationId={selectedConversation}
conversation={selectedConv}
onNewMessage={handleNewMessage}
onShowGroupSettings={() => setShowGroupSettings(true)}
onShowSidebar={() => setShowSidebar(true)}
/>
) : (
<div className="flex-1 flex items-center justify-center bg-gray-50">
<div className="text-center">
<div className="text-center p-4">
<svg
className="w-16 h-16 text-gray-400 mx-auto mb-4"
fill="none"
@@ -194,7 +218,13 @@ export default function Messagerie() {
d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"
/>
</svg>
<p className="text-gray-500">Sélectionnez une conversation pour commencer</p>
<p className="text-gray-500 mb-4">Sélectionnez une conversation pour commencer</p>
<button
onClick={() => setShowSidebar(true)}
className="md:hidden px-4 py-2 bg-lblue text-white rounded-lg hover:bg-dblue transition-colors"
>
Voir les conversations
</button>
</div>
</div>
)}