From bb4087c4d91c14e44322bc1b78ce454cd20d1329 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 27 Apr 2024 19:14:43 +1200
Subject: [PATCH] Allow closing comments

---
 .../src/routes/watch/[slug]/+page.svelte      | 29 ++++++++++++++-----
 1 file changed, 21 insertions(+), 8 deletions(-)

diff --git a/materialious/src/routes/watch/[slug]/+page.svelte b/materialious/src/routes/watch/[slug]/+page.svelte
index a9235032..bfe689bf 100644
--- a/materialious/src/routes/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/watch/[slug]/+page.svelte
@@ -576,15 +576,28 @@
 			</details>
 		</article>
 
-		<div class="space"></div>
 		{#if comments && comments.comments.length > 0}
-			<h6>{numberWithCommas(comments.commentCount)} comments</h6>
-			{#each comments.comments as comment}
-				<Comment {comment} videoId={data.video.videoId}></Comment>
-			{/each}
-			{#if comments.continuation}
-				<button on:click={loadMoreComments} class="margin">{$_('loadMore')}</button>
-			{/if}
+			<article>
+				<details open>
+					<summary class="none bold">
+						<nav>
+							<div class="max">{numberWithCommas(comments.commentCount)} comments</div>
+							<i>expand_more</i>
+						</nav>
+					</summary>
+
+					<div class="space"></div>
+
+					<div class="medium scroll">
+						{#each comments.comments as comment}
+							<Comment {comment} videoId={data.video.videoId}></Comment>
+						{/each}
+						{#if comments.continuation}
+							<button on:click={loadMoreComments} class="margin">{$_('loadMore')}</button>
+						{/if}
+					</div>
+				</details>
+			</article>
 		{:else}
 			<h6>{$_('player.unableToLoadComments')}</h6>
 		{/if}