Skip to content

refactor(desktop): draw the issue page on @luke/ui's DetailPage #3642

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
luke-agent merged 1 commit into from
Oct 18, 2026
Merged

refactor(desktop): draw the issue page on @luke/ui's DetailPage #3642

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 40 additions & 35 deletions apps/desktop/src/renderer/desktop/issue-detail.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import {
BREADCRUMBS_VARIANT,
Breadcrumbs,
ConfirmDialog,
DetailPage,
EllipsisIcon,
IconButton,
PAGE_FRAME,
SKELETON_SHAPE,
Skeleton,
SkeletonRegion,
Expand Down Expand Up @@ -241,16 +243,21 @@ export function IssueDetail({
);
const identifier = issueIdentifier(workspaceName, issue.number);
return (
<section className="automations-view" aria-label={identifier}>
<DetailToolbar
issueId={issue.id}
identifier={identifier}
onBack={onBack}
onArchive={archiving.ask}
/>
{/* The issue is drawn as a task's document is (`version-view.tsx`): its title, then its body, at the document's measure. */}
<div className="desktop-document">
<div className="plan-document-scroll scroll-fade">
<>
<DetailPage
frame={PAGE_FRAME.TOOLBAR}
label={identifier}
toolbar={
<DetailToolbar
issueId={issue.id}
identifier={identifier}
onBack={onBack}
onArchive={archiving.ask}
/>
}
>
{/* The issue is drawn as a task's document is (`version-view.tsx`): its title, then its body, at the document's measure. */}
<div className="desktop-document issue-document">
<article className="plan-body">
<IssueTitle issue={issue} onChange={onChange} />
<IssueByline issue={issue} />
Expand All @@ -267,9 +274,9 @@ export function IssueDetail({
/>
</article>
</div>
</div>
</DetailPage>
<ConfirmDialog confirm={archiving} question={archiveQuestion(identifier)} />
</section>
</>
);
}

Expand All @@ -282,31 +289,29 @@ export function IssueDetail({
*/
export function IssueDetailSkeleton({ label }: { label: string }): React.JSX.Element {
return (
<div className="desktop-document">
<div className="plan-document-scroll scroll-fade">
<SkeletonRegion label={label}>
<div className="plan-body">
<div className="markdown task-title">
<div className="markdown-heading task-title-text" data-level="1">
<Skeleton width={SKELETON_TITLE} />
</div>
</div>
<div className="issue-byline">
<Skeleton width={SKELETON_BYLINE} />
</div>
<div className="issue-properties">
{SKELETON_CHIPS.map((width) => (
<Skeleton key={width} shape={SKELETON_SHAPE.CONTROL} width={width} />
))}
</div>
<div>
{SKELETON_DESCRIPTION.map((width) => (
<Skeleton key={width} width={width} />
))}
<div className="desktop-document issue-document">
<SkeletonRegion label={label}>
<div className="plan-body">
<div className="markdown task-title">
<div className="markdown-heading task-title-text" data-level="1">
<Skeleton width={SKELETON_TITLE} />
</div>
</div>
</SkeletonRegion>
</div>
<div className="issue-byline">
<Skeleton width={SKELETON_BYLINE} />
</div>
<div className="issue-properties">
{SKELETON_CHIPS.map((width) => (
<Skeleton key={width} shape={SKELETON_SHAPE.CONTROL} width={width} />
))}
</div>
<div>
{SKELETON_DESCRIPTION.map((width) => (
<Skeleton key={width} width={width} />
))}
</div>
</div>
</SkeletonRegion>
</div>
);
}
34 changes: 19 additions & 15 deletions apps/desktop/src/renderer/desktop/issues-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import {
COLLECTION_STATE,
CollectionPage,
type CollectionState,
DetailPage,
EmptyState,
ERROR_STATE_PLACEMENT,
ErrorState,
Expand Down Expand Up @@ -323,23 +324,26 @@ function DetailFrame({
}): React.JSX.Element {
useAppCommand(APP_COMMAND.EXIT_ISSUES, onBack);
return (
<section className="automations-view" aria-label="Issue">
<header className="desktop-toolbar">
<div className="desktop-toolbar-heading">
<IssueCrumbs onBack={onBack} />
<ExperimentTag />
</div>
</header>
<DetailPage
frame={PAGE_FRAME.TOOLBAR}
label="Issue"
toolbar={
<header className="desktop-toolbar">
<div className="desktop-toolbar-heading">
<IssueCrumbs onBack={onBack} />
<ExperimentTag />
</div>
</header>
}
>
{failure === undefined ? (
<IssueDetailSkeleton label={READING_ONE_LINE} />
) : (
<div className="automations-scroll scroll-fade-top">
<ErrorState onRetry={onRetry} placement={ERROR_STATE_PLACEMENT.CENTRED}>
{failure === ISSUE_CALL_FAILURE.NOT_FOUND ? GONE_LINE : UNREAD_ONE_LINE}
</ErrorState>
</div>
<ErrorState onRetry={onRetry} placement={ERROR_STATE_PLACEMENT.CENTRED}>
{failure === ISSUE_CALL_FAILURE.NOT_FOUND ? GONE_LINE : UNREAD_ONE_LINE}
</ErrorState>
)}
</section>
</DetailPage>
);
}

Expand All @@ -348,7 +352,7 @@ function DetailFrame({
* holds it until then, and every change sent through the list, so the list
* it goes back to already holds what was kept.
*/
function DetailPage({
function IssuePage({
tasks,
issueId,
issues,
Expand Down Expand Up @@ -473,7 +477,7 @@ function IssuesPages({ tasks }: { tasks: TasksControl }): React.JSX.Element {
/>
) : (
// Keyed by the issue, so another issue's page holds nothing of the last's.
<DetailPage
<IssuePage
key={place.issueId}
tasks={tasks}
issueId={place.issueId}
Expand Down
16 changes: 14 additions & 2 deletions apps/desktop/src/renderer/styles/issues.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
/* The Issues page (`issues-page.tsx`). Its frame, headings, rows, chips, and
title are the window's own: the list's page is @luke/ui's CollectionPage
under the toolbar, an issue's the Automations page's view and scroll, and
Home's sections and rows and a task's heading. Only
under the toolbar, an issue's its DetailPage under the toolbar with a
task's document inside, and Home's sections and rows and a task's
heading. Only
what an issue adds is drawn here: its group's heading, its identifier, its
status and priority marks, its properties' row, and its description's
editor. Tokens only. */
Expand All @@ -12,6 +13,17 @@
display: contents;
}

/* An issue's document, in its page's main column. It lends the description's
editor the plan's accent, which the plan's own scroll sets
(`.plan-document-scroll`), so its caret and ring are the plan's. Past the
page's own foot it keeps the plan's room for its last line to scroll clear
of the captions, which float at the window's foot over a page with no call
bar: the page's 40px and these 100px are the plan's 140px. */
.issue-document {
--accent: var(--voice-luke);
padding-bottom: 100px; /* off-scale */
}

/* The list's status groups, a section's gap apart, as Home's are. Note
that the list and the board set Home's rows at the window's own leading,
as Home does, rather than at the page's body leading around them. */
Expand Down
28 changes: 28 additions & 0 deletions packages/ui/src/components/detail-page/detail-page.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -167,6 +167,21 @@
padding-top: var(--luke-section-gap);
}

/* A main column holding nothing but an empty or failed state (an
`EmptyState`, or a centred `ErrorState` where the thing could not be
read) fills the column, so the state stands a little above the room's
middle, as a collection's empty or failed state does. */
.luke-detail-page-main:has(> .luke-detail-page-content > .luke-empty-state:only-child) {
display: flex;
flex-direction: column;
}

.luke-detail-page-content:has(> .luke-empty-state:only-child) {
display: flex;
flex: 1 0 auto;
flex-direction: column;
}
Comment thread
luke-agent[bot] marked this conversation as resolved.

/* Content across the room scrolls sideways in its own column. */
.luke-detail-page[data-width="full"] .luke-detail-page-main {
overflow-x: auto;
Expand All @@ -190,6 +205,19 @@
padding-inline: var(--luke-detail-page-side);
}

/* A lone empty or failed state fills the one scroll, as it fills the
main column above. */
.luke-detail-page-body:has(
> .luke-detail-page-main > .luke-detail-page-content > .luke-empty-state:only-child
) {
display: flex;
flex-direction: column;
}

.luke-detail-page-main:has(> .luke-detail-page-content > .luke-empty-state:only-child) {
flex: 1 0 auto;
}

/* The secondary column follows the main one's end gap, no more. */
.luke-detail-page[data-frame="toolbar"]
.luke-detail-page-secondary
Expand Down
5 changes: 4 additions & 1 deletion packages/ui/src/components/detail-page/detail-page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,10 @@ import { PAGE_FRAME, PAGE_WIDTH, type PageHeading } from "../page-frame/page-fra
* edge and the header's acts end on the secondary column's. Each scroll
* reaches the page's edge on its own side, so the wheel works anywhere
* over the column it moves. In a pane too narrow for two columns, the
* secondary column follows the main content in the one scroll.
* secondary column follows the main content in the one scroll. A main
* content that is only an `EmptyState` (or a centred `ErrorState`, where the
* thing could not be read) stands it a little above the room's middle, as a
* collection's page stands its empty and failed states.
*
* Under the window's toolbar (`PAGE_FRAME.TOOLBAR`) the page draws no
* header: the toolbar stands still above the columns, and the page is named
Expand Down
Loading