translate the app

frontend/src/lib/ui/FileUpload.svelte

@@ -2,6 +2,7 @@
 	import type { FileDTO } from '$lib/api'
 	import { Files } from '$lib/files'
 	import { createEventDispatcher } from 'svelte'
+	import { t } from 'svelte-intl-precompile'
 	import MaxSize from './MaxSize.svelte'
 
 	export let label: string = ''
@@ -40,7 +41,7 @@
 	<div class="box">
 		{#if files.length}
 			<div>
-				<b>Selected Files</b>
+				<b>{$t('file_upload.selected_files')}</b>
 				{#each files as file}
 					<div class="file">
 						{file.name}
@@ -49,9 +50,9 @@
 			</div>
 		{:else}
 			<div>
-				<b>No Files Selected</b>
+				<b>{$t('file_upload.no_files_selected')}</b>
 				<br />
-				<small>max: <MaxSize /></small>
+				<small>{$t('common.max')}: <MaxSize /></small>
 			</div>
 		{/if}
 	</div>

frontend/src/lib/ui/MaxSize.svelte

@@ -1,12 +1,13 @@
 <script lang="ts">
 	import { status } from '$lib/stores/status'
 	import prettyBytes from 'pretty-bytes'
+	import { _ } from 'svelte-intl-precompile'
 </script>
 
 <span>
 	{#if $status !== null}
 		{prettyBytes($status.max_size, { binary: true })}
 	{:else}
-		loading...
+		{$_('common.loading')}
 	{/if}
 </span>

frontend/src/lib/ui/ShowNote.svelte

@@ -4,6 +4,7 @@
 	import copy from 'copy-to-clipboard'
 	import { saveAs } from 'file-saver'
 	import prettyBytes from 'pretty-bytes'
+	import { t } from 'svelte-intl-precompile'
 	import Button from './Button.svelte'
 
 	export let note: NotePublic
@@ -28,20 +29,20 @@
 	}
 </script>
 
-<p class="error-text">you will <b>not</b> get the chance to see the note again.</p>
+<p class="error-text">{@html $t('show.warning_will_not_see_again')}</p>
 {#if note.meta.type === 'text'}
-	<div class="note" data-testid="note-result">
+	<div class="note">
 		{note.contents}
 	</div>
-	<Button on:click={() => copy(note.contents)}>copy to clipboard</Button>
+	<Button on:click={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
 {:else}
 	{#each files as file}
-		<div class="note file" data-testid="note-result">
+		<div class="note file">
 			<b on:click={() => downloadFile(file)}>↓ {file.name}</b>
 			<small> {file.type} － {prettyBytes(file.size)}</small>
 		</div>
 	{/each}
-	<Button on:click={download}>download all</Button>
+	<Button on:click={download}>{$t('show.download_all')}</Button>
 {/if}
 
 <style>

frontend/src/lib/ui/ThemeToggle.svelte

@@ -34,6 +34,7 @@
 
 <script lang="ts">
 	import Icon from '$lib/ui/Icon.svelte'
+	import { t } from 'svelte-intl-precompile'
 
 	function change() {
 		theme.update((current) => NextTheme[current])
@@ -42,7 +43,7 @@
 
 <div on:click={change}>
 	<Icon class="icon" icon="contrast-sharp" />
-	{$theme}
+	{$t('theme.' + $theme)}
 </div>
 
 <style>