From 68bfcfb609716dc735da0792a078df5ebad081bd Mon Sep 17 00:00:00 2001
From: Karl Ludwig Weise <ludwig@ludwigweise.de>
Date: Tue, 10 Feb 2026 15:01:05 +0100
Subject: [PATCH] Added staff member form fields to channels

---
 .../ui/form/form-description.svelte           |  2 +-
 src/lib/types/channel.ts                      |  6 +---
 .../add-channel-form/add-channel-form.svelte  | 31 ++++++++++++++++++
 .../(components)/add-channel-form/schema.ts   |  1 +
 .../edit-channel-form.svelte                  | 32 ++++++++++++++++++-
 .../(components)/edit-channel-form/schema.ts  |  1 +
 .../dashboard/channels/+page.server.ts        |  2 ++
 7 files changed, 68 insertions(+), 7 deletions(-)

diff --git a/src/lib/components/ui/form/form-description.svelte b/src/lib/components/ui/form/form-description.svelte
index ba5c93f..2cab250 100644
--- a/src/lib/components/ui/form/form-description.svelte
+++ b/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">
diff --git a/src/lib/types/channel.ts b/src/lib/types/channel.ts
index f12a298..f2e1b82 100644
--- a/src/lib/types/channel.ts
+++ b/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[];
 };
diff --git a/src/routes/(pages)/dashboard/channels/(components)/add-channel-form/add-channel-form.svelte b/src/routes/(pages)/dashboard/channels/(components)/add-channel-form/add-channel-form.svelte
index b370fd1..e4c6d4a 100644
--- a/src/routes/(pages)/dashboard/channels/(components)/add-channel-form/add-channel-form.svelte
+++ b/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 })}
diff --git a/src/routes/(pages)/dashboard/channels/(components)/add-channel-form/schema.ts b/src/routes/(pages)/dashboard/channels/(components)/add-channel-form/schema.ts
index 4aa290b..75c6485 100644
--- a/src/routes/(pages)/dashboard/channels/(components)/add-channel-form/schema.ts
+++ b/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
diff --git a/src/routes/(pages)/dashboard/channels/(components)/edit-channel-form/edit-channel-form.svelte b/src/routes/(pages)/dashboard/channels/(components)/edit-channel-form/edit-channel-form.svelte
index 6568615..edfa9cb 100644
--- a/src/routes/(pages)/dashboard/channels/(components)/edit-channel-form/edit-channel-form.svelte
+++ b/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 })}
diff --git a/src/routes/(pages)/dashboard/channels/(components)/edit-channel-form/schema.ts b/src/routes/(pages)/dashboard/channels/(components)/edit-channel-form/schema.ts
index 8450470..fa19e1a 100644
--- a/src/routes/(pages)/dashboard/channels/(components)/edit-channel-form/schema.ts
+++ b/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
diff --git a/src/routes/(pages)/dashboard/channels/+page.server.ts b/src/routes/(pages)/dashboard/channels/+page.server.ts
index c0943f6..9968e3e 100644
--- a/src/routes/(pages)/dashboard/channels/+page.server.ts
+++ b/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,