Skip to content

feat(ui): shared RepoGroupHeader with info tint styling (#63) #69

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
wgordon17 merged 7 commits into from
Apr 18, 2026
Merged

feat(ui): shared RepoGroupHeader with info tint styling (#63) #69

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
858ddfc
feat(ui): creates shared RepoGroupHeader with info tint
wgordon17 Apr 17, 2026
3cbe5d8
refactor(issues): migrates IssuesTab to shared RepoGroupHeader
wgordon17 Apr 17, 2026
f051569
refactor(prs): migrates PullRequestsTab to shared RepoGroupHeader
wgordon17 Apr 17, 2026
767f742
refactor(actions): migrates ActionsTab to shared RepoGroupHeader
wgordon17 Apr 17, 2026
276c855
style(ui): add compact:text-sm to RepoGroupHeader for density parity
wgordon17 Apr 17, 2026
f9cb8be
style(ui): tones down RepoGroupHeader visual weight
wgordon17 Apr 17, 2026
c8d1977
refactor(ui): renames children prop to collapsedSummary
wgordon17 Apr 18, 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
73 changes: 36 additions & 37 deletions src/app/components/dashboard/ActionsTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import IgnoreBadge from "./IgnoreBadge";
import SkeletonRows from "../shared/SkeletonRows";
import type { FilterChipGroupDef } from "../shared/filterTypes";
import FilterToolbar from "../shared/FilterToolbar";
import ChevronIcon from "../shared/ChevronIcon";
import RepoGroupHeader from "../shared/RepoGroupHeader";
import ExpandCollapseButtons from "../shared/ExpandCollapseButtons";
import RepoLockControls from "../shared/RepoLockControls";
import RepoGitHubLink from "../shared/RepoGitHubLink";
Expand Down Expand Up @@ -277,7 +277,7 @@ export default function ActionsTab(props: ActionsTabProps) {
sortWorkflowsByStatus(repoGroup.workflows)
);

const collapsedSummary = createMemo(() => {
const workflowCounts = createMemo(() => {
const wfs = repoGroup.workflows;
const total = wfs.length;
let passed = 0;
Expand All @@ -294,42 +294,41 @@ export default function ActionsTab(props: ActionsTabProps) {

return (
<div class="bg-base-100" data-repo-group={repoGroup.repoFullName}>
{/* Repo header */}
<div class={`group/repo-header flex items-center bg-base-200/60 border-y border-base-300 hover:bg-base-200 transition-colors duration-300 ${highlightedReposActions().has(repoGroup.repoFullName) ? "animate-reorder-highlight" : ""}`}>
<button
onClick={() => toggleExpandedRepo("actions", repoGroup.repoFullName)}
aria-expanded={isExpanded()}
class="flex-1 flex items-center gap-2 px-4 py-2.5 compact:py-1.5 text-left text-sm font-semibold text-base-content"
>
<ChevronIcon size="md" rotated={!isExpanded()} />
{repoGroup.repoFullName}
<Show when={!isExpanded()}>
<span class="ml-auto text-xs font-normal text-base-content/60">
{collapsedSummary().total} workflow{collapsedSummary().total !== 1 ? "s" : ""}
<Show when={collapsedSummary().passed > 0 || collapsedSummary().failed > 0 || collapsedSummary().running > 0}>
{": "}
<Show when={collapsedSummary().passed > 0}>
<span>{collapsedSummary().passed} passed</span>
</Show>
<Show when={collapsedSummary().passed > 0 && (collapsedSummary().failed > 0 || collapsedSummary().running > 0)}>
{", "}
</Show>
<Show when={collapsedSummary().failed > 0}>
<span class="text-error font-medium">{collapsedSummary().failed} failed</span>
</Show>
<Show when={collapsedSummary().failed > 0 && collapsedSummary().running > 0}>
{", "}
</Show>
<Show when={collapsedSummary().running > 0}>
<span>{collapsedSummary().running} running</span>
</Show>
<RepoGroupHeader
repoFullName={repoGroup.repoFullName}
isExpanded={isExpanded()}
isHighlighted={highlightedReposActions().has(repoGroup.repoFullName)}
onToggle={() => toggleExpandedRepo("actions", repoGroup.repoFullName)}
trailing={
<>
<RepoGitHubLink repoFullName={repoGroup.repoFullName} section="actions" />
<RepoLockControls repoFullName={repoGroup.repoFullName} />
</>
}
collapsedSummary={
<span class="ml-auto text-xs font-normal text-base-content/60">
{workflowCounts().total} workflow{workflowCounts().total !== 1 ? "s" : ""}
<Show when={workflowCounts().passed > 0 || workflowCounts().failed > 0 || workflowCounts().running > 0}>
{": "}
<Show when={workflowCounts().passed > 0}>
<span>{workflowCounts().passed} passed</span>
</Show>
</span>
</Show>
</button>
<RepoGitHubLink repoFullName={repoGroup.repoFullName} section="actions" />
<RepoLockControls repoFullName={repoGroup.repoFullName} />
</div>
<Show when={workflowCounts().passed > 0 && (workflowCounts().failed > 0 || workflowCounts().running > 0)}>
{", "}
</Show>
<Show when={workflowCounts().failed > 0}>
<span class="text-error font-medium">{workflowCounts().failed} failed</span>
</Show>
<Show when={workflowCounts().failed > 0 && workflowCounts().running > 0}>
{", "}
</Show>
<Show when={workflowCounts().running > 0}>
<span>{workflowCounts().running} running</span>
</Show>
</Show>
</span>
}
/>
<Show when={!isExpanded() && peekUpdates().get(repoGroup.repoFullName)}>
{(peek) => (
<div class="animate-flash flex items-center gap-2 text-xs text-base-content/70 px-4 py-1.5 border-b border-base-300 bg-base-100">
Expand Down
68 changes: 33 additions & 35 deletions src/app/components/dashboard/IssuesTab.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@ import { scopeFilterGroup, type FilterChipGroupDef } from "../shared/filterTypes
import FilterToolbar from "../shared/FilterToolbar";
import RoleBadge from "../shared/RoleBadge";
import SkeletonRows from "../shared/SkeletonRows";
import ChevronIcon from "../shared/ChevronIcon";
import ExpandCollapseButtons from "../shared/ExpandCollapseButtons";
import { deriveInvolvementRoles, formatStarCount } from "../../lib/format";
import { deriveInvolvementRoles } from "../../lib/format";
import RepoGroupHeader from "../shared/RepoGroupHeader";
import { groupByRepo, computePageLayout, slicePageGroups, orderRepoGroups, isUserInvolved } from "../../lib/grouping";
import { createReorderHighlight } from "../../lib/reorderHighlight";
import RepoLockControls from "../shared/RepoLockControls";
Expand Down Expand Up @@ -351,44 +351,42 @@ export default function IssuesTab(props: IssuesTabProps) {

return (
<div class="bg-base-100" data-repo-group={repoGroup.repoFullName}>
<div class={`group/repo-header flex items-center bg-base-200/60 border-y border-base-300 hover:bg-base-200 transition-colors duration-300 ${highlightedReposIssues().has(repoGroup.repoFullName) ? "animate-reorder-highlight" : ""}`}>
<button
onClick={() => toggleExpandedRepo("issues", repoGroup.repoFullName)}
aria-expanded={isExpanded()}
class="flex-1 flex items-center gap-2 px-4 py-2.5 compact:py-1.5 text-left text-sm font-semibold text-base-content"
>
<ChevronIcon size="md" rotated={!isExpanded()} />
{repoGroup.repoFullName}
<RepoGroupHeader
repoFullName={repoGroup.repoFullName}
starCount={repoGroup.starCount}
isExpanded={isExpanded()}
isHighlighted={highlightedReposIssues().has(repoGroup.repoFullName)}
onToggle={() => toggleExpandedRepo("issues", repoGroup.repoFullName)}
badges={
<Show when={monitoredRepoNameSet().has(repoGroup.repoFullName)}>
<Tooltip content="Showing all activity, not just yours" focusable>
<span class="badge badge-xs badge-ghost" aria-label="monitoring all activity">Monitoring all</span>
</Tooltip>
</Show>
<Show when={repoGroup.starCount != null && repoGroup.starCount > 0}>
<span class="text-xs text-base-content/50 font-normal" aria-label={`${repoGroup.starCount} stars`}>
★ {formatStarCount(repoGroup.starCount!)}
</span>
</Show>
<Show when={!isExpanded()}>
<span class="ml-auto flex items-center gap-2 text-xs font-normal text-base-content/60">
<span>{repoGroup.items.length} {repoGroup.items.length === 1 ? "issue" : "issues"}</span>
<For each={roleSummary()}>
{([role, count]) => (
<span class={`inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium ${
role === "author" ? "bg-primary/10 text-primary" :
role === "assignee" ? "bg-secondary/10 text-secondary" :
"bg-base-300 text-base-content/70"
}`}>
{role} ×{count}
</span>
)}
</For>
</span>
</Show>
</button>
<RepoGitHubLink repoFullName={repoGroup.repoFullName} section="issues" />
<RepoLockControls repoFullName={repoGroup.repoFullName} />
</div>
}
trailing={
<>
<RepoGitHubLink repoFullName={repoGroup.repoFullName} section="issues" />
<RepoLockControls repoFullName={repoGroup.repoFullName} />
</>
}
collapsedSummary={
<span class="ml-auto flex items-center gap-2 text-xs font-normal text-base-content/60">
<span>{repoGroup.items.length} {repoGroup.items.length === 1 ? "issue" : "issues"}</span>
<For each={roleSummary()}>
{([role, count]) => (
<span class={`inline-flex items-center rounded-full px-1.5 py-0.5 text-xs font-medium ${
role === "author" ? "bg-primary/10 text-primary" :
role === "assignee" ? "bg-secondary/10 text-secondary" :
"bg-base-300 text-base-content/70"
}`}>
{role} ×{count}
</span>
)}
</For>
</span>
}
/>
<Show when={isExpanded()}>
<div role="list" class="divide-y divide-base-300">
<For each={repoGroup.items}>
Expand Down
Loading