Skip to content

Rework the Layout display-rule editor into a single show/hide list#954

Merged
alistair3149 merged 2 commits into
masterfrom
feature/layout-editor-unified-list
Jun 29, 2026
Merged

Rework the Layout display-rule editor into a single show/hide list#954
alistair3149 merged 2 commits into
masterfrom
feature/layout-editor-unified-list

Conversation

@JeroenDeDauw

@JeroenDeDauw JeroenDeDauw commented Jun 27, 2026

Copy link
Copy Markdown
Member

A Layout with no display rules previously showed every schema property under "Hidden · N" with eye-off icons while also stating "All properties shown in schema order". An empty allowlist means "show all", but the editor rendered the empty case as "nothing shown", so the editor contradicted the actual rendering and the first "Show" click left only a single property visible.

Replace the two-section Shown/Hidden editor with a single reorderable list of all schema properties:

  • Each row has a visibility toggle. The eye / eye-off icon reflects the current state (matching Coda, Notion, Airtable); a tooltip names the action it performs.
  • Hidden rows dim and sink to the bottom and are not draggable (only shown rows carry a drag handle).
  • The header shows "N of M shown".
  • "Show all properties" appears only when a property is hidden, and reveals the hidden properties while preserving the existing order.
  • The last visible property's hide toggle is disabled (tooltip: "At least one property must be shown"), so the list can't collapse to zero shown and flip back to showing everything.

Domain semantics are unchanged: an empty display-rule list still means "show all properties in schema order". Display-rule editing logic is extracted into a pure, unit-tested module.

Notes for reviewers

  • Show-none deferred: the editor keeps at least one property shown (the last visible property's hide toggle is disabled). A true "show none" state is intentionally deferred — it's a non-breaking add later, since a "show all" layout is persisted as the absence of the displayRules key, never as [].
  • Orphaned rules: display rules referencing a property no longer in the schema are now pruned on the first edit (previously preserved). They already render nothing, so this only affects stored data. Fuller handling is tracked in Layout: Handle orphaned display rules #695.

Result of extensive back-and-forth with @JeroenDeDauw — three prototype approaches were built on branches and reviewed in the UI; he chose this single-list approach and drove the refinements (non-draggable hidden rows, action tooltips, "Show all" only when something is hidden, and disabling the last property's hide toggle).
Context: the NeoWiki codebase (LayoutEditor Vue components, display-rule resolution, Codex design tokens) and a Coda column-manager screenshot provided as a reference.
Written by Claude Code, Opus 4.8

@JeroenDeDauw
JeroenDeDauw marked this pull request as ready for review June 27, 2026 19:16
@JeroenDeDauw
JeroenDeDauw force-pushed the feature/layout-editor-unified-list branch from b42a9dc to 3b665ba Compare June 27, 2026 21:19
A Layout with no display rules previously showed every schema property under
"Hidden · N" with eye-off icons while also stating "All properties shown in
schema order". An empty allowlist means "show all", but the editor rendered the
empty case as "nothing shown", so the editor contradicted the actual rendering
and the first "Show" click left only a single property visible.

Replace the two-section Shown/Hidden editor with a single reorderable list of
all schema properties:

- Each row has a visibility toggle. The eye / eye-off icon reflects the current
  state (matching Coda, Notion, Airtable); a tooltip names the action.
- Hidden rows dim and sink to the bottom and are not draggable (only shown rows
  carry a drag handle).
- The header shows "N of M shown".
- "Show all properties" appears only when a property is hidden, and reveals the
  hidden properties while preserving the existing order.
- The last visible property's hide toggle is disabled (tooltip: "At least one
  property must be shown"), so the list can never collapse to zero shown and
  flip back to showing everything. A true "show none" state is left for later
  (a non-breaking add, since "show all" is persisted as the absence of the key).

Domain semantics are unchanged: an empty display-rule list still means "show all
properties in schema order". Display-rule editing logic is extracted into a pure,
unit-tested module.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@JeroenDeDauw
JeroenDeDauw force-pushed the feature/layout-editor-unified-list branch from 3b665ba to ab254f3 Compare June 27, 2026 21:46
@JeroenDeDauw

Copy link
Copy Markdown
Member Author

Main driver is that originally the UI was very confusing when all properties where shown, as it looked like there where hidden. New:

Screencast_20260627_234649.webm

@JeroenDeDauw JeroenDeDauw added the UX Improvement to User Experience label Jun 27, 2026
@alistair3149 alistair3149 self-assigned this Jun 29, 2026
… drop guard

Address review findings on the unified show/hide list:

- The last shown property's hide toggle is disabled, but its explanatory
  title sat on the disabled button, where browsers suppress the native
  tooltip. Move the title onto a wrapping span (with pointer-events: none on
  the disabled button) so the "at least one property must be shown"
  explanation stays reachable on hover; the aria-label stays on the button.
- Hidden rows shared the single sortable list as drop targets, so a shown row
  could be dropped into the hidden region and snap back on re-render. Add a
  draggable passthrough to useSortable and use it to exclude hidden rows from
  sorting.
- Unify the test fixtures on newTextProperty and a shared newDisplayRules
  helper, dropping the duplicated local rules() builders.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
@alistair3149
alistair3149 merged commit d1f46d2 into master Jun 29, 2026
9 checks passed
@alistair3149
alistair3149 deleted the feature/layout-editor-unified-list branch June 29, 2026 18:56
@alistair3149 alistair3149 removed their assignment Jun 29, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

UX Improvement to User Experience

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants