AppCommandBar
AppKeyboard-first command palette. Opens with ⌘K; an items prop accepts custom commands while a default navigation/actions/recent set is included.
Esc
↑↓ Navigate
↵ Select
Esc Close
<%- include('modules/app/AppCommandBar') %><%- include('modules/app/AppCommandBar', {
placeholder: 'Search commands…',
items: [
{ icon: 'fa-solid fa-basket-shopping', label: 'View Orders', shortcut: 'G O', category: 'Navigation', href: '/orders' },
{ icon: 'fa-solid fa-box', label: 'Inventory', shortcut: 'G I', category: 'Navigation', href: '/inventory' },
{ icon: 'fa-solid fa-tag', label: 'New Sale', shortcut: 'C N', category: 'Actions' },
{ icon: 'fa-solid fa-file-export', label: 'Export Report', shortcut: 'C E', category: 'Actions' },
{ icon: 'fa-solid fa-clock-rotate-left', label: 'Order #1042', category: 'Recent', href: '/orders/1042' },
{ icon: 'fa-solid fa-clock-rotate-left', label: 'Customer: Acme Co', category: 'Recent', href: '/customers/acme' },
]
}) %>
Esc
↑↓ Navigate
↵ Select
Esc Close
<%- include('modules/app/AppCommandBar', {
placeholder: 'Try "kbd", "asgn" or "rls"…',
items: [
{ icon: 'fa-solid fa-keyboard', label: 'Open Keyboard Shortcuts', shortcut: '?', category: 'Help', keywords: ['kbd'] },
{ icon: 'fa-solid fa-book', label: 'Browse Documentation', shortcut: 'G H', category: 'Help' },
{ icon: 'fa-solid fa-bell', label: 'Notification Preferences', shortcut: 'G N', category: 'Preferences' },
{ icon: 'fa-solid fa-screwdriver-wrench', label: 'Assign Reviewer to PR-42', shortcut: 'A R', category: 'Workflows', keywords: ['asgn'] },
{ icon: 'fa-solid fa-rocket', label: 'Release & Tag v1.4.0', shortcut: 'R T', category: 'Workflows', keywords: ['rls'] },
]
}) %><%
// CommandPalette (EJS, split) — folder-scoped sibling of
// /home/kuray/01_NextJS_Components/modules/app/CommandPalette/.
//
// File-for-file parallels:
// partials/_input.ejs <-- parts/Input.tsx
// partials/_list.ejs <-- parts/ResultList.tsx
// partials/_item.ejs <-- parts/ResultItem.tsx
// partials/_footer.ejs <-- parts/Footer.tsx
// scripts/command-store.js <-- hooks/useCommandStore.ts
// scripts/fuzzy.js <-- hooks/useFuzzySearch.tsx
// scripts/shortcuts.js <-- hooks/useShortcuts.ts
//
// M1 scope: fuzzy search + grouping + highlight + empty-state suggestions.
// TODO M2..M6 inline.
var _id = locals.id || 'cmd-bar-' + Math.random().toString(36).substr(2, 9);
var _items = locals.items || [];
var _placeholder = locals.placeholder || 'Type a command or search…';
// Defaults: 5 Navigation + 4 Actions + 3 Recent = 12 items.
// NOTE: Recent items use `faClock` (fa-clock), NOT fa-clock-rotate-left.
var defaultItems = [
{ icon: 'fa-solid fa-house', label: 'Go to Dashboard', shortcut: 'G D', category: 'Navigation', href: '#' },
{ icon: 'fa-solid fa-folder', label: 'Go to Projects', shortcut: 'G P', category: 'Navigation', href: '#' },
{ icon: 'fa-solid fa-users', label: 'Go to Team', shortcut: 'G T', category: 'Navigation', href: '#' },
{ icon: 'fa-solid fa-gear', label: 'Go to Settings', shortcut: 'G S', category: 'Navigation', href: '#' },
{ icon: 'fa-solid fa-chart-bar', label: 'Go to Analytics', shortcut: 'G A', category: 'Navigation', href: '#' },
{ icon: 'fa-solid fa-plus', label: 'New Project', shortcut: '⌘N', category: 'Actions' },
{ icon: 'fa-solid fa-envelope', label: 'Send Invite', shortcut: '⌘I', category: 'Actions' },
{ icon: 'fa-solid fa-file-export', label: 'Export Data', shortcut: '⌘E', category: 'Actions' },
{ icon: 'fa-solid fa-lock', label: 'Lock Screen', shortcut: '⌘L', category: 'Actions' },
{ icon: 'fa-solid fa-clock', label: 'Project Alpha', category: 'Recent' },
{ icon: 'fa-solid fa-clock', label: 'Q3 Report', category: 'Recent' },
{ icon: 'fa-solid fa-clock', label: 'Design Review', category: 'Recent' }
];
var _allItems = _items.length ? _items : defaultItems;
var categories = [];
_allItems.forEach(function(item) {
if (categories.indexOf(item.category) === -1) categories.push(item.category);
});
var _badgeNeutralSm = 'inline-flex items-center gap-1 rounded-full font-medium bg-surface-sunken text-text-secondary px-1.5 py-0 text-[10px]';
%>
<% if (locals.trigger) { %>
<%- locals.trigger %>
<% } else { %>
<% } %>