Update / use typescript

54 files changed, 0 insertions, 1132 deletions

diff --git a/src/components/actions/.topic.svelte.icloud b/src/components/actions/.topic.svelte.icloud
new file mode 100644
index 0000000..7abf17a
--- /dev/null
+++ b/src/components/actions/.topic.svelte.icloud
diff --git a/src/components/actions/.topic.test.js.icloud b/src/components/actions/.topic.test.js.icloud
new file mode 100644
index 0000000..e5d3d76
--- /dev/null
+++ b/src/components/actions/.topic.test.js.icloud
diff --git a/src/components/actions/topic.svelte b/src/components/actions/topic.svelte
deleted file mode 100644
index e2f59c9..0000000
--- a/src/components/actions/topic.svelte
+++ /dev/null
@@ -1,24 +0,0 @@
-<script>
-	export let actions;
-
-	import { _ } from 'svelte-i18n';
-</script>
-
-<li>
-  <a href="/reply/{actions.id}" title={$_('header.action.reply.title')}>
-    {@html $_('header.action.reply.display')}
-  </a>
-</li>
-
-<style>
-	li {
-		display: inline;
-		margin: 5px;
-	}
-
-	a {
-		text-decoration: none;
-		line-height: 3em;
-		display: inline-block;
-	}
-</style>
diff --git a/src/components/actions/topic.test.js b/src/components/actions/topic.test.js
deleted file mode 100644
index 9d6ee93..0000000
--- a/src/components/actions/topic.test.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { render } from '@testing-library/svelte';
-import '$/config/i18n';
-
-import Topic from './topic.svelte';
-
-const internals = {
-  results: null
-};
-
-describe('Topic Actions component', () => {
-
-  test('Should link to reply page', () => {
-
-    const results = render(Topic, { props: {
-      actions: {
-        id: '8ebaa211-fd9b-423a-8b4f-b57622007fde'
-      }
-    } });
-
-    expect(results.getByTitle('Reply').closest('a'))
-      .toHaveAttribute('href', '/reply/8ebaa211-fd9b-423a-8b4f-b57622007fde');
-  });
-});
diff --git a/src/components/author/.author.svelte.icloud b/src/components/author/.author.svelte.icloud
new file mode 100644
index 0000000..f34f8ee
--- /dev/null
+++ b/src/components/author/.author.svelte.icloud
diff --git a/src/components/author/author.svelte b/src/components/author/author.svelte
deleted file mode 100644
index e69de29..0000000
--- a/src/components/author/author.svelte
+++ /dev/null
diff --git a/src/components/error_block/.error_block.svelte.icloud b/src/components/error_block/.error_block.svelte.icloud
new file mode 100644
index 0000000..5eb2e2c
--- /dev/null
+++ b/src/components/error_block/.error_block.svelte.icloud
diff --git a/src/components/error_block/.error_block.test.js.icloud b/src/components/error_block/.error_block.test.js.icloud
new file mode 100644
index 0000000..ce12426
--- /dev/null
+++ b/src/components/error_block/.error_block.test.js.icloud
diff --git a/src/components/error_block/error_block.svelte b/src/components/error_block/error_block.svelte
deleted file mode 100644
index e38bfae..0000000
--- a/src/components/error_block/error_block.svelte
+++ /dev/null
@@ -1,40 +0,0 @@
-<script>
-	import { _ } from 'svelte-i18n';
-	export let message = null;
-
-	import { blink } from '$/animations/blink';
-</script>
-
-<div transition:blink>
-	<h2>{$_('error.generic.title')}</h2>
-	<p>{message || $_('error.generic.message')}</p>
-</div>
-
-<style>
-	div {
-		background: repeating-linear-gradient(-45deg, red, red 5px, black 5px, black 10px);
-		border: 5px solid red;
-		color: yellow;
-		font-family: 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', '游ゴシック', '游ゴシック体',
-			YuGothic, 'Yu Gothic', 'メイリオ', Meiryo, 'ＭＳ ゴシック', 'MS Gothic', HiraKakuProN-W3,
-			'TakaoExゴシック', TakaoExGothic, 'MotoyaLCedar', 'Droid Sans Japanese', sans-serif;
-		margin: 0 10px 0 0;
-		text-align: center;
-		overflow: hidden;
-	}
-
-	h2,
-	p {
-		background-color: black;
-		font-size: 1em;
-	}
-
-	h2 {
-		text-transform: uppercase;
-		margin: 100px 5px 10px;
-	}
-
-	p {
-		margin: 10px 5px 100px;
-	}
-</style>
diff --git a/src/components/error_block/error_block.test.js b/src/components/error_block/error_block.test.js
deleted file mode 100644
index 43c9331..0000000
--- a/src/components/error_block/error_block.test.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { render } from '@testing-library/svelte';
-import '$/config/i18n';
-
-import ErrorBlock from './error_block.svelte';
-
-describe('Error Block component', () => {
-
-  test('Should display error message sent', () => {
-
-    const results = render(ErrorBlock, { props: {
-      message: 'An error has, sadly, destroyed everything.'
-    } });
-
-    expect(results.getByText('An error has, sadly, destroyed everything.'))
-      .toBeVisible();
-  });
-
-  test('Should display default error message', () => {
-
-    const results = render(ErrorBlock);
-
-    expect(results.getByText('Unknown error has occurred. Panic!'))
-      .toBeVisible();
-  });
-});
-
diff --git a/src/components/footer/.footer.svelte.icloud b/src/components/footer/.footer.svelte.icloud
new file mode 100644
index 0000000..f379de7
--- /dev/null
+++ b/src/components/footer/.footer.svelte.icloud
diff --git a/src/components/footer/footer.svelte b/src/components/footer/footer.svelte
deleted file mode 100644
index 2d5f8ff..0000000
--- a/src/components/footer/footer.svelte
+++ /dev/null
@@ -1,30 +0,0 @@
-<script>
-	import { _ } from 'svelte-i18n';
-
-	import LanguageSelector from '$/components/language_selector/language_selector.svelte';
-
-	const licenseUrl = 'https://gitlab.com/rbdr/forum/';
-</script>
-
-<footer title={$_('footer.title')}>
-	<ul>
-		<li>{@html $_('footer.license', { values: { licenseUrl } })}</li>
-		<li>{$_('footer.choose_language')}: <LanguageSelector /></li>
-	</ul>
-</footer>
-
-<style>
-	footer {
-		grid-column: col-start 1 / span 12;
-		border-top: 1px solid black;
-	}
-
-	ul {
-		padding: 0;
-	}
-
-	li {
-		display: inline;
-		margin: 5px;
-	}
-</style>
diff --git a/src/components/forum/.forum.svelte.icloud b/src/components/forum/.forum.svelte.icloud
new file mode 100644
index 0000000..1f82158
--- /dev/null
+++ b/src/components/forum/.forum.svelte.icloud
diff --git a/src/components/forum/.forum.test.js.icloud b/src/components/forum/.forum.test.js.icloud
new file mode 100644
index 0000000..6321526
--- /dev/null
+++ b/src/components/forum/.forum.test.js.icloud
diff --git a/src/components/forum/forum.svelte b/src/components/forum/forum.svelte
deleted file mode 100644
index ea9b206..0000000
--- a/src/components/forum/forum.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	export let forum;
-
-	import { _ } from 'svelte-i18n';
-	import TopicSummary from '$/components/topic_summary/topic_summary.svelte';
-</script>
-
-<h1>{forum.glyph} {$_(forum.label)}</h1>
-<ul>
-	{#each forum.topics as topic}
-		<TopicSummary {topic} />
-	{/each}
-</ul>
diff --git a/src/components/forum/forum.test.js b/src/components/forum/forum.test.js
deleted file mode 100644
index 832fd6c..0000000
--- a/src/components/forum/forum.test.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { addMessages } from 'svelte-i18n';
-
-import { render } from '@testing-library/svelte';
-import '$/config/i18n';
-
-import Forum from './forum.svelte';
-
-const internals = {
-  results: null
-};
-
-describe('Forum component', () => {
-
-  beforeAll(() => {
-
-    addMessages('en', {
-      'test_forums.oleo': 'Oleo'
-    });
-  });
-
-  beforeEach(() => {
-
-    internals.results = render(Forum, { props: {
-      forum: {
-        id: 'oleo',
-        glyph: '☽',
-        label: 'test_forums.oleo',
-        topics: [
-          {
-            id: '0575d375-5bea-44df-a597-bee3adda624d',
-            title: 'Very forumy topic',
-            ttl: 160 * 1000,
-            updated_at: Date.now()
-          },
-          {
-            id: 'aeeb56e4-751d-4400-8aa7-d0f3a20d4e25',
-            title: 'Only mildly forum-like',
-            ttl: 160 * 1000,
-            updated_at: Date.now()
-          }
-        ]
-      }
-    } });
-  });
-
-  test('It should display the forum glyph and label', () => {
-
-    expect(internals.results.getByText(/^\s*☽\s*Oleo\s*$/))
-      .toBeVisible();
-  });
-
-  test('It should display the topics', () => {
-
-    expect(internals.results.getByText('Very forumy topic'))
-      .toBeVisible();
-    expect(internals.results.getByText('Only mildly forum-like'))
-      .toBeVisible();
-  });
-
-  test('It should link to the topics', () => {
-
-    expect(internals.results.getByText('Very forumy topic').closest('a'))
-      .toHaveAttribute('href', '/t/0575d375-5bea-44df-a597-bee3adda624d');
-    expect(internals.results.getByText('Only mildly forum-like').closest('a'))
-      .toHaveAttribute('href', '/t/aeeb56e4-751d-4400-8aa7-d0f3a20d4e25');
-  });
-});
diff --git a/src/components/forum_list/.forum_list.svelte.icloud b/src/components/forum_list/.forum_list.svelte.icloud
new file mode 100644
index 0000000..5ee5709
--- /dev/null
+++ b/src/components/forum_list/.forum_list.svelte.icloud
diff --git a/src/components/forum_list/.forum_list.test.js.icloud b/src/components/forum_list/.forum_list.test.js.icloud
new file mode 100644
index 0000000..e4c26fc
--- /dev/null
+++ b/src/components/forum_list/.forum_list.test.js.icloud
diff --git a/src/components/forum_list/forum_list.svelte b/src/components/forum_list/forum_list.svelte
deleted file mode 100644
index aeb389e..0000000
--- a/src/components/forum_list/forum_list.svelte
+++ /dev/null
@@ -1,42 +0,0 @@
-<script>
-  import { _ } from 'svelte-i18n';
-  export let forums;
-
-  $: sortedForums = forums.slice().sort((a, b) => a.position - b.position);
-</script>
-
-<ul>
-  {#each sortedForums as forum}
-    <li>
-      <a href="/f/{forum.id}">
-        <span aria-hidden="true" class="navigation-glyph {forum.glyph}">{forum.glyph}</span>
-        <span class="navigation-label">{$_(forum.label)}</span>
-      </a>
-    </li>
-  {/each}
-</ul>
-
-<style>
-	ul {
-		padding: 0;
-	}
-
-	li {
-		display: block;
-		text-align: left;
-		margin-bottom: 20px;
-	}
-
-	.navigation-glyph {
-		font-size: 1.5rem;
-		display: block;
-	}
-
-	.☽ {
-		font-size: 2rem;
-	}
-
-	a {
-		text-decoration: none;
-	}
-</style>
diff --git a/src/components/forum_list/forum_list.test.js b/src/components/forum_list/forum_list.test.js
deleted file mode 100644
index a165f28..0000000
--- a/src/components/forum_list/forum_list.test.js
+++ /dev/null
@@ -1,90 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { render } from '@testing-library/svelte';
-import '$/config/i18n';
-
-import { addMessages } from 'svelte-i18n';
-
-import ForumList from './forum_list.svelte';
-
-const internals = {
-  results: null
-};
-
-describe('Forum List component', () => {
-
-  beforeAll(() => {
-
-    addMessages('en', {
-      'test_forums.yes': 'Absolutely yes',
-      'test_forums.no': 'No, not at all',
-      'test_forums.maybe': 'OK, maybe...'
-    });
-  });
-
-  beforeEach(() => {
-
-    internals.results = render(ForumList, { props: {
-      forums: [
-        {
-          id: 'yes',
-          glyph: '☆',
-          label: 'test_forums.yes',
-          position: 2
-        },
-        {
-          id: 'no',
-          glyph: '◯',
-          label: 'test_forums.no',
-          position: 0
-        },
-        {
-          id: 'maybe',
-          glyph: '⏀',
-          label: 'test_forums.maybe',
-          position: 1
-        }
-      ]
-    } });
-  });
-
-  test('It should display each forum according to their position', () => {
-
-    expect(internals.results.container)
-      .toHaveTextContent(/^◯.+⏀.+☆.+$/);
-  });
-
-  test('It should translate forum labels', () => {
-
-    expect(internals.results.getByText('Absolutely yes')).toBeVisible();
-    expect(internals.results.getByText('No, not at all')).toBeVisible();
-    expect(internals.results.getByText('OK, maybe...')).toBeVisible();
-  });
-
-  test('It should display forum glyphs', () => {
-
-    expect(internals.results.getByText('☆')).toBeVisible();
-    expect(internals.results.getByText('◯')).toBeVisible();
-    expect(internals.results.getByText('⏀')).toBeVisible();
-  });
-
-  test('Label should be a permalink to the forum', () => {
-
-    expect(internals.results.getByText('Absolutely yes').closest('a'))
-      .toHaveAttribute('href', '/f/yes');
-    expect(internals.results.getByText('No, not at all').closest('a'))
-      .toHaveAttribute('href', '/f/no');
-    expect(internals.results.getByText('OK, maybe...').closest('a'))
-      .toHaveAttribute('href', '/f/maybe');
-  });
-
-  test('Glyph should be a permalink to the forum', () => {
-
-    expect(internals.results.getByText('☆').closest('a'))
-      .toHaveAttribute('href', '/f/yes');
-    expect(internals.results.getByText('◯').closest('a'))
-      .toHaveAttribute('href', '/f/no');
-    expect(internals.results.getByText('⏀').closest('a'))
-      .toHaveAttribute('href', '/f/maybe');
-  });
-});
diff --git a/src/components/glyph/.glyph.svelte.icloud b/src/components/glyph/.glyph.svelte.icloud
new file mode 100644
index 0000000..c2e8af7
--- /dev/null
+++ b/src/components/glyph/.glyph.svelte.icloud
diff --git a/src/components/glyph/.glyph.test.js.icloud b/src/components/glyph/.glyph.test.js.icloud
new file mode 100644
index 0000000..182e8e5
--- /dev/null
+++ b/src/components/glyph/.glyph.test.js.icloud
diff --git a/src/components/glyph/glyph.svelte b/src/components/glyph/glyph.svelte
deleted file mode 100644
index 60f99eb..0000000
--- a/src/components/glyph/glyph.svelte
+++ /dev/null
@@ -1,41 +0,0 @@
-<script>
-	import { _ } from 'svelte-i18n';
-	import { getGlyphHash } from '$/utils/glyph_hash';
-
-	export let uuid;
-</script>
-
-<div class="glyphicon" role="img" aria-label={$_('glyph.title')} title={$_('glyph.title')}>
-	{#each getGlyphHash(uuid) as fragment}
-		<span class={fragment.glyph} style="color: {fragment.color} ">
-			{fragment.glyph}
-		</span>
-	{/each}
-</div>
-
-<style>
-	.glyphicon {
-		border: 1px solid black;
-		display: inline-block;
-		font-size: 1.4rem;
-		height: 48px;
-		margin-top: 5px;
-		width: 48px;
-		background-color: white;
-		padding: 2px;
-	}
-
-	span {
-		display: block;
-		float: left;
-		width: 24px;
-		height: 24px;
-		text-align: center;
-		line-height: 24px;
-	}
-
-	.☽ {
-		font-size: 2rem;
-		line-height: 19px;
-	}
-</style>
diff --git a/src/components/glyph/glyph.test.js b/src/components/glyph/glyph.test.js
deleted file mode 100644
index 93ddc8a..0000000
--- a/src/components/glyph/glyph.test.js
+++ /dev/null
@@ -1,32 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { render } from '@testing-library/svelte';
-import '$/config/i18n';
-
-import Glyph from './glyph.svelte';
-
-const internals = {
-  results: null
-};
-
-describe('Glyph component', () => {
-
-  beforeEach(() => {
-
-    internals.results = render(Glyph, { props: {
-      uuid: '9fb14ebc-bc64-400b-915f-d429ec44b8fe'
-    } });
-  });
-
-  test('Should act as an image', () => {
-
-    expect(internals.results.getByRole('img'))
-      .toBeVisible();
-  });
-
-  test('Should render 4 glyphs', () => {
-
-    expect(internals.results.getByRole('img'))
-      .toHaveTextContent(/^. . . .$/);
-  });
-});
diff --git a/src/components/header/.header.svelte.icloud b/src/components/header/.header.svelte.icloud
new file mode 100644
index 0000000..d366346
--- /dev/null
+++ b/src/components/header/.header.svelte.icloud
diff --git a/src/components/header/.header.test.js.icloud b/src/components/header/.header.test.js.icloud
new file mode 100644
index 0000000..0efb8d5
--- /dev/null
+++ b/src/components/header/.header.test.js.icloud
diff --git a/src/components/header/header.svelte b/src/components/header/header.svelte
deleted file mode 100644
index dcf95d5..0000000
--- a/src/components/header/header.svelte
+++ /dev/null
@@ -1,63 +0,0 @@
-<script>
-	import { _ } from 'svelte-i18n';
-	import { version } from '$/config/config';
-	import { topicActions } from '$/stores/actions';
-	import TopicActions from '$/components/actions/topic.svelte';
-</script>
-
-<header title={$_('header.title')}>
-	<ul>
-		<li>
-			<strong
-				><a href="/" title={$_('header.long_version', { values: { version } })}
-					>{$_('header.short_version', { values: { version } })}</a
-				></strong
-			>
-		</li>
-		<li>
-			<a href="/new" title={$_('header.action.new.title')}
-				>{@html $_('header.action.new.display')}</a
-			>
-		</li>
-		{#if $topicActions}
-      <TopicActions actions={$topicActions} />
-		{/if}
-		<li>
-			<a href="/search" title={$_('header.action.search.title')}
-				>{@html $_('header.action.search.display')}</a
-			>
-		</li>
-		<li>
-			<a href="/logout" title={$_('header.action.log_out.title')}
-				>{@html $_('header.action.log_out.display')}</a
-			>
-		</li>
-	</ul>
-</header>
-
-<style>
-	header {
-		grid-column: col-start 1 / span 12;
-		border-bottom: 1px solid black;
-	}
-
-	ul {
-		padding: 0;
-	}
-
-	li {
-		display: inline;
-		margin: 5px;
-	}
-
-	a {
-		text-decoration: none;
-		line-height: 3em;
-		display: inline-block;
-	}
-
-	strong a {
-		color: blue;
-		text-decoration: underline;
-	}
-</style>
diff --git a/src/components/header/header.test.js b/src/components/header/header.test.js
deleted file mode 100644
index 6be2516..0000000
--- a/src/components/header/header.test.js
+++ /dev/null
@@ -1,29 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { render } from '@testing-library/svelte';
-import '$/config/i18n';
-import { enableTopicActions } from '$/stores/actions';
-
-jest.mock('$/config/config.js');
-
-import Header from './header.svelte';
-
-describe('Header component', () => {
-
-  test('Should not display topic if action is not set', () => {
-
-    const results = render(Header);
-
-    expect(results.queryByTitle('Reply'))
-      .toBe(null);
-  });
-
-  test('Should display topic if action is set', () => {
-
-    enableTopicActions('d138d6d8-e669-42e7-995d-20a7fcc176f5');
-    const results = render(Header);
-
-    expect(results.getByTitle('Reply'))
-      .toBeVisible();
-  });
-});
diff --git a/src/components/home/.home.svelte.icloud b/src/components/home/.home.svelte.icloud
new file mode 100644
index 0000000..7efdf01
--- /dev/null
+++ b/src/components/home/.home.svelte.icloud
diff --git a/src/components/home/home.svelte b/src/components/home/home.svelte
deleted file mode 100644
index fa4a70e..0000000
--- a/src/components/home/home.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	import { _ } from 'svelte-i18n';
-</script>
-
-<h1>{$_('home.title')}</h1>
-<p>{$_('home.content')}</p>
diff --git a/src/components/invalid_route/.invalid_route.svelte.icloud b/src/components/invalid_route/.invalid_route.svelte.icloud
new file mode 100644
index 0000000..e5c13aa
--- /dev/null
+++ b/src/components/invalid_route/.invalid_route.svelte.icloud
diff --git a/src/components/invalid_route/invalid_route.svelte b/src/components/invalid_route/invalid_route.svelte
deleted file mode 100644
index 2a3686c..0000000
--- a/src/components/invalid_route/invalid_route.svelte
+++ /dev/null
@@ -1,6 +0,0 @@
-<script>
-	import { _ } from 'svelte-i18n';
-</script>
-
-<h1>{$_('error.invalid_url.title')}</h1>
-<p>{$_('error.invalid_url.message')}</p>
diff --git a/src/components/language_selector/.language_selector.svelte.icloud b/src/components/language_selector/.language_selector.svelte.icloud
new file mode 100644
index 0000000..f981c0f
--- /dev/null
+++ b/src/components/language_selector/.language_selector.svelte.icloud
diff --git a/src/components/language_selector/.language_selector.test.js.icloud b/src/components/language_selector/.language_selector.test.js.icloud
new file mode 100644
index 0000000..7b0a94c
--- /dev/null
+++ b/src/components/language_selector/.language_selector.test.js.icloud
diff --git a/src/components/language_selector/language_selector.svelte b/src/components/language_selector/language_selector.svelte
deleted file mode 100644
index 3198f56..0000000
--- a/src/components/language_selector/language_selector.svelte
+++ /dev/null
@@ -1,26 +0,0 @@
-<script>
-	import { locale, locales } from 'svelte-i18n';
-	import { getLangNameFromCode } from 'language-name-map';
-
-	$: namedLocales = $locales
-	  .map((code) => ({
-	    code,
-	    ...getLangNameFromCode(code)
-	  }))
-	  .sort((a, b) => a.native - b.native);
-
-	let selected = $locale;
-
-	$: {
-	  locale.set(selected);
-	}
-</script>
-
-<select bind:value={selected}>
-	{#each namedLocales as namedLocale}
-		<option value={namedLocale.code}>{namedLocale.native}</option>
-	{/each}
-</select>
-
-<style>
-</style>
diff --git a/src/components/language_selector/language_selector.test.js b/src/components/language_selector/language_selector.test.js
deleted file mode 100644
index baf11bb..0000000
--- a/src/components/language_selector/language_selector.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { locale } from 'svelte-i18n';
-import { act, render } from '@testing-library/svelte';
-import userEvent from '@testing-library/user-event';
-import '$/config/i18n';
-
-import LanguageSelector from './language_selector.svelte';
-
-const internals = {
-  results: null
-};
-
-describe('Language Selector component', () => {
-
-  beforeEach(() => {
-
-    internals.results = render(LanguageSelector);
-  });
-
-  test('Should display languages in their own language', () => {
-
-    expect(internals.results.getByText('English'))
-      .toBeVisible();
-    expect(internals.results.getByText('Español'))
-      .toBeVisible();
-  });
-
-  test('Should change locale when a language is selected', async () => {
-
-    locale.subscribe((localeValue) => {
-
-      expect(localeValue).toBe('en-US');
-    })();
-    const spanish = internals.results.getByText('Español');
-    userEvent.selectOptions(spanish.closest('select'), spanish);
-    await act();
-    locale.subscribe((localeValue) => {
-
-      expect(localeValue).toBe('es');
-    })();
-  });
-});
-
diff --git a/src/components/loader/.loader.svelte.icloud b/src/components/loader/.loader.svelte.icloud
new file mode 100644
index 0000000..5c5fbd6
--- /dev/null
+++ b/src/components/loader/.loader.svelte.icloud
diff --git a/src/components/loader/loader.svelte b/src/components/loader/loader.svelte
deleted file mode 100644
index 8d53736..0000000
--- a/src/components/loader/loader.svelte
+++ /dev/null
@@ -1,5 +0,0 @@
-<script>
-	import { _ } from 'svelte-i18n';
-</script>
-
-<p>{$_('loader.message')}</p>
diff --git a/src/components/post/.post.svelte.icloud b/src/components/post/.post.svelte.icloud
new file mode 100644
index 0000000..677f94f
--- /dev/null
+++ b/src/components/post/.post.svelte.icloud
diff --git a/src/components/post/.post.test.js.icloud b/src/components/post/.post.test.js.icloud
new file mode 100644
index 0000000..fc35a0f
--- /dev/null
+++ b/src/components/post/.post.test.js.icloud
diff --git a/src/components/post/post.svelte b/src/components/post/post.svelte
deleted file mode 100644
index 66901af..0000000
--- a/src/components/post/post.svelte
+++ /dev/null
@@ -1,50 +0,0 @@
-<script>
-	export let post;
-	export let index = 0;
-	export let count = 1;
-
-	import { _ } from 'svelte-i18n';
-	import Glyph from '$/components/glyph/glyph.svelte';
-
-	const timestampToISO = (timestamp) => new Date(timestamp).toISOString();
-</script>
-
-<aside
-	class="post-meta"
-	title={$_('post.metadata_title', { values: { count: index + 1, total: count } })}
->
-	<Glyph uuid={post.author.id} />
-	<span class="h-card">
-		{$_('post.author_credit')}
-		<a href="/a/{post.author.handle}" class="p-nickname u-url">{post.author.handle}</a>.
-	</span>
-	<time role="presentation" class="dt-published" datetime={timestampToISO(post.created_at)}>
-		<a title={$_('post.permalink_title')} href="/p/{post.id}">
-			{timestampToISO(post.created_at)}
-		</a>
-	</time>
-  {#if post.topic}
-  <span>
-    ({$_('post.topic_location')} <a href="/t/{post.topic.id}">{post.topic.title}</a>.)
-  </span>
-  {/if}
-</aside>
-<article
-	class="e-content"
-	title={$_('post.title', {
-		values: { count: index + 1, total: count, author: post.author.handle }
-	})}
->
-	{post.text}
-</article>
-<hr />
-
-<style>
-	.post-meta * {
-		vertical-align: top;
-	}
-
-	article {
-		white-space: pre;
-	}
-</style>
diff --git a/src/components/post/post.test.js b/src/components/post/post.test.js
deleted file mode 100644
index e158ce9..0000000
--- a/src/components/post/post.test.js
+++ /dev/null
@@ -1,124 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { cleanup, render } from '@testing-library/svelte';
-import '$/config/i18n';
-
-import Post from './post.svelte';
-
-const internals = {
-  basicPost: {
-    id: 'e5a19d53-4c9a-4be8-afa5-00942ea3afa4',
-    text: 'This is an example post qwerty',
-    created_at: Date.UTC(2021, 3, 19, 6, 6, 6, 666).valueOf(),
-    author: {
-      handle: 'very_cool_user',
-      id: 'b01bdb48-4b5e-46a4-97f3-6db789bcd33b'
-    },
-    topic: {
-      id: '35d3c3eb-e486-42ef-994c-d8ab1f1e167a',
-      title: 'Parent topic, yes'
-    }
-  },
-  postWithoutTopic: {
-    id: '9e52e38e-9007-4a20-bbf1-cea4e2f950f3',
-    text: 'This is a post without a topic',
-    created_at: Date.UTC(2022, 8, 21, 4, 3, 1, 340).valueOf(),
-    author: {
-      handle: 'my_normal_user',
-      id: '121f8f97-de02-4102-b25d-f34fd619009b'
-    }
-  },
-
-  results: null
-};
-
-describe('Post component', () => {
-
-  beforeEach(() => {
-
-    internals.results = render(Post, { props: {
-      post: internals.basicPost
-    } });
-  });
-
-  test('Should display the text of the post', () => {
-
-    expect(internals.results.getByText('This is an example post qwerty')).toBeVisible();
-  });
-
-  test('Should display date of the post', () => {
-
-    expect(internals.results.getByText('2021-04-19T06:06:06.666Z'))
-      .toBeVisible();
-  });
-
-  test('Date of post should be a permalink to the post', () => {
-
-    expect(internals.results.getByText('2021-04-19T06:06:06.666Z').closest('a'))
-      .toHaveAttribute('href', '/p/e5a19d53-4c9a-4be8-afa5-00942ea3afa4');
-  });
-
-  test('Should display the glyph of the post author', () => {
-
-    const glyphicon = internals.results.getByRole('img');
-
-    expect(glyphicon)
-      .toBeVisible();
-    expect(glyphicon)
-      .toHaveTextContent(/^. . . .$/);
-  });
-
-  test('Should display author handle', () => {
-
-    expect(internals.results.getByText('very_cool_user'))
-      .toBeVisible();
-  });
-
-  test('Author handle should have a permalink to topic', () => {
-
-    expect(internals.results.getByText('very_cool_user').closest('a'))
-      .toHaveAttribute('href', '/a/very_cool_user');
-  });
-
-  test('Should display parent topic title', () => {
-
-    expect(internals.results.getByText('Parent topic, yes'))
-      .toBeVisible();
-  });
-
-  test('Parent topic title should have a permalink to topic', () => {
-
-    expect(internals.results.getByText('Parent topic, yes').closest('a'))
-      .toHaveAttribute('href', '/t/35d3c3eb-e486-42ef-994c-d8ab1f1e167a');
-  });
-
-  test('Parent topic title should have a permalink to topic', () => {
-
-    cleanup();
-    internals.results = render(Post, { props: {
-      post: internals.postWithoutTopic
-    } });
-
-    expect(internals.results.queryByText('Parent topic, yes'))
-      .toBe(null);
-  });
-
-  test('It should default to 1/1 when no index or count is passed', () => {
-
-    expect(internals.results.getByTitle('Post 1 of 1 by very_cool_user'))
-      .toBeVisible();
-  });
-
-  test('Parent topic title should have a permalink to topic', () => {
-
-    cleanup();
-    internals.results = render(Post, { props: {
-      index: 2,
-      count: 5,
-      post: internals.postWithoutTopic
-    } });
-
-    expect(internals.results.getByTitle('Post 3 of 5 by my_normal_user'))
-      .toBeVisible();
-  });
-});
diff --git a/src/components/tag/.tag.svelte.icloud b/src/components/tag/.tag.svelte.icloud
new file mode 100644
index 0000000..9400b48
--- /dev/null
+++ b/src/components/tag/.tag.svelte.icloud
diff --git a/src/components/tag/.tag.test.js.icloud b/src/components/tag/.tag.test.js.icloud
new file mode 100644
index 0000000..2d956fd
--- /dev/null
+++ b/src/components/tag/.tag.test.js.icloud
diff --git a/src/components/tag/tag.svelte b/src/components/tag/tag.svelte
deleted file mode 100644
index 954cdaa..0000000
--- a/src/components/tag/tag.svelte
+++ /dev/null
@@ -1,13 +0,0 @@
-<script>
-	export let tag;
-
-	import { _ } from 'svelte-i18n';
-	import TopicSummary from '$/components/topic_summary/topic_summary.svelte';
-</script>
-
-<h1>{$_('tag.title')}: {tag.id}</h1>
-<ul>
-	{#each tag.topics as topic}
-		<TopicSummary {topic} />
-	{/each}
-</ul>
diff --git a/src/components/tag/tag.test.js b/src/components/tag/tag.test.js
deleted file mode 100644
index a2b6e0d..0000000
--- a/src/components/tag/tag.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { render } from '@testing-library/svelte';
-import '$/config/i18n';
-
-import Tag from './tag.svelte';
-
-const internals = {
-  results: null
-};
-
-describe('Tag component', () => {
-
-  beforeEach(() => {
-
-    internals.results = render(Tag, { props: {
-      tag: {
-        id: 'avocado',
-        topics: [
-          {
-            id: 'eb751e7a-5777-46c3-b81b-cc66546d5157',
-            title: 'A single topic',
-            ttl: 160 * 1000,
-            updated_at: Date.now()
-          },
-          {
-            id: 'b4a5613c-237b-4147-a867-9c105d51e365',
-            title: 'And its companion',
-            ttl: 160 * 1000,
-            updated_at: Date.now()
-          }
-        ]
-      }
-    } });
-  });
-
-  test('It should display the tag title', () => {
-
-    expect(internals.results.getByText('Tag: avocado'))
-      .toBeVisible();
-  });
-
-  test('It should display the topics', () => {
-
-    expect(internals.results.getByText('A single topic'))
-      .toBeVisible();
-    expect(internals.results.getByText('And its companion'))
-      .toBeVisible();
-  });
-
-  test('It should link to the topics', () => {
-
-    expect(internals.results.getByText('A single topic').closest('a'))
-      .toHaveAttribute('href', '/t/eb751e7a-5777-46c3-b81b-cc66546d5157');
-    expect(internals.results.getByText('And its companion').closest('a'))
-      .toHaveAttribute('href', '/t/b4a5613c-237b-4147-a867-9c105d51e365');
-  });
-});
diff --git a/src/components/topic/.topic.svelte.icloud b/src/components/topic/.topic.svelte.icloud
new file mode 100644
index 0000000..e60b61c
--- /dev/null
+++ b/src/components/topic/.topic.svelte.icloud
diff --git a/src/components/topic/.topic.test.js.icloud b/src/components/topic/.topic.test.js.icloud
new file mode 100644
index 0000000..1e163ec
--- /dev/null
+++ b/src/components/topic/.topic.test.js.icloud
diff --git a/src/components/topic/topic.svelte b/src/components/topic/topic.svelte
deleted file mode 100644
index c0dbfbc..0000000
--- a/src/components/topic/topic.svelte
+++ /dev/null
@@ -1,44 +0,0 @@
-<script>
-	export let topic;
-
-	import { _ } from 'svelte-i18n';
-	import Post from '$/components/post/post.svelte';
-	import { readableTime } from '$/utils/readable_time.js';
-
-	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
-	$: remaining = readableTime(remainingTime);
-</script>
-
-<div class="h-entry" title={$_('topic.title')}>
-	<h1 class="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>
-		{/if}
-		<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>
-	</aside>
-	{#if topic.tags.length > 0}
-		<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>{' '}
-			{/each}
-		</aside>
-	{/if}
-	{#each topic.posts as post, index}
-		<Post {post} {index} count={topic.posts.length} />
-	{/each}
-</div>
diff --git a/src/components/topic/topic.test.js b/src/components/topic/topic.test.js
deleted file mode 100644
index b4071b5..0000000
--- a/src/components/topic/topic.test.js
+++ /dev/null
@@ -1,164 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { addMessages } from 'svelte-i18n';
-
-import { cleanup, render } from '@testing-library/svelte';
-import '$/config/i18n';
-
-import Topic from './topic.svelte';
-
-const internals = {
-  results: null,
-  basicTopic: {
-    id: 'b1a4f8d1-4d16-4872-b391-fda6a0e9012d',
-    title: 'I sure am a test topic',
-    ttl: 160 * 1000,
-    updated_at: Date.now(),
-    forum: {
-      id: 'diversion',
-      glyph: '⏃',
-      label: 'test_forums.diversion'
-    },
-    tags: [
-      {
-        id: 'fish',
-        weight: 40
-      },
-      {
-        id: 'statue',
-        weight: 5
-      }
-    ],
-    posts: [
-      {
-        id: '413a74db-9473-4bac-8698-da9452c05854',
-        text: 'This is the first post',
-        created_at: Date.UTC(1999, 7, 1, 8, 8, 2, 111).valueOf(),
-        author: {
-          handle: 'past_user',
-          id: 'c76d3e51-76ac-4e84-a1b2-2eee9abd68b3'
-        }
-      },
-      {
-        id: '821ff177-5250-406f-9431-1a8097b35430',
-        text: 'This response came later',
-        created_at: Date.UTC(2038, 1, 2, 3, 4, 6, 789).valueOf(),
-        author: {
-          handle: 'future_user',
-          id: 'cb9307cb-77e9-4c55-bbe7-dbbf88737358'
-        }
-      }
-    ]
-  },
-  topicWithoutForum: {
-    id: '9715e9ee-0d63-4b50-b613-826ef2791728',
-    title: 'This topic, no forums',
-    ttl: 160 * 1000,
-    updated_at: Date.now(),
-    tags: [
-      {
-        id: 'cauliflower',
-        weight: 33
-      }
-    ],
-    posts: []
-  }
-};
-
-describe('Topic component', () => {
-
-  beforeAll(() => {
-
-    addMessages('en', {
-      'test_forums.diversion': 'Diversion'
-    });
-  });
-
-  beforeEach(() => {
-
-    internals.results = render(Topic, { props: {
-      topic: internals.basicTopic
-    } });
-  });
-
-  test('Should show the topic title', () => {
-
-    expect(internals.results.getByText('I sure am a test topic'))
-      .toBeVisible();
-  });
-  test('Should display remaining time in readable format', () => {
-
-    expect(internals.results.getByText(/2 minutes remaining/))
-      .toBeVisible();
-  });
-  test('Remaining time should be a permalink to the topic', () => {
-
-    expect(internals.results.getByText(/2 minutes remaining/).closest('a'))
-      .toHaveAttribute('href', '/t/b1a4f8d1-4d16-4872-b391-fda6a0e9012d');
-  });
-
-  test('Should show text for all posts', () => {
-
-    expect(internals.results.getByText('This is the first post'))
-      .toBeVisible();
-    expect(internals.results.getByText('This response came later'))
-      .toBeVisible();
-  });
-
-  test('Should send index and count to posts', () => {
-
-    expect(internals.results.getByTitle('Post 1 of 2 by past_user'))
-      .toBeVisible();
-    expect(internals.results.getByTitle('Post 2 of 2 by future_user'))
-      .toBeVisible();
-  });
-
-  describe('Forum link', () => {
-
-    test('Should show forum if the post has one', () => {
-
-      expect(internals.results.getByText(/^\s*⏃\s*Diversion\s*$/))
-        .toBeVisible();
-    });
-
-    test('Forum text should be a permalink to the forum', () => {
-
-      expect(internals.results.getByText(/^\s*⏃\s*Diversion\s*$/).closest('a'))
-        .toHaveAttribute('href', '/f/diversion');
-    });
-
-    test('Should not show forum if the post doesn\'t have one', () => {
-
-      cleanup();
-      internals.results = render(Topic, { props: {
-        topic: internals.topicWithoutForum
-      } });
-
-      expect(internals.results.queryByText(/^\s*⏃\s*Diversion\s*$/))
-        .toBe(null);
-    });
-  });
-
-  describe('Tag listing', () => {
-
-    test('Should show topic tags', () => {
-
-      expect(internals.results.getByText('fish'))
-        .toBeVisible();
-      expect(internals.results.getByText('fish'))
-        .toHaveTextContent('fish(40)');
-      expect(internals.results.getByText('statue'))
-        .toBeVisible();
-      expect(internals.results.getByText('statue'))
-        .toHaveTextContent('statue(5)');
-    });
-
-    test('Tag text should be a permalink to the tag', () => {
-
-      expect(internals.results.getByText('fish').closest('a'))
-        .toHaveAttribute('href', '/g/fish');
-      expect(internals.results.getByText('statue').closest('a'))
-        .toHaveAttribute('href', '/g/statue');
-    });
-  });
-});
diff --git a/src/components/topic_summary/.topic_summary.svelte.icloud b/src/components/topic_summary/.topic_summary.svelte.icloud
new file mode 100644
index 0000000..5060c48
--- /dev/null
+++ b/src/components/topic_summary/.topic_summary.svelte.icloud
diff --git a/src/components/topic_summary/.topic_summary.test.js.icloud b/src/components/topic_summary/.topic_summary.test.js.icloud
new file mode 100644
index 0000000..a1b3613
--- /dev/null
+++ b/src/components/topic_summary/.topic_summary.test.js.icloud
diff --git a/src/components/topic_summary/topic_summary.svelte b/src/components/topic_summary/topic_summary.svelte
deleted file mode 100644
index 86e51d1..0000000
--- a/src/components/topic_summary/topic_summary.svelte
+++ /dev/null
@@ -1,23 +0,0 @@
-<script>
-	export let topic;
-
-	import { _ } from 'svelte-i18n';
-	import { readableTime } from '$/utils/readable_time.js';
-
-	$: remainingTime = topic.updated_at + topic.ttl - Date.now();
-	$: remaining = readableTime(remainingTime);
-</script>
-
-<li class="h-entry" title={$_('topic.title')}>
-  <span class="p-name">
-    <a class="u-url u-uid" title={$_('topic.permalink_title')} href="/t/{topic.id}">
-      {topic.title}
-  </a></span>
-    <span class="topic-ttl">({$_('topic.remaining_time', {
-			values: { remaining: $_(remaining.label, { values: { count: remaining.count } }) }
-      })})
-    </span>
-</li>
-
-<style>
-</style>
diff --git a/src/components/topic_summary/topic_summary.test.js b/src/components/topic_summary/topic_summary.test.js
deleted file mode 100644
index 9122730..0000000
--- a/src/components/topic_summary/topic_summary.test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-
-import { render } from '@testing-library/svelte';
-import '$/config/i18n';
-
-import TopicSummary from './topic_summary.svelte';
-
-const internals = {
-  results: null
-};
-
-describe('Topic Summary component', () => {
-
-  beforeEach(() => {
-
-    internals.results = render(TopicSummary, { props: {
-      topic: {
-        id: 'ea2431c8-5c1c-4ed0-907a-45e012696ab8',
-        title: 'I sure am a test topic',
-        ttl: 160 * 1000,
-        updated_at: Date.now()
-      }
-    } });
-  });
-
-  test('It should display the title', () => {
-
-    expect(internals.results.getByText('I sure am a test topic'))
-      .toBeVisible();
-  });
-
-  test('Topic title should be a permalink', () => {
-
-    expect(internals.results.getByText('I sure am a test topic').closest('a'))
-      .toHaveAttribute('href', '/t/ea2431c8-5c1c-4ed0-907a-45e012696ab8');
-  });
-
-  test('It should display remaining time in readable format', () => {
-
-    expect(internals.results.getByText(/2 minutes remaining/))
-      .toBeVisible();
-  });
-});