ake/paperclip
1
0
Fork 0
mirror of https://github.com/alkimake/paperclip.git synced 2026-06-16 10:50:38 +09:00
Code Issues Projects Releases Packages Wiki Activity

[codex] Polish inbox nested issue UI (#4959)

Browse source 
## Thinking Path

> - Paperclip orchestrates AI agents through issue lists and
issue-thread interactions
> - The inbox must preserve nested issue visibility and keyboard
navigation as work decomposes into deeper sub-issues
> - Some UI polish issues made nested rows harder to scan and pending
question cancellation less covered
> - The issue list also had a small test indentation regression around
load-more behavior
> - This pull request tightens nested inbox rendering and related
issue-thread/list polish
> - The benefit is a more reliable operator inbox for multi-level work
trees

## What Changed

- Included nested grandchild issues in inbox keyboard navigation and
recursive row rendering.
- Sort parent rows by descendant activity so active subtrees remain
visible.
- Removed extra inbox card background styling in favor of the page
surface.
- Added regression coverage for pending question cancellation.
- Cleaned up the issue-list load-more test indentation.

## Verification

- `pnpm exec vitest run ui/src/lib/inbox.test.ts
ui/src/components/IssueChatThread.test.tsx
ui/src/components/IssuesList.test.tsx`
- Screenshots were not captured in this PR split; the visible flow is
covered by focused component/helper tests and should get browser QA in
the follow-up issue.

## Risks

- Medium risk: nested inbox rendering and keyboard navigation are
user-visible. The changes are localized to inbox grouping/rendering
helpers and covered by targeted tests.

> For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and
discuss it in `#dev` before opening the PR. Feature PRs that overlap
with planned core work may need to be redirected — check the roadmap
first. See `CONTRIBUTING.md`.

## Model Used

- OpenAI Codex, GPT-5 coding agent, tool use and local command
execution. Exact context window was not exposed in the runtime.

## Checklist

- [x] I have included a thinking path that traces from project context
to this change
- [x] I have specified the model used (with version and capability
details)
- [x] I have checked ROADMAP.md and confirmed this PR does not duplicate
planned core work
- [x] I have run tests locally and they pass
- [x] I have added or updated tests where applicable
- [ ] If this change affects the UI, I have included before/after
screenshots
- [x] I have updated relevant documentation to reflect my changes
- [x] I have considered and documented any risks above
- [x] I will address all Greptile and reviewer comments before
requesting merge

---------

Co-authored-by: Paperclip <noreply@paperclip.ing>
This commit is contained in:
Dotta 2026-05-01 11:58:53 -05:00 • committed by GitHub
parent 2d72292ad6
commit fe401b7fa9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
6 changed files with 200 additions and 48 deletions
Download patch file Download diff file Expand all files Collapse all files

82
ui/src/pages/Inbox.tsx
View file

@ -2122,7 +2122,7 @@ export function Inbox() {
<>
{showSeparatorBefore("work_items") && <Separator />}
<div>
<div ref={listRef} className="overflow-hidden rounded-xl bg-card">
<div ref={listRef} className="overflow-hidden rounded-xl">
{(() => {
const renderInboxIssue = ({
issue,
@ -2436,6 +2436,55 @@ export function Inbox() {
const hasChildren = childIssues.length > 0;
const isExpanded = hasChildren && !collapsedInboxParents.has(issue.id);
const canArchiveIssue = canArchiveFromTab && group.searchSection === "none";
const renderChildIssueRows = (
children: Issue[],
depth: number,
seen: ReadonlySet<string>,
): ReactNode[] =>
children.flatMap((child) => {
if (seen.has(child.id)) return [];
const nextSeen = new Set(seen);
nextSeen.add(child.id);
const childNavIdx = childFlatIndex.get(child.id) ?? -1;
const isChildSelected = selectedIndex === childNavIdx;
const grandchildIssues = group.childrenByIssueId.get(child.id) ?? [];
const childHasChildren = grandchildIssues.length > 0;
const childIsExpanded = childHasChildren && !collapsedInboxParents.has(child.id);
const childRow = renderInboxIssue({
issue: child,
depth,
selected: isChildSelected,
hasChildren: childHasChildren,
isExpanded: childIsExpanded,
childCount: grandchildIssues.length,
collapseParentId: child.id,
allowArchive: canArchiveIssue,
});
const isChildArchiving = archivingIssueIds.has(child.id);
const row = (
<div
key={`sel-issue:${child.id}`}
data-inbox-item
className="relative"
onClick={() => setSelectedIndex(childNavIdx)}
>
{canArchiveIssue ? (
<SwipeToArchive
key={`issue:${child.id}`}
selected={isChildSelected}
disabled={isChildArchiving || archiveIssueMutation.isPending}
onArchive={() => archiveIssueMutation.mutate(child.id)}
>
{childRow}
</SwipeToArchive>
) : childRow}
</div>
);
return childIsExpanded
? [row, ...renderChildIssueRows(grandchildIssues, depth + 1, nextSeen)]
: [row];
});
const parentRow = renderInboxIssue({
issue,
depth: 0,
@ -2459,36 +2508,7 @@ export function Inbox() {
) : parentRow));
if (isExpanded) {
for (const child of childIssues) {
const childNavIdx = childFlatIndex.get(child.id) ?? -1;
const isChildSelected = selectedIndex === childNavIdx;
const childRow = renderInboxIssue({
issue: child,
depth: 1,
selected: isChildSelected,
allowArchive: canArchiveIssue,
});
const isChildArchiving = archivingIssueIds.has(child.id);
elements.push(
<div
key={`sel-issue:${child.id}`}
data-inbox-item
className="relative"
onClick={() => setSelectedIndex(childNavIdx)}
>
{canArchiveIssue ? (
<SwipeToArchive
key={`issue:${child.id}`}
selected={isChildSelected}
disabled={isChildArchiving || archiveIssueMutation.isPending}
onArchive={() => archiveIssueMutation.mutate(child.id)}
>
{childRow}
</SwipeToArchive>
) : childRow}
</div>,
);
}
elements.push(...renderChildIssueRows(childIssues, 1, new Set([issue.id])));
}
}