diff --git a/apps/client/src/features/dictation/components/mic-button.tsx b/apps/client/src/features/dictation/components/mic-button.tsx index 125c3ddf..9546167f 100644 --- a/apps/client/src/features/dictation/components/mic-button.tsx +++ b/apps/client/src/features/dictation/components/mic-button.tsx @@ -12,6 +12,11 @@ interface MicButtonProps { // Mantine ActionIcon size token; "lg" matches the chat composer, "md" the // editor toolbar. size?: "md" | "lg"; + // Optional Mantine color override for the idle/transcribing states (the + // recording state stays red). Defaults to the theme primary when omitted. + color?: string; + // Optional explicit glyph size override; defaults to the size-token value. + iconSize?: number; } /** @@ -25,10 +30,12 @@ export const MicButton: FC = ({ onStart, disabled, size = "lg", + color, + iconSize, }) => { const { t } = useTranslation(); const { status, start, stop, audioLevel } = useDictation({ onText, onStart }); - const iconSize = size === "lg" ? 18 : 16; + const resolvedIconSize = iconSize ?? (size === "lg" ? 18 : 16); if (status === "recording") { // Live volume-driven halo: the scale follows the current mic level. @@ -49,7 +56,7 @@ export const MicButton: FC = ({ aria-label={t("Stop recording")} style={{ position: "relative", zIndex: 1 }} > - + @@ -62,6 +69,7 @@ export const MicButton: FC = ({ @@ -76,11 +84,12 @@ export const MicButton: FC = ({ void start()} disabled={disabled} aria-label={t("Start dictation")} > - + ); diff --git a/apps/client/src/features/editor/components/fixed-toolbar/groups/dictation-group.tsx b/apps/client/src/features/editor/components/fixed-toolbar/groups/dictation-group.tsx index 8a88f0e3..9f7a6157 100644 --- a/apps/client/src/features/editor/components/fixed-toolbar/groups/dictation-group.tsx +++ b/apps/client/src/features/editor/components/fixed-toolbar/groups/dictation-group.tsx @@ -4,9 +4,11 @@ import { MicButton } from "@/features/dictation/components/mic-button"; interface Props { editor: Editor; + color?: string; + iconSize?: number; } -export const DictationGroup: FC = ({ editor }) => { +export const DictationGroup: FC = ({ editor, color, iconSize }) => { const rangeRef = useRef<{ from: number; to: number } | null>(null); const handleStart = () => { @@ -56,6 +58,8 @@ export const DictationGroup: FC = ({ editor }) => { onStart={handleStart} onText={handleText} disabled={!editor.isEditable} + color={color} + iconSize={iconSize} /> ); }; diff --git a/apps/client/src/features/editor/full-editor.tsx b/apps/client/src/features/editor/full-editor.tsx index ba95aba6..e9dcff4b 100644 --- a/apps/client/src/features/editor/full-editor.tsx +++ b/apps/client/src/features/editor/full-editor.tsx @@ -222,19 +222,23 @@ function PageByline({ )} - - - - - - {/* Shown only in edit mode when workspace dictation is enabled, so - dictation stays reachable even when the fixed toolbar is hidden. */} - {showDictation && editor && } + + + + + + + {/* Shown only in edit mode when workspace dictation is enabled, so + dictation stays reachable even when the fixed toolbar is hidden. */} + {showDictation && editor && ( + + )} + ); }