-
- {user?.email}
-
+
+
-
+
-
Sign out
+
+
+
+
+
+
+ Invite members
+
+
+
+ Dark mode
+
+
+
+
+
+
+
+
+ Sign out
+
diff --git a/web/components/layout/orgMoreDropdown.tsx b/web/components/layout/orgMoreDropdown.tsx
new file mode 100644
index 000000000..ca384dbeb
--- /dev/null
+++ b/web/components/layout/orgMoreDropdown.tsx
@@ -0,0 +1,195 @@
+import {
+ DropdownMenu,
+ DropdownMenuContent,
+ DropdownMenuGroup,
+ DropdownMenuItem,
+ DropdownMenuLabel,
+ DropdownMenuSeparator,
+ DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "@/components/ui/button";
+import { CheckIcon, ChevronsUpDownIcon, PlusIcon } from "lucide-react";
+import { ORGANIZATION_ICONS } from "../templates/organization/orgConstants";
+import { ScrollArea } from "@/components/ui/scroll-area";
+
+type Organization = {
+ id: string;
+ name: string;
+ icon: string;
+ color: string;
+};
+
+export default function OrgMoreDropdown({
+ ownedOrgs,
+ memberOrgs,
+ customerOrgs,
+ createNewOrgHandler,
+ currentOrgId,
+ setCurrentOrg,
+}: {
+ ownedOrgs: Organization[];
+ memberOrgs: Organization[];
+ customerOrgs: Organization[];
+ createNewOrgHandler: () => void;
+ currentOrgId?: string;
+ setCurrentOrg?: (orgId: string) => void;
+}) {
+ const content = (
+ <>
+ {ownedOrgs && ownedOrgs.length > 0 && (
+
+
+ Your Organizations
+ {ownedOrgs.length > 7 && ` (${ownedOrgs.length})`}
+
+
+ {ownedOrgs.map((org, idx) => {
+ const icon = ORGANIZATION_ICONS.find(
+ (icon) => icon.name === org.icon
+ );
+ return (
+ setCurrentOrg(org.id) : undefined
+ }
+ >
+
+
+ {icon && (
+
+ )}
+
+ {org.name}
+
+
+ {org.id === currentOrgId && (
+
+ )}
+
+
+ );
+ })}
+
+
+ )}
+ {memberOrgs && memberOrgs.length > 0 && (
+ <>
+
+
+
+ Member Organizations
+ {memberOrgs.length > 7 && ` (${memberOrgs.length})`}
+
+
+ {memberOrgs.map((org, idx) => {
+ const icon = ORGANIZATION_ICONS.find(
+ (icon) => icon.name === org.icon
+ );
+ return (
+ setCurrentOrg(org.id) : undefined
+ }
+ >
+
+
+ {icon && (
+
+ )}
+
+ {org.name}
+
+
+ {org.id === currentOrgId && (
+
+ )}
+
+
+ );
+ })}
+
+
+ >
+ )}
+ {customerOrgs && customerOrgs.length > 0 && (
+ <>
+
+
+
+ Customers
+ {customerOrgs.length > 7 && ` (${customerOrgs.length})`}
+
+
+ {customerOrgs.map((org, idx) => {
+ const icon = ORGANIZATION_ICONS.find(
+ (icon) => icon.name === org.icon
+ );
+ return (
+ setCurrentOrg(org.id) : undefined
+ }
+ >
+
+
+ {icon && (
+
+ )}
+
+ {org.name}
+
+
+ {org.id === currentOrgId && (
+
+ )}
+
+
+ );
+ })}
+
+
+ >
+ )}
+
+
createNewOrgHandler()}
+ >
+
+ Create New Org
+
+ >
+ );
+
+ return (
+ <>
+ {/* Mobile view */}
+
{content}
+
+ {/* Desktop view */}
+
+
+
+
+
+
+ {content}
+
+
+
+ >
+ );
+}