refac: styling

This commit is contained in:
Timothy Jaeryang Baek 2024-11-15 18:56:13 -08:00
parent 7f8c70b04a
commit 7e78889e33

View File

@ -18,11 +18,12 @@
import Search from '$lib/components/icons/Search.svelte';
import Tooltip from '$lib/components/common/Tooltip.svelte';
import Switch from '$lib/components/common/Switch.svelte';
import Spinner from '$lib/components/common/Spinner.svelte';
let importFiles;
let modelsImportInputElement: HTMLInputElement;
let models = [];
let models = null;
let filteredModels = [];
$: if (models) {
@ -65,7 +66,8 @@
});
</script>
<div class="flex flex-col gap-1 mt-1.5 mb-2">
{#if models !== 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-medium px-0.5">
{$i18n.t('Models')}
@ -88,9 +90,9 @@
/>
</div>
</div>
</div>
</div>
<div class=" my-2 mb-5" id="model-list">
<div class=" my-2 mb-5" id="model-list">
{#each filteredModels as model (model.id)}
<div
class=" flex space-x-4 cursor-pointer w-full px-3 py-2 dark:hover:bg-white/5 hover:bg-black/5 rounded-lg transition"
@ -152,7 +154,9 @@
{/if}
<div class="ml-1">
<Tooltip content={(model?.is_active ?? true) ? $i18n.t('Enabled') : $i18n.t('Disabled')}>
<Tooltip
content={(model?.is_active ?? true) ? $i18n.t('Enabled') : $i18n.t('Disabled')}
>
<Switch
bind:state={model.is_active}
on:change={async (e) => {
@ -165,9 +169,9 @@
</div>
</div>
{/each}
</div>
</div>
{#if $user?.role === 'admin'}
{#if $user?.role === 'admin'}
<div class=" flex justify-end w-full mb-3">
<div class="flex space-x-1">
<input
@ -188,9 +192,11 @@
for (const model of savedModels) {
if (model?.info ?? false) {
if ($_models.find((m) => m.id === model.id)) {
await updateModelById(localStorage.token, model.id, model.info).catch((error) => {
await updateModelById(localStorage.token, model.id, model.info).catch(
(error) => {
return null;
});
}
);
} else {
await createNewModel(localStorage.token, model.info).catch((error) => {
return null;
@ -256,4 +262,9 @@
</button>
</div>
</div>
{/if}
{:else}
<div class=" h-full w-full flex justify-center items-center">
<Spinner />
</div>
{/if}