TopBar transitions

android/app/src/main/assets/public/index.html

@@ -55,51 +55,21 @@
         </sidebar>
         <sidebar class="second" id="roomsbar">
             <roomtopbar>
-                <blah>title.home</blah>
+                <inherit></inherit>
             </roomtopbar>
-            <div class="sidebar-section-header">
+            <roomcontent2>
-                <button class="collapse-text-button" id="collapse-dms">
+            </roomcontent2>
-                    <span><blah>title.dms</blah></span>
-                    <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-                         stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                </button>
-                <button class="add-action-button" id="add-dm-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
-                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="12" y1="5" x2="12" y2="19"></line>
-                        <line x1="5" y1="12" x2="19" y2="12"></line>
-                    </svg>
-                </button>
-            </div>
-    
-            <div class="sidebar-section-header">
-                <button class="collapse-text-button" id="collapse-groups">
-                    <span><blah>title.groups</blah></span>
-                    <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-                         stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                </button>
-                <button class="add-action-button" id="add-group-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
-                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="12" y1="5" x2="12" y2="19"></line>
-                        <line x1="5" y1="12" x2="19" y2="12"></line>
-                    </svg>
-                </button>
-            </div>
         </sidebar>
-    
         <roomcontent>
             <roomtopbar>
+                <inherit></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
         </roomcontent>
         <sidebar class="second" id="roomdetailsbar" style="display: none;">
             <roomtopbar>
+                <inherit></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
@@ -115,7 +85,7 @@
     async function start() {
         updateLoadingStatus("loading.loading");
         try {
-            switchRoomContent("title.splash", splashScreen, false, "", true);
+            gotoHome();
             if (host != null)
             {
                 await updateProtocolAndUrl(host);

android/app/src/main/assets/public/main.js

@@ -29,9 +29,6 @@ try {
     
     var loadingStatus = document.getElementById("loadingstatus");
 
-    var collapseDmsBtn = document.getElementById("collapse-dms");
-    var collapseGroupsBtn = document.getElementById("collapse-groups");
-
     var addDmBtn = document.getElementById("add-dm-btn");
     var addGroupBtn = document.getElementById("add-group-btn");
 
@@ -45,13 +42,14 @@ try {
 
     var roomDetailsBar = document.getElementById("roomdetailsbar");
     var roomContent = document.getElementsByTagName("roomcontent")[0];
-    var roomsBar = document.getElementById("roomsbar");
+    var roomsBar = document.getElementsByTagName("roomcontent2")[0];
     var sideBar = document.getElementsByTagName("sidebar")[0];
 
-    var roomContentMain = document.getElementsByTagName("roomcontent2")[0];
+    var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
 
     var roomContentBar = roomContent.children[0];
 
+    var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
     var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
 
     var sidebarProfile = document.getElementById("sidebar-profile");
@@ -685,11 +683,60 @@ function showFixedContextMenu(rect, html) {
 
     fixedContextMenu.classList.add("show");
 }
+async function switchRoomsBar(title, content) {
+    let roomsTopBarTransition = roomsTopBar.children.item(0);
+    
+    roomsBar.style.transform = "scale(0.85)";
+    roomsBar.style.opacity = "0";
+
+    roomsTopBarTransition.style.transform = "scale(0.85)";
+    roomsTopBarTransition.style.opacity = "0";
+    
+
+    await delay(200);
+
+    roomsTopBarTransition.innerHTML = processBlah(title);
+    
+
+    let parser = new DOMParser();
+    let doc = parser.parseFromString(content, "text/html");
+
+    let blahTags = doc.getElementsByTagName("blah");
+    for (let i = 0; i < blahTags.length; i++) {
+        blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
+    }
+    blahTags = doc.getElementsByClassName("blah");
+    for (let i = 0; i < blahTags.length; i++) {
+        blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
+    }
+
+    let placeholders = doc.querySelectorAll("[placeholder]");
+    for (let i = 0; i < placeholders.length; i++) {
+        if (placeholders[i].placeholder.startsWith("{blah("))
+        {
+            let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0];
+            placeholders[i].placeholder = processBlah(value);
+        }
+    }
+
+    roomsBar.innerHTML = doc.body.innerHTML;
+
+    roomsBar.style.transform = "";
+    roomsBar.style.opacity = "";
+
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+}
 async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false)
 {
+    let roomsTopBarTransition = roomTopBar.children.item(0);
+    
     roomContentMain.style.transform = "scale(0.85)";
     roomContentMain.style.opacity = "0";
 
+    roomsTopBarTransition.style.transform = "scale(0.85)";
+    roomsTopBarTransition.style.opacity = "0";
+
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
     if (window.innerWidth <= 52 * rem && !skipMobileSlide) {
         if (title != "title.splash") //do not show splash on mobile
@@ -706,7 +753,7 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     
     let detailsBtnHtml = showRoomBar ? detailsBtn : '';
 
-    roomTopBar.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
+    roomsTopBarTransition.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
     roomDetailsBar.style.display = showRoomBar ? "flex" : "none";
 
     let parser = new DOMParser();
@@ -735,25 +782,37 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     roomContentMain.style.transform = "";
     roomContentMain.style.opacity = "";
 
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+
     
 }
-collapseDmsBtn.addEventListener("click", () => {
+function clickCollapseDms()
+{
+    var collapseDmsBtn = document.getElementById("collapse-dms");
+    
     collapseDmsBtn.classList.toggle("collapsed");
-});
+}
-collapseGroupsBtn.addEventListener("click", () => {
+function clickCollapseGroups()
+{
+    var collapseGroupsBtn = document.getElementById("collapse-groups");
+    
     collapseGroupsBtn.classList.toggle("collapsed");
-});
+}
-addDmBtn.addEventListener("click", async () => {
+function clickAddGroup()
-    switchRoomContent("title.create.dm", addDmScreen, false);
+{
-});
-addGroupBtn.addEventListener("click", async () => {
     switchRoomContent("title.create.group", createGroupScreen, false);
-});
+}
+function clickAddDm()
+{
+    switchRoomContent("title.create.dm", addDmScreen, false);
+}
 
 
 var indicatorBeforeFixedMenu;
 sidebarAddButton.addEventListener("click", (e) => {
     e.stopPropagation();
+    console.log("hi")
     if (fixedContextMenu.classList.contains("show")) {
         fixedContextMenu.classList.remove("show");
         setActiveSidebarIndicator(indicatorBeforeFixedMenu);
@@ -768,7 +827,9 @@ document.addEventListener("click", (e) => {
     if (fixedContextMenu.classList.contains("show")) {
         if (!fixedContextMenu.contains(e.target)) {
             fixedContextMenu.classList.remove("show");
-            setActiveSidebarIndicator(indicatorBeforeFixedMenu);
+            if (!e.target.closest('sidebarelement')) {
+                setActiveSidebarIndicator(indicatorBeforeFixedMenu);
+            }
         }
     }
 
@@ -803,6 +864,7 @@ function gotoJoinSpace() {
 function gotoHome() {
     setActiveSidebarIndicator(sidebarHomeIndicator);
     switchRoomContent("title.splash", splashScreen, false);
+    switchRoomsBar("title.home", homeRoomBar);
 }
 
 function setActiveSidebarIndicator(element, skipDisabling = false)
@@ -833,18 +895,70 @@ function mobileNavBack() {
 function mobileNavDetails() {
     mainScreen.classList.add('mobile-details');
 }
+
+
 let touchStartX = 0;
 let touchEndX = 0;
 let touchStartY = 0;
 let touchEndY = 0;
+let touchMoved = false;
+
 document.addEventListener('touchstart', e => {
     touchStartX = e.changedTouches[0].screenX;
     touchStartY = e.changedTouches[0].screenY;
-});
+    touchMoved = false;
+
+    activeTouchButton = e.target.closest('button, input');
+    if (activeTouchButton) {
+        activeTouchButton.classList.add('is-pressed');
+    }
+}, { passive: true });
+
+document.addEventListener('touchmove', e => {
+    if (!touchMoved) {
+        const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        let diffX = Math.abs(e.changedTouches[0].screenX - touchStartX);
+        let diffY = Math.abs(e.changedTouches[0].screenY - touchStartY);
+        if (diffX > rem || diffY > rem) {
+            touchMoved = true;
+
+            if (activeTouchButton) {
+                activeTouchButton.classList.remove('is-pressed');
+                activeTouchButton = null;
+            }
+        }
+    }
+}, { passive: true });
+
 document.addEventListener('touchend', e => {
     touchEndX = e.changedTouches[0].screenX;
     touchEndY = e.changedTouches[0].screenY;
     handleMobileSwipe();
+
+    if (activeTouchButton) {
+        activeTouchButton.classList.remove('is-pressed');
+
+        if (!touchMoved) {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+            activeTouchButton.click();
+        }
+        activeTouchButton = null;
+    }
+});
+
+document.addEventListener('touchcancel', () => {
+    if (activeTouchButton) {
+        activeTouchButton.classList.remove('is-pressed');
+        activeTouchButton = null;
+    }
+});
+
+document.addEventListener('contextmenu', e => {
+    if (e.target.closest('button')) {
+        e.preventDefault();
+    }
 });
 function handleMobileSwipe() {
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
@@ -853,7 +967,7 @@ function handleMobileSwipe() {
     let diffX = touchEndX - touchStartX;
     let diffY = touchEndY - touchStartY;
 
-    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) {
+    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 4 * rem) {
         if (diffX > 0) {
             mobileNavBack();
         } else {

android/app/src/main/assets/public/screens.js

@@ -73,6 +73,45 @@ var joinSpaceScreen = `
 </div>
 `;
 
+//roombars
+var homeRoomBar = `
+<div class="sidebar-section-header">
+                    <button class="collapse-text-button" id="collapse-dms" onclick="clickCollapseDms()">
+                        <span><blah>title.dms</blah></span>
+                        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                             stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="6 9 12 15 18 9"></polyline>
+                        </svg>
+                    </button>
+                    <button class="add-action-button" id="add-dm-btn" onclick="clickAddDm()">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
+                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="sidebar-section-header">
+                    <button class="collapse-text-button" id="collapse-groups" onclick="clickCollapseGroups()">
+                        <span><blah>title.groups</blah></span>
+                        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                             stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="6 9 12 15 18 9"></polyline>
+                        </svg>
+                    </button>
+                    <button class="add-action-button" id="add-group-btn" onclick="clickAddGroup()">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
+                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
+                    </button>
+                </div>
+`;
+
+
+
 
 //context menus
 var addSpaceMenu = `

android/app/src/main/assets/public/style.css

@@ -87,9 +87,13 @@ button, input {
     transform: translateZ(0);
     will-change: transform;
     transform-origin: center center;
+
+    touch-action: manipulation;
+    -webkit-touch-callout: none;
 }
 input {
     padding-left: calc(var(--button-margin) * 2);
+    -webkit-touch-callout: default;
 }
 
 
@@ -143,9 +147,6 @@ indicator.active {
     pointer-events: none !important;
 }
 
-button:active, input:active {
-    transform: var(--press-scale);
-}
 roomcontent {
     display: flex;
     flex-direction: column;
@@ -348,13 +349,14 @@ herotitle {
         color: var(--text-color);
     }
 }
-button:active, input:active {
+button:active, button.is-pressed, input:active, input.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
+    transform: var(--press-scale); 
 }
-.submit-button:active {
+.submit-button:active, .submit-button.is-pressed {
     background-color: rgba(255, 255, 255, 0.5);
 }
-.add-action-button:active {
+.add-action-button:active, .add-action-button.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
     color: var(--text-color);
 }
@@ -372,8 +374,9 @@ blah, inherit, .inherit {
     all: inherit;
     padding: 0;
     margin: 0;
-    display: inline;
+    display: flex;
     opacity: 1;
+    border: none;
 }
 space{
     margin-left: 0.4rem;
@@ -428,9 +431,9 @@ space{
     color: var(--text-color);
     cursor: pointer;
 }
-.mobile-nav-btn:active {
+.mobile-nav-btn:active, .mobile-nav-btn.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 0.8rem;
+    transform: var(--press-scale);
 }
 .mobile-nav-btn.right {
     margin-right: 0;

assets/splash.svg

@@ -1,4 +1,4 @@
-<svg width="1024" height="1024" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg">
+<svg width="1497" height="2656"  viewBox="0 0 1497 2656" xmlns="http://www.w3.org/2000/svg">
   <defs>
     <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
       <stop offset="0%" style="stop-color:#b870ff;stop-opacity:1" />
@@ -9,21 +9,24 @@
       <stop offset="100%" stop-color="#a64aff" />
     </linearGradient>
   </defs>
-  <rect width="1024" height="1024" fill="url(#bg_grad)" rx="190" />
-  <g transform="translate(112, 112) scale(1.55)">
   
-    <text x="256" y="320"
+  <g transform="translate(748.5 1328) scale(0.4) translate(-512 -512)">
-          fill="#F0F0F5"
+    <rect width="1024" height="1024" fill="url(#bg_grad)" rx="190" />
-          font-family="Nunito"
+    <g transform="translate(112, 112) scale(1.55)">
-          font-size="280"
-          font-weight="900"
-          text-anchor="middle"
-          letter-spacing="-5">MN</text>
   
-    <g opacity="0.6">
+      <text x="256" y="320"
-      <circle cx="190" cy="405" r="15" fill="#F0F0F5" />
+            fill="#F0F0F5"
-      <circle cx="256" cy="405" r="15" fill="white" />
+            font-family="Nunito"
-      <circle cx="322" cy="405" r="15" fill="#F0F0F5" />
+            font-size="280"
+            font-weight="900"
+            text-anchor="middle"
+            letter-spacing="-5">MN</text>
+  
+      <g opacity="0.6">
+        <circle cx="190" cy="405" r="15" fill="#F0F0F5" />
+        <circle cx="256" cy="405" r="15" fill="white" />
+        <circle cx="322" cy="405" r="15" fill="#F0F0F5" />
+      </g>
     </g>
   </g>
 </svg>

webroot/index.html

@@ -55,51 +55,21 @@
         </sidebar>
         <sidebar class="second" id="roomsbar">
             <roomtopbar>
-                <blah>title.home</blah>
+                <inherit></inherit>
             </roomtopbar>
-            <div class="sidebar-section-header">
+            <roomcontent2>
-                <button class="collapse-text-button" id="collapse-dms">
+            </roomcontent2>
-                    <span><blah>title.dms</blah></span>
-                    <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-                         stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                </button>
-                <button class="add-action-button" id="add-dm-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
-                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="12" y1="5" x2="12" y2="19"></line>
-                        <line x1="5" y1="12" x2="19" y2="12"></line>
-                    </svg>
-                </button>
-            </div>
-    
-            <div class="sidebar-section-header">
-                <button class="collapse-text-button" id="collapse-groups">
-                    <span><blah>title.groups</blah></span>
-                    <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
-                         stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <polyline points="6 9 12 15 18 9"></polyline>
-                    </svg>
-                </button>
-                <button class="add-action-button" id="add-group-btn">
-                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
-                         stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                        <line x1="12" y1="5" x2="12" y2="19"></line>
-                        <line x1="5" y1="12" x2="19" y2="12"></line>
-                    </svg>
-                </button>
-            </div>
         </sidebar>
-    
         <roomcontent>
             <roomtopbar>
+                <inherit></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
         </roomcontent>
         <sidebar class="second" id="roomdetailsbar" style="display: none;">
             <roomtopbar>
+                <inherit></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
@@ -115,7 +85,7 @@
     async function start() {
         updateLoadingStatus("loading.loading");
         try {
-            switchRoomContent("title.splash", splashScreen, false, "", true);
+            gotoHome();
             if (host != null)
             {
                 await updateProtocolAndUrl(host);

webroot/main.js

@@ -29,9 +29,6 @@ try {
     
     var loadingStatus = document.getElementById("loadingstatus");
 
-    var collapseDmsBtn = document.getElementById("collapse-dms");
-    var collapseGroupsBtn = document.getElementById("collapse-groups");
-
     var addDmBtn = document.getElementById("add-dm-btn");
     var addGroupBtn = document.getElementById("add-group-btn");
 
@@ -45,13 +42,14 @@ try {
 
     var roomDetailsBar = document.getElementById("roomdetailsbar");
     var roomContent = document.getElementsByTagName("roomcontent")[0];
-    var roomsBar = document.getElementById("roomsbar");
+    var roomsBar = document.getElementsByTagName("roomcontent2")[0];
     var sideBar = document.getElementsByTagName("sidebar")[0];
 
-    var roomContentMain = document.getElementsByTagName("roomcontent2")[0];
+    var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
 
     var roomContentBar = roomContent.children[0];
 
+    var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
     var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
 
     var sidebarProfile = document.getElementById("sidebar-profile");
@@ -685,11 +683,60 @@ function showFixedContextMenu(rect, html) {
 
     fixedContextMenu.classList.add("show");
 }
+async function switchRoomsBar(title, content) {
+    let roomsTopBarTransition = roomsTopBar.children.item(0);
+    
+    roomsBar.style.transform = "scale(0.85)";
+    roomsBar.style.opacity = "0";
+
+    roomsTopBarTransition.style.transform = "scale(0.85)";
+    roomsTopBarTransition.style.opacity = "0";
+    
+
+    await delay(200);
+
+    roomsTopBarTransition.innerHTML = processBlah(title);
+    
+
+    let parser = new DOMParser();
+    let doc = parser.parseFromString(content, "text/html");
+
+    let blahTags = doc.getElementsByTagName("blah");
+    for (let i = 0; i < blahTags.length; i++) {
+        blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
+    }
+    blahTags = doc.getElementsByClassName("blah");
+    for (let i = 0; i < blahTags.length; i++) {
+        blahTags[i].innerHTML = processBlah(blahTags[i].innerHTML);
+    }
+
+    let placeholders = doc.querySelectorAll("[placeholder]");
+    for (let i = 0; i < placeholders.length; i++) {
+        if (placeholders[i].placeholder.startsWith("{blah("))
+        {
+            let value = placeholders[i].placeholder.split("{blah(")[1].split(")}")[0];
+            placeholders[i].placeholder = processBlah(value);
+        }
+    }
+
+    roomsBar.innerHTML = doc.body.innerHTML;
+
+    roomsBar.style.transform = "";
+    roomsBar.style.opacity = "";
+
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+}
 async function switchRoomContent(title, content, showRoomBar, icon = "", skipMobileSlide = false)
 {
+    let roomsTopBarTransition = roomTopBar.children.item(0);
+    
     roomContentMain.style.transform = "scale(0.85)";
     roomContentMain.style.opacity = "0";
 
+    roomsTopBarTransition.style.transform = "scale(0.85)";
+    roomsTopBarTransition.style.opacity = "0";
+
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
     if (window.innerWidth <= 52 * rem && !skipMobileSlide) {
         if (title != "title.splash") //do not show splash on mobile
@@ -706,7 +753,7 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     
     let detailsBtnHtml = showRoomBar ? detailsBtn : '';
 
-    roomTopBar.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
+    roomsTopBarTransition.innerHTML = `${backBtnHtml}${icon}<space></space><inherit>${processBlah(title)}</inherit><div class="flex-spacer"></div>${detailsBtnHtml}`;
     roomDetailsBar.style.display = showRoomBar ? "flex" : "none";
 
     let parser = new DOMParser();
@@ -735,25 +782,37 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     roomContentMain.style.transform = "";
     roomContentMain.style.opacity = "";
 
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+
     
 }
-collapseDmsBtn.addEventListener("click", () => {
+function clickCollapseDms()
+{
+    var collapseDmsBtn = document.getElementById("collapse-dms");
+    
     collapseDmsBtn.classList.toggle("collapsed");
-});
+}
-collapseGroupsBtn.addEventListener("click", () => {
+function clickCollapseGroups()
+{
+    var collapseGroupsBtn = document.getElementById("collapse-groups");
+    
     collapseGroupsBtn.classList.toggle("collapsed");
-});
+}
-addDmBtn.addEventListener("click", async () => {
+function clickAddGroup()
-    switchRoomContent("title.create.dm", addDmScreen, false);
+{
-});
-addGroupBtn.addEventListener("click", async () => {
     switchRoomContent("title.create.group", createGroupScreen, false);
-});
+}
+function clickAddDm()
+{
+    switchRoomContent("title.create.dm", addDmScreen, false);
+}
 
 
 var indicatorBeforeFixedMenu;
 sidebarAddButton.addEventListener("click", (e) => {
     e.stopPropagation();
+    console.log("hi")
     if (fixedContextMenu.classList.contains("show")) {
         fixedContextMenu.classList.remove("show");
         setActiveSidebarIndicator(indicatorBeforeFixedMenu);
@@ -768,7 +827,9 @@ document.addEventListener("click", (e) => {
     if (fixedContextMenu.classList.contains("show")) {
         if (!fixedContextMenu.contains(e.target)) {
             fixedContextMenu.classList.remove("show");
-            setActiveSidebarIndicator(indicatorBeforeFixedMenu);
+            if (!e.target.closest('sidebarelement')) {
+                setActiveSidebarIndicator(indicatorBeforeFixedMenu);
+            }
         }
     }
 
@@ -803,6 +864,7 @@ function gotoJoinSpace() {
 function gotoHome() {
     setActiveSidebarIndicator(sidebarHomeIndicator);
     switchRoomContent("title.splash", splashScreen, false);
+    switchRoomsBar("title.home", homeRoomBar);
 }
 
 function setActiveSidebarIndicator(element, skipDisabling = false)
@@ -833,18 +895,70 @@ function mobileNavBack() {
 function mobileNavDetails() {
     mainScreen.classList.add('mobile-details');
 }
+
+
 let touchStartX = 0;
 let touchEndX = 0;
 let touchStartY = 0;
 let touchEndY = 0;
+let touchMoved = false;
+
 document.addEventListener('touchstart', e => {
     touchStartX = e.changedTouches[0].screenX;
     touchStartY = e.changedTouches[0].screenY;
-});
+    touchMoved = false;
+
+    activeTouchButton = e.target.closest('button, input');
+    if (activeTouchButton) {
+        activeTouchButton.classList.add('is-pressed');
+    }
+}, { passive: true });
+
+document.addEventListener('touchmove', e => {
+    if (!touchMoved) {
+        const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
+        let diffX = Math.abs(e.changedTouches[0].screenX - touchStartX);
+        let diffY = Math.abs(e.changedTouches[0].screenY - touchStartY);
+        if (diffX > rem || diffY > rem) {
+            touchMoved = true;
+
+            if (activeTouchButton) {
+                activeTouchButton.classList.remove('is-pressed');
+                activeTouchButton = null;
+            }
+        }
+    }
+}, { passive: true });
+
 document.addEventListener('touchend', e => {
     touchEndX = e.changedTouches[0].screenX;
     touchEndY = e.changedTouches[0].screenY;
     handleMobileSwipe();
+
+    if (activeTouchButton) {
+        activeTouchButton.classList.remove('is-pressed');
+
+        if (!touchMoved) {
+            if (e.cancelable) {
+                e.preventDefault();
+            }
+            activeTouchButton.click();
+        }
+        activeTouchButton = null;
+    }
+});
+
+document.addEventListener('touchcancel', () => {
+    if (activeTouchButton) {
+        activeTouchButton.classList.remove('is-pressed');
+        activeTouchButton = null;
+    }
+});
+
+document.addEventListener('contextmenu', e => {
+    if (e.target.closest('button')) {
+        e.preventDefault();
+    }
 });
 function handleMobileSwipe() {
     const rem = parseFloat(getComputedStyle(document.documentElement).fontSize);
@@ -853,7 +967,7 @@ function handleMobileSwipe() {
     let diffX = touchEndX - touchStartX;
     let diffY = touchEndY - touchStartY;
 
-    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 60) {
+    if (Math.abs(diffX) > Math.abs(diffY) && Math.abs(diffX) > 4 * rem) {
         if (diffX > 0) {
             mobileNavBack();
         } else {

webroot/screens.js

@@ -73,6 +73,45 @@ var joinSpaceScreen = `
 </div>
 `;
 
+//roombars
+var homeRoomBar = `
+<div class="sidebar-section-header">
+                    <button class="collapse-text-button" id="collapse-dms" onclick="clickCollapseDms()">
+                        <span><blah>title.dms</blah></span>
+                        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                             stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="6 9 12 15 18 9"></polyline>
+                        </svg>
+                    </button>
+                    <button class="add-action-button" id="add-dm-btn" onclick="clickAddDm()">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
+                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
+                    </button>
+                </div>
+
+                <div class="sidebar-section-header">
+                    <button class="collapse-text-button" id="collapse-groups" onclick="clickCollapseGroups()">
+                        <span><blah>title.groups</blah></span>
+                        <svg class="chevron" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none"
+                             stroke="var(--text-color)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <polyline points="6 9 12 15 18 9"></polyline>
+                        </svg>
+                    </button>
+                    <button class="add-action-button" id="add-group-btn" onclick="clickAddGroup()">
+                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="var(--text-color)"
+                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                            <line x1="12" y1="5" x2="12" y2="19"></line>
+                            <line x1="5" y1="12" x2="19" y2="12"></line>
+                        </svg>
+                    </button>
+                </div>
+`;
+
+
+
 
 //context menus
 var addSpaceMenu = `

webroot/style.css

@@ -87,9 +87,13 @@ button, input {
     transform: translateZ(0);
     will-change: transform;
     transform-origin: center center;
+
+    touch-action: manipulation;
+    -webkit-touch-callout: none;
 }
 input {
     padding-left: calc(var(--button-margin) * 2);
+    -webkit-touch-callout: default;
 }
 
 
@@ -143,9 +147,6 @@ indicator.active {
     pointer-events: none !important;
 }
 
-button:active, input:active {
-    transform: var(--press-scale);
-}
 roomcontent {
     display: flex;
     flex-direction: column;
@@ -348,13 +349,14 @@ herotitle {
         color: var(--text-color);
     }
 }
-button:active, input:active {
+button:active, button.is-pressed, input:active, input.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
+    transform: var(--press-scale); 
 }
-.submit-button:active {
+.submit-button:active, .submit-button.is-pressed {
     background-color: rgba(255, 255, 255, 0.5);
 }
-.add-action-button:active {
+.add-action-button:active, .add-action-button.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
     color: var(--text-color);
 }
@@ -372,8 +374,9 @@ blah, inherit, .inherit {
     all: inherit;
     padding: 0;
     margin: 0;
-    display: inline;
+    display: flex;
     opacity: 1;
+    border: none;
 }
 space{
     margin-left: 0.4rem;
@@ -428,9 +431,9 @@ space{
     color: var(--text-color);
     cursor: pointer;
 }
-.mobile-nav-btn:active {
+.mobile-nav-btn:active, .mobile-nav-btn.is-pressed {
     background-color: rgba(255, 255, 255, 0.1);
-    border-radius: 0.8rem;
+    transform: var(--press-scale);
 }
 .mobile-nav-btn.right {
     margin-right: 0;