feat(ui): add keyboard shortcuts for AI profiles navigation

- Add M shortcut to navigate to AI Profiles from sidebar
- Add N shortcut to create new profile in profiles view
- Display keyboard shortcut indicators in UI

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4 <noreply@anthropic.com>
This commit is contained in:
Kacper
2025-12-10 15:03:02 +01:00
parent 02eeb1031e
commit d59fde5c95
4 changed files with 44 additions and 3 deletions

View File

@@ -330,5 +330,18 @@
"skipTests": true,
"model": "sonnet",
"thinkingLevel": "medium"
},
{
"id": "feature-1765375218276-4sgru3lca",
"category": "Other",
"description": "I want you to add a shortcuts to ai profies in siedbar to be M and insite that view the new profile should be also shortuct to open to crate a new profile by shortcat N",
"steps": [],
"status": "verified",
"startedAt": "2025-12-10T14:00:32.639Z",
"imagePaths": [],
"skipTests": true,
"summary": "Added keyboard shortcuts for AI Profiles:\n- Press M to navigate to AI Profiles view from sidebar\n- Press N in profiles view to create new profile\n- Visual shortcut indicators added to UI\nModified: use-keyboard-shortcuts.ts (added profiles:M and addProfile:N shortcuts), sidebar.tsx (added shortcut to profiles nav item), profiles-view.tsx (imported keyboard shortcut hooks, implemented N shortcut handler, added visual indicator to New Profile button)",
"model": "haiku",
"thinkingLevel": "none"
}
]
]

View File

@@ -489,6 +489,7 @@ export function Sidebar() {
id: "profiles",
label: "AI Profiles",
icon: UserCircle,
shortcut: NAV_SHORTCUTS.profiles,
},
],
},

View File

@@ -1,12 +1,17 @@
"use client";
import { useState, useMemo, useCallback } from "react";
import { useState, useMemo, useCallback, useEffect } from "react";
import { useAppStore, AIProfile, AgentModel, ThinkingLevel, ModelProvider } from "@/store/app-store";
import { Button } from "@/components/ui/button";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import { cn, modelSupportsThinking } from "@/lib/utils";
import {
useKeyboardShortcuts,
ACTION_SHORTCUTS,
KeyboardShortcut,
} from "@/hooks/use-keyboard-shortcuts";
import {
Dialog,
DialogContent,
@@ -501,6 +506,23 @@ export function ProfilesView() {
});
};
// Build keyboard shortcuts for profiles view
const profilesShortcuts: KeyboardShortcut[] = useMemo(() => {
const shortcuts: KeyboardShortcut[] = [];
// Add profile shortcut - when in profiles view
shortcuts.push({
key: ACTION_SHORTCUTS.addProfile,
action: () => setShowAddDialog(true),
description: "Create new profile",
});
return shortcuts;
}, []);
// Register keyboard shortcuts for profiles view
useKeyboardShortcuts(profilesShortcuts);
return (
<div
className="flex-1 flex flex-col overflow-hidden content-bg"
@@ -523,9 +545,12 @@ export function ProfilesView() {
</p>
</div>
</div>
<Button onClick={() => setShowAddDialog(true)} data-testid="add-profile-button">
<Button onClick={() => setShowAddDialog(true)} data-testid="add-profile-button" className="relative">
<Plus className="w-4 h-4 mr-2" />
New Profile
<span className="hidden lg:flex items-center justify-center ml-2 px-2 py-0.5 text-[10px] font-mono rounded bg-white/5 border border-white/10 text-zinc-500">
{ACTION_SHORTCUTS.addProfile}
</span>
</Button>
</div>
</div>

View File

@@ -106,6 +106,7 @@ export const NAV_SHORTCUTS: Record<string, string> = {
context: "C", // C for Context
tools: "T", // T for Tools
settings: "S", // S for Settings
profiles: "M", // M for Models/profiles
};
/**
@@ -127,4 +128,5 @@ export const ACTION_SHORTCUTS: Record<string, string> = {
projectPicker: "P", // P for Project picker
cyclePrevProject: "Q", // Q for previous project (cycle back through MRU)
cycleNextProject: "E", // E for next project (cycle forward through MRU)
addProfile: "N", // N for New profile (when in profiles view)
};