feat: dm channels

src/lib/components/layout/Sidebar/ChannelModal.svelte

@@ -11,6 +11,7 @@
 	import { toast } from 'svelte-sonner';
 	import { page } from '$app/stores';
 	import { goto } from '$app/navigation';
+	import UserListSelector from '$lib/components/workspace/common/UserListSelector.svelte';
 	const i18n = getContext('i18n');
 
 	export let show = false;
@@ -20,8 +21,11 @@
 	export let channel = null;
 	export let edit = false;
 
+	let type = '';
 	let name = '';
+
 	let accessControl = {};
+	let userIds = [];
 
 	let loading = false;
 
@@ -32,16 +36,20 @@
 	const submitHandler = async () => {
 		loading = true;
 		await onSubmit({
+			type: type,
 			name: name.replace(/\s/g, '-'),
-			access_control: accessControl
+			access_control: accessControl,
+			user_ids: userIds
 		});
 		show = false;
 		loading = false;
 	};
 
 	const init = () => {
-		name = channel.name;
+		type = channel?.type ?? '';
+		name = channel?.name ?? '';
 		accessControl = channel.access_control;
+		userIds = channel?.user_ids ?? [];
 	};
 
 	$: if (show) {
@@ -74,8 +82,10 @@
 	};
 
 	const resetHandler = () => {
+		type = '';
 		name = '';
 		accessControl = {};
+		userIds = [];
 		loading = false;
 	};
 </script>
@@ -109,25 +119,49 @@
 					}}
 				>
 					<div class="flex flex-col w-full mt-2">
-						<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Channel Name')}</div>
+						<div class=" mb-1 text-xs text-gray-500">{$i18n.t('Channel Type')}</div>
+
+						<div class="flex-1">
+							<select
+								class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
+								bind:value={type}
+							>
+								<option value="">{$i18n.t('Channel')}</option>
+								<option value="dm">{$i18n.t('Direct Message')}</option>
+							</select>
+						</div>
+					</div>
+
+					<div class="flex flex-col w-full mt-2">
+						<div class=" mb-1 text-xs text-gray-500">
+							{$i18n.t('Channel Name')}
+							<span class="text-xs text-gray-200 dark:text-gray-800 ml-0.5"
+								>{type === 'dm' ? `${$i18n.t('Optional')}` : ''}</span
+							>
+						</div>
 
 						<div class="flex-1">
 							<input
 								class="w-full text-sm bg-transparent placeholder:text-gray-300 dark:placeholder:text-gray-700 outline-hidden"
 								type="text"
 								bind:value={name}
-								placeholder={$i18n.t('new-channel')}
+								placeholder={`${$i18n.t('new-channel')}`}
 								autocomplete="off"
+								required={type !== 'dm'}
 							/>
 						</div>
 					</div>
 
 					<hr class=" border-gray-100 dark:border-gray-700/10 my-2.5 w-full" />
 
-					<div class="my-2 -mx-2">
-						<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
-							<AccessControl bind:accessControl accessRoles={['read', 'write']} />
-						</div>
+					<div class="-mx-2">
+						{#if type === 'dm'}
+							<UserListSelector bind:userIds />
+						{:else}
+							<div class="px-4 py-3 bg-gray-50 dark:bg-gray-950 rounded-3xl">
+								<AccessControl bind:accessControl accessRoles={['read', 'write']} />
+							</div>
+						{/if}
 					</div>
 
 					<div class="flex justify-end pt-3 text-sm font-medium gap-1.5">