This commit is contained in:
Timothy Jaeryang Baek
2026-07-15 00:14:01 -04:00
parent 254888cf15
commit 63ada24706
31 changed files with 2560 additions and 2754 deletions
+18 -22
View File
@@ -382,14 +382,10 @@
{#if selectedModelId === null}
<div class="flex flex-col gap-1 mt-1.5 mb-2">
<div class="flex justify-between items-center">
<div class="flex items-center md:self-center text-xl font-normal px-0.5 gap-2 shrink-0">
<div>
{$i18n.t('Models')}
</div>
<div class="text-lg font-normal text-gray-500 dark:text-gray-500">
{filteredModels.length}
</div>
<div
class="flex items-center md:self-center text-xs text-gray-400 dark:text-gray-600 px-0.5 gap-1.5 shrink-0"
>
<div>{filteredModels.length}</div>
</div>
<div class="flex w-full justify-end gap-1.5">
@@ -430,7 +426,7 @@
/>
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
class="flex text-xs items-center space-x-1 px-2.5 py-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 dark:text-gray-200 transition"
disabled={modelsImportInProgress}
on:click={() => {
modelsImportInputElement.click();
@@ -445,7 +441,7 @@
</button>
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
class="flex text-xs items-center space-x-1 px-2.5 py-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 dark:text-gray-200 transition"
on:click={async () => {
downloadModels(models);
}}
@@ -457,7 +453,7 @@
{/if}
<button
class="flex text-xs items-center space-x-1 px-3 py-1.5 rounded-xl bg-gray-50 hover:bg-gray-100 dark:bg-gray-850 dark:hover:bg-gray-800 dark:text-gray-200 transition"
class="flex text-xs items-center space-x-1 px-2.5 py-1.5 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 dark:text-gray-200 transition"
type="button"
on:click={() => {
showManageModal = true;
@@ -483,10 +479,8 @@
</div>
</div>
<div
class="py-2 bg-white dark:bg-gray-900 rounded-3xl border border-gray-100/20 dark:border-white/[0.025]"
>
<div class="px-3.5 flex flex-1 items-center w-full space-x-2 py-0.5 pb-2">
<div class="py-1">
<div class="flex flex-1 items-center w-full space-x-2 py-0.5 pb-2">
<div class="flex flex-1 items-center">
<div class=" self-center ml-1 mr-3">
<Search className="size-3.5" />
@@ -499,7 +493,7 @@
{#if searchValue}
<div class="self-center pl-1.5 translate-y-[0.5px] rounded-l-xl bg-transparent">
<button
class="p-0.5 rounded-full hover:bg-gray-100 dark:hover:bg-gray-900 transition"
class="p-0.5 rounded-sm hover:bg-black/5 dark:hover:bg-white/5 transition"
on:click={() => {
searchValue = '';
}}
@@ -511,7 +505,7 @@
</div>
</div>
<div class="px-3 flex w-full items-center bg-transparent overflow-x-auto scrollbar-none">
<div class="flex w-full items-center bg-transparent overflow-x-auto scrollbar-none">
<div
class="flex gap-0.5 w-fit text-center text-sm rounded-full bg-transparent whitespace-nowrap"
>
@@ -533,7 +527,7 @@
<Dropdown>
<Tooltip content={$i18n.t('Actions')}>
<button
class="p-1 rounded-lg hover:bg-gray-100 dark:hover:bg-gray-800 transition"
class="p-1 rounded-lg hover:bg-black/5 dark:hover:bg-white/5 transition"
type="button"
>
<EllipsisHorizontal className="size-3.5" />
@@ -564,7 +558,7 @@
<div class="flex items-center">{$i18n.t('Disable All')}</div>
</button>
<hr class="border-gray-100/40 dark:border-white/[0.03] my-1" />
<hr class="border-gray-100/20 dark:border-white/[0.02] my-1" />
<button
class="select-none flex w-full gap-2 items-center h-[1.6875rem] px-2 text-[13px] font-normal cursor-pointer hover:bg-gray-50/40 dark:hover:bg-gray-800/40 rounded-xl"
@@ -592,7 +586,7 @@
</Dropdown>
</div>
<div class="px-3 my-2" id="model-list">
<div class="my-2" id="model-list">
{#if filteredModels.length > 0}
{#each filteredModels.slice((currentPage - 1) * perPage, currentPage * perPage) as model, modelIdx (`${model.id}-${modelIdx}`)}
<div
@@ -766,8 +760,10 @@
{:else}
<div class=" w-full h-full flex flex-col justify-center items-center my-16 mb-24">
<div class="max-w-md text-center">
<div class=" text-3xl mb-3">😕</div>
<div class=" text-lg font-normal mb-1">{$i18n.t('No models found')}</div>
<div class="mb-2 text-xl">😕</div>
<div class="mb-1 text-sm text-gray-700 dark:text-gray-300">
{$i18n.t('No models found')}
</div>
<div class=" text-gray-500 text-center text-xs">
{$i18n.t('Try adjusting your search or filter to find what you are looking for.')}
</div>