From 6035cf8d10bea596b9582b864b99bc147250bee0 Mon Sep 17 00:00:00 2001
From: "Andrey K. Choi" <a.choi@smartsoltech.kr>
Date: Sun, 9 Nov 2025 10:07:03 +0900
Subject: [PATCH] Public timeline: alternate groups left/right like dashboard

---
 .../src/app/[username]/page.tsx               | 27 +++++--------------
 1 file changed, 7 insertions(+), 20 deletions(-)

diff --git a/frontend/linktree-frontend/src/app/[username]/page.tsx b/frontend/linktree-frontend/src/app/[username]/page.tsx
index ce2f461..6961c42 100644
--- a/frontend/linktree-frontend/src/app/[username]/page.tsx
+++ b/frontend/linktree-frontend/src/app/[username]/page.tsx
@@ -652,15 +652,11 @@ export default function UserPage({
       <div className="d-flex justify-content-between align-items-center mb-4">
         <h5 className="mb-0">Группы ссылок</h5>
       </div>
-      <div className="timeline position-relative">
-        {/* Центральная линия */}
-        <div className="position-absolute start-50 translate-middle-x bg-secondary" 
-          style={{ width: '2px', height: '100%', top: '0' }}></div>
-        
+      <div className="timeline">
         {data!.groups.map((group, index) => (
-          <div key={group.id} className={`timeline-item row mb-4 ${index % 2 === 0 ? '' : 'flex-row-reverse'}`}>
-            <div className="col-md-6">
-              <div className={`card shadow-sm ${index % 2 === 0 ? 'me-3' : 'ms-3'}`}>
+          <div key={group.id} className={`timeline-item ${index % 2 === 0 ? 'left' : 'right'}`}>
+            <div className="timeline-content">
+              <div className="card">
                 <div className="card-header d-flex align-items-center">
                   {group.icon_url && designSettings.show_group_icons && (
                     <img
@@ -721,18 +717,9 @@ export default function UserPage({
                     <small className="text-muted">+{group.links.length - 5} еще...</small>
                   )}
                 </div>
-                
-                {/* Точка на временной линии */}
-                <div className={`position-absolute top-50 translate-middle-y ${index % 2 === 0 ? 'end-0' : 'start-0'}`}
-                  style={{ 
-                    [index % 2 === 0 ? 'right' : 'left']: '-20px',
-                    width: '16px',
-                    height: '16px',
-                    backgroundColor: designSettings.theme_color,
-                    borderRadius: '50%',
-                    border: '3px solid white',
-                    boxShadow: '0 0 0 2px ' + (designSettings.theme_color || '#007bff')
-                  }}></div>
+                <div className="card-footer">
+                  {/* footer intentionally left empty for public page, mirrors dashboard structure */}
+                </div>
               </div>
             </div>
           </div>