feat(database): add Notion-style timeline view

playwright/bdd/features/database/timeline-integration.feature

@@ -0,0 +1,33 @@
+@timeline @cloud
+Feature: Timeline view integration
+  A timeline is a first-class database layout everywhere a calendar is: it can
+  be created as a page, embedded in a document (new or linked), opened in the
+  page modal, and published.
+
+  Scenario: New page menu creates a timeline page
+    Given I am signed in to a fresh workspace
+    When I add a Timeline page from the sidebar
+    Then the timeline view renders with an empty canvas and a New row footer
+    And the view tab is a Timeline tab
+
+  Scenario: The slash menu embeds a new timeline in a document
+    Given I am signed in to a fresh workspace
+    And I am editing a new document
+    When I insert a Timeline through the slash menu
+    Then the timeline opens in the page modal
+    When I close the timeline page modal
+    Then the document contains a timeline block
+
+  Scenario: The slash menu links an existing database as a timeline
+    Given I am signed in to a fresh workspace
+    And a timeline page exists
+    And I am editing a new document
+    When I link the timeline database as a timeline through the slash menu
+    Then the document contains a timeline block titled "View of New Database"
+
+  Scenario: A published timeline page renders read-only for visitors
+    Given a cloud calendar with "Design" today and "Build" in 2 days
+    And a Timeline view is added from the view menu
+    When I publish the timeline page
+    And a visitor opens the published timeline
+    Then the visitor sees the "Design" and "Build" bars without editing controls

playwright/bdd/features/database/timeline.feature

@@ -0,0 +1,313 @@
+@timeline @cloud
+Feature: Timeline view interactions
+  A Timeline view plots each row's date property as a bar on a horizontally
+  infinite canvas, the way Notion's timeline does, and supports the editing
+  interactions frappe-gantt offers: move, resize, snap, dependencies and
+  progress. Every scenario starts from a fresh cloud calendar with two dated
+  rows and a Timeline view added through the view tabs.
+
+  Background:
+    Given a cloud calendar with "Design" today and "Build" in 2 days
+    And a Timeline view is added from the view menu
+
+  Scenario: Dated rows render as bars under a month header with today marked
+    Then the timeline shows bars for "Design" and "Build"
+    And the timeline header marks today and draws the today line
+    And the timeline title shows the current month
+    And the timeline scale reads "Month"
+    And the timeline table lists "Design" and "Build"
+
+  Scenario: Changing the scale relabels the header and persists on the view
+    When I choose the "Week" timeline scale
+    Then the timeline scale reads "Week"
+    And the timeline header cells show weekday names
+    And the timeline still shows 2 bars
+    When I reload the timeline
+    Then the timeline scale reads "Week"
+    When I choose the "Month" timeline scale
+    Then the timeline scale reads "Month"
+
+  Scenario: Steppers, off-screen pills and Today move the viewport
+    When I step the timeline later 2 times
+    Then the "Design" bar is off screen to the left with a left pill
+    When I click the left off-screen pill
+    Then the "Design" bar is visible
+    When I step the timeline earlier 3 times
+    Then the "Design" bar is off screen to the right with a right pill
+    When I click the timeline Today button
+    Then the "Design" bar is visible
+    And the timeline header marks today and draws the today line
+
+  Scenario: Dragging a bar snaps it to whole columns and undo restores it
+    When I drag the "Build" bar 2 columns later
+    Then the "Build" bar moved 2 columns later
+    When I press undo
+    Then the "Build" bar is back where it started
+
+  Scenario: A dropped bar stays where it landed while the row data catches up
+    When I drag the "Design" bar 9 columns later while sampling its position
+    Then the "Design" bar never painted back where it started after landing 9 columns later
+
+  Scenario: The end handle resizes a bar and Escape cancels a drag in progress
+    When I drag the end handle of "Design" 2 columns later
+    Then the "Design" bar grew by 2 columns
+    And the header highlights nothing once the drag ends
+    When I start dragging the "Design" bar and press Escape
+    Then the "Design" bar is back where it started
+
+  Scenario: Hovering shows the card; table rows select and open
+    When I hover the "Design" bar
+    Then the timeline hover card shows "Design" with a one day duration
+    And the hover card starts at the "Design" bar and clears the docked table
+    When I click the table row "Build"
+    Then the "Build" row and bar are selected
+    And the selected "Build" table row stays opaque
+    When I click the empty canvas of the "Build" row
+    Then no timeline row is selected
+    When I open the table row "Build"
+    Then the row detail for "Build" opens
+
+  Scenario: Undated rows sit in the table until a click dates them, and the table can be hidden
+    When I add a new timeline row
+    Then the timeline table lists 3 rows and the No Date button reads "(1)"
+    When I click the undated row's canvas
+    Then the timeline shows 3 bars and no No Date button
+    When I hide the timeline table
+    Then the timeline table is hidden and 3 bars remain
+    When I show the timeline table
+    Then the timeline table lists 3 rows
+
+  Scenario: Dependencies draw arrows, dependents keep their gap, and a dependent may be dragged over its dependency
+    Given "Build" depends on "Design" through a relation field
+    And dependents shift with "Keep the time between items"
+    Then the timeline draws 1 dependency arrow
+    When I drag the "Design" bar 2 columns later
+    Then the "Build" bar moved 2 columns later
+    When I press undo
+    Then the "Build" bar is back where it started
+    And the "Design" bar is back where it started
+    When I drag the "Build" bar 6 columns earlier
+    Then the "Build" bar starts 4 columns before the "Design" bar
+    And the timeline draws 1 dependency arrow
+
+  Scenario: A progress field renders a fill that the progress handle drags
+    Given "Design" has a progress field at 40 percent
+    When I drag the end handle of "Design" 3 columns later
+    Then the "Design" bar shows 40 percent progress
+    And the timeline hover card for "Design" mentions "40% complete"
+    When I drag the progress handle of "Design" halfway across the bar
+    Then the "Design" bar shows more than 80 percent progress
+
+  Scenario Outline: Every scale renders a labelled header and keeps the bars
+    When I choose the "<scale>" timeline scale
+    Then the timeline scale reads "<scale>"
+    And the timeline header has labels
+    And the timeline still shows 2 bars
+
+    Examples:
+      | scale   |
+      | Hours   |
+      | Day     |
+      | Week    |
+      | Bi-week |
+      | Month   |
+      | Quarter |
+      | Year    |
+
+  Scenario: Redo re-applies an undone move and the right pill scrolls to a far bar
+    When I drag the "Build" bar 2 columns later
+    And I press undo
+    Then the "Build" bar is back where it started
+    When I press redo
+    Then the "Build" bar moved 2 columns later
+    When I drag the "Build" bar 40 columns later
+    Then the "Build" bar is off screen to the right with a right pill
+    When I click the right off-screen pill
+    Then the "Build" bar is visible
+
+  Scenario: The No Date list, keyboard open, and double-clicking a table row
+    When I add a new timeline row
+    And I open the No Date list
+    Then the No Date list shows 1 undated row
+    When I close the No Date list
+    And I focus the "Design" bar and press Enter
+    Then the row detail for "Design" opens
+    When I double-click the table row "Build"
+    Then the row detail for "Build" opens
+
+  Scenario: Timeline settings switch the plotted date field, the table, and the week start
+    Given "Build" also has a "Ship date" field 5 days later
+    When I choose "Ship date" as the timeline date field
+    Then the "Build" bar sits 5 days after the "Design" bar
+    When I toggle the table from the timeline settings
+    Then the timeline table is hidden and 2 bars remain
+    When I toggle the table from the timeline settings
+    Then the timeline table lists 2 rows
+    When I choose Monday as the timeline week start
+    And I choose the "Quarter" timeline scale
+    Then the timeline quarter labels fall on Mondays
+
+  Scenario: The Layout menu converts a view to a timeline and back
+    When I switch to the "Calendar" view tab
+    And I change the view layout to "Timeline"
+    Then the timeline shows bars for "Design" and "Build"
+    When I change the view layout to "Calendar"
+    Then the calendar view is shown
+
+  Scenario: Removing the plotted date field shows the empty state until another is chosen
+    Given "Build" also has a "Ship date" field 5 days later
+    When the timeline's date field is deleted from the database
+    Then the timeline explains that it has no date property
+    When I choose "Ship date" as the timeline date field
+    Then the timeline still shows 2 bars
+
+  Scenario: Extending a bar's end pushes its dependents along
+    Given "Build" depends on "Design" through a relation field
+    And dependents shift with "Keep the time between items"
+    When I drag the end handle of "Design" 3 columns later
+    Then the "Design" bar grew by 3 columns
+    And the "Build" bar moved 3 columns later
+
+  Scenario: By default dependents shift only when dates overlap
+    Given "Build" depends on "Design" through a relation field
+    When I drag the "Design" bar 1 columns later
+    Then the "Build" bar is back where it started
+    When I drag the "Design" bar 2 columns later
+    Then the "Build" bar moved 2 columns later
+    When I drag the end handle of "Design" 2 columns later
+    Then the "Build" bar moved 2 columns later
+
+  Scenario: With shifting off, dependents stay put
+    Given "Build" depends on "Design" through a relation field
+    And dependents shift with "Never"
+    When I drag the "Design" bar 3 columns later
+    Then the "Build" bar is back where it started
+    When I drag the "Build" bar 6 columns earlier
+    Then the "Build" bar starts 7 columns before the "Design" bar
+
+  Scenario: Avoid weekends moves a shifted dependent to the next Monday
+    Given "Build" depends on "Design" through a relation field
+    And dependents avoid weekends
+    When I drag the "Design" bar so that "Build" would land on a Saturday
+    Then the "Build" bar starts on the following Monday
+
+  Scenario: Dragging a bar's connector onto another bar adds a dependency
+    Given a relation field is bound as the dependency field
+    Then the timeline draws 0 dependency arrow
+    When I drag the connector of "Design" onto the "Build" bar
+    Then the timeline draws 1 dependency arrow
+    And "Build" depends on "Design"
+    When I drag the connector of "Build" onto the "Design" bar
+    Then the timeline draws 1 dependency arrow
+
+  Scenario: The table's hover gutter inserts, duplicates and deletes rows
+    When I click the hover "+" of the table row "Design"
+    Then the table lists "Design, Untitled, Build" in that order
+    When I open the row menu of the table row "Build" and choose "Insert above"
+    Then the table lists "Design, Untitled, Untitled, Build" in that order
+    When I open the row menu of the table row "Build" and choose "Duplicate"
+    Then the table lists "Design, Untitled, Untitled, Build, Build" in that order
+    And the timeline shows 3 bars
+    When I open the row menu of the last table row and choose "Delete"
+    Then the table lists "Design, Untitled, Untitled, Build" in that order
+    And the timeline shows 2 bars
+
+  Scenario: Dragging a row's handle reorders the table
+    When I drag the table row "Build" above "Design"
+    Then the table lists "Build, Design" in that order
+    When I press undo
+    Then the table lists "Design, Build" in that order
+
+  Scenario: Separate start and end date fields plot one bar and are written together
+    Given a "Due" date field where "Design" is due in 3 days
+    When I choose "Due" as the timeline end date field
+    Then the "Design" bar spans 4 columns
+    When I drag the "Design" bar 1 columns later
+    Then the "Design" bar moved 1 columns later
+    And the "Design" bar spans 4 columns
+    When I press undo
+    Then the "Design" bar is back where it started
+    When I drag the end handle of "Design" 2 columns later
+    Then the "Design" bar spans 6 columns
+    And the "Design" due date is 5 days from today
+    When I choose no timeline end date field
+    Then the "Design" bar spans 1 columns
+
+  Scenario: Table properties add columns with a calculations footer
+    Given "Design" has a progress field at 40 percent
+    When I show "Progress" as a table column
+    Then the table has a "Progress" column reading 40 for "Design"
+    And the docked table is 140 px wider
+    And the "Progress" column header, cells and calculation line up
+    When I set the "Progress" column calculation to "Sum"
+    Then the "Progress" column calculation reads "Sum40"
+    When I hide the "Progress" table column
+    Then the table has no "Progress" column
+
+  Scenario: Grouping by a select field stacks the rows under group headers
+    Given a "Status" select field where "Design" is "Doing" and "Build" is "Done"
+    When I group the timeline by "Status"
+    Then the timeline shows groups "Doing, Done" with 1 row each
+    And the timeline shows 2 bars
+    When I collapse the timeline group "Doing"
+    Then the timeline shows 1 bars
+    And the table does not list "Design"
+    When I expand the timeline group "Doing"
+    And I add a row from the timeline group "Done" footer
+    Then the timeline group "Done" has 2 rows
+    When I remove the timeline grouping
+    Then the timeline has no group headers
+    And the table lists "Design, Build, Untitled" in that order
+
+  Scenario: Setting up dependencies creates the Blocked by and Blocking properties
+    When I set up dependencies from the timeline settings
+    Then the table has "Blocked by" and "Blocking" columns
+    When I drag the connector of "Design" onto the "Build" bar
+    Then the timeline draws 1 dependency arrow
+    And the "Blocking" cell of "Design" reads "Build"
+    And the "Blocked by" cell of "Build" reads "Design"
+
+  Scenario: The first connector on a bare view sets dependencies up by itself
+    When I drag the connector of "Design" onto the "Build" bar
+    Then the table has "Blocked by" and "Blocking" columns
+    And the timeline draws 1 dependency arrow
+
+  Scenario: Binding the Blocking side keeps the arrow pointing the same way
+    When I set up dependencies from the timeline settings
+    And I drag the connector of "Design" onto the "Build" bar
+    Then the arrow runs from "Design" to "Build"
+    When I bind the "Blocking" property as the dependency field listing "Blocking"
+    Then the timeline draws 1 dependency arrow
+    And the arrow runs from "Design" to "Build"
+
+  Scenario: Clicking an arrow edits the link type and lag, and can remove the dependency
+    Given "Build" depends on "Design" through a relation field
+    When I click the arrow from "Design" to "Build"
+    Then the link editor shows "Design → Build"
+    When I choose the "SS" link type
+    And I drag the "Design" bar 4 columns later
+    Then the "Build" bar moved 2 columns later
+    When I click the arrow from "Design" to "Build"
+    And I set the link lag to 2 days
+    And I drag the "Design" bar 1 columns later
+    Then the "Build" bar moved 3 columns later
+    When I click the arrow from "Design" to "Build"
+    And I remove the dependency from the link editor
+    Then the timeline draws 0 dependency arrow
+
+  Scenario: Dragging a bar with dependents writes nothing until it is dropped
+    Given "Build" depends on "Design" through a relation field
+    And dependents shift with "Keep the time between items"
+    When I start counting writes to "Design" and "Build"
+    And I press the "Design" bar and move it 3 columns later without releasing
+    Then the "Design" and "Build" bars have moved 3 columns on screen
+    And no writes have reached "Design" or "Build"
+    When I release the pointer
+    Then writes have reached "Design" and "Build"
+    And the "Build" bar moved 3 columns later
+
+  Scenario: Dependency lines run under the cards and slide under the docked table
+    Given "Build" depends on "Design" through a relation field
+    Then the dependency line is drawn beneath the row layer
+    When I scroll the canvas so the dependency line sits under the docked table
+    Then the dependency line is hidden behind the docked table