Will now scroll to focused lint

Author: elijah-potter

web/src/lib/Editor.svelte

@@ -9,14 +9,16 @@
 	let content = alice;
 
 	let lints: Lint[] = [];
+	let lintCards: HTMLDivElement[] = [];
 	let focused: number | undefined;
 	let editor: HTMLTextAreaElement | null;
 
 	$: lintText(content).then((newLints) => (lints = newLints));
 	$: boxHeight = calcHeight(content);
+	$: if (focused != null) lintCards[focused].scrollIntoView({ behavior: 'smooth' });
 
 	$: if (editor != null && focused != null) {
-		let p = lints[focused].span.end;
+		let p = lints[focused % lints.length].span.end;
 		editor.selectionStart = p;
 		editor.selectionEnd = p;
 	}
@@ -46,45 +48,51 @@
 			<Underlines {content} bind:focusLintIndex={focused} />
 		</div>
 	</Card>
-	<Card class="flex flex-col flex-none basis-[400px] overflow-auto h-full">
+	<Card class="flex-none basis-[400px] h-full p-0">
 		<h2 class="text-2xl font-bold m-1">Suggestions</h2>
-		{#each lints as lint, i}
-			<Card class="m-1 hover:translate-x-3 transition-all" on:click={() => (focused = i)}>
-				<div class="pl-2 border-l-[3px] border-l-primary-500">
-					<div class="flex flex-row">
-						<h3 class="font-bold">
-							{lint.lint_kind} - “<span class="italic">
-								{spanContent(lint.span, content)}
-							</span> ”
-						</h3>
-					</div>
-					<div
-						class="transition-all overflow-hidden flex flex-col justify-evenly"
-						style={`height: ${
-							focused === i ? `calc(55px * ${lint.suggestions.length + 1})` : '0px'
-						}`}
-					>
-						<p style="height: 50px">{lint.message}</p>
-						{#each lint.suggestions as suggestion}
-							<div class="w-full p-[4px]">
-								<Button
-									color="primary"
-									class="w-full"
-									style="height: 40px; margin: 5px 0px;"
-									on:click={() =>
-										applySuggestion(content, suggestion, lint.span).then(
-											(edited) => (content = edited)
-										)}
-								>
-									Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce(
-										(p, c) => p + c
-									)}"
-								</Button>
-							</div>
-						{/each}
+		<div class="flex flex-col overflow-y-scroll overflow-x-hidden m-0 p-0">
+			{#each lints as lint, i}
+				<div
+					class="block max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow m-1 hover:translate-x-1 transition-all"
+					on:click={() => (focused = i)}
+					bind:this={lintCards[i]}
+				>
+					<div class="pl-2 border-l-[3px] border-l-primary-500">
+						<div class="flex flex-row">
+							<h3 class="font-bold">
+								{lint.lint_kind} - “<span class="italic">
+									{spanContent(lint.span, content)}
+								</span> ”
+							</h3>
+						</div>
+						<div
+							class="transition-all overflow-hidden flex flex-col justify-evenly"
+							style={`height: ${
+								focused === i ? `calc(55px * ${lint.suggestions.length + 1})` : '0px'
+							}`}
+						>
+							<p style="height: 50px">{lint.message}</p>
+							{#each lint.suggestions as suggestion}
+								<div class="w-full p-[4px]">
+									<Button
+										color="primary"
+										class="w-full"
+										style="height: 40px; margin: 5px 0px;"
+										on:click={() =>
+											applySuggestion(content, suggestion, lint.span).then(
+												(edited) => (content = edited)
+											)}
+									>
+										Replace "{content.substring(lint.span.start, lint.span.end)}" with "{suggestion.ReplaceWith.reduce(
+											(p, c) => p + c
+										)}"
+									</Button>
+								</div>
+							{/each}
+						</div>
 					</div>
 				</div>
-			</Card>
-		{/each}
+			{/each}
+		</div>
 	</Card>
 </div>