Added staff member form fields to channels

src/lib/components/ui/form/form-description.svelte

@@ -20,7 +20,7 @@
 <FormPrimitive.Description
   bind:ref
   data-slot="form-description"
-  class={cn("text-muted-foreground -mt-1 ml-1 leading-none", className)}
+  class={cn("text-muted-foreground -mt-1 ml-px leading-none", className)}
   {...restProps}
 >
   <Text style="xs" color="medium" class="leading-none">

src/lib/types/channel.ts

@@ -15,9 +15,5 @@ export type TChannelWithFullAgents = Omit<TChannel, "agentIds"> & {
     name: string;
     // and more that we don't use in FE yet
   }[];
-  staff: {
-    id: string;
-    name: string;
-    // and more that we don't use in FE yet
-  }[];
+  staffIds: string[];
 };

src/routes/(pages)/dashboard/channels/(components)/add-channel-form/add-channel-form.svelte

@@ -10,6 +10,7 @@
   import { Textarea } from "$lib/components/ui/textarea";
   import { Headline, Text } from "$lib/components/ui/typography";
   import { agents as agentsStore } from "$lib/stores/agents";
+  import { staff as staffStore } from "$lib/stores/staff";
   import { tenants } from "$lib/stores/tenants";
   import { toast } from "svelte-sonner";
   import { get } from "svelte/store";
@@ -21,6 +22,7 @@
   let { done }: { done: () => void } = $props();
 
   const agents = $derived($agentsStore.agents ?? []);
+  const staff = $derived($staffStore.staff ?? []);
   const tenantLocales = get(tenants).currentTenant?.languages ?? [];
   const form = superForm(
     {
@@ -33,6 +35,7 @@
         {} as { [key: string]: string },
       ),
       agentIds: [] as string[],
+      staffIds: [] as string[],
       isPublic: true,
       requiresConfirmation: false,
       slotTemplates: [DEFAULT_SLOT_TEMPLATE],
@@ -123,6 +126,34 @@
     </Form.Control>
     <Form.FieldErrors />
   </Form.Field>
+  <Form.Field {form} name="staffIds">
+    <Form.Control>
+      {#snippet children({ props })}
+        <Form.Label>{m["channels.add.fields.staff.title"]()}</Form.Label>
+        <Form.Description>
+          {m["channels.add.fields.staff.description"]()}
+        </Form.Description>
+        <Select.Root
+          type="multiple"
+          bind:value={$formData.staffIds}
+          name={props.name}
+          onValueChange={(v) => ($formData.staffIds = v)}
+        >
+          <Select.Trigger {...props} class="w-full">
+            {$formData.staffIds.length > 0
+              ? $formData.staffIds.map((id) => staff.find((x) => x.id === id)?.name).join(", ")
+              : m["channels.add.fields.staff.placeholder"]()}
+          </Select.Trigger>
+          <Select.Content>
+            {#each staff as member (member.id)}
+              <Select.Item value={member.id}>{member.name}</Select.Item>
+            {/each}
+          </Select.Content>
+        </Select.Root>
+      {/snippet}
+    </Form.Control>
+    <Form.FieldErrors />
+  </Form.Field>
   <Form.Field {form} name="isPublic">
     <Form.Control>
       {#snippet children({ props })}

src/routes/(pages)/dashboard/channels/(components)/add-channel-form/schema.ts

@@ -13,6 +13,7 @@ export const formSchema = z.object({
     .optional(),
   descriptions: z.record(z.string(), z.string()).optional(),
   agentIds: z.array(z.string()).default([]),
+  staffIds: z.array(z.string()).default([]),
   isPublic: z.boolean().optional().default(false),
   requiresConfirmation: z.boolean().optional().default(false),
   slotTemplates: z

src/routes/(pages)/dashboard/channels/(components)/edit-channel-form/edit-channel-form.svelte

@@ -10,6 +10,7 @@
   import { Textarea } from "$lib/components/ui/textarea";
   import { Headline, Text } from "$lib/components/ui/typography";
   import { agents as agentsStore } from "$lib/stores/agents";
+  import { staff as staffStore } from "$lib/stores/staff";
   import { tenants } from "$lib/stores/tenants";
   import type { TChannelWithFullAgents, TSlotTemplate } from "$lib/types/channel";
   import { toast } from "svelte-sonner";
@@ -20,8 +21,8 @@
   import { DEFAULT_SLOT_TEMPLATE } from "../utils";
 
   let { entity, done }: { entity: TChannelWithFullAgents; done: () => void } = $props();
-
   const agents = $derived($agentsStore.agents ?? []);
+  const staff = $derived($staffStore.staff ?? []);
   const tenantLocales = get(tenants).currentTenant?.languages ?? [];
 
   // svelte-ignore state_referenced_locally
@@ -37,6 +38,7 @@
         {} as { [key: string]: string },
       ),
       agentIds: entity.agents.map((a) => a.id) ?? [],
+      staffIds: entity.staffIds,
       isPublic: entity.isPublic || false,
       requiresConfirmation: entity.requiresConfirmation || false,
       slotTemplates: entity.slotTemplates,
@@ -137,6 +139,34 @@
     </Form.Control>
     <Form.FieldErrors />
   </Form.Field>
+  <Form.Field {form} name="staffIds">
+    <Form.Control>
+      {#snippet children({ props })}
+        <Form.Label>{m["channels.add.fields.staff.title"]()}</Form.Label>
+        <Form.Description>
+          {m["channels.add.fields.staff.description"]()}
+        </Form.Description>
+        <Select.Root
+          type="multiple"
+          bind:value={$formData.staffIds}
+          name={props.name}
+          onValueChange={(v) => ($formData.staffIds = v)}
+        >
+          <Select.Trigger {...props} class="w-full">
+            {$formData.staffIds.length > 0
+              ? $formData.staffIds.map((id) => staff.find((x) => x.id === id)?.name).join(", ")
+              : m["channels.add.fields.staff.placeholder"]()}
+          </Select.Trigger>
+          <Select.Content>
+            {#each staff as member (member.id)}
+              <Select.Item value={member.id}>{member.name}</Select.Item>
+            {/each}
+          </Select.Content>
+        </Select.Root>
+      {/snippet}
+    </Form.Control>
+    <Form.FieldErrors />
+  </Form.Field>
   <Form.Field {form} name="isPublic">
     <Form.Control>
       {#snippet children({ props })}

src/routes/(pages)/dashboard/channels/(components)/edit-channel-form/schema.ts

@@ -14,6 +14,7 @@ export const formSchema = z.object({
     .optional(),
   descriptions: z.record(z.string(), z.string()).optional(),
   agentIds: z.array(z.string()).default([]),
+  staffIds: z.array(z.string()).default([]),
   isPublic: z.boolean().optional().default(false),
   requiresConfirmation: z.boolean().optional().default(false),
   slotTemplates: z

src/routes/(pages)/dashboard/channels/+page.server.ts

@@ -74,6 +74,7 @@ export const actions: Actions = {
         names: form.data.names,
         descriptions: removeEmptyTranslations(form.data.descriptions),
         agentIds: form.data.agentIds,
+        staffIds: form.data.staffIds,
         isPublic: form.data.isPublic,
         requiresConfirmation: form.data.requiresConfirmation,
         slotTemplates: form.data.slotTemplates,
@@ -124,6 +125,7 @@ export const actions: Actions = {
           names: form.data.names,
           descriptions: removeEmptyTranslations(form.data.descriptions),
           agentIds: form.data.agentIds,
+          staffIds: form.data.staffIds,
           isPublic: form.data.isPublic,
           requiresConfirmation: form.data.requiresConfirmation,
           slotTemplates: form.data.slotTemplates,