client

client/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>

client/src/lib/ui/Icon.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import { onMount } from 'svelte'
+	export let icon: string
+
+	$: src = `/icons/${icon}.svg`
+
+	let html = null
+
+	onMount(async () => {
+		console.log(src)
+		html = await fetch(src).then((res) => res.text())
+	})
+</script>
+
+{#if html === null}
+	<img on:click {...$$restProps} {src} alt={icon} />
+{:else}
+	<div on:click {...$$restProps}>
+		{@html html}
+	</div>
+{/if}
+
+<style>
+	img,
+	div {
+		display: inline-block;
+		contain: strict;
+		box-sizing: content-box;
+	}
+	div > :global(svg) {
+		display: block;
+		fill: currentColor;
+	}
+</style>

client/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>
+	<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.1rem;
+		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>

client/src/lib/ui/TextArea.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	export let label: string = ''
+	export let value: string
+</script>
+
+<label>
+	<small>
+		{label}
+	</small>
+	<textarea {...$$restProps} bind:value />
+</label>
+
+<style>
+	textarea {
+		width: 100%;
+		min-height: 8rem;
+		margin: 0;
+		padding: 0;
+		border: 2px solid var(--ui-bg-1);
+		resize: vertical;
+		outline: none;
+		padding: 0.5rem;
+	}
+
+	textarea:hover,
+	textarea:focus {
+		border-color: var(--ui-clr-primary);
+	}
+</style>

client/src/lib/ui/TextInput.svelte

@@ -0,0 +1,91 @@
+<script lang="ts">
+	import { getRandomBytes, Hex } from '$lib/crypto'
+
+	import copyToClipboard from 'copy-to-clipboard'
+
+	import Icon from './Icon.svelte'
+
+	export let label: string = ''
+	export let value
+
+	export let copy: boolean = false
+	export let random: boolean = false
+
+	const initialType = $$restProps.type
+	const isPassword = initialType === 'password'
+	let hidden = true
+
+	$: if (isPassword) {
+		value
+		$$restProps.type = hidden ? initialType : 'text'
+	}
+
+	function toggle() {
+		hidden = !hidden
+	}
+	function copyFN() {
+		copyToClipboard(value)
+	}
+	function randomFN() {
+		value = Hex.encode(getRandomBytes(20))
+	}
+</script>
+
+<label>
+	<small>
+		{label}
+	</small>
+	<input bind:value {...$$restProps} />
+	<div class="icons">
+		{#if isPassword}
+			<Icon class="icon" icon={hidden ? 'eye-sharp' : 'eye-off-sharp'} on:click={toggle} />
+		{/if}
+		{#if random}
+			<Icon class="icon" icon="dice-sharp" on:click={randomFN} />
+		{/if}
+		{#if copy}
+			<Icon class="icon" icon="copy-sharp" on:click={copyFN} />
+		{/if}
+	</div>
+</label>
+
+<style>
+	label {
+		position: relative;
+		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);
+	}
+
+	.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>