From bc1788941fe8b5f9c7fca3817a2af46bfa843de2 Mon Sep 17 00:00:00 2001
From: Till JS <tills95@gmail.com>
Date: Tue, 31 Mar 2026 13:10:55 +0200
Subject: [PATCH] refactor(contacts,todo): extract shared utilities, eliminate
 duplication

Contacts:
- Extract getDisplayName() + getInitials() to lib/utils/contact-display.ts
  (was duplicated across 7 files)
- Export UNKNOWN_CONTACT_NAME constant

Todo:
- Extract getSubtaskProgress() to lib/utils/task-helpers.ts
  (was duplicated in TaskItem + KanbanTaskCard)
- Add formatDateForInput() + dateInputToISO() to date-display.ts

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 .../lib/components/ContactDetailModal.svelte  | 14 +++-------
 .../web/src/lib/components/SearchModal.svelte | 15 +----------
 .../components/duplicates/MergeModal.svelte   | 15 +----------
 .../views/ContactAlphabetView.svelte          | 15 +----------
 .../components/views/ContactGridView.svelte   | 15 +----------
 .../apps/web/src/lib/utils/contact-display.ts | 26 +++++++++++++++++++
 .../web/src/routes/(app)/archive/+page.svelte | 15 +----------
 .../src/routes/(app)/duplicates/+page.svelte  | 15 +----------
 .../web/src/lib/components/TaskItem.svelte    | 10 +++----
 .../components/kanban/KanbanTaskCard.svelte   |  7 ++---
 .../apps/web/src/lib/utils/date-display.ts    | 17 ++++++++++++
 .../apps/web/src/lib/utils/task-helpers.ts    |  9 +++++++
 12 files changed, 67 insertions(+), 106 deletions(-)
 create mode 100644 apps/contacts/apps/web/src/lib/utils/contact-display.ts
 create mode 100644 apps/todo/apps/web/src/lib/utils/task-helpers.ts

diff --git a/apps/contacts/apps/web/src/lib/components/ContactDetailModal.svelte b/apps/contacts/apps/web/src/lib/components/ContactDetailModal.svelte
index 7393f4661..2cb384cd2 100644
--- a/apps/contacts/apps/web/src/lib/components/ContactDetailModal.svelte
+++ b/apps/contacts/apps/web/src/lib/components/ContactDetailModal.svelte
@@ -2,6 +2,7 @@
 	import { goto } from '$app/navigation';
 	import { onMount } from 'svelte';
 	import { contactsApi, photoApi, type Contact } from '$lib/api/contacts';
+	import { getDisplayName } from '$lib/utils/contact-display';
 	import ContactNotes from './ContactNotes.svelte';
 	import ContactTasks from './ContactTasks.svelte';
 	import { ContactDetailSkeleton } from '$lib/components/skeletons';
@@ -128,15 +129,6 @@
 		bluesky = contact.bluesky || '';
 	}
 
-	function getDisplayName() {
-		if (!contact) return '';
-		if (contact.displayName) return contact.displayName;
-		if (contact.firstName || contact.lastName) {
-			return [contact.firstName, contact.lastName].filter(Boolean).join(' ');
-		}
-		return contact.email || 'Unbekannt';
-	}
-
 	async function loadContact() {
 		loading = true;
 		error = null;
@@ -551,7 +543,7 @@
 							{#if contact.photoUrl}
 								<img
 									src={contact.photoUrl}
-									alt={getDisplayName()}
+									alt={getDisplayName(contact)}
 									class="avatar-image avatar-large"
 								/>
 								<button
@@ -629,7 +621,7 @@
 								{/if}
 							</button>
 						</div>
-						<h2 class="profile-name">{getDisplayName()}</h2>
+						<h2 class="profile-name">{getDisplayName(contact)}</h2>
 						{#if contact.company || contact.jobTitle}
 							<p class="profile-subtitle">
 								{[contact.jobTitle, contact.company].filter(Boolean).join(' @ ')}
diff --git a/apps/contacts/apps/web/src/lib/components/SearchModal.svelte b/apps/contacts/apps/web/src/lib/components/SearchModal.svelte
index f19a1c065..141dfdd94 100644
--- a/apps/contacts/apps/web/src/lib/components/SearchModal.svelte
+++ b/apps/contacts/apps/web/src/lib/components/SearchModal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
 	import { contactsApi, type Contact } from '$lib/api/contacts';
+	import { getDisplayName, getInitials } from '$lib/utils/contact-display';
 	import { newContactModalStore } from '$lib/stores/new-contact-modal.svelte';
 	import { ContactsEvents } from '@manacore/shared-utils/analytics';
 	import { MagnifyingGlass, Heart, Plus, Tag, Upload } from '@manacore/shared-icons';
@@ -90,20 +91,6 @@
 		onClose();
 	}
 
-	function getDisplayName(contact: Contact) {
-		if (contact.displayName) return contact.displayName;
-		if (contact.firstName || contact.lastName) {
-			return [contact.firstName, contact.lastName].filter(Boolean).join(' ');
-		}
-		return contact.email || 'Unbekannt';
-	}
-
-	function getInitials(contact: Contact) {
-		const first = contact.firstName?.[0] || '';
-		const last = contact.lastName?.[0] || '';
-		return (first + last).toUpperCase() || contact.email?.[0]?.toUpperCase() || '?';
-	}
-
 	function handleBackdropClick(e: MouseEvent) {
 		if (e.target === e.currentTarget) {
 			onClose();
diff --git a/apps/contacts/apps/web/src/lib/components/duplicates/MergeModal.svelte b/apps/contacts/apps/web/src/lib/components/duplicates/MergeModal.svelte
index b5f076f1d..359602d04 100644
--- a/apps/contacts/apps/web/src/lib/components/duplicates/MergeModal.svelte
+++ b/apps/contacts/apps/web/src/lib/components/duplicates/MergeModal.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
 	import { _ } from 'svelte-i18n';
 	import type { Contact } from '$lib/api/contacts';
+	import { getDisplayName, getInitials } from '$lib/utils/contact-display';
 
 	interface Props {
 		isOpen: boolean;
@@ -24,20 +25,6 @@
 		}
 	});
 
-	function getInitials(contact: Contact) {
-		const first = contact.firstName?.[0] || '';
-		const last = contact.lastName?.[0] || '';
-		return (first + last).toUpperCase() || contact.email?.[0]?.toUpperCase() || '?';
-	}
-
-	function getDisplayName(contact: Contact) {
-		if (contact.displayName) return contact.displayName;
-		if (contact.firstName || contact.lastName) {
-			return [contact.firstName, contact.lastName].filter(Boolean).join(' ');
-		}
-		return contact.email || 'Unbekannt';
-	}
-
 	function getMatchTypeLabel(type: 'email' | 'phone' | 'name') {
 		switch (type) {
 			case 'email':
diff --git a/apps/contacts/apps/web/src/lib/components/views/ContactAlphabetView.svelte b/apps/contacts/apps/web/src/lib/components/views/ContactAlphabetView.svelte
index 9b27bdfc3..669989b44 100644
--- a/apps/contacts/apps/web/src/lib/components/views/ContactAlphabetView.svelte
+++ b/apps/contacts/apps/web/src/lib/components/views/ContactAlphabetView.svelte
@@ -2,6 +2,7 @@
 	import { Plus, Check, Heart, Phone, Envelope, TextAa, CaretDown } from '@manacore/shared-icons';
 	import { _ } from 'svelte-i18n';
 	import type { Contact } from '$lib/api/contacts';
+	import { getDisplayName, getInitials } from '$lib/utils/contact-display';
 	import type { SortField } from '$lib/components/SortToggle.svelte';
 	import { newContactModalStore } from '$lib/stores/new-contact-modal.svelte';
 	import { contactsFilterStore } from '$lib/stores/filter.svelte';
@@ -61,20 +62,6 @@
 		return letters;
 	});
 
-	function getInitials(contact: Contact) {
-		const first = contact.firstName?.[0] || '';
-		const last = contact.lastName?.[0] || '';
-		return (first + last).toUpperCase() || contact.email?.[0]?.toUpperCase() || '?';
-	}
-
-	function getDisplayName(contact: Contact) {
-		if (contact.displayName) return contact.displayName;
-		if (contact.firstName || contact.lastName) {
-			return [contact.firstName, contact.lastName].filter(Boolean).join(' ');
-		}
-		return contact.email || 'Unbekannt';
-	}
-
 	function getFirstLetter(contact: Contact): string {
 		const name =
 			sortField === 'firstName'
diff --git a/apps/contacts/apps/web/src/lib/components/views/ContactGridView.svelte b/apps/contacts/apps/web/src/lib/components/views/ContactGridView.svelte
index 9cd37bc63..0d704c115 100644
--- a/apps/contacts/apps/web/src/lib/components/views/ContactGridView.svelte
+++ b/apps/contacts/apps/web/src/lib/components/views/ContactGridView.svelte
@@ -2,6 +2,7 @@
 	import { Plus, Check, Heart, Phone, Envelope } from '@manacore/shared-icons';
 	import { _ } from 'svelte-i18n';
 	import type { Contact } from '$lib/api/contacts';
+	import { getDisplayName, getInitials } from '$lib/utils/contact-display';
 	import { newContactModalStore } from '$lib/stores/new-contact-modal.svelte';
 	import { ContextMenu, type ContextMenuItem } from '@manacore/shared-ui';
 
@@ -75,20 +76,6 @@
 		onToggleSelection?.(id);
 	}
 
-	function getInitials(contact: Contact) {
-		const first = contact.firstName?.[0] || '';
-		const last = contact.lastName?.[0] || '';
-		return (first + last).toUpperCase() || contact.email?.[0]?.toUpperCase() || '?';
-	}
-
-	function getDisplayName(contact: Contact) {
-		if (contact.displayName) return contact.displayName;
-		if (contact.firstName || contact.lastName) {
-			return [contact.firstName, contact.lastName].filter(Boolean).join(' ');
-		}
-		return contact.email || 'Unbekannt';
-	}
-
 	// Generate a consistent gradient based on contact name
 	function getGradient(contact: Contact) {
 		const name = getDisplayName(contact);
diff --git a/apps/contacts/apps/web/src/lib/utils/contact-display.ts b/apps/contacts/apps/web/src/lib/utils/contact-display.ts
new file mode 100644
index 000000000..e984a27f7
--- /dev/null
+++ b/apps/contacts/apps/web/src/lib/utils/contact-display.ts
@@ -0,0 +1,26 @@
+import type { Contact } from '$lib/api/contacts';
+
+export const UNKNOWN_CONTACT_NAME = 'Unbekannt';
+
+export function getDisplayName(contact: {
+	displayName?: string | null;
+	firstName?: string | null;
+	lastName?: string | null;
+	email?: string | null;
+}): string {
+	if (contact.displayName) return contact.displayName;
+	if (contact.firstName || contact.lastName) {
+		return [contact.firstName, contact.lastName].filter(Boolean).join(' ');
+	}
+	return contact.email || UNKNOWN_CONTACT_NAME;
+}
+
+export function getInitials(contact: {
+	firstName?: string | null;
+	lastName?: string | null;
+	email?: string | null;
+}): string {
+	const first = contact.firstName?.[0] || '';
+	const last = contact.lastName?.[0] || '';
+	return (first + last).toUpperCase() || contact.email?.[0]?.toUpperCase() || '?';
+}
diff --git a/apps/contacts/apps/web/src/routes/(app)/archive/+page.svelte b/apps/contacts/apps/web/src/routes/(app)/archive/+page.svelte
index 4d5b32e60..7d9a7583c 100644
--- a/apps/contacts/apps/web/src/routes/(app)/archive/+page.svelte
+++ b/apps/contacts/apps/web/src/routes/(app)/archive/+page.svelte
@@ -3,6 +3,7 @@
 	import { goto } from '$app/navigation';
 	import { contactsApi } from '$lib/api/contacts';
 	import type { Contact } from '$lib/api/contacts';
+	import { getDisplayName, getInitials } from '$lib/utils/contact-display';
 	import { ContactListSkeleton } from '$lib/components/skeletons';
 	import '$lib/i18n';
 	import {
@@ -47,20 +48,6 @@
 		}
 	}
 
-	function getDisplayName(contact: Contact) {
-		if (contact.displayName) return contact.displayName;
-		if (contact.firstName || contact.lastName) {
-			return [contact.firstName, contact.lastName].filter(Boolean).join(' ');
-		}
-		return contact.email || 'Unbekannt';
-	}
-
-	function getInitials(contact: Contact) {
-		const first = contact.firstName?.[0] || '';
-		const last = contact.lastName?.[0] || '';
-		return (first + last).toUpperCase() || contact.email?.[0]?.toUpperCase() || '?';
-	}
-
 	function handleContactClick(id: string) {
 		goto(`/contacts/${id}`);
 	}
diff --git a/apps/contacts/apps/web/src/routes/(app)/duplicates/+page.svelte b/apps/contacts/apps/web/src/routes/(app)/duplicates/+page.svelte
index 5a0156182..976ef2e7f 100644
--- a/apps/contacts/apps/web/src/routes/(app)/duplicates/+page.svelte
+++ b/apps/contacts/apps/web/src/routes/(app)/duplicates/+page.svelte
@@ -6,6 +6,7 @@
 	import { DuplicateListSkeleton } from '$lib/components/skeletons';
 	import { toastStore } from '@manacore/shared-ui';
 	import { ArrowsClockwise } from '@manacore/shared-icons';
+	import { getDisplayName, getInitials } from '$lib/utils/contact-display';
 
 	let duplicates = $state<DuplicateGroup[]>([]);
 	let loading = $state(true);
@@ -49,20 +50,6 @@
 		}
 	}
 
-	function getInitials(contact: DuplicateGroup['contacts'][0]) {
-		const first = contact.firstName?.[0] || '';
-		const last = contact.lastName?.[0] || '';
-		return (first + last).toUpperCase() || contact.email?.[0]?.toUpperCase() || '?';
-	}
-
-	function getDisplayName(contact: DuplicateGroup['contacts'][0]) {
-		if (contact.displayName) return contact.displayName;
-		if (contact.firstName || contact.lastName) {
-			return [contact.firstName, contact.lastName].filter(Boolean).join(' ');
-		}
-		return contact.email || 'Unbekannt';
-	}
-
 	function handleOpenMerge(group: DuplicateGroup) {
 		selectedGroup = group;
 		showMergeModal = true;
diff --git a/apps/todo/apps/web/src/lib/components/TaskItem.svelte b/apps/todo/apps/web/src/lib/components/TaskItem.svelte
index 6bb718035..bfc328fbe 100644
--- a/apps/todo/apps/web/src/lib/components/TaskItem.svelte
+++ b/apps/todo/apps/web/src/lib/components/TaskItem.svelte
@@ -9,8 +9,10 @@
 	} from '@todo/shared';
 	import type { ContactReference, ContactOrManual } from '@manacore/shared-types';
 	import { STATUS_OPTIONS, RECURRENCE_OPTIONS } from '@todo/shared';
-	import { isToday, isPast } from 'date-fns';
+	import { format, isToday, isPast } from 'date-fns';
+	import { de } from 'date-fns/locale';
 	import { formatDueDate } from '$lib/utils/date-display';
+	import { getSubtaskProgress } from '$lib/utils/task-helpers';
 	import { getContext } from 'svelte';
 	import type { Project } from '@todo/shared';
 	import { getActiveProjects, getProjectColor } from '$lib/data/task-queries';
@@ -314,11 +316,7 @@
 	});
 
 	// Subtasks progress
-	let subtaskProgress = $derived(() => {
-		if (!task.subtasks || task.subtasks.length === 0) return null;
-		const completed = task.subtasks.filter((s) => s.isCompleted).length;
-		return `${completed}/${task.subtasks.length}`;
-	});
+	let subtaskProgress = $derived(() => getSubtaskProgress(task.subtasks));
 
 	// Long press to expand (mobile)
 	let longPressTimer: ReturnType<typeof setTimeout> | null = null;
diff --git a/apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte b/apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte
index 4be319555..55c8a6dfc 100644
--- a/apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte
+++ b/apps/todo/apps/web/src/lib/components/kanban/KanbanTaskCard.svelte
@@ -2,6 +2,7 @@
 	import type { Task } from '@todo/shared';
 	import { isToday, isPast } from 'date-fns';
 	import { formatDueDate } from '$lib/utils/date-display';
+	import { getSubtaskProgress } from '$lib/utils/task-helpers';
 	import { ConfirmationModal, ContactAvatar } from '@manacore/shared-ui';
 	import TaskEditModal from '../TaskEditModal.svelte';
 	import {
@@ -53,11 +54,7 @@
 	});
 
 	// Subtasks progress
-	let subtaskProgress = $derived(() => {
-		if (!task.subtasks || task.subtasks.length === 0) return null;
-		const completed = task.subtasks.filter((s) => s.isCompleted).length;
-		return `${completed}/${task.subtasks.length}`;
-	});
+	let subtaskProgress = $derived(() => getSubtaskProgress(task.subtasks));
 
 	// Click to open modal
 	function handleCardClick(e: MouseEvent) {
diff --git a/apps/todo/apps/web/src/lib/utils/date-display.ts b/apps/todo/apps/web/src/lib/utils/date-display.ts
index ec9f46539..aba502ad2 100644
--- a/apps/todo/apps/web/src/lib/utils/date-display.ts
+++ b/apps/todo/apps/web/src/lib/utils/date-display.ts
@@ -10,3 +10,20 @@ export function formatDueDate(date: Date): string {
 	if (isTomorrow(date)) return 'Morgen';
 	return format(date, 'dd. MMM', { locale: de });
 }
+
+/**
+ * Format a date string for use in an HTML date input (yyyy-MM-dd).
+ * Returns empty string if no date is provided.
+ */
+export function formatDateForInput(dateString?: string | null): string {
+	if (!dateString) return '';
+	return format(new Date(dateString), 'yyyy-MM-dd');
+}
+
+/**
+ * Convert an HTML date input value (yyyy-MM-dd) to an ISO string.
+ * Returns null if the input is empty.
+ */
+export function dateInputToISO(dateString: string): string | null {
+	return dateString ? new Date(dateString).toISOString() : null;
+}
diff --git a/apps/todo/apps/web/src/lib/utils/task-helpers.ts b/apps/todo/apps/web/src/lib/utils/task-helpers.ts
new file mode 100644
index 000000000..82c60865d
--- /dev/null
+++ b/apps/todo/apps/web/src/lib/utils/task-helpers.ts
@@ -0,0 +1,9 @@
+/**
+ * Calculate subtask progress as a string like "2/5".
+ * Returns null if there are no subtasks.
+ */
+export function getSubtaskProgress(subtasks?: { isCompleted: boolean }[]): string | null {
+	if (!subtasks || subtasks.length === 0) return null;
+	const completed = subtasks.filter((s) => s.isCompleted).length;
+	return `${completed}/${subtasks.length}`;
+}