Added optimizations for mobile
This commit is contained in:
@@ -46,6 +46,7 @@ interface ChatWindowProps {
|
||||
conversation: Conversation;
|
||||
onNewMessage: () => void;
|
||||
onShowGroupSettings: () => void;
|
||||
onShowSidebar?: () => void;
|
||||
}
|
||||
|
||||
const fetcher = (url: string) => fetch(url).then((res) => res.json());
|
||||
@@ -55,6 +56,7 @@ export default function ChatWindow({
|
||||
conversation,
|
||||
onNewMessage,
|
||||
onShowGroupSettings,
|
||||
onShowSidebar,
|
||||
}: ChatWindowProps) {
|
||||
const [message, setMessage] = useState('');
|
||||
const [files, setFiles] = useState<File[]>([]);
|
||||
@@ -288,10 +290,22 @@ export default function ChatWindow({
|
||||
return (
|
||||
<div className="flex flex-col h-full">
|
||||
{/* En-tête */}
|
||||
<div className="p-4 border-b border-gray-200 flex items-center justify-between bg-white">
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="w-10 h-10 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center">
|
||||
<span className="text-white font-semibold text-sm">
|
||||
<div className="p-3 md:p-4 border-b border-gray-200 flex items-center justify-between bg-white">
|
||||
<div className="flex items-center gap-2 md:gap-3 flex-1 min-w-0">
|
||||
{/* Bouton retour sur mobile */}
|
||||
{onShowSidebar && (
|
||||
<button
|
||||
onClick={onShowSidebar}
|
||||
className="p-2 rounded-lg hover:bg-gray-100 transition-colors md:hidden flex-shrink-0"
|
||||
title="Retour aux conversations"
|
||||
>
|
||||
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 19l-7-7 7-7" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
<div className="w-8 h-8 md:w-10 md:h-10 rounded-full bg-gradient-to-br from-lblue to-dblue flex items-center justify-center flex-shrink-0">
|
||||
<span className="text-white font-semibold text-xs md:text-sm">
|
||||
{conversation.type === 'group'
|
||||
? conversation.displayName.charAt(0).toUpperCase()
|
||||
: conversation.displayName
|
||||
@@ -302,8 +316,8 @@ export default function ChatWindow({
|
||||
.slice(0, 2)}
|
||||
</span>
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-semibold text-gray-900">{conversation.displayName}</h3>
|
||||
<div className="flex-1 min-w-0">
|
||||
<h3 className="font-semibold text-gray-900 text-sm md:text-base truncate">{conversation.displayName}</h3>
|
||||
{conversation.type === 'group' && (
|
||||
<p className="text-xs text-gray-500">
|
||||
{conversation.participants.length} participant{conversation.participants.length > 1 ? 's' : ''}
|
||||
@@ -314,7 +328,7 @@ export default function ChatWindow({
|
||||
{conversation.type === 'group' && (
|
||||
<button
|
||||
onClick={onShowGroupSettings}
|
||||
className="p-2 rounded-lg hover:bg-gray-100 transition-colors"
|
||||
className="p-2 rounded-lg hover:bg-gray-100 transition-colors flex-shrink-0"
|
||||
title="Paramètres du groupe"
|
||||
>
|
||||
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
@@ -325,7 +339,7 @@ export default function ChatWindow({
|
||||
</div>
|
||||
|
||||
{/* Messages */}
|
||||
<div className="flex-1 overflow-y-auto p-4 bg-gray-50">
|
||||
<div className="flex-1 overflow-y-auto p-2 md:p-4 bg-gray-50">
|
||||
{error && (
|
||||
<div className="text-center text-red-600 py-4">
|
||||
Erreur lors du chargement des messages
|
||||
@@ -348,7 +362,7 @@ export default function ChatWindow({
|
||||
className={`flex ${isOwnMessage ? 'justify-end' : 'justify-start'}`}
|
||||
>
|
||||
<div
|
||||
className={`max-w-[70%] rounded-lg p-3 ${
|
||||
className={`max-w-[85%] md:max-w-[70%] rounded-lg p-2 md:p-3 ${
|
||||
isOwnMessage
|
||||
? 'bg-lblue text-white'
|
||||
: 'bg-white text-gray-900 border border-gray-200'
|
||||
@@ -507,19 +521,19 @@ export default function ChatWindow({
|
||||
</div>
|
||||
|
||||
{/* Zone de saisie */}
|
||||
<div className="p-4 border-t border-gray-200 bg-white">
|
||||
<div className="p-2 md:p-4 border-t border-gray-200 bg-white">
|
||||
{/* Fichiers sélectionnés */}
|
||||
{files.length > 0 && (
|
||||
<div className="mb-2 flex flex-wrap gap-2">
|
||||
{files.map((file, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="flex items-center gap-2 bg-gray-100 rounded-lg px-3 py-2 text-sm"
|
||||
className="flex items-center gap-2 bg-gray-100 rounded-lg px-2 md:px-3 py-1 md:py-2 text-xs md:text-sm"
|
||||
>
|
||||
<span className="text-gray-700">{file.name}</span>
|
||||
<span className="text-gray-700 truncate max-w-[150px] md:max-w-none">{file.name}</span>
|
||||
<button
|
||||
onClick={() => removeFile(index)}
|
||||
className="text-red-600 hover:text-red-700"
|
||||
className="text-red-600 hover:text-red-700 flex-shrink-0"
|
||||
>
|
||||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
@@ -535,7 +549,7 @@ export default function ChatWindow({
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="flex items-end gap-2">
|
||||
<div className="flex items-end gap-1 md:gap-2">
|
||||
<input
|
||||
type="file"
|
||||
ref={fileInputRef}
|
||||
@@ -546,10 +560,10 @@ export default function ChatWindow({
|
||||
/>
|
||||
<label
|
||||
htmlFor="file-input"
|
||||
className="p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer"
|
||||
className="p-1.5 md:p-2 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer flex-shrink-0"
|
||||
title="Joindre un fichier"
|
||||
>
|
||||
<svg className="w-5 h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-4 h-4 md:w-5 md:h-5 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
@@ -563,17 +577,17 @@ export default function ChatWindow({
|
||||
onChange={handleMessageChange}
|
||||
onKeyPress={handleKeyPress}
|
||||
placeholder="Tapez votre message..."
|
||||
className="flex-1 min-h-[44px] max-h-32 px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent resize-none text-gray-900 placeholder-gray-400"
|
||||
className="flex-1 min-h-[40px] md:min-h-[44px] max-h-32 px-3 md:px-4 py-2 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-lblue focus:border-transparent resize-none text-sm md:text-base text-gray-900 placeholder-gray-400"
|
||||
rows={1}
|
||||
/>
|
||||
<button
|
||||
onClick={handleSendMessage}
|
||||
disabled={(!message.trim() && files.length === 0) || isSending}
|
||||
className="p-2 rounded-lg bg-lblue text-white hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
className="p-1.5 md:p-2 rounded-lg bg-lblue text-white hover:bg-dblue transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
|
||||
title="Envoyer"
|
||||
>
|
||||
{isSending ? (
|
||||
<svg className="w-5 h-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<svg className="w-4 h-4 md:w-5 md:h-5 animate-spin" fill="none" viewBox="0 0 24 24">
|
||||
<circle
|
||||
className="opacity-25"
|
||||
cx="12"
|
||||
@@ -589,7 +603,7 @@ export default function ChatWindow({
|
||||
/>
|
||||
</svg>
|
||||
) : (
|
||||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<svg className="w-4 h-4 md:w-5 md:h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
|
||||
Reference in New Issue
Block a user