refac: styling

src/app.css

@@ -115,12 +115,12 @@ li p {
 
 select {
 	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236B7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
-	background-position: right 0.5rem center;
+	background-position: right 0rem center;
 	background-repeat: no-repeat;
 	background-size: 1.5em 1.5em;
-	padding-right: 2.5rem;
 	-webkit-print-color-adjust: exact;
 	print-color-adjust: exact;
+	/* padding-right: 2.5rem; */
 	/* for Firefox */
 	-moz-appearance: none;
 	/* for Chrome */

src/lib/components/admin/Settings/Models.svelte

@@ -26,6 +26,7 @@
 	import ConfirmDialog from '$lib/components/common/ConfirmDialog.svelte';
 	import Cog6 from '$lib/components/icons/Cog6.svelte';
 	import ConfigureModelsModal from './Models/ConfigureModelsModal.svelte';
+	import Wrench from '$lib/components/icons/Wrench.svelte';
 
 	let importFiles;
 	let modelsImportInputElement: HTMLInputElement;
@@ -151,10 +152,22 @@
 					>
 				</div>
 
-				<div>
+				<div class="flex items-center">
+					<!-- <Tooltip content={$i18n.t('Manage')}>
+						<button
+							class=" p-1 rounded-full flex gap-1 items-center"
+							type="button"
+							on:click={() => {
+								showConfigModal = true;
+							}}
+						>
+							<Wrench />
+						</button>
+					</Tooltip> -->
+
 					<Tooltip content={$i18n.t('Configure')}>
 						<button
-							class=" px-2.5 py-1 rounded-full flex gap-1 items-center"
+							class=" p-1 rounded-full flex gap-1 items-center"
 							type="button"
 							on:click={() => {
 								showConfigModal = true;

src/lib/components/admin/Settings/Models/ConfigureModelsModal.svelte

@@ -33,6 +33,24 @@
 		init();
 	}
 
+	$: if (selectedModelId) {
+		onModelSelect();
+	}
+
+	const onModelSelect = () => {
+		if (selectedModelId === '') {
+			return;
+		}
+
+		if (defaultModelIds.includes(selectedModelId)) {
+			selectedModelId = '';
+			return;
+		}
+
+		defaultModelIds = [...defaultModelIds, selectedModelId];
+		selectedModelId = '';
+	};
+
 	const init = async () => {
 		config = await getModelsConfig(localStorage.token);
 
@@ -143,6 +161,24 @@
 									<div class="text-xs text-gray-500">{$i18n.t('Default Models')}</div>
 								</div>
 
+								<div class="flex items-center -mr-1">
+									<select
+										class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
+											? ''
+											: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
+										bind:value={selectedModelId}
+									>
+										<option value="">{$i18n.t('Select a model')}</option>
+										{#each $models as model}
+											<option value={model.id} class="bg-gray-50 dark:bg-gray-700"
+												>{model.name}</option
+											>
+										{/each}
+									</select>
+								</div>
+
+								<!-- <hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" /> -->
+
 								{#if defaultModelIds.length > 0}
 									<div class="flex flex-col">
 										{#each defaultModelIds as modelId, modelIdx}
@@ -170,44 +206,6 @@
 										{$i18n.t('No models selected')}
 									</div>
 								{/if}
-
-								<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
-
-								<div class="flex items-center">
-									<select
-										class="w-full py-1 text-sm rounded-lg bg-transparent {selectedModelId
-											? ''
-											: 'text-gray-500'} placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-none"
-										bind:value={selectedModelId}
-									>
-										<option value="">{$i18n.t('Select a model')}</option>
-										{#each $models as model}
-											<option value={model.id} class="bg-gray-50 dark:bg-gray-700"
-												>{model.name}</option
-											>
-										{/each}
-									</select>
-
-									<div>
-										<button
-											type="button"
-											on:click={() => {
-												if (selectedModelId === '') {
-													return;
-												}
-
-												if (defaultModelIds.includes(selectedModelId)) {
-													return;
-												}
-
-												defaultModelIds = [...defaultModelIds, selectedModelId];
-												selectedModelId = '';
-											}}
-										>
-											<Plus className="size-3.5" strokeWidth="2" />
-										</button>
-									</div>
-								</div>
 							</div>
 						</div>
 

src/lib/components/workspace/common/AccessControl.svelte

@@ -37,6 +37,18 @@
 	});
 
 	$: onChange(accessControl);
+
+	$: if (selectedGroupId) {
+		onSelectGroup();
+	}
+
+	const onSelectGroup = () => {
+		if (selectedGroupId !== '') {
+			accessControl.read.group_ids = [...accessControl.read.group_ids, selectedGroupId];
+
+			selectedGroupId = '';
+		}
+	};
 </script>
 
 <div class=" rounded-lg flex flex-col gap-2">
@@ -126,7 +138,42 @@
 					</div>
 				</div>
 
-				<div class="flex flex-col gap-2">
+				<div class="mb-1">
+					<div class="flex w-full">
+						<div class="flex flex-1 items-center">
+							<div class="w-full px-0.5">
+								<select
+									class="outline-none bg-transparent text-sm rounded-lg block w-full pr-10 max-w-full
+									{selectedGroupId ? '' : 'text-gray-500'}
+									dark:placeholder-gray-500"
+									bind:value={selectedGroupId}
+								>
+									<option class=" text-gray-700" value="" disabled selected
+										>{$i18n.t('Select a group')}</option
+									>
+									{#each groups.filter((group) => !accessControl.read.group_ids.includes(group.id)) as group}
+										<option class=" text-gray-700" value={group.id}>{group.name}</option>
+									{/each}
+								</select>
+							</div>
+							<!-- <div>
+								<Tooltip content={$i18n.t('Add Group')}>
+									<button
+										class=" p-1 rounded-xl bg-transparent dark:hover:bg-white/5 hover:bg-black/5 transition font-medium text-sm flex items-center space-x-1"
+										type="button"
+										on:click={() => {}}
+									>
+										<Plus className="size-3.5" />
+									</button>
+								</Tooltip>
+							</div> -->
+						</div>
+					</div>
+				</div>
+
+				<hr class=" border-gray-100 dark:border-gray-700/10 mt-1.5 mb-2.5 w-full" />
+
+				<div class="flex flex-col gap-2 mb-1 px-0.5">
 					{#if accessGroups.length > 0}
 						{#each accessGroups as group}
 							<div class="flex items-center gap-3 justify-between text-xs w-full transition">
@@ -140,9 +187,9 @@
 									</div>
 								</div>
 
-								<div class="w-full flex justify-end">
+								<div class="w-full flex justify-end items-center gap-0.5">
 									<button
-										class=" translate-y-0.5"
+										class=""
 										type="button"
 										on:click={() => {
 											if (accessControl.write.group_ids.includes(group.id)) {
@@ -188,48 +235,6 @@
 					{/if}
 				</div>
 			</div>
-
-			<hr class=" my-2 border-black/5 dark:border-white/5" />
-
-			<div class="mb-1">
-				<div class="flex w-full">
-					<div class="flex flex-1 items-center">
-						<div class="w-full">
-							<select
-								class="outline-none bg-transparent text-sm font-medium rounded-lg block w-full pr-10 max-w-full dark:placeholder-gray-700"
-								bind:value={selectedGroupId}
-							>
-								<option class=" text-gray-700" value="" disabled selected
-									>{$i18n.t('Select a group')}</option
-								>
-								{#each groups.filter((group) => !accessControl.read.group_ids.includes(group.id)) as group}
-									<option class=" text-gray-700" value={group.id}>{group.name}</option>
-								{/each}
-							</select>
-						</div>
-						<div>
-							<Tooltip content={$i18n.t('Add Group')}>
-								<button
-									class=" p-1 rounded-xl bg-transparent dark:hover:bg-white/5 hover:bg-black/5 transition font-medium text-sm flex items-center space-x-1"
-									type="button"
-									on:click={() => {
-										if (selectedGroupId !== '') {
-											accessControl.read.group_ids = [
-												...accessControl.read.group_ids,
-												selectedGroupId
-											];
-
-											selectedGroupId = '';
-										}
-									}}
-								>
-									<Plus className="size-3.5" />
-								</button>
-							</Tooltip>
-						</div>
-					</div>
-				</div>
-			</div>
 		</div>
 	{/if}
 </div>