wider sidebar support

doesnt support small screen yet

apps/static/css/home/index.css

@@ -13,7 +13,7 @@
 .bump {
     animation: bump .2s ease-out;
 }
-
+/* 
 .server-item.active img {
     border-radius: .75rem !important;
 }
@@ -28,6 +28,21 @@
 
 .server-item-selector img { 
     transition: border-radius .15s ease-in;
+} */
+
+.server-item {
+    max-width: calc(16rem - 1rem);
+}
+
+.server-item-selector {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    flex-wrap: nowrap;
+}
+
+.server-item-selector:hover {
+    background-color: var(--bs-secondary-bg);
 }
 
 /* widths */

apps/static/js/home/servers.js

@@ -132,14 +132,14 @@ async function loadSavedGuilds() {
 
 // Create an element for the added server and show it
 function addServerTemplate(serverPrimaryKey, serverGuildId, serverName, serverIconHash, serverPermissions, serverIsOwner) {
-    template = $($("#serverItemTemplate").html());
+    let template = $($("#serverItemTemplate").html());
+    let imageUrl = `https://cdn.discordapp.com/icons/${serverGuildId}/${serverIconHash}.webp?size=80`;
 
-    template.find("img").attr("src", `https://cdn.discordapp.com/icons/${serverGuildId}/${serverIconHash}.webp?size=80`);
+    template.find("img").attr("src", imageUrl);
+    template.find(".js-guildId").text(serverGuildId);
+    template.find(".js-guildName").text(serverName);
     template.attr("data-id", serverPrimaryKey);
-
-    // Tooltips
-    template.attr("data-bs-title", serverName);
-    template.tooltip();
+    template.attr("data-guild-id", serverGuildId);
 
     // Bind the button for selecting this server
     template.find(".server-item-selector").off("click").on("click", function() {

apps/static/js/home/subscriptions.js

@@ -519,12 +519,21 @@ async function loadChannelOptions(guildId) {
 
         // If we can't fetch channels due to error
         if (channels.code === 50001) {
+            let server = getServerFromSnowflake(guildId);
             
             // Also check that the user hasn't changed the currently active guild, otherwise
             // the alert will show under the wrong server.
             if (getCurrentlyActiveServer().guild_id === guildId)
                 $("#serverJoinAlert").show();
 
+            // Warning icon on sidebar server select
+            let sidebarItem = $(`#serverList .server-item[data-guild-id="${guildId}"]`);
+            if (!sidebarItem.find(".badge.text-warning").length) {
+                let alertTemplate = $($("#serverItemIconTemplate").html());
+                alertTemplate.attr("data-bs-title", `The Bot isn't a member of ${sanitise(server.name)}`).tooltip();
+                sidebarItem.find(".server-item-selector").append(alertTemplate);
+            }
+
             const guildName = sanitise(getServerFromSnowflake(guildId).name);
 
             throw new Error(

apps/templates/home/index.html

@@ -12,11 +12,12 @@
 {% block content %}
 <div class="px-0 h-100">
     <div class="d-flex flex-nowrap h-100 border-start border-end">
-        <div class="d-flex flex-column bg-body-tertiary py-3 border-end" style="width: 4.5rem">
-            <ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center">
+        <div class="d-flex flex-column bg-body-tertiary py-3 border-end" style="width: 16rem">
+            <ul id="serverList" class="nav nav-pills nav-flush flex-column mb-auto text-center px-2">
                 <li class="nav-item">
-                    <button type="button" id="newServerBtn" class="btn btn-outline-primary rounded-1 mt-1" style="width: 46px; height: 46px;">
-                        <i class="bi bi-plus-lg fs-5"></i>
+                    <button type="button" id="newServerBtn" class="btn btn-outline-primary rounded-1 mt-2 w-100 d-flex justify-content-center align-items-center">
+                        <i class="bi bi-plus-lg fs-5 d-none"></i>
+                        <span class="small">Add Server</span>
                     </button>
                 </li>
             </ul>
@@ -112,12 +113,23 @@
 
 {% block javascript %}
 <script id="serverItemTemplate" type="text/template">
-    <li class="nav-item server-item" data-id="" data-bs-toggle="tooltip" data-bs-placement="right">
-        <button type="button" class="btn border-0 server-item-selector mb-2">
-            <img src="" alt="Guild Icon" class="rounded-circle" width="46" height="46">
+    <li class="nav-item server-item" data-id="" data-guild-id="">
+        <button type="button" class="btn border-0 server-item-selector w-100 rounded-1 position-relative">
+            <div class="d-flex justify-content-start align-items-center w-100">
+                <img src="" alt="Guild Icon" class="rounded-1 small" width="45" height="45">
+                <div class="small text-start ps-2 w-100 flex-shrink-1 overflow-hidden">
+                    <div class="js-guildName text-body fw-bold text-truncate"></div>
+                    <div class="js-guildId text-body-secondary text-truncate font-monospace"></div>
+                </div>
+            </div>
         </button>
     </li>
 </script>
+<script id="serverItemIconTemplate" type="text/template">
+    <div class="position-absolute top-0 end-0 badge rounded-1 text-warning fs-5 p-1" data-bs-toggle="tooltip" data-bs-placement="right">
+        <i class="bi bi-exclamation-triangle-fill"></i>
+    </div>
+</script>
 <script src="{% static 'js/api.js' %}"></script>
 <script src="{% static 'js/table.js' %}"></script>
 <script src="{% static 'js/home/index.js' %}"></script>