frontend cleanup

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

@@ -1,46 +0,0 @@
-<script lang="ts">
-	// @ts-ignore
-	import QR from 'qrious'
-	import { t } from 'svelte-intl-precompile'
-
-	import { getCSSVariable } from '$lib/utils'
-
-	interface Props {
-		value: string
-	}
-
-	let { value }: Props = $props()
-
-	let canvas: HTMLCanvasElement | null = $state(null)
-
-	$effect(() => {
-		new QR({
-			value,
-			level: 'Q',
-			size: 800,
-			background: getCSSVariable('--ui-bg-0'),
-			foreground: getCSSVariable('--ui-text-0'),
-			element: canvas,
-		})
-	})
-</script>
-
-<small>{$t('common.qr_code')}</small>
-<div>
-	<canvas bind:this={canvas}></canvas>
-</div>
-
-<style>
-	div {
-		padding: 0.5rem;
-		width: fit-content;
-		border: 2px solid var(--ui-bg-1);
-		background-color: var(--ui-bg-0);
-		margin-top: 0.125rem;
-	}
-
-	canvas {
-		width: 100%;
-		height: auto;
-	}
-</style>

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

@@ -10,7 +10,7 @@
 	import { status } from '$lib/stores/status'
 	import Button from '$lib/ui/Button.svelte'
 	import TextInput from '$lib/ui/TextInput.svelte'
-	import Canvas from './Canvas.svelte'
+	import QR from './QR.svelte'
 
 	interface Props {
 		result: NoteResult
@@ -18,8 +18,11 @@
 
 	let { result }: Props = $props()
 
-	let url = $state(`${window.location.origin}/note/${result.id}`)
-	if (result.password) url += `#${result.password}`
+	let url = $derived.by(() => {
+		let url = `${window.location.origin}/note/${result.id}`
+		if (result.password) url += `#${result.password}`
+		return url
+	})
 
 	function reset() {
 		window.location.reload()
@@ -36,7 +39,7 @@
 />
 
 <div>
-	<Canvas value={url} />
+	<QR value={url} />
 </div>
 
 {#if $status?.theme_new_note_notice}

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

@@ -32,6 +32,7 @@
 	let files: FileDTO[] = $state([])
 
 	async function downloadFile(file: FileDTO) {
+		// @ts-ignore
 		const f = new File([file.contents], file.name, {
 			type: file.type,
 		})

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

@@ -21,6 +21,7 @@
 		...rest
 	}: HTMLInputAttributes & Props = $props()
 
+	// svelte-ignore state_referenced_locally
 	const initialType = $state(rest.type)
 	const isPassword = initialType === 'password'
 	let hidden = $state(true)

packages/frontend/src/routes/note/[id]/+page.svelte

@@ -16,7 +16,7 @@
 
 	let { data }: Props = $props()
 
-	let id = data.id
+	let id = $derived(data.id)
 	let password: string | null = $state<string | null>(null)
 	let note: DecryptedNote | null = $state(null)
 	let exists = $state(false)