restructuring (#56)

* restructuring

* pin svelte kit version & parallel execution

* update svelte kit

* correct test result assets

* add timeout

* correct locale path

* simplify crypto

* fix for #58

* add verbosity flag

* disable flaky test

packages/frontend/src/lib/ui/AboutParagraph.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	export let title: string
+</script>
+
+<p>
+	<b>▶ {title}</b>
+	<slot />
+</p>
+
+<style>
+	b {
+		display: block;
+		margin-bottom: 0.25rem;
+	}
+
+	p > :global(span) {
+		padding-left: 1.25em;
+	}
+</style>

packages/frontend/src/lib/ui/AdvancedParameters.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { t } from 'svelte-intl-precompile'
+
+	import type { Note } from '$lib/api'
+	import { status } from '$lib/stores/status'
+	import Switch from '$lib/ui/Switch.svelte'
+	import TextInput from '$lib/ui/TextInput.svelte'
+
+	export let note: Note
+	export let timeExpiration = false
+</script>
+
+<div class="fields">
+	<TextInput
+		data-testid="field-views"
+		type="number"
+		label={$t('common.views', { values: { n: 0 } })}
+		bind:value={note.views}
+		disabled={timeExpiration}
+		max={$status?.max_views}
+		validate={(v) =>
+			($status && v <= $status?.max_views) ||
+			$t('home.errors.max', { values: { n: $status?.max_views ?? 0 } })}
+	/>
+	<div class="middle-switch">
+		<Switch
+			data-testid="switch-advanced-toggle"
+			label={$t('common.mode')}
+			bind:value={timeExpiration}
+			color={false}
+		/>
+	</div>
+	<TextInput
+		data-testid="field-expiration"
+		type="number"
+		label={$t('common.minutes', { values: { n: 0 } })}
+		bind:value={note.expiration}
+		disabled={!timeExpiration}
+		max={$status?.max_expiration}
+		validate={(v) =>
+			($status && v < $status?.max_expiration) ||
+			$t('home.errors.max', { values: { n: $status?.max_expiration ?? 0 } })}
+	/>
+</div>
+
+<style>
+	.middle-switch {
+		margin: 0 1rem;
+	}
+
+	.fields {
+		display: flex;
+	}
+</style>

packages/frontend/src/lib/ui/Button.svelte

@@ -0,0 +1,18 @@
+<button {...$$restProps} on:click><slot /></button>
+
+<style>
+	button {
+		width: auto;
+		display: inline-block;
+		padding: 0.25rem 2.5rem;
+		border: 2px solid var(--ui-bg-2);
+		background: var(--ui-bg-1);
+		outline: none;
+		cursor: pointer;
+		height: 2.5rem;
+	}
+
+	button:hover {
+		border-color: var(--ui-clr-primary);
+	}
+</style>

packages/frontend/src/lib/ui/FileUpload.svelte

@@ -0,0 +1,78 @@
+<script lang="ts">
+	import { t } from 'svelte-intl-precompile'
+
+	import type { FileDTO } from '$lib/api'
+	import Button from '$lib/ui/Button.svelte'
+	import MaxSize from '$lib/ui/MaxSize.svelte'
+
+	export let label: string = ''
+	export let files: FileDTO[] = []
+
+	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).map(fileToDTO)]
+		}
+	}
+
+	function clear(e: Event) {
+		e.preventDefault()
+		files = []
+	}
+</script>
+
+<label>
+	<small>
+		{label}
+	</small>
+	<input {...$$restProps} type="file" on:change={onInput} multiple />
+	<div class="box">
+		{#if files.length}
+			<div>
+				<b>{$t('file_upload.selected_files')}</b>
+				{#each files as file}
+					<div class="file">
+						{file.name}
+					</div>
+				{/each}
+				<div class="spacer" />
+				<Button on:click={clear}>Clear</Button>
+			</div>
+		{:else}
+			<div>
+				<b>{$t('file_upload.no_files_selected')}</b>
+				<br />
+				<small>
+					{$t('common.max')}: <MaxSize />
+				</small>
+			</div>
+		{/if}
+	</div>
+</label>
+
+<style>
+	input {
+		display: none;
+	}
+
+	.box {
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		cursor: pointer;
+	}
+
+	.spacer {
+		margin-top: 1rem;
+	}
+</style>

packages/frontend/src/lib/ui/Icon.svelte

@@ -0,0 +1,37 @@
+<script lang="ts" context="module">
+	import IconContrast from '$lib/icons/IconContrast.svelte'
+	import IconCopy from '$lib/icons/IconCopy.svelte'
+	import IconDice from '$lib/icons/IconDice.svelte'
+	import IconEye from '$lib/icons/IconEye.svelte'
+	import IconEyeOff from '$lib/icons/IconEyeOff.svelte'
+
+	const map = {
+		contrast: IconContrast,
+		copy: IconCopy,
+		dice: IconDice,
+		eye: IconEye,
+		'eye-off': IconEyeOff,
+	}
+</script>
+
+<script lang="ts">
+	export let icon: keyof typeof map
+</script>
+
+<div on:click {...$$restProps}>
+	{#if map[icon]}
+		<svelte:component this={map[icon]} />
+	{/if}
+</div>
+
+<style>
+	div {
+		display: inline-block;
+		contain: strict;
+		box-sizing: content-box;
+	}
+	div > :global(svg) {
+		display: block;
+		fill: currentColor;
+	}
+</style>

packages/frontend/src/lib/ui/Loader.svelte

@@ -0,0 +1,41 @@
+<svg
+	version="1.1"
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink"
+	viewBox="0 0 100 100"
+	xml:space="preserve"
+>
+	<rect fill="none" stroke="currentColor" stroke-width="4" x="25" y="25" width="50" height="50">
+		<animateTransform
+			attributeName="transform"
+			dur="0.5s"
+			from="0 50 50"
+			to="180 50 50"
+			type="rotate"
+			id="strokeBox"
+			attributeType="XML"
+			begin="rectBox.end"
+		/>
+	</rect>
+	<rect x="27" y="27" fill="currentColor" width="46" height="50">
+		<animate
+			attributeName="height"
+			dur="1.3s"
+			attributeType="XML"
+			from="50"
+			to="0"
+			id="rectBox"
+			fill="freeze"
+			begin="0s;strokeBox.end"
+		/>
+	</rect>
+</svg>
+
+<style>
+	svg {
+		height: 2em;
+		position: relative;
+		top: 0.6em;
+		pointer-events: none;
+	}
+</style>

packages/frontend/src/lib/ui/MaxSize.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import prettyBytes from 'pretty-bytes'
+	import { _ } from 'svelte-intl-precompile'
+
+	import { status } from '$lib/stores/status'
+
+	// Due to encoding overhead (~35%) with base64
+	// https://en.wikipedia.org/wiki/Base64
+	const overhead = 1 / 1.35
+</script>
+
+<span>
+	{#if $status !== null}
+		{prettyBytes($status.max_size * overhead, { binary: true })}
+	{:else}
+		{$_('common.loading')}
+	{/if}
+</span>

packages/frontend/src/lib/ui/NoteResult.svelte

@@ -0,0 +1,37 @@
+<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
+	data-testid="share-link"
+/>
+<br />
+<p>
+	{@html $t('home.new_note_notice')}
+</p>
+<br />
+<Button on:click={reset}>{$t('home.new_note')}</Button>
+
+<style>
+</style>

packages/frontend/src/lib/ui/ShowNote.svelte

@@ -0,0 +1,93 @@
+<script lang="ts" context="module">
+	export type DecryptedNote = Omit<NotePublic, 'contents'> & { contents: any }
+</script>
+
+<script lang="ts">
+	import DOMPurify from 'dompurify'
+	import { saveAs } from 'file-saver'
+	import prettyBytes from 'pretty-bytes'
+	import { t } from 'svelte-intl-precompile'
+
+	import type { FileDTO, NotePublic } from '$lib/api'
+	import Button from '$lib/ui/Button.svelte'
+	import { copy } from '$lib/utils'
+
+	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 = note.contents
+	}
+
+	$: download = () => {
+		for (const file of files) {
+			downloadFile(file)
+		}
+	}
+
+	async function downloadFile(file: FileDTO) {
+		const f = new File([file.contents], file.name, {
+			type: file.type,
+		})
+		saveAs(f)
+	}
+
+	function contentWithLinks(content: string): string {
+		const replaced = content.replace(
+			RE_URL,
+			(url) => `<a href="${url}" rel="noreferrer">${url}</a>`
+		)
+		return DOMPurify.sanitize(replaced, { USE_PROFILES: { html: true } })
+	}
+</script>
+
+<p class="error-text">{@html $t('show.warning_will_not_see_again')}</p>
+<div data-testid="result">
+	{#if note.meta.type === 'text'}
+		<div class="note">
+			{@html contentWithLinks(note.contents)}
+		</div>
+		<Button on:click={() => copy(note.contents)}>{$t('common.copy_clipboard')}</Button>
+	{:else}
+		{#each files as file}
+			<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}>{$t('show.download_all')}</Button>
+	{/if}
+</div>
+
+<style>
+	.note {
+		width: 100%;
+		margin: 0;
+		padding: 0;
+		border: 2px solid var(--ui-bg-1);
+		outline: none;
+		padding: 0.5rem;
+		white-space: pre;
+		overflow: auto;
+		margin-bottom: 0.5rem;
+	}
+
+	.note b {
+		cursor: pointer;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+	}
+
+	.note.file {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+	}
+
+	.note.file small {
+		padding-left: 1rem;
+	}
+</style>

packages/frontend/src/lib/ui/Switch.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+	export let label: string = ''
+	export let value: boolean
+	export let color = true
+</script>
+
+<div {...$$restProps}>
+	<label class="switch">
+		<small>{label}</small>
+		<input type="checkbox" bind:checked={value} />
+		<span class:color class="slider" />
+	</label>
+</div>
+
+<style>
+	div {
+		height: 3.75rem;
+	}
+
+	.switch {
+		position: relative;
+		display: inline-block;
+		width: 4rem;
+		height: 2.5rem;
+	}
+
+	.switch input {
+		opacity: 0;
+		width: 0;
+		height: 0;
+	}
+
+	.slider {
+		position: absolute;
+		cursor: pointer;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		border: 2px solid var(--ui-bg-1);
+		background-color: var(--ui-bg-0);
+		transition: var(--ui-anim);
+		transform: translateY(1.2rem);
+	}
+
+	.slider:before {
+		position: absolute;
+		content: '';
+		height: 2rem;
+		width: 1.25rem;
+		left: 0.125rem;
+		bottom: 0.125rem;
+		background-color: var(--ui-bg-1);
+		-webkit-transition: 0.4s;
+		transition: var(--ui-anim);
+	}
+
+	input:checked + .slider.color:before {
+		background-color: var(--ui-clr-primary);
+	}
+
+	input:checked + .slider:before {
+		transform: translateX(calc(2.25rem - 1px));
+	}
+</style>

packages/frontend/src/lib/ui/TextArea.svelte

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export let label: string = ''
+	export let value: string
+</script>
+
+<label>
+	<small>
+		{label}
+	</small>
+	<textarea class="box" {...$$restProps} bind:value />
+</label>

packages/frontend/src/lib/ui/TextInput.svelte

@@ -0,0 +1,99 @@
+<script lang="ts">
+	import { Crypto, Hex } from '$lib/crypto'
+	import Icon from '$lib/ui/Icon.svelte'
+	import { copy as copyFN } from '$lib/utils'
+
+	export let label: string = ''
+	export let value: any
+	export let validate: (value: any) => boolean | string = () => true
+	export let copy: boolean = false
+	export let random: boolean = false
+
+	const initialType = $$restProps.type
+	const isPassword = initialType === 'password'
+	let hidden = true
+
+	$: valid = validate(value)
+
+	$: if (isPassword) {
+		value
+		$$restProps.type = hidden ? initialType : 'text'
+	}
+
+	function toggle() {
+		hidden = !hidden
+	}
+	function randomFN() {
+		value = Hex.encode(Crypto.getRandomBytes(32))
+	}
+</script>
+
+<label>
+	<small disabled={$$restProps.disabled}>
+		{label}
+		{#if valid !== true}
+			<span class="error-text">{valid}</span>
+		{/if}
+	</small>
+	<input bind:value {...$$restProps} class:valid={valid === true} />
+	<div class="icons">
+		{#if isPassword}
+			<Icon class="icon" icon={hidden ? 'eye' : 'eye-off'} on:click={toggle} />
+		{/if}
+		{#if random}
+			<Icon class="icon" icon="dice" on:click={randomFN} />
+		{/if}
+		{#if copy}
+			<Icon class="icon" icon="copy" on:click={() => copyFN(value.toString())} />
+		{/if}
+	</div>
+</label>
+
+<style>
+	label {
+		position: relative;
+		display: block;
+	}
+
+	label > small {
+		display: block;
+	}
+
+	input {
+		width: 100%;
+		margin: 0;
+		border: 2px solid var(--ui-bg-1);
+		outline: none;
+		padding: 0.5rem;
+		height: 2.5rem;
+	}
+	input:hover,
+	input:focus {
+		border-color: var(--ui-clr-primary);
+	}
+
+	input:not(.valid) {
+		border-color: var(--ui-clr-error);
+	}
+
+	.icons {
+		border: 1px red;
+		position: absolute;
+		right: 0.3rem;
+		bottom: 0.3rem;
+		display: flex;
+		color: var(--ui-clr-primary);
+	}
+	.icons > :global(.icon) {
+		width: 1.5rem;
+		height: 1.5rem;
+		background-color: var(--ui-bg-1);
+		border: 2px solid var(--ui-bg-2);
+		padding: 1px;
+		cursor: pointer;
+		margin-left: 0.25rem;
+	}
+	.icons > :global(.icon:hover) {
+		border-color: var(--ui-clr-primary);
+	}
+</style>

packages/frontend/src/lib/ui/ThemeToggle.svelte

@@ -0,0 +1,62 @@
+<script lang="ts" context="module">
+	import { writable } from 'svelte/store'
+
+	enum Theme {
+		Dark = 'dark',
+		Light = 'light',
+		Auto = 'auto',
+	}
+
+	const NextTheme = {
+		[Theme.Auto]: Theme.Light,
+		[Theme.Light]: Theme.Dark,
+		[Theme.Dark]: Theme.Auto,
+	}
+
+	function init(): Theme {
+		if (typeof window !== 'undefined') {
+			const saved = window.localStorage.getItem('theme') as Theme
+			if (Object.values(Theme).includes(saved)) return saved
+		}
+		return Theme.Auto
+	}
+
+	export const theme = writable<Theme>(init())
+
+	theme.subscribe((theme) => {
+		if (typeof window !== 'undefined') {
+			window.localStorage.setItem('theme', theme)
+			const html = window.document.getElementsByTagName('html')[0]
+			html.setAttribute('theme', theme)
+		}
+	})
+</script>
+
+<script lang="ts">
+	import Icon from '$lib/ui/Icon.svelte'
+
+	function change() {
+		theme.update((current) => NextTheme[current])
+	}
+</script>
+
+<div on:click={change}>
+	<Icon class="icon" icon="contrast" />
+	{$theme}
+</div>
+
+<style>
+	div :global(.icon) {
+		height: 1rem;
+		width: 1rem;
+		margin-right: 0.5rem;
+	}
+
+	div {
+		display: flex;
+		flex-direction: row;
+		justify-content: flex-end;
+		align-items: center;
+		cursor: pointer;
+	}
+</style>