mirror of
https://github.com/Stirling-Tools/Stirling-PDF.git
synced 2026-09-02 21:03:34 +03:00
change policies ui (#6683)
• Removed colors from policies to make them look more professional. • upgraded to enterprise link to contact us. • Hid inactive policies from users (Kept for admin and team lead). • Closing policies had wrong arrow, made a standard component for chat, tools and policies header.
This commit is contained in:
EthanHealy01
@@ -5854,6 +5854,7 @@ routing = "Routing"
|
||||
security = "Security"
|
||||
|
||||
[policies.detail]
|
||||
close = "Close"
|
||||
editSettings = "Edit Settings"
|
||||
enforces = "Enforces"
|
||||
managedByOrg = "Managed by your organization. Contact a team leader to change this policy."
|
||||
@@ -5907,6 +5908,7 @@ allDocTypesTitle = "All document types"
|
||||
back = "Back"
|
||||
builderDesc = "Build the sequence of tools this policy runs on each document."
|
||||
clear = "Clear"
|
||||
close = "Close"
|
||||
continue = "Continue"
|
||||
docTypesLabel = "Document types"
|
||||
edit = "Edit"
|
||||
|
||||
@@ -14,6 +14,11 @@ export function usePoliciesEnabled(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
/** Whether the Policies list should appear for the current user. False in core. */
|
||||
export function usePoliciesVisible(): boolean {
|
||||
return false;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether a policy is open (its detail should take over the rail). Always false
|
||||
* in core; proprietary bridges to the policy-selection store.
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
PoliciesSection,
|
||||
PolicyDetailTakeover,
|
||||
usePoliciesEnabled,
|
||||
usePoliciesVisible,
|
||||
usePolicyDetailActive,
|
||||
} from "@app/components/policies/PoliciesSidebar";
|
||||
import { PolicyAutoRunController } from "@app/components/policies/PolicyAutoRunController";
|
||||
@@ -18,6 +19,7 @@ import { useFavoriteToolItems } from "@app/hooks/tools/useFavoriteToolItems";
|
||||
import { useToolSections } from "@app/hooks/useToolSections";
|
||||
import type { SubcategoryGroup } from "@app/hooks/useToolSections";
|
||||
import { ToolIcon } from "@app/components/shared/ToolIcon";
|
||||
import { PanelHeader } from "@shared/components/PanelHeader";
|
||||
import { Tooltip as AppTooltip } from "@app/components/shared/Tooltip";
|
||||
import { withViewTransition } from "@app/utils/viewTransition";
|
||||
import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
|
||||
@@ -64,6 +66,7 @@ export default function RightSidebar() {
|
||||
} = useToolWorkflow();
|
||||
|
||||
const policiesEnabled = usePoliciesEnabled();
|
||||
const policiesVisible = usePoliciesVisible();
|
||||
const rawPolicyDetailActive = usePolicyDetailActive();
|
||||
const fullscreenExpanded = useIsFullscreenExpanded();
|
||||
const fullscreenGeometry = useToolPanelGeometry({
|
||||
@@ -115,9 +118,14 @@ export default function RightSidebar() {
|
||||
const inToolView = leftPanelView !== "toolPicker";
|
||||
// Show X (close) button only when there's somewhere to go back to.
|
||||
const showCloseButton = inToolView || allToolsView;
|
||||
// Policies sit above the tool list in the default tool-picker view.
|
||||
// Policies sit above the tool list in the default tool-picker view — but only
|
||||
// when the current user actually has policies to see (see usePoliciesVisible),
|
||||
// so regular users with none get the plain tool picker with no empty block.
|
||||
const showPolicies =
|
||||
policiesEnabled && !allToolsView && leftPanelView === "toolPicker";
|
||||
policiesEnabled &&
|
||||
policiesVisible &&
|
||||
!allToolsView &&
|
||||
leftPanelView === "toolPicker";
|
||||
// When Policies are shown, the search moves OUT of the header to sit between
|
||||
// the Policies and Tools sections (separating them); otherwise it stays in the
|
||||
// header. Show the header search when there's a close button, or in the
|
||||
@@ -281,65 +289,67 @@ export default function RightSidebar() {
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
{!showPolicies && (
|
||||
<div className="tool-panel__compact-header">
|
||||
{activeTool ? (
|
||||
<div
|
||||
className="tool-panel__active-tool-pill"
|
||||
aria-label={activeTool.name}
|
||||
>
|
||||
<span className="tool-panel__active-tool-pill-icon">
|
||||
<ToolIcon
|
||||
icon={activeTool.icon}
|
||||
marginRight="0"
|
||||
color="var(--mantine-color-blue-filled)"
|
||||
/>
|
||||
</span>
|
||||
<span className="tool-panel__active-tool-pill-label">
|
||||
{activeTool.name}
|
||||
</span>
|
||||
</div>
|
||||
) : showHeaderSearch ? (
|
||||
<div className="tool-panel__compact-header-search">
|
||||
<ToolSearch
|
||||
value={searchQuery}
|
||||
onChange={handleHeaderSearchChange}
|
||||
toolRegistry={toolRegistry}
|
||||
mode="filter"
|
||||
autoFocus={allToolsView && !inToolView}
|
||||
{!showPolicies &&
|
||||
(activeTool ? (
|
||||
<PanelHeader
|
||||
icon={
|
||||
<ToolIcon
|
||||
icon={activeTool.icon}
|
||||
marginRight="0"
|
||||
color="currentColor"
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{showCloseButton ? (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
radius="xl"
|
||||
size="md"
|
||||
onClick={handleHeaderBack}
|
||||
aria-label={
|
||||
inToolView
|
||||
? t("toolPanel.backToAllTools", "Back to all tools")
|
||||
: t("toolPanel.goBack", "Go back")
|
||||
}
|
||||
className="tool-panel__expand-btn"
|
||||
>
|
||||
<CloseIcon sx={{ fontSize: "1.1rem" }} />
|
||||
</ActionIcon>
|
||||
) : (
|
||||
<ActionIcon
|
||||
variant="outline"
|
||||
radius="xl"
|
||||
size="md"
|
||||
onClick={handleCollapse}
|
||||
aria-label={t("toolPanel.collapse", "Collapse panel")}
|
||||
className="tool-panel__expand-btn tool-panel__toggle-vt"
|
||||
>
|
||||
<ChevronRightIcon sx={{ fontSize: "1.1rem" }} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
title={activeTool.name}
|
||||
onClose={handleHeaderBack}
|
||||
closeLabel={
|
||||
inToolView
|
||||
? t("toolPanel.backToAllTools", "Back to all tools")
|
||||
: t("toolPanel.goBack", "Go back")
|
||||
}
|
||||
/>
|
||||
) : (
|
||||
<div className="tool-panel__compact-header">
|
||||
{showHeaderSearch ? (
|
||||
<div className="tool-panel__compact-header-search">
|
||||
<ToolSearch
|
||||
value={searchQuery}
|
||||
onChange={handleHeaderSearchChange}
|
||||
toolRegistry={toolRegistry}
|
||||
mode="filter"
|
||||
autoFocus={allToolsView && !inToolView}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
{showCloseButton ? (
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
radius="xl"
|
||||
size="md"
|
||||
onClick={handleHeaderBack}
|
||||
aria-label={
|
||||
inToolView
|
||||
? t("toolPanel.backToAllTools", "Back to all tools")
|
||||
: t("toolPanel.goBack", "Go back")
|
||||
}
|
||||
className="tool-panel__expand-btn"
|
||||
>
|
||||
<CloseIcon sx={{ fontSize: "1.1rem" }} />
|
||||
</ActionIcon>
|
||||
) : (
|
||||
<ActionIcon
|
||||
variant="outline"
|
||||
radius="xl"
|
||||
size="md"
|
||||
onClick={handleCollapse}
|
||||
aria-label={t("toolPanel.collapse", "Collapse panel")}
|
||||
className="tool-panel__expand-btn tool-panel__toggle-vt"
|
||||
>
|
||||
<ChevronRightIcon sx={{ fontSize: "1.1rem" }} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
|
||||
{showPolicies && (
|
||||
<PoliciesSection
|
||||
|
||||
@@ -294,67 +294,6 @@
|
||||
background-color: var(--bg-muted);
|
||||
}
|
||||
|
||||
.tool-panel__active-tool-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
padding: 0.35rem 0.75rem 0.35rem 0.4rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 9999px;
|
||||
background: var(--mantine-color-body);
|
||||
}
|
||||
|
||||
.tool-panel__active-tool-pill-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--mantine-color-blue-light);
|
||||
color: var(--mantine-color-blue-filled);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .tool-panel__active-tool-pill-icon {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-blue-filled) 18%,
|
||||
transparent
|
||||
);
|
||||
color: var(--mantine-color-blue-3, var(--mantine-color-blue-filled));
|
||||
}
|
||||
|
||||
/* The inner .tool-button-icon wrapper carries its own transform/margin; reset
|
||||
them so the icon glyph sits dead-centre in the circular background. */
|
||||
.tool-panel__active-tool-pill-icon .tool-button-icon {
|
||||
margin: 0 !important;
|
||||
transform: none !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.tool-panel__active-tool-pill-icon svg {
|
||||
font-size: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
.tool-panel__active-tool-pill-label {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
::view-transition-old(tool-rail) {
|
||||
animation: vt-rail-fade-out 180ms ease-out forwards;
|
||||
}
|
||||
|
||||
@@ -25,20 +25,7 @@
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.chat-panel__agent-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0.4rem 0.75rem 0.4rem 0.4rem;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: 9999px;
|
||||
background: var(--mantine-color-body);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 120ms ease-out,
|
||||
border-color 120ms ease-out;
|
||||
.chat-panel__agent-pill-vt {
|
||||
view-transition-name: stirling-agent;
|
||||
}
|
||||
|
||||
@@ -50,89 +37,6 @@
|
||||
animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
|
||||
}
|
||||
|
||||
.chat-panel__agent-pill:hover {
|
||||
background: var(--mantine-color-default-hover);
|
||||
}
|
||||
|
||||
.chat-panel__agent-pill-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--mantine-color-blue-light);
|
||||
color: var(--mantine-color-blue-filled);
|
||||
flex-shrink: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* Running / in-progress status dot, anchored to the agent pill icon. */
|
||||
.agent-status-dot {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--mantine-color-blue-5);
|
||||
border: 1.5px solid var(--mantine-color-body);
|
||||
animation: agent-dot-pulse 2.4s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes agent-dot-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.agent-status-dot {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.chat-panel__agent-pill--loading {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-blue-5) 60%,
|
||||
var(--border-subtle)
|
||||
);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill--loading {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-blue-4) 55%,
|
||||
var(--border-subtle)
|
||||
);
|
||||
}
|
||||
|
||||
/* Dark-mode: let the pill blend into the rail. Just a thin border, no fill —
|
||||
so it doesn't read as a clashing lighter card on the dark toolbar. */
|
||||
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill {
|
||||
background: transparent;
|
||||
border-color: var(--border-subtle);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .chat-panel__agent-pill-icon {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-blue-filled) 18%,
|
||||
transparent
|
||||
);
|
||||
color: var(--mantine-color-blue-3, var(--mantine-color-blue-filled));
|
||||
}
|
||||
|
||||
/* Same treatment for the input pill and quick-action cards. */
|
||||
[data-mantine-color-scheme="dark"] .chat-panel-input {
|
||||
background: transparent;
|
||||
|
||||
@@ -14,7 +14,6 @@ import {
|
||||
Box,
|
||||
Collapse,
|
||||
Group,
|
||||
Menu,
|
||||
Paper,
|
||||
ScrollArea,
|
||||
Stack,
|
||||
@@ -25,14 +24,12 @@ import {
|
||||
import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
|
||||
import ArticleOutlinedIcon from "@mui/icons-material/ArticleOutlined";
|
||||
import BuildOutlinedIcon from "@mui/icons-material/BuildOutlined";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import CloudOutlinedIcon from "@mui/icons-material/CloudOutlined";
|
||||
import ContentCopyIcon from "@mui/icons-material/ContentCopy";
|
||||
import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
|
||||
import ExpandLessIcon from "@mui/icons-material/ExpandLess";
|
||||
import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
|
||||
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import {
|
||||
useChat,
|
||||
AiWorkflowPhase,
|
||||
@@ -45,6 +42,7 @@ import { formatRelativeTime } from "@app/utils/timeUtils";
|
||||
import { useTranslatedToolCatalog } from "@app/data/useTranslatedToolRegistry";
|
||||
import { StirlingLogoAnimated } from "@app/components/agents/StirlingLogoAnimated";
|
||||
import { StirlingLogoOutline } from "@app/components/agents/StirlingLogoOutline";
|
||||
import { PanelHeader } from "@shared/components/PanelHeader";
|
||||
import { ChatQuickActions } from "@app/components/chat/ChatQuickActions";
|
||||
import "@app/components/chat/ChatPanel.css";
|
||||
|
||||
@@ -470,47 +468,25 @@ export function ChatPanel({ onBack, backLabel }: ChatPanelProps) {
|
||||
|
||||
return (
|
||||
<Box className="chat-panel chat-panel--embedded">
|
||||
<div className="chat-panel__header">
|
||||
<Menu shadow="md" width={220} position="bottom-start" withinPortal>
|
||||
<Menu.Target>
|
||||
<button
|
||||
type="button"
|
||||
className={`chat-panel__agent-pill${isLoading ? " chat-panel__agent-pill--loading" : ""}`}
|
||||
aria-label={t("chat.header.agentMenu", "Stirling agent options")}
|
||||
>
|
||||
<span className="chat-panel__agent-pill-icon">
|
||||
<StirlingLogoOutline size={16} />
|
||||
{isLoading && <span className="agent-status-dot" />}
|
||||
</span>
|
||||
<span className="chat-panel__agent-pill-label">
|
||||
{t("agents.stirling_name", "Stirling")}
|
||||
</span>
|
||||
<KeyboardArrowDownIcon
|
||||
sx={{ fontSize: 18, color: "var(--text-muted)" }}
|
||||
/>
|
||||
</button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
<Menu.Item
|
||||
leftSection={<DeleteSweepIcon sx={{ fontSize: 18 }} />}
|
||||
onClick={clearChat}
|
||||
disabled={messages.length === 0 && !isLoading}
|
||||
>
|
||||
{t("chat.header.clearChat", "Clear chat")}
|
||||
</Menu.Item>
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
<ActionIcon
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
size="md"
|
||||
radius="xl"
|
||||
onClick={onBack}
|
||||
aria-label={backLabel}
|
||||
>
|
||||
<CloseIcon sx={{ fontSize: 18 }} />
|
||||
</ActionIcon>
|
||||
</div>
|
||||
<PanelHeader
|
||||
icon={<StirlingLogoOutline size={16} />}
|
||||
title={t("agents.stirling_name", "Stirling")}
|
||||
loading={isLoading}
|
||||
className="chat-panel__header"
|
||||
barClassName="chat-panel__agent-pill-vt"
|
||||
menuLabel={t("chat.header.agentMenu", "Stirling agent options")}
|
||||
menuItems={[
|
||||
{
|
||||
key: "clear-chat",
|
||||
icon: <DeleteSweepIcon sx={{ fontSize: 18 }} />,
|
||||
label: t("chat.header.clearChat", "Clear chat"),
|
||||
onClick: clearChat,
|
||||
disabled: messages.length === 0 && !isLoading,
|
||||
},
|
||||
]}
|
||||
onClose={onBack}
|
||||
closeLabel={backLabel}
|
||||
/>
|
||||
|
||||
{showQuickActions && (
|
||||
<div className="chat-panel-disclaimer chat-panel-disclaimer--banner">
|
||||
|
||||
@@ -8,6 +8,27 @@
|
||||
/* scaffolding + the collapsed rail; spacing snaps to the SUI --space-* */
|
||||
/* scale and colour to the SUI token set so it reads as one product. */
|
||||
|
||||
/* Dark mode only: remap SUI surface/border tokens to the app's neutral-grey values so policy cards read as one product with the rail; accent tokens are left alone. */
|
||||
[data-theme="dark"] .pol-list,
|
||||
[data-theme="dark"] .pol-takeover,
|
||||
[data-theme="dark"] .pol-detail,
|
||||
[data-theme="dark"] .pol-crail {
|
||||
--color-bg: var(--bg-toolbar);
|
||||
--color-bg-alt: var(--bg-toolbar);
|
||||
--color-bg-subtle: var(--bg-toolbar);
|
||||
--color-surface: var(--bg-surface);
|
||||
--color-surface-alt: #323942;
|
||||
--color-bg-hover: #323942;
|
||||
--color-bg-muted: var(--bg-surface);
|
||||
--color-border: var(--border-default);
|
||||
--color-border-light: var(--border-subtle);
|
||||
--color-border-input: var(--border-strong);
|
||||
--color-border-hover: var(--border-strong);
|
||||
--color-divider: var(--border-subtle);
|
||||
--color-dropdown-bg: var(--bg-surface);
|
||||
--color-dropdown-border: var(--border-default);
|
||||
}
|
||||
|
||||
/* ---- List ---- */
|
||||
.pol-list {
|
||||
width: 100%;
|
||||
@@ -69,6 +90,19 @@
|
||||
outline: 2px solid var(--color-blue);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
/* Policy icons are colourless at rest; hovering or focusing the row reveals the
|
||||
category colour (blue/purple/green/amber/red — see ROW_ACCENT). The accent
|
||||
class sets --ib-base; we neutralise --ib-accent here and restore it on hover. */
|
||||
.pol-row .sui-iconbadge {
|
||||
--ib-accent: var(--color-text-3);
|
||||
transition:
|
||||
color var(--motion-fast),
|
||||
background var(--motion-fast);
|
||||
}
|
||||
.pol-row:hover .sui-iconbadge,
|
||||
.pol-row:focus-visible .sui-iconbadge {
|
||||
--ib-accent: var(--ib-base);
|
||||
}
|
||||
.pol-row-label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
@@ -126,20 +160,28 @@
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* Locked "Coming soon" row — muted, not interactive. */
|
||||
/* Enterprise-only ("coming soon") row — shown to admins / team leaders but not
|
||||
available on the current plan, so the whole box is dimmed to read as disabled.
|
||||
The row itself isn't a button; its trailing "Upgrade to enterprise" link is. */
|
||||
.pol-row--soon {
|
||||
opacity: 0.55;
|
||||
cursor: default;
|
||||
opacity: 0.55;
|
||||
}
|
||||
.pol-row--soon:hover {
|
||||
background: transparent;
|
||||
}
|
||||
.pol-row-soon {
|
||||
/* Trailing "Upgrade to enterprise" link → contact us. Greyed to match the
|
||||
disabled row; still clickable for admins who want to enquire. */
|
||||
.pol-row-upgrade {
|
||||
font-size: 0.6875rem;
|
||||
font-weight: 500;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-4);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.pol-row-upgrade:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
/* In-progress activity icon spins gently. */
|
||||
.pol-spin {
|
||||
@@ -192,9 +234,17 @@
|
||||
|
||||
/* ---- Step indicator (wraps a SUI StepIndicator) ---- */
|
||||
.pol-steps {
|
||||
padding: var(--space-3) var(--space-5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.75rem;
|
||||
padding: 0 var(--space-5) var(--space-3);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.pol-step-label {
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-4);
|
||||
}
|
||||
|
||||
/* ---- Scroll body ---- */
|
||||
.pol-scroll {
|
||||
@@ -211,6 +261,7 @@
|
||||
line-height: 1.5;
|
||||
color: var(--color-text-4);
|
||||
margin: 0;
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
.pol-section-label {
|
||||
font-size: 0.6875rem;
|
||||
|
||||
@@ -169,11 +169,11 @@ describe("Policies right-sidebar surface", () => {
|
||||
expect(await screen.findByText("No activity yet")).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it("returns to the list via the back button", () => {
|
||||
it("returns to the list via the close button", () => {
|
||||
renderHost();
|
||||
fireEvent.click(screen.getByText("Security"));
|
||||
expect(screen.getByText("Enforces")).toBeInTheDocument();
|
||||
fireEvent.click(screen.getByLabelText("Back"));
|
||||
fireEvent.click(screen.getByLabelText("Close"));
|
||||
expect(screen.getByText("Policies")).toBeInTheDocument();
|
||||
});
|
||||
});
|
||||
|
||||
@@ -61,6 +61,16 @@ export function usePoliciesEnabled(): boolean {
|
||||
return POLICIES_ENABLED;
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the right rail should show the Policies section.
|
||||
*/
|
||||
export function usePoliciesVisible(): boolean {
|
||||
const pol = usePolicies();
|
||||
const { categories } = usePolicyCatalog();
|
||||
if (!POLICIES_ENABLED) return false;
|
||||
return pol.canConfigure || categories.some((c) => !c.comingSoon);
|
||||
}
|
||||
|
||||
/**
|
||||
* Whether the current user is a guest who can't open or configure policies —
|
||||
* an anonymous user on a login-enabled deployment (i.e. a SaaS sign-up prompt
|
||||
@@ -122,6 +132,14 @@ export function PoliciesSection({
|
||||
|
||||
if (!POLICIES_ENABLED) return null;
|
||||
|
||||
// Admins / team leads see the full catalogue (coming-soon rows greyed as an
|
||||
// enterprise upsell); regular users only see the live policies — the
|
||||
// coming-soon "Upgrade to enterprise" rows are hidden from them.
|
||||
const visibleCategories = pol.canConfigure
|
||||
? categories
|
||||
: categories.filter((c) => !c.comingSoon);
|
||||
if (visibleCategories.length === 0) return null;
|
||||
|
||||
// The header tally counts every CONFIGURED policy (active + paused), not just
|
||||
// the active ones.
|
||||
const configuredCount = categories.filter(
|
||||
@@ -170,14 +188,10 @@ export function PoliciesSection({
|
||||
{expanded && (
|
||||
<>
|
||||
<div className="pol-list-rows">
|
||||
{categories.map((cat) => {
|
||||
{visibleCategories.map((cat) => {
|
||||
if (cat.comingSoon) {
|
||||
return (
|
||||
<div
|
||||
key={cat.id}
|
||||
className="pol-row pol-row--soon"
|
||||
aria-disabled="true"
|
||||
>
|
||||
<div key={cat.id} className="pol-row pol-row--soon">
|
||||
<IconBadge size="sm" accent={ROW_ACCENT[cat.id] ?? "blue"}>
|
||||
{cat.icon}
|
||||
</IconBadge>
|
||||
@@ -185,12 +199,17 @@ export function PoliciesSection({
|
||||
{t(`policies.catalog.${cat.id}`, cat.label)}
|
||||
</span>
|
||||
<span className="pol-row-trail">
|
||||
<span className="pol-row-soon">
|
||||
<a
|
||||
className="pol-row-upgrade"
|
||||
href="https://stirling.com/contact"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{t(
|
||||
"policies.sidebar.upgradeToEnterprise",
|
||||
"Upgrade to enterprise",
|
||||
)}
|
||||
</span>
|
||||
</a>
|
||||
</span>
|
||||
</div>
|
||||
);
|
||||
@@ -457,58 +476,64 @@ export function PoliciesCollapsedButton({
|
||||
|
||||
if (!POLICIES_ENABLED) return null;
|
||||
|
||||
// Coming-soon policies are excluded; admins see all real policies, others only see configured ones — renders nothing when empty.
|
||||
const railCategories = categories.filter((cat) => {
|
||||
if (cat.comingSoon) return false;
|
||||
if (pol.canConfigure) return true;
|
||||
return pol.policies[cat.id]?.configured;
|
||||
});
|
||||
if (railCategories.length === 0) return null;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="pol-crail">
|
||||
{categories
|
||||
.filter((cat) => !cat.comingSoon)
|
||||
.map((cat) => {
|
||||
const status = deriveRowStatus(pol.policies[cat.id]);
|
||||
const label = t(`policies.catalog.${cat.id}`, cat.label);
|
||||
const statusLabel = t(
|
||||
`policies.status.${status}`,
|
||||
STATUS_LABEL[status],
|
||||
);
|
||||
const suffix =
|
||||
status === "active"
|
||||
? t("policies.sidebar.railSuffixActive", " (Active)")
|
||||
: status === "paused"
|
||||
? t("policies.sidebar.railSuffixPaused", " (Paused)")
|
||||
: "";
|
||||
return (
|
||||
<AppTooltip
|
||||
key={cat.id}
|
||||
content={`${label}${suffix}`}
|
||||
position="left"
|
||||
arrow
|
||||
delay={300}
|
||||
{railCategories.map((cat) => {
|
||||
const status = deriveRowStatus(pol.policies[cat.id]);
|
||||
const label = t(`policies.catalog.${cat.id}`, cat.label);
|
||||
const statusLabel = t(
|
||||
`policies.status.${status}`,
|
||||
STATUS_LABEL[status],
|
||||
);
|
||||
const suffix =
|
||||
status === "active"
|
||||
? t("policies.sidebar.railSuffixActive", " (Active)")
|
||||
: status === "paused"
|
||||
? t("policies.sidebar.railSuffixPaused", " (Paused)")
|
||||
: "";
|
||||
return (
|
||||
<AppTooltip
|
||||
key={cat.id}
|
||||
content={`${label}${suffix}`}
|
||||
position="left"
|
||||
arrow
|
||||
delay={300}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="pol-crail-btn"
|
||||
data-status={status}
|
||||
aria-label={t(
|
||||
"policies.sidebar.railAriaLabel",
|
||||
"{{label}} policy — {{status}}",
|
||||
{ label, status: statusLabel },
|
||||
)}
|
||||
onClick={() => {
|
||||
if (guestBlocked) {
|
||||
promptGuestSignup();
|
||||
return;
|
||||
}
|
||||
selectPolicy(cat.id);
|
||||
onExpand();
|
||||
}}
|
||||
>
|
||||
<button
|
||||
type="button"
|
||||
className="pol-crail-btn"
|
||||
data-status={status}
|
||||
aria-label={t(
|
||||
"policies.sidebar.railAriaLabel",
|
||||
"{{label}} policy — {{status}}",
|
||||
{ label, status: statusLabel },
|
||||
)}
|
||||
onClick={() => {
|
||||
if (guestBlocked) {
|
||||
promptGuestSignup();
|
||||
return;
|
||||
}
|
||||
selectPolicy(cat.id);
|
||||
onExpand();
|
||||
}}
|
||||
>
|
||||
{cat.icon}
|
||||
{(status === "active" || status === "paused") && (
|
||||
<span className="pol-crail-dot" data-status={status} />
|
||||
)}
|
||||
</button>
|
||||
</AppTooltip>
|
||||
);
|
||||
})}
|
||||
{cat.icon}
|
||||
{(status === "active" || status === "paused") && (
|
||||
<span className="pol-crail-dot" data-status={status} />
|
||||
)}
|
||||
</button>
|
||||
</AppTooltip>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
<div className="tool-panel__collapsed-divider" />
|
||||
</>
|
||||
|
||||
@@ -132,9 +132,10 @@ export function PolicyDetailPanel({
|
||||
<div className="pol-detail">
|
||||
<PanelHeader
|
||||
icon={category.icon}
|
||||
iconAccent={ROW_ACCENT[category.id] ?? "blue"}
|
||||
accent={ROW_ACCENT[category.id]}
|
||||
title={t(`policies.catalog.${category.id}`, category.label)}
|
||||
onBack={onBack}
|
||||
onClose={onBack}
|
||||
closeLabel={t("policies.detail.close", "Close")}
|
||||
actions={
|
||||
<StatusBadge
|
||||
tone={isPaused ? "warning" : "success"}
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import { useState, useMemo, useRef } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
||||
import { PanelHeader } from "@shared/components/PanelHeader";
|
||||
import { ROW_ACCENT } from "@app/components/policies/policyStatus";
|
||||
@@ -159,7 +158,7 @@ export function PolicySetupWizard({
|
||||
<div className="pol-detail">
|
||||
<PanelHeader
|
||||
icon={category.icon}
|
||||
iconAccent={ROW_ACCENT[category.id] ?? "blue"}
|
||||
accent={ROW_ACCENT[category.id]}
|
||||
title={
|
||||
isEdit
|
||||
? t("policies.wizard.editTitle", "Edit {{label}} Policy", {
|
||||
@@ -169,7 +168,8 @@ export function PolicySetupWizard({
|
||||
label: t(`policies.catalog.${category.id}`, category.label),
|
||||
})
|
||||
}
|
||||
onBack={onCancel}
|
||||
onClose={onCancel}
|
||||
closeLabel={t("policies.wizard.close", "Close")}
|
||||
/>
|
||||
<div className="pol-scroll">
|
||||
<EmptyState
|
||||
@@ -299,7 +299,7 @@ export function PolicySetupWizard({
|
||||
<div className="pol-detail">
|
||||
<PanelHeader
|
||||
icon={category.icon}
|
||||
iconAccent={ROW_ACCENT[category.id] ?? "blue"}
|
||||
accent={ROW_ACCENT[category.id]}
|
||||
title={
|
||||
isEdit
|
||||
? t("policies.wizard.editTitle", "Edit {{label}} Policy", {
|
||||
@@ -309,23 +309,17 @@ export function PolicySetupWizard({
|
||||
label: t(`policies.catalog.${category.id}`, category.label),
|
||||
})
|
||||
}
|
||||
subtitle={t("policies.wizard.stepOf", "Step {{step}} of {{total}}", {
|
||||
step,
|
||||
total: TOTAL_STEPS,
|
||||
})}
|
||||
onBack={back}
|
||||
actions={
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
aria-label={t("cancel", "Cancel")}
|
||||
onClick={onCancel}
|
||||
leadingIcon={<CloseIcon sx={{ fontSize: "1.1rem" }} />}
|
||||
/>
|
||||
}
|
||||
onClose={onCancel}
|
||||
closeLabel={t("cancel", "Cancel")}
|
||||
/>
|
||||
|
||||
<div className="pol-steps">
|
||||
<span className="pol-step-label">
|
||||
{t("policies.wizard.stepOf", "Step {{step}} of {{total}}", {
|
||||
step,
|
||||
total: TOTAL_STEPS,
|
||||
})}
|
||||
</span>
|
||||
<StepIndicator total={TOTAL_STEPS} current={step} />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -17,7 +17,9 @@ export const STATUS_LABEL: Record<PolicyRowStatus, string> = {
|
||||
setup: "Set up",
|
||||
};
|
||||
|
||||
/** A soft tinted icon tile per category — gives each policy a calm identity colour. */
|
||||
/**
|
||||
* Per-category accent colour
|
||||
*/
|
||||
export const ROW_ACCENT: Record<string, IconBadgeAccent> = {
|
||||
ingestion: "blue",
|
||||
security: "purple",
|
||||
|
||||
@@ -4,6 +4,12 @@
|
||||
justify-content: center;
|
||||
border-radius: var(--radius-md);
|
||||
flex-shrink: 0;
|
||||
/* Resolved tint. Each accent class sets --ib-base; --ib-accent defaults to it
|
||||
but a consumer can override --ib-accent alone (e.g. to neutralise the badge
|
||||
until hover) without losing the per-accent base. */
|
||||
--ib-accent: var(--ib-base, var(--color-blue));
|
||||
color: var(--ib-accent);
|
||||
background: color-mix(in srgb, var(--ib-accent) 14%, transparent);
|
||||
}
|
||||
.sui-iconbadge--sm {
|
||||
width: 1.75rem;
|
||||
@@ -14,22 +20,17 @@
|
||||
height: 2rem;
|
||||
}
|
||||
.sui-iconbadge--blue {
|
||||
color: var(--color-blue);
|
||||
background: color-mix(in srgb, var(--color-blue) 14%, transparent);
|
||||
--ib-base: var(--color-blue);
|
||||
}
|
||||
.sui-iconbadge--purple {
|
||||
color: var(--color-purple);
|
||||
background: color-mix(in srgb, var(--color-purple) 14%, transparent);
|
||||
--ib-base: var(--color-purple);
|
||||
}
|
||||
.sui-iconbadge--green {
|
||||
color: var(--color-green);
|
||||
background: color-mix(in srgb, var(--color-green) 14%, transparent);
|
||||
--ib-base: var(--color-green);
|
||||
}
|
||||
.sui-iconbadge--amber {
|
||||
color: var(--color-amber);
|
||||
background: color-mix(in srgb, var(--color-amber) 14%, transparent);
|
||||
--ib-base: var(--color-amber);
|
||||
}
|
||||
.sui-iconbadge--red {
|
||||
color: var(--color-red);
|
||||
background: color-mix(in srgb, var(--color-red) 14%, transparent);
|
||||
--ib-base: var(--color-red);
|
||||
}
|
||||
|
||||
@@ -1,54 +1,168 @@
|
||||
/* ===================== PanelHeader ===================== */
|
||||
/* The header shared by the active-tool panel, the AI chat panel and the */
|
||||
/* Policies detail/wizard. Mirrors the AI chat header treatment so it reads well */
|
||||
/* in both light and dark mode (thin border, no heavy fill). */
|
||||
|
||||
.sui-panelhdr {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.25rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
}
|
||||
.sui-panelhdr__left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
min-width: 0;
|
||||
}
|
||||
.sui-panelhdr__back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
padding: 1rem 1rem 0.75rem;
|
||||
flex-shrink: 0;
|
||||
width: 1.875rem;
|
||||
height: 1.875rem;
|
||||
border: 1px solid var(--color-border);
|
||||
border-radius: 50%;
|
||||
background: var(--color-surface);
|
||||
color: var(--color-text-2);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background var(--motion-fast),
|
||||
color var(--motion-fast),
|
||||
border-color var(--motion-fast);
|
||||
}
|
||||
.sui-panelhdr__back:hover {
|
||||
background: var(--color-bg-hover);
|
||||
border-color: var(--color-text-4);
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.sui-panelhdr__text {
|
||||
min-width: 0;
|
||||
}
|
||||
.sui-panelhdr__title {
|
||||
font-size: 1.0625rem;
|
||||
font-weight: 600;
|
||||
color: var(--color-text-1);
|
||||
}
|
||||
.sui-panelhdr__sub {
|
||||
font-size: 0.8125rem;
|
||||
color: var(--color-text-4);
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
.sui-panelhdr__actions {
|
||||
|
||||
.sui-panelhdr__bar {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
padding: 0.4rem 0.75rem 0.4rem 0.4rem;
|
||||
border: 1px solid var(--border-subtle, var(--mantine-color-default-border));
|
||||
border-radius: 9999px;
|
||||
background: var(--mantine-color-body);
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
/* Only the menu-trigger variant is interactive. */
|
||||
button.sui-panelhdr__bar {
|
||||
cursor: pointer;
|
||||
transition:
|
||||
background 120ms ease-out,
|
||||
border-color 120ms ease-out;
|
||||
}
|
||||
|
||||
button.sui-panelhdr__bar:hover {
|
||||
background: var(--mantine-color-default-hover);
|
||||
}
|
||||
|
||||
.sui-panelhdr__icon {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.75rem;
|
||||
height: 1.75rem;
|
||||
border-radius: 9999px;
|
||||
background: var(--mantine-color-blue-light);
|
||||
color: var(--mantine-color-blue-filled);
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sui-panelhdr__icon svg {
|
||||
font-size: 1rem;
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
}
|
||||
|
||||
/* ToolIcon wraps its glyph in .tool-button-icon with its own margin/transform;
|
||||
reset them so the glyph sits dead-centre in the circular badge. */
|
||||
.sui-panelhdr__icon .tool-button-icon {
|
||||
margin: 0 !important;
|
||||
transform: none !important;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.sui-panelhdr__label {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 0.9rem;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
color: var(--mantine-color-text);
|
||||
}
|
||||
|
||||
.sui-panelhdr__chevron {
|
||||
flex-shrink: 0;
|
||||
color: var(--mantine-color-dimmed);
|
||||
}
|
||||
|
||||
/* Right-aligned content inside the bar (e.g. a status badge); the flexible
|
||||
label pushes it to the trailing edge of the pill. */
|
||||
.sui-panelhdr__actions {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* Running / in-progress status dot, anchored to the header icon. */
|
||||
.sui-panelhdr__dot {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: var(--mantine-color-blue-5);
|
||||
border: 1.5px solid var(--mantine-color-body);
|
||||
animation: sui-panelhdr-dot-pulse 2.4s ease-in-out infinite;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@keyframes sui-panelhdr-dot-pulse {
|
||||
0%,
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
50% {
|
||||
opacity: 0.45;
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.sui-panelhdr__dot {
|
||||
animation: none;
|
||||
}
|
||||
}
|
||||
|
||||
.sui-panelhdr__bar--loading {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-blue-5) 60%,
|
||||
var(--border-subtle, var(--mantine-color-default-border))
|
||||
);
|
||||
}
|
||||
|
||||
/* Dark mode: let the header blend into the rail — just a thin border, no fill —
|
||||
so it doesn't read as a clashing lighter card on the dark toolbar. */
|
||||
[data-mantine-color-scheme="dark"] .sui-panelhdr__bar {
|
||||
background: transparent;
|
||||
border-color: var(--border-subtle, var(--mantine-color-default-border));
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] button.sui-panelhdr__bar:hover {
|
||||
background: rgba(255, 255, 255, 0.04);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .sui-panelhdr__bar--loading {
|
||||
border-color: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-blue-4) 55%,
|
||||
var(--border-subtle, var(--mantine-color-default-border))
|
||||
);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .sui-panelhdr__icon {
|
||||
background: color-mix(
|
||||
in srgb,
|
||||
var(--mantine-color-blue-filled) 18%,
|
||||
transparent
|
||||
);
|
||||
color: var(--mantine-color-blue-3, var(--mantine-color-blue-filled));
|
||||
}
|
||||
|
||||
/* Dark mode: the subtle gray close button is too dim against the dark rail —
|
||||
brighten it to a clearly-visible light grey (near-white on hover). */
|
||||
[data-mantine-color-scheme="dark"] .sui-panelhdr__close {
|
||||
color: var(--mantine-color-gray-4);
|
||||
}
|
||||
|
||||
[data-mantine-color-scheme="dark"] .sui-panelhdr__close:hover {
|
||||
color: var(--mantine-color-gray-2);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import type { Meta, StoryObj } from "@storybook/react-vite";
|
||||
import ShieldOutlinedIcon from "@mui/icons-material/ShieldOutlined";
|
||||
import DeleteSweepIcon from "@mui/icons-material/DeleteSweep";
|
||||
import { PanelHeader } from "@shared/components/PanelHeader";
|
||||
import { Button } from "@shared/components/Button";
|
||||
import { StatusBadge } from "@shared/components/StatusBadge";
|
||||
|
||||
const meta: Meta<typeof PanelHeader> = {
|
||||
@@ -9,53 +10,53 @@ const meta: Meta<typeof PanelHeader> = {
|
||||
tags: ["autodocs"],
|
||||
parameters: { layout: "padded" },
|
||||
args: {
|
||||
title: "Pipeline detail",
|
||||
subtitle: "COI Compliance · us-east-1",
|
||||
icon: <ShieldOutlinedIcon sx={{ fontSize: "1rem" }} />,
|
||||
title: "Security",
|
||||
closeLabel: "Close",
|
||||
},
|
||||
argTypes: { onBack: { action: "back" } },
|
||||
argTypes: { onClose: { action: "close" } },
|
||||
};
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof PanelHeader>;
|
||||
|
||||
/** Toggle title / subtitle / onBack / actions in controls. */
|
||||
/** Plain header pill with a trailing close button. */
|
||||
export const Playground: Story = {};
|
||||
|
||||
export const WithActions: Story = {
|
||||
/** Category-accented icon badge (blue / purple / green / amber / red). */
|
||||
export const Accented: Story = {
|
||||
args: { accent: "purple" },
|
||||
};
|
||||
|
||||
/** Dropdown trigger — a disclosure chevron appears and clicking the pill opens
|
||||
* the menu (e.g. the chat header's "Clear chat"). */
|
||||
export const WithMenu: Story = {
|
||||
args: {
|
||||
subtitle: "Last deploy 14m ago · golden set 48/48",
|
||||
actions: (
|
||||
<>
|
||||
<StatusBadge tone="success" pulse>
|
||||
Healthy
|
||||
</StatusBadge>
|
||||
<Button size="sm" variant="outline">
|
||||
Edit composition
|
||||
</Button>
|
||||
<Button size="sm" variant="gradient">
|
||||
View runs
|
||||
</Button>
|
||||
</>
|
||||
),
|
||||
title: "Stirling",
|
||||
menuLabel: "Stirling agent options",
|
||||
menuItems: [
|
||||
{
|
||||
key: "clear",
|
||||
icon: <DeleteSweepIcon sx={{ fontSize: 18 }} />,
|
||||
label: "Clear chat",
|
||||
onClick: () => {},
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export const Everything: Story = {
|
||||
/** Loading state — pulsing status dot on the icon + a tinted border. */
|
||||
export const Loading: Story = {
|
||||
args: { title: "Stirling", loading: true },
|
||||
};
|
||||
|
||||
/** Right-aligned actions rendered before the close button. */
|
||||
export const WithActions: Story = {
|
||||
args: {
|
||||
title: "Pipeline detail — COI Compliance",
|
||||
subtitle: "Forked from Compliance Pack · 1,287 docs / 24h",
|
||||
onBack: () => {},
|
||||
accent: "purple",
|
||||
actions: (
|
||||
<>
|
||||
<StatusBadge tone="success" pulse>
|
||||
Healthy
|
||||
</StatusBadge>
|
||||
<Button size="sm" variant="outline">
|
||||
Edit composition
|
||||
</Button>
|
||||
<Button size="sm" variant="gradient">
|
||||
View runs
|
||||
</Button>
|
||||
</>
|
||||
<StatusBadge tone="success" showDot pulse>
|
||||
Active
|
||||
</StatusBadge>
|
||||
),
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,73 +1,152 @@
|
||||
import type { ReactNode } from "react";
|
||||
import type { CSSProperties, ReactNode } from "react";
|
||||
import { ActionIcon, Menu } from "@mantine/core";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
|
||||
import type { IconBadgeAccent } from "@shared/components/IconBadge";
|
||||
import "@shared/components/PanelHeader.css";
|
||||
import { IconBadge } from "@shared/components/IconBadge";
|
||||
|
||||
export interface PanelHeaderMenuItem {
|
||||
/** Stable key; falls back to the item index. */
|
||||
key?: string;
|
||||
/** Optional leading glyph. */
|
||||
icon?: ReactNode;
|
||||
label: ReactNode;
|
||||
onClick: () => void;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
export interface PanelHeaderProps {
|
||||
/** Glyph rendered in the tinted circular badge at the header's leading edge. */
|
||||
icon: ReactNode;
|
||||
/** Header title. */
|
||||
title: ReactNode;
|
||||
/** Sub-heading below the title. */
|
||||
subtitle?: ReactNode;
|
||||
/** Show a back chevron and trigger this callback when clicked. */
|
||||
onBack?: () => void;
|
||||
/** Optional leading visual (e.g. a category glyph) shown in a tinted box. */
|
||||
icon?: ReactNode;
|
||||
/** Accent tint for the leading icon box. Defaults to blue. */
|
||||
iconAccent?: "blue" | "purple" | "green" | "amber" | "red";
|
||||
/** Right-aligned action buttons / chips. */
|
||||
/** Close (X) handler. The trailing close button renders only when supplied. */
|
||||
onClose?: () => void;
|
||||
/** aria-label for the close button. */
|
||||
closeLabel?: string;
|
||||
/**
|
||||
* When provided, the header becomes a dropdown trigger: a disclosure chevron is
|
||||
* shown and clicking it opens a menu of these items (e.g. "Clear chat").
|
||||
*/
|
||||
menuItems?: PanelHeaderMenuItem[];
|
||||
/** aria-label for the header when it acts as a menu trigger. */
|
||||
menuLabel?: string;
|
||||
/**
|
||||
* Tints the icon badge with a category colour (blue/purple/green/amber/red).
|
||||
* Defaults to the standard blue when omitted (tool + AI chat headers).
|
||||
*/
|
||||
accent?: IconBadgeAccent;
|
||||
/** Shows a pulsing status dot on the icon + a tinted border (e.g. AI running). */
|
||||
loading?: boolean;
|
||||
/** Right-aligned content rendered inside the header bar, after the title
|
||||
* (e.g. a status badge). */
|
||||
actions?: ReactNode;
|
||||
/** Applied to the inner header element — e.g. to set a view-transition-name. */
|
||||
barClassName?: string;
|
||||
/** Applied to the outer header container. */
|
||||
className?: string;
|
||||
}
|
||||
|
||||
/**
|
||||
* Header strip used by drill-down panels (admin tabs, agent detail, settings
|
||||
* sub-pages). Back chevron renders only when `onBack` is supplied; an optional
|
||||
* leading `icon` renders in a tinted box before the title.
|
||||
* The header shared by the rail surfaces — the active tool panel, the AI chat
|
||||
* panel, and the Policies detail/wizard. A tinted icon badge + title sit in a
|
||||
* rounded bar, with an optional dropdown menu and a trailing close button. The
|
||||
* styling stays legible in dark mode (thin border, no heavy fill) across every
|
||||
* surface.
|
||||
*/
|
||||
export function PanelHeader({
|
||||
title,
|
||||
subtitle,
|
||||
onBack,
|
||||
icon,
|
||||
iconAccent = "blue",
|
||||
title,
|
||||
onClose,
|
||||
closeLabel,
|
||||
menuItems,
|
||||
menuLabel,
|
||||
accent,
|
||||
loading = false,
|
||||
actions,
|
||||
barClassName,
|
||||
className,
|
||||
}: PanelHeaderProps) {
|
||||
const hasMenu = menuItems != null && menuItems.length > 0;
|
||||
|
||||
// Tint the icon badge with the category colour when an accent is given. Inline
|
||||
// so it wins over the default blue treatment in both light and dark mode; the
|
||||
// --color-* tokens are theme-aware and match the badge tint used elsewhere.
|
||||
const iconStyle: CSSProperties | undefined = accent
|
||||
? {
|
||||
color: `var(--color-${accent})`,
|
||||
background: `color-mix(in srgb, var(--color-${accent}) 14%, transparent)`,
|
||||
}
|
||||
: undefined;
|
||||
|
||||
const barClasses = [
|
||||
"sui-panelhdr__bar",
|
||||
loading ? "sui-panelhdr__bar--loading" : "",
|
||||
barClassName ?? "",
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(" ");
|
||||
|
||||
const barBody = (
|
||||
<>
|
||||
<span className="sui-panelhdr__icon" style={iconStyle}>
|
||||
{icon}
|
||||
{loading && <span className="sui-panelhdr__dot" />}
|
||||
</span>
|
||||
<span className="sui-panelhdr__label">{title}</span>
|
||||
{actions != null && (
|
||||
<span className="sui-panelhdr__actions">{actions}</span>
|
||||
)}
|
||||
{hasMenu && (
|
||||
<KeyboardArrowDownIcon
|
||||
className="sui-panelhdr__chevron"
|
||||
sx={{ fontSize: 18 }}
|
||||
/>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
|
||||
return (
|
||||
<div
|
||||
className={["sui-panelhdr", className ?? ""].filter(Boolean).join(" ")}
|
||||
>
|
||||
<div className="sui-panelhdr__left">
|
||||
{onBack && (
|
||||
<button
|
||||
type="button"
|
||||
className="sui-panelhdr__back"
|
||||
onClick={onBack}
|
||||
aria-label="Back"
|
||||
>
|
||||
<svg
|
||||
viewBox="0 0 24 24"
|
||||
width={18}
|
||||
height={18}
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth={1.75}
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
>
|
||||
<polyline points="15 18 9 12 15 6" />
|
||||
</svg>
|
||||
</button>
|
||||
)}
|
||||
{icon && (
|
||||
<IconBadge accent={iconAccent} size="md">
|
||||
{icon}
|
||||
</IconBadge>
|
||||
)}
|
||||
<div className="sui-panelhdr__text">
|
||||
<div className="sui-panelhdr__title">{title}</div>
|
||||
{subtitle && <div className="sui-panelhdr__sub">{subtitle}</div>}
|
||||
</div>
|
||||
</div>
|
||||
{actions && <div className="sui-panelhdr__actions">{actions}</div>}
|
||||
{hasMenu ? (
|
||||
<Menu shadow="md" width={220} position="bottom-start" withinPortal>
|
||||
<Menu.Target>
|
||||
<button type="button" className={barClasses} aria-label={menuLabel}>
|
||||
{barBody}
|
||||
</button>
|
||||
</Menu.Target>
|
||||
<Menu.Dropdown>
|
||||
{(menuItems ?? []).map((item, i) => (
|
||||
<Menu.Item
|
||||
key={item.key ?? i}
|
||||
leftSection={item.icon}
|
||||
onClick={item.onClick}
|
||||
disabled={item.disabled}
|
||||
>
|
||||
{item.label}
|
||||
</Menu.Item>
|
||||
))}
|
||||
</Menu.Dropdown>
|
||||
</Menu>
|
||||
) : (
|
||||
<div className={barClasses}>{barBody}</div>
|
||||
)}
|
||||
|
||||
{onClose && (
|
||||
<ActionIcon
|
||||
className="sui-panelhdr__close"
|
||||
variant="subtle"
|
||||
color="gray"
|
||||
radius="xl"
|
||||
size="md"
|
||||
onClick={onClose}
|
||||
aria-label={closeLabel}
|
||||
>
|
||||
<CloseIcon sx={{ fontSize: 18 }} />
|
||||
</ActionIcon>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user