git.r.bdr.sh - rbdr/forum/blob - src/components/topic/topic.svelte

   1 <script>
   2   export let id;
   3
   4   import { _ } from 'svelte-i18n';
   5   import { getTopic } from '$/stores/topic';
   6
   7   import ErrorBlock from '$/components/error_block/error_block.svelte';
   8   import Loader from '$/components/loader/loader.svelte';
   9   import PostContent from '$/components/post_content/post_content.svelte';
  10   import { readableTime } from '$/utils/readable_time.js';
  11
  12   $: store = getTopic(id);
  13   $: topic = $store.data;
  14   $: remainingTime = topic ? (topic.updated_at + topic.ttl) - Date.now() : 0;
  15   $: remaining = readableTime(remainingTime);
  16 </script>
  17
  18 {#if $store.loading}
  19   <Loader />
  20 {/if}
  21 {#if $store.error}
  22   <ErrorBlock message={$_('topic.error.unavailable')} />
  23 {/if}
  24 {#if topic}
  25   <div class="h-entry" title="{$_('topic.title')}">
  26     <h1 class="p-name">{topic.title}</h1>
  27     <aside class="topic-meta" title="{$_('topic.metadata_title')}">
  28       {#if topic.forum}
  29       <span class="topic-location">{$_('topic.category_location')} <a href="/f/{topic.forum.id}"
  30           class="p-category">{topic.forum.glyph} {$_(topic.forum.label)}</a>.</span>
  31       {/if}
  32       <span class="topic-ttl"><a class="u-url u-uid" title="{$_('topic.permalink_title')}" href="/t/{topic.id}">({$_('topic.remaining_time', { values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) } })})</a>.</span>
  33     </aside>
  34     {#if topic.tags.length > 0}
  35       <aside class="topic-tags" title="{$_('topic.tags_title')}">
  36         {$_('topic.tags_location')}
  37         {#each topic.tags as tag}
  38           <a href="/g/{tag.id}" class="p-category">{tag.id}<span class="tag-weight">({tag.weight})</span></a>{' '}
  39         {/each}
  40       </aside>
  41     {/if}
  42     {#each topic.posts as post, index}
  43       <PostContent post={post} index={index} count={topic.posts.length} />
  44     {/each}
  45   </div>
  46 {/if}