Skip to content

Commit 70ae8da

Browse files
matthewcarletoncursoragent
matthewcarleton
and
cursoragent
committed
feat: move resources to top, condense panel layout
Co-authored-by: Cursor <cursoragent@cursor.com>
1 parent 140bacc commit 70ae8da

1 file changed

Lines changed: 36 additions & 80 deletions

File tree

‎hub/src/App.tsx‎

Lines changed: 36 additions & 80 deletions
Original file line numberDiff line numberDiff line change
@@ -1423,29 +1423,46 @@ function HpuxPrototypesEmbedFullscreenPage() {
14231423
</DrawerActions>
14241424
</DrawerHead>
14251425
<DrawerPanelBody>
1426-
{/* Persona + Designer callout */}
1426+
{/* Resources row — compact, at top */}
1427+
{(() => {
1428+
const effectiveDesignDocUrl = designNotes.designDocUrl ?? manifestLinks.designDocUrl;
1429+
const effectiveRecordingUrl = designNotes.recordingUrl ?? manifestLinks.recordingUrl;
1430+
const linkStyle: React.CSSProperties = { paddingLeft: 0, paddingRight: 0, fontSize: "var(--pf-t--global--font--size--sm)" };
1431+
return (
1432+
<div style={{ display: "flex", flexWrap: "wrap", gap: "var(--pf-t--global--spacer--md)", alignItems: "center", marginBottom: "var(--pf-t--global--spacer--md)", paddingBottom: "var(--pf-t--global--spacer--md)", borderBottom: "1px solid var(--pf-t--global--border--color--default)" }}>
1433+
{effectiveDesignDocUrl ? (
1434+
<Button variant="link" isInline icon={<ExternalLinkAltIcon aria-hidden />} iconPosition="end" component="a" href={effectiveDesignDocUrl} target="_blank" rel="noopener noreferrer" style={linkStyle}>Design doc</Button>
1435+
) : (
1436+
<Content component="small" style={{ color: "var(--pf-t--global--text--color--subtle)" }}>Design doc — Not linked</Content>
1437+
)}
1438+
{effectiveRecordingUrl ? (
1439+
<Button variant="link" isInline icon={<ExternalLinkAltIcon aria-hidden />} iconPosition="end" component="a" href={effectiveRecordingUrl} target="_blank" rel="noopener noreferrer" style={linkStyle}>Recording</Button>
1440+
) : (
1441+
<Content component="small" style={{ color: "var(--pf-t--global--text--color--subtle)" }}>Recording — Not linked</Content>
1442+
)}
1443+
{designNotes.jiraUrl && (
1444+
<Button variant="link" isInline icon={<ExternalLinkAltIcon aria-hidden />} iconPosition="end" component="a" href={designNotes.jiraUrl} target="_blank" rel="noopener noreferrer" style={linkStyle}>Jira</Button>
1445+
)}
1446+
</div>
1447+
);
1448+
})()}
1449+
1450+
{/* Persona + Designer — single compact row */}
14271451
{(designNotes.personaName || designNotes.ownerName) && (
1428-
<div style={{ marginBottom: "var(--pf-t--global--spacer--xl)", display: "flex", flexDirection: "column", gap: "var(--pf-t--global--spacer--sm)" }}>
1452+
<div style={{ display: "flex", flexWrap: "wrap", gap: "var(--pf-t--global--spacer--sm)", alignItems: "center", marginBottom: "var(--pf-t--global--spacer--lg)" }}>
14291453
{designNotes.personaName && (
1430-
<div style={{ display: "flex", alignItems: "center", gap: "var(--pf-t--global--spacer--sm)" }}>
1431-
<Content component="small" style={{ color: "var(--pf-t--global--text--color--subtle)", minWidth: "4.5rem" }}>Persona</Content>
1432-
<Label isCompact color="purple">{designNotes.personaName}</Label>
1433-
</div>
1454+
<Label isCompact color="purple">{designNotes.personaName}</Label>
14341455
)}
14351456
{designNotes.ownerName && (
1436-
<div style={{ display: "flex", alignItems: "center", gap: "var(--pf-t--global--spacer--sm)" }}>
1437-
<Content component="small" style={{ color: "var(--pf-t--global--text--color--subtle)", minWidth: "4.5rem" }}>Designer</Content>
1438-
<Content component="small">
1439-
{designNotes.ownerName}
1440-
{designNotes.ownerSlack && ` — ${designNotes.ownerSlack}`}
1441-
</Content>
1442-
</div>
1457+
<Content component="small" style={{ color: "var(--pf-t--global--text--color--subtle)" }}>
1458+
{designNotes.ownerName}{designNotes.ownerSlack ? ` — @${designNotes.ownerSlack}` : ""}
1459+
</Content>
14431460
)}
14441461
</div>
14451462
)}
14461463

14471464
{designNotes.designerNotes && (
1448-
<div style={{ marginBottom: "var(--pf-t--global--spacer--xl)" }}>
1465+
<div style={{ marginBottom: "var(--pf-t--global--spacer--md)" }}>
14491466
<Title headingLevel="h3" size="md" style={{ marginBottom: "var(--pf-t--global--spacer--sm)" }}>
14501467
Designer Notes
14511468
</Title>
@@ -1456,13 +1473,13 @@ function HpuxPrototypesEmbedFullscreenPage() {
14561473
)}
14571474

14581475
{designNotes.navigationGuide && designNotes.navigationGuide.length > 0 && (
1459-
<div style={{ marginBottom: "var(--pf-t--global--spacer--xl)" }}>
1460-
<Title headingLevel="h3" size="md" style={{ marginBottom: "var(--pf-t--global--spacer--md)" }}>
1476+
<div style={{ marginBottom: "var(--pf-t--global--spacer--md)" }}>
1477+
<Title headingLevel="h3" size="md" style={{ marginBottom: "var(--pf-t--global--spacer--sm)" }}>
14611478
Where to navigate
14621479
</Title>
14631480
<ol style={{ listStyle: "none", margin: 0, padding: 0 }}>
14641481
{designNotes.navigationGuide.map((entry, index) => (
1465-
<li key={index} style={{ marginBottom: "var(--pf-t--global--spacer--lg)" }}>
1482+
<li key={index} style={{ marginBottom: "var(--pf-t--global--spacer--md)" }}>
14661483
<div style={{ display: "flex", alignItems: "center", flexWrap: "wrap", gap: "var(--pf-t--global--spacer--sm)", marginBottom: entry.notes ? "var(--pf-t--global--spacer--xs)" : 0 }}>
14671484
<span style={{ minWidth: "1.25rem", fontWeight: 700, color: "var(--pf-t--global--text--color--subtle)" }}>
14681485
{index + 1}.
@@ -1473,79 +1490,18 @@ function HpuxPrototypesEmbedFullscreenPage() {
14731490
</Label>
14741491
</div>
14751492
{entry.notes && (
1476-
<Content component="p" style={{ color: "var(--pf-t--global--text--color--subtle)", paddingLeft: "1.75rem" }}>
1493+
<Content component="p" style={{ color: "var(--pf-t--global--text--color--subtle)", paddingLeft: "1.75rem", fontSize: "var(--pf-t--global--font--size--sm)" }}>
14771494
{entry.notes}
14781495
</Content>
14791496
)}
14801497
{index < designNotes.navigationGuide!.length - 1 && (
1481-
<Divider style={{ marginTop: "var(--pf-t--global--spacer--md)" }} />
1498+
<Divider style={{ marginTop: "var(--pf-t--global--spacer--sm)" }} />
14821499
)}
14831500
</li>
14841501
))}
14851502
</ol>
14861503
</div>
14871504
)}
1488-
1489-
{/* External resource links — postMessage values take priority; manifest fills gaps. */}
1490-
{(() => {
1491-
const effectiveDesignDocUrl = designNotes.designDocUrl ?? manifestLinks.designDocUrl;
1492-
const effectiveRecordingUrl = designNotes.recordingUrl ?? manifestLinks.recordingUrl;
1493-
return (
1494-
<div>
1495-
<Title headingLevel="h3" size="md" style={{ marginBottom: "var(--pf-t--global--spacer--sm)" }}>
1496-
Resources
1497-
</Title>
1498-
<div style={{ display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "var(--pf-t--global--spacer--xs)" }}>
1499-
{effectiveDesignDocUrl ? (
1500-
<Button
1501-
variant="link"
1502-
icon={<ExternalLinkAltIcon aria-hidden />}
1503-
iconPosition="end"
1504-
component="a"
1505-
href={effectiveDesignDocUrl}
1506-
target="_blank"
1507-
rel="noopener noreferrer"
1508-
style={{ paddingLeft: 0 }}
1509-
>
1510-
Design doc
1511-
</Button>
1512-
) : (
1513-
<Content component="small" style={{ color: "var(--pf-t--global--text--color--subtle)" }}>Design doc — Not linked</Content>
1514-
)}
1515-
{effectiveRecordingUrl ? (
1516-
<Button
1517-
variant="link"
1518-
icon={<ExternalLinkAltIcon aria-hidden />}
1519-
iconPosition="end"
1520-
component="a"
1521-
href={effectiveRecordingUrl}
1522-
target="_blank"
1523-
rel="noopener noreferrer"
1524-
style={{ paddingLeft: 0 }}
1525-
>
1526-
Recording
1527-
</Button>
1528-
) : (
1529-
<Content component="small" style={{ color: "var(--pf-t--global--text--color--subtle)" }}>Recording — Not linked</Content>
1530-
)}
1531-
{designNotes.jiraUrl && (
1532-
<Button
1533-
variant="link"
1534-
icon={<ExternalLinkAltIcon aria-hidden />}
1535-
iconPosition="end"
1536-
component="a"
1537-
href={designNotes.jiraUrl}
1538-
target="_blank"
1539-
rel="noopener noreferrer"
1540-
style={{ paddingLeft: 0 }}
1541-
>
1542-
Jira ticket
1543-
</Button>
1544-
)}
1545-
</div>
1546-
</div>
1547-
);
1548-
})()}
15491505
</DrawerPanelBody>
15501506
</DrawerPanelContent>
15511507
) : <></>;

0 commit comments

Comments
 (0)