improved indentation and its logic

4 files changed, 36 insertions, 17 deletions

diff --git a/boot.php b/boot.php
index 82cbc78aa..cad3b3b79 100644
--- a/boot.php
+++ b/boot.php
@@ -70,7 +70,7 @@ require_once('include/security.php');
 
 
 define('PLATFORM_NAME', 'hubzilla');
-define('STD_VERSION', '10.3.48');
+define('STD_VERSION', '10.3.49');
 define('ZOT_REVISION', '6.0');
 
 define('DB_UPDATE_VERSION', 1263);
diff --git a/include/conversation.php b/include/conversation.php
index 608696c7a..bd1b7f863 100644
--- a/include/conversation.php
+++ b/include/conversation.php
@@ -1446,7 +1446,7 @@ function get_response_button_text($v, $count = 0) {
 			return ['label' => tt('Dislike','Dislikes',$count,'noun'), 'icon' => 'hand-thumbs-down', 'class' => 'dislike', 'action' => 'dolike'];
 			break;
 		case 'comment':
-			return ['label' => tt('Reply','Replies',$count,'noun'), 'icon' => 'chat-dots', 'class' => 'comment', 'action' => ''];
+			return ['label' => tt('Reply','Replies',$count,'noun'), 'icon' => 'chat', 'class' => 'comment', 'action' => ''];
 			break;
 		case 'accept':
 			return ['label' => tt('Attending','Attending',$count,'noun'), 'icon' => 'calendar-check', 'class' => 'accept', 'action' => 'dolike'];
diff --git a/view/css/conversation.css b/view/css/conversation.css
index 52e83a54d..1675044d8 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -193,7 +193,8 @@ a.wall-item-name-link {
 	color: var(--bs-primary);
 }
 
-.item-highlight {
+.item-highlight,
+.item-indent {
 	position: relative;
 }
 
@@ -227,6 +228,24 @@ a.wall-item-name-link {
 	to   { background-color: none; }
 }
 
+.item-indent {
+	/* This must be equal to .item.indent:before width */
+	padding-left: .75rem;
+}
+
+.item-indent:before {
+	content: '';
+	position: absolute;
+	height: 100%;
+	width: .75rem;
+	top: 0;
+	left: 0;
+	border-color: var(--bs-light-border-subtle);
+	border-radius: 0 var(--bs-border-radius) 0 0;
+	border-style: solid;
+	border-width: 1px 1px 0 0;
+}
+
 /* comment_item */
 
 
diff --git a/view/js/main.js b/view/js/main.js
index 51e4b849d..14745c15e 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -118,7 +118,10 @@ $(document).ready(function() {
 
 		document.querySelectorAll('.thread-wrapper.item-highlight').forEach(el => {
 			el.classList.remove('item-highlight');
-			el.style.boxShadow = '';
+		});
+
+		document.querySelectorAll('.wall-item-sub-thread-wrapper.item-indent').forEach(el => {
+			el.classList.remove('item-indent');
 		});
 
 		const wrapper = document.getElementById('thread-wrapper-' + id);
@@ -1406,7 +1409,7 @@ function request(id, mid, verb, parent, uuid, userClick) {
 			});
 
 			wrapper.classList.add('item-highlight');
-			subWrapper.classList.remove('ms-3');
+			subWrapper.classList.remove('item-indent');
 			document.documentElement.style.setProperty('--hz-item-highlight', stringToHlsColor(uuid));
 		}
 
@@ -1426,8 +1429,10 @@ function request(id, mid, verb, parent, uuid, userClick) {
 				updateRelativeTime('.autotime');
 				collapseHeight();
 
-				const icon = document.querySelector('#wall-item-comment-' + id + ' i');
-				icon.classList.replace('bi-chat-dots', 'bi-chat');
+				const icon = document.querySelector('#wall-item-comment-' + id);
+				if (icon) {
+					icon.classList.add('disabled');
+				}
 
 				if (userClick) {
 					loading.style.display = 'none';
@@ -1504,7 +1509,7 @@ function injectWithAnimation(containerId, parsedDoc, overwrite = false) {
 const autoExpand = (function () {
 	const clickedElements = new Set(); // Stores clicked button references
 
-	function waitForElement(selector, timeout = 5000) {
+	function waitForElement(selector, timeout = 3000) {
 		return new Promise((resolve, reject) => {
 			// Check if the element already exists
 			const element = document.querySelector(selector);
@@ -1564,21 +1569,16 @@ const autoExpand = (function () {
 				await waitForElement(commentSelector);
 
 				document.querySelectorAll(subs).forEach(el => {
-					el.classList.add('ms-2');
-					el.classList.add('border-start');
+					if (el.children.length > 0) {
+						el.classList.add('item-indent');
+					}
 				});
 
 				const expandButtons = document.querySelectorAll(commentSelector);
-
-
 				for (const btn of expandButtons) {
 					if (!clickedElements.has(btn)) {
-						// Wait between iterations to allow UI to update
-
-				//		await new Promise(res0 => setTimeout(res0, 500));
 						btn.click();
 						clickedElements.add(btn);
-
 						newButtonsFound = true;
 						// Optional: await waitForElement(...) to wait for new content
 					}
@@ -1586,7 +1586,7 @@ const autoExpand = (function () {
 
 				// Wait between iterations to allow UI to update
 				if (newButtonsFound) {
-					await new Promise(res => setTimeout(res, 1000));
+					await new Promise(res => setTimeout(res, 700));
 				}
 
 			} while (newButtonsFound);