From 9bfc20b8d5dca9387e9c7af49b76f2c9cc5cc6c6 Mon Sep 17 00:00:00 2001
From: Till-JS <101404291+Till-JS@users.noreply.github.com>
Date: Fri, 13 Feb 2026 23:29:56 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=A8=20refactor(shared-ui):=20improve?=
 =?UTF-8?q?=20LoginPage=20and=20InputBar=20components?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../shared-auth-ui/src/pages/LoginPage.svelte | 15 +++++++++++----
 .../src/navigation/PillNavigation.svelte      |  7 +++++++
 .../shared-ui/src/quick-input/InputBar.svelte | 19 +++++++++++++++++++
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/packages/shared-auth-ui/src/pages/LoginPage.svelte b/packages/shared-auth-ui/src/pages/LoginPage.svelte
index ef4bb1963..f144334ff 100644
--- a/packages/shared-auth-ui/src/pages/LoginPage.svelte
+++ b/packages/shared-auth-ui/src/pages/LoginPage.svelte
@@ -119,11 +119,18 @@
 
 	const t = $derived({ ...defaultTranslations, ...translations });
 
+	// Check if we're in development mode (early for state init)
+	const isDevMode = typeof import.meta !== 'undefined' && import.meta.env?.DEV;
+	// Local dev credentials (run `pnpm db:seed:dev` in mana-core-auth to create this user)
+	const DEV_EMAIL = 'dev@manacore.local';
+	const DEV_PASSWORD = 'devpassword123';
+
 	let loading = $state(false);
 	let error = $state<string | null>(null);
 	let errorField = $state<'email' | 'password' | 'general' | null>(null);
-	let email = $state(initialEmail);
-	let password = $state(initialPassword);
+	// In dev mode, pre-fill with test credentials
+	let email = $state(initialEmail || (isDevMode ? DEV_EMAIL : ''));
+	let password = $state(initialPassword || (isDevMode ? DEV_PASSWORD : ''));
 	let showPassword = $state(false);
 	let rememberMe = $state(false);
 	let showSuccess = $state(false);
@@ -278,8 +285,8 @@
 	}
 
 	function fillDevCredentials() {
-		email = 't@t.de';
-		password = 'testtesttest';
+		email = DEV_EMAIL;
+		password = DEV_PASSWORD;
 	}
 </script>
 
diff --git a/packages/shared-ui/src/navigation/PillNavigation.svelte b/packages/shared-ui/src/navigation/PillNavigation.svelte
index 99e2068a4..d3be41770 100644
--- a/packages/shared-ui/src/navigation/PillNavigation.svelte
+++ b/packages/shared-ui/src/navigation/PillNavigation.svelte
@@ -57,6 +57,8 @@
 		User,
 		Scales,
 		Robot,
+		Key,
+		Shield,
 	} from '@manacore/shared-icons';
 
 	// Map icon names to Phosphor components
@@ -109,6 +111,8 @@
 		building: Buildings,
 		scale: Scales,
 		robot: Robot,
+		key: Key,
+		shield: Shield,
 	};
 
 	// Convert app items to dropdown items (will be computed as derived)
@@ -476,6 +480,9 @@
 			'M18 8a3 3 0 100-6 3 3 0 000 6zM6 15a3 3 0 100-6 3 3 0 000 6zM18 22a3 3 0 100-6 3 3 0 000 6zM8.59 13.51l6.83 3.98M15.41 6.51l-6.82 3.98',
 		filter:
 			'M3 4a1 1 0 011-1h16a1 1 0 011 1v2.586a1 1 0 01-.293.707l-6.414 6.414a1 1 0 00-.293.707V17l-4 4v-6.586a1 1 0 00-.293-.707L3.293 7.293A1 1 0 013 6.586V4z',
+		key: 'M15 7a2 2 0 012 2m4 0a6 6 0 01-7.743 5.743L11 17H9v2H7v2H4a1 1 0 01-1-1v-2.586a1 1 0 01.293-.707l5.964-5.964A6 6 0 1121 9z',
+		shield:
+			'M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
 	};
 
 	function getIconPath(name: string): string {
diff --git a/packages/shared-ui/src/quick-input/InputBar.svelte b/packages/shared-ui/src/quick-input/InputBar.svelte
index 941533a88..236d2555c 100644
--- a/packages/shared-ui/src/quick-input/InputBar.svelte
+++ b/packages/shared-ui/src/quick-input/InputBar.svelte
@@ -54,6 +54,8 @@
 		label: string;
 	}
 
+	import type { Snippet } from 'svelte';
+
 	interface Props {
 		onSearch: (query: string) => Promise<QuickInputItem[]>;
 		onSelect: (item: QuickInputItem) => void;
@@ -85,6 +87,8 @@
 		onShowShortcuts?: () => void;
 		/** Callback to show syntax help */
 		onShowSyntaxHelp?: () => void;
+		/** Snippet for left action button (e.g., voice input) - rendered inside the input bar on the left */
+		leftAction?: Snippet;
 	}
 
 	let {
@@ -108,6 +112,7 @@
 		onDefaultChange,
 		onShowShortcuts,
 		onShowSyntaxHelp,
+		leftAction,
 	}: Props = $props();
 
 	// Use settings for autoFocus
@@ -423,6 +428,13 @@
 	<!-- Input Bar (always visible) -->
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
 	<div class="input-container" oncontextmenu={handleContextMenu}>
+		<!-- Left action slot (e.g., voice input button) -->
+		{#if leftAction}
+			<div class="left-action">
+				{@render leftAction()}
+			</div>
+		{/if}
+
 		<div class="app-icon">
 			<svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
 				{#if appIcon === 'check-square' || appIcon === 'todo'}
@@ -576,6 +588,13 @@
 			0 0 0 2px hsl(var(--color-primary) / 0.25);
 	}
 
+	.left-action {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		flex-shrink: 0;
+	}
+
 	.app-icon {
 		width: 1.25rem;
 		height: 1.25rem;