UI changes 20251018 #1576

yujonglee · 2025-10-18T06:02:06Z

No description provided.

Implement custom key handling to prevent default browser shortcuts like Cmd/Ctrl+W, Cmd/Ctrl+N, and Cmd/Ctrl+T from interfering with the editor's functionality. This ensures a more consistent editing experience by blocking these common browser navigation shortcuts.

Implement new hotkeys for creating and closing tabs with mod+n and mod+t. Add middle-click tab closing and update tab styling for better usability. Enhance hotkey behavior to work with form and content editable elements.

coderabbitai · 2025-10-18T06:02:25Z

Caution

Review failed

The pull request is closed.

📝 Walkthrough

Walkthrough

This PR introduces new UI components and features for session management, timeline visualization, and metadata display. Changes include adding a new InnerHeader tabbed editor component, TimelineView for sidebar timeline display with bucketing, SessionMetadata component consolidating event and participant data, and a hotkey system for tab creation. UI components are updated with Button replacements, new MeetingMetadataChip for meeting details, and layout restructuring in session headers and sidebar. A LinkedIn icon component is added, and notification handler is expanded to include additional app identifiers.

Changes

Cohort / File(s)	Summary
Session Editor Structure `apps/desktop2/src/components/main/body/sessions/inner-header.tsx`	New React component rendering tabbed header with Optional tabs for Enhanced, Memos, and Transcript, managing editor state and visibility changes via Zustand store updates.
Session Input and Layout Refactoring `apps/desktop2/src/components/main/body/sessions/index.tsx`, `apps/desktop2/src/components/main/body/sessions/note-input/index.tsx`, `apps/desktop2/src/components/main/body/sessions/note-input/raw.tsx`	Layout restructuring: OuterHeader repositioning, input components grouped with new container div; Header component refactored from bordered to flex-based layout; text color and decoration classes updated for raw editor.
Session Outer Header Consolidation `apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx`, `apps/desktop2/src/components/main/body/sessions/outer-header/metadata.tsx`, `apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx`, `apps/desktop2/src/components/main/body/sessions/outer-header/other.tsx`, `apps/desktop2/src/components/main/body/sessions/outer-header/share.tsx`	SessionMetadata new component aggregating event and participant data with search-enabled participant management; folder header refactored to breadcrumb-based structure with dropdown folder selection; OthersButton expanded to full dropdown menu with multiple actions; ShareButton wrapped with Button component.
Tab Management and Hotkeys `apps/desktop2/src/components/main/body/shared.tsx`, `apps/desktop2/src/components/main/body/index.tsx`, `apps/desktop2/src/components/interactive-button.tsx`	Middle-click handling for tab closure; close button replaced with Button and X icon; layout class adjustments; `onMouseDown` prop added to InteractiveButton; new `useNewTabHotkeys` hook listening for mod+n and mod+t to create new session tabs.
Timeline Feature `apps/desktop2/src/components/main/sidebar/timeline.tsx`, `apps/desktop2/src/components/main/sidebar/timeline/index.tsx`	New comprehensive TimelineView component rendering timeline buckets with data wiring via useTimelineData and useTimelineScroll; includes TodayBucket, CurrentTimeIndicator, time formatting, and session management integration; DOM structure adjusted in TimelineView Button.
Sidebar Navigation `apps/desktop2/src/components/main/sidebar/index.tsx`	PanelLeftCloseIcon element replaced with Button wrapper; click handler moved to Button component; icon size adjusted.
Editor Key Handling `packages/tiptap/src/editor/index.tsx`	Added client-side key suppression for Cmd/Ctrl+W/N/T via editorProps handleKeyDown and component-wide keydown listener to prevent navigation/close actions within editor.
UI Component Additions and Updates `packages/ui/src/components/block/meeting-metadata-chip.tsx`, `packages/ui/src/components/block/event-chip.tsx`, `packages/ui/src/components/block/participants-chip.tsx`, `packages/ui/src/components/ui/button.tsx`, `packages/ui/src/components/icons/linkedin.tsx`	New MeetingMetadataChip component with popover, participant management, and date formatting helpers; EventChip styling updated (gap and color classes); ParticipantsChip color token migrations and LinkedInIcon import replacement; Button component updated with Spinner import and gap reduction.
Package Configuration `packages/utils/package.json`	Removed "scripts" section containing test script.
Notification Handler `plugins/notification/src/handler.rs`	Expanded mic-detection ignore list to include additional app identifiers: com.openai.chat, com.anthropic.claudefordesktop, com.raycast.macos, com.apple.VoiceMemos, com.exafunction.windsurf, dev.zed.Zed, com.microsoft.VSCode, com.todesktop.230313mzl4w4u92.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Desktop as Desktop App
    participant Hotkey as Hotkey Handler
    participant Store as Zustand Store
    participant Tab as Tab Manager

    User->>Desktop: Press Mod+N/Mod+T
    Desktop->>Hotkey: Trigger useNewTabHotkeys
    Hotkey->>Store: Create session with generated ID
    Hotkey->>Store: Store session metadata
    alt Close current tab if appropriate
        Hotkey->>Tab: Conditionally close current tab
    end
    Hotkey->>Tab: Open new tab with editor: "raw"
    Tab->>User: Display new session tab

sequenceDiagram
    participant SessionMeta as SessionMetadata Component
    participant Store as TinyBase Store
    participant Query as Query Engine
    participant UI as MeetingMetadataChip

    SessionMeta->>Store: Fetch session/event/participant data
    SessionMeta->>Query: Build participant search query
    alt Search enabled (store, indexes, query exist)
        Query->>Store: Filter humans by name/email
        Query->>UI: Provide search results
    end
    SessionMeta->>UI: Render MeetingMetadataChip with callbacks
    UI->>SessionMeta: onJoinMeeting (window.open)
    UI->>SessionMeta: onParticipantAdd (create mapping)
    UI->>SessionMeta: onParticipantRemove (delete mapping)

sequenceDiagram
    participant Timeline as TimelineView
    participant Data as useTimelineData Hook
    participant Scroll as useTimelineScroll Hook
    participant Render as Rendering Engine
    participant UI as Timeline UI

    Timeline->>Data: Build timeline buckets
    Data->>Render: Organize events into Today/Other buckets
    Timeline->>Scroll: Monitor scroll position
    Scroll->>Timeline: Emit scroll indicators & visibility state
    alt Today visible
        Scroll->>UI: Show/hide CurrentTimeIndicator
        Scroll->>UI: Show "Go back to now" control
    end
    Timeline->>UI: Render bucket headers & items
    UI->>Timeline: Handle item click/context menu
    Timeline->>Data: Create/lookup session & open tab

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~45 minutes

The changes span multiple component layers with heterogeneous modifications: new complex components (SessionMetadata with store queries, TimelineView with data aggregation and scroll handling, MeetingMetadataChip with participant management), significant UI refactoring across session headers and sidebar, new hotkey logic, and store integration. While many individual changes are straightforward UI/styling updates, the cumulative effect across interconnected session management, timeline rendering, and tab handling requires careful verification of data flow, state management, and integration points.

Possibly related PRs

Metadata UI refactor #1550 — Modifies outer-header components and introduces SessionMetadata consolidation, directly overlapping with metadata.tsx and folder.tsx changes.
proper left-sidebar timeline rendering for new bundle #1568 — Modifies TimelineView implementation in sidebar/timeline.tsx with bucketing and data wiring logic, same file as this PR's timeline feature.
Regenerate button 1011 #1554 — Restructures session layout in sessions/index.tsx with input grouping and FloatingActionButton adjustments, overlapping layout changes in this PR.

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

Create PR with unit tests
Post copyable unit tests in a comment
Commit unit tests in branch jj-branch-20

📜 Recent 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 869f7c5 and f8e424e.

⛔ Files ignored due to path filters (1)

pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml

📒 Files selected for processing (23)

apps/desktop2/src/components/interactive-button.tsx (4 hunks)
apps/desktop2/src/components/main/body/index.tsx (7 hunks)
apps/desktop2/src/components/main/body/sessions/index.tsx (1 hunks)
apps/desktop2/src/components/main/body/sessions/inner-header.tsx (1 hunks)
apps/desktop2/src/components/main/body/sessions/note-input/index.tsx (1 hunks)
apps/desktop2/src/components/main/body/sessions/note-input/raw.tsx (1 hunks)
apps/desktop2/src/components/main/body/sessions/outer-header/folder.tsx (4 hunks)
apps/desktop2/src/components/main/body/sessions/outer-header/index.tsx (2 hunks)
apps/desktop2/src/components/main/body/sessions/outer-header/metadata.tsx (1 hunks)
apps/desktop2/src/components/main/body/sessions/outer-header/other.tsx (1 hunks)
apps/desktop2/src/components/main/body/sessions/outer-header/share.tsx (1 hunks)
apps/desktop2/src/components/main/body/shared.tsx (3 hunks)
apps/desktop2/src/components/main/sidebar/index.tsx (2 hunks)
apps/desktop2/src/components/main/sidebar/timeline.tsx (1 hunks)
apps/desktop2/src/components/main/sidebar/timeline/index.tsx (1 hunks)
packages/tiptap/src/editor/index.tsx (2 hunks)
packages/ui/src/components/block/event-chip.tsx (6 hunks)
packages/ui/src/components/block/meeting-metadata-chip.tsx (1 hunks)
packages/ui/src/components/block/participants-chip.tsx (10 hunks)
packages/ui/src/components/icons/linkedin.tsx (1 hunks)
packages/ui/src/components/ui/button.tsx (3 hunks)
packages/utils/package.json (0 hunks)
plugins/notification/src/handler.rs (1 hunks)

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

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

ComputelessComputer and others added 24 commits October 17, 2025 21:18

outer header

514214e

rolled back bg color

1d51ce2

editor area

5c45be6

layout fix

8bc695b

feat(tabs): add new tab hotkeys and improve tab interactions

db56e3a

Implement new hotkeys for creating and closing tabs with mod+n and mod+t. Add middle-click tab closing and update tab styling for better usability. Enhance hotkey behavior to work with form and content editable elements.

draggable

6acf19c

placeholder color

3da3622

others button dropdown

3b9d316

change to icon button

6016568

layout & ui

39ab5f5

change to breadcrumb

9b17e4d

change colors

c2873bb

go back to now button

734ee05

added more bundles to ignore

d68832b

reduce gap

00d10c3

change to spinner for loading

863c1e1

change linkedin icon

300a71a

metadata chip proto

dbecf12

apply

a22affb

yaml

ac360c5

remove icon

0dcc9be

Merge remote-tracking branch 'origin/main' into jj-branch-20

f2d837a

fix test

f8e424e

yujonglee closed this Oct 18, 2025

yujonglee deleted the jj-branch-20 branch October 18, 2025 06:03

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

UI changes 20251018 #1576

UI changes 20251018 #1576

Uh oh!

yujonglee commented Oct 18, 2025

Uh oh!

coderabbitai bot commented Oct 18, 2025 •

edited

Loading

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

UI changes 20251018 #1576

UI changes 20251018 #1576

Uh oh!

Conversation

yujonglee commented Oct 18, 2025

Uh oh!

coderabbitai bot commented Oct 18, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review failed

Walkthrough

Changes

Sequence Diagram(s)

Estimated code review effort

Possibly related PRs

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

coderabbitai bot commented Oct 18, 2025 •

edited

Loading