Skip to content

TasksPanel: move Created/Modified/Completed timestamps into a clock-icon tooltip next to the name field #764

Description

@gaidheal1

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

  • 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

  1. Add a small button with a clock icon immediately to the right of the name input, sized to match the input's height.
  2. 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.
  3. 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 shared PlayerItemList 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).

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    Status
    Staging review

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions