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/navigation/PillDropdown.svelte

@@ -148,7 +148,11 @@
 
 	{#if open}
 		<!-- Backdrop -->
-		<button class="menu-backdrop" onclick={close} onkeydown={(e) => e.key === 'Escape' && close()}
+		<button
+			class="menu-backdrop"
+			onclick={close}
+			onkeydown={(e) => e.key === 'Escape' && close()}
+			aria-label="Close dropdown"
 		></button>
 
 		<!-- Dropdown items -->

packages/shared-ui/src/navigation/PillNavigation.svelte

@@ -467,7 +467,8 @@
 						{:else if item.iconSvg}
 							{@html item.iconSvg}
 						{:else if phosphorIcons[item.icon]}
-							<svelte:component this={phosphorIcons[item.icon]} size={18} class="pill-icon" />
+							{@const IconComponent = phosphorIcons[item.icon]}
+							<IconComponent size={18} class="pill-icon" />
 						{:else}
 							<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 								<path
@@ -500,7 +501,8 @@
 					<a href={element.href} class="pill glass-pill" class:active={isActive(element.href)}>
 						{#if element.icon}
 							{#if phosphorIcons[element.icon]}
-								<svelte:component this={phosphorIcons[element.icon]} size={18} class="pill-icon" />
+								{@const IconComponent = phosphorIcons[element.icon]}
+								<IconComponent size={18} class="pill-icon" />
 							{:else}
 								<svg class="pill-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
 									<path
@@ -1206,9 +1208,7 @@
 		min-height: 1rem;
 	}
 
-	.sidebar-container .toggle-pill {
-		margin-top: auto;
-	}
+	/* Note: .toggle-pill class may be applied dynamically */
 
 	/* Segmented control */
 	.segmented-control {