refac: styling

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

@@ -24,9 +24,17 @@
 		}
 	};
 
+	let chatDeletion = true;
+	let chatEdit = true;
+	let chatTemporary = true;
+
 	onMount(async () => {
 		permissions = await getUserPermissions(localStorage.token);
 
+		chatDeletion = permissions?.chat?.deletion ?? true;
+		chatEdit = permissions?.chat?.editing ?? true;
+		chatTemporary = permissions?.chat?.temporary ?? true;
+
 		const res = await getModelFilterConfig(localStorage.token);
 		if (res) {
 			whitelistEnabled = res.enabled;
@@ -43,7 +51,13 @@
 		// console.log('submit');
 
 		await setDefaultModels(localStorage.token, defaultModelId);
-		await updateUserPermissions(localStorage.token, permissions);
+		await updateUserPermissions(localStorage.token, {
+			chat: {
+				deletion: chatDeletion,
+				editing: chatEdit,
+				temporary: chatTemporary
+			}
+		});
 		await updateModelFilterConfig(localStorage.token, whitelistEnabled, whitelistModels);
 		saveHandler();
 
@@ -54,127 +68,22 @@
 		<div>
 			<div class=" mb-2 text-sm font-medium">{$i18n.t('User Permissions')}</div>
 
-			<div class="  flex w-full justify-between">
+			<div class="  flex w-full justify-between my-2 pr-2">
 				<div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Deletion')}</div>
 
-				<button
-					class="p-1 px-3 text-xs flex rounded transition"
-					on:click={() => {
-						permissions.chat.deletion = !(permissions?.chat?.deletion ?? true);
-					}}
-					type="button"
-				>
-					{#if permissions?.chat?.deletion ?? true}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
-							/>
-						</svg>
-						<span class="ml-2 self-center">{$i18n.t('Allow')}</span>
-					{:else}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-
-						<span class="ml-2 self-center">{$i18n.t("Don't Allow")}</span>
-					{/if}
-				</button>
+				<Switch bind:state={chatDeletion} />
 			</div>
 
-			<div class="  flex w-full justify-between">
+			<div class="  flex w-full justify-between my-2 pr-2">
 				<div class=" self-center text-xs font-medium">{$i18n.t('Allow Chat Editing')}</div>
 
-				<button
-					class="p-1 px-3 text-xs flex rounded transition"
-					on:click={() => {
-						permissions.chat.editing = !(permissions?.chat?.editing ?? true);
-					}}
-					type="button"
-				>
-					{#if permissions?.chat?.editing ?? true}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
-							/>
-						</svg>
-						<span class="ml-2 self-center">{$i18n.t('Allow')}</span>
-					{:else}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-
-						<span class="ml-2 self-center">{$i18n.t("Don't Allow")}</span>
-					{/if}
-				</button>
+				<Switch bind:state={chatEdit} />
 			</div>
 
-			<div class="  flex w-full justify-between">
+			<div class="  flex w-full justify-between my-2 pr-2">
 				<div class=" self-center text-xs font-medium">{$i18n.t('Allow Temporary Chat')}</div>
 
-				<button
-					class="p-1 px-3 text-xs flex rounded transition"
-					on:click={() => {
-						permissions.chat.temporary = !(permissions?.chat?.temporary ?? true);
-					}}
-					type="button"
-				>
-					{#if permissions?.chat?.temporary ?? true}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								d="M11.5 1A3.5 3.5 0 0 0 8 4.5V7H2.5A1.5 1.5 0 0 0 1 8.5v5A1.5 1.5 0 0 0 2.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 9.5 7V4.5a2 2 0 1 1 4 0v1.75a.75.75 0 0 0 1.5 0V4.5A3.5 3.5 0 0 0 11.5 1Z"
-							/>
-						</svg>
-						<span class="ml-2 self-center">{$i18n.t('Allow')}</span>
-					{:else}
-						<svg
-							xmlns="http://www.w3.org/2000/svg"
-							viewBox="0 0 16 16"
-							fill="currentColor"
-							class="w-4 h-4"
-						>
-							<path
-								fill-rule="evenodd"
-								d="M8 1a3.5 3.5 0 0 0-3.5 3.5V7A1.5 1.5 0 0 0 3 8.5v5A1.5 1.5 0 0 0 4.5 15h7a1.5 1.5 0 0 0 1.5-1.5v-5A1.5 1.5 0 0 0 11.5 7V4.5A3.5 3.5 0 0 0 8 1Zm2 6V4.5a2 2 0 1 0-4 0V7h4Z"
-								clip-rule="evenodd"
-							/>
-						</svg>
-
-						<span class="ml-2 self-center">{$i18n.t("Don't Allow")}</span>
-					{/if}
-				</button>
+				<Switch bind:state={chatTemporary} />
 			</div>
 		</div>
 
@@ -210,7 +119,7 @@
 
 				<div class=" space-y-1">
 					<div class="mb-2">
-						<div class="flex justify-between items-center text-xs">
+						<div class="flex justify-between items-center text-xs my-3 pr-2">
 							<div class=" text-xs font-medium">{$i18n.t('Model Whitelisting')}</div>
 
 							<Switch bind:state={whitelistEnabled} />