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.

Author: waleedlatif1

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

@@ -0,0 +1,139 @@
+/**
+ * @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',
+        children: [
+          {
+            kind: 'folder',
+            id: 'f2',
+            name: 'Q1',
+            children: [{ kind: 'item', id: 'i1', name: 'Revenue', 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', href: '/x/i1' }])
+  })
+})

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

@@ -0,0 +1,102 @@
+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; children: FlyoutEntry[] }
+  | { kind: 'item'; id: string; name: string; 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.
+ *
+ * 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) ?? []) {
+      rows.push({
+        item: { kind: 'folder', id: folder.id, name: folder.name, children: buildLevel(folder.id) },
+        pinned: pinnedFolderIds.has(folder.id),
+        name: folder.name,
+        key: flyoutSortTime(folder.updatedAt),
+      })
+    }
+    for (const item of itemsByFolder.get(parentId) ?? []) {
+      rows.push({
+        item: { kind: 'item', id: item.id, name: item.name, href: hrefForItem(item) },
+        pinned: pinnedItemIds.has(item.id),
+        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'

apps/sim/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu/collapsed-sidebar-menu.test.tsx

@@ -0,0 +1,129 @@
+/**
+ * @vitest-environment jsdom
+ */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+
+vi.mock('next/link', () => ({
+  default: ({ href, children, ...props }: { href: string; children: React.ReactNode }) => (
+    <a href={href} {...props}>
+      {children}
+    </a>
+  ),
+}))
+
+import { Table } from '@sim/emcn/icons'
+import {
+  CollapsedResourceFlyout,
+  CollapsedSidebarMenu,
+} from '@/app/workspace/[workspaceId]/w/components/sidebar/components/collapsed-sidebar-menu'
+
+function stubHoverMenu(isOpen: boolean) {
+  return {
+    isOpen,
+    open: vi.fn(),
+    close: vi.fn(),
+    setLocked: vi.fn(),
+    triggerProps: { onMouseEnter: vi.fn(), onMouseLeave: vi.fn() },
+    contentProps: {
+      onMouseEnter: vi.fn(),
+      onMouseLeave: vi.fn(),
+      onCloseAutoFocus: vi.fn(),
+    },
+  } as unknown as Parameters<typeof CollapsedSidebarMenu>[0]['hover']
+}
+
+describe('CollapsedSidebarMenu nav-link trigger', () => {
+  let container: HTMLDivElement
+  let root: Root
+
+  beforeEach(() => {
+    ;(globalThis as { IS_REACT_ACT_ENVIRONMENT?: boolean }).IS_REACT_ACT_ENVIRONMENT = true
+    vi.stubGlobal(
+      'ResizeObserver',
+      class {
+        observe() {}
+        unobserve() {}
+        disconnect() {}
+      }
+    )
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+  })
+
+  afterEach(() => {
+    act(() => root.unmount())
+    container.remove()
+    vi.unstubAllGlobals()
+  })
+
+  function renderMenu(
+    options: { isOpen?: boolean; onContextMenu?: (e: unknown, href: string) => void } = {}
+  ) {
+    act(() => {
+      root.render(
+        <CollapsedSidebarMenu
+          hover={stubHoverMenu(options.isOpen ?? false)}
+          navLink={{
+            item: { id: 'tables', label: 'Tables', icon: Table, href: '/workspace/w1/tables' },
+            active: false,
+            onContextMenu: options.onContextMenu,
+          }}
+        >
+          <CollapsedResourceFlyout
+            entries={[{ kind: 'item', id: 't1', name: 'Leads', href: '/workspace/w1/tables/t1' }]}
+            icon={Table}
+            emptyLabel='No tables yet'
+          />
+        </CollapsedSidebarMenu>
+      )
+    })
+    const trigger = container.querySelector('a')
+    if (!trigger) throw new Error('trigger anchor not rendered')
+    return trigger
+  }
+
+  it('renders the rail chip as a real link, not the primitive button', () => {
+    const trigger = renderMenu()
+
+    expect(trigger.getAttribute('href')).toBe('/workspace/w1/tables')
+    expect(trigger.textContent).toContain('Tables')
+    expect(container.querySelector('button')).toBeNull()
+    /* Radix's trigger is a button primitive; its `type` must not leak onto the anchor. */
+    expect(trigger.hasAttribute('type')).toBe(false)
+  })
+
+  it('activates the link on Enter, which Radix would otherwise swallow to toggle the menu', () => {
+    const trigger = renderMenu()
+    const onClick = vi.fn((e: Event) => e.preventDefault())
+    trigger.addEventListener('click', onClick)
+
+    act(() => {
+      trigger.dispatchEvent(
+        new KeyboardEvent('keydown', { key: 'Enter', bubbles: true, cancelable: true })
+      )
+    })
+
+    expect(onClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('forwards a right-click to the nav item context menu with its href', () => {
+    const onContextMenu = vi.fn()
+    const trigger = renderMenu({ onContextMenu })
+
+    act(() => {
+      trigger.dispatchEvent(new MouseEvent('contextmenu', { bubbles: true, cancelable: true }))
+    })
+
+    expect(onContextMenu).toHaveBeenCalledWith(expect.anything(), '/workspace/w1/tables')
+  })
+
+  it('lists the resource rows once the flyout is open', () => {
+    renderMenu({ isOpen: true })
+
+    const row = document.querySelector('a[href="/workspace/w1/tables/t1"]')
+    expect(row?.textContent).toContain('Leads')
+  })
+})