fix(org): line up every Add source row and give Generic Secrets its integration mark

A source that opens nothing used a settings row, whose wider leading slot put its
mark 4px off the others; it is now the same row, without the chevron a row that
opens nothing has no business showing. Generic Secrets drops the organization's
monogram for the mark the Integrations list gives it.

Author: waleedlatif1

apps/sim/platform/design-system/components/activity-row/activity-row.module.css

@@ -39,9 +39,12 @@
   align-items: center;
   gap: var(--ui-popup-padding);
 }
-.row:hover {
+.row:hover:not([data-read-only]) {
   background: var(--ui-hover);
 }
+.row[data-read-only] {
+  cursor: default;
+}
 .body {
   display: flex;
   align-items: start;

apps/sim/platform/design-system/components/activity-row/activity-row.tsx

@@ -24,10 +24,12 @@ interface ActivityRowProps {
 }
 
 type ActivityTarget =
-  | { href: string; onOpen?: never; render?: never }
-  | { href?: never; onOpen: () => void; render?: never }
+  | { href: string; onOpen?: never; render?: never; readOnly?: never }
+  | { href?: never; onOpen: () => void; render?: never; readOnly?: never }
   /** The row's own link, for a destination whose navigation carries a guard. */
-  | { href?: never; onOpen?: never; render: ReactElement }
+  | { href?: never; onOpen?: never; render: ReactElement; readOnly?: never }
+  /** A row in the same list that opens nothing, such as a source this deployment does not offer. */
+  | { href?: never; onOpen?: never; render?: never; readOnly: true }
 
 interface RenderedRowProps {
   render: ReactElement
@@ -55,6 +57,7 @@ export function ActivityRow({
   onOpen,
   href,
   render,
+  readOnly,
 }: ActivityRowProps & ActivityTarget) {
   const content = (
     <>
@@ -75,22 +78,26 @@ export function ActivityRow({
           </span>
         )}
       </ActivityBody>
-      {(metadata || showChevron) && (
+      {(metadata || (showChevron && !readOnly)) && (
         <span className={styles.meta} data-type='T052'>
           {metadata && (
             <span className={styles.metaLabel}>
               {metadataLeading}
               {metadata}
             </span>
           )}
-          {showChevron && <Icon name='I032' />}
+          {showChevron && !readOnly && <Icon name='I032' />}
         </span>
       )}
     </>
   )
   return (
     <li className={styles.entry}>
-      {render ? (
+      {readOnly ? (
+        <div className={styles.row} data-density={density} data-read-only>
+          {content}
+        </div>
+      ) : render ? (
         <RenderedRow render={render} rowDensity={density}>
           {content}
         </RenderedRow>

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/integrations/add-source-modal.tsx

@@ -1,25 +1,11 @@
 'use client'
 
 import type { ComponentType, ReactNode } from 'react'
-import {
-  ActivityRow,
-  Avatar,
-  EmptyState,
-  Modal,
-  RowList,
-} from '@/platform/design-system/components'
-import { SettingsRow } from '@/platform/design-system/components/settings-section/settings-section'
+import { ActivityRow, EmptyState, Modal, RowList } from '@/platform/design-system/components'
 import { IntegrationMark } from '@/platform/embedded/app/(shell)/_components/integration-mark/integration-mark'
 import { GENERIC_SECRETS_SOURCE_TYPE } from '@/platform/embedded/app/(shell)/settings/_components/sections/integrations/generic-secrets'
 
-interface SourceMarkProps {
-  organization: AddSourceModalProps['organization']
-  type: string
-  icon?: ComponentType<{ className?: string }>
-}
-
 interface AddSourceModalProps {
-  organization: { name: string; logo?: string | null }
   sources: {
     type: string
     name: string
@@ -35,16 +21,10 @@ interface AddSourceModalProps {
   descriptions: Readonly<Record<string, string>>
 }
 
-function SourceMark({ organization, type, icon }: SourceMarkProps) {
-  return type === GENERIC_SECRETS_SOURCE_TYPE ? (
-    <Avatar name={organization.name} src={organization.logo ?? undefined} organization />
-  ) : (
-    <IntegrationMark providerId={type} icon={icon} />
-  )
-}
+/** Generic Secrets has no provider, so it takes the same mark the Integrations list gives it. */
+const markId = (type: string) => (type === GENERIC_SECRETS_SOURCE_TYPE ? undefined : type)
 
 export function AddSourceModal({
-  organization,
   sources,
   pending,
   ready,
@@ -77,18 +57,19 @@ export function AddSourceModal({
                   ? 'Unavailable in this deployment'
                   : descriptions[type]
           return pending || !sourceReady || !available ? (
-            <li key={type}>
-              <SettingsRow
-                label={name}
-                description={description}
-                leading={<SourceMark organization={organization} type={type} icon={icon} />}
-              />
-            </li>
+            <ActivityRow
+              readOnly
+              density='comfortable'
+              key={type}
+              leading={<IntegrationMark providerId={markId(type)} icon={icon} />}
+              title={name}
+              detail={description}
+            />
           ) : (
             <ActivityRow
               density='comfortable'
               key={type}
-              leading={<SourceMark organization={organization} type={type} icon={icon} />}
+              leading={<IntegrationMark providerId={markId(type)} icon={icon} />}
               title={name}
               detail={description}
               onOpen={() => onSelect(type, access.admin ? 'admin' : 'members')}

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/integrations/generic-secrets.tsx

@@ -7,21 +7,20 @@ import { useRouter } from 'next/navigation'
 import type { GenericSecretSource } from '@/lib/api/contracts/organization-secrets'
 import { organizationRoutes } from '@/lib/navigation/paths'
 import type { SecretSourceMode } from '@/lib/organization-secrets/validation'
-import { useOrganization } from '@/lib/organizations/provider'
 import {
   useConfigureOrganizationSecretSource,
   useRemoveOrganizationSecretSource,
 } from '@/hooks/queries/organization-secrets'
 import {
   ActionMenu,
-  Avatar,
   Button,
   ConfirmDialog,
   FieldFrame,
   Modal,
   SegmentedControl,
 } from '@/platform/design-system/components'
 import { SettingsRow } from '@/platform/design-system/components/settings-section/settings-section'
+import { IntegrationMark } from '@/platform/embedded/app/(shell)/_components/integration-mark/integration-mark'
 import {
   ActionRow,
   Muted,
@@ -81,7 +80,6 @@ interface GenericSecretSourceRowProps {
 }
 
 export function GenericSecretSourceRow({ organizationId, source }: GenericSecretSourceRowProps) {
-  const { organization } = useOrganization()
   const [editing, setEditing] = useState(false)
   const [removing, setRemoving] = useState(false)
   const remove = useRemoveOrganizationSecretSource(organizationId)
@@ -91,9 +89,7 @@ export function GenericSecretSourceRow({ organizationId, source }: GenericSecret
       <SettingsRow
         label={GENERIC_SECRETS_NAME}
         description={source.mode === 'organization' ? 'Organization' : 'Member'}
-        leading={
-          <Avatar name={organization.name} src={organization.logo ?? undefined} organization />
-        }
+        leading={<IntegrationMark />}
       >
         <ActionRow>
           {source.mode === 'organization' && (

apps/sim/platform/embedded/app/(shell)/settings/_components/sections/integrations/integrations-section.tsx

@@ -348,7 +348,6 @@ export default function IntegrationsSection({ organization: context }: SettingsS
         )}
         {adding && (
           <AddSourceModal
-            organization={organization}
             sources={availableToAdd}
             descriptions={Object.fromEntries(
               availableToAdd.map(({ type, access }) => [