FN-9202: Unify dashboard banner styling
Standardize dashboard notices on a shared, token-driven banner shell. - Add a reusable Banner primitive with consistent tones, layouts, actions, and dismissal behavior. - Migrate dashboard notification banners away from bespoke shells and left accent borders. - Document and test banner styling invariants, including token-only CSS lengths and colors. - Add a patch changeset for the published dashboard bundle. Files changed: .changeset/fn-9202-banner-style-unification.md | 7 ++ docs/dashboard-guide.md | 4 + .../app/__tests__/banner-style-consistency.test.ts | 25 ++++ .../app/components/ApprovalNotificationBanner.css | 10 -- .../app/components/ApprovalNotificationBanner.tsx | 5 +- packages/dashboard/app/components/Banner.css | 81 ++++++++++++ packages/dashboard/app/components/Banner.tsx | 78 ++++++++++++ .../app/components/CapacityRiskBanner.css | 50 +------- .../app/components/CapacityRiskBanner.tsx | 39 +++--- .../app/components/CliBinaryInstallBanner.css | 126 ++----------------- .../app/components/CliBinaryInstallBanner.tsx | 14 +-- .../app/components/DbCorruptionBanner.css | 18 +-- .../app/components/DbCorruptionBanner.tsx | 5 +- .../app/components/EngineStatusBanner.css | 94 ++------------ .../app/components/EngineStatusBanner.tsx | 48 +++---- .../app/components/EngineUnavailableBanner.css | 42 +------ .../app/components/EngineUnavailableBanner.tsx | 21 ++-- .../app/components/MergeAdvanceNotice.css | 129 +++---------------- .../app/components/MergeAdvanceNotice.tsx | 36 +++--- .../app/components/MigrationInProgressBanner.css | 25 ---- .../app/components/MigrationInProgressBanner.tsx | 19 +-- .../app/components/OAuthReloginBanner.css | 53 +------- .../app/components/OAuthReloginBanner.tsx | 26 +--- .../app/components/SessionNotificationBanner.css | 16 +-- .../app/components/SessionNotificationBanner.tsx | 5 +- .../app/components/SetupWarningBanner.css | 106 +--------------- .../app/components/SetupWarningBanner.tsx | 31 +---- .../app/components/SqliteMigrationBanner.css | 40 +----- .../app/components/SqliteMigrationBanner.tsx | 33 ++--- .../app/components/TaskIdIntegrityBanner.css | 18 +-- .../app/components/TaskIdIntegrityBanner.tsx | 5 +- .../dashboard/app/components/TestModeBanner.css | 18 --- .../dashboard/app/components/TestModeBanner.tsx | 12 +- .../app/components/UpdateAvailableBanner.css | 139 +++------------------ .../app/components/UpdateAvailableBanner.tsx | 22 ++-- .../app/components/__tests__/Banner.test.tsx | 48 +++++++ 36 files changed, 450 insertions(+), 998 deletions(-) Fusion-Task-Id: FN-9202 Fusion-Task-Lineage: 14762201-55e5-4124-a897-9667c3a1ab84 Co-authored-by: Fusion (runfusion.ai) <noreply@runfusion.ai>
This commit is contained in:
gsxdsm
7
.changeset/fn-9202-banner-style-unification.md
Normal file
7
.changeset/fn-9202-banner-style-unification.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
"@runfusion/fusion": patch
|
||||
---
|
||||
|
||||
summary: Unify dashboard notices with consistent banner styling.
|
||||
category: feature
|
||||
dev: Adds the shared Banner component and removes left accent borders.
|
||||
@@ -2147,6 +2147,10 @@ The dashboard's CSS is split into a global stylesheet (`packages/dashboard/app/s
|
||||
|
||||
**Rule:** New CSS for a component goes in `app/components/ComponentName.css`, NOT `styles.css`. Only design tokens, primitives (`.btn`, `.card`, `.modal`, `.form-input`), and cross-component `@media` overrides belong in the global file.
|
||||
|
||||
### Banners
|
||||
|
||||
Use the shared `Banner` component for dashboard notices. Its `tone` selects semantic info, warning, error, success, or neutral tinting; `layout` selects inline cards or sticky chrome; and `density` selects compact or regular spacing. Banners use a tinted surface and `var(--btn-border-width)` hairline border, never a left accent bar. Declaration values use design tokens: raw px is allowed only in `@media` conditions, zero values, and `var()` fallbacks.
|
||||
|
||||
### Dialog anatomy: spacing and stacking
|
||||
|
||||
Two rules that a new dialog gets wrong the same way every time. Both were paid for by the Set Up AI
|
||||
|
||||
@@ -0,0 +1,25 @@
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { loadComponentCss } from "../test/cssFixture";
|
||||
|
||||
const bannerCss = [
|
||||
"Banner.css", "TestModeBanner.css", "MigrationInProgressBanner.css", "SqliteMigrationBanner.css",
|
||||
"EngineUnavailableBanner.css", "EngineStatusBanner.css", "OAuthReloginBanner.css", "SessionNotificationBanner.css",
|
||||
"CliBinaryInstallBanner.css", "UpdateAvailableBanner.css", "MergeAdvanceNotice.css", "TaskIdIntegrityBanner.css",
|
||||
"DbCorruptionBanner.css", "SetupWarningBanner.css", "ApprovalNotificationBanner.css", "CapacityRiskBanner.css",
|
||||
];
|
||||
|
||||
function stripVarCalls(line: string): string { return line.replace(/var\([^)]*\)/g, ""); }
|
||||
|
||||
describe("dashboard banner style consistency", () => {
|
||||
it("keeps accent borders and raw CSS lengths out of banner styles", () => {
|
||||
for (const file of bannerCss) {
|
||||
const css = loadComponentCss(file);
|
||||
expect(css, file).not.toMatch(/border-(?:left|inline-start)\s*:/);
|
||||
expect(css, file).not.toMatch(/#[0-9a-f]{3,8}\b|rgba\(/i);
|
||||
|
||||
// px is permitted only in media conditions, zero values, and var() fallbacks.
|
||||
const offending = css.split(/\r?\n/).filter((line) => !line.includes("@media") && /\d+(?:\.\d+)?px/.test(stripVarCalls(line)));
|
||||
expect(offending, `${file} has raw px declaration values`).toEqual([]);
|
||||
}
|
||||
});
|
||||
});
|
||||
@@ -1,9 +1,3 @@
|
||||
.approval-notification-banner {
|
||||
padding: var(--space-sm) var(--space-lg);
|
||||
border-bottom: var(--btn-border-width) solid var(--border);
|
||||
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
|
||||
}
|
||||
|
||||
.approval-notification-banner__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -38,10 +32,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.approval-notification-banner {
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
}
|
||||
|
||||
.approval-notification-banner__content {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { AlertTriangle, Inbox, X } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Banner } from "./Banner";
|
||||
import "./ApprovalNotificationBanner.css";
|
||||
|
||||
interface ApprovalNotificationBannerProps {
|
||||
@@ -17,7 +18,7 @@ export function ApprovalNotificationBanner({
|
||||
const noun = pendingCount === 1 ? t("approval.requestSingular", "request") : t("approval.requestPlural", "requests");
|
||||
|
||||
return (
|
||||
<section className="approval-notification-banner" role="region" aria-live="polite" aria-label={t("approval.requests", "Approval requests")}>
|
||||
<Banner as="section" className="approval-notification-banner" tone="warning" layout="chrome" role="region" aria-live="polite" aria-label={t("approval.requests", "Approval requests")}>
|
||||
<div className="approval-notification-banner__content">
|
||||
<div className="approval-notification-banner__headline">
|
||||
<span className="status-dot" aria-hidden="true" />
|
||||
@@ -34,6 +35,6 @@ export function ApprovalNotificationBanner({
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
81
packages/dashboard/app/components/Banner.css
Normal file
81
packages/dashboard/app/components/Banner.css
Normal file
@@ -0,0 +1,81 @@
|
||||
/*
|
||||
FNXC:DashboardBanners 2026-08-23-22:36:
|
||||
Dashboard banners share one shell so tone is expressed through a tint and a hairline full border using var(--btn-border-width), preserving thick-border themes. The operator explicitly removed left highlight borders, so this primitive must never add an accent bar.
|
||||
*/
|
||||
.banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border: var(--btn-border-width) solid color-mix(in srgb, var(--banner-tone) 30%, var(--border));
|
||||
background: color-mix(in srgb, var(--banner-tone) 10%, var(--surface));
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.banner--info { --banner-tone: var(--color-info); }
|
||||
.banner--warning { --banner-tone: var(--color-warning); }
|
||||
.banner--error { --banner-tone: var(--color-error); }
|
||||
.banner--success { --banner-tone: var(--color-success); }
|
||||
.banner--neutral { --banner-tone: var(--text-muted); }
|
||||
|
||||
.banner--inline {
|
||||
margin-bottom: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.banner--chrome {
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: var(--z-sticky);
|
||||
border-inline: 0;
|
||||
border-top: 0;
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
.banner--compact {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
}
|
||||
|
||||
.banner__icon {
|
||||
display: flex;
|
||||
flex: 0 0 auto;
|
||||
color: var(--banner-tone);
|
||||
}
|
||||
|
||||
.banner__copy {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.banner__title {
|
||||
color: var(--text);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.banner__body { color: var(--text-muted); }
|
||||
|
||||
.banner__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.banner__dismiss {
|
||||
flex: 0 0 auto;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.banner__dismiss:hover { color: var(--text); }
|
||||
.banner__dismiss:focus-visible { box-shadow: var(--focus-ring-strong); }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.banner {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.banner__actions {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
78
packages/dashboard/app/components/Banner.tsx
Normal file
78
packages/dashboard/app/components/Banner.tsx
Normal file
@@ -0,0 +1,78 @@
|
||||
import { forwardRef, type ReactNode } from "react";
|
||||
import { X } from "lucide-react";
|
||||
import "./Banner.css";
|
||||
|
||||
/*
|
||||
FNXC:DashboardBanners 2026-08-23-22:36:
|
||||
Dashboard banners share one shell so tone is expressed through a tint and a hairline full border using var(--btn-border-width), preserving thick-border themes. The operator explicitly removed left highlight borders, so this primitive must never add an accent bar.
|
||||
*/
|
||||
export type BannerTone = "info" | "warning" | "error" | "success" | "neutral";
|
||||
export type BannerLayout = "inline" | "chrome";
|
||||
export type BannerDensity = "compact" | "regular";
|
||||
|
||||
interface BannerProps {
|
||||
tone: BannerTone;
|
||||
layout?: BannerLayout;
|
||||
density?: BannerDensity;
|
||||
as?: "div" | "section";
|
||||
icon?: ReactNode;
|
||||
title?: ReactNode;
|
||||
children?: ReactNode;
|
||||
actions?: ReactNode;
|
||||
onDismiss?: () => void;
|
||||
dismissLabel?: string;
|
||||
className?: string;
|
||||
role?: string;
|
||||
"aria-live"?: "off" | "assertive" | "polite";
|
||||
"aria-label"?: string;
|
||||
"data-testid"?: string;
|
||||
}
|
||||
|
||||
export const Banner = forwardRef<HTMLDivElement | HTMLElement, BannerProps>(function Banner({
|
||||
tone,
|
||||
layout = "inline",
|
||||
density = "regular",
|
||||
as: Component = "div",
|
||||
icon,
|
||||
title,
|
||||
children,
|
||||
actions,
|
||||
onDismiss,
|
||||
dismissLabel = "Dismiss",
|
||||
className,
|
||||
role,
|
||||
"aria-live": ariaLive,
|
||||
"aria-label": ariaLabel,
|
||||
"data-testid": dataTestId,
|
||||
}, ref) {
|
||||
const classes = [
|
||||
"banner",
|
||||
`banner--${tone}`,
|
||||
`banner--${layout}`,
|
||||
`banner--${density}`,
|
||||
className,
|
||||
].filter(Boolean).join(" ");
|
||||
|
||||
return (
|
||||
<Component
|
||||
ref={ref as never}
|
||||
className={classes}
|
||||
role={role}
|
||||
aria-live={ariaLive}
|
||||
aria-label={ariaLabel}
|
||||
data-testid={dataTestId}
|
||||
>
|
||||
{icon ? <span className="banner__icon">{icon}</span> : null}
|
||||
<div className="banner__copy">
|
||||
{title ? <div className="banner__title">{title}</div> : null}
|
||||
{children ? <div className="banner__body">{children}</div> : null}
|
||||
</div>
|
||||
{actions ? <div className="banner__actions">{actions}</div> : null}
|
||||
{onDismiss ? (
|
||||
<button type="button" className="btn-icon banner__dismiss" aria-label={dismissLabel} onClick={onDismiss}>
|
||||
<X aria-hidden="true" />
|
||||
</button>
|
||||
) : null}
|
||||
</Component>
|
||||
);
|
||||
});
|
||||
@@ -1,49 +1 @@
|
||||
.capacity-risk-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: var(--space-xs) solid var(--color-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 8%, transparent);
|
||||
}
|
||||
|
||||
.capacity-risk-banner__content {
|
||||
color: var(--text);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.capacity-risk-banner__dismiss {
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
padding: var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
line-height: 0;
|
||||
flex-shrink: 0;
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast), background var(--transition-fast);
|
||||
}
|
||||
|
||||
.capacity-risk-banner__dismiss:hover {
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
|
||||
}
|
||||
|
||||
.capacity-risk-banner__dismiss:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.capacity-risk-banner {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.capacity-risk-banner__dismiss {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
.capacity-risk-banner__content { line-height: 1.4; }
|
||||
|
||||
@@ -1,34 +1,27 @@
|
||||
import type { CapacityRiskSignal } from "@fusion/core";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { X } from "lucide-react";
|
||||
import { Banner } from "./Banner";
|
||||
import "./CapacityRiskBanner.css";
|
||||
|
||||
interface CapacityRiskBannerProps {
|
||||
signal: CapacityRiskSignal | null;
|
||||
onDismiss?: () => void;
|
||||
}
|
||||
interface CapacityRiskBannerProps { signal: CapacityRiskSignal | null; onDismiss?: () => void; }
|
||||
|
||||
export function CapacityRiskBanner({ signal, onDismiss }: CapacityRiskBannerProps) {
|
||||
const { t } = useTranslation("app");
|
||||
if (!signal || !signal.atRisk) {
|
||||
return null;
|
||||
}
|
||||
if (!signal || !signal.atRisk) return null;
|
||||
|
||||
return (
|
||||
<div className={`capacity-risk-banner${onDismiss ? " capacity-risk-banner--dismissible" : ""}`} role="status" aria-live="polite">
|
||||
<div className="capacity-risk-banner__content">
|
||||
<strong>{t("capacity.risk", "Capacity risk:")}</strong> {t("capacity.status", "Todo {{todoCount}} (threshold {{threshold}}) · In Progress {{inProgress}} · In Review {{inReview}} · Idle agents {{idleAgents}}", { todoCount: signal.todoCount, threshold: signal.threshold, inProgress: signal.inProgressCount, inReview: signal.inReviewCount, idleAgents: signal.idleNonEphemeralAgentCount })}
|
||||
</div>
|
||||
{onDismiss ? (
|
||||
<button
|
||||
type="button"
|
||||
className="capacity-risk-banner__dismiss touch-target"
|
||||
aria-label={t("capacity.dismiss", "Dismiss capacity warning")}
|
||||
onClick={onDismiss}
|
||||
>
|
||||
<X aria-hidden="true" />
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
<Banner
|
||||
className={`capacity-risk-banner${onDismiss ? " capacity-risk-banner--dismissible" : ""}`}
|
||||
tone="warning"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
onDismiss={onDismiss}
|
||||
dismissLabel={t("capacity.dismiss", "Dismiss capacity warning")}
|
||||
>
|
||||
<span className="capacity-risk-banner__content">
|
||||
<strong>{t("capacity.risk", "Capacity risk:")}</strong>{" "}
|
||||
{t("capacity.status", "Todo {{todoCount}} (threshold {{threshold}}) · In Progress {{inProgress}} · In Review {{inReview}} · Idle agents {{idleAgents}}", { todoCount: signal.todoCount, threshold: signal.threshold, inProgress: signal.inProgressCount, inReview: signal.inReviewCount, idleAgents: signal.idleNonEphemeralAgentCount })}
|
||||
</span>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,113 +1,13 @@
|
||||
.cli-binary-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
margin: 12px 16px 0;
|
||||
padding: 12px 16px;
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
color-mix(in srgb, var(--todo) 12%, transparent),
|
||||
color-mix(in srgb, var(--todo) 4%, transparent)
|
||||
);
|
||||
border: 1px solid color-mix(in srgb, var(--todo) 35%, transparent);
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.cli-binary-banner__body {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.cli-binary-banner__title {
|
||||
font-weight: 600;
|
||||
font-size: 14px;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.cli-binary-banner__text {
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.cli-binary-banner__text code {
|
||||
background: color-mix(in srgb, var(--text) 6%, transparent);
|
||||
padding: 1px 6px;
|
||||
border-radius: 4px;
|
||||
font-size: 0.92em;
|
||||
}
|
||||
|
||||
.cli-binary-banner__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 8px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.cli-binary-banner__primary,
|
||||
.cli-binary-banner__secondary {
|
||||
cursor: pointer;
|
||||
border-radius: 6px;
|
||||
padding: 6px 12px;
|
||||
font-size: 13px;
|
||||
border: 1px solid transparent;
|
||||
transition: background 0.15s ease;
|
||||
}
|
||||
|
||||
.cli-binary-banner__primary {
|
||||
background: var(--accent, #3b82f6);
|
||||
color: var(--accent-text);
|
||||
}
|
||||
|
||||
.cli-binary-banner__primary:hover:not(:disabled) {
|
||||
background: color-mix(in srgb, var(--accent) 88%, var(--text) 12%);
|
||||
}
|
||||
|
||||
.cli-binary-banner__primary:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.cli-binary-banner__secondary {
|
||||
background: color-mix(in srgb, var(--text) 4%, transparent);
|
||||
color: var(--text);
|
||||
border-color: color-mix(in srgb, var(--text) 12%, transparent);
|
||||
}
|
||||
|
||||
.cli-binary-banner__secondary:hover {
|
||||
background: color-mix(in srgb, var(--text) 8%, transparent);
|
||||
}
|
||||
|
||||
.cli-binary-banner__error {
|
||||
margin-top: 4px;
|
||||
padding: 6px 10px;
|
||||
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
||||
border-left: 3px solid color-mix(in srgb, var(--color-error) 55%, transparent);
|
||||
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
||||
color: var(--color-error);
|
||||
font-size: 12.5px;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.cli-binary-banner__dismiss {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
padding: 0;
|
||||
background: transparent;
|
||||
color: var(--text-muted);
|
||||
border: none;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.cli-binary-banner__dismiss:hover {
|
||||
background: color-mix(in srgb, var(--text) 6%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
.cli-binary-banner { margin: var(--space-md) var(--space-lg) 0; }
|
||||
.cli-binary-banner__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-sm); min-width: 0; }
|
||||
.cli-binary-banner__title { font-weight: 600; font-size: var(--font-size-sm); color: var(--text); }
|
||||
.cli-binary-banner__text { font-size: var(--font-size-xs); line-height: 1.5; color: var(--text-muted); }
|
||||
.cli-binary-banner__text code { background: color-mix(in srgb, var(--text) 6%, transparent); padding: 0 var(--space-sm); border-radius: var(--radius-sm); font-size: 0.92em; }
|
||||
.cli-binary-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-xs); }
|
||||
.cli-binary-banner__primary, .cli-binary-banner__secondary { cursor: pointer; border-radius: var(--radius-md); padding: var(--space-sm) var(--space-md); font-size: var(--font-size-xs); border: var(--btn-border-width) solid transparent; transition: background var(--transition-fast); }
|
||||
.cli-binary-banner__primary { background: var(--accent); color: var(--accent-text); }
|
||||
.cli-binary-banner__primary:hover:not(:disabled) { background: color-mix(in srgb, var(--accent) 88%, var(--text) 12%); }
|
||||
.cli-binary-banner__primary:disabled { opacity: 0.6; cursor: not-allowed; }
|
||||
.cli-binary-banner__secondary { background: color-mix(in srgb, var(--text) 4%, transparent); color: var(--text); border-color: color-mix(in srgb, var(--text) 12%, transparent); }
|
||||
.cli-binary-banner__secondary:hover { background: color-mix(in srgb, var(--text) 8%, transparent); }
|
||||
.cli-binary-banner__error { margin-top: var(--space-xs); padding: var(--space-sm); background: color-mix(in srgb, var(--color-error) 10%, transparent); border: var(--btn-border-width) solid color-mix(in srgb, var(--color-error) 55%, var(--border)); border-radius: var(--radius-sm); color: var(--color-error); font-size: var(--font-size-xs); line-height: 1.5; }
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { useCallback, useEffect, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { X } from "lucide-react";
|
||||
import { Banner } from "./Banner";
|
||||
import {
|
||||
fetchFnBinaryStatus,
|
||||
installFnBinary,
|
||||
@@ -175,7 +175,7 @@ export function CliBinaryInstallBanner({ onOpenSettings }: Props) {
|
||||
const busyLabel = isMismatch ? t("cli.updating", "Updating…") : t("cli.installing", "Installing…");
|
||||
|
||||
return (
|
||||
<div className="cli-binary-banner" role="status">
|
||||
<Banner className="cli-binary-banner" tone="info" role="status" onDismiss={handleDismiss} dismissLabel={t("actions.dismiss", "Dismiss")}>
|
||||
<div className="cli-binary-banner__body">
|
||||
<div className="cli-binary-banner__title">{title}</div>
|
||||
<div className="cli-binary-banner__text">{body}</div>
|
||||
@@ -200,14 +200,6 @@ export function CliBinaryInstallBanner({ onOpenSettings }: Props) {
|
||||
<div className="cli-binary-banner__error">{installError}</div>
|
||||
)}
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="cli-binary-banner__dismiss"
|
||||
aria-label={t("actions.dismiss", "Dismiss")}
|
||||
onClick={handleDismiss}
|
||||
>
|
||||
<X size={16} />
|
||||
</button>
|
||||
</div>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
/* === DbCorruptionBanner === */
|
||||
.db-corruption-banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-lg);
|
||||
margin-bottom: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border: var(--btn-border-width) solid color-mix(in srgb, var(--color-error) 24%, transparent);
|
||||
border-inline-start: var(--space-xs) solid var(--color-error);
|
||||
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.db-corruption-banner { box-shadow: var(--shadow-md); }
|
||||
.db-corruption-banner > .banner__copy { display: flex; flex-direction: column; gap: var(--space-md); }
|
||||
|
||||
.db-corruption-banner__header {
|
||||
display: flex;
|
||||
@@ -85,10 +75,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.db-corruption-banner {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.db-corruption-banner__header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { AlertTriangle, RefreshCw } from "lucide-react";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { Banner } from "./Banner";
|
||||
|
||||
import "./DbCorruptionBanner.css";
|
||||
|
||||
@@ -33,7 +34,7 @@ export function DbCorruptionBanner({
|
||||
const checkedAtLabel = lastCheckedAt ? new Date(lastCheckedAt).toLocaleString() : null;
|
||||
|
||||
return (
|
||||
<section className="db-corruption-banner" role="alert" aria-live="assertive">
|
||||
<Banner as="section" className="db-corruption-banner" tone="error" role="alert" aria-live="assertive">
|
||||
<div className="db-corruption-banner__header">
|
||||
<div className="db-corruption-banner__headline-wrap">
|
||||
<span className="status-dot status-dot--error" aria-hidden="true" />
|
||||
@@ -82,6 +83,6 @@ export function DbCorruptionBanner({
|
||||
/>
|
||||
</p>
|
||||
{refreshError ? <p className="db-corruption-banner__error">{refreshError}</p> : null}
|
||||
</section>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,87 +1,7 @@
|
||||
.engine-status-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-md);
|
||||
margin: var(--space-md) var(--space-lg) 0;
|
||||
padding: var(--space-md) var(--space-lg);
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
color-mix(in srgb, var(--color-warning) 12%, transparent),
|
||||
color-mix(in srgb, var(--surface) 92%, transparent)
|
||||
);
|
||||
border: var(--btn-border-width) solid color-mix(in srgb, var(--color-warning) 35%, transparent);
|
||||
border-radius: var(--radius-md);
|
||||
}
|
||||
|
||||
.engine-status-banner__indicator {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding-top: calc(var(--space-xs) / 2);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.engine-status-banner__content {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.engine-status-banner__title {
|
||||
font-weight: 600;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.engine-status-banner__body,
|
||||
.engine-status-banner__error {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.engine-status-banner__body code {
|
||||
background: color-mix(in srgb, var(--text) 6%, transparent);
|
||||
padding: 0 var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.engine-status-banner__error {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.engine-status-banner__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.engine-status-banner__start {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.engine-status-banner {
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
margin-inline: var(--space-md);
|
||||
}
|
||||
|
||||
.engine-status-banner__actions,
|
||||
.engine-status-banner__start {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.engine-status-banner__actions {
|
||||
justify-content: stretch;
|
||||
}
|
||||
|
||||
.engine-status-banner__start {
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
.engine-status-banner { margin: var(--space-md) var(--space-lg) 0; }
|
||||
.engine-status-banner__indicator { display: inline-flex; align-items: center; padding-top: calc(var(--space-xs) / 2); }
|
||||
.engine-status-banner__body, .engine-status-banner__error { margin: 0; line-height: 1.5; }
|
||||
.engine-status-banner__body code { background: color-mix(in srgb, var(--text) 6%, transparent); padding: 0 var(--space-xs); border-radius: var(--radius-sm); color: var(--text); }
|
||||
.engine-status-banner__error { color: var(--color-error); }
|
||||
.engine-status-banner__start { display: inline-flex; align-items: center; gap: var(--space-xs); white-space: nowrap; }
|
||||
@media (max-width: 768px) { .engine-status-banner { margin-inline: var(--space-md); } .engine-status-banner__start { width: 100%; justify-content: center; } }
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Loader2 } from "lucide-react";
|
||||
import { useEngineStatus } from "../hooks/useEngineStatus";
|
||||
import { Banner } from "./Banner";
|
||||
import "./EngineStatusBanner.css";
|
||||
|
||||
interface EngineStatusBannerProps {
|
||||
@@ -24,39 +25,28 @@ export function EngineStatusBanner({ projectId }: EngineStatusBannerProps) {
|
||||
: t("engineBanner.dashboardOnly", "This dashboard cannot start engines from the current process. Run `fn serve` for this project to enable task execution and live automation.");
|
||||
|
||||
return (
|
||||
<section className="engine-status-banner" role="status" aria-live="polite" data-testid="engine-status-banner">
|
||||
<div className="engine-status-banner__indicator" aria-hidden="true">
|
||||
<span className={statusDotClass} />
|
||||
</div>
|
||||
<div className="engine-status-banner__content">
|
||||
<div className="engine-status-banner__title">{t("engineBanner.title", "Project engine is not connected")}</div>
|
||||
<p className="engine-status-banner__body">
|
||||
<Banner
|
||||
as="section"
|
||||
className="engine-status-banner"
|
||||
tone="warning"
|
||||
icon={<div className="engine-status-banner__indicator" aria-hidden="true"><span className={statusDotClass} /></div>}
|
||||
title={<div className="engine-status-banner__title">{t("engineBanner.title", "Project engine is not connected")}</div>}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
data-testid="engine-status-banner"
|
||||
actions={canStart ? <button type="button" className="btn btn-primary btn-sm engine-status-banner__start" onClick={() => void start()} disabled={starting} data-testid="engine-status-start-button">
|
||||
{starting ? <Loader2 className="spinner" aria-hidden="true" /> : null}
|
||||
{starting ? t("engineBanner.starting", "Starting…") : t("engineBanner.startCta", "Start engine")}
|
||||
</button> : null}
|
||||
>
|
||||
<p className="engine-status-banner__body">
|
||||
{isDashboardOnly ? (
|
||||
<>
|
||||
{t("engineBanner.dashboardOnlyPrefix", "This dashboard cannot start engines from the current process. Run")} <code>fn serve</code> {t("engineBanner.dashboardOnlySuffix", "for this project to enable task execution and live automation.")}
|
||||
</>
|
||||
) : body}
|
||||
</p>
|
||||
{error && (
|
||||
<p className="engine-status-banner__error" role="alert">
|
||||
{t("engineBanner.error", "Start failed: {{message}}", { message: error })}
|
||||
</p>
|
||||
)}
|
||||
</div>
|
||||
<div className="engine-status-banner__actions">
|
||||
{canStart ? (
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-primary btn-sm engine-status-banner__start"
|
||||
onClick={() => void start()}
|
||||
disabled={starting}
|
||||
data-testid="engine-status-start-button"
|
||||
>
|
||||
{starting ? <Loader2 className="spinner" aria-hidden="true" /> : null}
|
||||
{starting ? t("engineBanner.starting", "Starting…") : t("engineBanner.startCta", "Start engine")}
|
||||
</button>
|
||||
) : null}
|
||||
</div>
|
||||
</section>
|
||||
</p>
|
||||
{error && <p className="engine-status-banner__error" role="alert">{t("engineBanner.error", "Start failed: {{message}}", { message: error })}</p>}
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,54 +1,18 @@
|
||||
.engine-unavailable-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: var(--space-xs) solid var(--color-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 10%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.engine-unavailable-banner__icon {
|
||||
width: 1.1rem;
|
||||
height: 1.1rem;
|
||||
margin-top: 0.15rem;
|
||||
color: var(--color-warning);
|
||||
flex: 0 0 auto;
|
||||
}
|
||||
|
||||
.engine-unavailable-banner__copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.engine-unavailable-banner__title {
|
||||
margin: 0;
|
||||
font-size: var(--font-size-base);
|
||||
line-height: var(--line-height-tight);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.engine-unavailable-banner__body {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.engine-unavailable-banner code {
|
||||
color: var(--text);
|
||||
white-space: nowrap;
|
||||
}
|
||||
.engine-unavailable-banner__body { margin: 0; }
|
||||
.engine-unavailable-banner code { color: var(--text); white-space: nowrap; }
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.engine-unavailable-banner {
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
|
||||
.engine-unavailable-banner code {
|
||||
white-space: normal;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
.engine-unavailable-banner code { white-space: normal; overflow-wrap: anywhere; }
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import { Trans, useTranslation } from "react-i18next";
|
||||
import { Banner } from "./Banner";
|
||||
|
||||
import "./EngineUnavailableBanner.css";
|
||||
|
||||
@@ -18,11 +19,16 @@ export function EngineUnavailableBanner({ isVisible }: EngineUnavailableBannerPr
|
||||
* When the dashboard is served without an in-process AI engine, users need an explicit operational banner with the exact restart command because task execution, review, and merge automation cannot run from a UI-only process.
|
||||
*/
|
||||
return (
|
||||
<section className="engine-unavailable-banner" role="status" aria-live="polite">
|
||||
<AlertTriangle className="engine-unavailable-banner__icon" aria-hidden="true" />
|
||||
<div className="engine-unavailable-banner__copy">
|
||||
<h2 className="engine-unavailable-banner__title">{t("engineUnavailable.title", "AI engine is not running")}</h2>
|
||||
<p className="engine-unavailable-banner__body">
|
||||
<Banner
|
||||
as="section"
|
||||
className="engine-unavailable-banner"
|
||||
tone="warning"
|
||||
icon={<AlertTriangle className="engine-unavailable-banner__icon" aria-hidden="true" />}
|
||||
title={<h2 className="engine-unavailable-banner__title">{t("engineUnavailable.title", "AI engine is not running")}</h2>}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
<p className="engine-unavailable-banner__body">
|
||||
<Trans
|
||||
i18nKey="app:engineUnavailable.body"
|
||||
defaults="This dashboard can display project data, but task automation will not run until you restart Fusion with the engine. Stop this server and run <sourceCmd>pnpm local</sourceCmd> from a source checkout, or <cliCmd>fn dashboard</cliCmd> from an installed CLI."
|
||||
@@ -31,8 +37,7 @@ export function EngineUnavailableBanner({ isVisible }: EngineUnavailableBannerPr
|
||||
cliCmd: <code />,
|
||||
}}
|
||||
/>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</p>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,114 +1,15 @@
|
||||
.merge-advance-notice {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: var(--space-xs) solid var(--color-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
|
||||
.merge-advance-notice__content {
|
||||
color: var(--text);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.merge-advance-notice__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.merge-advance-notice__dismiss {
|
||||
border: 0;
|
||||
background: none;
|
||||
color: var(--text-muted);
|
||||
padding: var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
line-height: 0;
|
||||
cursor: pointer;
|
||||
transition: color var(--transition-fast), background var(--transition-fast);
|
||||
}
|
||||
|
||||
.merge-advance-notice__dismiss:hover {
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, var(--color-warning) 18%, transparent);
|
||||
}
|
||||
|
||||
.merge-advance-notice__dismiss:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
}
|
||||
|
||||
.merge-advance-notice__error {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.merge-advance-notice__hint {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.merge-advance-notice__push {
|
||||
display: grid;
|
||||
gap: var(--space-xs);
|
||||
margin-top: var(--space-sm);
|
||||
padding-top: var(--space-sm);
|
||||
border-top: 1px solid color-mix(in srgb, var(--color-warning) 25%, transparent);
|
||||
}
|
||||
|
||||
.merge-advance-notice__push-heading {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.merge-advance-notice__push-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.merge-advance-notice__push-advanced summary {
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.merge-advance-notice__push-advanced label {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
margin-top: var(--space-xs);
|
||||
}
|
||||
|
||||
.merge-advance-notice__push-error {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.merge-advance-notice__push-error pre {
|
||||
margin: var(--space-xs) 0;
|
||||
padding: var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
background: color-mix(in srgb, var(--color-error) 12%, transparent);
|
||||
color: var(--color-error);
|
||||
font-family: var(--font-mono);
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.merge-advance-notice {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.merge-advance-notice__actions {
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.merge-advance-notice__push-actions {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
.merge-advance-notice { box-shadow: var(--shadow-sm); }
|
||||
.merge-advance-notice__content { line-height: 1.4; }
|
||||
.merge-advance-notice__actions { flex-shrink: 0; }
|
||||
.merge-advance-notice__dismiss { border: 0; background: none; padding: var(--space-xs); border-radius: var(--radius-sm); line-height: 0; cursor: pointer; transition: color var(--transition-fast), background var(--transition-fast); }
|
||||
.merge-advance-notice__dismiss:hover { background: color-mix(in srgb, var(--color-warning) 18%, transparent); }
|
||||
.merge-advance-notice__dismiss:focus-visible { outline: none; box-shadow: var(--focus-ring-strong); }
|
||||
.merge-advance-notice__error { color: var(--color-error); }
|
||||
.merge-advance-notice__hint { color: var(--text-muted); }
|
||||
.merge-advance-notice__push { display: grid; gap: var(--space-xs); margin-top: var(--space-sm); padding-top: var(--space-sm); border-top: var(--btn-border-width) solid color-mix(in srgb, var(--color-warning) 25%, transparent); }
|
||||
.merge-advance-notice__push-heading { margin: 0; font-weight: 600; }
|
||||
.merge-advance-notice__push-actions { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
|
||||
.merge-advance-notice__push-error { color: var(--color-error); }
|
||||
.merge-advance-notice__push-error pre { margin: var(--space-xs) 0; white-space: pre-wrap; }
|
||||
.merge-advance-notice__push-advanced { color: var(--text-muted); }
|
||||
@media (max-width: 768px) { .merge-advance-notice__actions { width: 100%; justify-content: flex-end; } }
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { X } from "lucide-react";
|
||||
import { useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Banner } from "./Banner";
|
||||
import StashConflictModal from "./StashConflictModal";
|
||||
import { useMergeAdvanceNotice } from "../hooks/useMergeAdvanceNotice";
|
||||
import "./MergeAdvanceNotice.css";
|
||||
@@ -118,7 +119,23 @@ export default function MergeAdvanceNotice({ projectId, apiBase = "/api" }: Merg
|
||||
|
||||
return (
|
||||
<>
|
||||
<div ref={bannerRef} className="merge-advance-notice" role="status" aria-live="polite">
|
||||
<Banner
|
||||
ref={bannerRef}
|
||||
className="merge-advance-notice"
|
||||
tone="warning"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
actions={<div className="merge-advance-notice__actions">
|
||||
{conflictState ? null : (
|
||||
<button type="button" className="btn btn-sm" disabled={pulling} onClick={() => { void pull(); }}>
|
||||
{t("actions.pull", "Pull")}
|
||||
</button>
|
||||
)}
|
||||
<button type="button" className="merge-advance-notice__dismiss touch-target" aria-label={t("merge.dismissNotice", "Dismiss merge advance notice")} onClick={dismissWithFocusGuard}>
|
||||
<X aria-hidden="true" />
|
||||
</button>
|
||||
</div>}
|
||||
>
|
||||
<div className="merge-advance-notice__content">
|
||||
<strong>{t("merge.advancedTo", "{{branch}} advanced to {{sha}}.", { branch: notice.integrationBranch, sha: shortSha(notice.toSha) })}</strong>{" "}
|
||||
{t("merge.checkedOutBehind", "Your checked-out copy at {{path}} is behind.", { path: checkout.worktreePath })}
|
||||
@@ -127,22 +144,7 @@ export default function MergeAdvanceNotice({ projectId, apiBase = "/api" }: Merg
|
||||
{pulling ? <span className="merge-advance-notice__hint"> {t("merge.pulling", "Pulling…")}</span> : null}
|
||||
{renderPushSection()}
|
||||
</div>
|
||||
<div className="merge-advance-notice__actions">
|
||||
{conflictState ? null : (
|
||||
<button type="button" className="btn btn-sm" disabled={pulling} onClick={() => { void pull(); }}>
|
||||
{t("actions.pull", "Pull")}
|
||||
</button>
|
||||
)}
|
||||
<button
|
||||
type="button"
|
||||
className="merge-advance-notice__dismiss touch-target"
|
||||
aria-label={t("merge.dismissNotice", "Dismiss merge advance notice")}
|
||||
onClick={dismissWithFocusGuard}
|
||||
>
|
||||
<X aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Banner>
|
||||
<StashConflictModal
|
||||
open={conflictState !== null}
|
||||
onClose={(stashDropped) => {
|
||||
|
||||
@@ -1,21 +1,3 @@
|
||||
/*
|
||||
FNXC:MigrationHoldingPage 2026-07-17-12:40:
|
||||
Mirrors the TestModeBanner shape (left accent bar + tinted background) but uses
|
||||
the info color: a running migration is an informational transient state, not a
|
||||
warning. The monospace progress line carries the migrator's structured label.
|
||||
*/
|
||||
.migration-in-progress-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: var(--space-xs) solid var(--color-info);
|
||||
background: color-mix(in srgb, var(--color-info) 18%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.migration-in-progress-banner-progress {
|
||||
display: block;
|
||||
font-family: var(--font-mono);
|
||||
@@ -23,10 +5,3 @@ warning. The monospace progress line carries the migrator's structured label.
|
||||
color: var(--text-secondary);
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
@media (max-width: 768px), (max-height: 480px) {
|
||||
.migration-in-progress-banner {
|
||||
padding: var(--space-sm);
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,28 +11,21 @@ server. Fresh navigations during migration get the holding page instead.
|
||||
*/
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { DatabaseZap } from "lucide-react";
|
||||
import { Banner } from "./Banner";
|
||||
import "./MigrationInProgressBanner.css";
|
||||
|
||||
interface MigrationInProgressBannerProps {
|
||||
isActive: boolean;
|
||||
progressLabel?: string;
|
||||
}
|
||||
interface MigrationInProgressBannerProps { isActive: boolean; progressLabel?: string; }
|
||||
|
||||
export function MigrationInProgressBanner({ isActive, progressLabel }: MigrationInProgressBannerProps) {
|
||||
const { t } = useTranslation("app");
|
||||
if (!isActive) {
|
||||
return null;
|
||||
}
|
||||
if (!isActive) return null;
|
||||
|
||||
return (
|
||||
<div className="migration-in-progress-banner" role="status" aria-live="polite">
|
||||
<DatabaseZap aria-hidden="true" />
|
||||
<Banner className="migration-in-progress-banner" tone="info" icon={<DatabaseZap aria-hidden="true" />} role="status" aria-live="polite">
|
||||
<span>
|
||||
{t("app.migrationInProgress", "Database migration in progress — the dashboard will reconnect when it completes.")}
|
||||
{progressLabel ? (
|
||||
<span className="migration-in-progress-banner-progress">{progressLabel}</span>
|
||||
) : null}
|
||||
{progressLabel ? <span className="migration-in-progress-banner-progress">{progressLabel}</span> : null}
|
||||
</span>
|
||||
</div>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,50 +1,3 @@
|
||||
.oauth-relogin-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: var(--space-xs) solid var(--color-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 18%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.oauth-relogin-banner__content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.oauth-relogin-banner__message {
|
||||
margin: 0;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.oauth-relogin-banner__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.oauth-relogin-banner__dismiss {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.oauth-relogin-banner__dismiss:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.oauth-relogin-banner {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.oauth-relogin-banner__actions {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
.oauth-relogin-banner__content { display: flex; align-items: center; gap: var(--space-sm); min-width: 0; }
|
||||
.oauth-relogin-banner__message { margin: 0; line-height: 1.4; }
|
||||
.oauth-relogin-banner__actions { flex-shrink: 0; }
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { useCallback, useEffect, useMemo, useState, type JSX } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { AlertTriangle, X } from "lucide-react";
|
||||
import { AlertTriangle } from "lucide-react";
|
||||
import { fetchAuthStatus, type AuthProvider } from "../api";
|
||||
import { OAUTH_RELOGIN_SUCCESS_EVENT } from "../auth";
|
||||
import { Banner } from "./Banner";
|
||||
import "./OAuthReloginBanner.css";
|
||||
|
||||
const DISMISS_STORAGE_KEY = "fusion:oauth-relogin-dismissed";
|
||||
@@ -143,7 +144,9 @@ export function OAuthReloginBanner({
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="oauth-relogin-banner" role="status" aria-live="polite">
|
||||
<Banner className="oauth-relogin-banner" tone="warning" role="status" aria-live="polite" actions={<div className="oauth-relogin-banner__actions">
|
||||
<button type="button" className="btn btn-sm" onClick={() => onReLogin(isSingleProvider ? visibleExpiredProviders[0]?.id : undefined)}>{t("auth.relogin", "Re-login")}</button>
|
||||
</div>} onDismiss={handleDismiss} dismissLabel={t("actions.dismissOAuth", "Dismiss OAuth re-login banner")}>
|
||||
<div className="oauth-relogin-banner__content">
|
||||
<AlertTriangle aria-hidden="true" />
|
||||
<p className="oauth-relogin-banner__message">
|
||||
@@ -152,23 +155,6 @@ export function OAuthReloginBanner({
|
||||
: t("auth.reloginRequiredMultiple", "Re-login required: {{providers}}", { providers: providerList })}
|
||||
</p>
|
||||
</div>
|
||||
<div className="oauth-relogin-banner__actions">
|
||||
<button
|
||||
type="button"
|
||||
className="btn btn-sm"
|
||||
onClick={() => onReLogin(isSingleProvider ? visibleExpiredProviders[0]?.id : undefined)}
|
||||
>
|
||||
{t("auth.relogin", "Re-login")}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="btn-icon oauth-relogin-banner__dismiss"
|
||||
aria-label={t("actions.dismissOAuth", "Dismiss OAuth re-login banner")}
|
||||
onClick={handleDismiss}
|
||||
>
|
||||
<X aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</section>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -9,16 +9,6 @@ FN-7020 requires the needs-input banner to stay visible when relevant without co
|
||||
--session-notification-list-max-height: min(38vh, calc(var(--space-2xl) * 7));
|
||||
--session-notification-touch-size: calc(var(--space-xl) + var(--space-xs));
|
||||
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 30;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
padding: var(--space-xs) var(--space-md);
|
||||
border-bottom: var(--btn-border-width) solid var(--border);
|
||||
border-left: var(--space-xs) solid var(--triage);
|
||||
background: var(--surface);
|
||||
box-sizing: border-box;
|
||||
max-height: var(--session-notification-banner-max-height);
|
||||
opacity: 1;
|
||||
@@ -26,6 +16,12 @@ FN-7020 requires the needs-input banner to stay visible when relevant without co
|
||||
animation: session-notification-banner-enter var(--transition-fast);
|
||||
}
|
||||
|
||||
.session-notification-banner > .banner__copy {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
@keyframes session-notification-banner-enter {
|
||||
from {
|
||||
opacity: 0;
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useEffect, useMemo, useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { AlertCircle, Lightbulb, Layers, LoaderCircle, Target, Terminal, X } from "lucide-react";
|
||||
import type { AiSessionSummary, CliNeedsAttentionVariant } from "../api";
|
||||
import { Banner } from "./Banner";
|
||||
|
||||
export type CliActionId = "advance" | "retry" | "cancel" | "reauthenticate" | "relaunch";
|
||||
|
||||
@@ -273,7 +274,7 @@ export function SessionNotificationBanner({
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="session-notification-banner" role="region" aria-live="polite" aria-label={t("sessionBanner.regionLabel", "AI sessions in progress, needing input, or failed")}>
|
||||
<Banner as="section" className="session-notification-banner" tone="info" layout="chrome" role="region" aria-live="polite" aria-label={t("sessionBanner.regionLabel", "AI sessions in progress, needing input, or failed")}>
|
||||
<div className="session-notification-banner__header">
|
||||
<div className="session-notification-banner__headline">
|
||||
<AlertCircle size={16} aria-hidden="true" />
|
||||
@@ -421,6 +422,6 @@ export function SessionNotificationBanner({
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
</section>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,100 +1,6 @@
|
||||
/* === SetupWarningBanner === */
|
||||
.setup-warning-banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: var(--space-xs) solid var(--color-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 8%, transparent);
|
||||
}
|
||||
|
||||
.setup-warning-banner__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.setup-warning-banner__title {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.setup-warning-banner__description {
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.setup-warning-banner__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.setup-warning-banner--compact {
|
||||
flex-direction: row;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-sm);
|
||||
}
|
||||
|
||||
.setup-warning-banner--dismissible:not(.setup-warning-banner--compact) {
|
||||
position: relative;
|
||||
padding-inline-end: calc(var(--space-2xl) + var(--space-lg) + var(--space-xs));
|
||||
}
|
||||
|
||||
.setup-warning-banner--dismissible:not(.setup-warning-banner--compact) .setup-warning-banner__dismiss {
|
||||
position: absolute;
|
||||
top: var(--space-sm);
|
||||
inset-inline-end: var(--space-sm);
|
||||
}
|
||||
|
||||
.setup-warning-banner__compact-text {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.setup-warning-banner__dismiss {
|
||||
align-self: flex-start;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition-fast), background var(--transition-fast);
|
||||
line-height: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.setup-warning-banner__dismiss:hover {
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, var(--color-warning) 12%, transparent);
|
||||
}
|
||||
|
||||
.setup-warning-banner__dismiss:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.setup-warning-banner--compact {
|
||||
padding: var(--space-xs) var(--space-sm);
|
||||
}
|
||||
|
||||
.setup-warning-banner__actions .btn {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 480px) {
|
||||
.setup-warning-banner--dismissible:not(.setup-warning-banner--compact) {
|
||||
padding-inline-end: var(--space-md);
|
||||
}
|
||||
|
||||
.setup-warning-banner--dismissible:not(.setup-warning-banner--compact) .setup-warning-banner__dismiss {
|
||||
position: static;
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
.setup-warning-banner__item { display: flex; flex-direction: column; gap: var(--space-xs); }
|
||||
.setup-warning-banner__description { margin: 0; }
|
||||
.setup-warning-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
|
||||
.setup-warning-banner--compact { flex-direction: row; align-items: flex-start; justify-content: space-between; }
|
||||
.setup-warning-banner__compact-text { margin: 0; flex: 1; }
|
||||
@media (max-width: 768px) { .setup-warning-banner__actions .btn { width: 100%; } }
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import "./SetupWarningBanner.css";
|
||||
import { X } from "lucide-react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Banner } from "./Banner";
|
||||
|
||||
interface SetupWarningBannerProps {
|
||||
/** Whether an AI provider is connected */
|
||||
@@ -37,29 +37,13 @@ export function SetupWarningBanner({
|
||||
return null;
|
||||
}
|
||||
|
||||
const dismissButton = onDismiss ? (
|
||||
<button
|
||||
type="button"
|
||||
className="setup-warning-banner__dismiss touch-target"
|
||||
aria-label={t("setup.dismissWarning", "Dismiss setup warning")}
|
||||
onClick={onDismiss}
|
||||
>
|
||||
<X size={16} aria-hidden="true" />
|
||||
</button>
|
||||
) : null;
|
||||
|
||||
if (compact) {
|
||||
return (
|
||||
<div
|
||||
className={`setup-warning-banner setup-warning-banner--compact${onDismiss ? " setup-warning-banner--dismissible" : ""}`}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
<Banner className={`setup-warning-banner setup-warning-banner--compact${onDismiss ? " setup-warning-banner--dismissible" : ""}`} tone="warning" density="compact" role="status" aria-live="polite" onDismiss={onDismiss} dismissLabel={t("setup.dismissWarning", "Dismiss setup warning")}>
|
||||
<p className="setup-warning-banner__compact-text">
|
||||
{t("setup.compactWarning", "⚠ Setup incomplete — AI and/or GitHub features will be limited.")}
|
||||
</p>
|
||||
{dismissButton}
|
||||
</div>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -82,12 +66,7 @@ export function SetupWarningBanner({
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className={`setup-warning-banner${onDismiss ? " setup-warning-banner--dismissible" : ""}`}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
>
|
||||
{dismissButton}
|
||||
<Banner className={`setup-warning-banner${onDismiss ? " setup-warning-banner--dismissible" : ""}`} tone="warning" role="status" aria-live="polite" onDismiss={onDismiss} dismissLabel={t("setup.dismissWarning", "Dismiss setup warning")}>
|
||||
{warningItems.map((warning) => (
|
||||
<div key={warning.key} className="setup-warning-banner__item">
|
||||
<strong className="setup-warning-banner__title">{warning.title}</strong>
|
||||
@@ -101,6 +80,6 @@ export function SetupWarningBanner({
|
||||
) : null}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,44 +1,10 @@
|
||||
/*
|
||||
FNXC:PostgresMigrationBanner 2026-07-12:
|
||||
Mirrors the TestModeBanner shape (left accent bar + tinted background) but in
|
||||
the success/info accent since a completed migration is good news, not a
|
||||
warning. Actions collapse under the text on mobile.
|
||||
*/
|
||||
.sqlite-migration-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: var(--space-xs) solid var(--color-primary);
|
||||
background: color-mix(in srgb, var(--color-primary) 12%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.sqlite-migration-banner-body {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
flex: 1;
|
||||
gap: var(--space-3xs);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.sqlite-migration-banner-body code {
|
||||
word-break: break-all;
|
||||
}
|
||||
.sqlite-migration-banner-body code { word-break: break-all; }
|
||||
|
||||
.sqlite-migration-banner-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.sqlite-migration-banner {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
padding: var(--space-sm);
|
||||
}
|
||||
}
|
||||
.sqlite-migration-banner-actions { flex-shrink: 0; }
|
||||
|
||||
@@ -17,6 +17,7 @@ import { useTranslation } from "react-i18next";
|
||||
import { DatabaseZap } from "lucide-react";
|
||||
import type { Settings } from "@fusion/core";
|
||||
import { fetchSettings, updateSettings } from "../api";
|
||||
import { Banner } from "./Banner";
|
||||
import "./SqliteMigrationBanner.css";
|
||||
|
||||
export const FUSION_DISCORD_URL = "https://discord.gg/ksrfuy7WYR";
|
||||
@@ -60,8 +61,21 @@ export function SqliteMigrationBanner({ projectId }: { projectId: string }) {
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="sqlite-migration-banner" role="status" aria-live="polite">
|
||||
<DatabaseZap aria-hidden="true" />
|
||||
<Banner
|
||||
className="sqlite-migration-banner"
|
||||
tone="success"
|
||||
icon={<DatabaseZap aria-hidden="true" />}
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
actions={<div className="sqlite-migration-banner-actions">
|
||||
<a className="btn btn-sm" href={FUSION_DISCORD_URL} target="_blank" rel="noreferrer">
|
||||
{t("app.sqliteMigration.needHelp", "Get help on Discord")}
|
||||
</a>
|
||||
<button type="button" className="btn btn-sm btn-ghost" onClick={dismiss}>
|
||||
{t("app.sqliteMigration.dismiss", "Dismiss")}
|
||||
</button>
|
||||
</div>}
|
||||
>
|
||||
<div className="sqlite-migration-banner-body">
|
||||
<strong>
|
||||
{t("app.sqliteMigration.title", "Your data was migrated to PostgreSQL")}
|
||||
@@ -79,19 +93,6 @@ export function SqliteMigrationBanner({ projectId }: { projectId: string }) {
|
||||
<time dateTime={notice.migratedAt}>{notice.migratedAt}</time>
|
||||
</span>
|
||||
</div>
|
||||
<div className="sqlite-migration-banner-actions">
|
||||
<a
|
||||
className="btn btn-sm"
|
||||
href={FUSION_DISCORD_URL}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
>
|
||||
{t("app.sqliteMigration.needHelp", "Get help on Discord")}
|
||||
</a>
|
||||
<button type="button" className="btn btn-sm btn-ghost" onClick={dismiss}>
|
||||
{t("app.sqliteMigration.dismiss", "Dismiss")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,16 +1,6 @@
|
||||
/* === TaskIdIntegrityBanner === */
|
||||
.task-id-integrity-banner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-md);
|
||||
padding: var(--space-lg);
|
||||
margin-bottom: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border: var(--btn-border-width) solid color-mix(in srgb, var(--color-error) 24%, transparent);
|
||||
border-inline-start: var(--space-xs) solid var(--color-error);
|
||||
background: color-mix(in srgb, var(--color-error) 10%, transparent);
|
||||
box-shadow: var(--shadow-md);
|
||||
}
|
||||
.task-id-integrity-banner { box-shadow: var(--shadow-md); }
|
||||
.task-id-integrity-banner > .banner__copy { display: flex; flex-direction: column; gap: var(--space-md); }
|
||||
|
||||
.task-id-integrity-banner__header {
|
||||
display: flex;
|
||||
@@ -82,10 +72,6 @@
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.task-id-integrity-banner {
|
||||
padding: var(--space-md);
|
||||
}
|
||||
|
||||
.task-id-integrity-banner__header {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
|
||||
@@ -3,6 +3,7 @@ import { useState } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import type { TaskIdIntegrityReport } from "@fusion/core";
|
||||
import { refreshDashboardHealth, type DashboardHealthResponse } from "../api";
|
||||
import { Banner } from "./Banner";
|
||||
import "./TaskIdIntegrityBanner.css";
|
||||
|
||||
/*
|
||||
@@ -65,7 +66,7 @@ export function TaskIdIntegrityBanner({ report, recommendedAction, onRefresh }:
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="task-id-integrity-banner" role="alert" aria-live="assertive">
|
||||
<Banner as="section" className="task-id-integrity-banner" tone="error" role="alert" aria-live="assertive">
|
||||
<div className="task-id-integrity-banner__header">
|
||||
<div className="task-id-integrity-banner__headline-wrap">
|
||||
<span className="status-dot status-dot--error" aria-hidden="true" />
|
||||
@@ -104,6 +105,6 @@ export function TaskIdIntegrityBanner({ report, recommendedAction, onRefresh }:
|
||||
|
||||
<p className="task-id-integrity-banner__footer">{recommendedAction}</p>
|
||||
{refreshError ? <p className="task-id-integrity-banner__error">{refreshError}</p> : null}
|
||||
</section>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
.test-mode-banner {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--space-sm);
|
||||
margin-bottom: var(--space-md);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border-inline-start: var(--space-xs) solid var(--color-warning);
|
||||
background: color-mix(in srgb, var(--color-warning) 18%, transparent);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.test-mode-banner {
|
||||
padding: var(--space-sm);
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { FlaskConical } from "lucide-react";
|
||||
import { Banner } from "./Banner";
|
||||
import "./TestModeBanner.css";
|
||||
|
||||
interface TestModeBannerProps {
|
||||
@@ -8,14 +9,11 @@ interface TestModeBannerProps {
|
||||
|
||||
export function TestModeBanner({ isActive }: TestModeBannerProps) {
|
||||
const { t } = useTranslation("app");
|
||||
if (!isActive) {
|
||||
return null;
|
||||
}
|
||||
if (!isActive) return null;
|
||||
|
||||
return (
|
||||
<div className="test-mode-banner" role="status" aria-live="polite">
|
||||
<FlaskConical aria-hidden="true" />
|
||||
<span>{t("app.testMode", "Test mode — no real AI calls")}</span>
|
||||
</div>
|
||||
<Banner className="test-mode-banner" tone="warning" icon={<FlaskConical aria-hidden="true" />} role="status" aria-live="polite">
|
||||
{t("app.testMode", "Test mode — no real AI calls")}
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,125 +1,14 @@
|
||||
/* === UpdateAvailableBanner === */
|
||||
.update-available-banner {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-sm);
|
||||
padding: var(--space-sm) var(--space-md);
|
||||
margin-bottom: var(--space-md);
|
||||
border-radius: var(--radius-md);
|
||||
border: 1px solid color-mix(in srgb, var(--color-info) 35%, var(--border));
|
||||
border-inline-start: var(--space-xs) solid var(--color-info);
|
||||
background: color-mix(in srgb, var(--color-info) 10%, var(--surface));
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.update-available-banner__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--space-xs);
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.update-available-banner__text {
|
||||
margin: 0;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.update-available-banner__text code {
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
|
||||
.update-available-banner__link {
|
||||
color: var(--color-info);
|
||||
text-decoration: underline;
|
||||
text-underline-offset: var(--space-xs);
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.update-available-banner__link:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.update-available-banner__link:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
|
||||
.update-available-banner__actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.update-available-banner__update-btn,
|
||||
.update-available-banner__restart-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: var(--space-xs);
|
||||
}
|
||||
|
||||
.update-available-banner__update-btn:disabled {
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.update-available-banner__update-btn svg.spinning,
|
||||
.update-available-banner__restart-btn svg.spinning {
|
||||
animation: update-available-banner-spin 1s linear infinite;
|
||||
}
|
||||
|
||||
.update-available-banner__install-status {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.update-available-banner__install-status--success {
|
||||
color: var(--color-success);
|
||||
}
|
||||
|
||||
.update-available-banner__install-status--error {
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
.update-available-banner__dismiss {
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
padding: var(--space-xs);
|
||||
border-radius: var(--radius-sm);
|
||||
transition: color var(--transition-fast), background var(--transition-fast);
|
||||
line-height: 0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.update-available-banner__dismiss:hover {
|
||||
color: var(--text);
|
||||
background: color-mix(in srgb, var(--color-info) 14%, transparent);
|
||||
}
|
||||
|
||||
.update-available-banner__dismiss:focus-visible {
|
||||
outline: none;
|
||||
box-shadow: var(--focus-ring-strong);
|
||||
}
|
||||
|
||||
@keyframes update-available-banner-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.update-available-banner {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.update-available-banner__actions {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.update-available-banner__dismiss {
|
||||
align-self: flex-end;
|
||||
}
|
||||
}
|
||||
.update-available-banner__content { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; }
|
||||
.update-available-banner__text { margin: 0; color: var(--text); }
|
||||
.update-available-banner__text code { font-family: var(--font-mono); }
|
||||
.update-available-banner__link { color: var(--color-info); text-decoration: underline; text-underline-offset: var(--space-xs); transition: color var(--transition-fast); }
|
||||
.update-available-banner__link:hover { color: var(--text); }
|
||||
.update-available-banner__link:focus-visible { outline: none; box-shadow: var(--focus-ring-strong); border-radius: var(--radius-sm); }
|
||||
.update-available-banner__actions, .update-available-banner__update-btn, .update-available-banner__restart-btn { display: inline-flex; align-items: center; gap: var(--space-xs); }
|
||||
.update-available-banner__actions { flex-wrap: wrap; }
|
||||
.update-available-banner__update-btn:disabled { color: var(--color-warning); }
|
||||
.update-available-banner__update-btn svg.spinning, .update-available-banner__restart-btn svg.spinning { animation: update-available-banner-spin 1s linear infinite; }
|
||||
.update-available-banner__install-status { font-weight: 500; }
|
||||
.update-available-banner__install-status--success { color: var(--color-success); }
|
||||
.update-available-banner__install-status--error { color: var(--color-error); }
|
||||
@keyframes update-available-banner-spin { to { transform: rotate(360deg); } }
|
||||
|
||||
@@ -1,12 +1,13 @@
|
||||
import "./UpdateAvailableBanner.css";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Power, RefreshCw, X } from "lucide-react";
|
||||
import { Power, RefreshCw } from "lucide-react";
|
||||
import { useTranslation, Trans } from "react-i18next";
|
||||
import { getErrorMessage } from "@fusion/core";
|
||||
import { fetchSystemInfo, installUpdate, requestSystemRestart } from "../api";
|
||||
import type { UpdateInstallResponse } from "../api";
|
||||
import { systemRestartRecovery, useSystemRestartRecovery } from "../hooks/useSystemRestartRecovery";
|
||||
import { pendingUpdateInstallState, usePendingUpdateInstall } from "../hooks/usePendingUpdateInstall";
|
||||
import { Banner } from "./Banner";
|
||||
|
||||
interface UpdateAvailableBannerProps {
|
||||
latestVersion: string;
|
||||
@@ -113,7 +114,14 @@ export function UpdateAvailableBanner({ latestVersion, currentVersion, onDismiss
|
||||
const restartUnavailable = restartSupported === false;
|
||||
|
||||
return (
|
||||
<div className="update-available-banner" role="status" aria-live="polite">
|
||||
<Banner
|
||||
className="update-available-banner"
|
||||
tone="info"
|
||||
role="status"
|
||||
aria-live="polite"
|
||||
onDismiss={onDismiss}
|
||||
dismissLabel={t("updateBanner.dismissLabel", "Dismiss update notice")}
|
||||
>
|
||||
<div className="update-available-banner__content">
|
||||
<p className="update-available-banner__text">
|
||||
<Trans
|
||||
@@ -217,14 +225,6 @@ export function UpdateAvailableBanner({ latestVersion, currentVersion, onDismiss
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
className="update-available-banner__dismiss touch-target"
|
||||
aria-label={t("updateBanner.dismissLabel", "Dismiss update notice")}
|
||||
onClick={onDismiss}
|
||||
>
|
||||
<X size={16} aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
</Banner>
|
||||
);
|
||||
}
|
||||
|
||||
48
packages/dashboard/app/components/__tests__/Banner.test.tsx
Normal file
48
packages/dashboard/app/components/__tests__/Banner.test.tsx
Normal file
@@ -0,0 +1,48 @@
|
||||
import { fireEvent, render, screen } from "@testing-library/react";
|
||||
import { describe, expect, it, vi } from "vitest";
|
||||
import { Banner } from "../Banner";
|
||||
|
||||
describe("Banner", () => {
|
||||
it("renders title, children, and the selected tone", () => {
|
||||
render(<Banner tone="warning" title="Attention">Banner copy</Banner>);
|
||||
|
||||
const root = screen.getByText("Banner copy").closest(".banner");
|
||||
expect(root).toHaveClass("banner--warning", "banner--inline", "banner--regular");
|
||||
expect(root).toHaveTextContent("Attention");
|
||||
});
|
||||
|
||||
it("renders an accessible dismiss action only when provided", () => {
|
||||
const onDismiss = vi.fn();
|
||||
const { rerender } = render(<Banner tone="info">Copy</Banner>);
|
||||
expect(screen.queryByRole("button", { name: "Dismiss" })).not.toBeInTheDocument();
|
||||
|
||||
rerender(<Banner tone="info" onDismiss={onDismiss} dismissLabel="Close notice">Copy</Banner>);
|
||||
fireEvent.click(screen.getByRole("button", { name: "Close notice" }));
|
||||
expect(onDismiss).toHaveBeenCalledOnce();
|
||||
});
|
||||
|
||||
it("omits undefined icon and action slots", () => {
|
||||
const { container } = render(<Banner tone="neutral">Copy</Banner>);
|
||||
expect(container.querySelector(".banner__icon")).toBeNull();
|
||||
expect(container.querySelector(".banner__actions")).toBeNull();
|
||||
});
|
||||
|
||||
it("forwards root semantics and caller classes", () => {
|
||||
render(
|
||||
<Banner tone="success" className="caller-class" role="alert" aria-live="assertive" aria-label="Banner label" data-testid="banner">
|
||||
Copy
|
||||
</Banner>,
|
||||
);
|
||||
const root = screen.getByTestId("banner");
|
||||
expect(root).toHaveClass("caller-class");
|
||||
expect(root).toHaveAttribute("role", "alert");
|
||||
expect(root).toHaveAttribute("aria-live", "assertive");
|
||||
expect(root).toHaveAttribute("aria-label", "Banner label");
|
||||
});
|
||||
|
||||
it("supports section roots and chrome layout", () => {
|
||||
render(<Banner tone="error" as="section" layout="chrome">Copy</Banner>);
|
||||
expect(screen.getByText("Copy").closest("section")).toHaveClass("banner--chrome");
|
||||
expect(screen.getByText("Copy").closest("section")).not.toHaveClass("banner--inline");
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user