feat(channels): fixed-width tag cell with "+N" overflow + inline create (R8 S1)

Redesign the channel tag cell (the popover pilot's first real consumer) to fix two
UAT-reported bugs and two UX gaps:

- Jumping editor (bug 1): the "+" edit trigger now sits in a STABLE slot at the end,
  so toggling a tag (which grows the chip row) no longer moves the anchor — the editor
  popover stays put (verified dx/dy = 0).
- Whole-table reflow (bug 2): the cell is width-bounded (max-w inside the cell, since
  table-layout:auto ignores the column width — the documented channel/About trap) and
  single-line, collapsing overflow into a hoverable "+N" pill. Rows no longer wrap and
  reflow (verified uniform row heights).
- The "+" is ALWAYS present (even with zero tags), and its menu can CREATE a tag inline
  (type + Enter → create + attach) — tagging no longer requires the top-of-page dialog.

New shared ChannelTagsControl (used by table + cards; the detail page is Part 2) over the
R8 popover platform: a `menu` editor popover + a `hover` reveal-all popover. Greedy rem-safe
fit via ResizeObserver. `api.createTag` now returns Promise<Tag>.
This commit is contained in:
2026-07-30 23:33:50 +02:00
parent e644b4f7d7
commit cfa8be950d
5 changed files with 294 additions and 95 deletions
+5 -1
View File
@@ -46,7 +46,11 @@
"tags": {
"yourTags": "Your tags",
"manage": "Manage tags",
"yourTagsHint": "Your personal labels. Attach them to channels below, then filter the feed by tag from the sidebar. (Separate from the automatic language/topic tags.)"
"yourTagsHint": "Your personal labels. Attach them to channels below, then filter the feed by tag from the sidebar. (Separate from the automatic language/topic tags.)",
"noneYet": "No tags yet — create one below.",
"create": "Create tag",
"createPlaceholder": "New tag…",
"createFailed": "Could not create the tag."
},
"loading": "Loading channels…",
"empty": "No channels.",
+5 -1
View File
@@ -46,7 +46,11 @@
"tags": {
"yourTags": "Címkéid",
"manage": "Címkék kezelése",
"yourTagsHint": "Saját személyes címkéid. Csatold őket az alábbi csatornákhoz, majd szűrd a hírfolyamot címke szerint az oldalsávból. (Az automatikus nyelvi/téma címkéktől függetlenül.)"
"yourTagsHint": "Saját személyes címkéid. Csatold őket az alábbi csatornákhoz, majd szűrd a hírfolyamot címke szerint az oldalsávból. (Az automatikus nyelvi/téma címkéktől függetlenül.)",
"noneYet": "Még nincs címke — hozz létre egyet lent.",
"create": "Címke létrehozása",
"createPlaceholder": "Új címke…",
"createFailed": "A címke létrehozása nem sikerült."
},
"loading": "Csatornák betöltése…",
"empty": "Nincsenek csatornák.",