upd person list

ka-note/VERSION

@@ -1 +1 @@
-1.1.92
+1.1.93

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

@@ -6,8 +6,9 @@
 
 	interface Props {
 		persons: AgendaContext[];
+		sortable?: boolean;
 	}
-	let { persons }: Props = $props();
+	let { persons, sortable = false }: Props = $props();
 
 	function displayName(name: string): string {
 		return name.replace('Person ', '');
@@ -68,10 +69,12 @@
 			{@const showTenure = subType === 'employee' && !!meta?.joinDate}
 			{@const hasInfo = (showBirthday && !!meta?.birthday) || showTenure}
 			<div class="flex items-center gap-2">
-				<div class="flex flex-col">
+				{#if sortable}
-					<button class="text-[#555] hover:text-[#aaa] disabled:opacity-20 leading-none px-1" onclick={() => reorderContext(ctx.id, 'up')} disabled={i === 0} title="Nach oben">▲</button>
+					<div class="flex flex-col">
-					<button class="text-[#555] hover:text-[#aaa] disabled:opacity-20 leading-none px-1" onclick={() => reorderContext(ctx.id, 'down')} disabled={i === persons.length - 1} title="Nach unten">▼</button>
+						<button class="text-[#555] hover:text-[#aaa] disabled:opacity-20 leading-none px-1" onclick={() => reorderContext(ctx.id, 'up')} disabled={i === 0} title="Nach oben">▲</button>
-				</div>
+						<button class="text-[#555] hover:text-[#aaa] disabled:opacity-20 leading-none px-1" onclick={() => reorderContext(ctx.id, 'down')} disabled={i === persons.length - 1} title="Nach unten">▼</button>
+					</div>
+				{/if}
 				<button
 					class="rounded border border-[#444] bg-sidebar px-2.5 py-2.5 transition-colors hover:border-[#666] {ctx.isFavorite ? 'text-yellow-400' : 'text-[#555] hover:text-yellow-400/60'}"
 					onclick={() => toggleFavorite(ctx.id)}

ka-note/client/src/routes/persons/+page.svelte

@@ -13,9 +13,10 @@
 
 	const persons = $derived($allPersons ?? []);
 
-	type Tab = 'all' | PersonSubType;
+	type Tab = 'favorites' | 'all' | PersonSubType;
 
 	const tabs: { key: Tab; label: string }[] = [
+		{ key: 'favorites', label: '★' },
 		{ key: 'all', label: 'Alle' },
 		{ key: 'family', label: 'Familie' },
 		{ key: 'colleague', label: 'Kollegen' },
@@ -26,11 +27,23 @@
 
 	let activeTab = $state<Tab>('all');
 
-	const filtered = $derived(
+	function sortAlpha(list: typeof persons) {
-		activeTab === 'all'
+		return [...list].sort((a, b) =>
-			? persons
+			a.name.replace('Person ', '').localeCompare(b.name.replace('Person ', ''), 'de')
-			: persons.filter(c => ((c.meta as PersonMeta | null)?.personSubType ?? 'contact') === activeTab)
+		);
-	);
+	}
+
+	const filtered = $derived(() => {
+		if (activeTab === 'favorites') return persons.filter(c => c.isFavorite);
+		if (activeTab === 'all') return sortAlpha(persons);
+		return sortAlpha(persons.filter(c => ((c.meta as PersonMeta | null)?.personSubType ?? 'contact') === activeTab));
+	});
+
+	function tabCount(key: Tab): number {
+		if (key === 'favorites') return persons.filter(c => c.isFavorite).length;
+		if (key === 'all') return persons.length;
+		return persons.filter(c => ((c.meta as PersonMeta | null)?.personSubType ?? 'contact') === key).length;
+	}
 
 	let creating = $state(false);
 	let newName = $state('');
@@ -79,18 +92,18 @@
 
 	<div class="mb-4 flex gap-1 overflow-x-auto border-b border-[#333] pb-2 scrollbar-none">
 		{#each tabs as tab}
-			{@const count = tab.key === 'all' ? persons.length : persons.filter(c => ((c.meta as PersonMeta | null)?.personSubType ?? 'contact') === tab.key).length}
+			{@const count = tabCount(tab.key)}
 			{#if count > 0 || tab.key === 'all'}
 				<button
-					class="rounded px-3 py-1 text-sm transition-colors {activeTab === tab.key ? 'bg-accent text-white' : 'text-muted hover:text-white'}"
+					class="shrink-0 rounded px-3 py-1 text-sm transition-colors {activeTab === tab.key ? 'bg-accent text-white' : 'text-muted hover:text-white'} {tab.key === 'favorites' ? 'text-yellow-400' : ''}"
 					onclick={() => activeTab = tab.key}
 				>
 					{tab.label}
-					<span class="ml-1 opacity-60">{count}</span>
+					{#if tab.key !== 'favorites'}<span class="ml-1 opacity-60">{count}</span>{/if}
 				</button>
 			{/if}
 		{/each}
 	</div>
 
-	<PersonList persons={filtered} />
+	<PersonList persons={filtered()} sortable={activeTab === 'favorites'} />
 </div>