ui: Linting & Formatting scripts (#26819)

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChat.svelte

@@ -1,4 +1,7 @@
 <script lang="ts">
+	import { RefreshCw } from '@lucide/svelte';
+	import { goto } from '$app/navigation';
+	import { page } from '$app/state';
 	import {
 		SettingsChatDesktopSidebar,
 		SettingsChatFields,
@@ -7,32 +10,29 @@
 		SettingsChatToolsTab,
 		SettingsFooter
 	} from '$lib/components/app/settings';
-	import { config, settingsStore } from '$lib/stores/settings.svelte';
+	import { Button } from '$lib/components/ui/button';
 	import {
 		NUMERIC_FIELDS,
 		POSITIVE_INTEGER_FIELDS,
 		SETTINGS_CHAT_SECTIONS,
 		SETTINGS_SECTION_TITLES
 	} from '$lib/constants';
-	import type { SettingsSection } from '$lib/types';
-	import { RouterService } from '$lib/services/router.service';
-	import { setMode } from 'mode-watcher';
-	import { ColorMode } from '$lib/enums/ui.enums';
-	import { fade } from 'svelte/transition';
-	import { goto } from '$app/navigation';
-	import { Button } from '$lib/components/ui/button';
-	import { RefreshCw } from '@lucide/svelte';
-	import { page } from '$app/state';
 	import { setChatSettingsConfigContext } from '$lib/contexts';
-	import { settingsReferrer } from '$lib/stores/settings-referrer.svelte';
+	import { ColorMode } from '$lib/enums/ui.enums';
+	import { RouterService } from '$lib/services/router.service';
 	import { modelsStore } from '$lib/stores/models.svelte';
 	import { isRouterMode } from '$lib/stores/server.svelte';
+	import { config, settingsStore } from '$lib/stores/settings.svelte';
+	import { settingsReferrer } from '$lib/stores/settings-referrer.svelte';
+	import type { SettingsSection } from '$lib/types';
+	import { setMode } from 'mode-watcher';
+	import { fade } from 'svelte/transition';
 	interface Props {
 		initialSection?: string;
 		getSectionHref?: (section: SettingsSection) => string;
 	}
 
-	let { initialSection, getSectionHref }: Props = $props();
+	let { getSectionHref, initialSection }: Props = $props();
 
 	let activeSlug = $derived(
 		initialSection ?? (page.params as Record<string, string | undefined>).section ?? 'general'
@@ -87,6 +87,7 @@
 			} catch (error) {
 				alert('Invalid JSON in custom parameters. Please check the format and try again.');
 				console.error(error);
+
 				return;
 			}
 		}
@@ -96,6 +97,7 @@
 		for (const field of NUMERIC_FIELDS) {
 			if (processedConfig[field] !== undefined && processedConfig[field] !== '') {
 				const numValue = Number(processedConfig[field]);
+
 				if (!isNaN(numValue)) {
 					if ((POSITIVE_INTEGER_FIELDS as readonly string[]).includes(field)) {
 						const entryByMinMax = SETTINGS_CHAT_SECTIONS.flatMap(
@@ -103,12 +105,14 @@
 						).find((entry) => entry.key === field);
 						const lo = entryByMinMax?.min ?? 1;
 						const hi = entryByMinMax?.max ?? Number.POSITIVE_INFINITY;
+
 						processedConfig[field] = Math.max(lo, Math.min(hi, Math.round(numValue)));
 					} else {
 						processedConfig[field] = numValue;
 					}
 				} else {
 					alert(`Invalid numeric value for ${field}. Please enter a valid number.`);
+
 					return;
 				}
 			}
@@ -123,11 +127,11 @@
 	}
 
 	setChatSettingsConfigContext({
+		handleConfigChange,
+		handleThemeChange,
 		get localConfig() {
 			return localConfig;
-		},
-		handleConfigChange,
-		handleThemeChange
+		}
 	});
 </script>
 

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatFields.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
-	import { RotateCcw, FlaskConical } from '@lucide/svelte';
+	import { FlaskConical, RotateCcw } from '@lucide/svelte';
+	import { SettingsChatParameterSourceIndicator } from '$lib/components/app/settings';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import { Input } from '$lib/components/ui/input';
 	import Label from '$lib/components/ui/label/label.svelte';
@@ -8,12 +8,12 @@
 	import * as Select from '$lib/components/ui/select';
 	import { Textarea } from '$lib/components/ui/textarea';
 	import { SETTING_CONFIG_INFO, SETTINGS_KEYS } from '$lib/constants';
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import { SettingsFieldType } from '$lib/enums/settings.enums';
-	import { settingsStore } from '$lib/stores/settings.svelte';
+	import { modelsStore, propsCacheVersion, selectedModelName } from '$lib/stores/models.svelte';
 	import { serverStore } from '$lib/stores/server.svelte';
-	import { modelsStore, selectedModelName, propsCacheVersion } from '$lib/stores/models.svelte';
+	import { settingsStore } from '$lib/stores/settings.svelte';
 	import { normalizeFloatingPoint } from '$lib/utils/precision';
-	import { SettingsChatParameterSourceIndicator } from '$lib/components/app/settings';
 	import type { Component } from 'svelte';
 
 	interface Props {
@@ -40,6 +40,7 @@
 				>;
 			}
 		}
+
 		return (serverStore.defaultParams ?? {}) as Record<string, unknown>;
 	});
 </script>
@@ -52,6 +53,7 @@
 				{@const serverDefault = currentModelParams[field.key]}
 				{@const isCustomRealTime = (() => {
 					if (serverDefault == null) return false;
+
 					if (currentValue === '') return false;
 
 					const numericInput = parseFloat(currentValue);
@@ -165,7 +167,9 @@
 				{@const serverDefault = currentModelParams[field.key]}
 				{@const isCustomRealTime = (() => {
 					if (serverDefault == null) return false;
+
 					if (currentValue === '' || currentValue === undefined) return false;
+
 					return currentValue !== serverDefault;
 				})()}
 

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportSection.svelte

@@ -1,19 +1,19 @@
 <script lang="ts">
+	import { Button, type ButtonVariant } from '$lib/components/ui/button';
 	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import type { Component } from 'svelte';
-	import { Button, type ButtonVariant } from '$lib/components/ui/button';
 
 	let {
-		title,
+		buttonClass,
+		buttonText,
+		buttonVariant,
 		description,
 		IconComponent,
-		buttonText,
 		onclick,
+		summary,
+		title,
 		titleClass,
-		buttonVariant,
-		buttonClass,
-		wrapperClass,
-		summary
+		wrapperClass
 	}: {
 		title: string;
 		description: string;

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatImportExportTab.svelte

@@ -1,18 +1,18 @@
 <script lang="ts">
-	import { Download, Upload, Trash2 } from '@lucide/svelte';
+	import SettingsChatImportExportSection from './SettingsChatImportExportSection.svelte';
+	import { Download, Trash2, Upload } from '@lucide/svelte';
 	import {
-		DialogConversationSelection,
 		DialogConfirmation,
+		DialogConversationSelection,
 		DialogExportSettings
 	} from '$lib/components/app';
-	import { createMessageCountMap } from '$lib/utils';
-	import { settingsStore } from '$lib/stores/settings.svelte';
-	import { conversationsStore, conversations } from '$lib/stores/conversations.svelte';
-	import { toast } from 'svelte-sonner';
-	import { fade } from 'svelte/transition';
-	import { ConversationSelectionMode, HtmlInputType, FileExtensionText } from '$lib/enums';
-	import SettingsChatImportExportSection from './SettingsChatImportExportSection.svelte';
 	import SettingsGroup from '$lib/components/app/settings/SettingsGroup.svelte';
+	import { ConversationSelectionMode, FileExtensionText, HtmlInputType } from '$lib/enums';
+	import { conversations, conversationsStore } from '$lib/stores/conversations.svelte';
+	import { settingsStore } from '$lib/stores/settings.svelte';
+	import { createMessageCountMap } from '$lib/utils';
+	import { fade } from 'svelte/transition';
+	import { toast } from 'svelte-sonner';
 
 	let exportedConversations = $state<DatabaseConversation[]>([]);
 	let importedConversations = $state<DatabaseConversation[]>([]);
@@ -49,6 +49,7 @@
 			const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
 			const url = URL.createObjectURL(blob);
 			const a = document.createElement('a');
+
 			a.href = url;
 			a.download = `llama_settings_${new Date().toISOString().split('T')[0]}.json`;
 			document.body.appendChild(a);
@@ -72,11 +73,13 @@
 	function handleSettingsImport() {
 		try {
 			const input = document.createElement('input');
+
 			input.type = HtmlInputType.FILE;
 			input.accept = FileExtensionText.JSON;
 
 			input.onchange = async (e) => {
 				const file = (e.target as HTMLInputElement)?.files?.[0];
+
 				if (!file) return;
 
 				try {
@@ -85,6 +88,7 @@
 
 					if (!data || typeof data !== 'object' || !data.config) {
 						toast.error('Invalid settings file: missing config');
+
 						return;
 					}
 
@@ -109,14 +113,17 @@
 	async function handleExportClick() {
 		try {
 			const allConversations = conversations();
+
 			if (allConversations.length === 0) {
 				toast.info('No conversations to export');
+
 				return;
 			}
 
 			const conversationsWithMessages = await Promise.all(
 				allConversations.map(async (conv: DatabaseConversation) => {
 					const messages = await conversationsStore.getConversationMessages(conv.id);
+
 					return { conv, messages };
 				})
 			);
@@ -135,6 +142,7 @@
 			const allData: ExportedConversation[] = await Promise.all(
 				selectedConversations.map(async (conv) => {
 					const messages = await conversationsStore.getConversationMessages(conv.id);
+
 					return { conv: $state.snapshot(conv), messages: $state.snapshot(messages) };
 				})
 			);
@@ -166,6 +174,7 @@
 
 			input.onchange = async (e) => {
 				const file = (e.target as HTMLInputElement)?.files?.[0];
+
 				if (!file) return;
 
 				try {
@@ -200,7 +209,6 @@
 			const selectedData = $state
 				.snapshot(fullImportData)
 				.filter((item) => selectedIds.has(item.conv.id));
-
 			const { imported, skipped } = await conversationsStore.importConversationsData(selectedData);
 
 			// A conversation already in the database is left untouched, so the summary
@@ -227,6 +235,7 @@
 
 			if (allConversations.length === 0) {
 				toast.info('No conversations to delete');
+
 				return;
 			}
 
@@ -260,7 +269,7 @@
 			IconComponent={Download}
 			buttonText="Export conversations"
 			onclick={handleExportClick}
-			summary={{ show: showExportSummary, verb: 'Exported', items: exportedConversations }}
+			summary={{ items: exportedConversations, show: showExportSummary, verb: 'Exported' }}
 		/>
 
 		<SettingsChatImportExportSection
@@ -269,7 +278,7 @@
 			IconComponent={Upload}
 			buttonText="Import conversations"
 			onclick={handleImportClick}
-			summary={{ show: showImportSummary, verb: 'Imported', items: importedConversations }}
+			summary={{ items: importedConversations, show: showImportSummary, verb: 'Imported' }}
 		/>
 
 		<SettingsChatImportExportSection
@@ -291,7 +300,7 @@
 			IconComponent={Download}
 			buttonText="Export settings"
 			onclick={handleSettingsExport}
-			summary={{ show: showSettingsExportSummary, verb: 'Exported', items: [] }}
+			summary={{ items: [], show: showSettingsExportSummary, verb: 'Exported' }}
 		/>
 
 		<SettingsChatImportExportSection
@@ -300,7 +309,7 @@
 			IconComponent={Upload}
 			buttonText="Import settings"
 			onclick={handleSettingsImport}
-			summary={{ show: showSettingsImportSummary, verb: 'Imported', items: [] }}
+			summary={{ items: [], show: showSettingsImportSummary, verb: 'Imported' }}
 		/>
 	</SettingsGroup>
 </div>

tools/ui/src/lib/components/app/settings/SettingsChat/SettingsChatToolsTab.svelte

@@ -1,14 +1,14 @@
 <script lang="ts">
-	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import { ChevronDown, ChevronRight } from '@lucide/svelte';
+	import { McpServerIdentity, TruncatedText } from '$lib/components/app';
 	import { Checkbox } from '$lib/components/ui/checkbox';
 	import * as Collapsible from '$lib/components/ui/collapsible';
-	import { TruncatedText, McpServerIdentity } from '$lib/components/app';
-	import { toolsStore } from '$lib/stores/tools.svelte';
-	import { permissionsStore } from '$lib/stores/permissions.svelte';
-	import { mcpStore } from '$lib/stores/mcp.svelte';
 	import { getBuiltinToolUi } from '$lib/constants/built-in-tools';
+	import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
 	import { ToolSource } from '$lib/enums/tools.enums';
+	import { mcpStore } from '$lib/stores/mcp.svelte';
+	import { permissionsStore } from '$lib/stores/permissions.svelte';
+	import { toolsStore } from '$lib/stores/tools.svelte';
 	import { SvelteSet } from 'svelte/reactivity';
 
 	let expandedGroups = new SvelteSet<string>();