From cdb2443d8f62b67cd08ee4df62c1c15e5b671046 Mon Sep 17 00:00:00 2001
From: cynfo3000 <cynfo3000@cynfo.net>
Date: Tue, 10 Mar 2026 00:34:42 +0100
Subject: [PATCH] refactor: API-Keys in Einstellungen kompakter (gleicher Stil
 wie Kunden-Panel)

---
 frontend/src/pages/SettingsPage.jsx | 82 ++++++++++++++---------------
 1 file changed, 41 insertions(+), 41 deletions(-)

diff --git a/frontend/src/pages/SettingsPage.jsx b/frontend/src/pages/SettingsPage.jsx
index f9c8fd3..79289ba 100644
--- a/frontend/src/pages/SettingsPage.jsx
+++ b/frontend/src/pages/SettingsPage.jsx
@@ -349,55 +349,55 @@ function APIKeysSection() {
 
       {/* Key Liste */}
       {loading ? (
-        <div className="px-4 py-3 text-gray-500 text-sm">Laden...</div>
+        <div className="px-4 py-3 text-gray-500 text-xs">Laden...</div>
       ) : keys.length === 0 ? (
-        <div className="px-4 py-6 text-center text-gray-500 text-sm">Keine API-Keys vorhanden</div>
+        <div className="px-4 py-4 text-center text-gray-500 text-xs">Keine API-Keys vorhanden</div>
       ) : (
-        <div className="divide-y divide-gray-800">
+        <div className="divide-y divide-gray-800/60">
           {keys.map((k) => {
             const perm = PERM_LABELS[k.permissions] || PERM_LABELS.read
             const customer = k.customer_id ? customers.find(c => c.id === k.customer_id) : null
+            const lastUsedAgo = k.last_used
+              ? (() => {
+                  const s = (Date.now() - new Date(k.last_used)) / 1000
+                  if (s < 120) return 'gerade eben'
+                  if (s < 3600) return `${Math.floor(s/60)}m`
+                  if (s < 86400) return `${Math.floor(s/3600)}h`
+                  return `${Math.floor(s/86400)}d`
+                })()
+              : null
             return (
-            <div key={k.id} className="px-4 py-2.5 flex items-center justify-between">
-              <div className="min-w-0 flex-1">
-                <div className="flex items-center gap-2">
-                  <span className="text-sm text-white">{k.name}</span>
-                  <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded border leading-none ${perm.color}`}>
-                    {perm.label}
+              <div key={k.id} className="px-4 py-1.5 flex items-center gap-2.5 hover:bg-gray-800/30 group">
+                <span className={`text-[10px] font-bold px-1.5 py-0.5 rounded border leading-none w-16 text-center flex-shrink-0 ${perm.color}`}>
+                  {perm.label}
+                </span>
+                <span className="text-xs text-gray-300 flex-1 min-w-0 truncate">{k.name}</span>
+                {customer && (
+                  <span className="text-[10px] text-gray-600 flex-shrink-0 hidden sm:block">{customer.number}</span>
+                )}
+                <code className="text-xs text-gray-600 font-mono flex-shrink-0">
+                  {k.key.substring(0, 8)}…{k.key.substring(k.key.length - 4)}
+                </code>
+                {lastUsedAgo && (
+                  <span className="text-[10px] text-gray-700 flex-shrink-0 hidden md:block" title={`Zuletzt benutzt: ${new Date(k.last_used).toLocaleString('de-DE')}`}>
+                    {lastUsedAgo}
                   </span>
-                  {customer && (
-                    <span className="text-[10px] px-1.5 py-0.5 rounded border text-gray-400 bg-gray-800 border-gray-700 leading-none">
-                      {customer.number}
-                    </span>
-                  )}
-                </div>
-                <div className="flex items-center gap-3 mt-0.5">
-                  <span className="text-xs text-gray-600 font-mono">{k.key.substring(0, 8)}...{k.key.substring(k.key.length - 4)}</span>
-                  <button
-                    onClick={() => copyText(k.key, k.id)}
-                    className="text-gray-600 hover:text-orange-400 transition-colors"
-                    title="Key kopieren"
-                  >
-                    {copied === k.id ? <Check className="w-3 h-3 text-green-400" /> : <Copy className="w-3 h-3" />}
-                  </button>
-                  <span className="text-xs text-gray-600">
-                    Erstellt: {new Date(k.created_at).toLocaleDateString('de-DE')}
-                  </span>
-                  {k.last_used && (
-                    <span className="text-xs text-gray-600">
-                      Zuletzt: {new Date(k.last_used).toLocaleString('de-DE')}
-                    </span>
-                  )}
-                </div>
+                )}
+                <button
+                  onClick={() => copyText(k.key, k.id)}
+                  className="text-gray-600 hover:text-orange-400 transition-colors flex-shrink-0 opacity-0 group-hover:opacity-100"
+                  title="Key kopieren"
+                >
+                  {copied === k.id ? <Check className="w-3.5 h-3.5 text-green-400" /> : <Copy className="w-3.5 h-3.5" />}
+                </button>
+                <button
+                  onClick={() => handleDelete(k.id, k.name)}
+                  className="text-gray-700 hover:text-red-400 transition-colors flex-shrink-0 opacity-0 group-hover:opacity-100"
+                  title="Key loeschen"
+                >
+                  <Trash2 className="w-3.5 h-3.5" />
+                </button>
               </div>
-              <button
-                onClick={() => handleDelete(k.id, k.name)}
-                className="text-gray-500 hover:text-red-400 p-1 rounded hover:bg-gray-800 transition-colors ml-2"
-                title="Key loeschen"
-              >
-                <Trash2 className="w-4 h-4" />
-              </button>
-            </div>
             )
           })}
         </div>