From 36477c915a23f4d9b639ce4718ed8af493e259a3 Mon Sep 17 00:00:00 2001
From: boban <boban@git.bave.dev>
Date: Sat, 13 Jun 2026 11:28:40 +0200
Subject: [PATCH] =?UTF-8?q?style(hardening):=20calmer,=20scannable=20check?=
 =?UTF-8?q?list=20=E2=80=94=20one=20lock-glyph=20state=20signal?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The hardening checklist clashed visually (thick left border + filled status pill +
orange/ghost button on every row — too many competing colors). Redesign to a single
calm state signal:
- a leading lock glyph carries the state: closed/green = sicher, open/amber = offen
  (new lock + lock-open Lucide icons);
- inline "sicher"/"offen" word next to the label + mono detail line; no left border,
  no filled pill;
- the toggle button is neutral — secondary to make secure, quiet ghost to loosen —
  so no accent/warning colors fight the state. Subtle row hover added.

R15: `codex review --uncommitted` → clean (cosmetic, hardening-toggle behavior
preserved). R12: server detail 200 / 0 console errors; 3 sicher / 3 offen render.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 resources/views/components/icon.blade.php     |  2 ++
 .../views/livewire/servers/show.blade.php     | 36 +++++++++++--------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/resources/views/components/icon.blade.php b/resources/views/components/icon.blade.php
index decfe1f..129d9b0 100644
--- a/resources/views/components/icon.blade.php
+++ b/resources/views/components/icon.blade.php
@@ -5,6 +5,8 @@
         'menu'       => '<path d="M4 12h16"/><path d="M4 6h16"/><path d="M4 18h16"/>',
         'chevron-left' => '<path d="m15 18-6-6 6-6"/>',
         'tag'        => '<path d="M12.586 2.586A2 2 0 0 0 11.172 2H4a2 2 0 0 0-2 2v7.172a2 2 0 0 0 .586 1.414l8.704 8.704a2.426 2.426 0 0 0 3.42 0l6.58-6.58a2.426 2.426 0 0 0 0-3.42z"/><circle cx="7.5" cy="7.5" r=".5" fill="currentColor"/>',
+        'lock'       => '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/>',
+        'lock-open'  => '<rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 9.9-1"/>',
         'git-branch' => '<line x1="6" x2="6" y1="3" y2="15"/><circle cx="18" cy="6" r="3"/><circle cx="6" cy="18" r="3"/><path d="M18 9a9 9 0 0 1-9 9"/>',
         'x'          => '<path d="M18 6 6 18"/><path d="m6 6 12 12"/>',
         'dashboard'  => '<rect width="7" height="9" x="3" y="3" rx="1"/><rect width="7" height="5" x="14" y="3" rx="1"/><rect width="7" height="9" x="14" y="12" rx="1"/><rect width="7" height="5" x="3" y="16" rx="1"/>',
diff --git a/resources/views/livewire/servers/show.blade.php b/resources/views/livewire/servers/show.blade.php
index e0c299e..d7d38d6 100644
--- a/resources/views/livewire/servers/show.blade.php
+++ b/resources/views/livewire/servers/show.blade.php
@@ -166,23 +166,31 @@
             <x-panel title="Sicherheit" subtitle="Hardening-Checkliste" :padded="false">
                 <div class="divide-y divide-line">
                     @foreach ($hardening as $check)
-                        <div @class([
-                            'flex items-center gap-3 border-l-2 px-4 py-3 sm:px-5',
-                            'border-online' => $check['secure'],
-                            'border-warning' => ! $check['secure'],
-                        ])>
+                        {{-- One calm state signal: a lock glyph (geschlossen = sicher, offen = offen). --}}
+                        <div class="flex items-center gap-3.5 px-4 py-3 transition-colors hover:bg-raised/40 sm:px-5">
+                            <span @class([
+                                'grid h-9 w-9 shrink-0 place-items-center rounded-md border',
+                                'border-online/25 bg-online/10 text-online' => $check['secure'],
+                                'border-warning/25 bg-warning/10 text-warning' => ! $check['secure'],
+                            ])>
+                                <x-icon :name="$check['secure'] ? 'lock' : 'lock-open'" class="h-4 w-4" />
+                            </span>
                             <div class="min-w-0 flex-1">
-                                <p class="truncate text-sm text-ink">{{ $check['label'] }}</p>
+                                <p class="flex items-center gap-2 truncate text-sm text-ink">
+                                    {{ $check['label'] }}
+                                    <span @class([
+                                        'shrink-0 font-mono text-[10px] uppercase tracking-wider',
+                                        'text-online' => $check['secure'],
+                                        'text-warning' => ! $check['secure'],
+                                    ])>{{ $check['secure'] ? 'sicher' : 'offen' }}</span>
+                                </p>
                                 <p class="truncate font-mono text-[11px] text-ink-3">{{ $check['detail'] }}</p>
                             </div>
-                            <div class="flex shrink-0 items-center gap-2">
-                                <x-status-pill :status="$check['secure'] ? 'online' : 'warning'">{{ $check['secure'] ? 'OK' : 'Offen' }}</x-status-pill>
-                                {{-- Bidirectional toggle: Aktivieren when the feature is off, Deaktivieren when on. --}}
-                                <x-btn :variant="$check['secure'] ? 'ghost' : 'accent'" size="sm"
-                                       wire:click="$dispatch('openModal', { component: 'modals.hardening-action', arguments: { serverId: {{ $server->id }}, action: '{{ $check['key'] }}', enable: {{ $check['featureOn'] ? 'false' : 'true' }} } })">
-                                    {{ $check['featureOn'] ? 'Deaktivieren' : 'Aktivieren' }}
-                                </x-btn>
-                            </div>
+                            {{-- Toggle: secondary to make secure, quiet ghost to loosen. --}}
+                            <x-btn :variant="$check['secure'] ? 'ghost' : 'secondary'" size="sm" class="shrink-0"
+                                   wire:click="$dispatch('openModal', { component: 'modals.hardening-action', arguments: { serverId: {{ $server->id }}, action: '{{ $check['key'] }}', enable: {{ $check['featureOn'] ? 'false' : 'true' }} } })">
+                                {{ $check['featureOn'] ? 'Deaktivieren' : 'Aktivieren' }}
+                            </x-btn>
                         </div>
                     @endforeach
                 </div>