Don't remember what this WIP was about

[rbdr/forum] / src / lib / components / topic / topic.svelte

diff --git a/src/lib/components/topic/topic.svelte b/src/lib/components/topic/topic.svelte
index 5b5ed0b3d2ffb54631cc7774d588e7c3e099710b..7fb41011b5bc5c85de8597ffdb9c7d49a588d2a3 100644 (file)
--- a/src/lib/components/topic/topic.svelte
+++ b/src/lib/components/topic/topic.svelte
@@ -1,45 +1,56 @@
 <script lang="ts">
 <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';
 
 
        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')}>
        $: 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')}
        <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">
+                               <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">
                                        {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}">
+                       <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 } }) }
                                })})
                                ({$_('topic.remaining_time', {
                                        values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
                                })})

-                       </a>.
+                       </a>

                </span>
        </aside>
                </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}
                <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}
                </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>
 </div>