refactor: move timer and bookmark into answer row

Timer countdown and bookmark icon now sit to the right of the give-up
button in the same flex row, instead of floating as separate blocks.
Cleaner layout, everything answer-related in one line.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Author: andrewboldi

src/lib/components/AnswerInput.svelte

@@ -1,11 +1,18 @@
 <script lang="ts">
+	import Timer from './Timer.svelte';
+
 	interface Props {
 		examType: string;
 		onSubmit: (answer: string) => void;
 		onGiveUp: () => void;
+		timerEnabled?: boolean;
+		timerRunning?: boolean;
+		timerSeconds?: number;
+		bookmarked?: boolean;
+		onBookmarkToggle?: () => void;
 	}
 
-	let { examType, onSubmit, onGiveUp }: Props = $props();
+	let { examType, onSubmit, onGiveUp, timerEnabled = false, timerRunning = false, timerSeconds = 180, bookmarked = false, onBookmarkToggle }: Props = $props();
 	let answer = $state('');
 	let shaking = $state(false);
 
@@ -51,6 +58,15 @@
 	<!-- svelte-ignore a11y_click_events_have_key_events -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<span class="give-up" onclick={onGiveUp} title="Give up">&#127937;</span>
+	{#if timerEnabled}
+		<Timer running={timerRunning} />
+	{/if}
+	{#if onBookmarkToggle}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<span class="bookmark-icon" onclick={onBookmarkToggle} title={bookmarked ? 'Remove bookmark' : 'Bookmark problem'}
+			style="opacity: {bookmarked ? 1 : 0.3};">&#x1F516;</span>
+	{/if}
 </div>
 
 <style>
@@ -82,4 +98,10 @@
 		font-size: 1.4em;
 		margin-left: 12px;
 	}
+	.bookmark-icon {
+		cursor: pointer;
+		font-size: 1.4em;
+		margin-left: 8px;
+		transition: opacity 0.2s;
+	}
 </style>

src/routes/play/+page.svelte

@@ -10,7 +10,7 @@
 	import SolutionDisplay from '$lib/components/SolutionDisplay.svelte';
 	import NextProblemButton from '$lib/components/NextProblemButton.svelte';
 	import PrevProblemButton from '$lib/components/PrevProblemButton.svelte';
-	import Timer from '$lib/components/Timer.svelte';
+
 	import DrawingCanvas from '$lib/components/DrawingCanvas.svelte';
 	import SettingsModal from '$lib/components/SettingsModal.svelte';
 	import StatsModal from '$lib/components/StatsModal.svelte';
@@ -126,25 +126,16 @@
 	{textInvertFilter}
 />
 
-{#if $problem.id && $problem.status !== 'loading'}
-	<!-- svelte-ignore a11y_click_events_have_key_events -->
-	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="bookmark-btn text" onclick={() => bookmarks.toggle($problem.id)}
-		style="text-align: center; cursor: pointer; font-size: 1.5em; opacity: {$bookmarks.includes($problem.id) ? 1 : 0.3};">
-		&#x1F516;
-	</div>
-{/if}
-
-{#if $settings.timer === 'On' && ($problem.status === 'answering' || $problem.status === 'loading')}
-	<Timer running={$problem.status === 'answering'} />
-{/if}
-
 {#if $problem.status === 'answering' || $problem.status === 'loading'}
 	<AnswerInput
 		bind:this={answerInput}
 		examType={$problem.examType}
 		onSubmit={handleSubmit}
 		onGiveUp={() => { if (confirm('Are you sure you want to give up?')) giveUp(); }}
+		timerEnabled={$settings.timer === 'On'}
+		timerRunning={$problem.status === 'answering'}
+		bookmarked={$bookmarks.includes($problem.id)}
+		onBookmarkToggle={() => bookmarks.toggle($problem.id)}
 	/>
 {/if}