feat: implement multiple aux timers

apps/client/src/common/components/input/input/Input.tsx

@@ -1,4 +1,4 @@
-import { InputHTMLAttributes } from 'react';
+import { forwardRef, InputHTMLAttributes } from 'react';
 
 import { cx } from '../../../utils/styleUtils';
 
@@ -9,6 +9,18 @@ interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
   height?: 'medium' | 'large';
 }
 
-export default function Input({ className, variant = 'subtle', height = 'medium', ...inputProps }: InputProps) {
-  return <input type='text' className={cx([style.input, style[variant], style[height], className])} {...inputProps} />;
-}
+const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
+  { className, variant = 'subtle', height = 'medium', ...inputProps },
+  ref,
+) {
+  return (
+    <input
+      ref={ref}
+      type='text'
+      className={cx([style.input, style[variant], style[height], className])}
+      {...inputProps}
+    />
+  );
+});
+
+export default Input;

apps/client/src/common/components/input/time-input/TimeInput.module.scss

@@ -1,4 +1,7 @@
 .timeInput {
-    letter-spacing: 1px;
-    width: 6.5em;
+  width: 100%;
+  max-width: 7.5em;
+  letter-spacing: 1px;
+  font-size: 1rem;
+  font-variant-numeric: tabular-nums;
 }

apps/client/src/common/components/input/time-input/TimeInput.tsx

@@ -1,15 +1,18 @@
 import { FocusEvent, KeyboardEvent, useCallback, useEffect, useRef, useState } from 'react';
-import { Input } from '@chakra-ui/react';
 import { millisToString, parseUserTime } from 'ontime-utils';
 
 import { useEmitLog } from '../../../stores/logger';
+import { cx } from '../../../utils/styleUtils';
+import Input from '../input/Input';
+
+import style from './TimeInput.module.scss';
 
 interface TimeInputProps<T extends string> {
   id?: T;
   name: T;
   submitHandler: (field: T, value: string) => void;
   time?: number;
-  placeholder: string;
+  placeholder?: string;
   disabled?: boolean;
   align?: 'left' | 'center';
   className?: string;
@@ -27,6 +30,9 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
    */
   const resetValue = useCallback(() => {
     try {
+      if (typeof time !== 'number' || isNaN(time)) {
+        throw new Error(`Invalid time value: ${time}`);
+      }
       setValue(millisToString(time));
     } catch (error) {
       setValue(millisToString(0));
@@ -121,24 +127,20 @@ export default function TimeInput<T extends string>(props: TimeInputProps<T>) {
     <Input
       id={id}
       disabled={disabled}
-      size='sm'
       ref={inputRef}
       data-testid={`time-input-${name}`}
-      className={className}
-      fontSize='1rem'
-      type='text'
+      className={cx([style.timeInput, className])}
       placeholder={placeholder}
-      variant='ontime-filled'
       onFocus={handleFocus}
       onChange={(event) => setValue(event.target.value)}
       onBlur={onBlurHandler}
       onKeyDown={onKeyDownHandler}
       value={value}
       maxLength={8}
-      maxWidth='7.5em'
-      letterSpacing='1px'
       autoComplete='off'
-      textAlign={align}
+      style={{
+        textAlign: align,
+      }}
     />
   );
 }