feat(website): emote page (#15)

Implements the page to show for an individual emote. (mock)

WEB-10

website/src/components/channel-preview.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	export let user = "channelName";
+	export let index = 0;
+	export let bg: "medium" | "light" = "medium";
+</script>
+
+<a href="/user/{user}" class="channel" style:background-color="var(--bg-{bg})">
+	<div class="image" style="animation-delay: {index * 10}ms"></div>
+	<span class="user">{user}</span>
+</a>
+
+<style lang="scss">
+	.channel {
+		color: var(--text);
+		text-decoration: none;
+
+		padding: 0.5rem 1rem;
+
+		display: flex;
+		align-items: center;
+		gap: 0.62rem;
+
+		border: 1px solid transparent;
+		border-radius: 0.25rem;
+
+		&:hover,
+		&:focus-visible {
+			border-color: var(--border);
+		}
+	}
+
+	@keyframes loading {
+		0% {
+			background-color: var(--secondary);
+		}
+		50% {
+			background-color: var(--secondary-active);
+		}
+		100% {
+			background-color: var(--secondary);
+		}
+	}
+
+	.image {
+		flex-shrink: 0;
+		width: 2.5rem;
+		height: 2.5rem;
+		border-radius: 50%;
+
+		background-color: var(--secondary);
+		animation: loading 1s infinite;
+	}
+
+	.user {
+		flex-grow: 1;
+		overflow: hidden;
+		text-overflow: ellipsis;
+
+		font-size: 0.875rem;
+		font-weight: 600;
+	}
+</style>

website/src/components/emotes/activity.svelte

@@ -0,0 +1,107 @@
+<script lang="ts">
+	import { IconContext, Plus, NotePencil, Check, X } from "phosphor-svelte";
+
+	export let activities = [
+		{
+			kind: "reject",
+			time: "1 hour ago",
+			message: [
+				{ text: "forsen", href: "/user/forsen", bold: true },
+				{ text: "rejected" },
+				{ text: "AlienDance", bold: true },
+				{ text: "for personal use" },
+			],
+		},
+		{
+			kind: "modify",
+			time: "1 hour ago",
+			message: [
+				{ text: "ayyybubu", href: "/user/ayyybubu", bold: true },
+				{ text: "renamed" },
+				{ text: "AlienPls", bold: true },
+				{ text: "to" },
+				{ text: "AlienDance", bold: true },
+			],
+		},
+		{
+			kind: "approve",
+			time: "1 hour ago",
+			message: [
+				{ text: "forsen", href: "/user/forsen", bold: true },
+				{ text: "approved" },
+				{ text: "AlienPls", bold: true },
+				{ text: "for public listing" },
+			],
+		},
+		{
+			kind: "create",
+			time: "1 hour ago",
+			message: [
+				{ text: "ayyybubu", href: "/user/ayyybubu", bold: true },
+				{ text: "created" },
+				{ text: "AlienPls", bold: true },
+			],
+		},
+	];
+</script>
+
+{#each activities as activity, index}
+	<div class="event">
+		<IconContext values={{ style: "margin: 0 0.5rem", size: "1rem" }}>
+			{#if activity.kind === "reject"}
+				<X color="var(--error)" />
+			{:else if activity.kind === "modify"}
+				<NotePencil />
+			{:else if activity.kind === "approve"}
+				<Check color="var(--primary)" />
+			{:else}
+				<Plus  color="var(--primary)" />
+			{/if}
+		</IconContext>
+
+		<div class="event-message">
+			<div class="event-text">
+				{#each activity.message as item, i}
+					{#if item.href}
+						<a href={item.href} class={item.bold ? "bold-text" : ""}>{item.text}</a>
+					{:else}
+						<span class={item.bold ? "bold-text" : ""}>{item.text}</span>
+					{/if}
+					{#if i !== activity.message.length - 1}
+						<span> </span>
+					{/if}
+				{/each}
+			</div>
+			<span class="time">{activity.time}</span>
+		</div>
+	</div>
+	{#if index !== activities.length - 1}
+		<hr />
+	{/if}
+{/each}
+
+<style lang="scss">
+	.bold-text {
+		font-weight: 700;
+		color: var(--text);
+	}
+
+	a:hover {
+		text-decoration: none;
+	}
+
+	.event {
+		display: flex;
+		margin: 1rem 0;
+
+		.event-message {
+			font-size: 0.813rem;
+
+			.time {
+				font-size: 0.75rem;
+				font-weight: 500;
+				color: var(--text-lighter);
+			}
+		}
+	}
+</style>

website/src/components/emotes/tag.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	export let name: string;
+</script>
+
+<span>{name}</span>
+
+<style lang="scss">
+	span {
+		padding: 0.5rem 1rem;
+
+		color: var(--text);
+		font-size: 0.875rem;
+		background-color: var(--secondary);
+		border-radius: 0.5rem;
+	}
+</style>

website/src/components/image-preview.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+	export let size = 64;
+</script>
+
+<div class="preview">
+	<div class="image" style="height: {size}px; width: {size}px"></div>
+	<span class="size-text">{size}x{size}</span>
+</div>
+
+<style lang="scss">
+	@keyframes loading {
+		0% {
+			background-color: var(--secondary);
+		}
+		50% {
+			background-color: var(--secondary-active);
+		}
+		100% {
+			background-color: var(--secondary);
+		}
+	}
+
+	.preview {
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+		align-items: center;
+	}
+
+	.image {
+		background-color: var(--secondary);
+		animation: loading 1s infinite;
+	}
+
+	.size-text {
+		color: var(--text-lighter);
+		font-size: 0.75rem;
+	}
+</style>