use base64 instead of hex and refactor a bit

frontend/src/lib/ui/FileUpload.svelte

@@ -1,38 +1,32 @@
 <script lang="ts">
-	import type { FileDTO } from '$lib/api'
-	import { Files } from '$lib/files'
-	import { createEventDispatcher } from 'svelte'
 	import { t } from 'svelte-intl-precompile'
-	import Button from './Button.svelte'
-	import MaxSize from './MaxSize.svelte'
+
+	import type { FileDTO } from '$lib/api'
+	import Button from '$lib/ui/Button.svelte'
+	import MaxSize from '$lib/ui/MaxSize.svelte'
 
 	export let label: string = ''
-	let files: File[] = []
+	export let files: FileDTO[] = []
 
-	const dispatch = createEventDispatcher<{ file: string }>()
+	function fileToDTO(file: File): FileDTO {
+		return {
+			name: file.name,
+			size: file.size,
+			type: file.type,
+			contents: file,
+		}
+	}
 
 	async function onInput(e: Event) {
 		const input = e.target as HTMLInputElement
 		if (input?.files?.length) {
-			files = [...files, ...Array.from(input.files)]
-			const data: FileDTO[] = await Promise.all(
-				files.map(async (file) => ({
-					name: file.name,
-					type: file.type,
-					size: file.size,
-					contents: await Files.toString(file),
-				}))
-			)
-			dispatch('file', JSON.stringify(data))
-		} else {
-			dispatch('file', '')
+			files = [...files, ...Array.from(input.files).map(fileToDTO)]
 		}
 	}
 
 	function clear(e: Event) {
 		e.preventDefault()
 		files = []
-		dispatch('file', '')
 	}
 </script>
 
@@ -57,7 +51,9 @@
 			<div>
 				<b>{$t('file_upload.no_files_selected')}</b>
 				<br />
-				<small>{$t('common.max')}: <MaxSize /></small>
+				<small>
+					{$t('common.max')}: <MaxSize />
+				</small>
 			</div>
 		{/if}
 	</div>

frontend/src/lib/ui/NoteResult.svelte

@@ -0,0 +1,36 @@
+<script lang="ts" context="module">
+	export type NoteResult = {
+		password: string
+		id: string
+	}
+</script>
+
+<script lang="ts">
+	import { t } from 'svelte-intl-precompile'
+
+	import Button from '$lib/ui/Button.svelte'
+	import TextInput from '$lib/ui/TextInput.svelte'
+
+	export let result: NoteResult
+
+	function reset() {
+		window.location.reload()
+	}
+</script>
+
+<TextInput
+	type="text"
+	readonly
+	label={$t('common.share_link')}
+	value="{window.location.origin}/note/{result.id}#{result.password}"
+	copy
+/>
+<br />
+<p>
+	{@html $t('home.new_note_notice')}
+</p>
+<br />
+<Button on:click={reset}>{$t('home.new_note')}</Button>
+
+<style>
+</style>

frontend/src/lib/ui/ShowNote.svelte

@@ -1,20 +1,24 @@
+<script lang="ts" context="module">
+	export type DecryptedNote = Omit<NotePublic, 'contents'> & { contents: any }
+</script>
+
 <script lang="ts">
-	import type { FileDTO, NotePublic } from '$lib/api'
-	import { Files } from '$lib/files'
 	import copy from 'copy-to-clipboard'
 	import DOMPurify from 'dompurify'
 	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
+	import type { FileDTO, NotePublic } from '$lib/api'
+	import Button from '$lib/ui/Button.svelte'
+
+	export let note: DecryptedNote
 
 	const RE_URL = /[A-Za-z]+:\/\/([A-Z a-z0-9\-._~:\/?#\[\]@!$&'()*+,;%=])+/g
 	let files: FileDTO[] = []
 
 	$: if (note.meta.type === 'file') {
-		files = JSON.parse(note.contents) as FileDTO[]
+		files = note.contents
 	}
 
 	$: download = () => {
@@ -24,7 +28,7 @@
 	}
 
 	async function downloadFile(file: FileDTO) {
-		const f = new File([await Files.fromString(file.contents)], file.name, {
+		const f = new File([file.contents], file.name, {
 			type: file.type,
 		})
 		saveAs(f)

frontend/src/lib/ui/TextInput.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
-	import { getRandomBytes, Hex } from '$lib/crypto'
 	import copyToClipboard from 'copy-to-clipboard'
 	import { t } from 'svelte-intl-precompile'
 	import { fade } from 'svelte/transition'
-	import Icon from './Icon.svelte'
+
+	import { Crypto, Hex } from '$lib/crypto'
+	import Icon from '$lib/ui/Icon.svelte'
 
 	export let label: string = ''
 	export let value: any
@@ -32,7 +33,7 @@
 		notify($t('home.copied_to_clipboard'))
 	}
 	function randomFN() {
-		value = Hex.encode(getRandomBytes(20))
+		value = Hex.encode(Crypto.getRandomBytes(20))
 	}
 
 	function notify(msg: string, delay: number = 2000) {