feat(style): collapse comment by clicking indent line

Author: Algorithm5838

src/subreddit.rs

@@ -3,7 +3,7 @@
 use crate::{config, utils};
 // CRATES
 use crate::utils::{
-	catch_random, error, filter_posts, format_num, format_url, info, nsfw_landing, param, redirect, rewrite_urls, setting, template, val, Post, Preferences, Subreddit,
+	catch_random, error, filter_posts, format_num, format_url, info, nsfw_landing, param, redirect, rewrite_urls, setting, setting_or_default, template, val, Post, Preferences, Subreddit,
 };
 use crate::{client::json, server::RequestExt, server::ResponseExt};
 use askama::Template;

static/style.css

@@ -1450,6 +1450,19 @@ a.search_subreddit:hover {
     flex-grow: 1;
     flex-shrink: 1;
     min-width: 0;
+    position: relative;
+}
+
+.comment_right[open] > .comment_data > .comment_collapse {
+    position: absolute;  /* relative to .comment_right */
+    width: 20px;
+    left: -35px;
+    top: 45px;
+    height: calc(100% - 45px);
+}
+
+.comment:has(> .comment_right[open] > .comment_data > .comment_collapse:hover) > .comment_left * {
+    background: var(--highlighted);
 }
 
 .comment:has([id]) .comment_data > * {
@@ -2063,6 +2076,14 @@ th {
         margin-top: -5px;
     }
 
+    .comment_right[open] > .comment_data > .comment_collapse {
+        /* relative to .comment_right */
+        width: 15px;
+        left: -29px;
+        top: 35px;
+        height: calc(100% - 35px);
+    }
+
     .line {
         margin-left: 5px;
     }

templates/comment.html

@@ -34,6 +34,7 @@
 			</span>
 			{% endfor %}
 			{% endif %}
+			<div class="comment_collapse"></div>
 		</summary>
 		{% if is_filtered %}
 		<div class="comment_body_filtered {% if highlighted %}highlighted{% endif %}">(Filtered content)</div>