rate limit text and button change

Also added flex with justify and align both centred for server icons on the sidebar, so that the alt text (if no image exists) is vertically centred.

apps/home/static/home/css/sidebar.css

@@ -167,6 +167,9 @@
 }
 
 .sidebar .sidebar-content .sidebar-item .sidebar-item-image {
+    display: flex;
+    justify-content: center;
+    align-items: center;
     flex-shrink: 0;
     width: 50px;
     height: 50px;
@@ -198,7 +201,7 @@
     display: flex;
 }
 
-.sidebar .sidebar-footer .sidebar-menu-btn {
+.sidebar .sidebar-menu-btn {
     display: flex;
     align-items: center;
     width: auto;
@@ -209,8 +212,8 @@
     background-color: inherit;
 }
 
-.sidebar .sidebar-footer .sidebar-menu-btn:hover,
-.sidebar .sidebar-footer .sidebar-menu-btn.active {
+.sidebar .sidebar-menu-btn:hover,
+.sidebar .sidebar-menu-btn.active {
     background-color: var(--bs-body-bg);
 }
 

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

@@ -61,13 +61,20 @@ function loadedChannels(serverId) {
 $(document).on("selectedServerChange", async function() {
     serverId = selectedServer.id;  // take note incase 'selectedServer' changes
 
-    ajaxRequest(`/generate-channels?guild=${serverId}`, "GET")
-        .then(channels => {
-            _loadedChannels[serverId] = channels;
-        })
-        .catch(error => {
-            logError(error);
-        });
+    try {
+        channels = await ajaxRequest(`/generate-channels?guild=${serverId}`, "GET");
+        _loadedChannels[serverId] = channels;
+    }
+    catch (error) {
+        logError(error);
+        await okModal(
+            "Error: Bot Isn't a Member!",
+            "The PYRSS Discord Bot is unable to access this server, certain features won't work! Ensure it's a member and has the necessary permissions.",
+            "danger",
+            "bi-arrow-return-right",
+            null
+        );
+    }
 });
 
 
@@ -208,4 +215,4 @@ async function loadServers() {
 }
 
 // Retry load servers button
-$(".sidebar .server-rate-limit button.btn").on("click", loadServers);
+$(".sidebar .sidebar-retry-btn").on("click", loadServers);

apps/home/templates/home/sidebar.html

@@ -11,10 +11,11 @@
     <hr class="sidebar-divider">
     <ul id="serverList" class="sidebar-content overflow-y-auto">
         <li class="server-rate-limit">
-            <p class="text-warning">
-                Failed to fetch results - you are being rate limited.
+            <p class="text-danger">
+                <span>Failed to fetch results - you are being rate limited by Discord.</span>
+                <i class="bi bi-question-circle-fill" data-bs-toggle="tooltip" data-bs-title="Discord rate-limits when requests are made in rapid succession."></i>
             </p>
-            <button type="button" class="btn btn-warning btn-sm rounded-1">
+            <button type="button" class="sidebar-menu-btn sidebar-retry-btn w-100 rounded-1">
                 <i class="bi bi-arrow-clockwise me-2"></i>
                 <span>Retry</span>
             </button>