From adb3972f7210ae261ed6a42b2ca6a613e2c23cd4 Mon Sep 17 00:00:00 2001
From: SnowCait <SnowCait@users.noreply.github.com>
Date: Sat, 14 Oct 2023 17:57:42 +0900
Subject: [PATCH] Thread layout

---
 web/src/routes/[slug=note]/+page.svelte       | 45 ++++++++++++++++---
 web/src/routes/[slug=note]/Counter.svelte     |  6 ---
 web/src/routes/[slug=note]/ProfileIcon.svelte |  6 +++
 3 files changed, 46 insertions(+), 11 deletions(-)
 delete mode 100644 web/src/routes/[slug=note]/Counter.svelte

diff --git a/web/src/routes/[slug=note]/+page.svelte b/web/src/routes/[slug=note]/+page.svelte
index 3d4316839..c5324ce93 100644
--- a/web/src/routes/[slug=note]/+page.svelte
+++ b/web/src/routes/[slug=note]/+page.svelte
@@ -10,11 +10,12 @@
 	import { Api } from '$lib/Api';
 	import { referTags } from '$lib/EventHelper';
 	import { EventItem, Metadata } from '$lib/Items';
-	import Counter from './Counter.svelte';
 	import ProfileIconList from './ProfileIconList.svelte';
 	import { chronologicalItem } from '$lib/Constants';
 	import { tick } from 'svelte';
 	import MuteButton from '../action/MuteButton.svelte';
+	import IconRepeat from '@tabler/icons-svelte/dist/svelte/icons/IconRepeat.svelte';
+	import IconHeart from '@tabler/icons-svelte/dist/svelte/icons/IconHeart.svelte';
 
 	export let data: PageData;
 
@@ -176,10 +177,16 @@
 	/>
 </div>
 
-<Counter label={'Reposts'} count={repostEventItems.length} />
-<ProfileIconList metadataList={repostMetadataList} />
-<Counter label={'Reactions'} count={reactionEventItems.length} />
-<ProfileIconList metadataList={reactionMetadataList} />
+<section class="repost counter card">
+	<span class="icon"><IconRepeat /></span>
+	<span class="count">{repostEventItems.length}</span>
+	<ProfileIconList metadataList={repostMetadataList} />
+</section>
+<section class="reaction counter card">
+	<span class="icon"><IconHeart /></span>
+	<span class="count">{reactionEventItems.length}</span>
+	<ProfileIconList metadataList={reactionMetadataList} />
+</section>
 {#if $author !== undefined && item !== undefined}
 	<div class="mute">
 		<MuteButton tagName="e" tagContent={rootId === undefined ? item.event.id : rootId} />
@@ -199,6 +206,34 @@
 />
 
 <style>
+	section {
+		margin: 0.5rem auto;
+		padding: 6px;
+	}
+
+	.counter {
+		display: flex;
+		align-items: center;
+	}
+
+	.icon {
+		margin-right: 0.5rem;
+		width: 24px;
+		height: 24px;
+	}
+
+	.count {
+		margin-right: 0.5rem;
+	}
+
+	.repost .icon {
+		color: var(--green);
+	}
+
+	.reaction .icon {
+		color: var(--red);
+	}
+
 	.mute {
 		margin-top: 16px;
 		display: flex;
diff --git a/web/src/routes/[slug=note]/Counter.svelte b/web/src/routes/[slug=note]/Counter.svelte
deleted file mode 100644
index 466329097..000000000
--- a/web/src/routes/[slug=note]/Counter.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script lang="ts">
-	export let label: string;
-	export let count: number;
-</script>
-
-<div>{label}: {count}</div>
diff --git a/web/src/routes/[slug=note]/ProfileIcon.svelte b/web/src/routes/[slug=note]/ProfileIcon.svelte
index f12f4e69d..144cd6fa8 100644
--- a/web/src/routes/[slug=note]/ProfileIcon.svelte
+++ b/web/src/routes/[slug=note]/ProfileIcon.svelte
@@ -20,6 +20,12 @@
 </article>
 
 <style>
+	a {
+		display: block;
+		width: 30px;
+		height: 30px;
+	}
+
 	img {
 		width: 30px;
 		height: 30px;