feat(ui): improve clan list logic in SidebarHeader

pkgs/clan-app/ui/src/components/Sidebar/SidebarHeader.tsx

@@ -31,7 +31,11 @@ export const SidebarHeader = () => {
     ctx?.activeClanQuery?.data?.name.charAt(0).toUpperCase();
   const clanName = () => ctx?.activeClanQuery?.data?.name;
 
-  const clans = () => ctx.otherClanQueries.filter((clan) => !clan.isError);
+  const clanList = () =>
+    ctx.allClansQueries
+      .filter((it) => it.isSuccess)
+      .map((it) => it.data!)
+      .sort((a, b) => a.name.localeCompare(b.name));
 
   return (
     <div class="sidebar-header">
@@ -100,13 +104,13 @@ export const SidebarHeader = () => {
                   </Button>
                 </DropdownMenu.GroupLabel>
                 <div class="dropdown-group-items">
-                  <For each={clans()}>
+                  <For each={clanList()}>
                     {(clan) => (
                       <Suspense fallback={"Loading..."}>
                         <DropdownMenu.Item
                           class="dropdown-item"
                           onSelect={() => {
-                            setActiveClanURI(clan.data!.uri);
+                            setActiveClanURI(clan.uri);
                           }}
                         >
                           <Typography
@@ -114,7 +118,7 @@ export const SidebarHeader = () => {
                             size="xs"
                             weight="medium"
                           >
-                            {clan.data?.name}
+                            {clan.name}
                           </Typography>
                         </DropdownMenu.Item>
                       </Suspense>

pkgs/clan-app/ui/src/routes/Clan/Clan.tsx

@@ -41,6 +41,7 @@ interface ClanContextProps {
   machinesQuery: MachinesQueryResult;
   activeClanQuery: UseQueryResult<ClanDetailsWithURI>;
   otherClanQueries: UseQueryResult<ClanDetailsWithURI>[];
+  allClansQueries: UseQueryResult<ClanDetailsWithURI>[];
 
   isLoading(): boolean;
 }
@@ -48,8 +49,10 @@ interface ClanContextProps {
 class DefaultClanContext implements ClanContextProps {
   public readonly clanURI: string;
   public readonly machinesQuery: MachinesQueryResult;
+
   public readonly activeClanQuery: UseQueryResult<ClanDetailsWithURI>;
   public readonly otherClanQueries: UseQueryResult<ClanDetailsWithURI>[];
+  public readonly allClansQueries: UseQueryResult<ClanDetailsWithURI>[];
 
   allQueries: UseQueryResult[];
 
@@ -61,8 +64,10 @@ class DefaultClanContext implements ClanContextProps {
   ) {
     this.clanURI = clanURI;
     this.machinesQuery = machinesQuery;
+
     this.activeClanQuery = activeClanQuery;
     this.otherClanQueries = otherClanQueries;
+    this.allClansQueries = [activeClanQuery, ...otherClanQueries];
 
     this.allQueries = [machinesQuery, activeClanQuery, ...otherClanQueries];
   }