enhancement
major
#29396
Conversation display for TL Views: object list element, file chips, card panels
Building on the TL Views layer (#29108), the React view layer now features a generic conversation/comment list display, composed entirely of reusable elements. The tl-demo-react app demonstrates this under the "Object list" sidebar entry using a ticket–comment–attachment micro-model.
New view elements and options
- <object-list>: model-agnostic list editing element. Bound to a container channel plus three TL-Script functions (items, link, remove), so any containment style works. Renders one item-template instance per element (with the element published on a local channel) and a new-element template bound to a fresh transient object; <link-element> / <remove-element> actions attach and detach elements. Templates can declare local <channels> (e.g., derived author/date values). The displayed list updates in response to model changes through keyed control reuse.
- <file-list>: file-chip presentation of a composition reference whose elements carry a binary attribute (auto-detected or configured via a data attribute). Chips display an icon, name, and size with a “click-to-download” function; in edit mode, files are added via upload (file picker or drag-and-drop) and removed on a per-chip basis. The presentation-independent composition editing lifecycle was extracted from `CompositionTableControl` into `AbstractCompositionControl`, which is shared by both table and chip presentations.
- <avatar>: Circular initials avatar with a fixed color derived from the value’s label.
- <relative-time>: relative timestamp display (“5 minutes ago,” session locale) with the exact date as a tooltip.
- <field label-position="...">: label positions using the model-annotation vocabulary (hide-label, above-value, ...); an explicit label-position model annotation is honored as a fallback.
- Panel extensions: <title-content> slot for arbitrary header content (e.g., an avatar byline), default command-display scope plus per-command display for button display modes (icon-only, ...), hover actions for toolbar buttons revealed on hover or focus, and appearance="card" rendering a bordered, rounded panel with token-based compact insets.
Framework improvements
- dynamic-visibility mode selectors inherit the form’s edit mode; mode-by-expression functions optionally take it as a second argument (object -> editMode -> ...), enabling mode-dependent visibility—such as hiding an empty attribute in view mode while keeping it editable. <file-list> evaluates the annotation as well.
- The WYSIWYG display mode scales to fit its content instead of reserving editor height.
- Hidden buttons render nothing, so toolbars collapse empty items and visible buttons remain flush with the toolbar edge; empty panel button bars no longer take up space.
- Invisible form fields remain mounted (hidden via CSS), so state updates that arrive while they are hidden are no longer lost.
- File chips display a visible keyboard focus ring.
Migration
ModeSelector.getMode(TLObject, TLStructuredTypePart) has an additional boolean `editMode` parameter. Implementations of ModeSelector must accept the new parameter; TL-Script functions configured via `mode-by-expression ` are unaffected (a function declaring only the `object` parameter ignores the additional argument).