improvement(org): keep the rail's actions in its leaves and share its rows

Hooks that report mutation and update state move into the components that use
them, and the command menu reads its own store, so neither re-renders the rail.
Rail files import the design system's components directly, so the layout does
not pull the whole barrel into every organization route. Rows and name dialogs
share one implementation, and the resize edge uses literal sizes because the
design tokens only resolve inside a surface.

Author: waleedlatif1

apps/sim/app/o/[organizationId]/settings/organization-settings-rail.tsx

@@ -1,21 +1,22 @@
 'use client'
 
-import type { ComponentProps } from 'react'
 import { OrganizationSettingsSidebar } from '@/app/o/[organizationId]/settings/organization-settings-sidebar'
 
+interface OrganizationSettingsRailProps {
+  collapsed: boolean
+}
+
 /**
  * Settings' own navigation inside the organization rail. It keeps the rail markup its chips read:
  * collapsed labels hide through `.sidebar-container`, and their width through `group/rail`.
  */
-export function OrganizationSettingsRail(
-  props: ComponentProps<typeof OrganizationSettingsSidebar>
-) {
+export function OrganizationSettingsRail({ collapsed }: OrganizationSettingsRailProps) {
   return (
     <div
       className='group/rail sidebar-container flex h-full flex-col overflow-hidden bg-[var(--surface-1)] [&_.group.cursor-pointer]:duration-0'
-      data-collapsed={props.isCollapsed || undefined}
+      data-collapsed={collapsed || undefined}
     >
-      <OrganizationSettingsSidebar {...props} />
+      <OrganizationSettingsSidebar isCollapsed={collapsed} showCollapsedTooltips={collapsed} />
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-footer/sidebar-footer.tsx

@@ -22,7 +22,6 @@ import { useRouter } from 'next/navigation'
 import { SlackIcon } from '@/components/icons'
 import { SettingsIntentLink } from '@/components/settings/settings-intent-link'
 import { signOutAndRedirect } from '@/lib/auth/sign-out'
-import { getDesktopUpdates } from '@/lib/desktop'
 import { rememberSettingsReturnUrl } from '@/lib/navigation/settings-return'
 import { getUserColor } from '@/lib/workspaces/colors'
 import { SidebarTooltip } from '@/app/workspace/[workspaceId]/w/components/sidebar/components/sidebar-tooltip'
@@ -34,6 +33,7 @@ import { useUserProfile } from '@/hooks/queries/user-profile'
 import {
   desktopUpdateActionLabel,
   hasAvailableDesktopUpdate,
+  runDesktopUpdateAction,
   useDesktopUpdateState,
 } from '@/hooks/use-desktop-update-state'
 import { useSettingsDirtyStore } from '@/stores/settings/dirty/store'
@@ -120,14 +120,7 @@ export function SidebarFooter({
   const updateAvailable = hasAvailableDesktopUpdate(updateState)
   const canSignOut = Boolean(profile && profile.id !== ANONYMOUS_USER_ID)
 
-  const handleUpdateSelect = () => {
-    const updates = getDesktopUpdates()
-    if (updateState.status === 'ready') {
-      updates?.install()
-    } else if (updateState.status === 'available') {
-      updates?.check()
-    }
-  }
+  const handleUpdateSelect = () => runDesktopUpdateAction(updateState)
 
   /**
    * Built from plain `img`/`div` rather than the emcn `Avatar`, whose Radix root

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/utils.ts

@@ -20,7 +20,7 @@ export function isSidebarBackgroundClick(event: MouseEvent<HTMLElement>): boolea
     event.target instanceof Element &&
     event.currentTarget.contains(event.target) &&
     !event.target.closest(
-      'a, button, input, textarea, select, [role="button"], [contenteditable]:not([contenteditable="false"])'
+      'a, button, input, textarea, select, [role="button"], [contenteditable]:not([contenteditable="false"]), [data-material="floating"]'
     )
   )
 }

apps/sim/hooks/queries/utils/prefetch-query-on-intent.ts

@@ -4,6 +4,18 @@ type QueryFilterKey = NonNullable<
   NonNullable<Parameters<QueryClient['removeQueries']>[0]>['queryKey']
 >
 
+/** Removes a speculative read that failed and that nothing is mounted to report. */
+export function dropFailedSpeculativeQuery(queryClient: QueryClient, queryKey: QueryKey): void {
+  const state = queryClient.getQueryState(queryKey)
+  if (state?.status !== 'error' || state.data !== undefined) return
+
+  queryClient.removeQueries({
+    queryKey: queryKey as QueryFilterKey,
+    exact: true,
+    type: 'inactive',
+  })
+}
+
 /**
  * Starts a speculative query without allowing an inactive failure to poison a later mount.
  * Mounted observers retain the error so their component can render truthful feedback.
@@ -12,14 +24,7 @@ export function prefetchQueryOnIntent<TQueryFnData, TError, TData, TQueryKey ext
   queryClient: QueryClient,
   options: FetchQueryOptions<TQueryFnData, TError, TData, TQueryKey>
 ): void {
-  void queryClient.prefetchQuery(options).then(() => {
-    const state = queryClient.getQueryState(options.queryKey)
-    if (state?.status !== 'error' || state.data !== undefined) return
-
-    queryClient.removeQueries({
-      queryKey: options.queryKey as QueryFilterKey,
-      exact: true,
-      type: 'inactive',
-    })
-  })
+  void queryClient
+    .prefetchQuery(options)
+    .then(() => dropFailedSpeculativeQuery(queryClient, options.queryKey))
 }

apps/sim/hooks/use-desktop-update-state.ts

@@ -17,6 +17,13 @@ export function desktopUpdateActionLabel(state: DesktopUpdateState): string {
   return state.status === 'ready' ? 'Restart to update' : 'Update'
 }
 
+/** Installs a downloaded update, or starts downloading an available one. */
+export function runDesktopUpdateAction(state: DesktopUpdateState): void {
+  const updates = getDesktopUpdates()
+  if (state.status === 'ready') updates?.install()
+  else if (state.status === 'available') updates?.check()
+}
+
 const INITIAL_UPDATE_STATE: DesktopUpdateState = { status: 'idle' }
 
 export function useDesktopUpdateState(): DesktopUpdateState {

apps/sim/platform/app/(shell)/_components/command-menu/command-menu.tsx

@@ -1,33 +1,34 @@
+'use client'
+
 import type {
   ShellChat,
   ShellDestination,
   ShellWorkspace,
 } from '@/platform/app/(shell)/_components/model'
 import { CommandPalette } from '@/platform/design-system/components/command-palette/command-palette'
 import { OverlayDialog } from '@/platform/design-system/components/modal/overlay-dialog'
+import { useSearchModalStore } from '@/stores/modals/search/store'
 
 interface CommandMenuProps {
-  open: boolean
-  onClose: () => void
   navigate: (href: string) => void
   chats: readonly ShellChat[]
   workspaces: readonly ShellWorkspace[]
   destinations: readonly ShellDestination[]
 }
 
-export function CommandMenu({
-  open,
-  onClose,
-  navigate,
-  chats,
-  workspaces,
-  destinations,
-}: CommandMenuProps) {
+/** The same store the desktop shell's View > Search toggles. Reads it here so the rail needn't. */
+export function CommandMenu({ navigate, chats, workspaces, destinations }: CommandMenuProps) {
+  const open = useSearchModalStore((state) => state.isOpen)
+  const setOpen = useSearchModalStore((state) => state.setOpen)
+  if (!open) return null
   return (
-    <OverlayDialog label='Search' presentation='command' open={open} onClose={onClose}>
+    <OverlayDialog label='Search' presentation='command' open onClose={() => setOpen(false)}>
       <CommandPalette
         label='Search the platform'
-        onSelect={navigate}
+        onSelect={(href) => {
+          setOpen(false)
+          navigate(href)
+        }}
         groups={[
           { items: destinations },
           {

apps/sim/platform/app/(shell)/_components/invite-modal/invite-modal.tsx

@@ -1,12 +1,13 @@
 'use client'
 
 import { useState } from 'react'
-import { Modal, RecipientField, SelectField } from '@/platform/design-system/components'
+import { SelectField } from '@/platform/design-system/components/field/fields'
+import { Modal } from '@/platform/design-system/components/modal/modal'
+import { RecipientField } from '@/platform/design-system/components/workspace-fields/workspace-fields'
 import { ORGANIZATION_ROLE_OPTIONS, useInviteMembers } from '@/platform/lib/data/invite'
 
 interface InviteModalProps {
-  open: boolean
-  onOpenChange: (open: boolean) => void
+  onClose: () => void
 }
 
 interface Recipient {
@@ -21,18 +22,10 @@ type InviteRole = (typeof ORGANIZATION_ROLE_OPTIONS)[number]['value']
  * addresses stay in the field with their reasons so a retry resends only those, and the seat warning
  * never blocks, because the server decides per address.
  */
-export function InviteModal({ open, onOpenChange }: InviteModalProps) {
-  const invite = useInviteMembers(open)
+export function InviteModal({ onClose }: InviteModalProps) {
+  const invite = useInviteMembers()
   const [recipients, setRecipients] = useState<Recipient[]>([])
   const [role, setRole] = useState<InviteRole>('member')
-  const [wasOpen, setWasOpen] = useState(open)
-  if (wasOpen !== open) {
-    setWasOpen(open)
-    if (open) {
-      setRecipients([])
-      setRole('member')
-    }
-  }
 
   const problem = recipients
     .filter((recipient) => recipient.invalid)
@@ -42,10 +35,10 @@ export function InviteModal({ open, onOpenChange }: InviteModalProps) {
   return (
     <Modal
       title='Invite people'
-      open={open}
-      onOpenChange={onOpenChange}
+      open
+      onOpenChange={onClose}
       confirmLabel='Send invites'
-      confirmDisabled={!invite.canInvite || recipients.length === 0 || Boolean(problem)}
+      confirmDisabled={recipients.length === 0 || Boolean(problem)}
       onConfirm={async () => {
         const { failed, message } = await invite.submit(
           recipients.map(({ address }) => address),
@@ -65,14 +58,12 @@ export function InviteModal({ open, onOpenChange }: InviteModalProps) {
         validate={(address) => invite.addressProblem(address) === null}
         error={problem ?? undefined}
         hint={invite.seatWarning(recipients.length)}
-        disabled={!invite.canInvite}
       />
       <SelectField
         label='Role'
         options={ORGANIZATION_ROLE_OPTIONS}
         value={role}
         onValueChange={(next) => setRole(next === 'admin' ? 'admin' : 'member')}
-        disabled={!invite.canInvite}
       />
     </Modal>
   )

apps/sim/platform/app/(shell)/_components/model.ts

@@ -27,9 +27,9 @@ export interface ShellWorkspace {
 export interface ShellChat extends ShellItem {
   /** Assistant chats live under Search, agent chats at the chat route. */
   href: string
-  isActive?: boolean
-  isUnread?: boolean
-  isPinned?: boolean
+  isActive: boolean
+  isUnread: boolean
+  isPinned: boolean
 }
 
 export interface ShellDestination {
@@ -49,75 +49,17 @@ export interface ShellData {
   chats: ShellChat[]
   /** So a list can tell loading and failure from empty. */
   status: { workspaces: ShellQueryStatus; chats: ShellQueryStatus }
-  workspaceCreation?: { canCreate: boolean; organizationId: string | null; reason: string | null }
+  workspaceCreation: { canCreate: boolean; reason: string | null }
   /** False when the viewer's chat list would be refused, so the section is not offered. */
   chatsAvailable: boolean
   destinations: readonly ShellDestination[]
 }
 
-/** A partial bulk failure still reports which chats went, so the view can narrow what is left. */
-interface ChatRemoval {
-  removedIds: readonly string[]
-  failure?: string
-}
-
-export interface ShellChatActions {
-  rename: (id: string, title: string) => Promise<void>
-  remove: (ids: readonly string[]) => Promise<ChatRemoval>
-  setPinned: (id: string, pinned: boolean) => void
-  setRead: (id: string, read: boolean) => void
-  retry: () => void
-}
-
-export interface ShellWorkspaceActions {
-  /** Resolves with where the new workspace opens. */
-  create: (name: string) => Promise<string>
-  rename: (id: string, name: string) => Promise<void>
-  setPinned: (id: string, pinned: boolean) => void
-  retry: () => void
-}
-
-export interface ShellOrganizationActions {
-  canEditIdentity: boolean
-  canInvite: boolean
-  logoAccept: string
-  rename: (name: string) => Promise<void>
-  uploadLogo: (file: File) => Promise<void>
-}
-
-interface ShellSupportRequest {
-  type: string
-  subject: string
-  message: string
-  images: readonly File[]
-}
-
-export interface ShellSupport {
-  imageAccept: string
-  requestTypes: readonly { value: string; label: string }[]
-  /** Validates and compresses one image; rejects with why it cannot be attached. */
-  prepareImage: (file: File) => Promise<File>
-  submit: (request: ShellSupportRequest) => Promise<void>
-}
-
-export interface ShellHelp {
-  openDocumentation: () => void
-  joinSlack: () => void
-  support: ShellSupport
-  changelogUrl?: string
-  downloadUrl?: string
-  desktopUpdate?: { label: string; disabled: boolean; run: () => void }
-}
-
-/** What the shell's views can do, backed by the same mutations the workspace surface uses. */
+/** Leaving the current page. Each goes through the settings guard, so a draft is never lost. */
 export interface ShellActions {
-  chats: ShellChatActions
-  workspaces: ShellWorkspaceActions
-  organization: ShellOrganizationActions
-  help: ShellHelp
   signOut: () => void
   /** Runs `leave` now, or once the viewer agrees to discard unsaved settings. */
   requestLeave: (leave: () => void) => void
-  /** Leaves through the settings guard, remembering where Settings' Back returns to. */
+  /** Also remembers where Settings' Back returns to. */
   navigate: (href: string) => void
 }