Merge branch 'options' into master

src/frontend/options/Flashcard.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import { Trash2Icon, EditIcon } from "svelte-feather-icons";
+	import { getContext } from "svelte";
+	import type { Flashcards } from "../../background/database";
+	export let cardID: IDBValidKey;
+
+	const flashcardDB = getContext<Flashcards>("flashcardDB");
+	$: cardPromise = flashcardDB.getCard(cardID);
+</script>
+
+<div class="container">
+	{#await cardPromise then card}
+		{#if card}
+			<div class="translation">
+				<p>{card.src}</p>
+				<p>{card.result}</p>
+			</div>
+			<div class="buttons">
+				<button class="edit">
+					<EditIcon />
+				</button>
+				<button class="delete">
+					<Trash2Icon />
+				</button>
+			</div>
+		{/if}
+	{/await}
+</div>
+
+<style lang="scss">
+	@use "../common";
+	.container {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 1em;
+		margin: 0.1em;
+		height: 100%;
+		width: calc(100%-1vw);
+		background-color: var(--background-color-3);
+		font-family: sans-serif;
+	}
+
+	.buttons {
+		display: flex;
+	}
+
+	button {
+		@include common.button;
+		border: 0;
+		height: 3em;
+		width: 3em;
+		margin: 0.3em;
+		border-radius: 2px;
+		&.edit {
+			@include common.button_green;
+		}
+		&.delete {
+			@include common.button_red;
+		}
+	}
+</style>

src/frontend/options/Options.svelte

@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { browser } from "webextension-polyfill-ts";
+	import { setContext } from "svelte";
+	import VirtualList from "@sveltejs/svelte-virtual-list";
+	import Flashcard from "./Flashcard.svelte";
+	/*
+	const onCardChange = (card: Flashcard, change: "added" | "removed") => {
+		switch(change){
+			case "added":
+				cards.unshift(card);
+				cards = cards
+				return
+			case "removed":
+				cards = cards.filter((c) => c.id == card.id);
+			default: 
+		}
+		console.log(card,change);
+	}
+	 */
+
+	let cards: IDBValidKey[] = [];
+	(async () => {
+		const backgroundPage = await browser.runtime.getBackgroundPage();
+		const flashcardDB = backgroundPage.flashcardDB;
+		cards = await flashcardDB.getAllKeys();
+		//flashcardDB.addChangeCallback(onCardChange);
+		//window.addEventListener("beforeunload", () => flashcardDB.removeChangeCallback(onCardChange));
+
+		setContext("flashcardDB", flashcardDB);
+	})();
+</script>
+
+<main>
+	<div class="list-container">
+		<VirtualList items={cards} let:item>
+			<Flashcard cardID={item} />
+		</VirtualList>
+	</div>
+</main>
+
+<style lang="scss">
+	@use "../color_scheme.scss";
+
+	:global(html, body) {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		height: 100%;
+		margin: 0;
+		background-color: var(--background-color-4);
+	}
+
+	main {
+		display: flex;
+		flex-direction: column;
+		width: 600px;
+		max-width: 100vw;
+		min-height: 94vh;
+
+		background-color: var(--background-color-1);
+		padding: 1em;
+
+		color: var(--text-color-1);
+	}
+
+	.list-container {
+		background-color: var(--background-color-2);
+		height: 100%;
+	}
+</style>

src/frontend/options/options.ts

@@ -0,0 +1,2 @@
+import App from "./Options.svelte";
+new App({ target: document.body });