From cefd88417213ba6fd8bdc8d537001bb261977250 Mon Sep 17 00:00:00 2001
From: "Andrey K. Choi" <a.choi@smartsoltech.kr>
Date: Sun, 9 Nov 2025 12:08:35 +0900
Subject: [PATCH] Fix: Implement proper link scrolling in groups using
 ExpandableGroup component

- Replace all hardcoded group.links.slice(0, 5) with ExpandableGroup component
- Updated renderGridLayout, renderCardsLayout, renderCompactLayout, renderSidebarLayout
- Fixed icon display in ExpandableGroup component
- Improved styling for button-style links
- All group layouts now support expandable link lists with 'Show X more links' functionality
---
 .../src/app/[username]/page.tsx               | 128 ++++++------------
 .../app/components/ExpandableGroup.module.css |  28 ++--
 .../src/app/components/ExpandableGroup.tsx    |   6 +-
 3 files changed, 58 insertions(+), 104 deletions(-)

diff --git a/frontend/linktree-frontend/src/app/[username]/page.tsx b/frontend/linktree-frontend/src/app/[username]/page.tsx
index d540f67..bce0329 100644
--- a/frontend/linktree-frontend/src/app/[username]/page.tsx
+++ b/frontend/linktree-frontend/src/app/[username]/page.tsx
@@ -303,33 +303,19 @@ export default function UserPage({
                   </p>
                 )}
                 <div className="d-grid gap-2">
-                  {group.links.slice(0, 5).map((link) => (
-                    <Link
-                      key={link.id}
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="btn btn-outline-primary btn-sm d-flex align-items-center justify-content-start"
-                      style={{ 
-                        borderColor: designSettings.theme_color,
-                        color: designSettings.link_text_color || designSettings.theme_color
-                      }}
-                    >
-                      {designSettings.show_link_icons && link.icon_url && (
-                        <img
-                          src={link.icon_url}
-                          width={16}
-                          height={16}
-                          className="me-2 rounded"
-                          alt={link.title}
-                        />
-                      )}
-                      <span className="text-truncate">{link.title}</span>
-                    </Link>
-                  ))}
-                  {group.links.length > 5 && (
-                    <small className="text-muted text-center">+{group.links.length - 5} еще...</small>
-                  )}
+                  <ExpandableGroup
+                    links={group.links.map(link => ({
+                      id: link.id,
+                      title: link.title,
+                      url: link.url,
+                      description: link.description,
+                      image: designSettings.show_link_icons ? link.icon_url : undefined
+                    }))}
+                    layout="grid"
+                    initialShowCount={5}
+                    className=""
+                    linkClassName="btn btn-outline-primary btn-sm d-flex align-items-center justify-content-start"
+                  />
                 </div>
                 </div>
               </div>
@@ -476,35 +462,19 @@ export default function UserPage({
                 <i className="bi bi-star-fill text-warning ms-2"></i>
               )}
             </div>
-            <div className="row">
-              {group.links.map((link) => (
-                <div key={link.id} className="col-auto mb-1">
-                  <Link
-                    href={link.url}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                    className="btn btn-outline-secondary btn-sm d-flex align-items-center"
-                    style={{ 
-                      borderColor: designSettings.theme_color + '60',
-                      color: designSettings.link_text_color || designSettings.theme_color
-                    }}
-                  >
-                    {designSettings.show_link_icons && link.icon && (
-                      <img
-                        src={link.icon}
-                        alt=""
-                        width={16}
-                        height={16}
-                        className="me-1 rounded"
-                      />
-                    )}
-                    <small className="text-truncate" style={{ color: designSettings.link_text_color || designSettings.theme_color }}>
-                      {link.title}
-                    </small>
-                  </Link>
-                </div>
-              ))}
-            </div>
+            <ExpandableGroup
+              links={group.links.map(link => ({
+                id: link.id,
+                title: link.title,
+                url: link.url,
+                description: link.description,
+                image: designSettings.show_link_icons ? link.icon_url : undefined
+              }))}
+              layout="cards"
+              initialShowCount={10}
+              className="row"
+              linkClassName="col-auto mb-1"
+            />
           </div>
         </div>
       ))}
@@ -572,39 +542,19 @@ export default function UserPage({
                 backgroundPosition: 'center'
               }}
             >
-              <div className="row">
-                {group.links.map((link) => (
-                  <div key={link.id} className="col-12 col-md-6 col-lg-4 mb-3">
-                    <Link
-                      href={link.url}
-                      target="_blank"
-                      rel="noopener noreferrer"
-                      className="card h-100 text-decoration-none border"
-                      style={{ borderColor: designSettings.theme_color + '40' }}
-                    >
-                      <div className="card-body d-flex align-items-center">
-                        {designSettings.show_link_icons && link.icon && (
-                          <img
-                            src={link.icon}
-                            alt=""
-                            width={24}
-                            height={24}
-                            className="me-2 rounded"
-                          />
-                        )}
-                        <div>
-                          <h6 className="mb-1" style={{ color: designSettings.link_text_color || designSettings.theme_color }}>
-                            {link.title}
-                          </h6>
-                          {link.description && (
-                            <small className="text-muted">{link.description}</small>
-                          )}
-                        </div>
-                      </div>
-                    </Link>
-                  </div>
-                ))}
-              </div>
+              <ExpandableGroup
+                links={group.links.map(link => ({
+                  id: link.id,
+                  title: link.title,
+                  url: link.url,
+                  description: link.description,
+                  image: designSettings.show_link_icons ? link.icon_url : undefined
+                }))}
+                layout="cards"
+                initialShowCount={6}
+                className="row"
+                linkClassName="col-12 col-md-6 col-lg-4 mb-3"
+              />
             </div>
           </div>
         ))}
diff --git a/frontend/linktree-frontend/src/app/components/ExpandableGroup.module.css b/frontend/linktree-frontend/src/app/components/ExpandableGroup.module.css
index 55f9b1f..f242750 100644
--- a/frontend/linktree-frontend/src/app/components/ExpandableGroup.module.css
+++ b/frontend/linktree-frontend/src/app/components/ExpandableGroup.module.css
@@ -41,6 +41,10 @@
   position: relative;
   overflow: hidden;
   border-radius: 10px;
+  border: none;
+  background: white;
+  width: 100%;
+  text-align: left;
   
   &:hover {
     text-decoration: none;
@@ -53,20 +57,19 @@
 .linkInner {
   display: flex;
   align-items: center;
-  padding: 1rem;
-  background: white;
+  padding: 0.75rem;
   border-radius: 10px;
-  border: 1px solid #e9ecef;
   position: relative;
   z-index: 1;
+  width: 100%;
 }
 
 .linkIcon {
-  width: 40px;
-  height: 40px;
+  width: 20px;
+  height: 20px;
   object-fit: cover;
-  border-radius: 8px;
-  margin-right: 1rem;
+  border-radius: 4px;
+  margin-right: 0.75rem;
   flex-shrink: 0;
 }
 
@@ -76,17 +79,18 @@
 }
 
 .linkTitle {
-  margin: 0 0 0.25rem 0;
-  font-size: 1rem;
-  font-weight: 600;
+  margin: 0;
+  font-size: 0.875rem;
+  font-weight: 500;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
+  color: inherit;
 }
 
 .linkDescription {
-  margin: 0;
-  font-size: 0.875rem;
+  margin: 0.25rem 0 0 0;
+  font-size: 0.75rem;
   color: #6c757d;
   white-space: nowrap;
   overflow: hidden;
diff --git a/frontend/linktree-frontend/src/app/components/ExpandableGroup.tsx b/frontend/linktree-frontend/src/app/components/ExpandableGroup.tsx
index c7ff9e3..79681cc 100644
--- a/frontend/linktree-frontend/src/app/components/ExpandableGroup.tsx
+++ b/frontend/linktree-frontend/src/app/components/ExpandableGroup.tsx
@@ -117,7 +117,7 @@ function LinkItem({ link, layout, className = '', overlayColor, overlayOpacity }
         href={link.url}
         target="_blank"
         rel="noopener noreferrer"
-        className={`${styles.linkContent} link-item ${layout}-link`}
+        className={`${styles.linkContent} link-item ${layout}-link btn btn-outline-primary btn-sm d-flex align-items-center justify-content-start`}
       >
         <div className={styles.linkInner}>
           {link.image && (
@@ -128,9 +128,9 @@ function LinkItem({ link, layout, className = '', overlayColor, overlayOpacity }
             />
           )}
           <div className={styles.linkInfo}>
-            <h6 className={styles.linkTitle}>{link.title}</h6>
+            <span className={styles.linkTitle}>{link.title}</span>
             {link.description && (
-              <p className={styles.linkDescription}>{link.description}</p>
+              <small className={styles.linkDescription}>{link.description}</small>
             )}
           </div>
         </div>