Tips modal update

[duckduckhero]

No description provided.

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds a TranscriptSubHeader to the editor area when the transcript tab is active, updates the sub-header component to a simplified version that conditionally shows an Audio File button based on recording state, and revises the tips modal slide to describe tab switching with a new GIF.

Changes

Cohort / File(s)	Summary
Editor area integration apps/desktop/src/components/editor-area/index.tsx	Imports TranscriptSubHeader and renders it only when activeTab === "transcript". Wraps it in a click-stopping container with elevated z-index. Minor formatting around tips modal logic.
Transcript sub-header simplification apps/desktop/src/components/editor-area/note-header/sub-headers/transcript-sub-header.tsx	Component props drop editorRef; now only sessionId. Uses useOngoingSession to determine if current session is recording; shows an "Audio File" action only when audio exists and not recording. Removes search/editorRef logic and prior chips/actions. Public API change to TranscriptSubHeaderProps.
Tips modal content update apps/desktop/src/components/tips-modal/index.tsx	Updates slide 2 title/description to mention tabs and transcript/speaker editing. Replaces GIF from transcript-edit.gif to tab-switching.gif in static data and rendering.

Sequence Diagram(s)

sequenceDiagram
  autonumber
  actor U as User
  participant EA as EditorArea
  participant TSH as TranscriptSubHeader
  participant S as useOngoingSession
  participant UI as UI: Audio Button

  U->>EA: Open note / switch to Transcript tab
  EA->>EA: Check activeTab === "transcript"
  EA-->>TSH: Render TranscriptSubHeader(sessionId)
  TSH->>S: Query recording status for sessionId
  S-->>TSH: isRecording (true/false)
  alt Not recording and audio exists
    TSH-->>UI: Show "Audio File" button
  else Recording or no audio
    TSH-->>UI: Hide button
  end
  note over EA,TSH: Wrapper stops click propagation to editor

Loading

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• Lilnemo instruction modal (tips)  #1493 — Introduces TipsModal and its integration into the editor area; overlaps with current changes that update tips-modal content and render TranscriptSubHeader in the editor.

Pre-merge checks and finishing touches

❌ Failed checks (2 warnings)

Check name	Status	Explanation	Resolution
Description Check	⚠️ Warning	The pull request description is empty and does not provide any information about the changes made, leaving reviewers without context to understand the updates.	Please add a descriptive summary that outlines the purpose of the pull request and highlights the key changes introduced.
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run @coderabbitai generate docstrings to improve docstring coverage.

✅ Passed checks (1 passed)

Check name	Status	Explanation
Title Check	✅ Passed	The title “Tips modal update” accurately reflects the changes made to the tips modal but omits the new TranscriptSubHeader logic and editor integration introduced in this pull request, making it only partially representative of the overall changeset.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch tips-modal-update

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

apps/desktop/src/components/tips-modal/index.tsx (1)

138-139: Consider updating the alt text to match the new GIF.

The alt text still references "Transcript editing demonstration" while the GIF now shows tab switching. Consider updating it to something like "Tab switching and transcript editing demonstration" for better accessibility.

                  <img
                    src="/assets/tab-switching.gif"
-                    alt="Transcript editing demonstration"
+                    alt="Tab switching and transcript editing demonstration"
                    className="w-full max-w-lg h-64 object-cover rounded-md"
                    style={{ objectPosition: "center top" }}
                  />

📜 Review details

Configuration used: Path: .coderabbit.yaml

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 6b6166d and 0824584.

⛔ Files ignored due to path filters (1)

• apps/desktop/public/assets/tab-switching.gif is excluded by !**/*.gif

📒 Files selected for processing (3)

• apps/desktop/src/components/editor-area/index.tsx (3 hunks)
• apps/desktop/src/components/editor-area/note-header/sub-headers/transcript-sub-header.tsx (2 hunks)
• apps/desktop/src/components/tips-modal/index.tsx (2 hunks)

🧰 Additional context used

📓 Path-based instructions (1)

**/*.{js,ts,tsx,rs}

⚙️ CodeRabbit configuration file

**/*.{js,ts,tsx,rs}: 1. Do not add any error handling. Keep the existing one.
2. No unused imports, variables, or functions.
3. For comments, keep it minimal. It should be about "Why", not "What".

Files:

• apps/desktop/src/components/tips-modal/index.tsx
• apps/desktop/src/components/editor-area/index.tsx
• apps/desktop/src/components/editor-area/note-header/sub-headers/transcript-sub-header.tsx

🧬 Code graph analysis (2)

apps/desktop/src/components/editor-area/index.tsx (1)

apps/desktop/src/components/editor-area/note-header/sub-headers/transcript-sub-header.tsx (1)

• TranscriptSubHeader (13-51)

apps/desktop/src/components/editor-area/note-header/sub-headers/transcript-sub-header.tsx (2)

packages/utils/src/contexts/ongoing-session.tsx (1)

• useOngoingSession (32-46)

packages/ui/src/components/ui/button.tsx (1)

• Button (37-89)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)

• GitHub Check: ci (windows, windows-latest)
• GitHub Check: ci (macos, macos-14)

🔇 Additional comments (6)

apps/desktop/src/components/editor-area/index.tsx (2)

33-33: LGTM!

The import is properly used in the conditional rendering block below.

---

367-377: LGTM!

The conditional rendering and event handling follow the same pattern as the EnhancedNoteSubHeader above. The stopPropagation wrapper correctly prevents editor interactions when clicking the sub-header overlay.

apps/desktop/src/components/tips-modal/index.tsx (1)

15-17: LGTM!

The updated tip content clearly describes the tab switching and transcript editing features, aligning well with the UI changes in this PR.

apps/desktop/src/components/editor-area/note-header/sub-headers/transcript-sub-header.tsx (3)

7-11: LGTM!

The props interface is correctly simplified to remove editorRef, and the useOngoingSession import is properly used.

---

13-18: LGTM!

The recording state logic correctly identifies when the current session is actively recording, which appropriately gates the Audio File button visibility.

---

32-50: LGTM!

The simplified UI correctly implements the conditional rendering logic. The Audio File button appropriately appears only when audio exists and the session is not currently recording.