Skip to content

feat(desktop): add right-click context menu to rename sessions in sidebar#6841

Closed
tfsq wants to merge 1 commit intoblock:mainfrom
tfsq:feature/session-context-menu-rename
Closed

feat(desktop): add right-click context menu to rename sessions in sidebar#6841
tfsq wants to merge 1 commit intoblock:mainfrom
tfsq:feature/session-context-menu-rename

Conversation

@tfsq
Copy link
Contributor

@tfsq tfsq commented Jan 30, 2026

Summary

Adds right-click context menu to session items in the sidebar for quick renaming.

Changes

  • Add onContextMenu handler to session items in AppSidebar.tsx
  • Add RenameModal component for inline editing
  • Wire to existing updateSessionName API
  • Dispatch SESSION_RENAMED event to sync with other components
  • Toast notification on success/failure

Motivation

Current rename flow requires: Sidebar → View All → hover → pencil icon. This is buried. Right-click rename is standard UX in chat apps (Slack, Discord, iMessage).

Closes #6754

…ebar

- Add onContextMenu handler to session items in sidebar
- Add RenameModal component for editing session names
- Wire rename to existing updateSessionName API
- Dispatch SESSION_RENAMED event to sync with other components
- Show toast notification on success/failure

Closes block#6754
@zanesq
Copy link
Collaborator

zanesq commented Jan 30, 2026

@tfsq really appreciate it! I think we can reuse our existing code for the rename and save on some of the added code here was some feedback from goose, do you mind taking a look?

## PR #6841 Analysis: Right-Click Context Menu for Session Rename

### Summary
- **+190 lines / -3 lines** in `AppSidebar.tsx`
- Adds right-click context menu to rename sessions in the sidebar

### Issues with the Current Approach

The PR introduces a lot of **duplicated code** that already exists elsewhere in the codebase:

1. **`RenameModal` is nearly identical to `EditSessionModal`** in `SessionListView.tsx` (lines 52-130)
   - Same structure, same logic, same styling
   - Only difference is the title text ("Rename Session" vs "Edit Session Description")

2. **Custom context menu implementation** instead of using existing Radix UI components
   - The codebase already has `DropdownMenu` components (`ui/dropdown-menu.tsx`) built on Radix UI
   - Radix also provides `@radix-ui/react-context-menu` (available via the `radix-ui` package in node_modules)
   - The PR manually handles click-outside, escape key, positioning - all of which Radix handles automatically

3. **Duplicate event handling logic** for `SESSION_RENAMED` event dispatch

### Recommendations to Simplify

Here's how to reduce this PR from ~190 lines to ~40-50 lines:

#### Option 1: Reuse Existing Modal (Recommended)

1. Extract EditSessionModal from SessionListView.tsx to a shared component
   e.g., ui/desktop/src/components/ui/EditSessionModal.tsx

2. In AppSidebar.tsx, just import and use it:
   import { EditSessionModal } from '../ui/EditSessionModal';

3. Use DropdownMenu with onContextMenu trigger instead of custom context menu

#### Option 2: Use Radix ContextMenu

Use the existing Radix primitives - create a simple context-menu.tsx wrapper
similar to how dropdown-menu.tsx wraps @radix-ui/react-dropdown-menu

import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
// ... wrap with consistent styling

### Specific Code to Remove/Refactor

1. **Remove the entire `RenameModal` component** (~60 lines) - reuse `EditSessionModal`

2. **Remove custom context menu rendering** (~30 lines) - use Radix ContextMenu or DropdownMenu

3. **Remove manual event listeners** for click-outside and escape (~20 lines) - Radix handles this

4. **Consolidate `handleRenameSave`** - the logic is identical to `handleModalSave` in SessionListView

### Suggested Minimal Implementation

In AppSidebar.tsx - only ~30-40 new lines needed:

import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '../ui/dropdown-menu';
import { EditSessionModal } from '../ui/EditSessionModal'; // extracted shared component

// Add state
const [renameSession, setRenameSession] = useState<Session | null>(null);

// In SessionList, wrap each session button with DropdownMenu using onContextMenu
<DropdownMenu>
  <DropdownMenuTrigger asChild onContextMenu={(e) => { e.preventDefault(); /* trigger open */ }}>
    <button>...</button>
  </DropdownMenuTrigger>
  <DropdownMenuContent>
    <DropdownMenuItem onClick={() => setRenameSession(session)}>
      <Edit2 className="w-4 h-4 mr-2" /> Rename
    </DropdownMenuItem>
  </DropdownMenuContent>
</DropdownMenu>

// Reuse the modal
<EditSessionModal
  session={renameSession}
  isOpen={!!renameSession}
  onClose={() => setRenameSession(null)}
  onSave={handleRenameSave}
/>

@zanesq
Copy link
Collaborator

zanesq commented Feb 6, 2026

closing in favor of #6995 for now, we may consider this later if we decide the inline option isn't working well

@zanesq zanesq closed this Feb 6, 2026
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.

[Desktop] Update "Edit Session Description" modal title to "Edit Session Name"

2 participants