Allow organization creation on signup

Signed-off-by: gearnode <bryan@frimin.fr>

apps/console/src/components/AppSidebar.tsx

@@ -32,34 +32,43 @@ import {
 import type { AppSidebarQuery as AppSidebarQueryType } from "./__generated__/AppSidebarQuery.graphql";
 import { TeamSwitcher } from "@/components/TeamSwitcher";
 
-function getNavItems(organizationId: string) {
+function getNavItems(organizationId?: string) {
+  // Always return the same structure, but with or without URLs depending on whether an organization is selected
   return {
     navMain: [
       {
         title: "Frameworks",
-        url: `/organizations/${organizationId}/frameworks`,
+        url: organizationId
+          ? `/organizations/${organizationId}/frameworks`
+          : undefined,
         icon: BookOpen,
       },
       {
         title: "Organizations",
         icon: Building,
-        url: `/organizations/${organizationId}/peoples`,
-        items: [
-          {
-            title: "Peoples",
-            url: `/organizations/${organizationId}/peoples`,
-            icon: Users,
-          },
-          {
-            title: "Vendors",
-            url: `/organizations/${organizationId}/vendors`,
-            icon: ToyBrick,
-          },
-        ],
+        url: organizationId
+          ? `/organizations/${organizationId}/peoples`
+          : undefined,
+        items: organizationId
+          ? [
+              {
+                title: "Peoples",
+                url: `/organizations/${organizationId}/peoples`,
+                icon: Users,
+              },
+              {
+                title: "Vendors",
+                url: `/organizations/${organizationId}/vendors`,
+                icon: ToyBrick,
+              },
+            ]
+          : [],
       },
       {
         title: "Settings",
-        url: `/organizations/${organizationId}/settings`,
+        url: organizationId
+          ? `/organizations/${organizationId}/settings`
+          : undefined,
         icon: Settings,
       },
     ],
@@ -96,7 +105,7 @@ function AppSidebarContent({
 }) {
   const { organizationId } = useParams();
   const data = usePreloadedQuery(AppSidebarQuery, queryRef);
-  const navItems = getNavItems(organizationId!);
+  const navItems = getNavItems(organizationId);
 
   return (
     <Sidebar variant="inset" {...props}>

apps/console/src/components/NavMain.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { ChevronRight, type LucideIcon } from "lucide-react";
-import { Link, useLocation } from "react-router";
+import { Link, useLocation, useParams } from "react-router";
 
 import {
   Collapsible,
@@ -35,15 +35,62 @@ export function NavMain({
   }[];
 }) {
   const location = useLocation();
+  const { organizationId } = useParams();
+
+  const noOrganizationSelected = organizationId === undefined;
+
+  if (noOrganizationSelected) {
+    return (
+      <SidebarGroup>
+        <SidebarGroupLabel>
+          <div className="h-4 w-28 rounded-md bg-gray-200 animate-pulse" />
+        </SidebarGroupLabel>
+        <SidebarMenu className="space-y-1.5">
+          {/* First item - simple item */}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="animate-pulse">
+              <div className="h-4 w-4 rounded-md bg-gray-200" />
+              <div className="h-4 w-32 rounded-md bg-gray-200 ml-2" />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+
+          {/* Second item - with dropdown */}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="animate-pulse">
+              <div className="h-4 w-4 rounded-md bg-gray-200" />
+              <div className="h-4 w-28 rounded-md bg-gray-200 ml-2" />
+              <div className="ml-auto">
+                <div className="h-4 w-4 rounded-md bg-gray-200" />
+              </div>
+            </SidebarMenuButton>
+            <SidebarMenuSub>
+              {[1, 2].map((i) => (
+                <SidebarMenuSubItem key={i}>
+                  <SidebarMenuSubButton className="animate-pulse pl-8">
+                    <div className="h-3 w-20 rounded-md bg-gray-200" />
+                  </SidebarMenuSubButton>
+                </SidebarMenuSubItem>
+              ))}
+            </SidebarMenuSub>
+          </SidebarMenuItem>
+
+          {/* Third item - simple item */}
+          <SidebarMenuItem>
+            <SidebarMenuButton className="animate-pulse">
+              <div className="h-4 w-4 rounded-md bg-gray-200" />
+              <div className="h-4 w-24 rounded-md bg-gray-200 ml-2" />
+            </SidebarMenuButton>
+          </SidebarMenuItem>
+        </SidebarMenu>
+      </SidebarGroup>
+    );
+  }
 
-  // Determine if an item is active based on the current route
   const isItemActive = (item: { url?: string; items?: { url: string }[] }) => {
-    // If the item has a URL and it matches the current path
     if (item.url && location.pathname.startsWith(item.url)) {
       return true;
     }
 
-    // If the item has sub-items, check if any of them match the current path
     if (item.items?.length) {
       return item.items.some((subItem) =>
         location.pathname.startsWith(subItem.url),

apps/console/src/components/NavSecondary.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { type LucideIcon } from "lucide-react";
+import { useLocation } from "react-router";
 
 import {
   SidebarGroup,
@@ -19,17 +20,53 @@ export function NavSecondary({
     icon: LucideIcon;
   }[];
 } & React.ComponentPropsWithoutRef<typeof SidebarGroup>) {
+  const location = useLocation();
+  const noOrganizationSelected = location.pathname === "/";
+
+  if (noOrganizationSelected) {
+    return (
+      <SidebarGroup {...props}>
+        <SidebarGroupContent>
+          <SidebarMenu>
+            {[1, 2].map((i) => (
+              <SidebarMenuItem key={i}>
+                <SidebarMenuButton size="sm" className="animate-pulse">
+                  <div className="h-3 w-3 rounded-lg bg-gray-200" />
+                  <div className="h-3 w-16 rounded-lg bg-gray-200 ml-2" />
+                </SidebarMenuButton>
+              </SidebarMenuItem>
+            ))}
+          </SidebarMenu>
+        </SidebarGroupContent>
+      </SidebarGroup>
+    );
+  }
+
   return (
     <SidebarGroup {...props}>
       <SidebarGroupContent>
         <SidebarMenu>
           {items.map((item) => (
             <SidebarMenuItem key={item.title}>
-              <SidebarMenuButton asChild size="sm">
-                <a href={item.url}>
-                  <item.icon />
-                  <span>{item.title}</span>
-                </a>
+              <SidebarMenuButton
+                asChild={item.url !== "#"}
+                size="sm"
+                tooltip={item.title}
+                className={
+                  item.url === "#" ? "opacity-50 cursor-not-allowed" : ""
+                }
+              >
+                {item.url !== "#" ? (
+                  <a href={item.url}>
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </a>
+                ) : (
+                  <>
+                    <item.icon />
+                    <span>{item.title}</span>
+                  </>
+                )}
               </SidebarMenuButton>
             </SidebarMenuItem>
           ))}

apps/console/src/components/NavUser.tsx

@@ -9,7 +9,7 @@ import {
   Sparkles,
 } from "lucide-react";
 import { graphql, useFragment } from "react-relay";
-import { useNavigate } from "react-router";
+import { useNavigate, useParams } from "react-router";
 
 import { Avatar, AvatarFallback } from "@/components/ui/avatar";
 import {
@@ -43,12 +43,31 @@ export function NavUser({ viewer }: { viewer: NavUser_viewer$key }) {
   const currentUser = useFragment(navUserFragment, viewer);
   const { logout } = useAuth();
   const navigate = useNavigate();
+  const { organizationId } = useParams();
+  const noOrganizationSelected = !organizationId;
 
   const handleLogout = async () => {
     await logout();
     navigate("/login");
   };
 
+  if (noOrganizationSelected) {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" className="animate-pulse">
+            <div className="h-8 w-8 rounded-lg bg-gray-200" />
+            <div className="flex-1 space-y-1">
+              <div className="h-4 w-3/4 rounded-lg bg-gray-200" />
+              <div className="h-3 w-1/2 rounded-lg bg-gray-200" />
+            </div>
+            <div className="ml-auto h-4 w-4 rounded-lg bg-gray-200" />
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+  }
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>

apps/console/src/components/TeamSwitcher.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import { useState, useEffect } from "react";
-import { ChevronsUpDown, Plus } from "lucide-react";
+import { ChevronsUpDown, Plus, Building } from "lucide-react";
 import { graphql, useFragment } from "react-relay";
 import { Link, useNavigate, useParams } from "react-router";
 
@@ -67,26 +67,41 @@ export function TeamSwitcher({
   const { organizationId } = useParams();
   const [currentOrganization, setCurrentOrganization] =
     useState<Organization | null>(null);
+  const hasOrganizations =
+    data.organizations && data.organizations.edges.length > 0;
 
   useEffect(() => {
-    if (data.organizations && data.organizations.edges.length > 0) {
+    if (hasOrganizations) {
       const org = data.organizations.edges.find(
-        (edge) => edge.node.id === organizationId
+        (edge) => edge.node.id === organizationId,
       );
       if (org) {
         setCurrentOrganization(org.node);
       }
     }
-  }, [data.organizations, organizationId]);
-
-  if (!currentOrganization) {
-    return null;
-  }
+  }, [data.organizations, organizationId, hasOrganizations]);
 
   const handleOrganizationSwitch = (org: Organization) => {
     navigate(`/organizations/${org.id}`);
   };
 
+  if (!hasOrganizations) {
+    return (
+      <SidebarMenu>
+        <SidebarMenuItem>
+          <SidebarMenuButton size="lg" className="animate-pulse">
+            <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-gray-200" />
+            <div className="flex-1 space-y-1">
+              <div className="h-4 w-3/4 rounded-lg bg-gray-200" />
+              <div className="h-3 w-1/2 rounded-lg bg-gray-200" />
+            </div>
+            <div className="ml-auto h-4 w-4 rounded-lg bg-gray-200" />
+          </SidebarMenuButton>
+        </SidebarMenuItem>
+      </SidebarMenu>
+    );
+  }
+
   return (
     <SidebarMenu>
       <SidebarMenuItem>
@@ -94,18 +109,42 @@ export function TeamSwitcher({
           <DropdownMenuTrigger asChild>
             <SidebarMenuButton
               size="lg"
-              className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
+              className={`data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground ${
+                !currentOrganization
+                  ? "border border-dashed border-gray-400"
+                  : ""
+              }`}
             >
               <div className="flex aspect-square size-8 items-center justify-center rounded-lg bg-sidebar-primary text-sidebar-primary-foreground">
-                <LogoComponent org={currentOrganization} className="size-4" />
+                {currentOrganization ? (
+                  <LogoComponent org={currentOrganization} className="size-4" />
+                ) : (
+                  <Building className="size-4 text-gray-400" />
+                )}
               </div>
               <div className="grid flex-1 text-left text-sm leading-tight">
-                <span className="truncate font-semibold">
-                  {currentOrganization.name}
+                <span
+                  className={`truncate font-semibold ${
+                    !currentOrganization ? "text-gray-500" : ""
+                  }`}
+                >
+                  {currentOrganization
+                    ? currentOrganization.name
+                    : "Select Organization"}
+                </span>
+                <span
+                  className={`truncate text-xs ${
+                    !currentOrganization ? "text-gray-400" : ""
+                  }`}
+                >
+                  {currentOrganization ? "Free" : "No organization selected"}
                 </span>
-                <span className="truncate text-xs">Free</span>
               </div>
-              <ChevronsUpDown className="ml-auto" />
+              <ChevronsUpDown
+                className={`ml-auto ${
+                  !currentOrganization ? "text-gray-400" : ""
+                }`}
+              />
             </SidebarMenuButton>
           </DropdownMenuTrigger>
           <DropdownMenuContent
@@ -117,19 +156,25 @@ export function TeamSwitcher({
             <DropdownMenuLabel className="text-xs text-muted-foreground">
               Organizations
             </DropdownMenuLabel>
-            {data.organizations.edges.map((edge, index) => (
-              <DropdownMenuItem
-                key={edge.node.id}
-                onClick={() => handleOrganizationSwitch(edge.node)}
-                className="gap-2 p-2"
-              >
-                <div className="flex size-6 items-center justify-center rounded-sm border">
-                  <LogoComponent org={edge.node} className="size-4 shrink-0" />
-                </div>
-                {edge.node.name}
-                <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
-              </DropdownMenuItem>
-            ))}
+            {hasOrganizations &&
+              data.organizations.edges.map((edge, index) => (
+                <DropdownMenuItem
+                  key={edge.node.id}
+                  onClick={() => handleOrganizationSwitch(edge.node)}
+                  className={`gap-2 p-2 ${
+                    edge.node.id === organizationId ? "bg-muted" : ""
+                  }`}
+                >
+                  <div className="flex size-6 items-center justify-center rounded-sm border">
+                    <LogoComponent
+                      org={edge.node}
+                      className="size-4 shrink-0"
+                    />
+                  </div>
+                  {edge.node.name}
+                  <DropdownMenuShortcut>⌘{index + 1}</DropdownMenuShortcut>
+                </DropdownMenuItem>
+              ))}
             <DropdownMenuSeparator />
             <DropdownMenuItem asChild>
               <Link