diff --git a/apps/desktop/src/shared/main/header-listen-button.tsx b/apps/desktop/src/shared/main/header-listen-button.tsx index 726a01ba2b..2d05e56085 100644 --- a/apps/desktop/src/shared/main/header-listen-button.tsx +++ b/apps/desktop/src/shared/main/header-listen-button.tsx @@ -34,7 +34,19 @@ import { useTabs } from "~/store/zustand/tabs"; import { useListener } from "~/stt/contexts"; import { useSTTConnection } from "~/stt/useSTTConnection"; -const LISTEN_BUTTON_WIDTH = "w-[160px]"; +function useIsNarrow(threshold = 720) { + const [isNarrow, setIsNarrow] = useState(() => window.innerWidth < threshold); + + useEffect(() => { + const handleResize = () => { + setIsNarrow(window.innerWidth < threshold); + }; + window.addEventListener("resize", handleResize); + return () => window.removeEventListener("resize", handleResize); + }, [threshold]); + + return isNarrow; +} export function HeaderListenButton() { const visible = useHeaderListenVisible(); @@ -107,9 +119,11 @@ function HeaderListenButtonInner() { muted: state.live.muted, })); const [open, setOpen] = useState(false); + const isNarrow = useIsNarrow(); const isActive = status === "active"; const isFinalizing = status === "finalizing"; const isRecording = isActive || isFinalizing; + const effectivelyDisabled = isFinalizing || (!isRecording && isDisabled); useEffect(() => { const node = containerRef.current; @@ -164,28 +178,16 @@ function HeaderListenButtonInner() { const handleButtonClick = isActive ? stop : handleClick; - const button = ( + const mainButton = ( ); - const chevron = ( - - ); - return (
{warningMessage && !isRecording ? ( - {button} + {mainButton} ) : ( - button + mainButton + )} + {!isRecording && ( + + + )} - {!isRecording && {chevron}}
{!isRecording && ( diff --git a/package.json b/package.json index e612c74563..0577df6922 100644 --- a/package.json +++ b/package.json @@ -23,6 +23,9 @@ "*.{ts,tsx,js,jsx,json,css,md}": "dprint fmt" }, "pnpm": { + "overrides": { + "@codemirror/autocomplete": "6.20.1" + }, "patchedDependencies": { "@tiptap/extension-paragraph@3.20.1": "patches/@tiptap__extension-paragraph@3.20.1.patch" } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ee3aedf690..b09c682233 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -4,6 +4,9 @@ settings: autoInstallPeers: true excludeLinksFromLockfile: false +overrides: + '@codemirror/autocomplete': 6.20.1 + patchedDependencies: '@tiptap/extension-paragraph@3.20.1': hash: a5224547138264350497377569c51d2eeda60aab423e7a8516dd15485021191d @@ -154,8 +157,8 @@ importers: specifier: ^3.0.118 version: 3.0.118(react@19.2.4)(zod@4.3.6) '@codemirror/autocomplete': - specifier: ^6.20.0 - version: 6.20.0 + specifier: 6.20.1 + version: 6.20.1 '@codemirror/lang-jinja': specifier: ^6.0.0 version: 6.0.0 @@ -410,7 +413,7 @@ importers: version: 2.4.1(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@uiw/react-codemirror': specifier: ^4.25.4 - version: 4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + version: 4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) '@wavesurfer/react': specifier: ^1.0.12 version: 1.0.12(react@19.2.4)(wavesurfer.js@7.12.1) @@ -1367,8 +1370,8 @@ importers: packages/tiptap: dependencies: '@codemirror/autocomplete': - specifier: ^6.20.0 - version: 6.20.0 + specifier: 6.20.1 + version: 6.20.1 '@codemirror/lang-jinja': specifier: ^6.0.0 version: 6.0.0 @@ -1458,7 +1461,7 @@ importers: version: 3.20.1(@tiptap/core@3.20.1(@tiptap/pm@3.20.1))(@tiptap/pm@3.20.1) '@uiw/react-codemirror': specifier: ^4.25.4 - version: 4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.2)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) + version: 4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.2)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4) clsx: specifier: ^2.1.1 version: 2.1.1 @@ -2431,9 +2434,6 @@ packages: '@cloudflare/workers-types@4.20260210.0': resolution: {integrity: sha512-zHaF0RZVYUQwNCJCECnNAJdMur72Lk3FMiD6wU78Dx3Bv7DQRcuXNmPNuJmsGnosVZCcWintHlPTQ/4BEiDG5w==} - '@codemirror/autocomplete@6.20.0': - resolution: {integrity: sha512-bOwvTOIJcG5FVo5gUUupiwYh8MioPLQ4UcqbcRf7UQ98X90tCa9E1kZ3Z7tqwpZxYyOvh1YTYbmZE9RTfTp5hg==} - '@codemirror/autocomplete@6.20.1': resolution: {integrity: sha512-1cvg3Vz1dSSToCNlJfRA2WSI4ht3K+WplO0UMOgmUYPivCyy2oueZY6Lx7M9wThm7SDUBViRmuT+OG/i8+ON9A==} @@ -8896,7 +8896,7 @@ packages: '@uiw/codemirror-extensions-basic-setup@4.25.4': resolution: {integrity: sha512-YzNwkm0AbPv1EXhCHYR5v0nqfemG2jEB0Z3Att4rBYqKrlG7AA9Rhjc3IyBaOzsBu18wtrp9/+uhTyu7TXSRng==} peerDependencies: - '@codemirror/autocomplete': '>=6.0.0' + '@codemirror/autocomplete': 6.20.1 '@codemirror/commands': '>=6.0.0' '@codemirror/language': '>=6.0.0' '@codemirror/lint': '>=6.0.0' @@ -18314,13 +18314,6 @@ snapshots: '@cloudflare/workers-types@4.20260210.0': optional: true - '@codemirror/autocomplete@6.20.0': - dependencies: - '@codemirror/language': 6.12.1 - '@codemirror/state': 6.5.4 - '@codemirror/view': 6.39.13 - '@lezer/common': 1.5.1 - '@codemirror/autocomplete@6.20.1': dependencies: '@codemirror/language': 6.12.2 @@ -18337,15 +18330,15 @@ snapshots: '@codemirror/lang-css@6.3.1': dependencies: - '@codemirror/autocomplete': 6.20.0 - '@codemirror/language': 6.12.1 + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.2 '@codemirror/state': 6.5.4 '@lezer/common': 1.5.1 '@lezer/css': 1.3.0 '@codemirror/lang-html@6.4.11': dependencies: - '@codemirror/autocomplete': 6.20.0 + '@codemirror/autocomplete': 6.20.1 '@codemirror/lang-css': 6.3.1 '@codemirror/lang-javascript': 6.2.4 '@codemirror/language': 6.12.1 @@ -18357,11 +18350,11 @@ snapshots: '@codemirror/lang-javascript@6.2.4': dependencies: - '@codemirror/autocomplete': 6.20.0 - '@codemirror/language': 6.12.1 + '@codemirror/autocomplete': 6.20.1 + '@codemirror/language': 6.12.2 '@codemirror/lint': 6.9.3 '@codemirror/state': 6.5.4 - '@codemirror/view': 6.39.13 + '@codemirror/view': 6.39.16 '@lezer/common': 1.5.1 '@lezer/javascript': 1.5.4 @@ -25756,9 +25749,9 @@ snapshots: react: 19.2.4 react-dom: 19.2.4(react@19.2.4) - '@uiw/codemirror-extensions-basic-setup@4.25.4(@codemirror/autocomplete@6.20.0)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13)': + '@uiw/codemirror-extensions-basic-setup@4.25.4(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13)': dependencies: - '@codemirror/autocomplete': 6.20.0 + '@codemirror/autocomplete': 6.20.1 '@codemirror/commands': 6.10.2 '@codemirror/language': 6.12.1 '@codemirror/lint': 6.9.3 @@ -25766,34 +25759,34 @@ snapshots: '@codemirror/state': 6.5.4 '@codemirror/view': 6.39.13 - '@uiw/codemirror-extensions-basic-setup@4.25.4(@codemirror/autocomplete@6.20.0)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.2)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13)': + '@uiw/codemirror-extensions-basic-setup@4.25.4(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13)': dependencies: - '@codemirror/autocomplete': 6.20.0 + '@codemirror/autocomplete': 6.20.1 '@codemirror/commands': 6.10.2 - '@codemirror/language': 6.12.2 - '@codemirror/lint': 6.9.3 + '@codemirror/language': 6.12.1 + '@codemirror/lint': 6.9.5 '@codemirror/search': 6.5.11 '@codemirror/state': 6.5.4 '@codemirror/view': 6.39.13 - '@uiw/codemirror-extensions-basic-setup@4.25.4(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13)': + '@uiw/codemirror-extensions-basic-setup@4.25.4(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.2)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13)': dependencies: '@codemirror/autocomplete': 6.20.1 '@codemirror/commands': 6.10.2 - '@codemirror/language': 6.12.1 - '@codemirror/lint': 6.9.5 + '@codemirror/language': 6.12.2 + '@codemirror/lint': 6.9.3 '@codemirror/search': 6.5.11 '@codemirror/state': 6.5.4 '@codemirror/view': 6.39.13 - '@uiw/react-codemirror@4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + '@uiw/react-codemirror@4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: '@babel/runtime': 7.28.6 '@codemirror/commands': 6.10.2 '@codemirror/state': 6.5.4 '@codemirror/theme-one-dark': 6.1.3 '@codemirror/view': 6.39.13 - '@uiw/codemirror-extensions-basic-setup': 4.25.4(@codemirror/autocomplete@6.20.0)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13) + '@uiw/codemirror-extensions-basic-setup': 4.25.4(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13) codemirror: 6.0.2 react: 19.2.4 react-dom: 19.2.4(react@19.2.4) @@ -25803,14 +25796,14 @@ snapshots: - '@codemirror/lint' - '@codemirror/search' - '@uiw/react-codemirror@4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.0)(@codemirror/language@6.12.2)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + '@uiw/react-codemirror@4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: '@babel/runtime': 7.28.6 '@codemirror/commands': 6.10.2 '@codemirror/state': 6.5.4 '@codemirror/theme-one-dark': 6.1.3 '@codemirror/view': 6.39.13 - '@uiw/codemirror-extensions-basic-setup': 4.25.4(@codemirror/autocomplete@6.20.0)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.2)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13) + '@uiw/codemirror-extensions-basic-setup': 4.25.4(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13) codemirror: 6.0.2 react: 19.2.4 react-dom: 19.2.4(react@19.2.4) @@ -25820,14 +25813,14 @@ snapshots: - '@codemirror/lint' - '@codemirror/search' - '@uiw/react-codemirror@4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': + '@uiw/react-codemirror@4.25.4(@babel/runtime@7.28.6)(@codemirror/autocomplete@6.20.1)(@codemirror/language@6.12.2)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/theme-one-dark@6.1.3)(@codemirror/view@6.39.13)(codemirror@6.0.2)(react-dom@19.2.4(react@19.2.4))(react@19.2.4)': dependencies: '@babel/runtime': 7.28.6 '@codemirror/commands': 6.10.2 '@codemirror/state': 6.5.4 '@codemirror/theme-one-dark': 6.1.3 '@codemirror/view': 6.39.13 - '@uiw/codemirror-extensions-basic-setup': 4.25.4(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.1)(@codemirror/lint@6.9.5)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13) + '@uiw/codemirror-extensions-basic-setup': 4.25.4(@codemirror/autocomplete@6.20.1)(@codemirror/commands@6.10.2)(@codemirror/language@6.12.2)(@codemirror/lint@6.9.3)(@codemirror/search@6.5.11)(@codemirror/state@6.5.4)(@codemirror/view@6.39.13) codemirror: 6.0.2 react: 19.2.4 react-dom: 19.2.4(react@19.2.4)