cleanup

app/assets/css/app.css

@@ -76,6 +76,108 @@ main {
     padding: 24px 32px 48px;
 }
 
+/* Shared components -------------------------------------------------- */
+.filter-form {
+    margin: 20px 0;
+}
+
+.filter-form form {
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    align-items: center;
+}
+
+.filter-form input,
+.filter-form select {
+    padding: 8px 12px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+    background: #fff;
+}
+
+.search-input {
+    flex: 1;
+    min-width: 250px;
+}
+
+.connections-container {
+    padding: 20px;
+    max-width: 1200px;
+    margin: 0 auto;
+    background: #fff;
+    border: 1px solid #e0e6ef;
+    border-radius: 12px;
+    box-shadow: 0 12px 40px rgba(15, 26, 45, 0.08);
+}
+
+.connections-list {
+    width: 100%;
+    border-collapse: collapse;
+    margin: 15px 0;
+}
+
+.connections-list th {
+    background: #f5f5f5;
+    padding: 12px;
+    text-align: left;
+    border-bottom: 2px solid #ddd;
+    font-weight: 600;
+    font-size: 0.9rem;
+    letter-spacing: 0.02em;
+}
+
+.connections-list td {
+    padding: 12px;
+    border-bottom: 1px solid #ddd;
+    font-size: 0.95rem;
+}
+
+.connections-list tr:hover {
+    background: #fafafa;
+}
+
+.status-cell {
+    width: 140px;
+}
+
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    padding: 4px 10px;
+    border-radius: 999px;
+    font-size: 0.8rem;
+    font-weight: 600;
+}
+
+.status-badge-warning {
+    background: #fff4e5;
+    color: #bb4c26;
+    border: 1px solid #f9c8a3;
+}
+
+.status-badge-ok {
+    background: #e6f4ea;
+    color: #1b7333;
+    border: 1px solid #a6d4b8;
+}
+
+.empty-state {
+    text-align: center;
+    padding: 40px 20px;
+    background: #f9f9f9;
+    border: 1px solid #eee;
+    border-radius: 8px;
+}
+
+@media (max-width: 900px) {
+    .connections-list th,
+    .connections-list td {
+        font-size: 0.85rem;
+    }
+}
+
 @media (max-width: 900px) {
     .app-header {
         flex-direction: column;

app/assets/js/app.js

@@ -92,7 +92,17 @@ function initEventHandlers() {
         });
     }
 
-    // TODO: Weitere Event-Handler (Löschen, Import, Export, Filter)
+    // TODO: Weitere Event-Handler (Import, Export, Filter)
+
+    document.querySelectorAll('[data-confirm-delete]').forEach((btn) => {
+        btn.addEventListener('click', (event) => {
+            event.preventDefault();
+            const message = btn.getAttribute('data-confirm-message') || 'Aktion ausführen?';
+            if (confirm(message)) {
+                alert(btn.getAttribute('data-confirm-feedback') || 'Diese Funktion ist noch nicht verfügbar.');
+            }
+        });
+    });
 }
 
 // =========================

app/modules/connections/list.php

@@ -111,11 +111,20 @@ $devices = $sql->get("SELECT id, name FROM devices ORDER BY name", "", []);
                 <th>Nach (Gerät → Port)</th>
                 <th>VLANs</th>
                 <th>Beschreibung</th>
+                <th>Status</th>
                 <th>Aktionen</th>
             </tr>
         </thead>
         <tbody>
             <?php foreach ($connections as $conn): ?>
+            <?php
+                $comment = trim($conn['comment'] ?? '');
+                $hasMissingInfo = empty($conn['device_a_name']) || empty($conn['device_b_name'])
+                    || empty($conn['port_a_name']) || empty($conn['port_b_name']);
+                $commentLower = mb_strtolower($comment, 'UTF-8');
+                $warningFromComment = preg_match('/warn|achtung|critical/', $commentLower);
+                $hasWarning = $hasMissingInfo || $warningFromComment;
+            ?>
             <tr>
                 <td>
                     <strong><?php echo htmlspecialchars($conn['device_a_name'] ?? 'N/A'); ?></strong><br>
@@ -143,6 +152,17 @@ $devices = $sql->get("SELECT id, name FROM devices ORDER BY name", "", []);
                 <td>
                     <small><?php echo htmlspecialchars($conn['comment'] ?? ''); ?></small>
                 </td>
+                <td class="status-cell">
+                    <?php if ($hasWarning): ?>
+                        <span class="status-badge status-badge-warning" title="Unvollständige oder kritische Verbindung">
+                            ⚠️ Warnung
+                        </span>
+                    <?php else: ?>
+                        <span class="status-badge status-badge-ok" title="Verbindung vollständig">
+                            ✔️ OK
+                        </span>
+                    <?php endif; ?>
+                </td>
 
                 <td class="actions">
                     <a href="?module=connections&action=edit&id=<?php echo $conn['id']; ?>" class="button button-small">Bearbeiten</a>