feat(sidebar): add Tables and Files flyouts to the collapsed rail (#6882)

* feat(sidebar): add Tables and Files flyouts to the collapsed rail

Chats and Workflows already open a hover flyout on the collapsed rail;
Tables and Files were plain links. Both now list their contents, with
folders as submenus and the open resource marked.

The chip stays a real link, so clicking still opens the list page and
right-click still reaches the nav context menu. Each flyout owns its
queries and mounts only when the menu opens: a hook on the sidebar keeps
its cache subscription on every workspace route even when disabled, so
an unrelated writer would re-render the whole sidebar for a closed
flyout.

Rows are ordered by the shared sortResources, so pinned rows float and
the flyout reads in the same order as the page it links into.

Also removes two dead components (CollapsedFileFolderItems, FileList)
that were exported but never rendered, and extracts SidebarNavChip so
the rail chip has one definition.

* fix(emcn): stop ordinary menus scrolling at the shared height cap

Every DropdownMenuContent was capped at a flat 240px. A menu is 28px per
row, 13px per separator, plus 12px padding, so a 7-row action menu with
3 separators measures 247px and scrolled for 7px while the 7-row menu
beside it with 1 separator did not.

Raises the cap to 420px, which clears every hand-authored action menu,
and clamps it with min() against the space Radix measures so a menu near
a viewport edge stays on screen — which the flat value never did. The
cap still exists so a long data-driven list scrolls instead of running
the height of the screen.

* fix(sidebar): hold the rail flyout until its lists resolve for this workspace

Both the resource and folder queries keep the previous workspace's rows as
placeholder data across a switch. Gating only on isPending let the flyout
build a tree from one workspace's resources against another's folders, where
no folder id resolves — which the builder reads as "archived out from under
it" and files the whole list at the root.

Gate on isPlaceholderData too, matching foldersResolved in
use-folder-ancestors. An error settles a query without resolving it and is
deliberately not held: the flyout then renders flat, which still reaches
every row.

* improvement(sidebar): mark pinned rows in the rail flyout

The flyout sorts pinned rows to the top via the shared sortResources, but
rendered no indicator, so that ordering read as arbitrary — the exact
pairing Resource's own label cell documents. Carry `pinned` on each row
and render the same non-interactive glyph, on folders as well as
resources.

Adds folder-structure coverage alongside it: per-level ordering, the full
depth of a nested chain, and an empty folder staying in the tree.

Author: waleedlatif1

apps/sim/app/workspace/[workspaceId]/components/folders/flyout-entries.test.ts

@@ -0,0 +1,197 @@
+/**
+ * @vitest-environment node
+ */
+import { describe, expect, it } from 'vitest'
+import { buildFlyoutEntries } from '@/app/workspace/[workspaceId]/components/folders/flyout-entries'
+
+function folder(id: string, name: string, parentId: string | null, updatedAt: string) {
+  return { id, name, parentId, updatedAt: new Date(updatedAt) }
+}
+
+function item(id: string, name: string, folderId: string | null, updatedAt: string) {
+  return { id, name, folderId, updatedAt: new Date(updatedAt) }
+}
+
+const NONE: ReadonlySet<string> = new Set()
+
+function build(
+  folders: ReturnType<typeof folder>[],
+  items: ReturnType<typeof item>[],
+  pinned?: { folders?: ReadonlySet<string>; items?: ReadonlySet<string> }
+) {
+  return buildFlyoutEntries({
+    folders,
+    items,
+    pinnedFolderIds: pinned?.folders ?? NONE,
+    pinnedItemIds: pinned?.items ?? NONE,
+    hrefForItem: (row) => `/x/${row.id}`,
+  })
+}
+
+describe('buildFlyoutEntries', () => {
+  it('orders folders and items together, most-recently-updated first', () => {
+    const entries = build(
+      [
+        folder('f1', 'Older folder', null, '2026-01-01'),
+        folder('f2', 'Newest', null, '2026-03-01'),
+      ],
+      [item('i1', 'Middle', null, '2026-02-01')]
+    )
+
+    expect(entries.map((entry) => entry.id)).toEqual(['f2', 'i1', 'f1'])
+  })
+
+  it('floats pinned rows above newer unpinned ones, matching the list pages', () => {
+    const entries = build(
+      [folder('f1', 'Folder', null, '2026-03-01')],
+      [item('i1', 'Pinned', null, '2026-01-01'), item('i2', 'Newest', null, '2026-04-01')],
+      { items: new Set(['i1']) }
+    )
+
+    expect(entries.map((entry) => entry.id)).toEqual(['i1', 'i2', 'f1'])
+  })
+
+  it('breaks ties on name', () => {
+    const entries = build(
+      [],
+      [
+        item('b', 'Beta', null, '2026-01-01'),
+        item('c', 'Alpha', null, '2026-01-01'),
+        item('a', 'Gamma', null, '2026-01-01'),
+      ]
+    )
+
+    expect(entries.map((entry) => entry.id)).toEqual(['c', 'b', 'a'])
+  })
+
+  it('nests items under their folder and links each one', () => {
+    const entries = build(
+      [folder('f1', 'Reports', null, '2026-01-01'), folder('f2', 'Q1', 'f1', '2026-01-02')],
+      [item('i1', 'Revenue', 'f2', '2026-01-03')]
+    )
+
+    expect(entries).toEqual([
+      {
+        kind: 'folder',
+        id: 'f1',
+        name: 'Reports',
+        pinned: false,
+        children: [
+          {
+            kind: 'folder',
+            id: 'f2',
+            name: 'Q1',
+            pinned: false,
+            children: [{ kind: 'item', id: 'i1', name: 'Revenue', pinned: false, href: '/x/i1' }],
+          },
+        ],
+      },
+    ])
+  })
+
+  it('hoists a folder and an item whose parent folder is gone to the root', () => {
+    const entries = build(
+      [folder('f1', 'Orphan', 'archived-folder', '2026-01-02')],
+      [item('i1', 'Loose', 'archived-folder', '2026-01-01')]
+    )
+
+    expect(entries.map((entry) => entry.id)).toEqual(['f1', 'i1'])
+    expect(entries[0]).toMatchObject({ kind: 'folder', children: [] })
+  })
+
+  it('drops folders reachable only through a parent cycle instead of descending it', () => {
+    const entries = build(
+      [
+        folder('a', 'A', 'b', '2026-01-01'),
+        folder('b', 'B', 'a', '2026-01-01'),
+        folder('root', 'Root', null, '2026-01-01'),
+      ],
+      []
+    )
+
+    expect(entries.map((entry) => entry.id)).toEqual(['root'])
+  })
+
+  it('accepts serialized date strings and sorts undated rows last', () => {
+    const entries = buildFlyoutEntries({
+      folders: [],
+      items: [
+        { id: 'i1', name: 'Undated', folderId: null, updatedAt: 'not-a-date' },
+        { id: 'i2', name: 'Dated', folderId: null, updatedAt: '2026-01-01T00:00:00.000Z' },
+      ],
+      pinnedFolderIds: NONE,
+      pinnedItemIds: NONE,
+      hrefForItem: (row) => `/x/${row.id}`,
+    })
+
+    expect(entries.map((entry) => entry.id)).toEqual(['i2', 'i1'])
+  })
+
+  it('treats a missing folderId as the root', () => {
+    const entries = buildFlyoutEntries({
+      folders: [],
+      items: [{ id: 'i1', name: 'Rootless', updatedAt: new Date('2026-01-01') }],
+      pinnedFolderIds: NONE,
+      pinnedItemIds: NONE,
+      hrefForItem: (row) => `/x/${row.id}`,
+    })
+
+    expect(entries).toEqual([
+      { kind: 'item', id: 'i1', name: 'Rootless', pinned: false, href: '/x/i1' },
+    ])
+  })
+
+  it('keeps each nesting level ordered independently, not just the root', () => {
+    const entries = build(
+      [folder('f1', 'Root folder', null, '2026-05-01')],
+      [
+        item('deep-old', 'Deep old', 'f1', '2026-01-01'),
+        item('deep-new', 'Deep new', 'f1', '2026-04-01'),
+        item('root-mid', 'Root mid', null, '2026-03-01'),
+      ]
+    )
+
+    expect(entries.map((entry) => entry.id)).toEqual(['f1', 'root-mid'])
+    const nested = entries[0]
+    expect(nested.kind).toBe('folder')
+    if (nested.kind !== 'folder') throw new Error('expected a folder')
+    expect(nested.children.map((child) => child.id)).toEqual(['deep-new', 'deep-old'])
+  })
+
+  it('preserves the full depth of the folder chain', () => {
+    const entries = build(
+      [
+        folder('a', 'A', null, '2026-01-01'),
+        folder('b', 'B', 'a', '2026-01-01'),
+        folder('c', 'C', 'b', '2026-01-01'),
+      ],
+      [item('leaf', 'Leaf', 'c', '2026-01-01')]
+    )
+
+    const depth = (rows: ReturnType<typeof build>): number => {
+      const nested = rows.find((row) => row.kind === 'folder')
+      return nested && nested.kind === 'folder' ? 1 + depth(nested.children) : 0
+    }
+    expect(depth(entries)).toBe(3)
+  })
+
+  it('keeps an empty folder in the tree rather than dropping it', () => {
+    const entries = build(
+      [folder('empty', 'Nothing here', null, '2026-01-01')],
+      [item('i1', 'Loose', null, '2026-01-02')]
+    )
+
+    expect(entries.map((entry) => entry.id)).toEqual(['i1', 'empty'])
+    expect(entries[1]).toMatchObject({ kind: 'folder', children: [] })
+  })
+
+  it('marks pinned folders and pinned resources so the ordering is legible', () => {
+    const entries = build(
+      [folder('f1', 'Folder', null, '2026-01-01')],
+      [item('i1', 'Table', null, '2026-01-02')],
+      { folders: new Set(['f1']), items: new Set(['i1']) }
+    )
+
+    expect(entries.map((entry) => entry.pinned)).toEqual([true, true])
+  })
+})

apps/sim/app/workspace/[workspaceId]/components/folders/flyout-entries.ts

@@ -0,0 +1,112 @@
+import {
+  type SortableResource,
+  sortResources,
+} from '@/app/workspace/[workspaceId]/components/folders/resource-sort'
+
+/** A folder row a resource flyout can render, from any foldered workspace surface. */
+interface FlyoutFolderSource {
+  id: string
+  name: string
+  parentId: string | null
+  updatedAt: Date | string
+}
+
+/** A resource row a flyout can render, from any foldered workspace surface. */
+interface FlyoutItemSource {
+  id: string
+  name: string
+  folderId?: string | null
+  updatedAt: Date | string
+}
+
+/** One row of a resource flyout: a folder that recurses, or a linked resource. */
+export type FlyoutEntry =
+  | { kind: 'folder'; id: string; name: string; pinned: boolean; children: FlyoutEntry[] }
+  | { kind: 'item'; id: string; name: string; pinned: boolean; href: string }
+
+export interface BuildFlyoutEntriesParams<Item extends FlyoutItemSource> {
+  folders: FlyoutFolderSource[]
+  items: Item[]
+  pinnedFolderIds: ReadonlySet<string>
+  pinnedItemIds: ReadonlySet<string>
+  hrefForItem: (item: Item) => string
+}
+
+function flyoutSortTime(value: Date | string): number {
+  const time = value instanceof Date ? value.getTime() : Date.parse(value)
+  return Number.isNaN(time) ? 0 : time
+}
+
+/**
+ * Builds the ordered row tree a foldered resource's flyout renders.
+ *
+ * Each level is sorted by the shared {@link sortResources}, on the most-recently-updated
+ * key its list page defaults to — so pinned rows float, folders interleave with the
+ * resources beside them, and the flyout keeps reading in the same order as the page it
+ * links into rather than carrying a second copy of that rule. `pinned` rides along on each
+ * row because that ordering reads as arbitrary without the indicator the rows render from
+ * it — the same pairing `Resource`'s own cells make.
+ *
+ * A folder whose parent no longer exists, and a resource whose `folderId` names no live
+ * folder, surface at the root — the same fallback the list pages apply when a folder is
+ * archived out from under its contents, so neither goes unreachable. A folder only
+ * reachable through a parent cycle is dropped, as it is by the sidebar's folder tree: the
+ * client folder cache is written optimistically, so a cycle is reachable there even though
+ * the server rejects one, and descending it would hang the tab.
+ */
+export function buildFlyoutEntries<Item extends FlyoutItemSource>({
+  folders,
+  items,
+  pinnedFolderIds,
+  pinnedItemIds,
+  hrefForItem,
+}: BuildFlyoutEntriesParams<Item>): FlyoutEntry[] {
+  const folderIds = new Set(folders.map((folder) => folder.id))
+
+  const foldersByParent = new Map<string | null, FlyoutFolderSource[]>()
+  for (const folder of folders) {
+    const parentId = folder.parentId && folderIds.has(folder.parentId) ? folder.parentId : null
+    const siblings = foldersByParent.get(parentId)
+    if (siblings) siblings.push(folder)
+    else foldersByParent.set(parentId, [folder])
+  }
+
+  const itemsByFolder = new Map<string | null, Item[]>()
+  for (const item of items) {
+    const folderId = item.folderId && folderIds.has(item.folderId) ? item.folderId : null
+    const siblings = itemsByFolder.get(folderId)
+    if (siblings) siblings.push(item)
+    else itemsByFolder.set(folderId, [item])
+  }
+
+  const buildLevel = (parentId: string | null): FlyoutEntry[] => {
+    const rows: SortableResource<FlyoutEntry>[] = []
+    for (const folder of foldersByParent.get(parentId) ?? []) {
+      const pinned = pinnedFolderIds.has(folder.id)
+      rows.push({
+        item: {
+          kind: 'folder',
+          id: folder.id,
+          name: folder.name,
+          pinned,
+          children: buildLevel(folder.id),
+        },
+        pinned,
+        name: folder.name,
+        key: flyoutSortTime(folder.updatedAt),
+      })
+    }
+    for (const item of itemsByFolder.get(parentId) ?? []) {
+      const pinned = pinnedItemIds.has(item.id)
+      rows.push({
+        item: { kind: 'item', id: item.id, name: item.name, pinned, href: hrefForItem(item) },
+        pinned,
+        name: item.name,
+        key: flyoutSortTime(item.updatedAt),
+      })
+    }
+    return sortResources(rows, 'desc').map((row) => row.item)
+  }
+
+  return buildLevel(null)
+}

apps/sim/app/workspace/[workspaceId]/components/folders/foldered-resources.ts

@@ -1,4 +1,4 @@
-import type { ElementType } from 'react'
+import type { ComponentType } from 'react'
 import { Database, File as FileIcon, Table as TableIcon } from '@sim/emcn/icons'
 import type { FolderResourceType } from '@/lib/api/contracts/folders'
 import { folderListHref } from '@/app/workspace/[workspaceId]/components/folders/search-params'
@@ -17,7 +17,7 @@ export interface FolderedResourceHeaderMeta {
   /** Root crumb label, and the page title at the workspace root. */
   rootLabel: string
   /** Icon on the root crumb, which is also what opens the header's "Path" popover. */
-  rootIcon: ElementType
+  rootIcon: ComponentType<{ className?: string }>
   /** Path segment of the list page under `/workspace/[workspaceId]/`. */
   listSegment: string
 }

apps/sim/app/workspace/[workspaceId]/components/folders/index.ts

@@ -1,4 +1,6 @@
 export { readRowDragPayload, writeRowDragPayload } from './drag-payload'
+export type { BuildFlyoutEntriesParams, FlyoutEntry } from './flyout-entries'
+export { buildFlyoutEntries } from './flyout-entries'
 export type { BreadcrumbFolder, FolderBreadcrumbItemsOptions } from './folder-breadcrumbs'
 export { breadcrumbFolderChain, folderBreadcrumbItems } from './folder-breadcrumbs'
 export { FolderContextMenu } from './folder-context-menu'