new interface

Author: dani-polani

bitext/src/app.css

@@ -3,6 +3,11 @@
 @import 'flowbite/src/themes/default.css';
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Reserve scrollbar width so horizontal padding stays visually symmetric when scrollbars appear */
+html {
+	scrollbar-gutter: stable;
+}
+
 /*
  * Central theme: edit primary scale + app shell here.
  * Flowbite plugin forms/range use --color-brand*; Flowbite Svelte uses Tailwind `primary-*` for buttons/tabs.
@@ -77,7 +82,6 @@
 .preview-frame {
 	position: relative;
 	width: 100%;
-	max-width: 64rem;
 	margin-inline: auto;
 	border-radius: 0;
 	border: 1px solid var(--color-card-border);

bitext/src/lib/components/editor/Editor.svelte

@@ -1,40 +1,66 @@
 <script lang="ts">
-	import { Card } from 'flowbite-svelte';
 	import LineCard from './LineCard.svelte';
+	import { DEFAULT_TOKEN_SPLIT_CHARS, MAX_LINES } from '$lib/serialization/schema.js';
 	import { projectStore } from '$lib/state/project.svelte.js';
-	import { MAX_LINES } from '$lib/serialization/schema.js';
+	import { settingsStore } from '$lib/state/settings.svelte.js';
+
+	let editorExpanded = $state(true);
 </script>
 
-<Card class="w-full max-w-none p-4 sm:p-6" aria-labelledby="editor-heading">
-	<div class="mb-3 flex flex-wrap items-center justify-between gap-x-4 gap-y-2">
-		<h2
-			id="editor-heading"
-			class="font-heading text-lg font-semibold text-gray-900 dark:text-white"
-		>
-			Editor
-		</h2>
-	</div>
-	<p class="mb-4 w-full text-base text-gray-600 dark:text-gray-400">
-		Each row is a line of text with its own font and size. In the preview, click a word, then click
-		a word on an <strong>adjacent</strong> line to connect them. Connectors only run between neighboring
-		lines. Click a connector to remove it. Click the same word again to deselect.
-	</p>
-	{#each projectStore.lines as line, i (line.id)}
-		<LineCard {line} index={i} total={projectStore.lines.length} />
-	{/each}
-	<div class="mt-2 flex flex-wrap items-center gap-3">
+<section class="mb-8" aria-labelledby="editor-heading">
+	<div class="mb-2 flex flex-wrap items-center justify-between gap-2">
 		<button
 			type="button"
-			class="rounded-none border border-primary-600 bg-primary-600 px-3 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 dark:border-primary-500 dark:bg-primary-600 dark:hover:bg-primary-500"
-			disabled={projectStore.lines.length >= MAX_LINES}
-			onclick={() => projectStore.addLine()}
+			class="flex items-center gap-2 rounded-none border-0 bg-transparent p-0 text-left text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600 dark:text-white dark:focus-visible:outline-primary-500"
+			onclick={() => (editorExpanded = !editorExpanded)}
+			aria-expanded={editorExpanded}
+			aria-controls="editor-collapsible"
 		>
-			Add line
+			<svg
+				class="h-4 w-4 shrink-0 text-gray-500 transition-transform dark:text-gray-400 {editorExpanded
+					? 'rotate-90'
+					: ''}"
+				viewBox="0 0 20 20"
+				fill="currentColor"
+				aria-hidden="true"
+			>
+				<path
+					fill-rule="evenodd"
+					d="M7.21 14.77a.75.75 0 0 1 .02-1.06L10.94 10 7.23 6.29a.75.75 0 0 1 1.06-1.06l4.24 4.24a.75.75 0 0 1 0 1.06l-4.24 4.24a.75.75 0 0 1-1.08.0Z"
+					clip-rule="evenodd"
+				/>
+			</svg>
+			<span id="editor-heading" class="font-heading text-lg font-semibold">Editor</span>
 		</button>
-		{#if projectStore.lines.length >= MAX_LINES}
-			<p class="text-sm text-amber-700 dark:text-amber-400">
-				Soft limit: {MAX_LINES} lines — consider simplifying for shorter share links.
-			</p>
-		{/if}
 	</div>
-</Card>
+
+	{#if editorExpanded}
+		<div id="editor-collapsible">
+			<p class="mb-3 w-full text-sm leading-snug text-gray-600 dark:text-gray-400">
+				Whitespace splits words. Extra split characters (from Linguistics in settings) also split
+				within the line (currently
+				<code class="rounded-none bg-gray-200 px-1 dark:bg-gray-700"
+					>{settingsStore.settings.tokenSplitChars || DEFAULT_TOKEN_SPLIT_CHARS}</code
+				>). Use the preview to link words, change fonts, and add or remove lines.
+			</p>
+			{#each projectStore.lines as line, i (line.id)}
+				<LineCard {line} index={i} />
+			{/each}
+			<div class="mt-2 flex flex-wrap items-center gap-3">
+				<button
+					type="button"
+					class="rounded-none border border-primary-600 bg-primary-600 px-3 py-1.5 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50 dark:border-primary-500 dark:bg-primary-600 dark:hover:bg-primary-500"
+					disabled={projectStore.lines.length >= MAX_LINES}
+					onclick={() => projectStore.addLine()}
+				>
+					Add line
+				</button>
+				{#if projectStore.lines.length >= MAX_LINES}
+					<p class="text-xs text-amber-700 dark:text-amber-400">
+						Soft limit: {MAX_LINES} lines — consider simplifying for shorter share links.
+					</p>
+				{/if}
+			</div>
+		</div>
+	{/if}
+</section>