From b935807cc27cab9ebcffb33895432af48f26b55a Mon Sep 17 00:00:00 2001
From: Bivekich <biveki-dev@yandex.ru>
Date: Mon, 21 Jul 2025 14:56:53 +0300
Subject: [PATCH] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB=D0=B5?=
 =?UTF-8?q?=D0=BD=20=D0=BA=D0=BE=D0=BC=D0=BF=D0=BE=D0=BD=D0=B5=D0=BD=D1=82?=
 =?UTF-8?q?=20Lightbox=20=D0=B4=D0=BB=D1=8F=20=D0=BF=D1=80=D0=BE=D1=81?=
 =?UTF-8?q?=D0=BC=D0=BE=D1=82=D1=80=D0=B0=20=D0=B8=D0=B7=D0=BE=D0=B1=D1=80?=
 =?UTF-8?q?=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=B2=20=D0=BC=D0=B5?=
 =?UTF-8?q?=D1=81=D1=81=D0=B5=D0=BD=D0=B4=D0=B6=D0=B5=D1=80=D0=B5.=20?=
 =?UTF-8?q?=D0=A0=D0=B5=D0=B0=D0=BB=D0=B8=D0=B7=D0=BE=D0=B2=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=BB=D0=BE=D0=B3=D0=B8=D0=BA=D0=B0=20=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B1=D0=BE=D1=82=D0=BA=D0=B8=20=D0=BA=D0=BB=D0=B8?=
 =?UTF-8?q?=D0=BA=D0=BE=D0=B2=20=D0=BF=D0=BE=20=D0=B8=D0=B7=D0=BE=D0=B1?=
 =?UTF-8?q?=D1=80=D0=B0=D0=B6=D0=B5=D0=BD=D0=B8=D1=8F=D0=BC=20=D0=B4=D0=BB?=
 =?UTF-8?q?=D1=8F=20=D0=BE=D1=82=D0=BA=D1=80=D1=8B=D1=82=D0=B8=D1=8F=20?=
 =?UTF-8?q?=D0=B8=D1=85=20=D0=B2=20Lightbox.=20=D0=9E=D0=B1=D0=BD=D0=BE?=
 =?UTF-8?q?=D0=B2=D0=BB=D0=B5=D0=BD=20=D0=B8=D0=BD=D1=82=D0=B5=D1=80=D1=84?=
 =?UTF-8?q?=D0=B5=D0=B9=D1=81=20=D0=BE=D1=82=D0=BE=D0=B1=D1=80=D0=B0=D0=B6?=
 =?UTF-8?q?=D0=B5=D0=BD=D0=B8=D1=8F=20=D0=B2=D0=BB=D0=BE=D0=B6=D0=B5=D0=BD?=
 =?UTF-8?q?=D0=B8=D0=B9=20=D1=81=20=D1=83=D0=BB=D1=83=D1=87=D1=88=D0=B5?=
 =?UTF-8?q?=D0=BD=D0=BD=D0=BE=D0=B9=20=D0=BF=D0=BE=D0=B4=D0=B4=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B6=D0=BA=D0=BE=D0=B9=20=D0=B8=D0=B7=D0=BE=D0=B1=D1=80=D0=B0?=
 =?UTF-8?q?=D0=B6=D0=B5=D0=BD=D0=B8=D0=B9=20=D0=B8=20=D0=B4=D0=BE=D0=B1?=
 =?UTF-8?q?=D0=B0=D0=B2=D0=BB=D0=B5=D0=BD=D1=8B=20=D0=BF=D0=BE=D0=B4=D1=81?=
 =?UTF-8?q?=D0=BA=D0=B0=D0=B7=D0=BA=D0=B8=20=D0=B4=D0=BB=D1=8F=20=D0=BF?=
 =?UTF-8?q?=D0=BE=D0=BB=D1=8C=D0=B7=D0=BE=D0=B2=D0=B0=D1=82=D0=B5=D0=BB?=
 =?UTF-8?q?=D0=B5=D0=B9.=20=D0=9E=D0=BF=D1=82=D0=B8=D0=BC=D0=B8=D0=B7?=
 =?UTF-8?q?=D0=B8=D1=80=D0=BE=D0=B2=D0=B0=D0=BD=20=D0=BA=D0=BE=D0=B4=20?=
 =?UTF-8?q?=D0=B4=D0=BB=D1=8F=20=D0=BB=D1=83=D1=87=D1=88=D0=B5=D0=B9=20?=
 =?UTF-8?q?=D1=87=D0=B8=D1=82=D0=B0=D0=B5=D0=BC=D0=BE=D1=81=D1=82=D0=B8.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../messenger/messenger-attachments.tsx       | 98 ++++++++++++++++---
 1 file changed, 84 insertions(+), 14 deletions(-)

diff --git a/src/components/messenger/messenger-attachments.tsx b/src/components/messenger/messenger-attachments.tsx
index 6f81efb..f5e8515 100644
--- a/src/components/messenger/messenger-attachments.tsx
+++ b/src/components/messenger/messenger-attachments.tsx
@@ -8,6 +8,7 @@ import { Card } from '@/components/ui/card'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
+import { ImageLightbox } from '@/components/ui/image-lightbox'
 import { 
   FileText, 
   Image, 
@@ -51,6 +52,7 @@ interface MessengerAttachmentsProps {
 export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps) {
   const { user } = useAuth()
   const [activeTab, setActiveTab] = useState('all')
+  const [lightboxImage, setLightboxImage] = useState<{ url: string; fileName: string; fileSize?: number } | null>(null)
 
   // Загружаем все сообщения для получения вложений
   const { data: messagesData, loading } = useQuery(GET_MESSAGES, {
@@ -117,6 +119,14 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
     document.body.removeChild(link)
   }
 
+  const handleImageClick = (imageUrl: string, fileName?: string, fileSize?: number) => {
+    setLightboxImage({
+      url: imageUrl,
+      fileName: fileName || 'Изображение',
+      fileSize
+    })
+  }
+
   const renderFileIcon = (fileType?: string) => {
     if (!fileType) return <FileText className="h-4 w-4" />
     
@@ -166,18 +176,34 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
 
             {/* Содержимое вложения */}
             <div className="flex items-center justify-between bg-white/5 rounded-lg p-3">
-              <div className="flex items-center space-x-3">
-                <div className="flex items-center justify-center w-10 h-10 bg-white/10 rounded-lg">
-                  {message.type === 'IMAGE' ? (
-                    <Image className="h-5 w-5 text-blue-400" />
-                  ) : message.type === 'VOICE' ? (
-                    <Music className="h-5 w-5 text-green-400" />
-                  ) : (
-                    renderFileIcon(message.fileType)
-                  )}
-                </div>
-                <div>
-                  <p className="text-white text-sm font-medium">
+              <div className="flex items-center space-x-3 flex-1 min-w-0">
+                {/* Превью изображения или иконка */}
+                {message.type === 'IMAGE' && message.fileUrl ? (
+                  <div 
+                    className="relative w-12 h-12 rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity"
+                    onClick={() => handleImageClick(message.fileUrl!, message.fileName, message.fileSize)}
+                  >
+                    <img 
+                      src={message.fileUrl} 
+                      alt={message.fileName || 'Изображение'}
+                      className="w-full h-full object-cover"
+                    />
+                    <div className="absolute inset-0 bg-black/20 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
+                      <Image className="h-4 w-4 text-white" />
+                    </div>
+                  </div>
+                ) : (
+                  <div className="flex items-center justify-center w-10 h-10 bg-white/10 rounded-lg flex-shrink-0">
+                    {message.type === 'VOICE' ? (
+                      <Music className="h-5 w-5 text-green-400" />
+                    ) : (
+                      renderFileIcon(message.fileType)
+                    )}
+                  </div>
+                )}
+                
+                <div className="flex-1 min-w-0">
+                  <p className="text-white text-sm font-medium truncate">
                     {message.fileName || 
                      (message.type === 'VOICE' ? 'Голосовое сообщение' : 
                       message.type === 'IMAGE' ? 'Изображение' : 'Файл')}
@@ -189,13 +215,17 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
                     {message.voiceDuration && (
                       <span>{Math.floor(message.voiceDuration / 60)}:{(message.voiceDuration % 60).toString().padStart(2, '0')}</span>
                     )}
+                    {message.type === 'IMAGE' && (
+                      <span className="text-blue-300">• Нажмите для просмотра</span>
+                    )}
                   </div>
                 </div>
               </div>
               
               <button
                 onClick={() => handleDownload(message.fileUrl!, message.fileName || 'file')}
-                className="flex items-center justify-center w-8 h-8 bg-white/10 hover:bg-white/20 rounded-lg transition-colors"
+                className="flex items-center justify-center w-8 h-8 bg-white/10 hover:bg-white/20 rounded-lg transition-colors flex-shrink-0 ml-2"
+                title="Скачать файл"
               >
                 <Download className="h-4 w-4 text-white/70" />
               </button>
@@ -273,7 +303,36 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
                 </div>
               ) : (
                 <div>
-                  {imageMessages.map(renderAttachmentCard)}
+                  {/* Сетка изображений для быстрого просмотра */}
+                  <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 gap-3 mb-6">
+                    {imageMessages.map((msg) => (
+                      <div 
+                        key={`grid-${msg.id}`}
+                        className="relative aspect-square rounded-lg overflow-hidden cursor-pointer hover:opacity-80 transition-opacity group"
+                        onClick={() => handleImageClick(msg.fileUrl!, msg.fileName, msg.fileSize)}
+                      >
+                        <img 
+                          src={msg.fileUrl!} 
+                          alt={msg.fileName || 'Изображение'}
+                          className="w-full h-full object-cover"
+                        />
+                        <div className="absolute inset-0 bg-black/0 group-hover:bg-black/20 transition-colors flex items-center justify-center">
+                          <Image className="h-6 w-6 text-white opacity-0 group-hover:opacity-100 transition-opacity" />
+                        </div>
+                        <div className="absolute bottom-2 left-2 right-2">
+                          <div className="text-white text-xs truncate bg-black/50 px-2 py-1 rounded">
+                            {formatDate(msg.createdAt)}
+                          </div>
+                        </div>
+                      </div>
+                    ))}
+                  </div>
+                  
+                  {/* Детальный список карточек */}
+                  <div className="border-t border-white/10 pt-4">
+                    <h4 className="text-white/80 text-sm font-medium mb-3">Детальная информация</h4>
+                    {imageMessages.map(renderAttachmentCard)}
+                  </div>
                 </div>
               )}
             </TabsContent>
@@ -310,6 +369,17 @@ export function MessengerAttachments({ counterparty }: MessengerAttachmentsProps
           </div>
         </Tabs>
       </div>
+
+      {/* Lightbox для просмотра изображений */}
+      {lightboxImage && (
+        <ImageLightbox
+          imageUrl={lightboxImage.url}
+          fileName={lightboxImage.fileName}
+          fileSize={lightboxImage.fileSize}
+          isOpen={true}
+          onClose={() => setLightboxImage(null)}
+        />
+      )}
     </div>
   )
 } 
\ No newline at end of file