Skip to content

Add muted hover card footer #13

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

Closed
brsbl wants to merge 5 commits into from
Closed

Add muted hover card footer #13

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
bef87ca
Subdue hover card footer
brsbl Aug 1, 2026
a96bbf7
Add muted hover card footer
brsbl Aug 1, 2026
23ce80a
Soften hover card footer surface
brsbl Aug 1, 2026
2434fee
Set hover card footer surface to 40 percent
brsbl Aug 2, 2026
7c6f743
Refine dark hover card surface
brsbl Aug 2, 2026
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
7 changes: 5 additions & 2 deletions plugins/thread-hover-cards/app.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -756,6 +756,7 @@ function renderSummary(card: HTMLElement, summary: ThreadSummary): void {
if (times.childElementCount > 0) header.append(times);

const content: HTMLElement[] = [header];
const footer = element("footer", "bb-thread-hover-card__footer");
const summaryMessage = summary.latestAssistantMessage;

if (summaryMessage) {
Expand Down Expand Up @@ -847,7 +848,7 @@ function renderSummary(card: HTMLElement, summary: ThreadSummary): void {
pullRequest.append(pullRequestLink);
context.append(pullRequest);
}
content.push(context);
footer.append(context);
}

if (!summary.repository.isGitRepository) {
Expand Down Expand Up @@ -875,9 +876,11 @@ function renderSummary(card: HTMLElement, summary: ThreadSummary): void {
),
localPath,
);
content.push(local);
footer.append(local);
}

if (footer.childElementCount > 0) content.push(footer);

card.replaceChildren(...content);
refreshRunTime(card);
}
Expand Down
79 changes: 76 additions & 3 deletions plugins/thread-hover-cards/dist/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -521,6 +521,52 @@ var HOVER_CARD_CSS = String.raw`
user-select: text;
}

:is(.dark, [data-theme="dark"]) .bb-thread-hover-card {
border-color:
color-mix(
in oklab,
var(--warning-text, var(--warning)) 24%,
transparent
);
background:
radial-gradient(
ellipse at 18% -12%,
color-mix(
in oklab,
var(--warning-text, var(--warning)) 16%,
transparent
),
transparent 48%
),
linear-gradient(
115deg,
color-mix(
in oklab,
var(--warning-text, var(--warning)) 9%,
transparent
)
0%,
transparent 34%,
color-mix(
in oklab,
var(--warning-text, var(--warning)) 6%,
transparent
)
55%,
transparent 72%
),
color-mix(in srgb, var(--popover) 92%, transparent);
box-shadow:
0 0.75rem 2.5rem
color-mix(in srgb, var(--foreground) 16%, transparent),
inset 0 1px 0
color-mix(
in oklab,
var(--warning-text, var(--warning)) 20%,
transparent
);
}

.bb-thread-hover-card.is-visible {
animation: bb-thread-hover-card-in 120ms ease-out both;
}
Expand Down Expand Up @@ -689,6 +735,31 @@ var HOVER_CARD_CSS = String.raw`
color: var(--muted-foreground);
}

.bb-thread-hover-card__footer {
position: relative;
background: color-mix(in srgb, var(--muted) 60%, transparent);
color: var(--muted-foreground);
margin-inline: -0.75rem;
margin-bottom: -0.75rem;
padding-inline: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.75rem;
}

.bb-thread-hover-card__footer::before {
position: absolute;
top: -0.75rem;
inset-inline: 0;
height: 0.75rem;
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--muted) 60%, transparent)
);
content: "";
pointer-events: none;
}

.bb-thread-hover-card__context {
width: 100%;
flex-wrap: nowrap;
Expand Down Expand Up @@ -806,7 +877,7 @@ var HOVER_CARD_CSS = String.raw`
align-items: center;
gap: 0.1875rem;
border-radius: 0.25rem;
color: var(--foreground);
color: var(--muted-foreground);
outline: none;
text-decoration: none;
}
Expand Down Expand Up @@ -1583,6 +1654,7 @@ function renderSummary(card, summary) {
}
if (times.childElementCount > 0) header.append(times);
const content = [header];
const footer = element("footer", "bb-thread-hover-card__footer");
const summaryMessage = summary.latestAssistantMessage;
if (summaryMessage) {
const request = element("section", "bb-thread-hover-card__summary");
Expand Down Expand Up @@ -1665,7 +1737,7 @@ function renderSummary(card, summary) {
pullRequest.append(pullRequestLink);
context.append(pullRequest);
}
content.push(context);
footer.append(context);
}
if (!summary.repository.isGitRepository) {
const localContext = summary.repository.path?.trim() || (summary.repository.name === "Repository unavailable" ? "Local" : summary.repository.name);
Expand All @@ -1688,8 +1760,9 @@ function renderSummary(card, summary) {
),
localPath
);
content.push(local);
footer.append(local);
}
if (footer.childElementCount > 0) content.push(footer);
card.replaceChildren(...content);
refreshRunTime(card);
}
Expand Down
73 changes: 72 additions & 1 deletion plugins/thread-hover-cards/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,52 @@ export const HOVER_CARD_CSS = String.raw`
user-select: text;
}

:is(.dark, [data-theme="dark"]) .bb-thread-hover-card {
border-color:
color-mix(
in oklab,
var(--warning-text, var(--warning)) 24%,
transparent
);
background:
radial-gradient(
ellipse at 18% -12%,
color-mix(
in oklab,
var(--warning-text, var(--warning)) 16%,
transparent
),
transparent 48%
),
linear-gradient(
115deg,
color-mix(
in oklab,
var(--warning-text, var(--warning)) 9%,
transparent
)
0%,
transparent 34%,
color-mix(
in oklab,
var(--warning-text, var(--warning)) 6%,
transparent
)
55%,
transparent 72%
),
color-mix(in srgb, var(--popover) 92%, transparent);
box-shadow:
0 0.75rem 2.5rem
color-mix(in srgb, var(--foreground) 16%, transparent),
inset 0 1px 0
color-mix(
in oklab,
var(--warning-text, var(--warning)) 20%,
transparent
);
}

.bb-thread-hover-card.is-visible {
animation: bb-thread-hover-card-in 120ms ease-out both;
}
Expand Down Expand Up @@ -195,6 +241,31 @@ export const HOVER_CARD_CSS = String.raw`
color: var(--muted-foreground);
}

.bb-thread-hover-card__footer {
position: relative;
background: color-mix(in srgb, var(--muted) 60%, transparent);
color: var(--muted-foreground);
margin-inline: -0.75rem;
margin-bottom: -0.75rem;
padding-inline: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.75rem;
}

.bb-thread-hover-card__footer::before {
position: absolute;
top: -0.75rem;
inset-inline: 0;
height: 0.75rem;
background: linear-gradient(
to bottom,
transparent,
color-mix(in srgb, var(--muted) 60%, transparent)
);
content: "";
pointer-events: none;
}

.bb-thread-hover-card__context {
width: 100%;
flex-wrap: nowrap;
Expand Down Expand Up @@ -312,7 +383,7 @@ export const HOVER_CARD_CSS = String.raw`
align-items: center;
gap: 0.1875rem;
border-radius: 0.25rem;
color: var(--foreground);
color: var(--muted-foreground);
outline: none;
text-decoration: none;
}
Expand Down
36 changes: 34 additions & 2 deletions plugins/thread-hover-cards/test/app.test.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -407,6 +407,22 @@ assert.match(
);
assert.doesNotMatch(style.textContent, /--font-mono/);
assert.match(style.textContent, /\.bb-thread-hover-card__context/);
assert.match(
style.textContent,
/\.bb-thread-hover-card__footer \{[\s\S]*?background: color-mix\(in srgb, var\(--muted\) 60%, transparent\);[\s\S]*?margin-inline: -0\.75rem;[\s\S]*?padding-inline: 0\.75rem;[\s\S]*?padding-top: 0\.25rem;/,
);
assert.match(
style.textContent,
/\.bb-thread-hover-card__footer::before \{[\s\S]*?top: -0\.75rem;[\s\S]*?height: 0\.75rem;[\s\S]*?background: linear-gradient\([\s\S]*?transparent,[\s\S]*?color-mix\(in srgb, var\(--muted\) 60%, transparent\)[\s\S]*?\);[\s\S]*?pointer-events: none;/,
);
assert.match(
style.textContent,
/:is\(\.dark, \[data-theme="dark"\]\) \.bb-thread-hover-card \{[\s\S]*?border-color:[\s\S]*?var\(--warning-text, var\(--warning\)\)[\s\S]*?radial-gradient\([\s\S]*?linear-gradient\([\s\S]*?box-shadow:[\s\S]*?var\(--warning-text, var\(--warning\)\)/,
);
assert.doesNotMatch(
style.textContent,
/:is\(\.dark, \[data-theme="dark"\]\) \.bb-thread-hover-card \{[\s\S]*?0 0 1\.75rem/,
);
assert.match(
style.textContent,
/\.bb-thread-hover-card__context \{[\s\S]*?width: 100%;[\s\S]*?flex-wrap: nowrap;/,
Expand Down Expand Up @@ -564,9 +580,17 @@ assert.deepEqual(
[
"bb-thread-hover-card__header",
"bb-thread-hover-card__summary",
"bb-thread-hover-card__context",
"bb-thread-hover-card__footer",
],
);
assert.equal(
card.querySelector(".bb-thread-hover-card__footer")?.tagName,
"FOOTER",
);
assert.equal(
card.querySelector(".bb-thread-hover-card__context")?.parentElement,
card.querySelector(".bb-thread-hover-card__footer"),
);
assert.equal(
card.querySelector(".bb-thread-hover-card__summary")?.dataset.working,
"true",
Expand Down Expand Up @@ -932,6 +956,14 @@ assert.deepEqual(
[
"bb-thread-hover-card__header",
"bb-thread-hover-card__summary",
"bb-thread-hover-card__footer",
],
);
assert.deepEqual(
Array.from(
card.querySelector(".bb-thread-hover-card__footer")?.children ?? [],
).map((child) => child.className),
[
"bb-thread-hover-card__context",
"bb-thread-hover-card__local",
],
Expand Down Expand Up @@ -994,7 +1026,7 @@ assert.deepEqual(
Array.from(card.children).map((child) => child.className),
[
"bb-thread-hover-card__header",
"bb-thread-hover-card__context",
"bb-thread-hover-card__footer",
],
);
assert.deepEqual(requestBodies, [
Expand Down