Merge branch 'develop' into master

package.json

@@ -14,13 +14,16 @@
 	"devDependencies": {
 		"@roxi/routify": "^2.18.12",
 		"@sveltejs/vite-plugin-svelte": "^2.0.0",
+		"markdown-it": "^13.0.2",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^2.8.1",
 		"prettier-plugin-svelte": "^2.9.0",
 		"svelte": "^3.49.0",
 		"svelte-textarea-autoresize": "^1.0.0",
-		"markdown-it": "^13.0.2",
-		"vite": "^4.0.0",
-		"twemoji": "^14.0.2"
+		"twemoji": "^14.0.2",
+		"vite": "^4.0.0"
+	},
+	"dependencies": {
+		"lucide-svelte": "^0.294.0"
 	}
 }

src/lib/Badge.svelte

@@ -4,14 +4,16 @@
 	export let text = "BADGE";
 	export let title = null;
 	export let checkmark = false;
+	export let small = false;
 </script>
 
 <span
 	class="badge"
 	alt="({text})"
 	class:hastitle={title}
-	{title}
 	class:checkmark
+	class:small
+	{title}
 >
 	{text}
 </span>
@@ -38,6 +40,10 @@
 		cursor: help;
 	}
 
+	.badge.small {
+		font-size: 16px;
+	}
+
 	.checkmark::before {
 		content: "✔";
 		margin-right: 0.25em;

src/lib/Post.svelte

@@ -126,8 +126,11 @@
 	// @ts-ignore
 	window.confirmLink = confirmLink;
 
-	function addFancyElements(content) {
+	/** @param {string} content */
+	async function addFancyElements(content) {
 		// markdown (which has HTML escaping built-in)
+		var renderedContent;
+
 		try {
 			const md = new MarkdownIt("default", {
 				breaks: true,
@@ -182,27 +185,52 @@
 					}
 				}
 			}
-			content = md.renderer.render(tokens, md.options);
+
+			renderedContent = md.renderer.render(tokens, md.options);
 
 			// add quote containers to blockquotes (although, quotes are currently broken)
-			content = content.replaceAll(
+			renderedContent = renderedContent.replaceAll(
 				/<blockquote>(.+?)<\/blockquote>/gms,
 				'<div class="quote-container"><blockquote>$1</blockquote></div>'
 			);
+
+			if ($user.embeds_enabled) {
+				let youtubeMatches = [
+					...new Set(
+						content.match(
+							/(\<|)(http|https):\/\/(www.youtube.com\/watch\?v=|youtube.com\/watch\?v=|youtu.be\/)(\S{11})(\>|)?/gm
+						)
+					),
+				];
+				for (const watchURL of youtubeMatches) {
+					if (watchURL.startsWith("<") && watchURL.endsWith(">"))
+						continue;
+					let response = await (
+						await fetch(
+							`https://youtube.com/oembed?url=${watchURL}`
+						)
+					).json();
+					renderedContent += `<div class="youtube-container">
+						<h4>${response.title}</h4>
+						<span style="color: #606060; font-size: 1.1rem">${response.author_name}</span><br><br>
+						<img src="${response.thumbnail_url}" height=180 width=240 loading="lazy" alt="Thumbnail for ${response.title}">
+					</div>`;
+				}
+			}
 		} catch (e) {
 			// this is to stop any possible XSS attacks by bypassing the markdown lib
 			// which is responsible for escaping HTML
 			return `Failed rendering post: ${e}`;
 		}
 
 		// twemoji
-		content = twemoji.parse(content, {
+		renderedContent = twemoji.parse(renderedContent, {
 			folder: "svg",
 			ext: ".svg",
 			size: 20,
 		});
 
-		return content;
+		return renderedContent;
 	}
 
 	async function adminDelete() {
@@ -532,7 +560,9 @@
 		</div>
 	{:else}
 		<p class="post-content" style="border-left-color: #4b5563;">
-			{@html addFancyElements(post.content)}
+			{#await addFancyElements(post.content) then content}
+				{@html content}
+			{/await}
 		</p>
 	{/if}
 	{#if editError}
@@ -603,4 +633,11 @@
 		margin-bottom: 0.5em;
 		width: 100%;
 	}
+
+	:global(.youtube-container) {
+		border: solid 2px var(--orange);
+		padding: 10px;
+		border-radius: 10px;
+		width: 50%;
+	}
 </style>

src/lib/Report.svelte

@@ -95,20 +95,11 @@
 		{#if report.content.post_origin === "home"}
 			<a href="/" on:click|preventDefault={$goto("/home")}> Home </a><br
 			/>
-		{:else if report.content.post_origin === "inbox"}
-			<a
-				href="/"
-				on:click|preventDefault={$goto(
-					`/users/${report.content.u}/admin/inbox`
-				)}
-			>
-				{report.content.u}'s inbox
-			</a><br />
 		{:else}
 			<a
 				href="/"
 				on:click|preventDefault={$goto(
-					`/chats/${report.content.post_origin}`
+					`/chats/${report.content.post_origin}?admin=1`
 				)}
 			>
 				{report.content.post_origin}

src/lib/settings/BlockedUsers.svelte

@@ -0,0 +1,29 @@
+<script>
+	import Container from "../Container.svelte";
+	import ProfileView from "../ProfileView.svelte";
+	import {relationships} from "../stores.js";
+
+	let blockedUsers = [];
+
+	relationships.subscribe(_relationships => {
+		blockedUsers = [];
+		for (let [username, state] of Object.entries(_relationships)) {
+			if (state == 2) blockedUsers.push(username);
+		}
+	});
+</script>
+
+<Container>
+	<h1>Blocked Users</h1>
+	Here are the users you have blocked. You can unblock them at anytime. While blocked,
+	they won't be able to direct message you, add you to group chats, and you may
+	not be able to view their posts depending on your privacy settings.
+</Container>
+
+{#if blockedUsers.length === 0}
+	<Container>Looks like you haven't blocked anyone yet.</Container>
+{:else}
+	{#each blockedUsers as username}
+		<ProfileView {username} small={true} canClick={true} />
+	{/each}
+{/if}

src/lib/settings/Personalization.svelte

@@ -0,0 +1,82 @@
+<script>
+	import Container from "../Container.svelte";
+
+	import SwitchThemeModal from "../modals/settings/SwitchTheme.svelte";
+	import SwitchBGMSFXModal from "../modals/settings/SwitchBGMSFX.svelte";
+
+	import {user} from "../stores.js";
+	import * as clm from "../clmanager.js";
+	import * as modals from "../modals.js";
+</script>
+
+<Container>
+	<h1>Personalization</h1>
+	Here you can change the look and feel of the Meower client.
+</Container>
+
+<Container>
+	<div class="settings-controls">
+		<button
+			class="circle settings"
+			on:click={() =>
+				clm.updateProfile({
+					layout: $user.layout === "new" ? "old" : "new",
+				})}
+		/>
+	</div>
+
+	<h2>Layout</h2>
+	The layout is currently set to {$user.layout}.
+</Container>
+<Container>
+	<div class="settings-controls">
+		<button
+			class="circle settings"
+			on:click={() => modals.showModal(SwitchThemeModal)}
+		/>
+	</div>
+
+	<h2>Theme</h2>
+	{#if !$user.theme.startsWith("custom:")}
+		The theme is currently set to {$user.theme} ({$user.mode
+			? "light"
+			: "dark"}).
+	{:else}
+		You are currently using a custom theme! How cool is that!
+	{/if}
+</Container>
+<Container>
+	<div class="settings-controls">
+		<input
+			type="checkbox"
+			bind:checked={$user.sfx}
+			on:change={() => clm.updateProfile({sfx: $user.sfx})}
+		/>
+	</div>
+
+	<h2>Sound Effects</h2>
+	Sound effects (for new messages) are currently {!$user.sfx
+		? "disabled"
+		: "enabled"}.
+</Container>
+<Container>
+	<div class="settings-controls">
+		{#if $user.bgm}
+			<button
+				class="circle settings"
+				on:click={() => modals.showModal(SwitchBGMSFXModal)}
+			/>
+		{/if}
+		<input
+			type="checkbox"
+			bind:checked={$user.bgm}
+			on:change={() => clm.updateProfile({bgm: $user.bgm})}
+		/>
+	</div>
+
+	<h2>Background Music</h2>
+	Background music is currently {!$user.bgm ? "disabled" : "enabled"}.
+	{#if $user.bgm}
+		Click the cog button to change the song.
+	{/if}
+</Container>

src/lib/settings/Profile.svelte

@@ -0,0 +1,10 @@
+<script>
+	import ProfileView from "../ProfileView.svelte";
+	import Container from "../Container.svelte";
+
+	import {user} from "../stores.js";
+</script>
+
+<ProfileView username={$user.name} canDoActions={true} />
+
+<Container>This page is still being worked on :/</Container>