+{/if}
+
+
diff --git a/apps/mana/apps/web/src/lib/modules/dreams/recorder.svelte.ts b/apps/mana/apps/web/src/lib/components/voice/recorder.svelte.ts
similarity index 78%
rename from apps/mana/apps/web/src/lib/modules/dreams/recorder.svelte.ts
rename to apps/mana/apps/web/src/lib/components/voice/recorder.svelte.ts
index e2fd6f35f..824123cd1 100644
--- a/apps/mana/apps/web/src/lib/modules/dreams/recorder.svelte.ts
+++ b/apps/mana/apps/web/src/lib/components/voice/recorder.svelte.ts
@@ -1,8 +1,29 @@
/**
- * Browser audio recorder for the Dreams voice-capture feature.
+ * Shared browser audio recorder for all voice-capture features.
*
- * Uses MediaRecorder under the hood. Exposes a small reactive state object
- * that components can read to render the mic button state and elapsed time.
+ * Originally lived as `dreams/recorder.svelte.ts` and
+ * `memoro/recorder.svelte.ts` — two literal copies that diverged only
+ * by the class name and a few comments. Extracted to one shared
+ * singleton + state machine so:
+ *
+ * - New voice-capture features (e.g. notes voice memos, todo voice
+ * quick-add, chat voice messages) just import this and drop a
+ * `` into their UI without copy-pasting 200 LOC
+ * of MediaRecorder boilerplate.
+ * - There is exactly ONE recording at a time across the whole app,
+ * which matches the physical reality (one mic, one MediaStream).
+ * The state machine enforces it explicitly instead of relying on
+ * `getUserMedia()` to fail at the second simultaneous call.
+ * - Bug fixes (sticky-deny detection, error message wording, secure
+ * context check, …) live in one place. The 2026-04-08 mic-button
+ * investigation surfaced three orthogonal issues
+ * (Permissions-Policy header, mount-time notification request,
+ * dev SW caching) — all of which would have had to be debugged
+ * twice with the old per-module recorders.
+ *
+ * Use it via `` in `$lib/components/voice/`. Direct
+ * use is also supported for advanced cases (analysers, custom UI),
+ * but most call sites only need the bar.
*/
export type RecorderStatus = 'idle' | 'requesting' | 'recording' | 'stopping';
@@ -13,7 +34,7 @@ export interface RecordingResult {
mimeType: string;
}
-class DreamRecorder {
+class VoiceRecorder {
status = $state('idle');
error = $state(null);
elapsedMs = $state(0);
@@ -41,7 +62,7 @@ class DreamRecorder {
async start(options: { force?: boolean } = {}): Promise {
if (this.status !== 'idle') return;
- // 1. Secure context check — getUserMedia is silently unavailable
+ // Secure context check — getUserMedia is silently unavailable
// over plain http (except localhost), with no permission prompt.
if (!this.isSecureContext) {
const host = typeof window !== 'undefined' ? window.location.host : '';
@@ -49,17 +70,17 @@ class DreamRecorder {
return;
}
- // 2. Browser API present?
if (!this.isAvailable) {
this.error = 'Audio-Aufnahme wird in diesem Browser nicht unterstützt.';
return;
}
- // 3. Sticky deny check — Permissions API tells us if the browser
+ // Sticky deny check — Permissions API tells us if the browser
// will silently reject getUserMedia without showing a prompt.
- // On macOS this is most often a SYSTEM-level block, not a per-site
- // setting, which is why no lock icon helps. Skip the check if the
- // caller explicitly forces a retry to surface the real error.
+ // On macOS this is most often a SYSTEM-level block, not a
+ // per-site setting, which is why no lock icon helps. Skip the
+ // check if the caller explicitly forces a retry to surface the
+ // real error.
if (!options.force) {
const stickyDenied = await this.#checkStickyDeny();
if (stickyDenied) {
@@ -186,7 +207,6 @@ class DreamRecorder {
async #checkStickyDeny(): Promise {
try {
- // Permissions API may not be available everywhere; treat as unknown.
const perms = (
navigator as Navigator & {
permissions?: {
@@ -244,7 +264,14 @@ function pickSupportedMimeType(): string | null {
return null;
}
-export const dreamRecorder = new DreamRecorder();
+/**
+ * Single shared recorder. The browser physically only allows one
+ * active recording at a time anyway (one mic, one MediaStream); the
+ * singleton makes that constraint explicit and visible to UI code so
+ * a second module can render its mic button as disabled while another
+ * module is still recording.
+ */
+export const voiceRecorder = new VoiceRecorder();
export function formatElapsed(ms: number): string {
const totalSec = Math.floor(ms / 1000);
diff --git a/apps/mana/apps/web/src/lib/modules/dreams/ListView.svelte b/apps/mana/apps/web/src/lib/modules/dreams/ListView.svelte
index 1895166eb..8285b6ad6 100644
--- a/apps/mana/apps/web/src/lib/modules/dreams/ListView.svelte
+++ b/apps/mana/apps/web/src/lib/modules/dreams/ListView.svelte
@@ -11,10 +11,9 @@
useAllDreams,
} from './queries';
import { dreamsStore } from './stores/dreams.svelte';
- import { dreamRecorder, formatElapsed } from './recorder.svelte';
+ import VoiceCaptureBar from '$lib/components/voice/VoiceCaptureBar.svelte';
import { MOOD_COLORS, MOOD_LABELS, type Dream, type DreamMood, type SleepQuality } from './types';
import type { ViewProps } from '$lib/app-registry';
- import { requireAuth } from '$lib/auth/require-auth.svelte';
import { ContextMenu, type ContextMenuItem } from '@mana/shared-ui';
import { PencilSimple, PushPin, Trash } from '@mana/shared-icons';
import SymbolsView from './views/SymbolsView.svelte';
@@ -182,56 +181,14 @@
const MOODS: DreamMood[] = ['angenehm', 'neutral', 'unangenehm', 'albtraum'];
// ── Voice capture ─────────────────────────────────────────
- let recError = $state(null);
-
- async function handleMicClick() {
- recError = null;
- if (dreamRecorder.status === 'recording') {
- try {
- const result = await dreamRecorder.stop();
- if (result.durationMs < 500) {
- recError = 'Aufnahme war zu kurz.';
- return;
- }
- const dream = await dreamsStore.createFromVoice(result.blob, result.durationMs, 'de');
- // Open the dream so the user sees the transcript appear inline
- viewMode = 'list';
- startEdit(dream);
- } catch (e) {
- const msg = e instanceof Error ? e.message : String(e);
- if (msg !== 'cancelled') recError = msg;
- }
- } else if (dreamRecorder.status === 'idle') {
- // Voice recording writes to the encrypted `dreams` table — without
- // an account the vault is locked and the very last step (the
- // dexie write) would throw VaultLockedError after the user has
- // already invested time recording and waiting for transcription.
- // Gate the entry point so guests see a friendly login prompt
- // BEFORE the mic permission request.
- const ok = await requireAuth({
- feature: 'dreams-voice-capture',
- reason:
- 'Sprach-Aufnahmen werden verschlüsselt in deinem persönlichen Tagebuch gespeichert. Dafür brauchst du ein Mana-Konto.',
- });
- if (!ok) return;
-
- await dreamRecorder.start();
- if (dreamRecorder.error) {
- recError = dreamRecorder.error;
- }
- }
- }
-
- async function forceRetryMic() {
- recError = null;
- await dreamRecorder.start({ force: true });
- if (dreamRecorder.error) {
- recError = dreamRecorder.error;
- }
- }
-
- function cancelRecording() {
- dreamRecorder.cancel();
+ // All MediaRecorder + auth gating + error handling lives in
+ // in $lib/components/voice/. This module just
+ // passes the host-specific bits via props and a callback.
+ async function handleVoiceComplete(blob: Blob, durationMs: number) {
+ const dream = await dreamsStore.createFromVoice(blob, durationMs, 'de');
+ // Open the dream so the user sees the transcript appear inline
+ viewMode = 'list';
+ startEdit(dream);
}
@@ -259,39 +216,12 @@
/>
{:else}
-