From 878789cf38e2a297e4f06377e0965f9ed94a0d97 Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Fri, 22 Aug 2025 12:11:22 +0100
Subject: [PATCH] feat(ui): use NavSection in ListClansModal

---
 .../ListClansModal/ListClansModal.module.css  |  9 ---------
 .../ListClansModal/ListClansModal.tsx         | 19 +++++--------------
 2 files changed, 5 insertions(+), 23 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css
index ee091fc39..a59a22a99 100644
--- a/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css
+++ b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.module.css
@@ -12,13 +12,4 @@
   .clans {
     @apply flex flex-col gap-2;
   }
-
-  .clan {
-    @apply flex items-center justify-between;
-    @apply px-4 py-5 bg-def-2;
-
-    .meta {
-      @apply flex flex-col gap-1;
-    }
-  }
 }
diff --git a/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx
index 022a5d415..a6fe0ed96 100644
--- a/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx
+++ b/pkgs/clan-app/ui/src/components/ListClansModal/ListClansModal.tsx
@@ -9,6 +9,7 @@ import { For, Show } from "solid-js";
 import { activeClanURI, clanURIs, setActiveClanURI } from "@/src/stores/clan";
 import { useClanListQuery } from "@/src/hooks/queries";
 import { Alert } from "@/src/components/Alert/Alert";
+import { NavSection } from "../NavSection/NavSection";
 
 export interface ListClansModalProps {
   onClose?: () => void;
@@ -78,20 +79,10 @@ export const ListClansModal = (props: ListClansModalProps) => {
         <ul class={cx(styles.clans)}>
           <For each={clanList()}>
             {(clan) => (
-              <li class={cx(styles.clan)}>
-                <div class={cx(styles.meta)}>
-                  <Typography hierarchy="label" weight="bold" size="default">
-                    {clan.data.name}
-                  </Typography>
-                  <Typography hierarchy="body" size="s">
-                    {clan.data.description}
-                  </Typography>
-                </div>
-
-                <Button
-                  hierarchy="secondary"
-                  ghost
-                  icon="CaretRight"
+              <li>
+                <NavSection
+                  label={clan.data.name}
+                  description={clan.data.description ?? undefined}
                   onClick={selectClan(clan.data.uri)}
                 />
               </li>