web/src/lib.rs

@@ -150,7 +150,8 @@ pub async fn initialize(
         .mount(
             "/dashboard",
             routes![
-                routes::dashboard::dashboard,
+                routes::dashboard::dashboard_1,
+                routes::dashboard::dashboard_2,
                 routes::dashboard::dashboard_home,
                 routes::dashboard::user::get_user_info,
                 routes::dashboard::user::update_user_info,

web/src/routes/dashboard/mod.rs

@@ -676,7 +676,17 @@ pub async fn dashboard_home(cookies: &CookieJar<'_>) -> Result<Template, Redirec
 }
 
 #[get("/<_>")]
-pub async fn dashboard(cookies: &CookieJar<'_>) -> Result<Template, Redirect> {
+pub async fn dashboard_1(cookies: &CookieJar<'_>) -> Result<Template, Redirect> {
+    if cookies.get_private("userid").is_some() {
+        let map: HashMap<&str, String> = HashMap::new();
+        Ok(Template::render("dashboard", &map))
+    } else {
+        Err(Redirect::to("/login/discord"))
+    }
+}
+
+#[get("/<_>/<_>")]
+pub async fn dashboard_2(cookies: &CookieJar<'_>) -> Result<Template, Redirect> {
     if cookies.get_private("userid").is_some() {
         let map: HashMap<&str, String> = HashMap::new();
         Ok(Template::render("dashboard", &map))

web/static/css/style.css

@@ -291,10 +291,19 @@ div.dashboard-sidebar:not(.mobile-sidebar) {
     flex-direction: column;
 }
 
+ul.guildList {
+    flex-grow: 1;
+    flex-shrink: 1;
+    overflow: scroll;
+}
+
 div.dashboard-sidebar:not(.mobile-sidebar) .aside-footer {
-    position: fixed;
+    flex-shrink: 0;
-    bottom: 0;
+    flex-grow: 0;
-    width: 226px;
+}
+
+div.dashboard-sidebar svg {
+    flex-shrink: 0;
 }
 
 div.mobile-sidebar {
@@ -716,6 +725,18 @@ a.switch-pane {
     text-overflow: ellipsis;
 }
 
+.guild-submenu {
+    display: none;
+}
+
+.guild-submenu li {
+    font-size: 0.8rem;
+}
+
+a.switch-pane.is-active ~ .guild-submenu {
+    display: block;
+}
+
 .feedback {
     background-color: #5865F2;
 }

web/static/js/main.js

@@ -34,13 +34,11 @@ let globalPatreon = false;
 let guildPatreon = false;
 
 function guildId() {
-    return document.querySelector(".guildList a.is-active").dataset["guild"];
+    return document.querySelector("li > a.is-active").parentElement.dataset["guild"];
 }
 
-function loadErrors() {
+function guildName() {
-    return fetch(`/dashboard/api/guild/${guildId()}/errors`).then((response) =>
+    return guildNames[guildId()];
-        response.json()
-    );
 }
 
 function colorToInt(r, g, b) {
@@ -456,21 +454,19 @@ document.addEventListener("guildSwitched", async (e) => {
         .querySelectorAll(".patreon-only")
         .forEach((el) => el.classList.add("is-locked"));
 
-    let $anchor = document.querySelector(
+    let $li = document.querySelector(`li[data-guild="${e.detail.guild_id}"]`);
-        `.switch-pane[data-guild="${e.detail.guild_id}"]`
-    );
 
-    let hasError = false;
+    if ($li === null) {
-
-    if ($anchor === null) {
         switch_pane("user-error");
-        hasError = true;
         return;
     }
 
-    switch_pane($anchor.dataset["pane"]);
+    switch_pane(e.detail.pane);
     reset_guild_pane();
-    $anchor.classList.add("is-active");
+    $li.querySelector("li > a").classList.add("is-active");
+    $li.querySelectorAll(`*[data-pane="${e.detail.pane}"]`).forEach((el) => {
+        el.classList.add("is-active");
+    });
 
     if (globalPatreon || (await fetch_patreon(e.detail.guild_id))) {
         document
@@ -478,18 +474,26 @@ document.addEventListener("guildSwitched", async (e) => {
             .forEach((el) => el.classList.remove("is-locked"));
     }
 
-    hasError = await fetch_channels(e.detail.guild_id);
+    const event = new CustomEvent("paneLoad", {
-    if (!hasError) {
+        detail: {
-        fetch_roles(e.detail.guild_id);
+            guild_id: e.detail.guild_id,
-        fetch_templates(e.detail.guild_id);
+            pane: e.detail.pane,
-        fetch_reminders(e.detail.guild_id);
+        },
-        loadErrors().then((res) => {
-            console.log(res);
     });
+    document.dispatchEvent(event);
+});
+
+document.addEventListener("paneLoad", async (ev) => {
+    const hasError = await fetch_channels(ev.detail.guild_id);
+    if (!hasError) {
+        fetch_roles(ev.detail.guild_id);
+        fetch_templates(ev.detail.guild_id);
+        fetch_reminders(ev.detail.guild_id);
 
         document.querySelectorAll("p.pageTitle").forEach((el) => {
-            el.textContent = `${e.detail.guild_name} Reminders`;
+            el.textContent = `${guildName()} Reminders`;
         });
+
         document.querySelectorAll("select.channel-selector").forEach((el) => {
             el.addEventListener("change", (e) => {
                 update_select(e.target);
@@ -694,21 +698,37 @@ document.addEventListener("DOMContentLoaded", async () => {
                             "%guildname%",
                             guild.name
                         );
-                        $anchor.dataset["guild"] = guild.id;
                         $anchor.dataset["name"] = guild.name;
-                        $anchor.href = `/dashboard/${guild.id}?name=${guild.name}`;
+                        $anchor.href = `/dashboard/${guild.id}/reminders`;
 
-                        $anchor.addEventListener("click", async (e) => {
+                        const $li = $anchor.parentElement;
+                        $li.dataset["guild"] = guild.id;
+
+                        $li.querySelectorAll("a").forEach((el) => {
+                            el.addEventListener("click", (e) => {
+                                const pane = el.dataset["pane"];
+                                const slug = el.dataset["slug"];
+
+                                if (pane !== undefined && slug !== undefined) {
                                     e.preventDefault();
-                            window.history.pushState({}, "", `/dashboard/${guild.id}`);
+
+                                    switch_pane(pane);
+
+                                    window.history.pushState(
+                                        {},
+                                        "",
+                                        `/dashboard/${guild.id}/${slug}`
+                                    );
                                     const event = new CustomEvent("guildSwitched", {
                                         detail: {
-                                    guild_name: guild.name,
                                             guild_id: guild.id,
+                                            pane,
                                         },
                                     });
 
                                     document.dispatchEvent(event);
+                                }
+                            });
                         });
 
                         element.append($clone);
@@ -724,6 +744,7 @@ document.addEventListener("DOMContentLoaded", async () => {
                         detail: {
                             guild_name: name,
                             guild_id: id,
+                            pane: "guild",
                         },
                     });
 

web/static/js/reminder_errors.js

@@ -0,0 +1,16 @@
+function loadErrors() {
+    return fetch(`/dashboard/api/guild/${guildId()}/errors`).then((response) =>
+        response.json()
+    );
+}
+
+document.addEventListener("paneLoad", (ev) => {
+    if (ev.detail.pane !== "reminder-errors") {
+        return;
+    }
+
+    // Load errors
+    loadErrors().then((res) => {});
+
+    $loader.classList.add("is-hidden");
+});

web/templates/dashboard.html.tera

@@ -375,9 +375,19 @@
 
 <template id="guildListEntry">
     <li>
-        <a class="switch-pane" data-pane="guild">
+        <a class="switch-pane" data-pane="guild" data-slug="reminders">
             <span class="icon"><i class="fas fa-map-pin"></i></span> <span class="guild-name">%guildname%</span>
         </a>
+        <ul class="guild-submenu">
+            <li>
+                <a class="switch-pane" data-pane="guild" data-slug="reminders">
+                    <span class="icon"><i class="fas fa-calendar-alt"></i></span> Reminders
+                </a>
+                <a class="switch-pane" data-pane="reminder-errors" data-slug="errors">
+                    <span class="icon"><i class="fas fa-exclamation-triangle"></i></span> Errors
+                </a>
+            </li>
+        </ul>
     </li>
 </template>