frontend cleanup

packages/frontend/package.json

@@ -16,22 +16,22 @@
 		"@lokalise/node-api": "^13.2.1",
 		"@sveltejs/adapter-static": "^3.0.10",
 		"@sveltejs/kit": "^2.61.1",
-		"@sveltejs/vite-plugin-svelte": "^5.1.1",
+		"@sveltejs/vite-plugin-svelte": "^7.1.2",
 		"@zerodevx/svelte-toast": "^0.9.6",
 		"adm-zip": "^0.5.17",
-		"dotenv": "^16.6.1",
+		"dotenv": "^17.4.2",
 		"svelte": "^5.55.9",
 		"svelte-check": "^4.4.8",
 		"svelte-intl-precompile": "^0.12.3",
 		"tslib": "^2.8.1",
-		"typescript": "^5.9.3",
+		"typescript": "^6.0.3",
-		"vite": "^6.4.2"
+		"vite": "^8.0.14"
 	},
 	"dependencies": {
 		"@fontsource/fira-mono": "^5.2.7",
 		"cryptgeon": "workspace:*",
 		"occulto": "^2.0.6",
-		"pretty-bytes": "^6.1.1",
+		"pretty-bytes": "^7.1.0",
-		"qrious": "^4.0.2"
+		"uqr": "^0.1.3"
 	}
 }

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}`)
+	let url = $derived.by(() => {
-	if (result.password) url += `#${result.password}`
+		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)

packages/frontend/tsconfig.json

@@ -2,6 +2,7 @@
 	"extends": "./.svelte-kit/tsconfig.json",
 	"compilerOptions": {
 		"strict": true,
-		"allowSyntheticDefaultImports": true
+		"allowSyntheticDefaultImports": true,
-	}
+		"skipLibCheck": true,
+	},
 }