From 170f851344095d13a67fabbc19cf56ee9770c092 Mon Sep 17 00:00:00 2001
From: wilson <wilson@thomaswilson.xyz>
Date: Sun, 3 May 2026 13:32:26 +0100
Subject: [PATCH] feat: [frontend] Start to play around with Flashcard creation
 UI

---
 frontend/src/lib/components/Flashcard.svelte  | 45 ++++++++++++++
 .../routes/app/flashcards/new/+page.svelte    |  6 ++
 .../app/flashcards/new/FlashcardForm.svelte   | 58 +++++++++++++++++++
 3 files changed, 109 insertions(+)
 create mode 100644 frontend/src/lib/components/Flashcard.svelte
 create mode 100644 frontend/src/routes/app/flashcards/new/+page.svelte
 create mode 100644 frontend/src/routes/app/flashcards/new/FlashcardForm.svelte

diff --git a/frontend/src/lib/components/Flashcard.svelte b/frontend/src/lib/components/Flashcard.svelte
new file mode 100644
index 0000000..73df165
--- /dev/null
+++ b/frontend/src/lib/components/Flashcard.svelte
@@ -0,0 +1,45 @@
+<script lang="ts">
+	interface Props {
+		promptText: string;
+		correctAnswers: string[];
+	}
+
+	let { promptText, correctAnswers }: Props = $props();
+
+	let mode: 'guess' | 'reveal' = 'reveal';
+</script>
+
+<section class="flashcard">
+	<div class="prompt-text">
+		<p class="prompt-text__text">{promptText}</p>
+	</div>
+	<div class="answer-text">
+		<label for="answer" class="label">Answer</label>
+		<input type="text" id="answer" class="input" />
+	</div>
+
+	{#if mode === 'reveal'}
+		<div class="correct-answers">
+			<p class="correct-answers__label">Correct Answers:</p>
+			<ul class="correct-answers__list">
+				{#each correctAnswers as answer}
+					<li class="correct-answers__item">{answer}</li>
+				{/each}
+			</ul>
+		</div>
+	{/if}
+</section>
+
+<style>
+	.flashcard {
+		padding: var(--space-1);
+		display: grid;
+		grid-template-columns: 1fr;
+		place-items: center;
+		max-width: 500px;
+		border: 1px solid var(--colour-grey-300);
+	}
+
+	.prompt-text {
+	}
+</style>
diff --git a/frontend/src/routes/app/flashcards/new/+page.svelte b/frontend/src/routes/app/flashcards/new/+page.svelte
new file mode 100644
index 0000000..f84283d
--- /dev/null
+++ b/frontend/src/routes/app/flashcards/new/+page.svelte
@@ -0,0 +1,6 @@
+<script>
+	import FlashcardForm from './FlashcardForm.svelte';
+</script>
+
+<h1>New Flashcard</h1>
+<FlashcardForm />
diff --git a/frontend/src/routes/app/flashcards/new/FlashcardForm.svelte b/frontend/src/routes/app/flashcards/new/FlashcardForm.svelte
new file mode 100644
index 0000000..5e05988
--- /dev/null
+++ b/frontend/src/routes/app/flashcards/new/FlashcardForm.svelte
@@ -0,0 +1,58 @@
+<script lang="ts">
+	import Flashcard from '$lib/components/Flashcard.svelte';
+	import {
+		dictionarySearch,
+		type DictionarySearchResult
+	} from '../../admin/dictionary-search/dictionarySearch.remote';
+
+	let dictionarySearchDebouncer: NodeJS.Timeout | null = null;
+	let dictionarySearchTerm = $state('');
+	let promptText = $state('bonjour');
+	let answerText = $state('hello');
+	let dictionarySearchResults: DictionarySearchResult[] = $state([]);
+	let correctAnswers = $derived(
+		answerText
+			.split(',')
+			.map((t) => t.trim())
+			.filter((t) => t.length)
+	);
+
+	$effect(() => {
+		if (dictionarySearchDebouncer) {
+			clearTimeout(dictionarySearchDebouncer);
+		}
+
+		dictionarySearchDebouncer = setTimeout(() => {
+			dictionarySearch({ langCode: 'fr', text: dictionarySearchTerm }).then((results) => {
+				dictionarySearchResults = results;
+			});
+		}, 500);
+	});
+</script>
+
+<div class="form-container">
+	<form class="form">
+		<div class="field">
+			<label for="target_word">French Word</label>
+			<input type="text" id="target_word" name="target_word" bind:value={dictionarySearchTerm} />
+		</div>
+
+		<div class="field">
+			<label for="prompt_text">Prompt Text</label>
+			<input type="text" id="prompt_text" name="prompt_text" bind:value={promptText} />
+		</div>
+
+		<div class="field">
+			<label for="answer_text">Answers (comma separated)</label>
+			<input type="text" id="answer_text" name="answer_text" bind:value={answerText} />
+		</div>
+	</form>
+</div>
+
+<Flashcard {promptText} {correctAnswers} />
+
+<style>
+	.form-container {
+		max-width: 500px;
+	}
+</style>