From 68fca1683e0b6637b2e6a555b0d6b12674ccca21 Mon Sep 17 00:00:00 2001
From: glpshchn <464976@niuitmo.ru>
Date: Mon, 8 Dec 2025 18:36:51 +0300
Subject: [PATCH] Update files

---
 frontend/src/components/FollowListModal.css |  30 ++++--
 frontend/src/components/PostCard.css        |  55 ++++++++++
 frontend/src/components/PostCard.jsx        | 108 ++++++++++++++++----
 frontend/src/pages/UserProfile.css          |  35 +++++++
 4 files changed, 195 insertions(+), 33 deletions(-)

diff --git a/frontend/src/components/FollowListModal.css b/frontend/src/components/FollowListModal.css
index 443248e..7a01ba2 100644
--- a/frontend/src/components/FollowListModal.css
+++ b/frontend/src/components/FollowListModal.css
@@ -103,11 +103,12 @@
 }
 
 .user-item-wrapper {
-  padding: 8px 16px;
+  padding: 12px 16px;
   display: flex;
   align-items: center;
   gap: 12px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.03);
+  min-height: 70px;
 }
 
 .user-item-wrapper:last-child {
@@ -128,6 +129,7 @@
   border-radius: 0;
   position: relative;
   flex: 1;
+  min-width: 0;
   min-height: 54px;
 }
 
@@ -152,39 +154,44 @@
   min-width: 0;
   display: flex;
   flex-direction: column;
-  gap: 2px;
+  gap: 4px;
   text-align: left;
   align-items: flex-start;
   justify-content: center;
+  overflow: hidden;
 }
 
 .follow-list-modal .user-name {
   font-size: 15px !important;
   font-weight: 600;
   color: var(--text-primary);
-  line-height: 1.3;
+  line-height: 1.4;
+  width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: block;
 }
 
 .follow-list-modal .user-username {
-  font-size: 14px !important;
+  font-size: 13px !important;
   color: var(--text-secondary);
-  line-height: 1.3;
+  line-height: 1.4;
+  width: 100%;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  display: block;
 }
 
 /* Follow Button Icon */
 .follow-btn-icon {
-  width: 54px !important;
-  height: 54px !important;
-  min-width: 54px !important;
-  min-height: 54px !important;
-  max-width: 54px !important;
-  max-height: 54px !important;
+  width: 48px !important;
+  height: 48px !important;
+  min-width: 48px !important;
+  min-height: 48px !important;
+  max-width: 48px !important;
+  max-height: 48px !important;
   border-radius: 50%;
   background: var(--bg-primary);
   color: var(--text-primary);
@@ -195,6 +202,7 @@
   cursor: pointer;
   transition: all 0.2s ease;
   flex-shrink: 0;
+  margin-left: auto;
 }
 
 .follow-btn-icon:active {
diff --git a/frontend/src/components/PostCard.css b/frontend/src/components/PostCard.css
index 6aea3f5..5d47e80 100644
--- a/frontend/src/components/PostCard.css
+++ b/frontend/src/components/PostCard.css
@@ -256,6 +256,36 @@
   opacity: 0.8;
 }
 
+/* Зоны для переключения изображений в ленте */
+.carousel-zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 3;
+  pointer-events: auto;
+}
+
+.carousel-zone-left {
+  left: 0;
+  width: 40%;
+}
+
+.carousel-zone-right {
+  right: 0;
+  width: 35%;
+}
+
+.carousel-zone-center {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  pointer-events: auto;
+  cursor: pointer;
+}
+
 /* Fullview модал */
 .image-fullview {
   position: fixed;
@@ -345,6 +375,25 @@
   pointer-events: none;
 }
 
+/* Зоны для переключения изображений в fullview */
+.fullview-zone {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 5;
+  pointer-events: auto;
+}
+
+.fullview-zone-left {
+  left: 0;
+  width: 40%;
+}
+
+.fullview-zone-right {
+  right: 0;
+  width: 35%;
+}
+
 .fullview-nav-btn {
   position: absolute;
   top: 50%;
@@ -361,6 +410,8 @@
   transition: background 0.2s, opacity 0.2s;
   z-index: 10;
   pointer-events: auto;
+  border: none;
+  cursor: pointer;
 }
 
 .fullview-nav-btn.prev {
@@ -375,6 +426,10 @@
   background: rgba(0, 0, 0, 0.7);
 }
 
+.fullview-nav-btn:disabled {
+  cursor: not-allowed;
+}
+
 .fullview-dots {
   position: fixed;
   bottom: 0;
diff --git a/frontend/src/components/PostCard.jsx b/frontend/src/components/PostCard.jsx
index 77a895c..f882cd7 100644
--- a/frontend/src/components/PostCard.jsx
+++ b/frontend/src/components/PostCard.jsx
@@ -197,23 +197,58 @@ export default function PostCard({ post, currentUser, onUpdate }) {
       {/* Изображения */}
       {images.length > 0 && (
         <div className="post-images">
-          <div className="image-carousel" onClick={openFullView} style={{ cursor: 'pointer' }}>
+          <div className="image-carousel" style={{ cursor: 'pointer', position: 'relative' }}>
             <img src={images[currentImageIndex]} alt={`Image ${currentImageIndex + 1}`} />
             
-            {images.length > 1 && (
-              <div className="carousel-dots">
-                {images.map((_, index) => (
-                  <span 
-                    key={index} 
-                    className={`dot ${index === currentImageIndex ? 'active' : ''}`}
-                    onClick={(e) => { e.stopPropagation(); setCurrentImageIndex(index); }}
-                  />
-                ))}
-              </div>
+            {images.length > 1 ? (
+              <>
+                {/* Левая зона для переключения на предыдущее изображение */}
+                <div 
+                  className="carousel-zone carousel-zone-left"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (currentImageIndex > 0) {
+                      handlePrev()
+                    }
+                  }}
+                  style={{ cursor: currentImageIndex > 0 ? 'pointer' : 'default' }}
+                />
+                
+                {/* Правая зона для переключения на следующее изображение */}
+                <div 
+                  className="carousel-zone carousel-zone-right"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (currentImageIndex < images.length - 1) {
+                      handleNext()
+                    }
+                  }}
+                  style={{ cursor: currentImageIndex < images.length - 1 ? 'pointer' : 'default' }}
+                />
+                
+                <div className="carousel-dots">
+                  {images.map((_, index) => (
+                    <span 
+                      key={index} 
+                      className={`dot ${index === currentImageIndex ? 'active' : ''}`}
+                      onClick={(e) => { e.stopPropagation(); setCurrentImageIndex(index); }}
+                    />
+                  ))}
+                </div>
+              </>
+            ) : (
+              /* Если одно изображение, вся область открывает fullview */
+              <div 
+                className="carousel-zone carousel-zone-center"
+                onClick={(e) => {
+                  e.stopPropagation()
+                  openFullView()
+                }}
+              />
             )}
             
             {/* Индикатор что можно открыть fullview */}
-            <div className="fullview-hint">
+            <div className="fullview-hint" onClick={(e) => { e.stopPropagation(); openFullView(); }}>
               <ZoomIn size={20} />
             </div>
           </div>
@@ -318,17 +353,46 @@ export default function PostCard({ post, currentUser, onUpdate }) {
             
             {images.length > 1 && (
               <>
-                {currentImageIndex > 0 && (
-                  <button className="fullview-nav-btn prev" onClick={(e) => { e.stopPropagation(); handlePrev(); }}>
-                    <ChevronLeft size={32} />
-                  </button>
-                )}
+                {/* Левая зона для переключения на предыдущее изображение */}
+                <div 
+                  className="fullview-zone fullview-zone-left"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (currentImageIndex > 0) {
+                      handlePrev()
+                    }
+                  }}
+                />
                 
-                {currentImageIndex < images.length - 1 && (
-                  <button className="fullview-nav-btn next" onClick={(e) => { e.stopPropagation(); handleNext(); }}>
-                    <ChevronRight size={32} />
-                  </button>
-                )}
+                {/* Правая зона для переключения на следующее изображение */}
+                <div 
+                  className="fullview-zone fullview-zone-right"
+                  onClick={(e) => {
+                    e.stopPropagation()
+                    if (currentImageIndex < images.length - 1) {
+                      handleNext()
+                    }
+                  }}
+                />
+                
+                {/* Кнопки навигации - всегда видимые, но неактивные когда нельзя переключить */}
+                <button 
+                  className="fullview-nav-btn prev" 
+                  onClick={(e) => { e.stopPropagation(); handlePrev(); }}
+                  disabled={currentImageIndex === 0}
+                  style={{ opacity: currentImageIndex === 0 ? 0.3 : 1 }}
+                >
+                  <ChevronLeft size={32} />
+                </button>
+                
+                <button 
+                  className="fullview-nav-btn next" 
+                  onClick={(e) => { e.stopPropagation(); handleNext(); }}
+                  disabled={currentImageIndex === images.length - 1}
+                  style={{ opacity: currentImageIndex === images.length - 1 ? 0.3 : 1 }}
+                >
+                  <ChevronRight size={32} />
+                </button>
               </>
             )}
           </div>
diff --git a/frontend/src/pages/UserProfile.css b/frontend/src/pages/UserProfile.css
index d49da5a..4e86e4b 100644
--- a/frontend/src/pages/UserProfile.css
+++ b/frontend/src/pages/UserProfile.css
@@ -94,6 +94,41 @@
   border-top: 1px solid var(--divider-color);
 }
 
+.stat-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 4px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  flex: 1;
+  max-width: 120px;
+}
+
+.stat-item:active {
+  opacity: 0.7;
+}
+
+.stat-value {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--text-primary);
+  line-height: 1.2;
+}
+
+.stat-label {
+  font-size: 14px;
+  color: var(--text-secondary);
+  line-height: 1.2;
+}
+
+.stat-divider {
+  width: 1px;
+  height: 40px;
+  background: var(--divider-color);
+  flex-shrink: 0;
+}
+
 .follow-btn {
   width: 100%;
   padding: 12px;