From a9b65fcea9e16409ebd4915d6d00bf5abcf7940f Mon Sep 17 00:00:00 2001
From: jlightner <jlightner@users.noreply.github.com>
Date: Tue, 31 Mar 2026 08:30:55 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20Topics=20page=20loads=20with=20all=20ca?=
 =?UTF-8?q?tegories=20collapsed;=20expand/collapse=E2=80=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- "frontend/src/pages/TopicsBrowse.tsx"
- "frontend/src/App.css"

GSD-Task: S02/T01
---
 frontend/src/App.css                | 12 ++++++++++++
 frontend/src/pages/TopicsBrowse.tsx |  8 ++++----
 2 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index d0f58f5..4aa9948 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -2315,7 +2315,19 @@ a.app-footer__repo:hover {
 
 /* ── Sub-topics inside card ───────────────────────────────────────────────── */
 
+.topic-subtopics-wrapper {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 300ms ease;
+}
+
+.topic-subtopics-wrapper[data-expanded="true"] {
+  grid-template-rows: 1fr;
+}
+
 .topic-subtopics {
+  overflow: hidden;
+  min-height: 0;
   border-top: 1px solid var(--color-border);
 }
 
diff --git a/frontend/src/pages/TopicsBrowse.tsx b/frontend/src/pages/TopicsBrowse.tsx
index 044b918..97a5ca1 100644
--- a/frontend/src/pages/TopicsBrowse.tsx
+++ b/frontend/src/pages/TopicsBrowse.tsx
@@ -34,8 +34,8 @@ export default function TopicsBrowse() {
         const data = await fetchTopics();
         if (!cancelled) {
           setCategories(data);
-          // All expanded by default
-          setExpanded(new Set(data.map((c) => c.name)));
+          // Start collapsed
+          setExpanded(new Set());
         }
       } catch (err) {
         if (!cancelled) {
@@ -151,7 +151,7 @@ export default function TopicsBrowse() {
                   </button>
                 </div>
 
-                {isExpanded && (
+                <div className="topic-subtopics-wrapper" data-expanded={isExpanded}>
                   <div className="topic-subtopics">
                     {cat.sub_topics.map((st) => {
                       const stSlug = st.name.toLowerCase().replace(/\s+/g, "-");
@@ -175,7 +175,7 @@ export default function TopicsBrowse() {
                       );
                     })}
                   </div>
-                )}
+                </div>
               </div>
             );
           })}