chore: various UI improvements and fixes

Calendar:
- Fix EventDetailModal and QuickEventOverlay component updates
- Update TodoDetailModal and TodoItem components
- Remove unused settings section code
- Fix network page styling

Todo Backend:
- Improve task service validation

Shared UI:
- Update Card, DataCard, Input components with improvements
- Enhance TagBadge with better color handling
- Fix TagEditModal and TagList components
- Update PillNavigation and PillDropdown styling
- Add NetworkGraph improvements
- Update CommandBar, FormModal, AppsPage components
- Fix chart types and GlobalSettingsSection

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

packages/shared-ui/src/molecules/DataCard.svelte

@@ -80,6 +80,7 @@
 	const isClickable = $derived(interactive || !!onclick);
 </script>
 
+<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 <div
 	class="data-card rounded-xl p-4 transition-colors {variantClasses[variant]} {isClickable
 		? 'cursor-pointer hover:bg-menu-hover'
@@ -153,6 +154,7 @@
 	.line-clamp-2 {
 		display: -webkit-box;
 		-webkit-line-clamp: 2;
+		line-clamp: 2;
 		-webkit-box-orient: vertical;
 		overflow: hidden;
 	}

packages/shared-ui/src/molecules/Input.svelte

@@ -5,6 +5,7 @@
 		value: string;
 		oninput?: (value: string) => void;
 		onchange?: (value: string) => void;
+		onkeydown?: (e: KeyboardEvent) => void;
 		label?: string;
 		placeholder?: string;
 		type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
@@ -21,6 +22,7 @@
 		value = $bindable(),
 		oninput,
 		onchange,
+		onkeydown,
 		label,
 		placeholder,
 		type = 'text',
@@ -66,6 +68,7 @@
 		autocomplete={autocomplete as HTMLInputAttributes['autocomplete']}
 		oninput={handleInput}
 		onchange={handleChange}
+		{onkeydown}
 		class="w-full rounded-lg border px-4 py-2.5 text-theme bg-content transition-colors focus:outline-none focus:ring-2 focus:ring-primary/50 disabled:opacity-50 disabled:cursor-not-allowed {error
 			? 'border-red-500 focus:ring-red-500/50'
 			: 'border-theme'}"

packages/shared-ui/src/molecules/tags/TagBadge.svelte

@@ -10,7 +10,7 @@
 		/** Alternative name field (for compatibility) */
 		text?: string;
 		/** Tag color (hex) */
-		color?: string;
+		color?: string | null;
 		/** Nested style object with color */
 		style?: { color?: string };
 	}
@@ -55,36 +55,64 @@
 	}
 </script>
 
-<span
-	class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-all"
-	class:cursor-pointer={clickable}
-	class:hover:scale-105={clickable}
-	style="background-color: {tagColor}20; color: {tagColor}"
-	onclick={handleClick}
-	onkeydown={handleKeyDown}
-	role={clickable ? 'button' : undefined}
-	tabindex={clickable ? 0 : undefined}
->
-	<!-- Color indicator dot -->
-	<div class="h-2 w-2 rounded-full" style="background-color: {tagColor}"></div>
+{#if clickable}
+	<span
+		class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium transition-all cursor-pointer hover:scale-105"
+		style="background-color: {tagColor}20; color: {tagColor}"
+		onclick={handleClick}
+		onkeydown={handleKeyDown}
+		role="button"
+		tabindex="0"
+	>
+		<!-- Color indicator dot -->
+		<div class="h-2 w-2 rounded-full" style="background-color: {tagColor}"></div>
 
-	<span>{tagName}</span>
+		<span>{tagName}</span>
 
-	{#if removable}
-		<button
-			onclick={handleRemove}
-			class="ml-1 rounded-full hover:bg-black/10 p-0.5 transition-colors"
-			type="button"
-			aria-label="Remove tag"
-		>
-			<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-				<path
-					stroke-linecap="round"
-					stroke-linejoin="round"
-					stroke-width="2"
-					d="M6 18L18 6M6 6l12 12"
-				/>
-			</svg>
-		</button>
-	{/if}
-</span>
+		{#if removable}
+			<button
+				onclick={handleRemove}
+				class="ml-1 rounded-full hover:bg-black/10 p-0.5 transition-colors"
+				type="button"
+				aria-label="Remove tag"
+			>
+				<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		{/if}
+	</span>
+{:else}
+	<span
+		class="inline-flex items-center gap-1.5 rounded-full px-3 py-1 text-sm font-medium"
+		style="background-color: {tagColor}20; color: {tagColor}"
+	>
+		<!-- Color indicator dot -->
+		<div class="h-2 w-2 rounded-full" style="background-color: {tagColor}"></div>
+
+		<span>{tagName}</span>
+
+		{#if removable}
+			<button
+				onclick={handleRemove}
+				class="ml-1 rounded-full hover:bg-black/10 p-0.5 transition-colors"
+				type="button"
+				aria-label="Remove tag"
+			>
+				<svg class="h-3 w-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+					<path
+						stroke-linecap="round"
+						stroke-linejoin="round"
+						stroke-width="2"
+						d="M6 18L18 6M6 6l12 12"
+					/>
+				</svg>
+			</button>
+		{/if}
+	</span>
+{/if}

packages/shared-ui/src/molecules/tags/TagEditModal.svelte

@@ -79,22 +79,22 @@
 	<div class="space-y-6">
 		<!-- Name Input -->
 		<div>
-			<Input bind:value={name} placeholder={namePlaceholder} onkeydown={handleKeyDown} autofocus />
+			<Input bind:value={name} placeholder={namePlaceholder} onkeydown={handleKeyDown} />
 		</div>
 
 		<!-- Color Picker -->
 		<div>
-			<label class="block text-sm font-medium text-muted-foreground mb-3">
+			<span class="block text-sm font-medium text-muted-foreground mb-3">
 				{colorLabel}
-			</label>
+			</span>
 			<TagColorPicker selectedColor={color} onColorChange={(c) => (color = c)} />
 		</div>
 
 		<!-- Preview -->
 		<div>
-			<label class="block text-sm font-medium text-muted-foreground mb-3">
+			<span class="block text-sm font-medium text-muted-foreground mb-3">
 				{previewLabel}
-			</label>
+			</span>
 			<div class="flex items-center gap-2">
 				<TagBadge tag={previewTag} />
 			</div>

packages/shared-ui/src/molecules/tags/TagList.svelte

@@ -83,6 +83,7 @@
 	<div class={layout === 'grid' ? gridClasses : listClasses}>
 		{#each tags as tag (tag.id)}
 			{@const color = getTagColor(tag)}
+			<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 			<div
 				class="
 					group relative flex items-center gap-3 p-4

packages/shared-ui/src/molecules/tags/constants.ts

@@ -32,7 +32,7 @@ export interface Tag {
 export interface TagData {
 	name?: string;
 	text?: string;
-	color?: string;
+	color?: string | null;
 	style?: { color?: string };
 }