From e2e084a06b5b20d54db3aeabda1fdde92fc0dab9 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Thu, 3 Apr 2025 13:27:56 +1300
Subject: [PATCH] Minor ui fixes

---
 .../src/lib/components/Comment.svelte         | 146 +++++++++---------
 materialious/src/lib/css/global.css           |   4 +-
 .../routes/(app)/playlist/[slug]/+page.svelte |  27 ++--
 .../routes/(app)/watch/[slug]/+page.svelte    |   6 +-
 4 files changed, 98 insertions(+), 85 deletions(-)

diff --git a/materialious/src/lib/components/Comment.svelte b/materialious/src/lib/components/Comment.svelte
index b5a96937..a8710607 100644
--- a/materialious/src/lib/components/Comment.svelte
+++ b/materialious/src/lib/components/Comment.svelte
@@ -1,11 +1,10 @@
 <script lang="ts">
-	import Comment_1 from './Comment.svelte';
 	import { getComments } from '$lib/api';
 	import { type Comment, type Comments } from '$lib/api/model';
 	import { getBestThumbnail, proxyGoogleImage } from '$lib/images';
 	import { interfaceLowBandwidthMode } from '$lib/store';
 	import { numberWithCommas } from '$lib/time';
-	import { _ } from 'svelte-i18n';
+	import CommentSelf from './Comment.svelte';
 
 	interface Props {
 		comment: Comment;
@@ -16,6 +15,8 @@
 
 	let replies: Comments | undefined = $state(undefined);
 
+	const replyText: string = comment.replies?.replyCount > 1 ? 'replies' : 'reply';
+
 	async function loadReplies(continuation: string) {
 		try {
 			replies = await getComments(videoId, {
@@ -39,91 +40,96 @@
 
 <div class="comment">
 	{#if !$interfaceLowBandwidthMode}
-		<img
-			class="circle small"
-			src={proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))}
-			alt="comment profile"
-		/>
-	{/if}
-	<div>
-		<div class="row">
-			<a href={`/channel/${comment.authorId}`}>
-				<p class="no-margin">
-					<span class="bold" class:channel-owner={comment.authorIsChannelOwner}
-						>{comment.author}</span
-					>
+		<div class="comment-header">
+			<img
+				class="circle small"
+				src={proxyGoogleImage(getBestThumbnail(comment.authorThumbnails))}
+				alt="comment profile"
+			/>
+			<div class="comment-info">
+				<a href={`/channel/${comment.authorId}`} class="author">
+					<span class="bold" class:channel-owner={comment.authorIsChannelOwner}>
+						{comment.author}
+					</span>
 					<span class="secondary-text">{comment.publishedText}</span>
+				</a>
+				<p class="no-margin">
+					{@html commentTimestamps(comment.contentHtml)}
 				</p>
-			</a>
-			{#if comment.isPinned}
-				<i>push_pin</i>
-			{/if}
-			{#if comment.isEdited}
-				<i>edit</i>
-			{/if}
-		</div>
-		<p class="no-margin">
-			{@html commentTimestamps(comment.contentHtml)}
-		</p>
-		<div style="display: flex;">
-			<p><i>thumb_up</i> {numberWithCommas(comment.likeCount)}</p>
-			{#if comment.creatorHeart}
-				<div>
-					<img
-						class="circle"
-						style="width: 25px; height: 25px"
-						src={proxyGoogleImage(comment.creatorHeart.creatorThumbnail)}
-						alt="Creator profile"
-					/>
-					<i style="font-size: 20px;margin-left: 5px;" class="absolute left red-text bottom fill"
-						>favorite</i
-					>
+				<div class="comment-actions">
+					<p class="no-margin no-padding"><i>thumb_up</i> {numberWithCommas(comment.likeCount)}</p>
+					{#if comment.replies && !replies}
+						<button
+							onclick={async () => loadReplies(comment.replies.continuation)}
+							class="transparent replies"
+						>
+							<i class="white-text">expand_more</i>
+							<span class="white-text">{comment.replies.replyCount} {replyText}</span>
+						</button>
+					{:else if replies}
+						<button onclick={() => (replies = undefined)} class="transparent replies">
+							<i class="white-text">expand_less</i>
+							<span class="white-text">Hide {replyText}</span>
+						</button>
+					{/if}
 				</div>
-			{/if}
+			</div>
 		</div>
+	{/if}
 
-		{#if replies}
+	{#if replies}
+		<div style="margin-left: 5em;">
 			{#each replies.comments as reply}
-				<Comment_1 comment={reply} {videoId} />
+				<CommentSelf comment={reply} {videoId} />
 			{/each}
-		{/if}
-
-		{#if comment.replies && !replies}
-			<button
-				onclick={async () => loadReplies(comment.replies.continuation)}
-				class="transparent replies"
-			>
-				<i class="primary-text">expand_more</i>
-				<span class="primary-text">{comment.replies.replyCount} {$_('replies')}</span>
-			</button>
-		{:else if replies}
-			<button onclick={() => (replies = undefined)} class="transparent replies">
-				<i class="primary-text">expand_less</i>
-				<span class="primary-text">{$_('hideReplies')}</span>
-			</button>
-		{/if}
-	</div>
+		</div>
+	{/if}
 </div>
 
 <style>
-	.comment img {
-		margin: 0.5em 1em 0 1em;
-	}
-
 	.comment {
 		display: flex;
-		margin-bottom: 0.8em;
+		flex-direction: column;
+		margin-bottom: 1em;
 		white-space: pre-line;
 	}
 
-	.channel-owner {
-		background-color: var(--primary);
-		padding: 0 0.5em;
-		border-radius: 1em;
-		color: var(--surface-variant);
+	.comment-header {
+		display: flex;
+		align-items: flex-start;
+	}
+
+	.comment-header img {
+		margin: 0;
+		border-radius: 50%;
+	}
+
+	.comment-info {
+		display: flex;
+		flex-direction: column;
+		margin-left: 1em;
+	}
+
+	.author {
+		display: flex;
+		align-items: flex-start;
+		gap: 6px;
+		font-size: 14px;
+	}
+
+	.comment-actions {
+		display: flex;
+		align-items: center;
+		gap: 15px;
+		margin-top: 5px;
+		font-size: 14px;
+	}
+
+	a {
+		justify-content: start;
 	}
 
 	.replies {
-		margin-left: 0;
+		padding: 0.1em;
 	}
 </style>
diff --git a/materialious/src/lib/css/global.css b/materialious/src/lib/css/global.css
index 3cb92bb7..6bb54200 100644
--- a/materialious/src/lib/css/global.css
+++ b/materialious/src/lib/css/global.css
@@ -26,15 +26,17 @@ article, dialog {
 }
 
 button.row {
-	padding: 0 !important;
 	background-color: transparent !important;
 	border: none !important;
 	color: var(--on-surface) !important;
+	width: 100%;
+	margin: 0 !important;
 }
 
 button.row:hover {
 	box-shadow: none !important;
 	background-color: transparent !important;
+	width: 100%;
 }
 
 @media screen and (max-width: 650px) {
diff --git a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
index 6aaa47c3..ccf63ad0 100644
--- a/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/playlist/[slug]/+page.svelte
@@ -89,21 +89,26 @@
 		<span>{$_('player.share.title')}</span>
 		<menu class="no-wrap mobile">
 			{#if !Capacitor.isNativePlatform()}
-				<a
-					href="#share"
+				<button
+					class="row"
 					onclick={async () => {
 						await Clipboard.write({ string: location.href });
-					}}>{$_('player.share.materialiousLink')}</a
+					}}>{$_('player.share.materialiousLink')}</button
 				>
 			{/if}
-			<a
-				href="#share"
-				onclick={async () => {
-					await Clipboard.write({
-						string: `https://www.youtube.com/playlist?list=${data.playlist.playlistId}`
-					});
-				}}>{$_('player.share.youtubeLink')}</a
-			>
+			<!--Silly hack so svelte doesnt error-->
+			{#if true}
+				<button
+					class="row"
+					onclick={async () => {
+						await Clipboard.write({
+							string: `https://www.youtube.com/playlist?list=${data.playlist.playlistId}`
+						});
+					}}
+				>
+					{$_('player.share.youtubeLink')}
+				</button>
+			{/if}
 		</menu>
 	</button>
 </article>
diff --git a/materialious/src/routes/(app)/watch/[slug]/+page.svelte b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
index 390dd08e..65ddbf87 100644
--- a/materialious/src/routes/(app)/watch/[slug]/+page.svelte
+++ b/materialious/src/routes/(app)/watch/[slug]/+page.svelte
@@ -540,8 +540,8 @@
 							<div class="tooltip">{$_('player.addToPlaylist')}</div>
 							<menu class="no-wrap mobile">
 								{#each personalPlaylists as personalPlaylist}
-									<a
-										href="#add"
+									<button
+										class="row"
 										onclick={async () => await toggleVideoToPlaylist(personalPlaylist.playlistId)}
 									>
 										<nav>
@@ -554,7 +554,7 @@
 												<i>add</i>
 											{/if}
 										</nav>
-									</a>
+									</button>
 								{/each}
 							</menu>
 						</button>