From cd30152c836ecccf6806d45582776597e1826b4b Mon Sep 17 00:00:00 2001 From: Timothy Jaeryang Baek Date: Thu, 20 Nov 2025 19:57:11 -0500 Subject: [PATCH] refac: styling --- .../admin/Evaluations/Feedbacks.svelte | 483 +++++++++--------- .../admin/Evaluations/Leaderboard.svelte | 12 +- src/lib/components/admin/Users/Groups.svelte | 11 +- .../components/admin/Users/UserList.svelte | 31 +- 4 files changed, 275 insertions(+), 262 deletions(-) diff --git a/src/lib/components/admin/Evaluations/Feedbacks.svelte b/src/lib/components/admin/Evaluations/Feedbacks.svelte index 4b95b802fe..c47524eef4 100644 --- a/src/lib/components/admin/Evaluations/Feedbacks.svelte +++ b/src/lib/components/admin/Evaluations/Feedbacks.svelte @@ -25,6 +25,7 @@ import ChevronDown from '$lib/components/icons/ChevronDown.svelte'; import { WEBUI_API_BASE_URL, WEBUI_BASE_URL } from '$lib/constants'; import { config } from '$lib/stores'; + import Spinner from '$lib/components/common/Spinner.svelte'; let page = 1; let items = null; @@ -143,256 +144,266 @@ -
-
- {$i18n.t('Feedback History')} +{#if items === null || total === null} +
+ +
+{:else} +
+
+
+ {$i18n.t('Feedback History')} +
-
+
+ {total} +
+
- {total} + {#if total > 0} +
+ + + +
+ {/if}
- {#if total > 0} -
- - - -
- {/if} -
- -
- {#if (items ?? []).length === 0} -
- {$i18n.t('No feedbacks found')} -
- {:else} - - - - + {/each} + +
setSortKey('user')} - > -
- {$i18n.t('User')} - {#if orderBy === 'user'} - - {#if direction === 'asc'} +
+ {#if (items ?? []).length === 0} +
+ {$i18n.t('No feedbacks found')} +
+ {:else} + + + + - - - - - - - - - - - - {#each items as feedback (feedback.id)} - openFeedbackModal(feedback)} - > - + - - {#if feedback?.data?.rating} - + + + + + + + + {#each items as feedback (feedback.id)} + openFeedbackModal(feedback)} + > + - {/if} - + + + {#if feedback?.data?.rating} + + {/if} + + + + - - {/each} - -
setSortKey('user')} + > +
+ {$i18n.t('User')} + {#if orderBy === 'user'} + + {#if direction === 'asc'} + + {:else} + + {/if} + + {:else} + - {:else} - - {/if} -
- 		setSortKey('model_id')} - > -
- {$i18n.t('Models')} - {#if orderBy === 'model_id'} - - {#if direction === 'asc'} - - {:else} - - {/if} - - {:else} - - {/if} -
- 		setSortKey('rating')} - > -
- {$i18n.t('Result')} - {#if orderBy === 'rating'} - - {#if direction === 'asc'} - - {:else} - - {/if} - - {:else} - - {/if} -
- 		setSortKey('updated_at')} - > -
- {$i18n.t('Updated At')} - {#if orderBy === 'updated_at'} - - {#if direction === 'asc'} - - {:else} - - {/if} - - {:else} - - {/if} -
-
-
- -
- {feedback?.user?.name} -
- + + {/if}
- 		-
-
- {#if feedback.data?.sibling_model_ids} -
- {feedback.data?.model_id} -
- - -
- {#if feedback.data.sibling_model_ids.length > 2} - - {feedback.data.sibling_model_ids.slice(0, 2).join(', ')}, {$i18n.t( - 'and {{COUNT}} more', - { COUNT: feedback.data.sibling_model_ids.length - 2 } - )} - {:else} - {feedback.data.sibling_model_ids.join(', ')} - {/if} -
- - {:else} -
- {feedback.data?.model_id} -
- {/if} -
+
setSortKey('model_id')} + > +
+ {$i18n.t('Models')} + {#if orderBy === 'model_id'} + + {#if direction === 'asc'} + + {:else} + + {/if} + + {:else} + + {/if}
- + 		-
- {#if feedback?.data?.rating.toString() === '1'} - - {:else if feedback?.data?.rating.toString() === '0'} - - {:else if feedback?.data?.rating.toString() === '-1'} - - {/if} +
setSortKey('rating')} + > +
+ {$i18n.t('Result')} + {#if orderBy === 'rating'} + + {#if direction === 'asc'} + + {:else} + + {/if} + + {:else} + + {/if} +
+ 		setSortKey('updated_at')} + > +
+ {$i18n.t('Updated At')} + {#if orderBy === 'updated_at'} + + {#if direction === 'asc'} + + {:else} + + {/if} + + {:else} + + {/if} +
+
+
+ +
+ {feedback?.user?.name} +
+
- {dayjs(feedback.updated_at * 1000).fromNow()} - +
+
+ {#if feedback.data?.sibling_model_ids} +
+ {feedback.data?.model_id} +
-
e.stopPropagation()}> - { - deleteFeedbackHandler(feedback.id); - }} - > - +
+ {#if feedback?.data?.rating.toString() === '1'} + + {:else if feedback?.data?.rating.toString() === '0'} + + {:else if feedback?.data?.rating.toString() === '-1'} + + {/if} +
+ 		+ {dayjs(feedback.updated_at * 1000).fromNow()} + e.stopPropagation()}> + { + deleteFeedbackHandler(feedback.id); + }} > - - - -
- {/if} -
- -{#if total > 0 && $config?.features?.enable_community_sharing} -
-
- {$i18n.t('Help us create the best community leaderboard by sharing your feedback history!')} -
- -
- - - -
+ + + +
+ {/if}
-{/if} -{#if total > 30} - + {#if total > 0 && $config?.features?.enable_community_sharing} +
+
+ {$i18n.t('Help us create the best community leaderboard by sharing your feedback history!')} +
+ +
+ + + +
+
+ {/if} + + {#if total > 30} + + {/if} {/if} diff --git a/src/lib/components/admin/Evaluations/Leaderboard.svelte b/src/lib/components/admin/Evaluations/Leaderboard.svelte index d66fbf7821..fbc92c2447 100644 --- a/src/lib/components/admin/Evaluations/Leaderboard.svelte +++ b/src/lib/components/admin/Evaluations/Leaderboard.svelte @@ -339,16 +339,14 @@
-
-
+
+
{$i18n.t('Leaderboard')}
-
- - {rankedModels.length} +
+ {rankedModels.length} +
diff --git a/src/lib/components/admin/Users/Groups.svelte b/src/lib/components/admin/Users/Groups.svelte index 5bee36ed38..5f2778d890 100644 --- a/src/lib/components/admin/Users/Groups.svelte +++ b/src/lib/components/admin/Users/Groups.svelte @@ -105,11 +105,14 @@ />
-
- {$i18n.t('Groups')} -
+
+
+ {$i18n.t('Groups')} +
- {groups.length} +
+ {groups.length} +
diff --git a/src/lib/components/admin/Users/UserList.svelte b/src/lib/components/admin/Users/UserList.svelte index fba10f29f1..e3959d7472 100644 --- a/src/lib/components/admin/Users/UserList.svelte +++ b/src/lib/components/admin/Users/UserList.svelte @@ -154,27 +154,28 @@
-
+
{$i18n.t('Users')}
-
- {#if ($config?.license_metadata?.seats ?? null) !== null} - {#if total > $config?.license_metadata?.seats} - {total} of {$config?.license_metadata?.seats} - {$i18n.t('available users')} +
+ {#if ($config?.license_metadata?.seats ?? null) !== null} + {#if total > $config?.license_metadata?.seats} + {total} of {$config?.license_metadata?.seats} + {$i18n.t('available users')} + {:else} + {total} of {$config?.license_metadata?.seats} + {$i18n.t('available users')} + {/if} {:else} - {total} of {$config?.license_metadata?.seats} - {$i18n.t('available users')} + {total} {/if} - {:else} - {total} - {/if} +