bakery-admin/bakery-ia
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Improve the UI add button

Browse Source
This commit is contained in:
Urtzi Alfaro
2025-11-16 22:13:52 +01:00
parent 54b7a5e080
commit d36f2ab9af
23 changed files with 2047 additions and 1740 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/src/pages/app/DashboardPage.tsx
View File

@@ -162,6 +162,20 @@ export function NewDashboardPage() {
handleRefreshAll();
};
// Keyboard shortcut for Quick Add (Cmd/Ctrl + K)
useEffect(() => {
const handleKeyDown = (event: KeyboardEvent) => {
// Check for Cmd+K (Mac) or Ctrl+K (Windows/Linux)
if ((event.metaKey || event.ctrlKey) && event.key === 'k') {
event.preventDefault();
setIsAddWizardOpen(true);
}
};
window.addEventListener('keydown', handleKeyDown);
return () => window.removeEventListener('keydown', handleKeyDown);
}, []);
// Demo tour auto-start logic
useEffect(() => {
console.log('[Dashboard] Demo mode:', isDemoMode);
@@ -221,18 +235,29 @@ export function NewDashboardPage() {
<span className="hidden sm:inline">{t('common:actions.refresh')}</span>
</button>
{/* Unified Add Button */}
{/* Unified Add Button with Keyboard Shortcut */}
<button
onClick={() => setIsAddWizardOpen(true)}
className="flex items-center gap-2 px-6 py-2.5 rounded-lg font-semibold transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0"
className="group relative flex items-center gap-2 px-6 py-2.5 rounded-lg font-semibold transition-all duration-200 shadow-lg hover:shadow-xl hover:-translate-y-0.5 active:translate-y-0"
style={{
background: 'linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%)',
color: 'white'
}}
title={`Quick Add (${navigator.platform.includes('Mac') ? 'Cmd' : 'Ctrl'}+K)`}
>
<Plus className="w-5 h-5" />
<span className="hidden sm:inline">{t('common:actions.add')}</span>
<Sparkles className="w-4 h-4 opacity-80" />
{/* Keyboard shortcut badge - shown on hover */}
<span className="hidden lg:flex absolute -bottom-8 left-1/2 -translate-x-1/2 items-center gap-1 px-2 py-1 rounded text-xs font-mono opacity-0 group-hover:opacity-100 transition-opacity duration-200 whitespace-nowrap pointer-events-none" style={{ backgroundColor: 'var(--bg-primary)', color: 'var(--text-secondary)', boxShadow: '0 2px 8px rgba(0,0,0,0.1)' }}>
<kbd className="px-1.5 py-0.5 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--bg-tertiary)', border: '1px solid var(--border-secondary)' }}>
{navigator.platform.includes('Mac') ? '⌘' : 'Ctrl'}
</kbd>
<span>+</span>
<kbd className="px-1.5 py-0.5 rounded text-xs font-semibold" style={{ backgroundColor: 'var(--bg-tertiary)', border: '1px solid var(--border-secondary)' }}>
K
</kbd>
</span>
</button>
</div>
</div>