style: add utility admin interface

2026-05-05 10:57:14 +02:00 · 2026-05-05 10:57:14 +02:00 · e3517c3fcd
commit e3517c3fcd
parent c409b957c2
10 changed files with 468 additions and 73 deletions
--- a/.gitignore
+++ b/.gitignore
@ -7,6 +7,8 @@
 /public/bundles/
 /var/
 /vendor/
+/.superpowers/
+/.playwright-mcp/
 ###< symfony/framework-bundle ###

 ###> phpunit/phpunit ###
--- a/public/admin.css
+++ b/public/admin.css
@ -0,0 +1,322 @@
+:root {
+    color-scheme: light;
+    --admin-bg: #f6f7f9;
+    --admin-panel: #ffffff;
+    --admin-panel-soft: #eef1f5;
+    --admin-text: #172033;
+    --admin-muted: #647083;
+    --admin-border: #dfe4ec;
+    --admin-border-soft: #edf0f4;
+    --admin-primary: #172033;
+    --admin-primary-hover: #26344d;
+    --admin-danger: #b42318;
+    --admin-danger-soft: #fff1f0;
+    --admin-success: #0d7a4f;
+    --admin-success-soft: #ecfdf3;
+}
+
+* {
+    box-sizing: border-box;
+}
+
+body.admin-page,
+body.admin-auth {
+    margin: 0;
+    min-height: 100vh;
+    background: var(--admin-bg);
+    color: var(--admin-text);
+    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+}
+
+a {
+    color: inherit;
+}
+
+.admin-shell {
+    width: min(1440px, calc(100% - 48px));
+    margin: 0 auto;
+    padding: 32px 0;
+}
+
+.auth-shell {
+    display: grid;
+    min-height: 100vh;
+    place-items: center;
+    padding: 24px;
+}
+
+.admin-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    margin-bottom: 18px;
+}
+
+.admin-toolbar h1,
+.auth-card h1 {
+    margin: 0;
+    color: var(--admin-text);
+    font-size: 28px;
+    font-weight: 700;
+    letter-spacing: 0;
+}
+
+.eyebrow {
+    margin: 0 0 4px;
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0;
+    text-transform: uppercase;
+}
+
+.toolbar-actions,
+.row-actions {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.row-actions form {
+    margin: 0;
+}
+
+.button {
+    display: inline-flex;
+    min-height: 36px;
+    align-items: center;
+    justify-content: center;
+    gap: 6px;
+    padding: 8px 11px;
+    border: 1px solid transparent;
+    border-radius: 6px;
+    font: inherit;
+    font-weight: 650;
+    line-height: 1.2;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+.button-primary {
+    background: var(--admin-primary);
+    color: #ffffff;
+}
+
+.button-primary:hover {
+    background: var(--admin-primary-hover);
+}
+
+.button-secondary,
+.button-ghost {
+    border-color: var(--admin-border);
+    background: #ffffff;
+    color: var(--admin-text);
+}
+
+.button-secondary:hover,
+.button-ghost:hover {
+    background: var(--admin-panel-soft);
+}
+
+.button-danger {
+    border-color: #f3b4ae;
+    background: var(--admin-danger-soft);
+    color: var(--admin-danger);
+}
+
+.button-danger:hover {
+    background: #ffe3e0;
+}
+
+.table-panel,
+.admin-card {
+    overflow: hidden;
+    border: 1px solid var(--admin-border);
+    border-radius: 8px;
+    background: var(--admin-panel);
+    box-shadow: 0 16px 40px rgba(23, 32, 51, 0.06);
+}
+
+.admin-table {
+    width: 100%;
+    border-collapse: collapse;
+}
+
+.admin-table th {
+    background: var(--admin-panel-soft);
+    color: var(--admin-muted);
+    font-size: 11px;
+    font-weight: 800;
+    letter-spacing: 0;
+    text-align: left;
+    text-transform: uppercase;
+}
+
+.admin-table th,
+.admin-table td {
+    padding: 11px 12px;
+    border-bottom: 1px solid var(--admin-border-soft);
+    vertical-align: top;
+}
+
+.admin-table tbody tr:last-child td {
+    border-bottom: 0;
+}
+
+.admin-table code {
+    color: #243149;
+    font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
+    font-size: 12px;
+}
+
+.text-muted {
+    color: var(--admin-muted);
+}
+
+.error-cell {
+    max-width: 260px;
+    color: var(--admin-danger);
+    word-break: break-word;
+}
+
+.status-badge {
+    display: inline-flex;
+    min-width: 42px;
+    justify-content: center;
+    padding: 3px 8px;
+    border-radius: 999px;
+    font-size: 12px;
+    font-weight: 700;
+}
+
+.status-success {
+    background: var(--admin-success-soft);
+    color: var(--admin-success);
+}
+
+.status-muted {
+    background: var(--admin-panel-soft);
+    color: var(--admin-muted);
+}
+
+.empty-state {
+    color: var(--admin-muted);
+    text-align: center;
+}
+
+.alert {
+    margin: 0 0 14px;
+    padding: 10px 12px;
+    border: 1px solid var(--admin-border);
+    border-radius: 6px;
+    background: #ffffff;
+    font-weight: 600;
+}
+
+.alert-success {
+    border-color: #b7e4ce;
+    background: var(--admin-success-soft);
+    color: var(--admin-success);
+}
+
+.alert-error {
+    border-color: #f3b4ae;
+    background: var(--admin-danger-soft);
+    color: var(--admin-danger);
+}
+
+.auth-card {
+    width: min(100%, 380px);
+    padding: 24px;
+}
+
+.admin-form-shell {
+    width: min(760px, calc(100% - 48px));
+}
+
+.admin-form {
+    display: grid;
+    gap: 14px;
+}
+
+.admin-form > div {
+    display: grid;
+    gap: 6px;
+}
+
+.admin-form label {
+    color: var(--admin-text);
+    font-weight: 700;
+}
+
+.admin-form input[type="text"],
+.admin-form input[type="password"],
+.admin-form input[type="url"] {
+    width: 100%;
+    min-height: 38px;
+    padding: 8px 10px;
+    border: 1px solid var(--admin-border);
+    border-radius: 6px;
+    background: #ffffff;
+    color: var(--admin-text);
+    font: inherit;
+}
+
+.admin-form input[type="text"]:focus,
+.admin-form input[type="password"]:focus,
+.admin-form input[type="url"]:focus {
+    border-color: var(--admin-primary);
+    outline: 3px solid rgba(23, 32, 51, 0.12);
+}
+
+.admin-form input[type="checkbox"] {
+    width: 16px;
+    height: 16px;
+    accent-color: var(--admin-primary);
+}
+
+.admin-form .help-text,
+.admin-form .form-text,
+.admin-form small {
+    color: var(--admin-muted);
+    font-size: 12px;
+}
+
+.admin-form ul {
+    margin: 0;
+    padding-left: 18px;
+    color: var(--admin-danger);
+}
+
+@media (max-width: 900px) {
+    .admin-shell,
+    .admin-form-shell {
+        width: min(100% - 24px, 760px);
+        padding: 18px 0;
+    }
+
+    .admin-toolbar {
+        align-items: flex-start;
+        flex-direction: column;
+    }
+
+    .toolbar-actions {
+        width: 100%;
+    }
+
+    .toolbar-actions .button {
+        flex: 1 1 auto;
+    }
+
+    .table-panel {
+        overflow-x: auto;
+    }
+
+    .admin-table {
+        min-width: 980px;
+    }
+}
--- a/templates/admin/base.html.twig
+++ b/templates/admin/base.html.twig
@ -0,0 +1,8 @@
+{% extends 'base.html.twig' %}
+
+{% block stylesheets %}
+    {{ parent() }}
+    <link rel="stylesheet" href="{{ asset('admin.css') }}">
+{% endblock %}
+
+{% block body_class %}admin-page{% endblock %}
--- a/templates/admin/dashboard.html.twig
+++ b/templates/admin/dashboard.html.twig
@ -1,23 +1,29 @@
-{% extends 'base.html.twig' %}
+{% extends 'admin/base.html.twig' %}

 {% block title %}Admin{% endblock %}

 {% block body %}
-    <main>
+    <main class="admin-shell">
+        <header class="admin-toolbar">
+            <div>
+                <p class="eyebrow">Administration</p>
                <h1>Mappings</h1>
-        <p>
-            <a href="{{ path('admin_mapping_new') }}">Nouveau mapping</a>
-            <a href="{{ path('admin_settings') }}">Configuration</a>
-        </p>
+            </div>
+            <nav class="toolbar-actions" aria-label="Actions admin">
+                <a class="button button-primary" href="{{ path('admin_mapping_new') }}">Nouveau mapping</a>
+                <a class="button button-secondary" href="{{ path('admin_settings') }}">Configuration</a>
+            </nav>
+        </header>

        {% for message in app.flashes('success') %}
-            <p>{{ message }}</p>
+            <p class="alert alert-success">{{ message }}</p>
        {% endfor %}
        {% for message in app.flashes('error') %}
-            <p>{{ message }}</p>
+            <p class="alert alert-error">{{ message }}</p>
        {% endfor %}

-        <table>
+        <section class="table-panel" aria-label="Mappings">
+            <table class="admin-table">
                <thead>
                    <tr>
                        <th>Chemin public</th>
@ -34,32 +40,39 @@
                <tbody>
                    {% for mapping in mappings %}
                        <tr>
-                        <td>{{ mapping.publicPath }}</td>
-                        <td>{{ mapping.repositoryUrl }}</td>
-                        <td>{{ mapping.gitRef }}</td>
-                        <td>{{ mapping.repositoryFilePath }}</td>
-                        <td>{{ mapping.active ? 'oui' : 'non' }}</td>
-                        <td>{{ mapping.lastSyncStatus }}</td>
-                        <td>{{ mapping.lastSuccessfulSyncAt ? mapping.lastSuccessfulSyncAt|date('Y-m-d H:i:s') : '' }}</td>
-                        <td>{{ mapping.lastSyncError }}</td>
+                            <td><code>{{ mapping.publicPath }}</code></td>
+                            <td class="text-muted">{{ mapping.repositoryUrl }}</td>
+                            <td><code>{{ mapping.gitRef }}</code></td>
+                            <td><code>{{ mapping.repositoryFilePath }}</code></td>
                            <td>
-                            <a href="{{ path('admin_mapping_edit', {id: mapping.id}) }}">Modifier</a>
+                                <span class="status-badge {{ mapping.active ? 'status-success' : 'status-muted' }}">
+                                    {{ mapping.active ? 'oui' : 'non' }}
+                                </span>
+                            </td>
+                            <td>{{ mapping.lastSyncStatus ?: 'jamais' }}</td>
+                            <td>{{ mapping.lastSuccessfulSyncAt ? mapping.lastSuccessfulSyncAt|date('Y-m-d H:i:s') : '' }}</td>
+                            <td class="error-cell">{{ mapping.lastSyncError }}</td>
+                            <td>
+                                <div class="row-actions">
+                                    <a class="button button-ghost" href="{{ path('admin_mapping_edit', {id: mapping.id}) }}">Modifier</a>
                                    <form method="post" action="{{ path('admin_mapping_sync', {id: mapping.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('sync_mapping_' ~ mapping.id) }}">
-                                <button type="submit">Synchroniser</button>
+                                        <button class="button button-secondary" type="submit">Synchroniser</button>
                                    </form>
                                    <form method="post" action="{{ path('admin_mapping_delete', {id: mapping.id}) }}">
                                        <input type="hidden" name="_token" value="{{ csrf_token('delete_mapping_' ~ mapping.id) }}">
-                                <button type="submit">Supprimer</button>
+                                        <button class="button button-danger" type="submit">Supprimer</button>
                                    </form>
+                                </div>
                            </td>
                        </tr>
                    {% else %}
                        <tr>
-                        <td colspan="9">Aucun mapping.</td>
+                            <td class="empty-state" colspan="9">Aucun mapping.</td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
+        </section>
    </main>
 {% endblock %}
--- a/templates/admin/login.html.twig
+++ b/templates/admin/login.html.twig
@ -1,19 +1,23 @@
-{% extends 'base.html.twig' %}
+{% extends 'admin/base.html.twig' %}

 {% block title %}Admin login{% endblock %}
+{% block body_class %}admin-auth{% endblock %}

 {% block body %}
-    <main>
-        <h1>Admin login</h1>
+    <main class="auth-shell">
+        <section class="admin-card auth-card">
+            <p class="eyebrow">Administration</p>
+            <h1>Connexion</h1>

            {% if error %}
-            <p>{{ error.messageKey|trans(error.messageData, 'security') }}</p>
+                <p class="alert alert-error">{{ error.messageKey|trans(error.messageData, 'security') }}</p>
            {% endif %}

-        {{ form_start(loginForm) }}
+            {{ form_start(loginForm, { attr: { class: 'admin-form' } }) }}
                {{ form_row(loginForm.username) }}
                {{ form_row(loginForm.password) }}
-            <button type="submit">Sign in</button>
+                <button class="button button-primary" type="submit">Sign in</button>
            {{ form_end(loginForm) }}
+        </section>
    </main>
 {% endblock %}
--- a/templates/admin/mapping_form.html.twig
+++ b/templates/admin/mapping_form.html.twig
@ -1,19 +1,27 @@
-{% extends 'base.html.twig' %}
+{% extends 'admin/base.html.twig' %}

 {% block title %}{{ title }}{% endblock %}

 {% block body %}
-    <main>
+    <main class="admin-shell admin-form-shell">
+        <header class="admin-toolbar">
+            <div>
+                <p class="eyebrow">Administration</p>
                <h1>{{ title }}</h1>
+            </div>
+            <a class="button button-secondary" href="{{ path('admin_dashboard') }}">Retour aux mappings</a>
+        </header>

-        {{ form_start(form) }}
+        <section class="admin-card">
+        {{ form_start(form, { attr: { class: 'admin-form' } }) }}
            {{ form_row(form.publicPath) }}
            {{ form_row(form.repositoryUrl) }}
            {{ form_row(form.gitRef) }}
            {{ form_row(form.repositoryFilePath) }}
            {{ form_row(form.accessToken) }}
            {{ form_row(form.active) }}
-            <button type="submit">Enregistrer</button>
+            <button class="button button-primary" type="submit">Enregistrer</button>
        {{ form_end(form) }}
+        </section>
    </main>
 {% endblock %}
--- a/templates/admin/settings.html.twig
+++ b/templates/admin/settings.html.twig
@ -1,17 +1,25 @@
-{% extends 'base.html.twig' %}
+{% extends 'admin/base.html.twig' %}

 {% block title %}Configuration{% endblock %}

 {% block body %}
-    <main>
+    <main class="admin-shell admin-form-shell">
+        <header class="admin-toolbar">
+            <div>
+                <p class="eyebrow">Administration</p>
                <h1>Configuration</h1>
+            </div>
+            <a class="button button-secondary" href="{{ path('admin_dashboard') }}">Retour aux mappings</a>
+        </header>

-        {{ form_start(form) }}
+        <section class="admin-card">
+        {{ form_start(form, { attr: { class: 'admin-form' } }) }}
            {{ form_row(form.rootRedirectUrl, {
                label: 'URL de redirection de /',
                help: 'Laisser vide pour rediriger vers /admin.'
            }) }}
-            <button type="submit">Enregistrer</button>
+            <button class="button button-primary" type="submit">Enregistrer</button>
        {{ form_end(form) }}
+        </section>
    </main>
 {% endblock %}
--- a/templates/base.html.twig
+++ b/templates/base.html.twig
@ -17,7 +17,7 @@
        <script src="https://cdn.jsdelivr.net/npm/frankenphp-hot-reload/+esm" type="module"></script>
        {% endif %}
    </head>
-    <body>
+    <body class="{% block body_class %}{% endblock %}">
        {% block body %}{% endblock %}
    </body>
 </html>
--- a/tests/Controller/Admin/AuthControllerTest.php
+++ b/tests/Controller/Admin/AuthControllerTest.php
@ -35,4 +35,13 @@ final class AuthControllerTest extends DatabaseWebTestCase

        self::assertResponseRedirects('/admin');
    }
+
+    public function testLoginUsesUtilityAdminLayout(): void
+    {
+        $this->client->request('GET', '/admin/login');
+
+        self::assertSelectorExists('body.admin-auth');
+        self::assertSelectorExists('.admin-card');
+        self::assertSelectorExists('.button-primary');
+    }
 }
--- a/tests/Controller/Admin/ScriptMappingControllerTest.php
+++ b/tests/Controller/Admin/ScriptMappingControllerTest.php
@ -36,6 +36,27 @@ final class ScriptMappingControllerTest extends DatabaseWebTestCase
        self::assertResponseRedirects('/admin/login');
    }

+    public function testDashboardUsesUtilityAdminLayout(): void
+    {
+        $this->loginAsAdmin();
+
+        $mapping = (new ScriptMapping())
+            ->setPublicPath('mcp/graylog/install.sh')
+            ->setRepositoryUrl('https://forge.lclr.dev/AI/graylog-mcp.git')
+            ->setGitRef('main')
+            ->setRepositoryFilePath('install.sh')
+            ->setActive(true);
+        $this->entityManager->persist($mapping);
+        $this->entityManager->flush();
+
+        $this->client->request('GET', '/admin');
+
+        self::assertSelectorExists('body.admin-page');
+        self::assertSelectorExists('.admin-toolbar');
+        self::assertSelectorExists('.admin-table');
+        self::assertSelectorExists('.status-badge');
+    }
+
    public function testAdminCanCreateMappingWithNormalizedPaths(): void
    {
        $this->loginAsAdmin();