Починка импорта, плеер для аудио

client-web/src/modules/chats/presentation/components/GroupSettings.tsx

@@ -336,7 +336,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-[720px] 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 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"
       >
         {/* Header */}
         <div className="flex items-center justify-between p-4 border-b border-border/40">
@@ -496,10 +496,10 @@ export default function GroupSettings({ chat, onClose, onGoToMessage }: GroupSet
                   <button
                     key={tab.key}
                     onClick={() => setActiveTab(tab.key)}
-                    className={`flex-1 flex flex-col items-center justify-center gap-1.5 py-3 text-[10px] font-black uppercase tracking-wider transition-all border-r last:border-r-0 border-white/5 ${
+                    className={`flex-1 flex flex-col items-center justify-center gap-2 py-4 text-[10px] font-black uppercase tracking-wider transition-all ${
                       activeTab === tab.key
-                        ? 'bg-white/5 text-knot-400'
-                        : 'text-zinc-500 hover:text-zinc-300'
+                        ? 'bg-white/10 text-knot-400 shadow-[inset_0_-2px_0_0_#A855F7]'
+                        : 'text-zinc-500 hover:text-zinc-400'
                     }`}
                   >
                     <div className="flex items-center gap-1.5 mb-0.5">
@@ -649,10 +649,7 @@ export default function GroupSettings({ chat, onClose, onGoToMessage }: GroupSet
                   renderGrouped(sortedGifs, (m, idx) => (
                       <div
                         key={m.id}
-                        onClick={() => {
-                          const eContext = { stopPropagation: () => {} } as any;
-                          onGoToMessage?.(m.messageId); 
-                        }}
+                        onClick={() => setLightboxIndex(idx)}
                         className="relative aspect-square bg-zinc-900 overflow-hidden cursor-pointer group"
                       >
                        {(m.url?.toLowerCase().endsWith('.gif') || m.filename?.toLowerCase().endsWith('.gif')) ? (
@@ -823,7 +820,10 @@ export default function GroupSettings({ chat, onClose, onGoToMessage }: GroupSet
       <AnimatePresence>
         {lightboxIndex !== null && (
           <ImageLightbox
-            images={sortedMedia.map((m) => ({ url: getMediaUrl(m.url), type: m.type }))}
+            images={(activeTab === 'gifs' ? sortedGifs : sortedMedia).map((m) => ({ 
+              url: m.url, // Already contains getMediaUrl in calculated allGifs/allMedia
+              type: activeTab === 'gifs' ? 'gif' : m.type 
+            }))}
             initialIndex={lightboxIndex}
             onClose={() => setLightboxIndex(null)}
           />