refactor: use $effect for audio permission coordination

Move audio permission request from MIDI store to layout using Svelte 5's $effect rune. This decouples the stores and handles cross-cutting concerns at the coordination layer, following Svelte 5 best practices.

Author: DavidMenting

src/lib/stores/midi.svelte.ts

@@ -2,7 +2,6 @@
 
 import { getCurrentFirmwareVersion } from '$lib/config/firmware';
 import { createLogger, isMidiRealtimeMessage, isMidiSystemMessage } from '$lib/utils/logger';
-import { requestPermission as requestAudioPermission } from '$lib/stores/audioInput.svelte';
 
 interface MidiState {
     access: MIDIAccess | null;
@@ -302,12 +301,6 @@ function connectDevice(deviceId: string) {
             }
             _setDeviceConnected(output, input || null);
             logger.info('Connected to MIDI device: ' + output.name);
-
-            // Request audio recording permission proactively after device connection
-            // This improves UX by not interrupting the user during recording
-            requestAudioPermission().catch((error) => {
-                logger.warn('Failed to request audio permission: ' + (error instanceof Error ? error.message : String(error)));
-            });
         } else {
             _setDeviceConnectionError('Selected device not found.');
             logger.error('Device not found: ' + deviceId);

src/routes/+layout.svelte

@@ -2,17 +2,32 @@
 	import '../app.css';
 	import { locale } from 'svelte-i18n';
 	import { isDraggingOverWindow } from '$lib/stores/dragDropStore';
-	import { initialize as initializeAudioInput } from '$lib/stores/audioInput.svelte';
+	import { midiState } from '$lib/stores/midi.svelte';
+	import { initialize as initializeAudioInput, requestPermission } from '$lib/stores/audioInput.svelte';
 	import { onMount } from 'svelte';
+	import { createLogger } from '$lib/utils/logger';
 	import Footer from '$lib/components/Footer.svelte';
 
+	const logger = createLogger('Layout');
+
 	let { children } = $props();
 
 	// Initialize audio input store on mount
 	onMount(() => {
 		initializeAudioInput();
 	});
 
+	// Request audio permission when MIDI device connects
+	// This improves UX by avoiding interruption during recording
+	$effect(() => {
+		if (midiState.isConnected) {
+			logger.info('MIDI device connected, requesting audio permission...');
+			requestPermission().catch((error) => {
+				logger.warn('Failed to request audio permission: ' + (error instanceof Error ? error.message : String(error)));
+			});
+		}
+	});
+
 	const locales = [
 		{ code: 'en', name: 'English' },
 		{ code: 'de', name: 'Deutsch' },