feat: user groups frontend

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

@@ -0,0 +1,123 @@
+<script>
+	import { toast } from 'svelte-sonner';
+	import dayjs from 'dayjs';
+	import relativeTime from 'dayjs/plugin/relativeTime';
+	dayjs.extend(relativeTime);
+
+	import { onMount, getContext } from 'svelte';
+	import { goto } from '$app/navigation';
+
+	import { WEBUI_NAME, config, user, showSidebar } from '$lib/stores';
+	import { WEBUI_BASE_URL } from '$lib/constants';
+
+	import Tooltip from '$lib/components/common/Tooltip.svelte';
+	import Plus from '$lib/components/icons/Plus.svelte';
+
+	const i18n = getContext('i18n');
+
+	let loaded = false;
+
+	let groups = [];
+	let filteredGroups;
+
+	$: filteredGroups = groups.filter((user) => {
+		if (search === '') {
+			return true;
+		} else {
+			let name = user.name.toLowerCase();
+			const query = search.toLowerCase();
+			return name.includes(query);
+		}
+	});
+
+	let search = '';
+
+	let showCreateGroupModal = false;
+
+	onMount(async () => {
+		if ($user?.role !== 'admin') {
+			await goto('/');
+		} else {
+			groups = [];
+		}
+		loaded = true;
+	});
+</script>
+
+{#if loaded}
+	<div class="mt-0.5 mb-2 gap-1 flex flex-col md:flex-row justify-between">
+		<div class="flex md:self-center text-lg font-medium px-0.5">
+			{$i18n.t('Groups')}
+			<div class="flex self-center w-[1px] h-6 mx-2.5 bg-gray-50 dark:bg-gray-850" />
+
+			<span class="text-lg font-medium text-gray-500 dark:text-gray-300">{groups.length}</span>
+		</div>
+
+		<div class="flex gap-1">
+			<div class=" flex w-full space-x-2">
+				<div class="flex flex-1">
+					<div class=" self-center ml-1 mr-3">
+						<svg
+							xmlns="http://www.w3.org/2000/svg"
+							viewBox="0 0 20 20"
+							fill="currentColor"
+							class="w-4 h-4"
+						>
+							<path
+								fill-rule="evenodd"
+								d="M9 3.5a5.5 5.5 0 100 11 5.5 5.5 0 000-11zM2 9a7 7 0 1112.452 4.391l3.328 3.329a.75.75 0 11-1.06 1.06l-3.329-3.328A7 7 0 012 9z"
+								clip-rule="evenodd"
+							/>
+						</svg>
+					</div>
+					<input
+						class=" w-full text-sm pr-4 py-1 rounded-r-xl outline-none bg-transparent"
+						bind:value={search}
+						placeholder={$i18n.t('Search')}
+					/>
+				</div>
+
+				<div>
+					<Tooltip content={$i18n.t('Create Group')}>
+						<button
+							class=" p-2 rounded-xl hover:bg-gray-100 dark:bg-gray-900 dark:hover:bg-gray-850 transition font-medium text-sm flex items-center space-x-1"
+							on:click={() => {
+								showCreateGroupModal = !showCreateGroupModal;
+							}}
+						>
+							<Plus className="size-3.5" />
+						</button>
+					</Tooltip>
+				</div>
+			</div>
+		</div>
+	</div>
+
+	<div>
+		{#if filteredGroups.length === 0}
+			<div class="flex flex-col items-center justify-center h-40">
+				<div class=" text-xl font-medium">
+					{$i18n.t('Organize your users')}
+				</div>
+
+				<div class="mt-1 text-sm dark:text-gray-300">
+					{$i18n.t('Use groups to group your users and assign permissions.')}
+				</div>
+
+				<div class="mt-3">
+					<button
+						class=" px-4 py-1.5 text-sm rounded-full bg-black hover:bg-gray-800 text-white dark:bg-white dark:text-black dark:hover:bg-gray-100 transition font-medium flex items-center space-x-1"
+						aria-label={$i18n.t('Create Group')}
+						on:click={() => {
+							showCreateGroupModal = true;
+						}}
+					>
+						{$i18n.t('Create Group')}
+					</button>
+				</div>
+			</div>
+		{:else}
+			<div></div>
+		{/if}
+	</div>
+{/if}

src/lib/components/workspace/Knowledge/Collection.svelte

@@ -596,7 +596,7 @@
 	}}
 />
 
-<div class="flex flex-col w-full h-full max-h-[100dvh]" id="collection-container">
+<div class="flex flex-col w-full h-full max-h-[100dvh] mt-1" id="collection-container">
 	{#if id && knowledge}
 		<div class="flex flex-row flex-1 h-full max-h-full pb-2.5">
 			<PaneGroup direction="horizontal">