refactor molecule components to use .withProps() subcomponents and extract inline code

- Add UnstyledButton listItem theme variant to replace inline style for border-radius
- Extract subcomponent constants with .withProps() across all molecules
- Replace raw <span /> with Mantine <Flex /> in ResourcePreviewPanel
- Extract inline template literals and expressions to named functions

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
cliffhall 2026-03-24 14:06:11 -04:00
commit 27186c2ff7

View file

@ -26,6 +26,15 @@ export interface ServerInfoContentProps {
oauthDetails?: { authUrl?: string; scopes?: string[]; accessToken?: string };
}
const ValueText = Text.withProps({
size: "sm",
fw: 600,
});
function formatScopes(scopes: string[]): string {
return scopes.join(", ");
}
export function ServerInfoContent({
name,
version,
@ -42,19 +51,13 @@ export function ServerInfoContent({
<SimpleGrid cols={2}>
<Text size="sm">Name</Text>
<Text size="sm" fw={600}>
{name}
</Text>
<ValueText>{name}</ValueText>
<Text size="sm">Version</Text>
<Text size="sm" fw={600}>
{version}
</Text>
<ValueText>{version}</ValueText>
<Text size="sm">Protocol</Text>
<Text size="sm" fw={600}>
{protocolVersion}
</Text>
<ValueText>{protocolVersion}</ValueText>
<Text size="sm">Transport</Text>
<Badge variant="outline">{transport}</Badge>
@ -105,9 +108,7 @@ export function ServerInfoContent({
{oauthDetails.scopes && oauthDetails.scopes.length > 0 && (
<SimpleGrid cols={2}>
<Text size="sm">Scopes</Text>
<Text size="sm" fw={600}>
{oauthDetails.scopes.join(", ")}
</Text>
<ValueText>{formatScopes(oauthDetails.scopes)}</ValueText>
</SimpleGrid>
)}
{oauthDetails.accessToken && (