fix(org): clarify membership navigation and role-aware settings

Author: waleedlatif1

apps/sim/app/o/[organizationId]/components/organization-page/organization-page.tsx

@@ -119,7 +119,7 @@ function OrganizationPageView({
 
       <div className={cn(COLUMN_CLASS, SIDEBAR_DIVIDER_PAD_ABOVE_CLASS, 'flex shrink-0 flex-col')}>
         <div className='flex flex-col gap-1 pt-8'>
-          <h1 className='text-[18px] text-[var(--text-primary)]'>{title}</h1>
+          <h1 className='text-[var(--text-primary)] text-lg'>{title}</h1>
           {description && <p className='text-[var(--text-muted)] text-small'>{description}</p>}
         </div>
         <div className='mt-4 flex items-center justify-between gap-2'>
@@ -159,7 +159,6 @@ function OrganizationPageView({
                 aria-label='Search'
                 spellCheck={false}
                 autoComplete='off'
-                /* Grows leftward from the chip's spot, to this and no further. */
                 className='w-[240px]'
                 onChange={(event) => setSearch(event.target.value)}
                 onKeyDown={(event) => {
@@ -174,7 +173,7 @@ function OrganizationPageView({
                     aria-label='Close search'
                     onClick={closeSearch}
                   >
-                    <X className='size-[13px]' />
+                    <X className='size-[14px]' />
                   </Button>
                 }
               />

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/chats-section/chats-section.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { memo } from 'react'
 import { chipVariants, cn, DropdownMenuItem, Loader, OverflowText, Skeleton } from '@sim/emcn'
 import { MoreHorizontal, Pin, Task } from '@sim/emcn/icons'
 import Link from 'next/link'
@@ -30,13 +29,7 @@ interface ChatRowProps {
   onMoreClick: (e: React.MouseEvent<HTMLButtonElement>, href: string) => void
 }
 
-const ChatRow = memo(function ChatRow({
-  chat,
-  isCurrentRoute,
-  isMenuOpen,
-  onContextMenu,
-  onMoreClick,
-}: ChatRowProps) {
+function ChatRow({ chat, isCurrentRoute, isMenuOpen, onContextMenu, onMoreClick }: ChatRowProps) {
   /**
    * The trailing slot fits one glyph, and the dot wins over the pin: it reports
    * transient state (a run in progress, or an unread reply elsewhere), while pinning
@@ -89,7 +82,7 @@ const ChatRow = memo(function ChatRow({
       </div>
     </Link>
   )
-})
+}
 
 interface ChatsSectionProps {
   chats: OrganizationChat[]

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/organization-header/organization-header.tsx

@@ -8,10 +8,12 @@ import {
   DropdownMenuItem,
   DropdownMenuTrigger,
 } from '@sim/emcn'
-import { PanelLeft, Settings } from '@sim/emcn/icons'
-import Link from 'next/link'
+import { Building, PanelLeft, Settings } from '@sim/emcn/icons'
 import { IdentityTile } from '@/components/identity-tile/identity-tile'
+import { OrganizationMenuItems } from '@/components/organization-menu-items/organization-menu-items'
 import { getOrganizationSettingsHref } from '@/components/settings/navigation'
+import { SettingsGuardedLink } from '@/components/settings/settings-guarded-link'
+import { WORKSPACES_PATH } from '@/lib/navigation/paths'
 import type { OrganizationSurfaceOrganization } from '@/lib/organizations/surface'
 import { SIDEBAR_RAIL_CHIP_CLASS } from '@/app/workspace/[workspaceId]/w/components/sidebar/constants'
 
@@ -87,11 +89,18 @@ export function OrganizationHeader({
           sideOffset={8}
           className='w-64 max-w-[calc(100vw-24px)]'
         >
+          <OrganizationMenuItems currentOrganizationId={organization.id} />
           <DropdownMenuItem asChild>
-            <Link href={getOrganizationSettingsHref(organization.id, 'members')}>
+            <SettingsGuardedLink href={getOrganizationSettingsHref(organization.id, 'members')}>
               <Settings className='size-[14px]' />
               Organization settings
-            </Link>
+            </SettingsGuardedLink>
+          </DropdownMenuItem>
+          <DropdownMenuItem asChild>
+            <SettingsGuardedLink href={WORKSPACES_PATH}>
+              <Building className='size-[14px]' />
+              Switch workspace
+            </SettingsGuardedLink>
           </DropdownMenuItem>
         </DropdownMenuContent>
       </DropdownMenu>

apps/sim/app/o/[organizationId]/components/organization-sidebar/components/workspaces-rail-flyout/workspaces-rail-flyout.tsx

@@ -1,6 +1,5 @@
 'use client'
 
-import { useMemo } from 'react'
 import { useOrganizationWorkspaces } from '@/app/o/[organizationId]/components/organization-sidebar/hooks'
 import type { FlyoutEntry } from '@/app/workspace/[workspaceId]/components/folders'
 import { CollapsedResourceFlyout } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu'
@@ -18,17 +17,13 @@ interface WorkspacesRailFlyoutProps {
 export function WorkspacesRailFlyout({ organizationId }: WorkspacesRailFlyoutProps) {
   const { workspaces, isLoading } = useOrganizationWorkspaces(organizationId)
 
-  const entries = useMemo(
-    (): FlyoutEntry[] =>
-      workspaces.map((workspace) => ({
-        kind: 'item',
-        id: workspace.id,
-        name: workspace.name,
-        pinned: false,
-        href: `/workspace/${workspace.id}`,
-      })),
-    [workspaces]
-  )
+  const entries: FlyoutEntry[] = workspaces.map((workspace) => ({
+    kind: 'item',
+    id: workspace.id,
+    name: workspace.name,
+    pinned: false,
+    href: `/workspace/${workspace.id}`,
+  }))
 
   return (
     <CollapsedResourceFlyout

apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-collapsed-tooltips.ts

@@ -19,5 +19,5 @@ export function useCollapsedTooltips(isCollapsed: boolean): boolean {
     setShowCollapsedTooltips(false)
   }, [isCollapsed])
 
-  return showCollapsedTooltips
+  return isCollapsed && showCollapsedTooltips
 }

apps/sim/app/o/[organizationId]/components/organization-sidebar/hooks/use-organization-workspaces.ts

@@ -1,21 +1,14 @@
-import { useMemo } from 'react'
-import { useWorkspacesQuery, type Workspace } from '@/hooks/queries/workspace'
-
-/** Stable identity while the list loads, so the section's memos don't churn. */
-const EMPTY_WORKSPACES: Workspace[] = []
+import { useWorkspacesQuery } from '@/hooks/queries/workspace'
 
 /**
  * The organization's workspaces the viewer belongs to, for the sidebar's
  * Workspaces section. Read from the viewer's workspace list — the same query the
  * workspace switcher uses — narrowed to those the organization owns.
  */
 export function useOrganizationWorkspaces(organizationId: string) {
-  const { data = EMPTY_WORKSPACES, isLoading } = useWorkspacesQuery()
+  const { data = [], isLoading } = useWorkspacesQuery()
 
-  const workspaces = useMemo(
-    () => data.filter((workspace) => workspace.organizationId === organizationId),
-    [data, organizationId]
-  )
+  const workspaces = data.filter((workspace) => workspace.organizationId === organizationId)
 
   return { workspaces, isLoading }
 }

apps/sim/app/o/[organizationId]/components/organization-sidebar/navigation.ts

@@ -11,14 +11,13 @@ interface OrganizationNavEntry {
   route: OrganizationNavRoute
 }
 
+/** The nav item whose collapsed rail chip also opens a flyout of the organization's workspaces. */
+export const WORKSPACES_NAV_ID = 'workspaces'
+
 /**
  * The pinned block at the top of the organization sidebar, in display order.
  * Hrefs are resolved per organization by {@link buildOrganizationNavItems}.
  */
-
-/** The nav item whose collapsed rail chip also opens a flyout of the organization's workspaces. */
-export const WORKSPACES_NAV_ID = 'workspaces'
-
 const ORGANIZATION_NAV_ENTRIES: readonly OrganizationNavEntry[] = [
   { id: 'home', label: 'Home', icon: Home, route: 'home' },
   { id: 'integrations', label: 'Integrations', icon: Integration, route: 'integrations' },

apps/sim/app/o/[organizationId]/components/organization-sidebar/organization-sidebar.tsx

@@ -1,6 +1,6 @@
 'use client'
 
-import { memo, useCallback, useEffect, useRef, useState } from 'react'
+import { memo, useCallback, useRef, useState } from 'react'
 import { Chip, cn, scrollFadeAttributes, scrollFadeClass, useScrollEdges } from '@sim/emcn'
 import { PanelLeft } from '@sim/emcn/icons'
 import { createLogger } from '@sim/logger'
@@ -131,27 +131,23 @@ export const OrganizationSidebar = memo(function OrganizationSidebar() {
     [isHrefMenuOpen, closeHrefMenu, openHrefMenu]
   )
 
-  const handleHrefMenuClose = useCallback(() => {
+  const handleHrefMenuClose = () => {
     closeHrefMenu()
     setMenuHref(null)
-  }, [closeHrefMenu])
+  }
 
-  const handleOpenInNewTab = useCallback(() => {
+  const handleOpenInNewTab = () => {
     if (menuHref) window.open(menuHref, '_blank', 'noopener,noreferrer')
-  }, [menuHref])
+  }
 
-  const handleCopyLink = useCallback(async () => {
+  const handleCopyLink = async () => {
     if (!menuHref) return
     try {
       await navigator.clipboard.writeText(`${window.location.origin}${menuHref}`)
     } catch (error) {
       logger.error('Failed to copy link to clipboard', { error })
     }
-  }, [menuHref])
-
-  useEffect(() => {
-    if (!isHrefMenuOpen) setMenuHref(null)
-  }, [isHrefMenuOpen])
+  }
 
   const handleOpenDocs = () => {
     window.open(DOCS_URL, '_blank', 'noopener,noreferrer')
@@ -163,15 +159,12 @@ export const OrganizationSidebar = memo(function OrganizationSidebar() {
     captureEvent(posthog, 'slack_community_opened', { source: 'help_menu' })
   }
 
-  const handleEdgeKeyDown = useCallback(
-    (e: React.KeyboardEvent) => {
-      if (isCollapsed && (e.key === 'Enter' || e.key === ' ')) {
-        e.preventDefault()
-        toggleCollapsed()
-      }
-    },
-    [isCollapsed, toggleCollapsed]
-  )
+  const handleEdgeKeyDown = (e: React.KeyboardEvent) => {
+    if (isCollapsed && (e.key === 'Enter' || e.key === ' ')) {
+      e.preventDefault()
+      toggleCollapsed()
+    }
+  }
 
   useRegisterGlobalCommands(() =>
     createCommands([
@@ -305,7 +298,7 @@ export const OrganizationSidebar = memo(function OrganizationSidebar() {
                     isLoading={chatsLoading}
                     isCollapsed={isCollapsed}
                     pathname={pathname}
-                    menuOpenHref={menuHref}
+                    menuOpenHref={isHrefMenuOpen ? menuHref : null}
                     onContextMenu={handleHrefContextMenu}
                     onMoreClick={handleChatMoreClick}
                   />

apps/sim/app/o/[organizationId]/not-found.tsx

@@ -1,8 +1,7 @@
 'use client'
 
-import { Button, buttonVariants } from '@sim/emcn'
+import { Chip, ChipLink } from '@sim/emcn'
 import { ArrowLeft, Compass, Home } from '@sim/emcn/icons'
-import Link from 'next/link'
 import { useParams, useRouter } from 'next/navigation'
 import { organizationRoutes } from '@/lib/navigation/paths'
 import { ErrorShell } from '@/app/workspace/[workspaceId]/components/error/error'
@@ -18,14 +17,12 @@ export default function OrganizationNotFound() {
       description="The page you're looking for doesn't exist or has been moved."
       icon={<Compass className='size-[22px]' />}
     >
-      <Button variant='default' size='md' onClick={() => router.back()}>
-        <ArrowLeft className='mr-1.5 size-[14px]' />
+      <Chip leftIcon={ArrowLeft} onClick={() => router.back()}>
         Go back
-      </Button>
-      <Link href={homeHref} className={buttonVariants({ variant: 'primary', size: 'md' })}>
-        <Home className='mr-1.5 size-[14px]' />
+      </Chip>
+      <ChipLink href={homeHref} variant='primary' leftIcon={Home}>
         Return home
-      </Link>
+      </ChipLink>
     </ErrorShell>
   )
 }

apps/sim/app/o/[organizationId]/settings/[section]/settings.tsx

@@ -62,6 +62,7 @@ export function OrganizationSettings({ section }: OrganizationSettingsProps) {
       {section === 'members' && (
         <TeamManagement
           organizationId={organizationId}
+          canInviteMembers={viewer.canInviteMembers}
           billingHref={getOrganizationSettingsHref(organizationId, 'billing')}
         />
       )}