5d024ab54f
- Add a grey CopyrightBadge ("Copyright © Model Context Protocol a Series of LF
Projects, LLC.") to the footer. Version (bottom-left) and copyright
(bottom-right) share the bottom `xl` margin band: vertically centered in it
and inset by `xl` to line up with the content's left/right margins.
- Move the list expand/collapse toggle to the right of the "Add Servers" button
in ServerListControls.
- Make the monitoring column's close-sidebar control match the open-sidebar
PinColumnButton theme (Button size sm / variant subtle) instead of a gray
ActionIcon, so the open/close affordances read as a pair.
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01BrihGWcrM9JGRyu41nzZYw
73 lines
2.5 KiB
TypeScript
73 lines
2.5 KiB
TypeScript
import { Text } from "@mantine/core";
|
|
|
|
export const ThemeText = Text.extend({
|
|
// `tabGlow` labels carry the `.tab-glow` class so a freshly-appeared tab can
|
|
// pulse a red glow (the keyframe + `[data-glow="on"]` trigger live in
|
|
// App.css). Auto-assigning the class keeps `className` out of the JSX (#1450).
|
|
classNames: (_theme, props) => {
|
|
if (props.variant === "tabGlow") return { root: "tab-glow" };
|
|
return {};
|
|
},
|
|
styles: (_theme, props) => {
|
|
if (props.variant === "monoBreak") {
|
|
return {
|
|
root: {
|
|
wordBreak: "break-all",
|
|
},
|
|
};
|
|
}
|
|
// Single-line text that never wraps — used inside a horizontal ScrollArea so
|
|
// a long value (e.g. a network URL in the compact column) scrolls instead of
|
|
// wrapping to many lines (#1616).
|
|
if (props.variant === "nowrap") {
|
|
return {
|
|
root: {
|
|
whiteSpace: "nowrap",
|
|
},
|
|
};
|
|
}
|
|
// A line of captured server stderr (#1621): preserve the process's own
|
|
// newlines/whitespace (`pre-wrap`) while still wrapping over-long lines
|
|
// inside the narrow monitoring column (`break-word`).
|
|
if (props.variant === "consoleLine") {
|
|
return {
|
|
root: {
|
|
whiteSpace: "pre-wrap",
|
|
wordBreak: "break-word",
|
|
},
|
|
};
|
|
}
|
|
// Two small, unobtrusive labels pinned to the bottom corners of the screen
|
|
// on the same row (#1639): the build version (bottom-left) and the
|
|
// copyright notice (bottom-right). Each occupies the full-height `xl` bottom
|
|
// margin band (`height: xl` + flex centering) so the text sits vertically
|
|
// centered in it, and insets by `xl` horizontally to line up with the
|
|
// content's left/right margins. Both are grey, non-interactive (clicks pass
|
|
// through), and out of the tab/selection flow.
|
|
if (
|
|
props.variant === "versionBadge" ||
|
|
props.variant === "copyrightBadge"
|
|
) {
|
|
const horizontal =
|
|
props.variant === "versionBadge"
|
|
? { left: "var(--mantine-spacing-xl)" }
|
|
: { right: "var(--mantine-spacing-xl)" };
|
|
return {
|
|
root: {
|
|
position: "fixed",
|
|
bottom: 0,
|
|
height: "var(--mantine-spacing-xl)",
|
|
display: "flex",
|
|
alignItems: "center",
|
|
...horizontal,
|
|
zIndex: 100,
|
|
color: "var(--inspector-text-secondary)",
|
|
fontSize: "var(--mantine-font-size-xs)",
|
|
pointerEvents: "none",
|
|
userSelect: "none",
|
|
},
|
|
};
|
|
}
|
|
return { root: {} };
|
|
},
|
|
});
|