feat(database): add Notion-style dashboard view

[appflowy]

Description

Adds a Notion-style Dashboard database view: a grid of widgets, laid out in rows, where each widget shows another database view. That view can come from this database or any other database in the workspace, and keeps its own filters, sorts and settings.

• Layout ids: DatabaseViewLayout.Dashboard = 9 and ViewLayout.Dashboard = 11.
• The dashboard's state is stored in layout_settings['9'].

Server side: AppFlowy-IO/AppFlowy-Cloud-Premium#1191 (new layout ids, queryable layout lists, linked-view dependencies, publish and duplicate support, Pro plan check) is merged and part of cloud 0.18.57.

⚠️ Rollout order: deploy the server's appflowy_worker from #1191 before Dashboard creation is enabled anywhere.

• An older worker can't decode folder layout 11. It dead-letters the folder change and blocks folder writes in that workspace (error code -5).
• Dashboard creation sits behind the same EXPERIMENTAL_DATABASE_VIEW_CREATION_ENABLED flag as Form and Timeline (fix: gate web Form and Timeline creation with CI opt-in #562): older desktop clients can't open workspaces that contain these views, so production builds hide the creation entry points and CI opts in. Existing dashboards still open and work.

What's included

• Widgets (src/components/database/dashboard/)
  • Each widget mounts its own nested <Database>, like the document database block.
  • A widget shows a placeholder while loading, and a clear state when its view is missing, has been deleted, or the user has no access to it.
• View and Edit modes
  • View mode is for reading and working with the data inside widgets. Filters and sorts a viewer applies inside a widget in View mode stay local to them (Notion parity): the widget's nested database edits a local, unsynced copy of the view's filters/sorts (view-conditions-overlay.ts) that mirrors the real view until changed (BigInt-safe for Yrs-native condition maps, and rebinding when sync replaces the view); the dashboard keeps them across widget moves and releases them when a widget is removed or re-pointed; read-only members can use them too; "Save for everybody" writes them to the view.
  • Edit mode adds a header to each widget with a drag handle and an options menu (open, change view, duplicate, move left/right/up/down, delete); clicking a widget's title or right-clicking it opens the menu, like Notion.
  • It also adds drag-and-drop within a row, into another row, or between rows (which starts a new row), width handles on a 12-column grid, row-height handles (mouse, touch and keyboard), and an add-widget picker for existing views or a new view in any database.
  • Notion's row edge controls: hovering a row shows a round ↓ at its left edge (insert a new row below it) and a round + at its right edge (add into the row).
  • Limits match Notion: 12 widgets in total and 4 per row. The dashboard explains the limit when an add is refused.
  • An empty dashboard opens in Edit mode.
  • Edit mode is local to each viewer and is never saved.
  • Widgets stack into one column on narrow screens.
• Global filters (Notion's "Filter multiple sources")
  • One filter maps one property in each source database. It is combined (AND) with each widget's own view filters.
  • Supported property types: text, number, select, multi-select, checkbox, date, person, URL, checklist, created and last edited time, and created by and last edited by.
  • Changes made in View mode stay local ("Only you see these changes") until an editor chooses Save for everybody.
  • Removing the last widget of a database removes that database from every filter, in the same undo step.
• Number chart (ChartType.Number = 4) for KPI tiles: the chart aggregations (count, sum, average, min, max, median, count values) as one number, with number formatting and a custom title.
• Charts
  • Axis ticks are rounded.
  • By default the X axis follows the view's property order, as on desktop.
  • Charts recompute when a cell they read is edited in place, for example a value edited in a table widget next to a Number tile.
• Where dashboards appear: view tabs + (Pro workspaces only, like Timeline), the Layout switcher (an existing dashboard keeps its option while creation is off, like Timeline), icons, the app shell and page modal, publish, and the Dashboard (/dashboard: a new database whose first tab is a dashboard, created like the Feed page via a grid) and Linked Dashboard slash items. A dashboard can't be created as a new page; the server rejects that, as it does for List, Gallery and Feed.
• Performance: six React best-practices review passes.
  • A widget's source permissions are resolved alongside its doc load (host widgets reuse the host's), so its nested database mounts with real permissions and starts its row prefetch at once instead of after four serial round trips.
  • The workspace database catalog is fetched only for dashboards that show another database.
  • Widgets read only stable contexts (host services, UI plumbing, the dragged widget id) and receive Edit state as props. A resize, a drag, a change to the host database's rows, or the app rebuilding loadViewMeta (trash / relations changes) no longer re-renders every nested database.
  • The chart drill-down list is rebuilt once after its rows load, not once per loaded row.
  • The layout store reuses unchanged row, widget and filter objects.
  • The dashboard toolbar is lazy-loaded.
  • Number charts that only count rows skip loading the rows.
  • Global filter sources are cached per doc.
  • A widget's View-mode conditions overlay is resolved during render (StrictMode-safe), so its nested database mounts once, with it; the unsaved-widget count lives in its own context so private filter edits re-render the toolbar, not every widget.
  • A global-filter change keeps each widget's last rows until the recompute lands, instead of a loading frame that unmounted every row and replayed chart animations.
  • Widgets narrowed only by private or global filters fetch all rows in one request, like any filtered view, instead of hydrating them 24 at a time.
  • Edit mode is derived in DashboardProvider (automatic for an empty dashboard), so a new dashboard no longer flashes View mode first.
  • Rows take dashboard-wide state as props: resizing or moving a widget re-renders only the rows that changed.
  • The Number-chart drill-down lists and loads 100 rows at a time; column reorders no longer regroup chart data.
• Review fixes (sixth pass):
  • Advanced filters in a View-mode widget show the viewer's private filters.
  • The private-filter overlay stands in only for the view it was made for (the calendar's draft copy keeps its own view).
  • A private copy that matches the shared view again is clean (no stale "unsaved" bar).
  • "Save for everybody" skips widgets whose source database the viewer can only read, and only appears when something can be saved.
  • Charts show a spinner while a new filter hydrates rows; a calendar draft hidden by private or global filters is released.
  • Enter in the widget picker picks from the current query.

Feature Preview

Screenshots of View mode, Edit mode (handles and widget menu), the widget picker, the global filter editor and the Number tiles still need to be added; the CLI cannot upload images.

Open question

When no rows match, a Number tile shows "No rows to count", while Notion shows 0. The bug-triage scenario currently expects "No rows to count". Should it match Notion instead?

---

Checklist

General

• I've included relevant documentation or comments for the changes introduced.
• I've tested the changes in multiple environments (e.g., different browsers, operating systems).

Testing

• I've added or updated tests to validate the changes introduced for AppFlowy Web.
  • jest: 47 test files added or updated, covering:
    • layout operations and normalization, structural sharing, the virtual filter list and extra filters;
    • DashboardContext, drag-and-drop and resize hooks, the widget menu and picker, and the stacked layout;
    • global filter utils, sources, bar and menu;
    • Number chart and chart utils, useChartData (including the cell-edit recompute), and settings;
    • tabs, the Pro gate and the slash layout;
    • the View-mode conditions overlay, its store and database context, and the chart drill-down paging.
  • Playwright BDD, 57 feature scenarios:
    • dashboard-creation, dashboard-widgets, dashboard-layout, dashboard-modes, dashboard-global-filters, dashboard-number-chart and dashboard-integration feature files.
  • Playwright BDD, 28 real-world scenarios in playwright/bdd/features/database/dashboard-usecases/, modelled on Notion's dashboard templates:
    • sales pipeline, bug triage, team status hub, executive KPI review, company home page, daily planner and personal finance;
    • they cover building a dashboard from existing views, working inside widgets (board drag, table edits, new rows, row pages), chart drill-down, dashboard-wide filters across databases, view-only teammates, live updates from a collaborator, and the phone layout.
  • pnpm test:e2e:bdd:dashboard runs both BDD suites (the web build needs EXPERIMENTAL_DATABASE_VIEW_CREATION_ENABLED=true, as CI already sets). They are in the Playwright CI matrix as dashboard-bdd and dashboard-usecase-bdd; the fixtures seed the workspace's Pro plan like the Timeline fixtures. They pass once CI's latest-amd64 cloud and worker images include #1191 (cloud 0.18.57 or later).
  • Six existing view-management specs matched the Board menu item by substring (hasText: 'Board'), which also matched "Dashboard"; they now match exactly.
  • Results (web dev server, and a cloud and worker built from #1191):
    • All 85 dashboard scenarios pass.
    • tsc -p tsconfig.web.json and eslint pass for the whole repo.
    • Full jest: 5,507 of 5,507 tests pass.
  • Known failures not caused by this branch:
    • The timeline.feature scenarios "Separate start and end date fields…" and "Table properties add columns with a calculations footer" fail locally on bar and column pixel positions. They fail the same way on unmodified origin/main (2b1fa12) against the same server.

Feature-Specific

• For feature additions, I've added a preview (video, screenshot, or demo) in the "Feature Preview" section.
• I've verified that this feature integrates seamlessly with existing functionality.

🤖 Generated with Claude Code

[sourcery-ai]

Sorry, we are unable to review this pull request

The GitHub API does not allow us to fetch diffs exceeding 20000 lines