display embed colour and mutators

apps/api/serializers.py

@@ -146,6 +146,9 @@ class MessageMutatorSerializer(DynamicModelSerializer):
 
 
 class MessageStyleSerializer(DynamicModelSerializer):
+    title_mutator = serializers.SerializerMethodField()
+    description_mutator = serializers.SerializerMethodField()
+
     class Meta:
         model = MessageStyle
         fields = (
@@ -153,6 +156,7 @@ class MessageStyleSerializer(DynamicModelSerializer):
             "server",
             "name",
             "is_embed",
+            "colour",
             "is_hyperlinked",
             "show_author",
             "show_timestamp",
@@ -164,6 +168,18 @@ class MessageStyleSerializer(DynamicModelSerializer):
         )
         read_only_fields = ("auto_created",)
 
+    def get_title_mutator(self, obj: MessageStyle):
+        request = self.context.get("request")
+        if request.method == "GET":
+            return MessageMutatorSerializer(obj.title_mutator).data
+        return []
+
+    def get_description_mutator(self, obj: MessageStyle):
+        request = self.context.get("request")
+        if request.method == "GET":
+            return MessageMutatorSerializer(obj.description_mutator).data
+        return []
+
 
 class UniqueContentRuleSerializer(DynamicModelSerializer):
     class Meta:

apps/home/admin.py

@@ -17,19 +17,21 @@ from .models import (
 @admin.register(Server)
 class ServerAdmin(admin.ModelAdmin):
     list_display = ["id", "name", "icon_hash", "active"]
+    list_display_links = ["name"]
 
 
 @admin.register(ContentFilter)
 class ContentFilterAdmin(admin.ModelAdmin):
     list_display = [
         "id",
-        "server",
         "name",
+        "server",
         "match",
         "matching_algorithm",
         "is_insensitive",
         "is_whitelist"
     ]
+    list_display_links = ["name"]
 
 
 @admin.register(MessageMutator)
@@ -39,6 +41,7 @@ class MessageMutatorAdmin(admin.ModelAdmin):
         "name",
         "value"
     ]
+    list_display_links = ["name"]
 
 
 @admin.register(MessageStyle)
@@ -48,6 +51,7 @@ class MessageStyleAdmin(admin.ModelAdmin):
         "name",
         "server",
         "is_embed",
+        "colour",
         "is_hyperlinked",
         "show_author",
         "show_timestamp",
@@ -57,24 +61,26 @@ class MessageStyleAdmin(admin.ModelAdmin):
         "description_mutator",
         "auto_created"
     ]
+    list_display_links = ["name"]
 
 
 @admin.register(DiscordChannel)
 class DiscordChannelAdmin(admin.ModelAdmin):
     list_display = [
         "id",
-        "server",
         "name",
+        "server",
         "is_nsfw"
     ]
+    list_display_links = ["name"]
 
 
 @admin.register(Subscription)
 class Subscription(admin.ModelAdmin):
     list_display = [
         "id",
-        "server",
         "name",
+        "server",
         "url",
         "created_at",
         "updated_at",
@@ -82,6 +88,7 @@ class Subscription(admin.ModelAdmin):
         "active",
         "message_style"
     ]
+    list_display_links = ["name"]
 
 
 @admin.register(Content)
@@ -104,3 +111,4 @@ class UniqueContentRule(admin.ModelAdmin):
         "name",
         "value"
     ]
+    list_display_links = ["name"]

apps/home/static/home/css/tables.css

@@ -115,4 +115,14 @@ table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
 
 div.dt-container.dt-empty-footer tbody > tr:last-child > * {
     border-bottom: 1px solid var(--bs-border-color);
+}
+
+
+/* Cell Data Types */
+
+.table-cell-hex {
+    margin: 0 auto;
+    width: 25px;
+    height: 25px;
+    border-radius: 0.25rem;
 }

apps/home/static/home/js/tables.js

@@ -462,6 +462,28 @@ function renderArrayBadgesColumn(data) {
     return badges.html();
 }
 
+function renderHexColourColumn(data, type, row) {
+    if (!row.is_embed) {
+        return "";
+    }
+
+    const hexWithHashtag = `#${data}`.toUpperCase();
+
+    let icon = $("<div>");
+    icon.addClass("table-cell-hex");
+    icon.css("background-color", hexWithHashtag);
+
+    return $(`<span data-bs-toggle="tooltip" data-bs-title="${hexWithHashtag}">${icon.prop("outerHTML")}</span>`).tooltip()[0];
+}
+
+function renderMutatorColumn(data) {
+    if (!("id" in data)) {
+        return "";
+    }
+
+    return $(`<span class="badge text-bg-secondary rounded-1">${data.name}</span>`).prop("outerHTML");
+}
+
 
 // region Get Table Parts
 

apps/home/static/home/js/tabs/styles.js

@@ -24,6 +24,12 @@ function initMessageStylesModule() {
                 className: "text-center",
                 render: renderBooleanColumn
             },
+            {
+                title: "Embed Colour",
+                data: "colour",
+                className: "text-center",
+                render: renderHexColourColumn
+            },
             {
                 title: "Is Hyperlinked",
                 data: "is_hyperlinked",
@@ -56,11 +62,13 @@ function initMessageStylesModule() {
             },
             {
                 title: "Title Mutator",
-                data: "title_mutator"
+                data: "title_mutator",
+                render: renderMutatorColumn
             },
             {
                 title: "Description Mutator",
-                data: "description_mutator"
+                data: "description_mutator",
+                render: renderMutatorColumn
             },
             {
                 title: "Editable",

apps/home/templates/home/modals/editStyle.html

@@ -18,7 +18,16 @@
                                 <div class="form-text">Human-readable name for this entry.</div>
                             </div>
                         </div>
-                        <div class="col-lg-6 ps-lg-4"></div>
+                        <div class="col-lg-6 ps-lg-4">
+                            <div class="mb-4">
+                                <div class="colour-input"
+                                    data-id="styleEmbedColour"
+                                    data-label="Embed Colour"
+                                    data-helptext="Colour of the embed (if enabled)."
+                                    data-defaultcolour="#3498db">
+                                </div>
+                            </div>
+                        </div>
                         <div class="col-lg-6 pe-lg-4">
                             <div class="form-check form-switch mb-4">
                                 <label for="styleIsEmbed" class="form-check-label">Use an Embed</label>

apps/home/templates/home/modals/editSub.html

@@ -66,7 +66,7 @@
                             <div class="form-check form-switch">
                                 <label for="subActive" class="form-check-label">Enabled</label>
                                 <input type="checkbox" id="subActive" name="subActive" class="form-check-input" data-field="active" tabindex="8" data-default="true">
-                                <div class="form-text d-none">Disabled Subscriptions are ignored.</div>
+                                <div class="form-text"></div>
                             </div>
                         </div>
                     </div>