X-Git-Url: https://git.r.bdr.sh/rbdr/forum/blobdiff_plain/a7cf03c192470cbab13edeb1aec99e0c66dede10..6ccc6f60fc85e665c8a07a169efbe8d09c9d9e8e:/src/lib/components/topic/topic.svelte

diff --git a/src/lib/components/topic/topic.svelte b/src/lib/components/topic/topic.svelte
index 06f2aeb..7fb4101 100644
--- a/src/lib/components/topic/topic.svelte
+++ b/src/lib/components/topic/topic.svelte
@@ -1,44 +1,56 @@
 <script lang="ts">
-	export let topic;
+	import type { Topic } from '$lib/data/types';
+
+	export let topic: Topic;
 
 	import { _ } from 'svelte-i18n';
 	import Post from '$lib/components/post/post.svelte';
 	import { readableTime } from '$lib/utils/readable_time';
 
-	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
+	$: remainingTime = new Date(topic.updated_at).getTime() + topic.ttl - Date.now();
 	$: remaining = readableTime(remainingTime);
 </script>
 
 <div class="h-entry" title={$_('topic.title')}>
-	<h1 class="p-name">{topic.title}</h1>
+	<h1 class="py-4 font-bold text-3xl p-name">{topic.title}</h1>
 	<aside class="topic-meta" title={$_('topic.metadata_title')}>
 		{#if topic.forum}
 			<span class="topic-location">
-        {$_('topic.category_location')}
-				<a href="/f/{topic.forum.id}" class="p-category">
-          {topic.forum.glyph} {$_(topic.forum.label)}
-        </a>.
-      </span>
+				{$_('topic.category_location')}
+				<a
+					href="/f/{topic.forum.id}"
+					class="p-category underline text-blue-600 visited:text-purple-500"
+				>
+					{topic.forum.glyph}
+					{$_(topic.forum.label)}
+				</a>.
+			</span>
 		{/if}
 		<span class="topic-ttl">
-      <a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
-        ({$_('topic.remaining_time', {
+			<a
+				class="u-url u-uid underline text-blue-600 visited:text-purple-500"
+				title={$_('topic.permalink_title')}
+				href="/t/{topic.id}"
+			>
+				({$_('topic.remaining_time', {
 					values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
-        })})
-      </a>.
-    </span>
+				})})
+			</a>
+		</span>
 	</aside>
-	{#if topic.tags.length > 0}
+	{#if topic.tags}
 		<aside class="topic-tags" title={$_('topic.tags_title')}>
 			{$_('topic.tags_location')}
 			{#each topic.tags as tag}
-				<a href="/g/{tag.id}" class="p-category">
-          {tag.id}<span class="tag-weight">({tag.weight})</span>
-        </a>{' '}
+				<a href="/g/{tag.tag}" class="p-category underline text-blue-600 visited:text-purple-500">
+					{tag.tag}<span class="tag-weight">({tag.count})</span></a
+				>{' '}
 			{/each}
 		</aside>
 	{/if}
-	{#each topic.posts as post, index}
-		<Post {post} {index} count={topic.posts.length} />
-	{/each}
+	{#if topic.posts}
+		{#each topic.posts as post, index}
+			<Post {post} {index} count={topic.posts.length} />
+		{/each}
+	{/if}
 </div>