Fix UI break when user rejects mic permission

[jaykim1213]

Does this PR close any open issues?

Closes #1171

Give a longer description of what this PR addresses and why it's needed

• Fix the UI break when the user rejects mic permission
• Make the mic icon disabled when the user rejects permission
• Fix library-mic-check and library-screen-recording config.json files
• Fix the library-calvi question description, which had the wrong description
• Add screen recording icon to timeline as well

Provide pictures/videos of the behavior before and after these changes (optional)

Fix the UI break when the user rejects mic permission
Before

After

Add screen recording icon to timeline as well

Are there any additional TODOs before this PR is ready to go?

TODOs:

• Update relevant documentation
• ...

[github-actions]

A preview of 503a9c7 is uploaded and can be seen here:

✨ https://revisit.dev/study/PR1196 ✨

Changes may take a few minutes to propagate.

[Copilot]

Pull request overview

This PR addresses UI instability when microphone permission is denied by introducing explicit audio-recording error state and updating header rendering to avoid showing the live waveform in error scenarios. It also corrects several library/example configs so recording flags are set on the right components, and fixes a CALVI library description typo.

Changes:

• Add audioRecordingError state to the recording hook and surface it via context.
• Update AppHeader to suppress “Recording audio” UI and show a disabled mic indicator with an error tooltip when mic access fails.
• Fix library/example config.json flags (recordScreen / recordAudio) and correct the CALVI question description.

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
src/store/hooks/useRecording.ts	Adds audioRecordingError and sets it on getUserMedia failure.
src/components/interface/AppHeader.tsx	Uses audioRecordingError to hide waveform/text and show a mic-error indicator.
public/library-screen-recording/config.json	Updates the example study UI config (removes recordScreen).
public/libraries/screen-recording/config.json	Sets recordScreen: true on the permission component and normalizes JSON formatting.
public/libraries/mic-check/config.json	Enables recordAudio: true for mic-check component.
public/libraries/calvi/config.json	Fixes the N1 component description text.

Comments suppressed due to low confidence (1)

src/store/hooks/useRecording.ts:298

• In startAudioRecording, setIsAudioRecording(true) is executed unconditionally (and before getUserMedia() resolves). If the user denies permission, audioMediaRecorder.current stays null but isAudioRecording remains true, which can leak the “audio recording” UI into later non-audio components and can still briefly mount RecordingAudioWaveform before audioRecordingError is set (reintroducing the header layout break). Consider setting isAudioRecording to true only after the stream/recorder is successfully created, and setting it back to false in the .catch(); if you still need to render a disabled mic icon globally, separate “micUnavailable”/permission state from “isAudioRecording” and clear/set audioRecordingError at the start of each attempt.

      recorder.start();
      setAudioRecordingError(null);
    }).catch((err) => {
      console.error('Error accessing microphone:', err);
      setAudioRecordingError('Microphone permission denied or not supported.');
    });

    setIsAudioRecording(true);
  }, [storageEngine, isMuted]);

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Pull request overview

Copilot reviewed 7 out of 7 changed files in this pull request and generated 1 comment.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.