server setting controls

apps/home/static/home/js/servers.js

@@ -311,3 +311,80 @@ const unspotItem = id => {
 const spotItem = (id, spotStyle) => {
     $(`.sidebar .sidebar-item[data-id="${id}"]`).addClass(`spot spot-${spotStyle}`);
 }
+
+
+// region View Other Users
+
+$(".js-serverUsersBtn").on("click", () => {
+    createModal({
+        title: "Other Users",
+        texts: [
+            {content: "This feature has not yet been implemented."}
+        ],
+        buttons: [
+            {
+                className: "btn-secondary px-4",
+                iconClass: "bi-arrow-return-right",
+                closeModal: true
+            }
+        ]
+    });
+});
+
+
+// region View Edit History
+
+$(".js-serverHistoryBtn").on("click", () => {
+    createModal({
+        title: "Edit History",
+        texts: [
+            {content: "This feature has not yet been implemented."}
+        ],
+        buttons: [
+            {
+                className: "btn-secondary px-4",
+                iconClass: "bi-arrow-return-right",
+                closeModal: true
+            }
+        ]
+    });
+});
+
+
+// region Delete Server Data
+
+$(".js-eraseServerBtn").on("click", () => {
+    const server = selectedServer;  // Store incase it changes
+    const itemsToLose = arrayToHtmlList([
+        "Subscriptions",
+        "Filters",
+        "Message Styles",
+        "Tracked Content"
+    ]).addClass("mb-3").prop("outerHTML");
+
+    const eraseServerData = () => {
+        alert("not implemented")
+    }
+
+    createModal({
+        title: `Delete Data for ${server.name}?`,
+        texts: [
+            {content: "You will lose all data related to this server, including:"},
+            {content: itemsToLose, html: true},
+            {content: "Please reconsider this decision."}
+        ],
+        buttons: [
+            {
+                className: "btn-danger me-3",
+                iconClass: "bi-trash3",
+                closeModal: true,
+                onClick: eraseServerData
+            },
+            {
+                className: "btn-secondary px-4",
+                iconClass: "bi-arrow-return-right",
+                closeModal: true
+            }
+        ]
+    })
+});

apps/home/templates/home/index.html

@@ -89,12 +89,40 @@
                                         <span class="ms-2 d-none d-lg-inline">Message Styles</span>
                                     </button>
                                 </li>
-                                <li class="nav-item me-0" role="presentation">
+                                <li class="nav-item me-lg-3" role="presentation">
                                     <button id="contentTab" class="nav-link rounded-1" data-bs-toggle="tab" data-bs-target="#contentTabPane" type="button" aria-controls="contentTabPane" aria-selected="false">
                                         <i class="bi bi-archive"></i>
                                         <span class="ms-2 d-none d-lg-inline">Tracked Content</span>
                                     </button>
                                 </li>
+                                <li class="nav-item me-0 dropdown">
+                                    <button type="button" class="nav-link dropdown-toggle rounded-1" data-bs-toggle="dropdown" data-bs-auto-close="outside">
+                                        <i class="bi bi-gear"></i>
+                                    </button>
+                                    <ul class="dropdown-menu">
+                                        <li>
+                                            <button type="button" class="js-serverUsersBtn dropdown-item">
+                                                <i class="bi bi-people"></i>
+                                                <span class="ms-2">Other Users</span>
+                                            </button>
+                                        </li>
+                                        <li>
+                                            <button type="button" class="js-serverHistoryBtn dropdown-item">
+                                                <i class="bi bi-clock"></i>
+                                                <span class="ms-2">Edit History</span>
+                                            </button>
+                                        </li>
+                                        <li>
+                                            <hr class="dropdown-divider">
+                                        </li>
+                                        <li>
+                                            <button type="button" class="js-eraseServerBtn dropdown-item text-danger">
+                                                <i class="bi-trash3"></i>
+                                                <span class="ms-2">Delete Data</span>
+                                            </button>
+                                        </li>
+                                    </div>
+                                </li>
                             </ul>
                         </div>
                     </div>