open related message style

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

@@ -565,6 +565,20 @@ function renderMutatorColumn(data) {
     return $(`<span class="badge text-bg-secondary rounded-1">${data.name}</span>`).prop("outerHTML");
 }
 
+const renderLinkToStyleColumn = style => {
+    if (!style.is_embed) {
+        return "";
+    }
+    
+    const hexWithHashtag = `#${style.colour}`.toUpperCase();
+
+    let icon = $("<div>");
+    icon.addClass("col-hex-icon js-openSubStyle");
+    icon.css("background-color", hexWithHashtag);
+
+    return $(`<span data-bs-toggle="tooltip" data-bs-title="${hexWithHashtag}" role="button">${icon.prop("outerHTML")}</span>`).tooltip()[0];
+}
+
 const renderPopoverBadgesColumn = (items, iconClass) => {
     if (!items.length) {
         return "";

apps/home/static/home/js/tabs/subs.js

@@ -43,7 +43,7 @@ function initSubscriptionsModule() {
                 title: "Style",
                 data: "message_style_detail",
                 className: "col-hex",
-                render: data => renderHexColourColumn(data.colour, null, data)
+                render: renderLinkToStyleColumn
             },
             {
                 title: "Created At",
@@ -288,4 +288,17 @@ async function loadChannelOptions() {
     })
 
     $input.prop("disabled", false);
-}
+}
+
+
+// region Open Sub Style
+
+$(subTableId).on("click", ".js-openSubStyle", async event => {
+    const subTable = $(subTableId).DataTable();
+    const row = subTable.row($(event.currentTarget).closest("tr"));
+    const styleId = row.data().message_style
+
+    // Open styles tab and styles modal
+    $("#stylesTab").click();
+    await openDataModal(styleModalId, styleId);
+});