Lumpiasty/llama.cpp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: Linting & Formatting scripts (#26819)

Browse Source
This commit is contained in:
Aleksander Grygier
2026-08-10 08:38:37 +02:00
committed by GitHub
parent 1e396e72a8
commit 92d1bb0c99
538 changed files with 8806 additions and 6036 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tools/ui/src/lib/components/app/models/ModelBadge.svelte
+3 -3
View File
@@ -1,10 +1,10 @@
<script lang="ts">
import { Package } from '@lucide/svelte';
import { BadgeInfo, ActionIconCopyToClipboard } from '$lib/components/app';
import ModelId from './ModelId.svelte';
import { Package } from '@lucide/svelte';
import { ActionIconCopyToClipboard, BadgeInfo } from '$lib/components/app';
import * as Tooltip from '$lib/components/ui/tooltip';
import { modelsStore } from '$lib/stores/models.svelte';
import { serverStore } from '$lib/stores/server.svelte';
import * as Tooltip from '$lib/components/ui/tooltip';
interface Props {
class?: string;
tools/ui/src/lib/components/app/models/ModelId.svelte
+5 -5
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { TruncatedText } from '$lib/components/app';
import { ModelsService } from '$lib/services/models.service';
import { config } from '$lib/stores/settings.svelte';
import { TruncatedText } from '$lib/components/app';
interface Props {
modelId: string;
@@ -15,14 +15,14 @@
}
let {
modelId,
aliases,
class: className = '',
hideOrgName = false,
showRaw = undefined,
hideQuantization,
hideTags,
aliases,
modelId,
showRaw = undefined,
tags,
class: className = '',
...rest
}: Props = $props();
tools/ui/src/lib/components/app/models/ModelsSelectorDropdown.svelte
+15 -11
View File
@@ -1,12 +1,7 @@
<script lang="ts">
import ModelLoadHighlight from './ModelLoadHighlight.svelte';
import type { ModelItem } from './utils';
import { ChevronDown, Loader2 } from '@lucide/svelte';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
import * as Tooltip from '$lib/components/ui/tooltip';
import { KeyboardKey, ServerModelStatus } from '$lib/enums';
import { MODEL_SELECTOR_ICON } from '$lib/constants';
import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
import { modelsStore, routerModels } from '$lib/stores/models.svelte';
import { modelLoadFraction } from '$lib/utils';
import {
DialogModelInformation,
DropdownMenuSearchable,
@@ -14,8 +9,13 @@
ModelsSelectorList,
ModelsSelectorOption
} from '$lib/components/app';
import ModelLoadHighlight from './ModelLoadHighlight.svelte';
import type { ModelItem } from './utils';
import * as DropdownMenu from '$lib/components/ui/dropdown-menu';
import * as Tooltip from '$lib/components/ui/tooltip';
import { MODEL_SELECTOR_ICON } from '$lib/constants';
import { KeyboardKey, ServerModelStatus } from '$lib/enums';
import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
import { modelsStore, routerModels } from '$lib/stores/models.svelte';
import { modelLoadFraction } from '$lib/utils';
interface Props {
class?: string;
@@ -40,12 +40,12 @@
const ms = useModelsSelector({
currentModel: () => currentModel,
useGlobalSelection: () => useGlobalSelection,
onModelChange: () => onModelChange,
onOpenChange: (open) => {
isOpen = open;
highlightedId = null;
}
},
useGlobalSelection: () => useGlobalSelection
});
$effect(() => {
@@ -85,12 +85,15 @@
function moveHighlight(direction: 1 | -1) {
const len = visualOrder.length;
if (len === 0) {
highlightedId = null;
return;
}
let index = highlightedIndex;
if (index === -1) {
index = direction === 1 ? 0 : len - 1;
} else {
@@ -104,6 +107,7 @@
async function handleModelKeyAction(modelId: string, unload: boolean) {
if (!unload) {
void ms.handleSelect(modelId);
return;
}
tools/ui/src/lib/components/app/models/ModelsSelectorList.svelte
+8 -8
View File
@@ -1,7 +1,7 @@
<script lang="ts">
import { modelsStore } from '$lib/stores/models.svelte';
import { ModelsSelectorOption } from '$lib/components/app';
import type { GroupedModelOptions, ModelItem } from './utils';
import { ModelsSelectorOption } from '$lib/components/app';
import { modelsStore } from '$lib/stores/models.svelte';
interface Props {
groups: GroupedModelOptions;
@@ -15,14 +15,14 @@
}
let {
groups,
currentModel,
activeId,
sectionHeaderClass = 'my-1 px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none',
orgHeaderClass = 'px-2 py-2 text-[11px] font-semibold text-muted-foreground/50 select-none [&:not(:first-child)]:mt-1',
onSelect,
currentModel,
groups,
onInfoClick,
renderOption
onSelect,
orgHeaderClass = 'px-2 py-2 text-[11px] font-semibold text-muted-foreground/50 select-none [&:not(:first-child)]:mt-1',
renderOption,
sectionHeaderClass = 'my-1 px-2 py-2 text-[13px] font-semibold text-muted-foreground/70 select-none'
}: Props = $props();
let render = $derived(renderOption ?? defaultOption);
</script>
tools/ui/src/lib/components/app/models/ModelsSelectorOption.svelte
+11 -10
View File
@@ -1,5 +1,5 @@
<script lang="ts">
import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
import ModelLoadHighlight from './ModelLoadHighlight.svelte';
import {
CircleAlert,
Heart,
@@ -11,10 +11,10 @@
RotateCw
} from '@lucide/svelte';
import { ActionIcon, ModelId } from '$lib/components/app';
import ModelLoadHighlight from './ModelLoadHighlight.svelte';
import type { ModelOption } from '$lib/types/models';
import { ICON_CLASS_DEFAULT } from '$lib/constants/css-classes';
import { ServerModelStatus } from '$lib/enums';
import { modelsStore, routerModels } from '$lib/stores/models.svelte';
import type { ModelOption } from '$lib/types/models';
import { modelLoadFraction, modelLoadProgressText } from '$lib/utils';
interface Props {
@@ -30,20 +30,21 @@
}
let {
option,
isSelected,
isHighlighted,
isFav,
hideOrgName = false,
onSelect,
onMouseEnter,
isFav,
isHighlighted,
isSelected,
onInfoClick,
onKeyDown,
onInfoClick
onMouseEnter,
onSelect,
option
}: Props = $props();
let currentRouterModels = $derived(routerModels());
let serverStatus = $derived.by(() => {
const model = currentRouterModels.find((m) => m.id === option.model);
return (model?.status?.value as ServerModelStatus) ?? null;
});
let isOperationInProgress = $derived(modelsStore.isModelOperationInProgress(option.model));
tools/ui/src/lib/components/app/models/ModelsSelectorSheet.svelte
+6 -6
View File
@@ -1,15 +1,15 @@
<script lang="ts">
import ModelLoadHighlight from './ModelLoadHighlight.svelte';
import { ChevronDown, Loader2, Package } from '@lucide/svelte';
import * as Sheet from '$lib/components/ui/sheet';
import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
import {
DialogModelInformation,
ModelId,
ModelsSelectorList,
SearchInput
} from '$lib/components/app';
import ModelLoadHighlight from './ModelLoadHighlight.svelte';
import * as Sheet from '$lib/components/ui/sheet';
import { ServerModelStatus } from '$lib/enums';
import { useModelsSelector } from '$lib/hooks/use-models-selector.svelte';
import { modelsStore, routerModels } from '$lib/stores/models.svelte';
import { modelLoadFraction } from '$lib/utils';
@@ -27,9 +27,9 @@
let {
class: className = '',
currentModel = null,
onModelChange,
disabled = false,
forceForegroundText = false,
onModelChange,
useGlobalSelection = false
}: Props = $props();
@@ -37,11 +37,11 @@
const ms = useModelsSelector({
currentModel: () => currentModel,
useGlobalSelection: () => useGlobalSelection,
onModelChange: () => onModelChange,
onOpenChange: (open) => {
sheetOpen = open;
}
},
useGlobalSelection: () => useGlobalSelection
});
export function open() {
tools/ui/src/lib/components/app/models/utils.ts
+13 -6
View File
@@ -1,5 +1,5 @@
import { SvelteMap } from 'svelte/reactivity';
import type { ModelOption } from '$lib/types/models';
import { SvelteMap } from 'svelte/reactivity';
export interface ModelItem {
option: ModelOption;
@@ -19,6 +19,7 @@ export interface GroupedModelOptions {
export function filterModelOptions(options: ModelOption[], searchTerm: string): ModelOption[] {
const term = searchTerm.trim().toLowerCase();
if (!term) return options;
return options.filter(
@@ -37,39 +38,45 @@ export function groupModelOptions(
): GroupedModelOptions {
// Loaded models
const loaded: ModelItem[] = [];
for (let i = 0; i < filteredOptions.length; i++) {
if (isModelLoaded(filteredOptions[i].model)) {
loaded.push({ option: filteredOptions[i], flatIndex: i });
loaded.push({ flatIndex: i, option: filteredOptions[i] });
}
}
// Favorites (excluding loaded)
const loadedModelIds = new Set(loaded.map((item) => item.option.model));
const favorites: ModelItem[] = [];
for (let i = 0; i < filteredOptions.length; i++) {
if (
favoriteIds.has(filteredOptions[i].model) &&
!loadedModelIds.has(filteredOptions[i].model)
) {
favorites.push({ option: filteredOptions[i], flatIndex: i });
favorites.push({ flatIndex: i, option: filteredOptions[i] });
}
}
// Available models grouped by org (excluding loaded and favorites)
const available: OrgGroup[] = [];
const orgGroups = new SvelteMap<string, ModelItem[]>();
for (let i = 0; i < filteredOptions.length; i++) {
const option = filteredOptions[i];
if (loadedModelIds.has(option.model) || favoriteIds.has(option.model)) continue;
const key = option.parsedId?.orgName ?? '';
if (!orgGroups.has(key)) orgGroups.set(key, []);
orgGroups.get(key)!.push({ option, flatIndex: i });
orgGroups.get(key)!.push({ flatIndex: i, option });
}
for (const [orgName, items] of orgGroups) {
available.push({ orgName: orgName || null, items });
available.push({ items, orgName: orgName || null });
}
return { loaded, favorites, available };
return { available, favorites, loaded };
}