ui: Linting & Formatting scripts (#26819)

tools/ui/src/lib/components/app/content/SyntaxHighlightedCode.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import { browser } from '$app/environment';
-	import { mode } from 'mode-watcher';
-
-	import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
-	import githubLightCss from 'highlight.js/styles/github.css?inline';
-	import { ColorMode } from '$lib/enums';
 	import { SYNTAX_CODE_SCROLL_AT_BOTTOM_THRESHOLD_PX } from '$lib/constants/auto-scroll';
+	import { ColorMode } from '$lib/enums';
 	import { highlightCode } from '$lib/utils';
+	import githubLightCss from 'highlight.js/styles/github.css?inline';
+	import githubDarkCss from 'highlight.js/styles/github-dark.css?inline';
+	import { mode } from 'mode-watcher';
 
 	interface Props {
 		code: string;
@@ -20,9 +19,9 @@
 	}
 
 	let {
+		class: className = '',
 		code,
 		language = 'text',
-		class: className = '',
 		maxHeight = '60vh',
 		maxWidth = '',
 		streaming = false
@@ -40,9 +39,11 @@
 		if (!browser) return;
 
 		const existingThemes = document.querySelectorAll('style[data-highlight-theme-preview]');
+
 		existingThemes.forEach((style) => style.remove());
 
 		const style = document.createElement('style');
+
 		style.setAttribute('data-highlight-theme-preview', 'true');
 		style.textContent = isDark ? githubDarkCss : githubLightCss;
 
@@ -51,6 +52,7 @@
 
 	function isAtBottom(): boolean {
 		if (!scrollEl) return false;
+
 		return (
 			scrollEl.scrollHeight - scrollEl.clientHeight - scrollEl.scrollTop <=
 			SCROLL_BOTTOM_THRESHOLD_PX
@@ -59,8 +61,10 @@
 
 	function scrollToBottomOnFrame() {
 		if (pendingFrame !== null || !scrollEl || userScrolledUp) return;
+
 		pendingFrame = requestAnimationFrame(() => {
 			pendingFrame = null;
+
 			// User may scroll between scheduling and paint.
 			if (scrollEl && !userScrolledUp) {
 				scrollEl.scrollTop = scrollEl.scrollHeight;
@@ -70,12 +74,15 @@
 
 	function handleScrollEvent() {
 		if (!scrollEl) return;
+
 		const isScrollingUp = scrollEl.scrollTop < lastScrollTop;
+
 		if (isScrollingUp && !isAtBottom()) {
 			userScrolledUp = true;
 		} else if (isAtBottom()) {
 			userScrolledUp = false;
 		}
+
 		lastScrollTop = scrollEl.scrollTop;
 	}
 
@@ -96,7 +103,9 @@
 
 	$effect(() => {
 		void code;
+
 		if (!streaming || userScrolledUp) return;
+
 		scrollToBottomOnFrame();
 	});
 
@@ -105,10 +114,11 @@
 		if (!streaming || !scrollEl) return;
 
 		const observer = new MutationObserver(() => scrollToBottomOnFrame());
+
 		observer.observe(scrollEl, {
+			characterData: true,
 			childList: true,
-			subtree: true,
-			characterData: true
+			subtree: true
 		});
 
 		return () => observer.disconnect();