From 3b2d474f3dda4d858dfc7a200cda854408e8c4ce Mon Sep 17 00:00:00 2001
From: olcxja <olcxja@olcxja.ovh>
Date: Fri, 15 May 2026 10:31:09 +0200
Subject: [PATCH] Add switchDetailsContent function

---
 android/app/src/main/assets/public/index.html |   6 +-
 android/app/src/main/assets/public/main.js    |  55 ++++++++++++++++
 android/app/src/main/assets/public/screens.js |  62 +++++++++---------
 android/app/src/main/assets/public/style.css  |   2 +-
 electron/assets/icon.png                      | Bin 14827 -> 14827 bytes
 icons/icon.png                                | Bin 14827 -> 14827 bytes
 webroot/main.js                               |  55 ++++++++++++++++
 7 files changed, 145 insertions(+), 35 deletions(-)

diff --git a/android/app/src/main/assets/public/index.html b/android/app/src/main/assets/public/index.html
index 20a24daa..a2972ba4 100644
--- a/android/app/src/main/assets/public/index.html
+++ b/android/app/src/main/assets/public/index.html
@@ -55,21 +55,21 @@
         </sidebar>
         <sidebar class="second" id="roomsbar">
             <roomtopbar>
-                <inherit></inherit>
+                <inherit style="display: flex;"></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
         </sidebar>
         <roomcontent>
             <roomtopbar>
-                <inherit></inherit>
+                <inherit style="display: flex;"></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
         </roomcontent>
         <sidebar class="second" id="roomdetailsbar" style="display: none;">
             <roomtopbar>
-                <inherit></inherit>
+                <inherit style="display: flex;"></inherit>
             </roomtopbar>
             <roomcontent2>
             </roomcontent2>
diff --git a/android/app/src/main/assets/public/main.js b/android/app/src/main/assets/public/main.js
index 9bcb088d..1c36b640 100644
--- a/android/app/src/main/assets/public/main.js
+++ b/android/app/src/main/assets/public/main.js
@@ -47,10 +47,13 @@ try {
 
     var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
 
+    var roomDetailsMain = document.getElementsByTagName("roomcontent2")[2];
+
     var roomContentBar = roomContent.children[0];
 
     var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
     var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
+    var detailsTopBar = document.getElementsByTagName("roomtopbar")[2];
 
     var sidebarProfile = document.getElementById("sidebar-profile");
     var sidebarProfileButton = sidebarProfile.children.item(1);
@@ -786,6 +789,58 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     roomsTopBarTransition.style.opacity = "";
 
     
+}
+async function switchDetailsContent(title, content)
+{
+    let roomsTopBarTransition = detailsTopBar.children.item(0);
+
+    roomDetailsMain.style.transform = "scale(0.85)";
+    roomDetailsMain.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) {
+    }
+    else
+    {
+        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);
+        }
+    }
+
+    roomDetailsMain.innerHTML = doc.body.innerHTML;
+
+    roomDetailsMain.style.transform = "";
+    roomDetailsMain.style.opacity = "";
+
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+
+
 }
 function clickCollapseDms()
 {
diff --git a/android/app/src/main/assets/public/screens.js b/android/app/src/main/assets/public/screens.js
index 4877030d..af35fcf2 100644
--- a/android/app/src/main/assets/public/screens.js
+++ b/android/app/src/main/assets/public/screens.js
@@ -76,38 +76,38 @@ var joinSpaceScreen = `
 //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>
+    <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>
+<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>
 `;
 
 
diff --git a/android/app/src/main/assets/public/style.css b/android/app/src/main/assets/public/style.css
index cd45fafa..f85a3b4a 100644
--- a/android/app/src/main/assets/public/style.css
+++ b/android/app/src/main/assets/public/style.css
@@ -374,7 +374,7 @@ blah, inherit, .inherit {
     all: inherit;
     padding: 0;
     margin: 0;
-    display: flex;
+    display: inline;
     opacity: 1;
     border: none;
 }
diff --git a/electron/assets/icon.png b/electron/assets/icon.png
index aded4a109148c8dec82a598e9378697a86642970..6bb1c40cf6602f9acbf8d38d4ca8273e916dc99e 100644
GIT binary patch
delta 77
zcmaD|{JMBTBb%Jn_iMYhZ*1Rh!EbC}Won^qU|?ln!1^ud)8tS~C1kOZ)vx>}w^^zp
Oiz)9rJ#q3bOG5yT9UGSb

delta 77
zcmaD|{JMBTBO9|3TVmYIjqUp__zjG$ObxUR46F<cT+SSvJ~`A<30cf^Vx{)vHcM4x
Ov80xWFOzp!8Ug_FUl^?b

diff --git a/icons/icon.png b/icons/icon.png
index aded4a109148c8dec82a598e9378697a86642970..6bb1c40cf6602f9acbf8d38d4ca8273e916dc99e 100644
GIT binary patch
delta 77
zcmaD|{JMBTBb%Jn_iMYhZ*1Rh!EbC}Won^qU|?ln!1^ud)8tS~C1kOZ)vx>}w^^zp
Oiz)9rJ#q3bOG5yT9UGSb

delta 77
zcmaD|{JMBTBO9|3TVmYIjqUp__zjG$ObxUR46F<cT+SSvJ~`A<30cf^Vx{)vHcM4x
Ov80xWFOzp!8Ug_FUl^?b

diff --git a/webroot/main.js b/webroot/main.js
index 9bcb088d..1c36b640 100644
--- a/webroot/main.js
+++ b/webroot/main.js
@@ -47,10 +47,13 @@ try {
 
     var roomContentMain = document.getElementsByTagName("roomcontent2")[1];
 
+    var roomDetailsMain = document.getElementsByTagName("roomcontent2")[2];
+
     var roomContentBar = roomContent.children[0];
 
     var roomsTopBar = document.getElementsByTagName("roomtopbar")[0];
     var roomTopBar = document.getElementsByTagName("roomtopbar")[1];
+    var detailsTopBar = document.getElementsByTagName("roomtopbar")[2];
 
     var sidebarProfile = document.getElementById("sidebar-profile");
     var sidebarProfileButton = sidebarProfile.children.item(1);
@@ -786,6 +789,58 @@ async function switchRoomContent(title, content, showRoomBar, icon = "", skipMob
     roomsTopBarTransition.style.opacity = "";
 
     
+}
+async function switchDetailsContent(title, content)
+{
+    let roomsTopBarTransition = detailsTopBar.children.item(0);
+
+    roomDetailsMain.style.transform = "scale(0.85)";
+    roomDetailsMain.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) {
+    }
+    else
+    {
+        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);
+        }
+    }
+
+    roomDetailsMain.innerHTML = doc.body.innerHTML;
+
+    roomDetailsMain.style.transform = "";
+    roomDetailsMain.style.opacity = "";
+
+    roomsTopBarTransition.style.transform = "";
+    roomsTopBarTransition.style.opacity = "";
+
+
 }
 function clickCollapseDms()
 {