You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
In the task edit modal, add a small clock-icon button to the right of the name/label field, same height as the field. Clicking it should show the three timestamps — Created, Modified, Completed — that currently render inline as a fixed 3-column block, moving them out of the modal body and into a tooltip triggered by that button.
Current layout
The name field lives in the shared editTitleRow (frontend/src/components/PlayerItemList/PlayerItemList.tsx:320-348), rendered by PlayerItemList — the checkbox, then the editInput text field (PlayerItemList.module.scss:229-249). There's currently no extension point in this row for extra controls.
The three timestamps render as a taskTimestamps grid (frontend/src/components/TasksPanel/TasksPanel.tsx:117-130, styled at TasksPanel.module.scss:96-100) inside renderEditSummary, which PlayerItemList displays below the title row as modalSummary (PlayerItemList.tsx:349-351).
Requested change
Add a small button with a clock icon immediately to the right of the name input, sized to match the input's height.
Move the Created/Modified/Completed block out of the always-visible modal body and into a Tooltip (frontend/src/components/Tooltip/Tooltip.tsx) anchored on that button — Tooltip's content prop already accepts arbitrary ReactNode, so the existing 3-column timestamp markup can be passed through largely as-is.
Tooltip here is click/tap-to-toggle by design (see the comment at Tooltip.tsx:43-51 and Unify tap/click tooltip behaviour #568) — that's the right behavior for this, not hover-only, since the button is the only way to reach this info once it's out of the flowing layout.
Implementation notes
Since editTitleRow is inside the sharedPlayerItemList component but this timestamp button is task-specific, PlayerItemList needs a new extension point (e.g. an optional renderTitleRowActions?: (item: T) => React.ReactNode prop) rendered next to the name input in the title row. Only TasksPanel would pass content for it; the other four panels using PlayerItemList (Skills, Projects, Categories, Activities) simply wouldn't render anything there.
Button already supports a size="small" variant (Button.tsx:8) — check whether that (or a new icon-button style) matches the input's height, since the ask is specifically that the button be the same height as the field, not just visually similar.
Once the timestamps move into the tooltip, confirm nothing else in renderEditSummary's remaining content depends on the taskTimestamps grid being present in the flow (e.g. spacing/<hr> around it) and adjust accordingly (TasksPanel.tsx:117-134).
Summary
In the task edit modal, add a small clock-icon button to the right of the name/label field, same height as the field. Clicking it should show the three timestamps — Created, Modified, Completed — that currently render inline as a fixed 3-column block, moving them out of the modal body and into a tooltip triggered by that button.
Current layout
editTitleRow(frontend/src/components/PlayerItemList/PlayerItemList.tsx:320-348), rendered byPlayerItemList— the checkbox, then theeditInputtext field (PlayerItemList.module.scss:229-249). There's currently no extension point in this row for extra controls.taskTimestampsgrid (frontend/src/components/TasksPanel/TasksPanel.tsx:117-130, styled atTasksPanel.module.scss:96-100) insiderenderEditSummary, whichPlayerItemListdisplays below the title row asmodalSummary(PlayerItemList.tsx:349-351).Requested change
Tooltip(frontend/src/components/Tooltip/Tooltip.tsx) anchored on that button —Tooltip'scontentprop already accepts arbitraryReactNode, so the existing 3-column timestamp markup can be passed through largely as-is.Tooltiphere is click/tap-to-toggle by design (see the comment atTooltip.tsx:43-51and Unify tap/click tooltip behaviour #568) — that's the right behavior for this, not hover-only, since the button is the only way to reach this info once it's out of the flowing layout.Implementation notes
editTitleRowis inside the sharedPlayerItemListcomponent but this timestamp button is task-specific,PlayerItemListneeds a new extension point (e.g. an optionalrenderTitleRowActions?: (item: T) => React.ReactNodeprop) rendered next to the name input in the title row. OnlyTasksPanelwould pass content for it; the other four panels usingPlayerItemList(Skills, Projects, Categories, Activities) simply wouldn't render anything there.Buttonalready supports asize="small"variant (Button.tsx:8) — check whether that (or a new icon-button style) matches the input's height, since the ask is specifically that the button be the same height as the field, not just visually similar.renderEditSummary's remaining content depends on thetaskTimestampsgrid being present in the flow (e.g. spacing/<hr>around it) and adjust accordingly (TasksPanel.tsx:117-134).