Tweak CSS in the group form, make sure channel's name is preloaded

hc/front/views.py

@@ -2483,9 +2483,11 @@ def group_form(request: HttpRequest, channel: Channel) -> HttpResponse:
     elif adding:
         form = forms.GroupForm(project=channel.project)
     else:
-        # Filter out unavailable channsl
+        # Filter out unavailable channels
         channels = list(channel.group_channels.values_list("code", flat=True))
-        form = forms.GroupForm({"channels": channels}, project=channel.project)
+        form = forms.GroupForm(
+            {"channels": channels, "label": channel.name}, project=channel.project
+        )
 
     ctx = {"page": "channels", "project": channel.project, "form": form}
     return render(request, "integrations/group_form.html", ctx)

static/css/channels.css

@@ -249,18 +249,23 @@ img.kind-ntfy {
     filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.2));
 }
 
-input[name="channels"] {
-    display: none;
+#id_channels > div:nth-child(n+2) {
+    border-top: 1px solid var(--border-color);
+}
+
+#id_channels > div > label {
+    margin: 8px;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-weight: normal;
 }
 
 label[for^="id_channels"] {
     cursor: pointer;
 }
 
-input[name="channels"]:not(:checked) ~ span:before {
-    color: var(--channel-off-inside-color);
-}
-
-input[name="channels"]:not(:checked) ~ span:after {
-    color: var(--channel-off-color);
+#id_channels input {
+    position: relative;
+    top: -1px;
 }

templates/integrations/group_form.html

@@ -40,7 +40,7 @@
             </div>
             <div class="form-group {{ form.channels.css_classes }}">
                 <label for="channels" class="col-sm-2 control-label">Integrations</label>
-                <div class="col-sm-10">
+                <div class="col-sm-6">
                     {{ form.channels }}
 
                     {% if form.channels.errors %}