diff --git a/core/App.css b/core/App.css index 5defcff5..a3fc0d5c 100644 --- a/core/App.css +++ b/core/App.css @@ -1756,23 +1756,28 @@ html[data-codiff-platform='darwin'] .sidebar { padding: 0 8px 8px 50px; } -.codiff-source-description-footer-row { - align-items: stretch; +.codiff-source-description-overview { + align-items: start; display: grid; - gap: 8px; - grid-template-columns: minmax(0, 1fr) minmax(260px, 320px); + gap: 12px; + grid-template-columns: minmax(0, 1fr) minmax(340px, 380px); + min-width: 0; +} + +.codiff-source-description-overview-main, +.codiff-source-description-overview-aside { + min-width: 0; } -.codiff-source-description-footer-main, -.codiff-source-description-footer-aside { +.codiff-source-description-overview-aside { display: flex; flex-direction: column; - min-width: 0; + gap: 8px; + padding: 8px 8px 8px 0; } -.codiff-source-description-footer-main > *, -.codiff-source-description-footer-aside > * { - flex: 1; +.codiff-source-description-overview-aside > * { + min-width: 0; } .source-description-comment-anonymous + .codiff-source-description-footer { @@ -1982,10 +1987,14 @@ html[data-codiff-platform='darwin'] .sidebar { } @media (max-width: 1024px) { - .codiff-source-description-footer-row { + .codiff-source-description-overview { grid-template-columns: minmax(0, 1fr); } + .codiff-source-description-overview-aside { + padding: 0 8px 8px; + } + .pull-request-merge-controls, .pull-request-merge-actions { justify-content: flex-start; diff --git a/core/SharedWalkthroughApp.tsx b/core/SharedWalkthroughApp.tsx index c075084e..d2a0a018 100644 --- a/core/SharedWalkthroughApp.tsx +++ b/core/SharedWalkthroughApp.tsx @@ -840,20 +840,12 @@ export function ReviewSurface({ onMergePullRequest={mergePullRequest} /> ) : undefined; - const sourceDescriptionFooter = - sourceDescriptionFooterMain && sourceDescriptionFooterAside ? ( -
-
{sourceDescriptionFooterMain}
-
{sourceDescriptionFooterAside}
-
- ) : ( - (sourceDescriptionFooterMain ?? sourceDescriptionFooterAside) - ); const sourceDescription = source.type === 'pull-request' ? ( ); }; @@ -1158,7 +1151,8 @@ export function ReviewSurface({ scrollTarget={treeScrollTarget} selectedPath={visibleSelectedPath} sourceDescriptionActions={sourceDescriptionActions} - sourceDescriptionFooter={sourceDescriptionFooter} + sourceDescriptionFooter={sourceDescriptionFooterMain} + sourceDescriptionFooterAside={sourceDescriptionFooterAside} walkthroughNotes={emptyWalkthroughNotes} /> ) diff --git a/core/app/components/ReviewCodeView.tsx b/core/app/components/ReviewCodeView.tsx index 14c53cfb..0bc31b41 100644 --- a/core/app/components/ReviewCodeView.tsx +++ b/core/app/components/ReviewCodeView.tsx @@ -943,6 +943,7 @@ function SourceDescriptionBody({ export function PullRequestSourceDescription({ actions, footer, + footerAside, keymap, onUpdateDescription, onUpdateTitle, @@ -951,6 +952,7 @@ export function PullRequestSourceDescription({ }: { actions?: ReactNode; footer?: ReactNode; + footerAside?: ReactNode; keymap?: CodiffKeymap; onUpdateDescription?: (body: string) => Promise | void; onUpdateTitle?: (title: string) => Promise | void; @@ -972,6 +974,25 @@ export function PullRequestSourceDescription({ const isCollapsed = (!sourceDescriptionHasBody && !canEditDescription) || collapsed; const layoutKey = `source-description-panel:${source.provider ?? ''}:${source.url}:${sourceTitle}:${sourceDescription}:${source.author?.login ?? ''}:${source.author?.avatarUrl ?? ''}:${isCollapsed ? 'collapsed' : 'open'}`; + const sourceDescriptionContent = ( + {}} + onUpdateDescription={onUpdateDescription} + onUploadDescriptionAsset={onUploadDescriptionAsset} + /> + ); + const overviewAside = + footer || footerAside ? ( + + ) : null; return (
@@ -987,17 +1008,19 @@ export function PullRequestSourceDescription({ /> {!isCollapsed ? (
- {}} - onUpdateDescription={onUpdateDescription} - onUploadDescriptionAsset={onUploadDescriptionAsset} - /> - {footer ?
{footer}
: null} + {overviewAside ? ( +
+
+ {sourceDescriptionContent} +
+ {overviewAside} +
+ ) : ( + <> + {sourceDescriptionContent} + {footer ?
{footer}
: null} + + )}
) : null}
@@ -2486,6 +2509,7 @@ export function ReviewCodeView({ source, sourceDescriptionActions, sourceDescriptionFooter, + sourceDescriptionFooterAside, supportsReviewCommentActions, theme = 'system', viewed, @@ -2546,6 +2570,7 @@ export function ReviewCodeView({ source: ReviewSource; sourceDescriptionActions?: ReactNode; sourceDescriptionFooter?: ReactNode; + sourceDescriptionFooterAside?: ReactNode; supportsReviewCommentActions: boolean; theme?: CodiffPreferences['theme']; viewed: Record; @@ -3802,20 +3827,44 @@ export function ReviewCodeView({ {!sourceDescriptionCollapsed && (sourceDescriptionHasContent || canEditSourceDescription) ? (
- - {sourceDescriptionFooter ? ( -
{sourceDescriptionFooter}
- ) : null} + {sourceDescriptionFooter || sourceDescriptionFooterAside ? ( +
+
+ +
+ +
+ ) : ( + <> + + {sourceDescriptionFooter ? ( +
{sourceDescriptionFooter}
+ ) : null} + + )}
) : null} @@ -3833,6 +3882,7 @@ export function ReviewCodeView({ sourceDescriptionAriaLabel, sourceDescriptionCollapsed, sourceDescriptionFooter, + sourceDescriptionFooterAside, sourceDescriptionHasContent, sourceDescriptionLabel, sourceTitle, diff --git a/core/app/components/walkthrough/NarrativeWalkthroughView.tsx b/core/app/components/walkthrough/NarrativeWalkthroughView.tsx index aad330e5..ac072a37 100644 --- a/core/app/components/walkthrough/NarrativeWalkthroughView.tsx +++ b/core/app/components/walkthrough/NarrativeWalkthroughView.tsx @@ -663,21 +663,26 @@ export function NarrativeWalkthroughView({ } : null; + const arc = ( + + ); + return ( -
- + <> + {arc} +
{navigation.mode === 'commit' ? ( Chapter {navigation.index + 1} - ) : null} -
+ ) : null} +
+ ); } diff --git a/core/app/components/walkthrough/WalkthroughDiffSurface.tsx b/core/app/components/walkthrough/WalkthroughDiffSurface.tsx index 29a7b32f..b0513709 100644 --- a/core/app/components/walkthrough/WalkthroughDiffSurface.tsx +++ b/core/app/components/walkthrough/WalkthroughDiffSurface.tsx @@ -35,6 +35,7 @@ export function WalkthroughDiffSurface({ scrollTarget, sourceDescriptionActions, sourceDescriptionFooter, + sourceDescriptionFooterAside, }: { allowViewedToggle?: boolean; blocks: ReadonlyArray; @@ -44,6 +45,7 @@ export function WalkthroughDiffSurface({ scrollTarget: WalkthroughBlockScrollTarget | null; sourceDescriptionActions?: ReviewCodeViewProps['sourceDescriptionActions']; sourceDescriptionFooter?: ReviewCodeViewProps['sourceDescriptionFooter']; + sourceDescriptionFooterAside?: ReviewCodeViewProps['sourceDescriptionFooterAside']; }) { return (
@@ -62,6 +64,9 @@ export function WalkthroughDiffSurface({ showSourceDescription sourceDescriptionActions={sourceDescriptionActions ?? reviewProps.sourceDescriptionActions} sourceDescriptionFooter={sourceDescriptionFooter ?? reviewProps.sourceDescriptionFooter} + sourceDescriptionFooterAside={ + sourceDescriptionFooterAside ?? reviewProps.sourceDescriptionFooterAside + } walkthroughNotes={emptyWalkthroughNotes} />