From 9834f413cc00506816cad2cd9ff2be1ee5bbd62a Mon Sep 17 00:00:00 2001
From: Brian McGee <brian@bmcgee.ie>
Date: Wed, 20 Aug 2025 15:04:37 +0100
Subject: [PATCH] feat(ui): introduce Add clan button into sidebar

---
 .../src/components/Sidebar/SidebarHeader.css  |  1 +
 .../src/components/Sidebar/SidebarHeader.tsx  | 13 +++++++++-
 .../ui/src/routes/Onboarding/Onboarding.tsx   | 26 ++++++++++++++++---
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.css b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.css
index c1fcb541f..43ffd4e6e 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.css
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.css
@@ -58,6 +58,7 @@ div.sidebar-header {
     @apply px-1;
 
     .dropdown-group-label {
+      @apply flex items-baseline justify-between w-full;
     }
 
     .dropdown-group-items {
diff --git a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx
index 968617a2c..3b5c7db33 100644
--- a/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx
+++ b/pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx
@@ -7,6 +7,7 @@ import { createSignal, For, Suspense } from "solid-js";
 import { useClanListQuery } from "@/src/hooks/queries";
 import { navigateToClan, useClanURI } from "@/src/hooks/clan";
 import { clanURIs } from "@/src/stores/clan";
+import { Button } from "../Button/Button";
 
 export const SidebarHeader = () => {
   const navigate = useNavigate();
@@ -71,9 +72,19 @@ export const SidebarHeader = () => {
                     family="mono"
                     size="xs"
                     color="tertiary"
+                    transform="uppercase"
                   >
-                    YOUR CLANS
+                    Your Clans
                   </Typography>
+                  <Button
+                    hierarchy="secondary"
+                    ghost
+                    size="xs"
+                    startIcon="Plus"
+                    onClick={() => navigate("/?addClan=true")}
+                  >
+                    Add
+                  </Button>
                 </DropdownMenu.GroupLabel>
                 <div class="dropdown-group-items">
                   <For each={allClans}>
diff --git a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx
index c50edfbb2..64bce325e 100644
--- a/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx
+++ b/pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.tsx
@@ -6,7 +6,11 @@ import {
   Setter,
   Switch,
 } from "solid-js";
-import { RouteSectionProps, useNavigate } from "@solidjs/router";
+import {
+  RouteSectionProps,
+  useNavigate,
+  useSearchParams,
+} from "@solidjs/router";
 import "./Onboarding.css";
 import { Typography } from "@/src/components/Typography/Typography";
 import { Button } from "@/src/components/Button/Button";
@@ -139,15 +143,21 @@ const welcome = (props: {
 
 export const Onboarding: Component<RouteSectionProps> = (props) => {
   const navigate = useNavigate();
+  const [searchParams] = useSearchParams();
 
   const activeURI = activeClanURI();
-  if (activeURI) {
+
+  console.log("onboarding params", searchParams.addClan);
+
+  if (!searchParams.addClan && activeURI) {
     // the user has already selected a clan, so we should navigate to it
     console.log("active clan detected, navigating to it", activeURI);
     navigateToClan(navigate, activeURI);
   }
 
-  const [state, setState] = createSignal<State>("welcome");
+  const [state, setState] = createSignal<State>(
+    searchParams.addClan ? "setup" : "welcome",
+  );
 
   // used to display an error in the welcome screen in the event of a failed
   // clan creation
@@ -270,7 +280,15 @@ export const Onboarding: Component<RouteSectionProps> = (props) => {
                   hierarchy="secondary"
                   ghost={true}
                   icon="ArrowLeft"
-                  onClick={() => setState("welcome")}
+                  onClick={() => {
+                    // if we arrived here by way of adding a clan then we return to the active clan
+                    if (searchParams.addClan && activeURI) {
+                      navigateToClan(navigate, activeURI);
+                    }
+
+                    // otherwise we return to the initial welcome screen
+                    setState("welcome");
+                  }}
                 />
                 <Typography hierarchy="headline" size="default" weight="bold">
                   Setup