Underlines now expand when the suggestion is hovered

lt-core/src/linting/mod.rs

@@ -4,7 +4,7 @@ mod spell_check;
 
 pub use lint::{Lint, LintKind, Suggestion};
 
-use crate::{document, Document};
+use crate::Document;
 
 use self::lint::Linter;
 

lt-core/src/linting/sentence_capitalization.rs

@@ -9,11 +9,6 @@ pub fn sentence_capitalization_lint(document: &Document) -> Vec<Lint> {
     let mut lints = Vec::new();
 
     for sentence in document.sentences() {
-        dbg!(document.get_content_string(crate::Span {
-            start: sentence.first().unwrap().span.start,
-            end: sentence.last().unwrap().span.start,
-        }));
-
         if let Some(first_word) = sentence.first_word() {
             let letters = document.get_span_content(first_word.span);
 

lt-core/src/linting/spell_check.rs

@@ -13,7 +13,7 @@ pub fn spell_check(document: &Document) -> Vec<Lint> {
             continue;
         }
 
-        let possibilities = suggest_correct_spelling(word_chars, 1, 3, &dictionary);
+        let possibilities = suggest_correct_spelling(word_chars, 3, 3, &dictionary);
 
         let suggestions = possibilities
             .into_iter()

web/src/lib/Underlines.svelte

@@ -3,10 +3,15 @@
 	import { contentToString, lintText, spanContent } from '$lib/analysis';
 
 	export let content: string;
+	export let focusLintIndex: number | undefined;
+
+	let lints: [Lint, number][] = [];
 
-	let lints: Lint[] = [];
 	$: lintText(content).then(
-		(newLints) => (lints = newLints.toSorted((a, b) => a.span.start - b.span.end))
+		(newLints) =>
+			(lints = newLints
+				.map<[Lint, number]>((lint, index) => [lint, index])
+				.toSorted(([a], [b]) => a.span.start - b.span.end))
 	);
 
 	function reOrgString(text: string): (string | undefined)[] {
@@ -27,13 +32,16 @@
 		return output;
 	}
 
-	// string | [string, string] | null
-	$: modified = [
-		...lints
-			.map((lint, index, arr) => {
+	function processString(lintMap: [Lint, number][], focusLintIndex?: number) {
+		let results = lintMap
+			.map(([lint, lintIndex], index, arr) => {
+				let prevStart = 0;
 				let prev = arr[index - 1];
 
-				let prevStart = prev?.span.end ?? 0;
+				if (prev != null) {
+					prevStart = prev[0].span.end;
+				}
+
 				let prevEnd = lint.span.start;
 
 				let prevContent = [];
@@ -42,25 +50,45 @@
 					prevContent.push(...reOrgString(content.substring(prevStart, prevEnd)));
 				}
 
-				let lintContent = [spanContent(lint.span, content).replaceAll(' ', '\u00A0'), 'red'];
+				let lintContent = [
+					spanContent(lint.span, content).replaceAll(' ', '\u00A0'),
+					'red',
+					lintIndex === focusLintIndex ? '3px' : '1px'
+				];
 
 				return [...prevContent, lintContent];
 			})
-			.flat(),
-		...reOrgString(content.substring(lints.at(-1)?.span.end ?? 0))
-	];
+			.flat();
+
+		let lastLint = lints.at(-1);
+
+		let finalChunk;
+
+		if (lastLint != null) {
+			finalChunk = content.substring(lastLint[0].span.end);
+		} else {
+			finalChunk = content;
+		}
+
+		results.push(...reOrgString(finalChunk));
+
+		return results;
+	}
+
+	// string | [string, string, string] | null
+	$: modified = processString(lints, focusLintIndex);
 </script>
 
 <div class="grid">
-	<div class="p-0 m-0 indent-0" style="grid-row: 1; grid-column: 1">
+	<div class="p-0 m-0 indent-0" style="grid-row: 1; grid-column: 1; color: transparent;">
 		{#each modified as chunk}
 			{#if chunk == null}
 				<br />
 			{:else if typeof chunk == 'string'}
 				<span class="">{chunk}</span>
 			{:else}
 				<span style={`margin-right: -4px;`}>
-					<span style={`border-bottom: 3px solid ${chunk[1]};`}>
+					<span class="transition-all" style={`border-bottom: ${chunk[2]} solid ${chunk[1]};`}>
 						{chunk[0]}
 					</span>
 				</span>

web/src/routes/+page.svelte

@@ -1,16 +1,17 @@
 <script lang="ts">
-	import Suggestion from '$lib/Suggestion.svelte';
+	import { Card } from 'flowbite-svelte';
 	import alice from '../../../alice.txt?raw';
 	import Highlights from '$lib/Highlights.svelte';
 	import Underlines from '$lib/Underlines.svelte';
 	import { Button } from 'flowbite-svelte';
-	import { lintText, applySuggestion } from '$lib/analysis';
+	import { lintText, applySuggestion, spanContent } from '$lib/analysis';
 	import type { Lint } from '$lib/analysis';
 
 	let content = alice;
 	let editor: HTMLTextAreaElement;
 
 	let lints: Lint[] = [];
+	let focused: number | undefined;
 
 	$: lintText(content).then((newLints) => (lints = newLints));
 
@@ -19,13 +20,26 @@
 		setTimeout(ping, 1000);
 	}
 
+	type Category = 'mild' | 'moderate';
+
+	function categoryToColor(category: Category): string {
+		switch (category) {
+			case 'mild':
+				return '#708b75';
+			case 'moderate':
+				return '#f3a712';
+		}
+	}
+
 	ping();
+
+	$: console.log(focused);
 </script>
 
 <div class="flex flex-row w-full h-screen">
 	<div class="flex-auto h-full p-5 grid z-10 text-lg">
 		<div class="overflow-auto p-0" style="grid-row: 1; grid-column: 1">
-			<Underlines {content} />
+			<Underlines {content} focusLintIndex={focused} />
 		</div>
 		<div class="overflow-auto p-0" style="grid-row: 1; grid-column: 1">
 			<Highlights {content} />
@@ -39,21 +53,35 @@
 		></textarea>
 	</div>
 	<div class="flex flex-col flex-grow">
-		{#each lints as lint}
-			{#each lint.suggestions as suggestion}
-				<Suggestion category={'mild'} title={lint.lint_kind}>
-					<Button
-						color="alternative"
-						class="w-full h-full m-3"
-						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>
-				</Suggestion>
-			{/each}
+		{#each lints as lint, i}
+			<Card
+				class="m-1 hover:translate-x-3 transition-all"
+				on:mouseenter={() => (focused = i)}
+				on:mouseleave={() => (focused = undefined)}
+			>
+				<div style={`border-left: 3px solid ${categoryToColor('mild')}`}>
+					<div class="flex flex-row">
+						<div class="rounded-full w-2 aspect-square"></div>
+						<h3 class="font-bold">{`${lint.lint_kind} - "${spanContent(lint.span, content)}"`}</h3>
+					</div>
+					<div>
+						{#each lint.suggestions as suggestion}
+							<Button
+								color="alternative"
+								class="w-full h-full m-1 "
+								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>
+						{/each}
+					</div>
+				</div>
+			</Card>
 		{/each}
 	</div>
 </div>