OUT-3729, OUT-3717 | Improve visual appearance of the Your Actions field

[arpandhakal]

Changes

Revamps the "Your Actions" section on Client Home from bulky cards into compact pill rows to match the new design (OUT-3729), and fixes 0-event actions appearing for clients (OUT-3717).

• Layout: bulky cards → compact pills. Lighter container (bg-background-primary, subtle border, rounded-md, reduced padding), sentence-case "Your actions" heading. Removed the "You have N pending items" subheading, the per-card count line, the arrow icon, and the bottom link.
• Labels: verb sentences — Pay 2 invoices / Sign 1 contract / Submit 3 forms / Complete 2 tasks (singular noun when the count is 1). In the editor (IU) view the count renders as a short {{N}} placeholder chip.
• Responsive grid (container queries) — responds to the card's own width, so the narrow editor column is no longer crammed:
  • 4 actions → 4 columns (fill); 3 actions → 3 columns (fill)
  • 1–2 actions → third-width, left-aligned, leaving space on the right (per the per-count designs)
  • collapses to 2 / 1 columns on narrower widths
• OUT-3717 — hide empty actions: in the client/preview view, actions with 0 pending events are hidden, and the whole section is not rendered when nothing is pending (no empty state). In the editor view all enabled actions stay visible (counts are placeholders) so admins can still configure them.
• Navigation preserved: clicking a pill still posts history.push to the parent window to open the corresponding app (tasks → tasks app, others → their route). Hover affordance and navigation are both gated on clientId, so they apply in the client view but not the editor.

Testing Criteria

• Loom: add walkthrough video
• Client view with 1 / 2 / 3 / 4 enabled actions → 3–4 fill the row; 1–2 are left-aligned with space on the right.
• Client with some apps at 0 events → those pills are hidden; all apps at 0 → the whole section is gone (no empty state).
• Editor (IU) view → all enabled actions show with the {{N}} placeholder chip; sidebar toggle/reorder still works.
• Narrow editor content column → grid collapses to 2/1 columns instead of cramming.
• Click a pill in the client view → navigates to the correct app.
• Dark background setting → pills / heading / borders render correctly.
• Responsive: mobile (1 col), tablet (2 cols), desktop (per-count).

Notes

• Stacked on OUT-3510 — this PR targets the OUT-3510 branch as its base (not main). OUT-3510 should land first.
• Addresses OUT-3729 and OUT-3717.

Impact & Surface Area of Change

• Touches only the Client Home "Your Actions" feature: action-item.tsx, actions-card.tsx, and a verb field added to each definition in constant.ts.
• No backend / schema / API changes. useNotificationCounts, useEnabledActions, and useAppDisplayNames are consumed unchanged.
• Watch for: the empty-state gating (section hidden when nothing pending) — confirm it doesn't hide the section unexpectedly; and the container-query breakpoints across real portal vs editor widths.

🤖 Generated with Claude Code

[linear-code]

OUT-3729

OUT-3717

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
client-home-v3	Ready	Preview, Comment	Jun 11, 2026 8:49am

[greptile-apps]

Greptile Summary

Replaces the bulky "Your Actions" cards with compact pill rows and fixes 0-count actions appearing in the client view. Changes touch only the three action-item files with no backend or schema impact.

• action-item.tsx: Swaps card layout for a shared PILL_BASE pill shell (loading + loaded states pixel-identical), builds the label as {verb} {count} {noun} with singular/plural agreement in preview mode, and drops the arrow icon and count sub-line.
• actions-card.tsx: Adds isPreviewMode && !counts guard to suppress the section until counts resolve (preventing empty-state flash), filters out zero-count actions in preview/client mode, and rewires the container-query grid to the new 1/2/3/4-column breakpoint spec.
• constant.ts: Extends ActionDefinition with an imperative verb field (Pay, Sign, Complete, Submit) for all four action definitions.

Confidence Score: 4/5

Safe to merge; logic is self-contained and well-guarded against empty-state flashes.

The filtering and guard logic in actions-card.tsx is correct, and the pill rendering in action-item.tsx is clean. The only finding is a dead portalUrl prop carried through the diff unchanged — it poses no runtime risk but should be removed for clarity.

The portalUrl prop threading across action-item.tsx and actions-card.tsx is the one thing worth tidying before merge.

Important Files Changed

Filename	Overview
src/features/action-items/components/action-item.tsx	Redesigned from card to pill layout; portalUrl prop is declared and forwarded from parent but never consumed in the component body (pre-existing dead prop).
src/features/action-items/components/actions-card.tsx	Adds count-based filtering in preview/client mode with a !counts guard to prevent empty-state flash; grid breakpoints correctly implement the 1/2/3/4-column design spec using container queries.
src/features/editor/components/Sidebar/Actions/constant.ts	Adds verb field to ActionDefinition and each definition — straightforward data change with correct TypeScript typing via the satisfies constraint.

Flowchart

%%{init: {'theme': 'neutral'}}%%
flowchart TD
    A[ActionsCard renders] --> B{isPreviewMode?}
    B -- Yes --> C{counts resolved?}
    C -- No --> D[return null\nno flash]
    C -- Yes --> E[Filter: keep actions\nwhere count > 0]
    E --> F{visibleCount > 0?}
    F -- No --> G[return null\nno empty state]
    F -- Yes --> H[Render pill grid]
    B -- No\nEditor mode --> I[visibleActions = all\nenabled actions]
    I --> J{enabledActions.length > 0?}
    J -- No --> G
    J -- Yes --> H
    H --> K[ActionItem per action]
    K --> L{isLoading?}
    L -- Yes --> M[Skeleton pill div]
    L -- No --> N[Button pill\nverb + count + noun]
    N --> O{clientId?}
    O -- Yes --> P[hover styles +\npostMessage on click]
    O -- No --> Q[Static pill\nno interaction]

Loading

Comments Outside Diff (2)

1. src/features/action-items/components/action-item.tsx, line 8-15 (link)

   The portalUrl prop is declared in the interface and forwarded from ActionsCard (portalUrl={workspace?.portalUrl}) but is never destructured or used anywhere in the component body. Navigation is handled entirely via window.parent.postMessage, so this prop is dead weight that could mislead future contributors.

   Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

2. src/features/action-items/components/actions-card.tsx, line 55-62 (link)

   The portalUrl forwarding can be removed here once the prop is dropped from ActionItemProps — passing it keeps an unused value flowing through the tree.

   Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!

_{Reviews (1): Last reviewed commit: "feat(OUT-3729): revamp Your Actions card..." | Re-trigger Greptile}

[priosshrsth]

@arpandhakal lgtm. Screenshots would have been helpful in this case though.