working on table columns dropdowns

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

@@ -1,128 +0,0 @@
-
-.table {
-    color: var(--bs-body-color) !important;
-}
-
-.table tbody tr.selected > * {
-    box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
-    color: var(--bs-body-color) !important;
-}
-
-.table.dataTable > tbody > tr.selected a {
-    color: var(--bs-link-color) !important;
-}
-
-/* Fuck ugly <td> height fix */
-td {
-    height: 1px;
-    text-wrap: nowrap;
-}
-td > .btn-link { padding-left: 0; }
-  
-@-moz-document url-prefix() {
-    tr { height: 100%; }
-    td { height: 100%; }
-}
-
-
-/* Empty Table */
-
-.table .dt-empty {
-    padding: 2rem 0;
-    border-bottom: none !important;
-}
-
-.table tr:hover > .dt-empty {
-    box-shadow: none !important;
-}
-
-
-/* Table Search */
-
-.table-search-group {
-    position: relative;
-    display: flex;
-    flex-wrap: wrap;
-    align-items: stretch;
-    width: 100%;
-    max-width: 450px;
-    border: 1px solid var(--bs-border-color);
-    border-radius: 0.25rem;
-    background-color: var(--bs-body-bg);
-    overflow: hidden;
-}
-
-.table-search-label {
-    display: flex;
-    align-items: center;
-    padding: 0.375rem 0.75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--bs-body-color);
-    text-align: center;
-    white-space: nowrap;
-    padding-right: 0;
-    border: none;
-    background-color: inherit;
-}
-
-.table-search-input {
-    padding: 0.375rem 0.75rem;
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    color: var(--bs-body-color);
-    appearance: none;
-    background-clip: padding-box;
-    position: relative;
-    flex: 1 1 auto;
-    width: 1%;
-    min-width: 0;
-    border: none;
-    border-radius: 0;
-    background-color: inherit
-}
-
-.table-search-input:focus {
-    outline: 0;
-    box-shadow: none;
-}
-
-
-/* Button Controls */
-
-.table-search-buttons > div {
-    margin-left: 1rem;
-}
-
-@media (max-width: 576px) {
-    .table-search-buttons > div {
-        margin-left: 0.25rem;
-    }
-}
-
-.table-search-buttons > div:first-of-type {
-    margin-left: 0 !important;
-}
-
-
-/* Table Border Colour */
-
-table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
-    border-bottom: 1px solid var(--bs-border-color);
-}
-
-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

@@ -511,6 +511,31 @@ function renderArrayBadgesColumn(data) {
     return badges.html();
 }
 
+function renderArrayDropdownColumn(data, icon, headerText) {
+    if (!data.length) {
+        return "";
+    }
+
+    let $dropdown = $(`
+        <div class="dropdown">
+            <button type="button" class="dropdown-toggle" data-bs-toggle="dropdown">
+                <i class="fs-5 bi ${icon}"></i>
+            </button>
+            <div class="dropdown-menu">
+                <li><h6 class="dropdown-header">${headerText} (${data.length})</h6></li>
+            </div>
+        </div>
+    `);
+    let $dropdownItems = $dropdown.find(".dropdown-menu")
+
+    data.forEach(item => {
+        let $itemBtn = $(`<li><button type="button" class="dropdown-item">${item}</button></li>`);
+        $dropdownItems.append($itemBtn);
+    });
+
+    return $dropdown.html();
+}
+
 function renderHexColourColumn(data, type, row) {
     if (!row.is_embed) {
         return "";

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

@@ -27,26 +27,30 @@ function initSubscriptionsModule() {
             {
                 title: "Channels",
                 data: "channels_detail",
-                className: "text-center",
+                className: "text-center dropdown render-array-dropdown-column",
-                render: data => renderArrayBadgesColumn(data.map(item => "#" + item.name))
+                render: data => renderArrayDropdownColumn(data.map(item => `#${item.name}`), "bi-hash", "Discord Channels")
+                // render: data => renderArrayBadgesColumn(data.map(item => "#" + item.name))
             },
             {
                 title: "Filters",
                 data: "filters_detail",
-                className: "text-center",
+                className: "text-center dropdown render-array-dropdown-column",
-                render: data => renderArrayBadgesColumn(data.map(item => item.name))
+                render: data => renderArrayDropdownColumn(data.map(item => item.name), "bi-funnel", "Selected Filters")
+                // render: data => renderArrayBadgesColumn(data.map(item => item.name))
+            },
+            {
+                title: "Rules",
+                data: "unique_rules_detail",
+                className: "text-center  dropdown render-array-dropdown-column",
+                render: data => renderArrayDropdownColumn(data.map(item => item.name), "bi-vr", "Unique Rules")
+                // render: data => renderArrayBadgesColumn(data.map(item => item.name))
             },
             {
                 title: "Style",
                 data: "message_style_detail",
                 className: "text-center",
-                render: data => renderBadgeColumn(data.name, data.is_embed ? data.colour : null)
+                render: data => renderHexColourColumn(data.colour, null, data)
-            },
+                // render: data => renderBadgeColumn(data.name, data.is_embed ? data.colour : null)
-            {
-                title: "Rules",
-                data: "unique_rules_detail",
-                className: "text-center text-nowrap",
-                render: data => renderArrayBadgesColumn(data.map(item => item.name))
             },
             {
                 title: "Created At",

apps/home/static/home/scss/index.scss

@@ -1,79 +1,6 @@
 @import "bootstrap.scss";
 @import "./sidebar.scss";
-
+@import "./tables.scss";
-@keyframes bump {
-    0% {
-      transform: translateY(0);
-    }
-    50% {
-      transform: translateY(5px); /* Adjust the height of the bump */
-    }
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-.bump {
-    animation: bump .2s ease-out;
-}
-
-.server-sidebar {
-  width: 16rem !important;
-}
-/* 
-@media (max-width: 992px) {
-    .server-sidebar {
-        width: 4.5rem;
-    }
-
-    .server-item > button {
-        padding: 0.25rem !important;
-    }
-
-    .server-item > button > div {
-        justify-content: center !important;
-    }
-
-    .server-item .server-item-labels {
-        display: none !important;
-    }
-
-    .server-sidebar > ul > li:has(> #newServerBtn) {
-        display: flex;
-        justify-content: center !important;
-    }
-
-    #newServerBtn {
-        width: 45px !important;
-        height: 45px !important;
-        padding: 0 !important;
-    }
-} */
-
-.server-item {
-    max-width: calc(16rem - 1rem);
-}
-
-.server-item-selector {
-    display: flex;
-    justify-content: flex-start;
-    align-items: center;
-    flex-wrap: nowrap;
-    color: var(--bs-text-body);
-    background-color: var(--bg-tertiary-bg);
-    transition: 0.3s;
-}
-
-.server-item-selector .font-monospace {
-    color: var(--bs-secondary-color)
-}
-
-.server-item-selector:hover,
-.server-item-selector:focus,
-.server-item-selector:active,
-.active > .server-item-selector {
-    background-color: var(--bs-body-bg) !important;
-}
 
 
 /* widths */
@@ -98,45 +25,3 @@
 #serverTabs .nav-item .nav-link:not(.active) {
     color: var(--bs-text-body);
 }
-
-/* Yellow Dot Indicator for the server sidebar */
-.dot-container {
-    width: .75rem;
-    height: .75rem;
-
-    display: flex;
-    position: absolute;
-    top: 0;
-    right: 0;
-}
-
-@media (max-width: 992px) {
-    .dot-container {
-        transform: translate(25%, -25%);
-    }
-}
-
-.dot-icon {
-    height: .75rem;
-    width: .75rem;
-    background-color: var(--bs-primary);
-    border-radius: 50%;
-    display: inline-block;
-}
-
-
-/* Sidebar Buttons */
-.sidebar-btn {
-    border: none;
-    width: 100%;
-    height: 100%;
-    padding: 0.5rem 0;
-    border-radius: var(--bs-border-radius-sm);
-
-    color: var(--bs-body-color);
-    background-color: var(--bs-tertiary-bg);
-}
-
-.sidebar-btn:hover {
-    background-color: var(--bs-body-bg);
-}

apps/home/static/home/scss/tables.scss

@@ -0,0 +1,198 @@
+
+.render-array-dropdown-column.dropdown {
+
+    // .col-badge {
+
+    //     position: absolute;
+    //     top: 50%;
+    //     left: 50%;
+    //     transform: translate(-50%, -50%);
+    //     background-color: var(--bs-danger);
+    //     border-radius: 50%;
+    //     width: 1.25rem;
+    //     height: 1.25rem;
+    //     display: flex;
+    //     justify-content: center;
+    //     align-items: center;
+    //     flex-shrink: 0;
+
+    //     >* {
+
+    //     }
+
+    // }
+
+    >button {
+
+        position: relative;
+        width: 100%;
+        height: 100%;
+        border: 0;
+        padding: 0;
+        background: none;
+
+    }
+
+    // .col-badge {
+
+    //     position: absolute;
+    //     top: 0;
+    //     right: 100%;
+    //     transform: translateY(-100%);
+    //     background-color: var(--bs-danger);
+
+    // }
+
+    .dropdown-menu {
+
+        border: none;
+        padding: 0.25rem;
+        box-shadow: var(--bs-box-shadow);
+        border-radius: var(--bs-border-radius-sm);
+        background-color: var(--bs-tertiary-bg);
+
+        .dropdown-item {
+
+            border-radius: var(--bs-border-radius-sm);
+
+            &:hover, &:focus { background-color: var(--bs-body-bg); }
+
+        }
+
+    }
+
+}
+
+
+
+
+
+
+
+.table {
+    color: var(--bs-body-color) !important;
+}
+
+.table tbody tr.selected > * {
+    box-shadow: inset 0 0 0 9999px rgba(var(--bs-secondary-bg-rgb), 0.9) !important;
+    color: var(--bs-body-color) !important;
+}
+
+.table.dataTable > tbody > tr.selected a {
+    color: var(--bs-link-color) !important;
+}
+
+/* Fuck ugly <td> height fix */
+td {
+    height: 1px;
+    text-wrap: nowrap;
+}
+td > .btn-link { padding-left: 0; }
+  
+@-moz-document url-prefix() {
+    tr { height: 100%; }
+    td { height: 100%; }
+}
+
+
+/* Empty Table */
+
+.table .dt-empty {
+    padding: 2rem 0;
+    border-bottom: none !important;
+}
+
+.table tr:hover > .dt-empty {
+    box-shadow: none !important;
+}
+
+
+/* Table Search */
+
+.table-search-group {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-items: stretch;
+    width: 100%;
+    max-width: 450px;
+    border: 1px solid var(--bs-border-color);
+    border-radius: 0.25rem;
+    background-color: var(--bs-body-bg);
+    overflow: hidden;
+}
+
+.table-search-label {
+    display: flex;
+    align-items: center;
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    text-align: center;
+    white-space: nowrap;
+    padding-right: 0;
+    border: none;
+    background-color: inherit;
+}
+
+.table-search-input {
+    padding: 0.375rem 0.75rem;
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.5;
+    color: var(--bs-body-color);
+    appearance: none;
+    background-clip: padding-box;
+    position: relative;
+    flex: 1 1 auto;
+    width: 1%;
+    min-width: 0;
+    border: none;
+    border-radius: 0;
+    background-color: inherit
+}
+
+.table-search-input:focus {
+    outline: 0;
+    box-shadow: none;
+}
+
+
+/* Button Controls */
+
+.table-search-buttons > div {
+    margin-left: 1rem;
+}
+
+@media (max-width: 576px) {
+    .table-search-buttons > div {
+        margin-left: 0.25rem;
+    }
+}
+
+.table-search-buttons > div:first-of-type {
+    margin-left: 0 !important;
+}
+
+
+/* Table Border Colour */
+
+table.dataTable > thead > tr > th, table.dataTable > thead > tr > td {
+    border-bottom: 1px solid var(--bs-border-color);
+}
+
+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;
+}