refactor(manalink): improve chat layout with message grouping, hover actions, and command palette

- Group consecutive messages from same sender with tighter spacing and connected bubble corners
- Highlight error messages with red tint for better visibility
- Move action buttons (reply, emoji, forward) above message bubble, only on hover
- Replace sidebar search and permanent bottom QuickInputBar with Cmd+K command palette
- Move "Neuer Chat" button from sidebar bottom into compact header button

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

apps/matrix/apps/web/src/lib/components/chat/Message.svelte

@@ -50,6 +50,15 @@
 		message.body.startsWith('Unable to decrypt:') || message.body.includes('** Unable to decrypt')
 	);
 
+	// Check if message contains an error/failure
+	let isErrorMessage = $derived(
+		!isDecryptionError &&
+			(message.body.toLowerCase().includes('fehler') ||
+				message.body.toLowerCase().includes('error') ||
+				message.body.toLowerCase().includes('failed') ||
+				message.body.toLowerCase().includes('fehlgeschlagen'))
+	);
+
 	let showActions = $state(false);
 	let showEmojiPicker = $state(false);
 	let imageLoading = $state(true);
@@ -245,6 +254,25 @@
 			.toUpperCase()
 	);
 
+	// Dynamic bubble rounding based on grouping position
+	let bubbleRounding = $derived(() => {
+		if (message.isOwn) {
+			// Own messages: flat on right side for grouping
+			if (isSameSender && !showTimestamp && !isLastInGroup)
+				return 'rounded-2xl rounded-tr-md rounded-br-md';
+			if (isSameSender && !showTimestamp) return 'rounded-2xl rounded-tr-md';
+			if (!isLastInGroup) return 'rounded-2xl rounded-br-md';
+			return 'rounded-2xl rounded-tr-md';
+		} else {
+			// Other messages: flat on left side for grouping
+			if (isSameSender && !showTimestamp && !isLastInGroup)
+				return 'rounded-2xl rounded-tl-md rounded-bl-md';
+			if (isSameSender && !showTimestamp) return 'rounded-2xl rounded-tl-md';
+			if (!isLastInGroup) return 'rounded-2xl rounded-bl-md';
+			return 'rounded-2xl rounded-tl-md';
+		}
+	});
+
 	// Get media URL for display
 	let mediaUrl = $derived(
 		message.media?.mxcUrl ? matrixStore.getMediaUrl(message.media.mxcUrl) : null
@@ -285,7 +313,9 @@
 
 <!-- Message -->
 <div
-	class="group flex gap-3 mb-4 animate-fade-in {message.isOwn ? 'flex-row-reverse' : 'flex-row'}"
+	class="group flex gap-3 animate-fade-in {message.isOwn ? 'flex-row-reverse' : 'flex-row'}
+		   {isSameSender && !showTimestamp ? 'mt-0.5' : 'mt-4'}
+		   {isLastInGroup ? 'mb-1' : 'mb-0'}"
 	class:opacity-50={message.redacted}
 	role="article"
 	onmouseenter={() => (showActions = true)}
@@ -328,10 +358,12 @@
 
 		<!-- Message Bubble -->
 		<div
-			class="relative px-4 py-3 shadow-md
-				   {message.isOwn
-				? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white rounded-2xl rounded-tr-md'
-				: 'bg-surface text-foreground border border-border rounded-2xl rounded-tl-md'}"
+			class="relative px-4 py-3 shadow-md {bubbleRounding()}
+				   {isErrorMessage && !message.isOwn
+				? 'bg-red-500/10 text-foreground border border-red-500/30'
+				: message.isOwn
+					? 'bg-gradient-to-br from-blue-500 to-indigo-600 text-white'
+					: 'bg-surface text-foreground border border-border'}"
 		>
 			{#if message.redacted}
 				<p class="italic text-white/70">Nachricht wurde gelöscht</p>
@@ -574,9 +606,9 @@
 		<!-- Message actions (hover/tap) -->
 		{#if showActions && !message.redacted}
 			<div
-				class="absolute flex items-center gap-1 rounded-xl glass p-1.5 shadow-lg z-20
-				       {message.isOwn ? 'right-0 lg:-left-28 lg:right-auto' : 'left-0 lg:-right-28 lg:left-auto'}
-				       top-full mt-1 lg:top-0 lg:mt-0"
+				class="absolute flex items-center gap-0.5 rounded-lg glass px-1 py-0.5 shadow-lg z-20
+				       {message.isOwn ? 'right-0' : 'left-0'}
+				       bottom-full mb-1"
 			>
 				<!-- Emoji reaction button -->
 				<div class="relative">

apps/matrix/apps/web/src/lib/components/chat/RoomList.svelte

@@ -1,22 +1,15 @@
 <script lang="ts">
 	import { matrixStore } from '$lib/matrix';
 	import RoomItem from './RoomItem.svelte';
-	import {
-		MagnifyingGlass,
-		Plus,
-		Users,
-		ChatCircle,
-		Envelope,
-		Check,
-		X,
-	} from '@manacore/shared-icons';
+	import { Plus, Users, ChatCircle, Envelope, Check, X } from '@manacore/shared-icons';
 
 	interface Props {
 		onCreateRoom?: () => void;
 		onSelectRoom?: (roomId: string) => void;
+		search?: string;
 	}
 
-	let { onCreateRoom, onSelectRoom }: Props = $props();
+	let { onCreateRoom, onSelectRoom, search = '' }: Props = $props();
 
 	function handleSelectRoom(roomId: string) {
 		if (onSelectRoom) {
@@ -26,8 +19,6 @@
 		}
 	}
 
-	let search = $state('');
-
 	let filteredDirectRooms = $derived(
 		matrixStore.directRooms.filter((room) => room.name.toLowerCase().includes(search.toLowerCase()))
 	);
@@ -52,26 +43,31 @@
 </script>
 
 <div class="flex h-full flex-col">
-	<!-- Search -->
-	<div class="p-3">
-		<div class="relative">
-			<MagnifyingGlass
-				size={16}
-				class="absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground"
-			/>
-			<input
-				type="text"
-				bind:value={search}
-				placeholder="Chats durchsuchen..."
-				class="w-full rounded-xl bg-surface border border-border px-4 py-2.5 pl-10
-				       text-sm font-medium text-foreground focus:ring-2 focus:ring-primary focus:outline-none
-				       placeholder:text-muted-foreground shadow-sm"
-			/>
-		</div>
-	</div>
-
 	<!-- Room List with Sections -->
 	<div class="chat-scrollbar flex-1 overflow-y-auto px-3">
+		<!-- New Chat action row -->
+		<div class="flex items-center justify-between px-2 py-2 mb-1">
+			<span
+				class="text-xs font-semibold uppercase text-muted-foreground tracking-wide flex items-center gap-2"
+			>
+				<Users class="h-3.5 w-3.5" />
+				Räume
+				<span class="px-1.5 py-0.5 rounded-full bg-muted text-[10px]">
+					{matrixStore.directRooms.length + matrixStore.groupRooms.length}
+				</span>
+			</span>
+			<button
+				class="flex items-center gap-1.5 px-2.5 py-1.5 rounded-lg text-xs font-medium
+				       bg-gradient-to-r from-violet-500 to-purple-600 text-white
+				       shadow-sm hover:shadow-md hover:-translate-y-px transition-all duration-200"
+				onclick={onCreateRoom}
+				title="Neuer Chat"
+			>
+				<Plus class="h-3.5 w-3.5" />
+				Neu
+			</button>
+		</div>
+
 		<!-- Invites Section -->
 		{#if filteredInvites.length > 0}
 			<div class="mb-4">
@@ -163,7 +159,7 @@
 					class="flex items-center gap-2 px-2 py-2 text-xs font-semibold uppercase text-muted-foreground"
 				>
 					<Users class="h-3.5 w-3.5" />
-					Räume
+					Gruppen
 					<span class="px-1.5 py-0.5 rounded-full bg-muted text-[10px]">
 						{matrixStore.groupRooms.length}
 					</span>
@@ -181,22 +177,8 @@
 		<!-- No search results -->
 		{#if search && filteredDirectRooms.length === 0 && filteredGroupRooms.length === 0 && filteredInvites.length === 0 && (matrixStore.directRooms.length > 0 || matrixStore.groupRooms.length > 0 || matrixStore.invitedRooms.length > 0)}
 			<div class="flex flex-col items-center justify-center p-8 text-muted-foreground">
-				<MagnifyingGlass class="mb-2 h-8 w-8 opacity-50" />
 				<p class="text-sm">Keine Ergebnisse für "{search}"</p>
 			</div>
 		{/if}
 	</div>
-
-	<!-- New Room Button -->
-	<div class="border-t border-border p-3 pb-4 lg:pb-20">
-		<button
-			class="w-full flex items-center justify-center gap-2 px-4 py-2.5 rounded-xl
-			       bg-gradient-to-r from-violet-500 to-purple-600 text-white font-medium
-			       shadow-md hover:shadow-lg hover:-translate-y-0.5 transition-all duration-200"
-			onclick={onCreateRoom}
-		>
-			<Plus class="h-4 w-4" />
-			Neuer Chat
-		</button>
-	</div>
 </div>

apps/matrix/apps/web/src/lib/components/chat/Timeline.svelte

@@ -137,7 +137,7 @@
 		{/if}
 
 		<!-- Messages -->
-		<div class="space-y-0">
+		<div>
 			{#each matrixStore.messages as message, index (message.id)}
 				{@const prevMessage = matrixStore.messages[index - 1]}
 				{@const nextMessage = matrixStore.messages[index + 1]}

apps/matrix/apps/web/src/routes/(app)/+layout.svelte

@@ -20,8 +20,9 @@
 	} from '@manacore/shared-theme';
 	import type { ThemeVariant } from '@manacore/shared-theme';
 	import { isNavCollapsed as collapsedStore } from '$lib/stores/navigation.svelte';
-	import { PillNavigation, QuickInputBar } from '@manacore/shared-ui';
+	import { PillNavigation } from '@manacore/shared-ui';
 	import type { PillNavItem, PillDropdownItem, QuickInputItem } from '@manacore/shared-ui';
+	import { MagnifyingGlass, X } from '@manacore/shared-icons';
 	import { getPillAppItems } from '@manacore/shared-branding';
 	import { getLanguageDropdownItems, getCurrentLanguageLabel } from '@manacore/shared-i18n';
 	import { setLocale, supportedLocales } from '$lib/i18n';
@@ -126,6 +127,17 @@
 	const navRoutes = navItems.map((item) => item.href);
 
 	function handleKeydown(event: KeyboardEvent) {
+		// Cmd/Ctrl+K opens command palette from anywhere
+		if ((event.ctrlKey || event.metaKey) && event.key === 'k') {
+			event.preventDefault();
+			if (showCommandPalette) {
+				closeCommandPalette();
+			} else {
+				openCommandPalette();
+			}
+			return;
+		}
+
 		const target = event.target as HTMLElement;
 		if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable) {
 			return;
@@ -164,20 +176,71 @@
 		goto('/login');
 	}
 
-	// QuickInputBar handlers
-	async function handleInputSearch(query: string): Promise<QuickInputItem[]> {
-		const q = query.toLowerCase();
-		const rooms = matrixStore.rooms.filter((r) => r.name?.toLowerCase().includes(q));
-		return rooms.slice(0, 10).map((room) => ({
-			id: room.roomId,
-			title: room.name || room.roomId,
-			subtitle: room.isDirect ? 'Direktnachricht' : 'Gruppe',
-		}));
+	// Command Palette state
+	let showCommandPalette = $state(false);
+	let commandQuery = $state('');
+	let commandResults = $state<QuickInputItem[]>([]);
+	let commandSelectedIndex = $state(0);
+	let commandInputEl = $state<HTMLInputElement | null>(null);
+
+	function openCommandPalette() {
+		showCommandPalette = true;
+		commandQuery = '';
+		commandResults = [];
+		commandSelectedIndex = 0;
+		// Focus after render
+		setTimeout(() => commandInputEl?.focus(), 50);
 	}
 
-	function handleInputSelect(item: QuickInputItem) {
+	function closeCommandPalette() {
+		showCommandPalette = false;
+		commandQuery = '';
+		commandResults = [];
+	}
+
+	function handleCommandSearch() {
+		const q = commandQuery.toLowerCase().trim();
+		if (!q) {
+			commandResults = [];
+			return;
+		}
+		commandResults = matrixStore.rooms
+			.filter((r) => r.name?.toLowerCase().includes(q))
+			.slice(0, 10)
+			.map((room) => ({
+				id: room.roomId,
+				title: room.name || room.roomId,
+				subtitle: room.isDirect ? 'Direktnachricht' : 'Gruppe',
+			}));
+		commandSelectedIndex = 0;
+	}
+
+	function handleCommandSelect(item: QuickInputItem) {
 		matrixStore.selectRoom(item.id);
 		goto('/chat');
+		closeCommandPalette();
+	}
+
+	function handleCommandKeydown(event: KeyboardEvent) {
+		if (event.key === 'Escape') {
+			event.preventDefault();
+			closeCommandPalette();
+			return;
+		}
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			commandSelectedIndex = Math.min(commandSelectedIndex + 1, commandResults.length - 1);
+			return;
+		}
+		if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			commandSelectedIndex = Math.max(commandSelectedIndex - 1, 0);
+			return;
+		}
+		if (event.key === 'Enter' && commandResults.length > 0) {
+			event.preventDefault();
+			handleCommandSelect(commandResults[commandSelectedIndex]);
+		}
 	}
 
 	onMount(async () => {
@@ -348,23 +411,88 @@
 			allAppsHref="https://mana.how"
 		/>
 
-		<!-- Quick Input Bar -->
-		<QuickInputBar
-			onSearch={handleInputSearch}
-			onSelect={handleInputSelect}
-			placeholder="Raum oder Kontakt suchen..."
-			emptyText="Keine Räume gefunden"
-			searchingText="Suche..."
-			locale={$locale || 'de'}
-			appIcon="search"
-			bottomOffset="70px"
-		/>
-
 		<!-- Main Content -->
 		<main class="main-content bg-background">
 			{@render children()}
 		</main>
 
+		<!-- Command Palette (Cmd+K) -->
+		{#if showCommandPalette}
+			<!-- Backdrop -->
+			<button
+				class="fixed inset-0 z-[200] bg-black/50 backdrop-blur-sm"
+				onclick={closeCommandPalette}
+				aria-label="Schließen"
+			></button>
+			<!-- Dialog -->
+			<div class="fixed inset-0 z-[201] flex items-start justify-center pt-[20vh] px-4">
+				<div
+					class="w-full max-w-lg rounded-2xl bg-surface-elevated border border-border shadow-2xl overflow-hidden animate-fade-in"
+				>
+					<!-- Search Input -->
+					<div class="flex items-center gap-3 px-4 py-3 border-b border-border">
+						<MagnifyingGlass class="h-5 w-5 text-muted-foreground flex-shrink-0" />
+						<input
+							bind:this={commandInputEl}
+							type="text"
+							bind:value={commandQuery}
+							oninput={handleCommandSearch}
+							onkeydown={handleCommandKeydown}
+							placeholder="Raum oder Kontakt suchen..."
+							class="flex-1 bg-transparent text-foreground text-sm placeholder:text-muted-foreground outline-none"
+						/>
+						<kbd
+							class="hidden sm:inline-flex items-center gap-1 px-2 py-0.5 rounded-md bg-muted text-muted-foreground text-xs font-mono"
+						>
+							ESC
+						</kbd>
+					</div>
+					<!-- Results -->
+					{#if commandQuery.trim()}
+						<div class="max-h-80 overflow-y-auto p-2">
+							{#if commandResults.length === 0}
+								<p class="px-3 py-6 text-center text-sm text-muted-foreground">
+									Keine Räume gefunden
+								</p>
+							{:else}
+								{#each commandResults as item, index (item.id)}
+									<button
+										class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-left transition-colors
+											   {index === commandSelectedIndex
+											? 'bg-primary/10 text-foreground'
+											: 'text-foreground hover:bg-surface-hover'}"
+										onclick={() => handleCommandSelect(item)}
+										onmouseenter={() => (commandSelectedIndex = index)}
+									>
+										<div
+											class="w-8 h-8 rounded-full flex items-center justify-center flex-shrink-0 bg-gradient-to-br from-violet-500 to-purple-600 text-white text-xs font-semibold"
+										>
+											{item.title
+												.split(' ')
+												.map((w) => w[0])
+												.join('')
+												.substring(0, 2)
+												.toUpperCase()}
+										</div>
+										<div class="min-w-0 flex-1">
+											<p class="text-sm font-medium truncate">{item.title}</p>
+											{#if item.subtitle}
+												<p class="text-xs text-muted-foreground">{item.subtitle}</p>
+											{/if}
+										</div>
+									</button>
+								{/each}
+							{/if}
+						</div>
+					{:else}
+						<div class="px-4 py-6 text-center text-sm text-muted-foreground">
+							Tippe um Räume und Kontakte zu finden
+						</div>
+					{/if}
+				</div>
+			</div>
+		{/if}
+
 		<!-- Spacer for PillNavigation -->
 		<div class="pill-nav-spacer"></div>
 	</div>

apps/matrix/apps/web/src/routes/(app)/chat/+page.svelte

@@ -46,11 +46,6 @@
 
 		// Keyboard shortcuts
 		window.addEventListener('keydown', (e) => {
-			// Cmd/Ctrl + K = Search
-			if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
-				e.preventDefault();
-				showSearch = true;
-			}
 			// Cmd/Ctrl + N = New chat
 			if ((e.metaKey || e.ctrlKey) && e.key === 'n' && !e.shiftKey) {
 				e.preventDefault();