Merge branch 'dev'

.gitignore

@@ -1,3 +1,4 @@
+*.code-workspace
 .env
 build/
 

package.json

@@ -11,7 +11,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@budgetbuddyde/types": "^1.0.4",
+    "@budgetbuddyde/types": "^1.0.6",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/icons-material": "^5.14.15",

src/components/Drawer/FormDrawer/FormDrawer.component.tsx

@@ -1,4 +1,4 @@
-import { useScreenSize } from '@/hooks';
+import { useKeyPress, useScreenSize } from '@/hooks';
 import { drawerWidth } from '@/style/theme/theme';
 import {
   Box,
@@ -9,11 +9,13 @@ import {
   IconButton,
   Alert,
   CircularProgress,
+  ButtonProps,
 } from '@mui/material';
 import React from 'react';
 import { ActionPaper } from '../../Base';
 import { CloseRounded, DoneRounded, ErrorRounded } from '@mui/icons-material';
 import { type TFormDrawerState } from './FormDrawer.reducer';
+import { HotkeyBadge } from '@/components/HotkeyBadge.component';
 
 export type TFormDrawerProps = {
   state?: TFormDrawerState;
@@ -22,6 +24,7 @@ export type TFormDrawerProps = {
   onSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
   onClose: () => void;
   closeOnBackdropClick?: boolean;
+  withHotkey?: boolean;
 };
 
 export const FormDrawer: React.FC<React.PropsWithChildren<TFormDrawerProps>> = ({
@@ -32,8 +35,21 @@ export const FormDrawer: React.FC<React.PropsWithChildren<TFormDrawerProps>> = (
   closeOnBackdropClick = false,
   heading = 'Drawer',
   children,
+  withHotkey = false,
 }) => {
   const screenSize = useScreenSize();
+  const saveBtnRef = React.createRef<HTMLButtonElement>();
+
+  useKeyPress(
+    'S',
+    (event) => {
+      event.preventDefault();
+      if (!withHotkey) return;
+      if (!saveBtnRef.current) return console.error('saveBtnRef is null');
+      saveBtnRef.current.click();
+    },
+    { requiresCtrl: true }
+  );
 
   const DrawerAnchor: DrawerProps['anchor'] = React.useMemo(() => {
     return screenSize === 'small' ? 'bottom' : 'right';
@@ -100,34 +116,45 @@ export const FormDrawer: React.FC<React.PropsWithChildren<TFormDrawerProps>> = (
               pt: 0,
             }}
           >
-            <Button onClick={onClose} sx={{ mr: 1 }}>
+            <Button onClick={onClose} sx={{ mr: 2 }}>
               Cancel
             </Button>
-            {state !== undefined ? (
-              <Button
-                type="submit"
-                variant="contained"
-                startIcon={
-                  state.loading ? (
-                    <CircularProgress color="inherit" size={16} />
-                  ) : state.success ? (
-                    <DoneRounded color="inherit" fontSize="inherit" />
-                  ) : !state.success && state.error !== null ? (
-                    <ErrorRounded color="inherit" fontSize="inherit" />
-                  ) : null
-                }
-                disabled={state.loading}
-              >
-                Save
-              </Button>
+
+            {withHotkey ? (
+              <HotkeyBadge hotkey="s">
+                <SaveButton ref={saveBtnRef} />
+              </HotkeyBadge>
             ) : (
-              <Button type="submit" variant="contained">
-                Save
-              </Button>
+              <SaveButton ref={saveBtnRef} />
             )}
           </Box>
         </Box>
       </form>
     </Drawer>
   );
 };
+
+const SaveButton: React.FC<{ state?: TFormDrawerState } & Pick<ButtonProps, 'ref'>> =
+  React.forwardRef(({ state }, ref) => {
+    return (
+      <Button
+        type="submit"
+        variant="contained"
+        {...(state !== undefined
+          ? {
+              startIcon: state.loading ? (
+                <CircularProgress color="inherit" size={16} />
+              ) : state.success ? (
+                <DoneRounded color="inherit" fontSize="inherit" />
+              ) : !state.success && state.error !== null ? (
+                <ErrorRounded color="inherit" fontSize="inherit" />
+              ) : null,
+              disabled: state.loading,
+            }
+          : {})}
+        ref={ref}
+      >
+        Save
+      </Button>
+    );
+  });

src/components/HotkeyBadge.component.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { Badge, Box, type BadgeProps } from '@mui/material';
+import { KeyboardCommandKeyRounded } from '@mui/icons-material';
+import { useWindowDimensions } from '@/hooks';
+
+export type THotKeyBadgeProps = { hotkey: string } & BadgeProps;
+
+export const HotkeyBadge: React.FC<THotKeyBadgeProps> = ({ hotkey, ...props }) => {
+  const { breakpoint } = useWindowDimensions();
+  if (breakpoint === 'xs' || breakpoint === 'sm') {
+    return <React.Fragment>{props.children}</React.Fragment>;
+  }
+  return (
+    <Badge
+      color="primary"
+      overlap="circular"
+      anchorOrigin={{
+        vertical: 'bottom',
+        horizontal: 'right',
+      }}
+      badgeContent={
+        <Box sx={{ display: 'flex', flexDirection: 'row' }}>
+          <KeyboardCommandKeyRounded fontSize="inherit" />
+          {hotkey.toUpperCase()}
+        </Box>
+      }
+      {...props}
+    >
+      {props.children}
+    </Badge>
+  );
+};

src/components/Layout/Drawer/DrawerHamburger.component.tsx

@@ -3,17 +3,19 @@ import { MenuRounded as MenuIcon, MenuOpenRounded as MenuOpenIcon } from '@mui/i
 import { IconButton, type IconButtonProps } from '@mui/material';
 import { useScreenSize } from '@/hooks';
 import { useDrawerStore } from './Drawer.store';
+import { HotkeyBadge } from '@/components/HotkeyBadge.component';
 
 export type TDrawerHeaderProps = IconButtonProps;
 
 export const DrawerHamburger: React.FC<TDrawerHeaderProps> = ({ ...iconButtonProps }) => {
   const screenSize = useScreenSize();
   const { open, toggle } = useDrawerStore();
-
   return (
-    <IconButton onClick={() => toggle()} {...iconButtonProps}>
-      <Icon open={open} screenSize={screenSize} />
-    </IconButton>
+    <HotkeyBadge hotkey="b">
+      <IconButton onClick={() => toggle()} {...iconButtonProps}>
+        <Icon open={open} screenSize={screenSize} />
+      </IconButton>
+    </HotkeyBadge>
   );
 };
 

src/core/Auth/Layout/Auth.layout.tsx

@@ -1,13 +1,24 @@
 import React from 'react';
 import { Box, Container } from '@mui/material';
 import { AppBar, Footer } from '@/components/Layout';
-import { Drawer } from '@/components/Layout/Drawer';
+import { Drawer, useDrawerStore } from '@/components/Layout/Drawer';
 import { Main } from '@/components/Base';
 import { FilterDrawer } from '@/core/Filter';
+import { useKeyPress } from '@/hooks';
 
 export type TAuthLayout = React.PropsWithChildren;
 
 export const AuthLayout: React.FC<TAuthLayout> = ({ children }) => {
+  const { toggle } = useDrawerStore();
+  useKeyPress(
+    'b',
+    (event) => {
+      event.preventDefault();
+      toggle();
+    },
+    { requiresCtrl: true }
+  );
+
   return (
     <Box sx={{ display: 'flex' }}>
       <Drawer />

src/core/Budget/BudgetList.component.tsx

@@ -9,6 +9,8 @@ import { BudgetService, CreateBudgetDrawer, EditBudgetDrawer, useFetchBudgetProg
 import { useSnackbarContext } from '../Snackbar';
 import { useAuthContext } from '../Auth';
 import { TBudget } from '@budgetbuddyde/types';
+import { useKeyPress } from '@/hooks';
+import { HotkeyBadge } from '@/components/HotkeyBadge.component';
 
 export type TBudgetListProps = {};
 
@@ -24,6 +26,10 @@ export const BudgetList: React.FC<TBudgetListProps> = () => {
   const [showCreateBudgetDrawer, setShowCreateBudgetDrawer] = React.useState(false);
   const [showEditBudgetDrawer, setShowEditBudgetDrawer] = React.useState(false);
   const [editBudget, setEditBudget] = React.useState<TBudget | null>(null);
+  useKeyPress('a', (event) => {
+    event.preventDefault();
+    setShowCreateBudgetDrawer(true);
+  });
 
   const handler: Pick<TCategoryBudgetProps, 'onEdit' | 'onDelete'> = {
     async onEdit(budget) {
@@ -70,9 +76,11 @@ export const BudgetList: React.FC<TBudgetListProps> = () => {
           <Card.HeaderActions>
             <ActionPaper>
               <Tooltip title="Set Budget">
-                <IconButton color="primary" onClick={() => setShowCreateBudgetDrawer(true)}>
-                  <AddRounded />
-                </IconButton>
+                <HotkeyBadge hotkey="a">
+                  <IconButton color="primary" onClick={() => setShowCreateBudgetDrawer(true)}>
+                    <AddRounded />
+                  </IconButton>
+                </HotkeyBadge>
               </Tooltip>
             </ActionPaper>
           </Card.HeaderActions>

src/core/Budget/CreateBudgetDrawer.component.tsx

@@ -91,6 +91,7 @@ export const CreateBudgetDrawer: React.FC<TCreateBudgetDrawerProps> = ({ open, o
       heading="Set Budget"
       onClose={handler.onClose}
       closeOnBackdropClick
+      withHotkey
     >
       <CategoryAutocomplete
         onChange={(event, value) =>

src/core/Budget/EditBudgetDrawer.component.tsx

@@ -110,6 +110,7 @@ export const EditBudgetDrawer: React.FC<TEditBudgetDrawerProps> = ({
       heading="Set Budget"
       onClose={handler.onClose}
       closeOnBackdropClick
+      withHotkey
     >
       <CategoryAutocomplete
         onChange={(event, value) =>

src/core/Category/CreateCategoryDrawer.component.tsx

@@ -91,6 +91,7 @@ export const CreateCategoryDrawer: React.FC<TCreateCategoryDrawerProps> = ({
       heading="Create Category"
       onClose={handler.onClose}
       closeOnBackdropClick
+      withHotkey
     >
       <TextField
         id="category-name"

src/core/Category/EditCategoryDrawer.component.tsx

@@ -96,6 +96,7 @@ export const EditCategoryDrawer: React.FC<TEditCategoryDrawerProps> = ({
         setDrawerState({ type: 'RESET' });
       }}
       closeOnBackdropClick
+      withHotkey
     >
       <TextField
         id="category-name"

src/core/PaymentMethod/CreatePaymentMethodDrawer.component.tsx

@@ -96,6 +96,7 @@ export const CreatePaymentMethodDrawer: React.FC<TCreatePaymentMethodProps> = ({
       heading="Create Payment-Method"
       onClose={handler.onClose}
       closeOnBackdropClick
+      withHotkey
     >
       {(['name', 'address', 'provider'] as Partial<keyof TCreatePaymentMethodPayload>[]).map(
         (name) => {

src/core/PaymentMethod/EditPaymentMethodDrawer.component.tsx

@@ -96,6 +96,7 @@ export const EditPaymentMethodDrawer: React.FC<TEditPaymentMethodProps> = ({
       heading="Edit Payment-Method"
       onClose={handler.onClose}
       closeOnBackdropClick
+      withHotkey
     >
       {(['name', 'address', 'provider'] as Partial<keyof TUpdatePaymentMethodPayload>[]).map(
         (name) => {

src/core/Subscription/CreateSubscriptionDrawer.component.tsx

@@ -120,6 +120,7 @@ export const CreateSubscriptionDrawer: React.FC<TCreateSubscriptionDrawerProps>
       heading="Create Subscription"
       onClose={handler.onClose}
       closeOnBackdropClick
+      withHotkey
     >
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         {screenSize === 'small' ? (

src/core/Subscription/EditSubscriptionDrawer.component.tsx

@@ -150,6 +150,7 @@ export const EditSubscriptionDrawer: React.FC<TEditSubscriptionDrawerProps> = ({
       heading="Edit Subscription"
       onClose={handler.onClose}
       closeOnBackdropClick
+      withHotkey
     >
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         {screenSize === 'small' ? (

src/core/Transaction/CreateTransactionDrawer.component.tsx

@@ -151,6 +151,7 @@ export const CreateTransactionDrawer: React.FC<TCreateTransactionDrawerProps> =
       heading="Create Transaction"
       onClose={handler.onClose}
       closeOnBackdropClick
+      withHotkey
     >
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         {screenSize === 'small' ? (

src/core/Transaction/EditTransactionDrawer.component.tsx

@@ -145,6 +145,7 @@ export const EditTransactionDrawer: React.FC<TEditTransactionDrawerProps> = ({
       heading="Create Transaction"
       onClose={handler.onClose}
       closeOnBackdropClick
+      withHotkey
     >
       <LocalizationProvider dateAdapter={AdapterDateFns}>
         {screenSize === 'small' ? (

src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from './useWindowDimensions.hook';
 export * from './useScreenSize.hook';
 export * from './useEntityDrawer.reducer';
+export * from './useKeyPress.hook';

src/hooks/useKeyPress.hook.ts

@@ -0,0 +1,31 @@
+import { useEffect } from 'react';
+import { useScreenSize } from './useScreenSize.hook';
+
+export const useKeyPress = (
+  targetKey: string,
+  callback: (event: KeyboardEvent) => void,
+  options?: {
+    requiresCtrl?: boolean;
+  }
+) => {
+  const screenSize = useScreenSize();
+
+  const handleKeyPress = (event: KeyboardEvent) => {
+    if (event.key === targetKey.toLowerCase()) {
+      if (options?.requiresCtrl && !event.ctrlKey) {
+        return;
+      }
+      callback(event);
+    }
+  };
+
+  useEffect(() => {
+    if (screenSize === 'small') return;
+
+    window.addEventListener('keydown', handleKeyPress);
+
+    return () => {
+      window.removeEventListener('keydown', handleKeyPress);
+    };
+  }, [targetKey, callback, screenSize, options]);
+};