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

apps/web/src/apps/modules/layouts/components/sidebar.tsx

@@ -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/data.ts

@@ -1,20 +0,0 @@
-export const shortcuts = [
-  {
-    label: 'information:shortcuts.create.label',
-    desc: 'information:shortcuts.create.desc',
-    macKeys: ['⌘', '⇧', 'N'],
-    winKeys: ['Ctrl', 'Shift', 'N'],
-  },
-  {
-    label: 'information:shortcuts.searchMenu.label',
-    desc: 'information:shortcuts.searchMenu.desc',
-    macKeys: ['⌘', '⇧', 'M'],
-    winKeys: ['Ctrl', 'Shift', 'M'],
-  },
-  {
-    label: 'information:shortcuts.toggleSidebar.label',
-    desc: 'information:shortcuts.toggleSidebar.desc',
-    macKeys: ['⌘', '⇧', 'B'],
-    winKeys: ['Ctrl', 'Shift', 'B'],
-  },
-];

apps/web/src/apps/modules/system/information/components/shortcut/index.tsx

@@ -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' }}>
-                {key}
-              </Kbd>
+              <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,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"
   }