eigen/trackgo-fe
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 12 Wiki Activity

feat: implement platform-specific keyboard shortcuts and refactor shortcut data management

Browse Source
This commit is contained in:
Firman Ramdhani
2026-07-13 10:17:07 +07:00
parent ad5be7056a
commit 164ec284ae
7 changed files with 58 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/src/apps/modules/layouts/components/sidebar.tsx
+13 -5
View File
@@ -6,6 +6,7 @@ import { ChevronsLeft, ChevronsRight, PanelTopClose, PanelTopOpen, Search, X } f
import type { MenuItemType } from '../types/menu.types';
import type { SidebarVariant } from '@repo/ui/components';
import { useTranslation } from '@repo/core-i18n';
import { shortcutsData } from '@repo/ui/constants';
// ---------------------------------------------------------------------------
// Props
@@ -333,13 +334,20 @@ export const SidebarMenu = memo(function SidebarMenu({
}
}, [isMini, setSidebarVariant]);
const [isMac, setIsMac] = useState(true);
const [isMac, setIsMac] = useState(false);
useEffect(() => {
setIsMac(typeof window !== 'undefined' && navigator.userAgent.includes('Mac'));
setIsMac(typeof window !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent));
}, []);
const filterMenuShortcutText = isMac ? '⇧⌘M' : 'Ctrl+Shift+M';
const toggleShortcutText = isMac ? '⇧⌘B' : 'Ctrl+Shift+B';
const filterMenuShortcutText = useMemo(() => {
const shortcutData = shortcutsData.find((s) => s.key === 'search_menu');
return isMac ? shortcutData?.macKeyIcons.join(' ') : shortcutData?.winKeyIcons.join(' ');
}, [isMac]);
const toggleShortcutText = useMemo(() => {
const shortcutData = shortcutsData.find((s) => s.key === 'collapse_sidebar');
return isMac ? shortcutData?.macKeyIcons.join(' ') : shortcutData?.winKeyIcons.join(' ');
}, [isMac]);
useEffect(() => {
const handleKeyDown = (e: KeyboardEvent) => {
@@ -442,7 +450,7 @@ export const SidebarMenu = memo(function SidebarMenu({
radius="md"
size="xs"
style={{ flex: 1 }}
rightSectionWidth={searchQuery ? 30 : 48}
rightSectionWidth={searchQuery ? 30 : isMac ? 48 : 68}
rightSection={
searchQuery ? (
<ActionIcon variant="subtle" color="gray" onClick={() => setSearchQuery('')} size="sm">
apps/web/src/apps/modules/system/information/components/shortcut/index.tsx
+18 -12
View File
@@ -1,8 +1,8 @@
import { useTranslation } from '@repo/core-i18n';
import { Group, Kbd, Table, Text, TextInput, Box, Center, ScrollArea } from '@repo/ui/components';
import { shortcutsData } from '@repo/ui/constants';
import { Search, Keyboard } from 'lucide-react';
import { useEffect, useState, useMemo } from 'react';
import { shortcuts } from './data';
import { useEffect, useState, useMemo, Fragment } from 'react';
export function Shortcut() {
const { t } = useTranslation();
@@ -11,15 +11,14 @@ export function Shortcut() {
// OS Detection for rendering appropriate keyboard shortcuts
useEffect(() => {
setIsMac(typeof window !== 'undefined' && navigator.userAgent.includes('Mac'));
setIsMac(typeof window !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent));
}, []);
// Filter logika pencarian berdasarkan label ATAU deskripsi yang sudah diterjemahkan
const filteredShortcuts = useMemo(() => {
const query = searchQuery.toLowerCase().trim();
if (!query) return shortcuts;
if (!query) return shortcutsData;
return shortcuts.filter((item) => {
return shortcutsData.filter((item) => {
const labelMatch = t(item.label).toLowerCase().includes(query);
const descMatch = t(item.desc).toLowerCase().includes(query);
return labelMatch || descMatch;
@@ -34,23 +33,30 @@ export function Shortcut() {
<Text size="sm" fw={600} style={{ color: 'var(--mantine-color-text)' }}>
{t(element.label)}
</Text>
<Text size="xs" c="dimmed" mt={4} style={{ maxWidth: '600px', lineHeight: 1.4 }}>
<Text size="xs" c="dimmed" mt={4} style={{ lineHeight: 1.4 }}>
{t(element.desc)}
</Text>
</Table.Td>
<Table.Td w={250}>
<Group gap={6} wrap="nowrap">
<Group gap={6} wrap="nowrap" align="center">
{keys.map((key, i) => (
<Kbd key={i} size="md" style={{ fontSize: '12px' }}>
<Fragment key={i}>
<Kbd size="md" style={{ fontSize: '12px' }}>
{key}
</Kbd>
{i < keys.length - 1 && (
<Text size="sm" c="dimmed" fw={500}>
+
</Text>
)}
</Fragment>
))}
</Group>
</Table.Td>
</Table.Tr>
);
});
return (
<Box>
<Box p="md" style={{ borderBottom: '1px solid var(--mantine-color-default-border)' }}>
@@ -76,8 +82,8 @@ export function Shortcut() {
>
<Table.Thead>
<Table.Tr>
<Table.Th>{t('information:info.table.action')}</Table.Th>
<Table.Th>{t('information:info.table.shortcut')}</Table.Th>
<Table.Th>{t('information:info.table.action').toUpperCase()}</Table.Th>
<Table.Th>{t('information:info.table.shortcut').toUpperCase()}</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
apps/web/tsconfig.json
+1 -1
View File
@@ -1,6 +1,6 @@
{
"extends": "@repo/typescript-config/react-app.json",
"include": ["src"],
"include": ["src", "../../packages/ui/src/constant/shortcut.data.ts"],
"compilerOptions": {
"jsx": "react-jsx"
}
packages/ui/package.json
+2 -1
View File
@@ -8,7 +8,8 @@
"./hooks": "./src/hooks/index.ts",
"./provider": "./src/provider/index.ts",
"./validators": "./src/validators/index.ts",
"./foundations": "./src/foundations/index.ts"
"./foundations": "./src/foundations/index.ts",
"./constants": "./src/constants/index.ts"
},
"license": "MIT",
"scripts": {
packages/ui/src/constants/index.ts
+1
View File
@@ -0,0 +1 @@
export * from './shortcut.data';
apps/web/src/apps/modules/system/information/components/shortcut/data.ts → packages/ui/src/constants/shortcut.data.ts
+13 -4
View File
@@ -1,20 +1,29 @@
export const shortcuts = [
export const shortcutsData = [
{
key: 'create_data',
label: 'information:shortcuts.create.label',
desc: 'information:shortcuts.create.desc',
macKeys: ['⌘', '⇧', 'N'],
macKeys: ['Cmd', 'Shift', 'N'],
macKeyIcons: ['⌘', '⇧', 'N'],
winKeys: ['Ctrl', 'Shift', 'N'],
winKeyIcons: ['Ctrl', '⇧', 'N'],
},
{
key: 'search_menu',
label: 'information:shortcuts.searchMenu.label',
desc: 'information:shortcuts.searchMenu.desc',
macKeys: ['⌘', '⇧', 'M'],
macKeys: ['Cmd', 'Shift', 'M'],
macKeyIcons: ['⌘', '⇧', 'M'],
winKeys: ['Ctrl', 'Shift', 'M'],
winKeyIcons: ['Ctrl', '⇧', 'M'],
},
{
key: 'collapse_sidebar',
label: 'information:shortcuts.toggleSidebar.label',
desc: 'information:shortcuts.toggleSidebar.desc',
macKeys: ['⌘', '⇧', 'B'],
macKeys: ['Cmd', 'Shift', 'B'],
macKeyIcons: ['⌘', '⇧', 'B'],
winKeys: ['Ctrl', 'Shift', 'B'],
winKeyIcons: ['Ctrl', '⇧', 'B'],
},
];
packages/ui/src/foundations/enterprise-module/providers/index-page.provider.tsx
+8 -3
View File
@@ -10,6 +10,7 @@ import {
useEnterpriseModuleNavigationContext,
useEnterpriseModuleTranslationContext,
} from '../hooks/use-module.context';
import { shortcutsData } from '../../../constants';
// ---------------------------------------------------------------------------
// Helpers
@@ -18,9 +19,6 @@ import {
/** Detect macOS / iOS for displaying platform-specific shortcut labels. */
const IS_MAC = typeof navigator !== 'undefined' && /Mac|iPod|iPhone|iPad/.test(navigator.userAgent);
/** Platform-aware shortcut label for the Create action. */
const CREATE_SHORTCUT_LABEL = IS_MAC ? '⇧⌘N' : 'Ctrl+Shift+N';
// ---------------------------------------------------------------------------
// Component
// ---------------------------------------------------------------------------
@@ -48,6 +46,13 @@ export function EnterpriseIndexPageProvider<E extends BaseEntity = BaseEntity>(p
// -------------------------------------------------------------------------
// Global keyboard shortcut: Ctrl+Shift+N / ⌘+Shift+N → Create
// -------------------------------------------------------------------------
/** Platform-aware shortcut label for the Create action. */
const CREATE_SHORTCUT_LABEL = useMemo(() => {
const shortcutData = shortcutsData.find((s) => s.key === 'collapse_sidebar');
return IS_MAC ? shortcutData?.macKeyIcons.join(' ') : shortcutData?.winKeyIcons.join(' ');
}, [IS_MAC]);
useEffect(() => {
function onKeyDown(e: KeyboardEvent) {
const isShortcut = (e.ctrlKey || e.metaKey) && e.shiftKey && e.key.toLowerCase() === 'n';