Improve back gesture support & add inbox roombar

webroot/blah/en-us.json

@@ -65,6 +65,9 @@
   "desc.join.space": "Join a community that fits you",
   "title.join.space": "Join space",
   "title.space.id": "Space id",
+  "title.inbox": "Inbox",
+  "title.invites": "Invites",
+  "title.notifications": "Notifications",
 
 
   "title.sign.up": "Sign Up",

webroot/main.js

@@ -896,11 +896,7 @@ document.addEventListener("click", (e) => {
             }
         }
     }
-
-    
-    backCounter = 0;
 });
-var backCounter = 0;
 window.addEventListener("popstate", (e) => {
     popstate();
 });
@@ -913,15 +909,14 @@ if (App) {
 }
 function popstate()
 {
-    mobileNavBack();
-    backCounter++;
-    if (backCounter >= 4)
+    if (!mainScreen.classList.contains('mobile-content') && !mainScreen.classList.contains('mobile-details'))
     {
         history.back();
         if (App) {
             App.minimizeApp();
         }
     }
+    mobileNavBack();
 }
 
 
@@ -930,6 +925,8 @@ function gotoSideProfilePopup() {
 }
 function gotoInbox() {
     setActiveSidebarIndicator(sidebarInboxIndicator);
+    switchRoomsBar("title.inbox", inboxRoomBar);
+    gotoInvites();
 }
 function gotoCreateSpace() {
     fixedContextMenu.classList.remove("show");
@@ -937,7 +934,7 @@ function gotoCreateSpace() {
 }
 function gotoJoinSpace() {
     fixedContextMenu.classList.remove("show");
-    switchRoomContent("title.join.space", joinSpaceScreen, true);
+    switchRoomContent("title.join.space", joinSpaceScreen, false);
 }
 function gotoHome() {
     setActiveSidebarIndicator(sidebarHomeIndicator);

webroot/screens.js

@@ -110,7 +110,21 @@ var homeRoomBar = `
 </div>
 `;
 
+var inboxRoomBar = `
+<div class="sidebar-section-header">
+    <button class="collapse-text-button active" id="collapse-invites" onclick="gotoInvites()">
+        <svg xmlns="http://www.w3.org/2000/svg" class="chevron" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-160q-33 0-56.5-23.5T80-240v-480q0-33 23.5-56.5T160-800h640q33 0 56.5 23.5T880-720v480q0 33-23.5 56.5T800-160H160Zm320-280L160-640v400h640v-400L480-440Zm0-80 320-200H160l320 200ZM160-640v-80 480-400Z"/></svg>
+        <span><blah>title.invites</blah></span>
+    </button>
+</div>
 
+<div class="sidebar-section-header">
+    <button class="collapse-text-button" id="collapse-notifis" onclick="gotoNotifis()">
+        <svg xmlns="http://www.w3.org/2000/svg" class="chevron" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M160-200v-80h80v-280q0-83 50-147.5T420-792v-28q0-25 17.5-42.5T480-880q25 0 42.5 17.5T540-820v28q80 20 130 84.5T720-560v280h80v80H160Zm320-300Zm0 420q-33 0-56.5-23.5T400-160h160q0 33-23.5 56.5T480-80ZM320-280h320v-280q0-66-47-113t-113-47q-66 0-113 47t-47 113v280Z"/></svg>
+        <span><blah>title.notifications</blah></span>
+    </button>
+</div>
+`;
 
 
 //context menus

webroot/style.css

@@ -353,6 +353,9 @@ button:active, button.is-pressed, input:active, input.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
     transform: var(--press-scale); 
 }
+button.active, input.active {
+    background-color: rgba(255, 255, 255, 0.1);
+}
 .submit-button:active, .submit-button.is-pressed {
     background-color: rgba(255, 255, 255, 0.5);
 }