feat: tab shortcutkey can be disabled

[zerob13]

Summary by CodeRabbit

• New Features

  • Added keyboard shortcuts to quickly switch to numbered tabs (1-8).
  • New shortcut setting allows users to enable or disable numbered tab navigation.

• Improvements

  • Enhanced shortcuts settings UI with better conflict detection and validation.
  • Improved behavior when clearing and recording custom shortcuts.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[chatgpt-codex-connector]

You have reached your Codex usage limits for code reviews. You can see your limits in the Codex usage dashboard.

[coderabbitai]

📝 Walkthrough

Walkthrough

This PR introduces a new NumberTabs shortcut feature that allows users to switch to numbered tabs (1-8) with a configurable keyboard shortcut. The change spans configuration definition, presenter-level registration logic, and UI components for shortcut recording and conflict detection.

Changes

Cohort / File(s)	Summary
Configuration & Constants src/main/presenter/configPresenter/shortcutKeySettings.ts	Added NumberTabs property to the rendererShortcutKey object with default value ${CommandKey}+1...8, establishing the new shortcut key definition.
Presenter Logic src/main/presenter/shortcutPresenter.ts	Wrapped number-tab shortcut registration (1-8) in a conditional check for this.shortcutKeys.NumberTabs to enable/disable registration based on configuration state.
UI & Recording Logic src/renderer/settings/components/ShortcutSettings.vue	Enhanced shortcut mapping with isNumberTabs flag; refactored shortcut list to include formatted keys, disabled state, and icon/label metadata. Added helper utilities for conflict detection (areShortcutsEquivalent, isShortcutConflict, normalizeShortcut) and key formatting (formatShortcut); improved clear-shortcut button visibility logic and recording lifecycle management with validation and conflict checks.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UI as ShortcutSettings.vue
    participant Validation as Conflict Detection
    participant Config as Config Storage
    participant Presenter as shortcutPresenter.ts

    User->>UI: Start recording shortcut
    activate UI
    UI->>UI: startRecording() - set recording state
    
    User->>UI: Press keys (e.g., Cmd+1)
    UI->>UI: handleKeyDown()
    
    User->>UI: Release / Stop
    UI->>Validation: validateShortcut(captured key)
    activate Validation
    Validation->>Validation: normalizeShortcut()
    Validation->>Validation: areShortcutsEquivalent()
    Validation->>Validation: isShortcutConflict()
    Validation-->>UI: validation result (conflict or valid)
    deactivate Validation
    
    alt Conflict Detected
        UI->>UI: Show conflict warning
        UI->>UI: cancelRecording()
    else Valid
        UI->>Config: saveAndStopRecording() - persist key
        UI->>Presenter: Notify of shortcut update
        activate Presenter
        Presenter->>Presenter: Re-evaluate NumberTabs condition
        Presenter->>Presenter: Register/unregister 1-8 shortcuts
        deactivate Presenter
    end
    
    UI->>UI: stopRecording() - reset state
    deactivate UI
    UI-->>User: Shortcut updated or error shown

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• feat: clear shortcutsKey #587: Modifies shortcut registration conditionals in shortcutPresenter.ts and adjusts renderer shortcut UI/clear behavior, indicating related shortcut feature development.

Suggested reviewers

• deepinfect

Poem

🐰 With numbered tabs, one through eight,
A rabbit hops from state to state,
Quick shortcuts bound, no need to wait—
Press Cmd+1 to navigate! 🎯✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title 'feat: tab shortcutkey can be disabled' accurately reflects the main feature being added—the ability to disable tab number shortcuts (1-8) via the NumberTabs configuration.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ 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 feat/tab-shortcut-can-disabled

---

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: 1

📜 Review details

Configuration used: defaults

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 1ccf095 and 6f668f6.

📒 Files selected for processing (3)

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts
• src/renderer/settings/components/ShortcutSettings.vue

🧰 Additional context used

📓 Path-based instructions (20)

**/*.{ts,tsx,js,jsx,vue}

📄 CodeRabbit inference engine (CLAUDE.md)

Use English for logs and comments (Chinese text exists in legacy code, but new code should use English)

Files:

• src/renderer/settings/components/ShortcutSettings.vue
• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

**/*.vue: Use Vue 3 Composition API for all components instead of Options API
Use Tailwind CSS with scoped styles for component styling

Files:

• src/renderer/settings/components/ShortcutSettings.vue

src/renderer/**/*.vue

📄 CodeRabbit inference engine (CLAUDE.md)

src/renderer/**/*.vue: All user-facing strings must use i18n keys via vue-i18n for internationalization
Ensure proper error handling and loading states in all UI components
Implement responsive design using Tailwind CSS utilities for all UI components

src/renderer/**/*.vue: Use composition API and declarative programming patterns; avoid options API
Structure files: exported component, composables, helpers, static content, types
Use PascalCase for component names (e.g., AuthWizard.vue)
Use Vue 3 with TypeScript, leveraging defineComponent and PropType
Use template syntax for declarative rendering
Use Shadcn Vue, Radix Vue, and Tailwind for components and styling
Implement responsive design with Tailwind CSS; use a mobile-first approach
Use Suspense for asynchronous components
Use <script setup> syntax for concise component definitions
Prefer 'lucide:' icon family as the primary choice for Iconify icons
Import Icon component from '@iconify/vue' and use with lucide icons following pattern '{collection}:{icon-name}'

Files:

• src/renderer/settings/components/ShortcutSettings.vue

src/**/*

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

New features should be developed in the src directory

Files:

• src/renderer/settings/components/ShortcutSettings.vue
• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

src/renderer/**/*.{vue,js,ts}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

Renderer process code should be placed in src/renderer (Vue 3 application)

Files:

• src/renderer/settings/components/ShortcutSettings.vue

src/renderer/**/*.{ts,tsx,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,tsx,vue}: Write concise, technical TypeScript code with accurate examples
Use descriptive variable names with auxiliary verbs (e.g., isLoading, hasError)
Avoid enums; use const objects instead
Use arrow functions for methods and computed properties
Avoid unnecessary curly braces in conditionals; use concise syntax for simple statements

Vue 3 app code in src/renderer/src should be organized into components/, stores/, views/, i18n/, lib/ directories with shell UI in src/renderer/shell/

Files:

• src/renderer/settings/components/ShortcutSettings.vue

src/renderer/**

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

Use lowercase with dashes for directories (e.g., components/auth-wizard)

Files:

• src/renderer/settings/components/ShortcutSettings.vue

src/renderer/**/*.{ts,vue}

📄 CodeRabbit inference engine (.cursor/rules/vue-shadcn.mdc)

src/renderer/**/*.{ts,vue}: Use useFetch and useAsyncData for data fetching
Leverage ref, reactive, and computed for reactive state management
Use provide/inject for dependency injection when appropriate
Use Iconify/Vue for icon implementation

Files:

• src/renderer/settings/components/ShortcutSettings.vue

src/**/*.{ts,tsx,vue,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use Prettier with single quotes, no semicolons, and 100 character width

Files:

• src/renderer/settings/components/ShortcutSettings.vue
• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (CLAUDE.md)

Enable and maintain strict TypeScript type checking for all files

**/*.{ts,tsx}: Always use try-catch to handle possible errors in TypeScript code
Provide meaningful error messages when catching errors
Log detailed error logs including error details, context, and stack traces
Distinguish and handle different error types (UserError, NetworkError, SystemError, BusinessError) with appropriate handlers in TypeScript
Use structured logging with logger.error(), logger.warn(), logger.info(), logger.debug() methods from logging utilities
Do not suppress errors (avoid empty catch blocks or silently ignoring errors)
Provide user-friendly error messages for user-facing errors in TypeScript components
Implement error retry mechanisms for transient failures in TypeScript
Avoid logging sensitive information (passwords, tokens, PII) in logs

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

src/main/presenter/**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Organize core business logic into dedicated Presenter classes, with one presenter per functional domain

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

src/main/**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Use EventBus from src/main/eventbus.ts for main-to-renderer communication, broadcasting events via mainWindow.webContents.send()

src/main/**/*.ts: Use EventBus pattern for inter-process communication within the main process to decouple modules
Use Electron's built-in APIs for file system and native dialogs instead of Node.js or custom implementations

src/main/**/*.ts: Electron main process code belongs in src/main/ with presenters in presenter/ (Window/Tab/Thread/Mcp/Config/LLMProvider) and eventbus.ts for app events
Use the Presenter pattern in the main process for UI coordination

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

src/main/presenter/configPresenter/**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Store and retrieve custom prompts via configPresenter.getCustomPrompts() for config-based data source management

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts

**/*.ts

📄 CodeRabbit inference engine (CLAUDE.md)

Do not include AI co-authoring information (e.g., 'Co-Authored-By: Claude') in git commits

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

**/*.{js,ts,jsx,tsx,mjs,cjs}

📄 CodeRabbit inference engine (.cursor/rules/development-setup.mdc)

Write logs and comments in English

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

{src/main/presenter/**/*.ts,src/renderer/**/*.ts}

📄 CodeRabbit inference engine (.cursor/rules/electron-best-practices.mdc)

Implement proper inter-process communication (IPC) patterns using Electron's ipcRenderer and ipcMain APIs

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

src/main/**/*.{js,ts}

📄 CodeRabbit inference engine (.cursor/rules/project-structure.mdc)

Main process code for Electron should be placed in src/main

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

src/**/*.{ts,tsx,js,jsx}

📄 CodeRabbit inference engine (AGENTS.md)

Use OxLint for linting JavaScript and TypeScript files

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

src/**/*.{ts,tsx}

📄 CodeRabbit inference engine (AGENTS.md)

src/**/*.{ts,tsx}: Use camelCase for variable and function names in TypeScript files
Use PascalCase for type and class names in TypeScript
Use SCREAMING_SNAKE_CASE for constant names

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

src/**/*.ts

📄 CodeRabbit inference engine (AGENTS.md)

Use EventBus for inter-process communication events

Files:

• src/main/presenter/configPresenter/shortcutKeySettings.ts
• src/main/presenter/shortcutPresenter.ts

🧠 Learnings (1)

📚 Learning: 2025-06-21T15:48:29.950Z

Learnt from: neoragex2002
Repo: ThinkInAIXYZ/deepchat PR: 550
File: src/main/presenter/mcpPresenter/inMemoryServers/meetingServer.ts:250-252
Timestamp: 2025-06-21T15:48:29.950Z
Learning: In the meeting server implementation (src/main/presenter/mcpPresenter/inMemoryServers/meetingServer.ts), when multiple tabs have the same title, the user prefers to let the code silently select the first match without adding warnings or additional ambiguity handling.

Applied to files:

• src/main/presenter/shortcutPresenter.ts

🧬 Code graph analysis (1)

src/main/presenter/shortcutPresenter.ts (2)

src/main/presenter/configPresenter/shortcutKeySettings.ts (1)

• CommandKey (1-1)

src/main/presenter/index.ts (1)

• presenter (259-259)

⏰ 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). (1)

• GitHub Check: build-check (x64)

🔇 Additional comments (5)

src/main/presenter/shortcutPresenter.ts (1)

174-183: LGTM!

The conditional registration of number tab shortcuts (1-8) based on this.shortcutKeys.NumberTabs is correctly implemented. When the value is cleared (empty string), the shortcuts won't be registered; when set to the default value, they will be registered as expected.

src/main/presenter/configPresenter/shortcutKeySettings.ts (1)

20-21: LGTM!

The NumberTabs entry correctly uses a descriptive placeholder string (CommandOrControl+1...8) that serves as both a display value and an enable/disable flag. This approach is appropriate since it represents multiple fixed shortcuts rather than a single configurable key.

src/renderer/settings/components/ShortcutSettings.vue (3)

71-80: LGTM! Clear UX design for NumberTabs.

The condition correctly allows the clear button to appear for NumberTabs (enabling users to disable the feature) while the edit button remains hidden due to !shortcut.disabled (since the key combination is fixed and not customizable). This creates the intended UX where NumberTabs can be toggled on/off but not remapped.

---

253-266: LGTM!

The enhanced shortcuts mapping correctly:

• Retrieves the saved key from the store with proper fallback chain
• Formats the key for display
• Exposes the isNumberTabs flag for template consumption

---

449-451: LGTM!

Good defensive check to cancel any active recording before clearing the shortcut. This prevents potential state inconsistencies when the user clicks clear on a shortcut that's currently being recorded.