Add inbox tabs blahs

webroot/blah/en-us.json

@@ -68,6 +68,10 @@
   "title.inbox": "Inbox",
   "title.invites": "Invites",
   "title.notifications": "Notifications",
+  "title.received": "Received",
+  "title.sent": "Sent",
+  "title.all": "All",
+  "title.unread": "Unread",
 
 
   "title.sign.up": "Sign Up",

webroot/main.js

@@ -969,6 +969,12 @@ function switchInvitesTab(tab) {
     document.getElementById('tab-invites-received').classList.add('tab-inactive');
     document.getElementById('tab-invites-sent').classList.add('tab-inactive');
     document.getElementById(`tab-invites-${tab}`).classList.remove('tab-inactive');
+    
+    
+    if (tab == "received")
+    {
+        
+    }
 }
 
 function switchNotifisTab(tab) {
@@ -991,14 +997,16 @@ async function gotoInbox() {
     }
 }
 
-function gotoInvites() {
+async function gotoInvites() {
     setActiveRoombarItem('collapse-invites');
-    switchRoomContent("title.invites", invitesScreen, false);
+    await switchRoomContent("title.invites", invitesScreen, false);
+    switchInvitesTab('received');
 }
 
-function gotoNotifis() {
+async function gotoNotifis() {
     setActiveRoombarItem('collapse-notifis');
-    switchRoomContent("title.notifications", notifisScreen, false);
+    await switchRoomContent("title.notifications", notifisScreen, false);
+    switchNotifisTab('all');
 }
 
 function gotoCreateSpace() {

webroot/screens.js

@@ -76,10 +76,10 @@ var joinSpaceScreen = `
 var invitesScreen = `
 <div style="display: flex; flex-direction: column; height: 100%;">
     <div style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: var(--border-width) solid var(--light-border-color); flex-shrink: 0;">
-        <button id="tab-invites-received" class="submit-button blah" onclick="switchInvitesTab('received')" style="margin:0; padding: 0 1.5rem;">title.received</button>
+        <button id="tab-invites-received" class="submit-button blah tab-inactive" onclick="switchInvitesTab('received')" style="margin:0; padding: 0 1.5rem;">title.received</button>
         <button id="tab-invites-sent" class="submit-button blah tab-inactive" onclick="switchInvitesTab('sent')" style="margin:0; padding: 0 1.5rem;">title.sent</button>
     </div>
-    <div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0.5;">
+    <div id="invites-container" style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0.5;">
         <svg xmlns="http://www.w3.org/2000/svg" width="4rem" 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>
         <br>
         <p><blah>desc.no.invites</blah></p>
@@ -90,10 +90,10 @@ var invitesScreen = `
 var notifisScreen = `
 <div style="display: flex; flex-direction: column; height: 100%;">
     <div style="display: flex; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: var(--border-width) solid var(--light-border-color); flex-shrink: 0;">
-        <button id="tab-notifis-all" class="submit-button blah" onclick="switchNotifisTab('all')" style="margin:0; padding: 0 1.5rem;">title.all</button>
+        <button id="tab-notifis-all" class="submit-button blah tab-inactive" onclick="switchNotifisTab('all')" style="margin:0; padding: 0 1.5rem;">title.all</button>
         <button id="tab-notifis-unread" class="submit-button blah tab-inactive" onclick="switchNotifisTab('unread')" style="margin:0; padding: 0 1.5rem;">title.unread</button>
     </div>
-    <div style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0.5;">
+    <div id="notifis-container" style="flex-grow: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; opacity: 0.5;">
         <svg xmlns="http://www.w3.org/2000/svg" width="4rem" 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>
         <br>
         <p><blah>desc.no.notifications</blah></p>