Fix sidebar jitter & improve ui

2026-05-13 12:39:10 +02:00 · 2026-05-13 12:39:10 +02:00 · 8402564b28
commit 8402564b28
parent 3c71ba9b73
4 changed files with 107 additions and 5 deletions
--- a/webroot/index.html
+++ b/webroot/index.html
@ -12,7 +12,7 @@
    <sidebarelement id="sidebar-home">
        <indicator class="active">
        </indicator>
-        <button class="icon-button" aria-label="Homepage">
+        <button class="icon-button" aria-label="Homepage" onclick="gotoHome()">
            <svg viewBox="-1 -1 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                        d="M1 6V15H6V11C6 9.89543 6.89543 9 8 9C9.10457 9 10 9.89543 10 11V15H15V6L8 0L1 6Z"
@ -29,7 +29,7 @@
    <sidebarelement id="sidebar-add">
        <indicator>
        </indicator>
-        <button class="icon-button" aria-label="Add space">
+        <button class="icon-button" aria-label="Add space" onclick="gotoCreateSpace()">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <line x1="12" y1="5" x2="12" y2="19"></line>
@ -38,6 +38,13 @@
        </button>
    </sidebarelement>
    <hr>
+    <sidebarelement id="sidebar-profile" class="bottom-element">
+        <indicator>
+        </indicator>
+        <button class="icon-button" aria-label="Profile"  onclick="gotoSideProfilePopup()">
+            <img id="sidebar-pfp" src="./pfpexamp.png">
+        </button>
+    </sidebarelement>
 </sidebar>

 <sidebar class="second" id="roomsbar">
@ -158,6 +165,10 @@
            showBlahNotification("error:chat.add.failed");
        }
    }
+    
+    async function createGroup() {
+        
+    }

    start();
 </script>
--- a/webroot/main.js
+++ b/webroot/main.js
@ -49,6 +49,18 @@ try {

    var roomContentBar = roomContent.children[0];

+    var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
+
+    var sidebarProfile = document.getElementById("sidebar-profile");
+    var sidebarProfileButton = sidebarProfile.children.item(1);
+    var sidebarProfileIndicator = sidebarProfile.children.item(0);
+
+    var sidebarInbox = document.getElementById("sidebar-inbox");
+    var sidebarInboxButton = sidebarInbox.children.item(1);
+    var sidebarInboxIndicator = sidebarInbox.children.item(0);
+
+    
+    
 } catch (e) {
 }

@ -519,6 +531,8 @@ collapseGroupsBtn.addEventListener("click", () => {
 });

 addDmBtn.addEventListener("click", () => {
+    roomTopBar.innerHTML = "Invite to dm";
+    roomDetailsBar.style.display = "none";
    roomContentMain.innerHTML =
        `
        <div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
@ -528,7 +542,7 @@ addDmBtn.addEventListener("click", () => {
            <br>
            <div class="input-group">
                <label for="addchat-username">Username</label>
-                <input type="text" id="addchat-username" placeholder="@username:serverhost" class="forminput">
+                <input type="text" id="addchat-username" placeholder="username:serverhost" class="forminput">
            </div>
            <div class="input-group">
                <button class="submit-button" onclick="addDm()">
@ -536,10 +550,29 @@ addDmBtn.addEventListener("click", () => {
                </button>
            </div>
        </div>
-        `
+        `;
 });
 addGroupBtn.addEventListener("click", () => {
-
+    roomTopBar.innerHTML = "Create group";
+    roomDetailsBar.style.display = "none";
+    roomContentMain.innerHTML =
+        `
+        <div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M500-482q29-32 44.5-73t15.5-85q0-44-15.5-85T500-798q60 8 100 53t40 105q0 60-40 105t-100 53Zm220 322v-120q0-36-16-68.5T662-406q51 18 94.5 46.5T800-280v120h-80Zm80-280v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80Zm-593-87q-47-47-47-113t47-113q47-47 113-47t113 47q47 47 47 113t-47 113q-47 47-113 47t-113-47ZM0-160v-112q0-34 17.5-62.5T64-378q62-31 126-46.5T320-440q66 0 130 15.5T576-378q29 15 46.5 43.5T640-272v112H0Zm320-400q33 0 56.5-23.5T400-640q0-33-23.5-56.5T320-720q-33 0-56.5 23.5T240-640q0 33 23.5 56.5T320-560ZM80-240h480v-32q0-11-5.5-20T540-306q-54-27-109-40.5T320-360q-56 0-111 13.5T100-306q-9 5-14.5 14T80-272v32Zm240-400Zm0 400Z"/></svg>
+            <herotitle>Create Group</herotitle>
+            <p>Create a private, encrypted group</p>
+            <br>
+            <div class="input-group">
+                <label for="creategroup-name">Name</label>
+                <input type="text" id="creategroup-name" placeholder="My group" class="forminput">
+            </div>
+            <div class="input-group">
+                <button class="submit-button" onclick="createGroup()">
+                    Create group
+                </button>
+            </div>
+        </div>
+        `;
 });


@ -557,3 +590,46 @@ sidebarAddButton.addEventListener("mouseleave", () => {
    sidebarAddIndicator.classList.remove("hover");
 });

+sidebarProfileButton.addEventListener("mouseenter", () => {
+    sidebarProfileIndicator.classList.add("hover");
+});
+sidebarProfileButton.addEventListener("mouseleave", () => {
+    sidebarProfileIndicator.classList.remove("hover");
+});
+
+sidebarInboxButton.addEventListener("mouseenter", () => {
+    sidebarInboxIndicator.classList.add("hover");
+});
+sidebarInboxButton.addEventListener("mouseleave", () => {
+    sidebarInboxIndicator.classList.remove("hover");
+});
+
+
+function gotoSideProfilePopup() {
+    
+}
+function gotoCreateSpace() {
+    roomTopBar.innerHTML = "Create space";
+    roomDetailsBar.style.display = "none";
+    roomContentMain.innerHTML =
+        `
+        <div style="display: flex;justify-content: center;align-items: center;height:100%;flex-direction: column;text-align: center;">
+            <svg xmlns="http://www.w3.org/2000/svg" width="3rem" viewBox="0 -960 960 960" fill="var(--text-color)"><path d="M80-120v-720h400v160h400v320h-80v-240H480v80h80v80h-80v80h80v80h-80v80h160v80H80Zm80-80h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm160 480h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80Zm0-160h80v-80h-80v80ZM800-40v-80h-80v-80h80v-80h80v80h80v80h-80v80h-80ZM640-440v-80h80v80h-80Zm0 160v-80h80v80h-80Z"/></svg>
+            <herotitle>Create Space</herotitle>
+            <p>Create a space for your community</p>
+            <br>
+            <div class="input-group">
+                <label for="addgroup-name">Name</label>
+                <input type="text" id="createspace-name" placeholder="My space" class="forminput">
+            </div>
+            <div class="input-group">
+                <button class="submit-button" onclick="createGroup()">
+                    Create space
+                </button>
+            </div>
+        </div>
+        `;
+}
+function gotoHome() {
+
+}
--- a/webroot/pfpexamp.png
+++ b/webroot/pfpexamp.png
--- a/webroot/style.css
+++ b/webroot/style.css
@ -68,6 +68,11 @@ button, input {
    align-items: center;
    justify-content: flex-start;
    border: var(--border-width) solid var(--light-border-color);
+
+    backface-visibility: hidden;
+    transform: translateZ(0); 
+    will-change: transform;   
+    transform-origin: center center;
 }
 input {
    padding-left: calc(var(--button-margin) * 2);
@ -120,11 +125,16 @@ indicator.active {
    height: var(--icon-button-height);
    width: var(--icon-button-height);
    justify-content: center;
+    overflow: hidden;
 }
 .icon-button svg {
    width: var(--icon-button-size);
    height: var(--icon-button-size);
 }
+.icon-button img {
+    width: calc(var(--icon-button-height) - (var(--border-width) * 2));
+    height: calc(var(--icon-button-height) - (var(--border-width) * 2));
+}
 button:hover, input:hover {
    background-color: rgba(255, 255, 255, 0.1);
 }
@ -340,4 +350,9 @@ herotitle {

 .submit-button:hover {
    background-color: rgba(255, 255, 255, 0.5);
+}
+
+
+.bottom-element {
+    margin-top: auto;
 }