Skip to content

feat(ui): add cross-navigation between note and session modals#403

Merged
matt2e merged 7 commits intomainfrom
open-chat
Mar 17, 2026
Merged

feat(ui): add cross-navigation between note and session modals#403
matt2e merged 7 commits intomainfrom
open-chat

Conversation

@matt2e
Copy link
Contributor

@matt2e matt2e commented Mar 17, 2026

Add buttons to navigate between related note and session modals:

  • NoteModal shows a "View chat" button when the note has an associated session
  • SessionModal shows a "View note" button when the session has an associated note
  • Clicking either button closes the current modal and opens the linked one
  • Wired up in both BranchCard and ProjectSection views
  • Styled header buttons with bordered text labels matching modal header design
  • Aligned NoteModal header and width layout with SessionModal for consistency

matt2e added 7 commits March 17, 2026 16:46
When viewing a note that has an associated chat session, show a
MessageSquare button in the dialog header that dismisses the note
and opens the corresponding session dialog.

When viewing a chat session that has an associated note, show a
FileText button in the dialog header that dismisses the session
and opens the corresponding note dialog.

Both buttons only appear when the association exists. Wired up in
BranchCard (timeline notes ↔ branch sessions) and ProjectSection
(project notes ↔ project sessions).
Update NoteModal .modal dimensions from 640px/max-width:90vw/max-height:80vh
to 700px/height:80vh/max-height:900px to match SessionModal's layout,
ensuring both dialogs have a consistent size when opened.
Add visible text labels alongside the icons for the cross-navigation
buttons between note and session dialogs:
- NoteModal: MessageSquare icon now shows 'Chat session' label
- SessionModal: FileText icon now shows 'Note' label

Update header-btn styles in both modals with gap, horizontal padding,
and font-size to accommodate the text labels.
Replace icon-only cross-navigation buttons with text-only bordered
buttons in NoteModal ("View chat") and SessionModal ("View note").

- Remove MessageSquare and FileText icon imports
- Add 1px solid border using --border-primary with hover transition
- Use text labels instead of icons for clearer affordance
--border-primary doesn't exist in the theme. Use --border-muted which
is defined in theme.ts and resolves to a visible border color.
NoteModal header was taller than SessionModal due to differences in
padding, font size, and markup structure:

- Reduce header padding from 16px 20px to 12px 16px
- Change title font-size from --size-base to --size-sm
- Replace <h2 class="modal-title"> with <span class="header-title">
  wrapped in <div class="header-content"> to match SessionModal's
  markup structure

Both modal headers now render at the same height.
Move the copy button before the view chat button in the header actions
so the order is now: Copy → View chat → Close.
@matt2e matt2e requested review from baxen and wesbillman as code owners March 17, 2026 06:11
@matt2e matt2e merged commit 8c538a3 into main Mar 17, 2026
4 checks passed
@matt2e matt2e deleted the open-chat branch March 17, 2026 22:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant