change person type

ka-note/client/src/lib/components/DashboardView.svelte

@@ -16,11 +16,25 @@
 	}
 	let { context }: Props = $props();
 
+	const isPerson = $derived(context.type === 'person');
 	const isProject = $derived(context.type === 'project');
 	const isCompany = $derived(context.type === 'company');
 	const entityName = $derived(context.name.replace(/^(Project |Person |Firma )/, ''));
 	const isArchived = $derived(!!context.archivedAt);
 
+	// Person sub-type (reactive local state synced from DB)
+	let personSubType = $state<PersonSubType>('contact');
+	$effect(() => {
+		personSubType = ((context.meta as PersonMeta | null)?.personSubType) ?? 'contact';
+	});
+
+	function handleSubTypeChange(value: PersonSubType) {
+		personSubType = value;
+		const meta = { ...(context.meta ?? { fullName: '', email: '', phone: '', duSince: '' }) } as PersonMeta;
+		meta.personSubType = value;
+		upsertContext({ id: context.id, meta });
+	}
+
 	// Metadata collapsed by default
 	let metaOpen = $state(false);
 
@@ -229,12 +243,6 @@
 		upsertContext({ id: context.id, meta: meta as any });
 	}
 
-	function updatePersonSubType(value: string) {
-		const meta = { ...(context.meta ?? { fullName: '', email: '', phone: '', duSince: '' }) } as PersonMeta;
-		meta.personSubType = value as PersonSubType;
-		upsertContext({ id: context.id, meta });
-	}
-
 	// Local state for meta notes — only sync from DB on context switch
 	let metaNotes = $state('');
 	let metaNotesContextId = '';
@@ -252,6 +260,20 @@
 	}
 </script>
 
+<!-- Person sub-type selector (always visible for persons) -->
+{#if isPerson}
+	{@const subTypeColors = { contact: 'border-[#555] text-[#ccc]', employee: 'border-accent text-accent', colleague: 'border-[#00b894] text-[#00b894]' } as Record<PersonSubType, string>}
+	<div class="mb-5 flex items-center gap-3">
+		<span class="text-sm text-[#aaa]">Typ:</span>
+		{#each [['contact', 'Kontakt'], ['employee', 'Mitarbeiter'], ['colleague', 'Kollege']] as [value, label]}
+			<button
+				class="rounded-full border px-3 py-1 text-sm transition-colors {personSubType === value ? subTypeColors[value as PersonSubType] + ' bg-white/10 font-bold' : 'border-[#333] text-[#666] hover:border-[#555] hover:text-[#aaa]'}"
+				onclick={() => handleSubTypeChange(value as PersonSubType)}
+			>{label}</button>
+		{/each}
+	</div>
+{/if}
+
 <!-- Archive banner -->
 {#if isArchived}
 	<div class="mb-4 flex items-center justify-between rounded-lg border border-[#555] bg-[#332200] px-4 py-3">
@@ -362,17 +384,6 @@
 				</div>
 			{:else}
 				{@const meta = (context.meta ?? { fullName: '', email: '', phone: '', duSince: '' }) as PersonMeta}
-				<div class="mb-2.5 flex flex-col">
-					<label class="mb-1 text-sm text-[#aaa]">Typ:</label>
-					<select class="rounded border border-[#555] bg-[#111] px-2.5 py-1.5 text-[#ddd]"
-						value={meta.personSubType ?? 'contact'}
-						onchange={(e) => updatePersonSubType(e.currentTarget.value)}
-					>
-						<option value="contact">Kontakt</option>
-						<option value="employee">Mitarbeiter</option>
-						<option value="colleague">Kollege</option>
-					</select>
-				</div>
 				<div class="mb-2.5 flex flex-col">
 					<label class="mb-1 text-sm text-[#aaa]">Voller Name:</label>
 					<input class="rounded border border-[#555] bg-[#111] px-2.5 py-1.5 text-[#ddd]"

ka-note/client/src/lib/components/Sidebar.svelte

@@ -69,7 +69,8 @@
 		const existing = ($contexts ?? []).filter((c: AgendaContext) => c.type === type);
 		const sortOrder = existing.length;
 
-		await upsertContext({ id, name: fullName, type, sortOrder });
+		const meta = type === 'person' ? { fullName: '', email: '', phone: '', duSince: '', personSubType: 'contact' as const } : undefined;
+		await upsertContext({ id, name: fullName, type, sortOrder, ...(meta ? { meta } : {}) });
 		cancelCreating();
 		navigate(id);
 	}