improvement(resource): render options aside left of filter/sort

The options-bar aside has a single other consumer (the table editor's embedded
run/stop control), so instead of adding a separate slot, render aside itself to
the left of the filter/sort cluster. Drops the extra slot and keeps one
canonical control position; the run/stop control moves left too, which is fine
for a status widget.

Author: waleedlatif1

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

@@ -84,17 +84,9 @@ interface ResourceOptionsProps {
   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 table editor's run/stop control in embedded mode. Keep it to
-   * badges/status widgets; primary actions belong in the header's `actions`.
+   * cluster (right-aligned after the search) — e.g. the knowledge view's
+   * connected-source badge or the table editor's embedded run/stop control. Keep
+   * it to badges/status widgets; primary actions belong in the header's `actions`.
    */
   aside?: ReactNode
 }
@@ -104,7 +96,6 @@ export const ResourceOptions = memo(function ResourceOptions({
   sort,
   filter,
   filterTags,
-  leading,
   aside,
 }: ResourceOptionsProps) {
   /**
@@ -118,15 +109,14 @@ export const ResourceOptions = memo(function ResourceOptions({
   const isToggleFilter = filter?.mode === 'toggle'
   const popoverFilter = filter && filter.mode !== 'toggle' ? filter : null
 
-  const hasContent =
-    search || sort || filter || leading || aside || (filterTags && filterTags.length > 0)
+  const hasContent = search || sort || filter || 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>}
+        {aside && <div className='flex shrink-0 items-center gap-1.5'>{aside}</div>}
         <div className='flex items-center'>
           {filterTags?.map((tag) => (
             <Chip key={tag.label} rightIcon={X} onClick={tag.onRemove}>
@@ -182,7 +172,6 @@ export const ResourceOptions = memo(function ResourceOptions({
           ) : null}
           {sort && (isToggleFilter || !popoverFilter) && <SortDropdown config={sort} />}
         </div>
-        {aside && <div className='flex shrink-0 items-center gap-1.5'>{aside}</div>}
       </div>
     </div>
   )

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}
-          leading={connectorBadges}
+          aside={connectorBadges}
         />
         <Resource.Table
           columns={DOCUMENT_COLUMNS}

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/table.tsx

@@ -640,9 +640,9 @@ export function Table({
           }
         />
       )}
-      {/* Sort + filter render in both modes (left-aligned). In embedded (mothership)
-          mode there's no Resource.Header, so the run/stop control rides in the options
-          bar's right-aligned `aside` slot — opposite the left-aligned filter/sort. */}
+      {/* Sort + filter render in both modes. In embedded (mothership) mode there's no
+          Resource.Header, so the run/stop control rides in the options bar's `aside`
+          slot, just left of filter/sort. */}
       <Resource.Options
         sort={sortConfig}
         filter={filterConfig}