feat: display files as expandable subrows in File Directory table

[kworathur]

Summary

Closes #81

Restructures the File Bucket table into a File Directory table with expandable subrows for files, opt-in expanding support in BaseTable, status chips, icons, and copy-to-clipboard.

Checklist from issue

• Remove the File column
• Have subrows under each bucket row showing file info (TanStack Table v8 expanding)
• Have an arrow on each row to expand/collapse its subrows
• Each subrow shows fileName, status (NOT UPLOADED, UPLOADED, EXTERNAL), edit option (copy file name)
• Files subrow is selectable, can select multiple, and delete multiple files
• Rename the File Bucket table as File Directory
• Add folder icon next to bucket name, file icon next to file name to differentiate them
• Files found only in Juno DB: Chip with NOT UPLOADED in red
• Files found in both Juno DB and external file provider: Chip with UPLOADED in green
• Files found only in external file provider: Chip with EXTERNAL in yellow
• Add mock data to show all rows and subrows
• Demo video of table and delete file action
• Filter should filter on both file name and bucket name

Changes

• baseTable.tsx — Added opt-in expandable prop with getExpandedRowModel(), ExpandedState, and subrow background styling
• columns.tsx — New FileDirectoryRow type with expand toggle, folder/file icons, status badge chips (red/green/yellow), and copy-to-clipboard action
• fileBucketTable.tsx — Data transform builds subRows with mock statuses, heading renamed, delete handler differentiates bucket vs file rows

Test plan

• Navigate to a project's Files page and verify heading says "File Directory"
• Verify bucket rows show folder icon and collapse chevron, starting collapsed
• Expand a bucket row and verify file subrows appear with file icon, status chip, and copy button
• Verify status chips: NOT UPLOADED (red), UPLOADED (green), EXTERNAL (yellow)
• Click copy button and verify file name is copied to clipboard
• Select-all checkbox selects both buckets and files
• Delete selected items works (buckets via API, files show frontend-only toast)
• Filter by bucket name shows matching buckets with all their files

bits_of_good_sprint4_demo.mp4

[netlify]

✅ Deploy Preview for juno-dashboard ready!

Name	Link
🔨 Latest commit	49e0ce2
🔍 Latest deploy log	https://app.netlify.com/projects/juno-dashboard/deploys/69d141e071ee7e0008eb4001
😎 Deploy Preview	https://deploy-preview-83--juno-dashboard.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[greptile-apps]

Greptile Summary

This PR restructures the File Buckets table into a File Directory table with TanStack Table v8 expandable subrows, adding folder/file icons, status chips (NOT UPLOADED / UPLOADED / EXTERNAL), and a copy-to-clipboard action per file row. The changes are well-scoped across three files: BaseTable gains an opt-in expandable prop, columns.tsx gets a new FileDirectoryRow type with richer cells, and fileBucketTable.tsx builds the bucket→file row hierarchy and correctly routes delete operations by row type.

Issues to address:

• Filter does not match file subrows — filterFromLeafRows: true is missing from the BaseTable table options when expandable is true. Typing a file name returns zero results, contradicting the stated requirement that filtering works on both bucket and file names.
• Unhandled clipboard rejection — navigator.clipboard.writeText can fail silently (permission denied, non-secure context); the rejection should be caught and surfaced as an error toast.
• Hardcoded status badge colors — bg-red-500, bg-green-500, bg-yellow-500 bypass the project's CSS variable/Tailwind config color conventions.
• PR Checklist items needing attention:
  • No hardcoded colors/sizes — violated by hardcoded status badge Tailwind color classes.
  • Mock statuses (index % 3) are expected to be temporary but should be tracked or removed before production to avoid misleading users about actual file upload state.

Confidence Score: 4/5

Safe to merge after addressing the missing filterFromLeafRows option — the core feature works but a stated filtering requirement is unmet.

One P1 logic defect exists: the filter box cannot match file subrow names because filterFromLeafRows: true is not set, directly contradicting the PR's own requirement. The remaining findings are P2 (clipboard error handling, hardcoded colors). No data loss or security risk is introduced.

src/components/baseTable.tsx — missing filterFromLeafRows: true when expandable is enabled.

Important Files Changed

Filename	Overview
src/components/baseTable.tsx	Added opt-in expandable prop that wires up TanStack Table's getExpandedRowModel and subrow support; missing filterFromLeafRows: true means filtering cannot match file subrows as stated in the PR requirements.
src/components/fileBucketTable/columns.tsx	New FileDirectoryRow type with expand toggle, folder/file icons, status badges, and copy-to-clipboard; clipboard API rejection is not handled and status badge colors are hardcoded instead of using CSS variables.
src/components/fileBucketTable/fileBucketTable.tsx	Data transform correctly builds bucket→file subrow hierarchy with mock statuses; delete handler properly separates bucket API calls from file-only toast; well-structured overall.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[User loads File Directory page] --> B[Fetch buckets + providers via React Query]
    B --> C[Transform: build FileDirectoryRow array with bucket rows + file subRows]
    C --> D[Render BaseTable with expandable=true]
    D --> E{User interaction}
    E -->|Click chevron on bucket row| F[Toggle expand/collapse subrows]
    F --> G[Subrow file rows become visible with bg-muted/30 background]
    E -->|Type in filter box| H{filterFromLeafRows?}
    H -->|false - current state| I[Only bucket names matched - File names never match]
    H -->|true - needed fix| J[Bucket OR file names matched - Parent shown if child matches]
    E -->|Click copy on file row| K[navigator.clipboard.writeText]
    K -->|success| L[toast: Copied file name]
    K -->|failure - unhandled| M[Silent failure - no user feedback]
    E -->|Select rows + Delete| N{Row type?}
    N -->|bucket| O[deleteBucket API call]
    N -->|file| P[toast.info: frontend only - no API call yet]
    O --> Q[Invalidate fileBucket query cache]

Loading

_{Reviews (1): Last reviewed commit: "feat: display files as expandable subrow..." | Re-trigger Greptile}

[aakashg00]

looks good!