refac: selector

This commit is contained in:
Timothy Jaeryang Baek 2025-04-10 10:18:56 -07:00
parent 7aab8b9307
commit 23dcae7054

View File

@ -84,47 +84,49 @@
} }
); );
$: filteredItems = searchValue $: filteredItems = (
? fuse searchValue
.search(searchValue) ? fuse
.map((e) => { .search(searchValue)
return e.item; .map((e) => {
}) return e.item;
.filter((item) => { })
if (selectedTag === '') { .filter((item) => {
return true; if (selectedTag === '') {
} return true;
return (item.model?.tags ?? []).map((tag) => tag.name).includes(selectedTag); }
}) return (item.model?.tags ?? []).map((tag) => tag.name).includes(selectedTag);
.filter((item) => { })
if (selectedConnectionType === '') { .filter((item) => {
return true; if (selectedConnectionType === '') {
} else if (selectedConnectionType === 'ollama') { return true;
return item.model?.owned_by === 'ollama'; } else if (selectedConnectionType === 'ollama') {
} else if (selectedConnectionType === 'openai') { return item.model?.owned_by === 'ollama';
return item.model?.owned_by === 'openai'; } else if (selectedConnectionType === 'openai') {
} else if (selectedConnectionType === 'direct') { return item.model?.owned_by === 'openai';
return item.model?.direct; } else if (selectedConnectionType === 'direct') {
} return item.model?.direct;
}) }
: items })
.filter((item) => { : items
if (selectedTag === '') { .filter((item) => {
return true; if (selectedTag === '') {
} return true;
return (item.model?.tags ?? []).map((tag) => tag.name).includes(selectedTag); }
}) return (item.model?.tags ?? []).map((tag) => tag.name).includes(selectedTag);
.filter((item) => { })
if (selectedConnectionType === '') { .filter((item) => {
return true; if (selectedConnectionType === '') {
} else if (selectedConnectionType === 'ollama') { return true;
return item.model?.owned_by === 'ollama'; } else if (selectedConnectionType === 'ollama') {
} else if (selectedConnectionType === 'openai') { return item.model?.owned_by === 'ollama';
return item.model?.owned_by === 'openai'; } else if (selectedConnectionType === 'openai') {
} else if (selectedConnectionType === 'direct') { return item.model?.owned_by === 'openai';
return item.model?.direct; } else if (selectedConnectionType === 'direct') {
} return item.model?.direct;
}); }
})
).filter((item) => !(item.model?.info?.meta?.hidden ?? false));
$: if (selectedTag || selectedConnectionType) { $: if (selectedTag || selectedConnectionType) {
resetView(); resetView();
@ -282,7 +284,10 @@
ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => false); ollamaVersion = await getOllamaVersion(localStorage.token).catch((error) => false);
if (items) { if (items) {
tags = items.flatMap((item) => item.model?.tags ?? []).map((tag) => tag.name); tags = items
.filter((item) => !(item.model?.info?.meta?.hidden ?? false))
.flatMap((item) => item.model?.tags ?? [])
.map((tag) => tag.name);
// Remove duplicates and sort // Remove duplicates and sort
tags = Array.from(new Set(tags)).sort((a, b) => a.localeCompare(b)); tags = Array.from(new Set(tags)).sort((a, b) => a.localeCompare(b));
@ -388,18 +393,20 @@
class="flex gap-1 w-fit text-center text-sm font-medium rounded-full bg-transparent px-1.5 pb-0.5" class="flex gap-1 w-fit text-center text-sm font-medium rounded-full bg-transparent px-1.5 pb-0.5"
bind:this={tagsContainerElement} bind:this={tagsContainerElement}
> >
<button {#if (items.find((item) => item.model?.owned_by === 'ollama') && items.find((item) => item.model?.owned_by === 'openai')) || items.find((item) => item.model?.direct) || tags.length > 0}
class="min-w-fit outline-none p-1.5 {selectedTag === '' && <button
selectedConnectionType === '' class="min-w-fit outline-none p-1.5 {selectedTag === '' &&
? '' selectedConnectionType === ''
: 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize" ? ''
on:click={() => { : 'text-gray-300 dark:text-gray-600 hover:text-gray-700 dark:hover:text-white'} transition capitalize"
selectedConnectionType = ''; on:click={() => {
selectedTag = ''; selectedConnectionType = '';
}} selectedTag = '';
> }}
{$i18n.t('All')} >
</button> {$i18n.t('All')}
</button>
{/if}
{#if items.find((item) => item.model?.owned_by === 'ollama') && items.find((item) => item.model?.owned_by === 'openai')} {#if items.find((item) => item.model?.owned_by === 'ollama') && items.find((item) => item.model?.owned_by === 'openai')}
<button <button
@ -457,7 +464,7 @@
</div> </div>
{/if} {/if}
{#each filteredItems.filter((item) => !(item.model?.info?.meta?.hidden ?? false)) as item, index} {#each filteredItems as item, index}
<button <button
aria-label="model-item" aria-label="model-item"
class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted {index === class="flex w-full text-left font-medium line-clamp-1 select-none items-center rounded-button py-2 pl-3 pr-1.5 text-sm text-gray-700 dark:text-gray-100 outline-hidden transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg cursor-pointer data-highlighted:bg-muted {index ===