feat: add new links view

src/lib/components/kurosearch/details/Summary.svelte

@@ -2,34 +2,43 @@
 	import { createEventDispatcher } from 'svelte';
 	import RelativeTime from '../relative-time/RelativeTime.svelte';
 	import Score from '../score/Score.svelte';
-	import KurosearchSource from '../source-kurosearch/KurosearchSource.svelte';
 	import { formatCount } from '$lib/logic/format-count';
 
 	const dispatch = createEventDispatcher();
 
 	export let post: kurosearch.Post;
 	export let active: string | undefined;
+	export let links: number;
 </script>
 
 <div class="summary">
 	<RelativeTime value={post.change} />
 	<span>•</span>
 	<Score value={post.score} />
-	<span>•</span>
-	<KurosearchSource url="/post?id={post.id}&src={encodeURIComponent(post.file_url)}" />
 	<span class="divider" />
+	<button
+		class="codicon codicon-link"
+		class:active={active === 'links'}
+		on:click={() => dispatch('links')}
+	>
+		{formatCount(links)}
+	</button>
 	{#if post.comment_count}
 		<button
 			class="codicon codicon-comment"
 			class:active={active === 'comments'}
-			on:click={() => dispatch('comments')}>{formatCount(post.comment_count)}</button
+			on:click={() => dispatch('comments')}
 		>
+			{formatCount(post.comment_count)}
+		</button>
 	{/if}
 	<button
 		class="codicon codicon-tag"
 		class:active={active === 'tags'}
-		on:click={() => dispatch('tags')}>{formatCount(post.tags.length)}</button
+		on:click={() => dispatch('tags')}
 	>
+		{formatCount(post.tags.length)}
+	</button>
 </div>
 
 <style>

src/lib/components/kurosearch/post/SingleColumnPost.svelte

@@ -1,17 +1,19 @@
 <script lang="ts">
+	import Sources from './Sources.svelte';
+
 	import Comments from './Comments.svelte';
 
 	import Image from '../media-image/Image.svelte';
 	import Video from '../media-video/Video.svelte';
 	import Gif from '../media-gif/Gif.svelte';
-	import IconButton from '$lib/components/pure/button-icon/IconButton.svelte';
 	import { createEventDispatcher } from 'svelte';
 	import { getVideoSources, isLoop } from '$lib/logic/media-utils';
 	import alwaysLoop from '$lib/store/always-loop-store';
 	import { getPostId } from '$lib/logic/id-utils';
 	import Summary from '../details/Summary.svelte';
 	import PostDetailsTagList from '../tag-list/PostDetailsTagList.svelte';
 	import FullscreenButton from './FullscreenButton.svelte';
+	import { isValidUrl } from '$lib/logic/url-utils';
 
 	const dispatch = createEventDispatcher();
 
@@ -25,6 +27,15 @@
 			openTab = tab;
 		}
 	};
+
+	const links = [
+		new URL(`https://kurosearch.com/post?id=${post.id}&src=${encodeURIComponent(post.file_url)}`),
+		new URL(`https://rule34.xxx/index.php?page=post&s=view&id=${post.id}`),
+		...post.source
+			.split(' ')
+			.filter((x) => isValidUrl(x))
+			.map((x) => new URL(x))
+	];
 </script>
 
 <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
@@ -62,14 +73,18 @@
 		<Summary
 			active={openTab}
 			{post}
+			links={links.length}
 			on:tags={() => selectTab('tags')}
 			on:comments={() => selectTab('comments')}
+			on:links={() => selectTab('links')}
 		/>
 
 		{#if openTab === 'tags'}
 			<PostDetailsTagList tags={post.tags} />
 		{:else if openTab === 'comments'}
 			<Comments {post} />
+		{:else if openTab === 'links'}
+			<Sources {links} />
 		{/if}
 	</div>
 </div>

src/lib/components/kurosearch/post/Sources.svelte

@@ -0,0 +1,55 @@
+<script lang="ts">
+	export let links: URL[];
+
+	const HOST_COLOR_MAPPING: Record<string, [string, string]> = {
+		'kurosearch.com': ['crimson', 'white'],
+		'rule34.xxx': ['#aae5a4', 'black'],
+		'newgrounds.com': ['#fda238', 'black'],
+		'twitter.com': ['rgb(29, 155, 240)', 'white'],
+		'x.com': ['rgb(29, 155, 240)', 'white'],
+		'pornhub.com': ['#f90', 'black'],
+		'zone-archive.com': ['#59396A', 'white'],
+		'subscribestar.adult': ['#ff4081', 'white'],
+		'redgifs.com': ['#E5194D', 'white'],
+		default: ['var(--background-2)', 'white']
+	};
+</script>
+
+<ol>
+	{#each links as link}
+		{@const host = link.host.replace('www.', '')}
+		{@const [background, foreground] = HOST_COLOR_MAPPING[host] ?? HOST_COLOR_MAPPING['default']}
+		<li>
+			<a
+				href={link.toString()}
+				class="codicon codicon-link-external"
+				style="background-color: {background}; color: {foreground};"
+			>
+				{host}
+			</a>
+		</li>
+	{/each}
+</ol>
+
+<style>
+	ol {
+		display: flex;
+		flex-wrap: wrap;
+		list-style-type: none;
+		gap: var(--small-gap);
+	}
+
+	a {
+		display: flex;
+		align-items: center;
+		height: var(--line-height);
+		padding-inline: var(--grid-gap);
+		background-color: var(--background-2);
+		color: var(--text-highlight);
+		border-radius: var(--border-radius);
+	}
+
+	a::before {
+		padding-inline-end: var(--small-gap);
+	}
+</style>