feat(groups): implement group management for webhooks

Author: cmuench

_locales/de/messages.json

@@ -57,15 +57,9 @@
       }
     }
   },
-  "popupErrorCustomPayloadJsonParseError": {
-    "message": "Fehler beim Parsen des benutzerdefinierten Payloads. Fehler: $error$",
-    "description": "Fehler beim JSON Parsen.",
-    "placeholders": {
-      "error": {
-        "content": "$1",
-        "example": "Unexpected token in JSON at position 10"
-      }
-    }
+  "popupNoGroup": {
+    "message": "Keine Gruppe",
+    "description": "Bezeichnung für Webhooks ohne Gruppe im Popup."
   },
   "optionsTitle": {
     "message": "Webhook Konfiguration",
@@ -195,6 +189,54 @@
     "message": "Webhooks importieren",
     "description": "Button-Text zum Import von Webhooks aus einer Datei."
   },
+  "optionsGroupLabel": {
+    "message": "Gruppe:",
+    "description": "Label für die Webhook-Gruppenauswahl."
+  },
+  "optionsNoGroup": {
+    "message": "Keine Gruppe",
+    "description": "Option für Webhooks ohne Gruppe."
+  },
+  "optionsManageGroupsButton": {
+    "message": "Gruppen verwalten",
+    "description": "Schaltfläche zum Öffnen des Gruppenverwaltungsdialogs."
+  },
+  "optionsManageGroupsHeader": {
+    "message": "Gruppen verwalten",
+    "description": "Überschrift für den Gruppenverwaltungsdialog."
+  },
+  "optionsNewGroupNameLabel": {
+    "message": "Neuer Gruppenname:",
+    "description": "Beschriftung für das neue Gruppennamen-Eingabefeld."
+  },
+  "optionsNewGroupNamePlaceholder": {
+    "message": "Neuen Gruppennamen eingeben",
+    "description": "Platzhalter für das neue Gruppennamen-Eingabefeld."
+  },
+  "optionsAddGroupButton": {
+    "message": "Gruppe hinzufügen",
+    "description": "Schaltfläche zum Hinzufügen einer neuen Gruppe."
+  },
+  "optionsExistingGroupsHeader": {
+    "message": "Vorhandene Gruppen:",
+    "description": "Überschrift für die Liste vorhandener Gruppen."
+  },
+  "optionsEditGroupButton": {
+    "message": "Bearbeiten",
+    "description": "Schaltfläche zum Bearbeiten eines Gruppennamens."
+  },
+  "optionsSaveGroupButton": {
+    "message": "Speichern",
+    "description": "Schaltfläche zum Speichern eines Gruppennamens."
+  },
+  "optionsDeleteGroupButton": {
+    "message": "Löschen",
+    "description": "Schaltfläche zum Löschen einer Gruppe."
+  },
+  "optionsCloseManageGroupsButton": {
+    "message": "Schließen",
+    "description": "Schaltfläche zum Schließen des Gruppenverwaltungsdialogs."
+  },
   "optionsImportInfo": {
     "message": "Beim Import werden vorhandene Webhooks ersetzt.",
     "description": "Hinweistext neben dem Import-Button."

_locales/en/messages.json

@@ -57,15 +57,9 @@
       }
     }
   },
-  "popupErrorCustomPayloadJsonParseError": {
-    "message": "JSON Parse Error in Custom Payload! error: $error$",
-    "description": "Error when JSON parsing fails.",
-    "placeholders": {
-        "error": {
-            "content": "$1",
-            "example": "Unexpected token in JSON at position 10"
-        }
-    }
+  "popupNoGroup": {
+    "message": "No Group",
+    "description": "Label for webhooks without a group in the popup."
   },
   "optionsTitle": {
     "message": "Webhook Configuration",
@@ -195,6 +189,54 @@
     "message": "Import Webhooks",
     "description": "Button text to import webhooks from a file."
   },
+  "optionsGroupLabel": {
+    "message": "Group:",
+    "description": "Label for the webhook group selection."
+  },
+  "optionsNoGroup": {
+    "message": "No Group",
+    "description": "Option for webhooks without a group."
+  },
+  "optionsManageGroupsButton": {
+    "message": "Manage Groups",
+    "description": "Button to open the group management modal."
+  },
+  "optionsManageGroupsHeader": {
+    "message": "Manage Groups",
+    "description": "Header for the group management modal."
+  },
+  "optionsNewGroupNameLabel": {
+    "message": "New Group Name:",
+    "description": "Label for the new group name input."
+  },
+  "optionsNewGroupNamePlaceholder": {
+    "message": "Enter new group name",
+    "description": "Placeholder for the new group name input."
+  },
+  "optionsAddGroupButton": {
+    "message": "Add Group",
+    "description": "Button to add a new group."
+  },
+  "optionsExistingGroupsHeader": {
+    "message": "Existing Groups:",
+    "description": "Header for the existing groups list."
+  },
+  "optionsEditGroupButton": {
+    "message": "Edit",
+    "description": "Button to edit a group name."
+  },
+  "optionsSaveGroupButton": {
+    "message": "Save",
+    "description": "Button to save a group name."
+  },
+  "optionsDeleteGroupButton": {
+    "message": "Delete",
+    "description": "Button to delete a group."
+  },
+  "optionsCloseManageGroupsButton": {
+    "message": "Close",
+    "description": "Button to close the group management modal."
+  },
   "optionsImportInfo": {
     "message": "Importing replaces all existing webhooks.",
     "description": "Information text shown next to the import button."

options/options.css

@@ -97,6 +97,22 @@ button:hover {
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
 }
 
+#new-group-name {
+    margin-top: 8px;
+    width: calc(100% - 110px);
+    display: inline-block;
+}
+
+#add-new-group-btn {
+    margin-left: 10px;
+    padding: 12px 16px;
+    background-color: #8b5cf6;
+}
+
+#add-new-group-btn:hover {
+    background-color: #7c3aed;
+}
+
 /* Collapsible section styles */
 .collapsible-header {
     display: flex;
@@ -173,6 +189,19 @@ button:hover {
     border-bottom: none;
 }
 
+#webhook-list li.group-header {
+    background-color: #f0f4f8;
+    font-weight: bold;
+    color: #1e40af;
+    padding: 10px 16px;
+    border-bottom: 2px solid #c7d2fe;
+    font-size: 1.1em;
+}
+
+#webhook-list li.webhook-item {
+    margin-left: 20px;
+}
+
 .drag-handle {
     cursor: grab;
     user-select: none;
@@ -320,3 +349,164 @@ button:hover {
     margin: 0;
     color: #4b5563;
 }
+
+/* Group controls */
+.group-controls {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+}
+
+#create-group-btn {
+    background-color: #8b5cf6;
+    padding: 12px 16px;
+}
+
+#create-group-btn:hover {
+    background-color: #7c3aed;
+}
+
+/* Manage Groups button */
+#manage-groups-btn {
+    background-color: #10b981;
+    margin-bottom: 20px;
+}
+
+#manage-groups-btn:hover {
+    background-color: #059669;
+}
+
+/* Modal styles */
+.modal {
+    position: fixed;
+    z-index: 1000;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-content {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    width: 90%;
+    max-width: 500px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+    position: relative;
+}
+
+.close, .close-manage-groups {
+    position: absolute;
+    right: 15px;
+    top: 15px;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+    color: #6b7280;
+}
+
+.close:hover, .close-manage-groups:hover {
+    color: #1f2937;
+}
+
+.modal-actions {
+    display: flex;
+    justify-content: flex-end;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+/* Group management styles */
+#new-group-name {
+    width: calc(100% - 110px);
+    display: inline-block;
+    margin-right: 10px;
+}
+
+#add-group-btn {
+    padding: 12px 16px;
+    background-color: #8b5cf6;
+}
+
+#add-group-btn:hover {
+    background-color: #7c3aed;
+}
+
+#groups-list {
+    list-style-type: none;
+    padding: 0;
+    margin: 10px 0;
+}
+
+.group-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 10px;
+    border-bottom: 1px solid #e5e7eb;
+    user-select: none;
+}
+
+.group-item.dragging {
+    opacity: 0.5;
+    background-color: #f3f4f6;
+}
+
+.group-item.drag-over {
+    border-top: 2px solid #3b82f6;
+}
+
+.drag-handle {
+    cursor: grab;
+    user-select: none;
+    font-size: 1.2em;
+    color: #6b7280;
+    padding-right: 10px;
+}
+
+.drag-handle:active {
+    cursor: grabbing;
+}
+
+.group-item input {
+    flex: 1;
+    margin-right: 10px;
+}
+
+.group-actions {
+    display: flex;
+    gap: 5px;
+}
+
+.group-actions button {
+    padding: 6px 12px;
+    font-size: 0.9em;
+}
+
+.edit-group-name {
+    background-color: #f3f4f6;
+    border: 1px solid #d1d5db;
+    border-radius: 4px;
+    padding: 6px;
+}
+
+.save-group-name {
+    background-color: #10b981;
+}
+
+.save-group-name:hover {
+    background-color: #059669;
+}
+
+.delete-group {
+    background-color: #ef4444;
+}
+
+.delete-group:hover {
+    background-color: #dc2626;
+}