Files
WP-LIT-MCP/src/Admin/ConnectionTab.php
T
janniclas.loosenandClaude Opus 5.5 843f45aeec feat: admin settings page UI/UX pass with WordPress-native patterns
- Header: h1 + logo in a wrapping flex row, hr.wp-header-end before the tabs,
  aria-current on the active tab; own CSS/JS enqueued only on this screen.
- Verbindung: ordered "So verbindest du Claude" steps, copy button (core
  clipboard.js + wp.a11y.speak), Site-Health-style status list, German details.
- Zugriff: roles as form-table fieldset, connections with site date format,
  empty-state row, confirm on revoke; ConnectionUsage records last use via
  WP_Application_Passwords::record_application_password_usage (once a day).
- Tools: plain-language legend, counter as inline notice, groups as core
  postboxes (postbox.js toggles, per-user closed state, summary when closed),
  fixed column widths with new "Art" column, submit above and below.
- Protokoll: site-timezone times with UTC tooltip, result icons, filters with
  labels in the list table nav, retention link to Limits.
- Limits: short labels with units and descriptions; snapshot count hidden but
  preserved.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
2026-09-26 16:50:58 +02:00

83 lines
3.0 KiB
PHP

<?php
declare(strict_types=1);
namespace LIT\MCP\Admin;
final class ConnectionTab implements AdminTab
{
public function __construct(private ConnectionStatus $status)
{
}
public function slug(): string
{
return 'verbindung';
}
public function label(): string
{
return __('Verbindung', 'wp-lit-mcp');
}
public function registerSettings(): void
{
}
public function registerActions(): void
{
}
public function render(): void
{
echo '<h2>' . esc_html__('So verbindest du Claude', 'wp-lit-mcp') . '</h2>';
echo '<ol class="lit-mcp-steps"><li>';
printf(
'<label for="lit-mcp-url">%s</label>'
. '<span class="lit-mcp-copy-row copy-to-clipboard-container">'
. '<input id="lit-mcp-url" type="text" class="large-text code" readonly value="%s">'
. '<button type="button" class="button lit-mcp-copy" data-clipboard-target="#lit-mcp-url">%s</button>'
. '<span class="success hidden" aria-hidden="true">%s</span></span>',
esc_html__('Server-URL kopieren:', 'wp-lit-mcp'),
esc_attr(ConnectionStatus::serverUrl()),
esc_html__('URL kopieren', 'wp-lit-mcp'),
esc_html__('Kopiert!', 'wp-lit-mcp')
);
echo '</li><li>' . esc_html__(
'In claude.ai unter Einstellungen → Connectors auf „Add custom connector“ klicken und die URL einfügen.',
'wp-lit-mcp'
) . '</li><li>';
printf(
/* translators: %s: link to the "Zugriff" tab */
esc_html__('Anmelden und den Zugriff bestätigen. Danach erscheint die Verbindung unter %s.', 'wp-lit-mcp'),
sprintf('<a href="%s">%s</a>', esc_url(SettingsPage::url('zugriff')), esc_html__('Zugriff', 'wp-lit-mcp'))
);
echo '</li></ol>';
echo '<h2>' . esc_html__('Status', 'wp-lit-mcp') . '</h2><ul class="lit-mcp-status">';
foreach ($this->status->checks(true) as $check) {
[$icon, $state] = match ($check['ok']) {
true => ['yes-alt', __('In Ordnung:', 'wp-lit-mcp')],
false => ['dismiss', __('Problem:', 'wp-lit-mcp')],
default => ['warning', __('Hinweis:', 'wp-lit-mcp')],
};
printf(
'<li class="lit-mcp-status-%1$s"><span class="dashicons dashicons-%1$s" aria-hidden="true"></span>'
. '<span class="screen-reader-text">%2$s</span> <strong>%3$s</strong>'
. ' <span class="lit-mcp-status-detail">%4$s</span></li>',
esc_attr($icon),
esc_html($state),
esc_html($check['label']),
esc_html($check['message'])
);
}
echo '</ul>';
printf(
'<p class="description">%s <a href="%s">%s</a>.</p>',
esc_html__('Weitere Prüfungen unter', 'wp-lit-mcp'),
esc_url(admin_url('site-health.php')),
esc_html__('Werkzeuge → Website-Zustand', 'wp-lit-mcp')
);
}
}