improvement(settings): align access-control detail UI + nav-driven docs link

- Move permission-group Save/Discard into the detail header (matching
  secrets/whitelabeling) and delete the one-off sticky 'Unsaved changes' bar
- Convert the Platform and Blocks config tabs to SettingsSection (drop the
  custom multi-column masonry + hand-rolled section labels); add an optional
  far-right action slot to SettingsSection for the per-section Select All
- Replace the file-share auth-mode checkboxes with a multi-select ChipDropdown
- Normalize per-tab spacing to gap-7, align the expand-chevron token to
  --text-icon, and match the list-row arrow size to the integrations precedent
- Add a nav docsLink surfaced as a header 'Docs' ChipLink by SettingsPanel,
  wired for the six enterprise settings pages

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/settings/components/settings-panel/settings-panel.tsx

@@ -1,7 +1,7 @@
 'use client'
 
 import { createContext, type ReactNode, useContext } from 'react'
-import { ChipInput, Search } from '@/components/emcn'
+import { ChipInput, ChipLink, Search } from '@/components/emcn'
 import { cn } from '@/lib/core/utils/cn'
 import {
   getSettingsSectionMeta,
@@ -47,6 +47,8 @@ interface SettingsPanelProps {
   title?: string
   /** Overrides the nav-driven description. */
   description?: string
+  /** Overrides the nav-driven docs link (the "Docs" link rendered on the title row). */
+  docsLink?: string
   /** Extra classes for the content column (layout/spacing only, e.g. a tighter `gap-*`). */
   contentClassName?: string
   /** Ref forwarded to the scroll region (e.g. for programmatic scroll-to-bottom). */
@@ -73,6 +75,7 @@ export function SettingsPanel({
   actions,
   title,
   description,
+  docsLink,
   contentClassName,
   scrollContainerRef,
   search,
@@ -81,12 +84,20 @@ export function SettingsPanel({
   const meta = section ? getSettingsSectionMeta(section) : null
   const resolvedTitle = title ?? meta?.label
   const resolvedDescription = description ?? meta?.description
+  const resolvedDocsLink = docsLink ?? meta?.docsLink
 
   return (
     <div className='flex h-full flex-col bg-[var(--bg)]'>
       <div className='flex flex-shrink-0 items-center justify-between bg-[var(--bg)] px-[16px] pt-[8.5px] pb-[8.5px]'>
         <div />
-        <div className='flex h-[30px] items-center gap-1'>{actions}</div>
+        <div className='flex h-[30px] items-center gap-1'>
+          {resolvedDocsLink && (
+            <ChipLink href={resolvedDocsLink} target='_blank' rel='noopener noreferrer'>
+              Docs
+            </ChipLink>
+          )}
+          {actions}
+        </div>
       </div>
       <div
         ref={scrollContainerRef}

apps/sim/app/workspace/[workspaceId]/settings/components/settings-section/settings-section.tsx

@@ -4,19 +4,27 @@ interface SettingsSectionProps {
   label: string
   /** Optional node rendered immediately to the right of the label (e.g. an info tooltip). */
   headerAccessory?: ReactNode
+  /** Optional control pinned to the far right of the header row (e.g. a Select All chip). */
+  action?: ReactNode
   children: ReactNode
 }
 
 /**
  * Labeled section primitive that matches the integrations page visual rhythm:
  * a muted small label, a thin divider, then the body content.
  */
-export function SettingsSection({ label, headerAccessory, children }: SettingsSectionProps) {
+export function SettingsSection({
+  label,
+  headerAccessory,
+  action,
+  children,
+}: SettingsSectionProps) {
   return (
     <section className='flex flex-col'>
       <div className='flex items-center gap-1.5 pl-0.5'>
         <span className='text-[var(--text-muted)] text-small'>{label}</span>
         {headerAccessory}
+        {action && <div className='ml-auto'>{action}</div>}
       </div>
       <div className='mt-[9px] mb-3 h-px bg-[var(--border)]' />
       {children}

apps/sim/app/workspace/[workspaceId]/settings/navigation.ts

@@ -74,6 +74,8 @@ export interface NavigationItem {
   /** Hide for enterprise plans, which manage billing out-of-band. */
   hideForEnterprise?: boolean
   externalUrl?: string
+  /** Absolute docs URL surfaced as a "Docs" link in the page header. */
+  docsLink?: string
 }
 
 const isSSOEnabled = isTruthy(getEnv('NEXT_PUBLIC_SSO_ENABLED'))
@@ -114,6 +116,7 @@ export const allNavigationItems: NavigationItem[] = [
     requiresHosted: true,
     requiresEnterprise: true,
     selfHostedOverride: isAccessControlEnabled,
+    docsLink: 'https://docs.sim.ai/platform/enterprise/access-control',
   },
   {
     id: 'audit-logs',
@@ -124,6 +127,7 @@ export const allNavigationItems: NavigationItem[] = [
     requiresHosted: true,
     requiresEnterprise: true,
     selfHostedOverride: isAuditLogsEnabled,
+    docsLink: 'https://docs.sim.ai/platform/enterprise/audit-logs',
   },
   {
     id: 'billing',
@@ -239,6 +243,7 @@ export const allNavigationItems: NavigationItem[] = [
     requiresHosted: true,
     requiresEnterprise: true,
     selfHostedOverride: isSSOEnabled,
+    docsLink: 'https://docs.sim.ai/platform/enterprise/sso',
   },
   {
     id: 'data-retention',
@@ -249,6 +254,7 @@ export const allNavigationItems: NavigationItem[] = [
     requiresHosted: true,
     requiresEnterprise: true,
     selfHostedOverride: isDataRetentionEnabled,
+    docsLink: 'https://docs.sim.ai/platform/enterprise/data-retention',
   },
   {
     id: 'data-drains',
@@ -259,6 +265,7 @@ export const allNavigationItems: NavigationItem[] = [
     requiresHosted: true,
     requiresEnterprise: true,
     selfHostedOverride: isDataDrainsEnabled,
+    docsLink: 'https://docs.sim.ai/platform/enterprise/data-drains',
   },
   {
     id: 'whitelabeling',
@@ -269,6 +276,7 @@ export const allNavigationItems: NavigationItem[] = [
     requiresHosted: true,
     requiresEnterprise: true,
     selfHostedOverride: isWhitelabelingEnabled,
+    docsLink: 'https://docs.sim.ai/platform/enterprise/whitelabeling',
   },
   {
     id: 'admin',
@@ -295,7 +303,7 @@ export const allNavigationItems: NavigationItem[] = [
  */
 export function getSettingsSectionMeta(
   section: SettingsSection
-): { label: string; description: string } | null {
+): { label: string; description: string; docsLink?: string } | null {
   const item = allNavigationItems.find((navItem) => navItem.id === section)
-  return item ? { label: item.label, description: item.description } : null
+  return item ? { label: item.label, description: item.description, docsLink: item.docsLink } : null
 }

apps/sim/ee/access-control/components/access-control.tsx

@@ -211,7 +211,7 @@ export function AccessControl() {
                           }`}
                     </span>
                   </div>
-                  <ArrowRight className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
+                  <ArrowRight className='size-4 flex-shrink-0 text-[var(--text-icon)]' />
                 </button>
               ))}
             </div>