importera listor, dynamisk färg, vettigare storlekar

.vscode/extensions.json

@@ -0,0 +1,5 @@
+{
+  "recommendations": [
+    "inlang.vs-code-extension"
+  ]
+}

messages/sv.json

@@ -1,4 +1,5 @@
 {
 	"$schema": "https://inlang.com/schema/inlang-message-format",
-	"hello_world": "Hello, {name} from sv!"
+	"hello_world": "Hello, {name} from sv!",
+	"stt": "skrivtolkning"
 }

package-lock.json

@@ -8,7 +8,7 @@
 			"name": "code",
 			"version": "0.0.1",
 			"dependencies": {
-				"@inlang/paraglide-sveltekit": "^0.15.5",
+				"@inlang/paraglide-sveltekit": "0.15.5",
 				"@libsql/client": "^0.14.0",
 				"@node-rs/argon2": "^2.0.2",
 				"@oslojs/crypto": "^1.0.1",
@@ -21,6 +21,7 @@
 			"devDependencies": {
 				"@eslint/compat": "^1.2.5",
 				"@eslint/js": "^9.18.0",
+				"@inlang/paraglide-js": "1.11.8",
 				"@playwright/test": "^1.49.1",
 				"@sveltejs/adapter-auto": "^4.0.0",
 				"@sveltejs/kit": "^2.16.0",

package.json

@@ -22,6 +22,7 @@
 	"devDependencies": {
 		"@eslint/compat": "^1.2.5",
 		"@eslint/js": "^9.18.0",
+		"@inlang/paraglide-js": "1.11.8",
 		"@playwright/test": "^1.49.1",
 		"@sveltejs/adapter-auto": "^4.0.0",
 		"@sveltejs/kit": "^2.16.0",
@@ -52,7 +53,7 @@
 		"zod": "^3.24.1"
 	},
 	"dependencies": {
-		"@inlang/paraglide-sveltekit": "^0.15.5",
+		"@inlang/paraglide-sveltekit": "0.15.5",
 		"@libsql/client": "^0.14.0",
 		"@node-rs/argon2": "^2.0.2",
 		"@oslojs/crypto": "^1.0.1",

src/components/import/import.svelte

@@ -23,16 +23,18 @@
 	};
 	let importing = false;
 	let progress = 0;
-	const handleImport = () => {
+	const handleImport = async () => {
 		importing = true;
 		const l: List = { name: form.name, type: form.type ? 1 : 0, updated: new Date() };
-		createShortformList(l);
-		form.textarea.split('\n').forEach((sf, i, sfs) => {
-			progress = 100 * (i / sfs.length);
-			if (Math.random() > 0.8) {
-				setTimeout(() => {}, 125);
+		const listid = await createShortformList(l);
+		let sfs = []
+		form.textarea.split('\n').forEach((line) => {
+			const fields = line.split("=")
+			if (fields.length == 2) {
+				sfs.push({shortform: fields[0], phrase: fields[1], used: 0, listid: listid})
 			}
 		});
+		importShortforms(sfs)
 	};
 	const cancelImport = () => {
 		importState.data = '';

src/components/textarea.svelte

@@ -6,9 +6,28 @@
 	import { getCurrentWord, insertExpandedPhrase, insertText } from '$lib/textarea/main';
 	import { cacheShortforms, expandShortform } from '../modules/shortforms';
 	import { defaultExpanders } from '../modules/keyboard';
-	import type { Shortform } from '../db/main';
-	import AccordionTrigger from '$lib/components/ui/accordion/accordion-trigger.svelte';
+	import { db, type Shortform } from '../db/main';
+  import { liveQuery } from "dexie";
 
+	import * as Select from "$lib/components/ui/select/index.js";
+
+	let styles = {
+		"text-bg": "#333333",
+		"text-fg": "#baff00",
+	}
+
+	$: cssVarStyles = Object.entries(styles)
+		.map(([key, value]) => `--${key}:${value}`)
+		.join(';');
+
+	$: standardLists = liveQuery( async () => { 
+			return await db.lists.toArray()
+		}
+	)
+	let selectedStandardList = {}
+	const selectedStandardListChanged = (v) => {
+		shortforms.cache = cacheShortforms([Number(v.value)]);
+	}
 	let state = {
 		capitalizeNext: true,
 		currentWord: ''
@@ -78,8 +97,24 @@
 	*/
 </script>
 
-<div class="docContainer" role="application" id="docContainer">
-	<textarea id="doc" rows="4" on:keyup={change} on:beforeinput={input} bind:value={text}></textarea>
+<div class="docContainer h-full flex flex-col" role="application" id="docContainer">
+	<textarea style={cssVarStyles} class="textarea flex-grow" id="doc" on:keyup={change} on:beforeinput={input} bind:value={text}></textarea>
+	<Select.Root
+		selected={selectedStandardList}
+		onSelectedChange={selectedStandardListChanged}
+		class="flex-none"
+	>
+		<Select.Trigger>
+			<Select.Value placeholder="Välj standardlista" />
+		</Select.Trigger>
+		<Select.Content>
+			<Select.Group>
+				{#each $standardLists as list}
+					<Select.Item value={list.id} label={list.name}>{list.name}</Select.Item>
+				{/each}
+			</Select.Group>
+		</Select.Content>
+	</Select.Root>
 </div>
 
 <style lang="postcss">
@@ -88,9 +123,12 @@
 	}
 	.docContainer textarea {
 		width: 100%;
-		color: black;
 		padding: 0.3em;
 		resize: none;
 		font-size: 2em;
 	}
+	.textarea {
+		color: var(--text-fg, black);
+		background-color: var(--text-bg, white);
+	}
 </style>

src/db/import.ts

@@ -2,12 +2,13 @@ import default_shortforms from "./shortforms.se.json";
 import { db, type Shortform, type List } from "./main"
 
 export const importShortforms = (shortforms: Array<Shortform>) => {
-    /*
+    const used = new Date(0)
+    const updated = Date.now()
     shortforms.map((sf: Shortform) => {
-        db.shortforms.add({ shortform: sf.sf, phrase: sf.p })
+        db.shortforms.add({ shortform: sf.shortform, phrase: sf.phrase, listid: sf.listid, used, uses: 0, remind: -1, updated })
     })
-    */
 }
+
 export const importDefaultShortforms = () => {
     const shortforms = default_shortforms.shortforms
     const list: List = { id: default_shortforms.listid, type: default_shortforms.type, name: default_shortforms.name, updated: new Date(default_shortforms.updated) }

src/db/main.ts

@@ -46,18 +46,15 @@ export class SkrivertDB extends Dexie {
 
             if (localListsCount === 0) {
                 // No local data - perform full download
-                importDefaultShortforms()
+                //importDefaultShortforms()
                 console.log('No local data found. Prompt user to import data or use standard list...');
             }
         })
     };
 }
 
-export function createShortformList(l: List): number {
-    db.lists.add(l)
-        .then(result => {
-            console.log(result)
-        })
+export async function createShortformList(l: List): number {
+    return await db.lists.add(l)
 
 }
 

src/modules/shortforms.ts

@@ -23,6 +23,7 @@ export function cacheShortforms(lists: Array<number> = []) {
 	}
 	else {
 		lists.forEach(listid => {
+			console.log("looking up shortforms for this listid:", listid)
 			db.shortforms.where("listid").equals(listid).toArray().then(sfs => {
 				sfs.forEach(sf => {
 					shortforms.set(sf.shortform, sf)

src/routes/+layout.svelte

@@ -5,8 +5,6 @@
 	let { children } = $props();
 </script>
 
-<div role="presentation">
-	<ParaglideJS {i18n}>
+<ParaglideJS {i18n}>
 	{@render children()}
-	</ParaglideJS>
-</div>
+</ParaglideJS>

src/routes/+page.svelte

@@ -29,9 +29,10 @@
 
 <svelte:window on:keydown={handleHotkeys} />
 
-<div class="h-full w-full" role="application">
+<div class="h-dvh w-full" role="application">
+	<div class="h-full">
 		<Textarea />
 		<Dashboard open={showDashboard} />
-
 	<!--	<Button variant="destructive" on:click={deleteDefaultShortforms}>Ta bort standardlista</Button>-->
+	</div>
 </div>