improvement(knowledge): align connected-sources rows and move source chip left of filter/sort

- Drop the -mx-2 on the connectors list so rows respect the ChipModalBody
  gutter: the row hover no longer bleeds to the modal edges and row content
  lines up with the px-4 header.
- Add a 'leading' slot to ResourceOptions (left of the filter/sort cluster) and
  render the knowledge connected-source chip there instead of the far-right
  'aside', so it reads as part of the control row. 'aside' stays right-aligned
  for the table editor's run/stop control.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/resource/components/resource-options/resource-options.tsx

@@ -82,12 +82,19 @@ interface ResourceOptionsProps {
   sort?: SortConfig
   filter?: FilterConfig
   filterTags?: FilterTag[]
+  /**
+   * Lightweight control rendered immediately to the LEFT of the filter/sort
+   * cluster (still right-aligned after the search) — e.g. the knowledge view's
+   * connected-source badge, which reads as part of the control row. Use this for
+   * controls that belong alongside filter/sort; use {@link aside} for status
+   * widgets that should sit at the far right edge.
+   */
+  leading?: ReactNode
   /**
    * Supplementary right-aligned slot (pushed opposite the left-aligned
    * filter/sort via `justify-between`) for lightweight status content — e.g.
-   * the knowledge list's connector badges or the table editor's run/stop
-   * control in embedded mode. Keep it to badges/status widgets; primary
-   * actions belong in the header's `actions`, not here.
+   * the table editor's run/stop control in embedded mode. Keep it to
+   * badges/status widgets; primary actions belong in the header's `actions`.
    */
   aside?: ReactNode
 }
@@ -97,6 +104,7 @@ export const ResourceOptions = memo(function ResourceOptions({
   sort,
   filter,
   filterTags,
+  leading,
   aside,
 }: ResourceOptionsProps) {
   /**
@@ -110,13 +118,15 @@ export const ResourceOptions = memo(function ResourceOptions({
   const isToggleFilter = filter?.mode === 'toggle'
   const popoverFilter = filter && filter.mode !== 'toggle' ? filter : null
 
-  const hasContent = search || sort || filter || aside || (filterTags && filterTags.length > 0)
+  const hasContent =
+    search || sort || filter || leading || aside || (filterTags && filterTags.length > 0)
   if (!hasContent) return null
 
   return (
     <div className={cn('border-[var(--border)] border-b py-2.5', search ? 'px-6' : 'px-4')}>
       <div className='flex items-center justify-between'>
         {search && <SearchSection search={search} />}
+        {leading && <div className='flex shrink-0 items-center gap-1.5'>{leading}</div>}
         <div className='flex items-center'>
           {filterTags?.map((tag) => (
             <Chip key={tag.label} rightIcon={X} onClick={tag.onRemove}>

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/base.tsx

@@ -1154,7 +1154,7 @@ export function KnowledgeBase({
           sort={sortConfig}
           filter={filterContent ? { content: filterContent } : undefined}
           filterTags={filterTags}
-          aside={connectorBadges}
+          leading={connectorBadges}
         />
         <Resource.Table
           columns={DOCUMENT_COLUMNS}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/connectors-section/connectors-section.tsx

@@ -202,7 +202,7 @@ export function ConnectorsSection({
           No connected sources yet. Connect an external source to automatically sync documents.
         </p>
       ) : (
-        <div className='-mx-2 mt-2 flex flex-col gap-0.5'>
+        <div className='mt-2 flex flex-col gap-0.5'>
           {connectors.map((connector) => (
             <ConnectorCard
               key={connector.id}