2 files changed, 58 insertions, 8 deletions

diff --git a/view/css/conversation.css b/view/css/conversation.css
index ef55d83e6..b1b405c9b 100644
--- a/view/css/conversation.css
+++ b/view/css/conversation.css
@@ -195,7 +195,8 @@ a.wall-item-name-link {
 
 .item-highlight,
 .item-indent,
-.wall-item-comment {
+.wall-item-comment,
+.thread-wrapper {
 	position: relative;
 }
 
@@ -214,9 +215,10 @@ a.wall-item-name-link {
 	position: absolute;
 	pointer-events: none;
 	box-shadow: inset .15rem 0 0 0 var(--hz-item-highlight);
-	height: 100%;
 	width: 100%;
 	top: 0;
+	bottom: 0;
+	margin: var(--bs-border-radius) 0 var(--bs-border-radius) 0;
 }
 
 .item-highlight-fade {
@@ -251,6 +253,23 @@ a.wall-item-name-link {
 	opacity: 0.5;
 }
 
+.wall-item-backdrop::before {
+	content: '';
+	position: absolute;
+	inset: 0;
+	backdrop-filter: saturate(0%) brightness(90%);
+	z-index: 1;
+}
+
+
+.wall-item-expanded {
+	position: relative;
+	border: 1px solid var(--bs-danger);
+	border-radius: var(--bs-border-radius);
+	background-color: var(--bs-body-bg);
+	z-index: 2;
+}
+
 /* comment_item */
 
 
diff --git a/view/js/main.js b/view/js/main.js
index 919cd091e..d729acbeb 100644
--- a/view/js/main.js
+++ b/view/js/main.js
@@ -113,7 +113,7 @@ $(document).ready(function() {
 				el.classList.remove('item-highlight');
 			});
 
-			if (!parentSubWrapperIndented) {
+			if (!parentSubWrapperIndented && userClick) {
 				threadWrapper.classList.add('item-highlight');
 			}
 			else {
@@ -149,24 +149,54 @@ $(document).ready(function() {
 		const targetElement = event.target.closest('.dropdown-item-expand');
 		if (!targetElement) return;
 
+		// Disable the button we just clicked
+		targetElement.classList.add('disabled');
 		event.preventDefault();
 
+		document.querySelectorAll('.thread-wrapper.item-highlight').forEach(el => {
+			el.classList.remove('item-highlight');
+		});
+
 		const id = targetElement.dataset.itemId;
 		const uuid = targetElement.dataset.itemUuid;
+		const subWrapper = document.getElementById(`wall-item-sub-thread-wrapper-${id}`);
 
 		const loading = document.getElementById('like-rotator-' + id);
-		loading.style.display = 'block';
-
-		document.querySelectorAll('.thread-wrapper.item-highlight').forEach(el => {
-			el.classList.remove('item-highlight');
-		});
 
 		const wrapper = document.getElementById('thread-wrapper-' + id);
+		const parent = wrapper.closest('.generic-content-wrapper');
+
+		parent.classList.add('wall-item-backdrop');
+		wrapper.classList.add('wall-item-expanded', 'shadow');
+
 		if (!wrapper.classList.contains('toplevel_item')) {
 			document.documentElement.style.setProperty('--hz-item-highlight', stringToHslColor(uuid));
 		}
 
 		autoExpand(id);
+
+		// Close and reset if dbl clicked
+		wrapper.addEventListener('dblclick', function(event) {
+
+			parent.classList.remove('wall-item-backdrop');
+			wrapper.classList.remove('wall-item-expanded', 'shadow');
+
+			wrapper.querySelectorAll('.dropdown-item-expand').forEach(el => {
+				el.classList.remove('disabled');
+			});
+
+			wrapper.querySelectorAll('.wall-item-comment').forEach(el => {
+				el.classList.remove('disabled', 'expanded');
+			});
+
+			subWrapper.querySelectorAll('.wall-item-comment').forEach(el => {
+				el.classList.remove('disabled', 'expanded');
+			});
+
+			subWrapper.innerHTML = '';
+			subWrapper.classList.remove('item-indent');
+		})
+
 	});
 
 	// @hilmar |->
@@ -1563,6 +1593,7 @@ const autoExpand = (function () {
 	async function autoExpand(id) {
 		const loading = document.getElementById('like-rotator-' + id);
 		const maxIterations = 10;
+		clickedElements.clear();
 
 		try {
 			// Step 1: Ensure initial button is clicked