feat: replace reverse timer

.eslintrc.json

@@ -41,6 +41,7 @@
     "sort-destructure-keys/sort-destructure-keys": "warn",
     "jsx-a11y/no-static-element-interactions": "off",
     "jsx-a11y/media-has-caption": "off",
+    "jsx-a11y/no-noninteractive-tabindex": "off",
     "react/jsx-sort-props": [
       "warn",
       {

src/components/toolbox/countdown-timer/timers/timer/reverse-timer/index.ts

@@ -1 +0,0 @@
-export { ReverseTimer } from './reverse-timer';

src/components/toolbox/countdown-timer/timers/timer/reverse-timer/reverse-timer.module.css

@@ -1,9 +0,0 @@
-.reverseTimer {
-  position: absolute;
-  top: 15px;
-  left: 50%;
-  font-size: var(--font-xsm);
-  color: var(--color-foreground-subtle);
-  letter-spacing: 1px;
-  transform: translate(-50%);
-}

src/components/toolbox/countdown-timer/timers/timer/reverse-timer/reverse-timer.tsx

@@ -1,21 +0,0 @@
-import { useMemo } from 'react';
-
-import { padNumber } from '@/helpers/number';
-
-import styles from './reverse-timer.module.css';
-
-interface ReverseTimerProps {
-  spent: number;
-}
-
-export function ReverseTimer({ spent }: ReverseTimerProps) {
-  const hours = useMemo(() => Math.floor(spent / 3600), [spent]);
-  const minutes = useMemo(() => Math.floor((spent % 3600) / 60), [spent]);
-  const seconds = useMemo(() => spent % 60, [spent]);
-
-  return (
-    <div className={styles.reverseTimer}>
-      -{padNumber(hours)}:{padNumber(minutes)}:{padNumber(seconds)}
-    </div>
-  );
-}

src/components/toolbox/countdown-timer/timers/timer/timer.module.css

@@ -118,6 +118,7 @@
     font-family: var(--font-mono);
     font-size: var(--font-2xlg);
     font-weight: 700;
+    cursor: pointer;
 
     & span {
       color: var(--color-foreground-subtle);

src/components/toolbox/countdown-timer/timers/timer/timer.tsx

@@ -1,12 +1,6 @@
 import { useRef, useMemo, useState, useEffect } from 'react';
-import {
-  IoPlay,
-  IoPause,
-  IoRefresh,
-  IoTrashOutline,
-} from 'react-icons/io5/index';
+import { IoPlay, IoPause, IoRefresh, IoTrashOutline } from 'react-icons/io5';
 
-import { ReverseTimer } from './reverse-timer';
 import { Toolbar } from './toolbar';
 
 import { useCountdownTimers } from '@/stores/countdown-timers';
@@ -31,25 +25,24 @@ export function Timer({ enableAnimations, id }: TimerProps) {
 
   const { first, last, name, spent, total } = useCountdownTimers(state =>
     state.getTimer(id),
-  ) || { name: '', spent: 0, total: 0 };
-
-  const [isDeleting, setIsDeleting] = useState(false);
-  const [snapshot, setSnapshot] = useState({ spent: 0, total: 0 });
-
+  );
   const tick = useCountdownTimers(state => state.tick);
   const rename = useCountdownTimers(state => state.rename);
   const reset = useCountdownTimers(state => state.reset);
   const deleteTimer = useCountdownTimers(state => state.delete);
 
-  const left = useMemo(
-    () => (isDeleting ? snapshot.total - snapshot.spent : total - spent),
-    [total, spent, isDeleting, snapshot],
-  );
+  const left = useMemo(() => total - spent, [total, spent]);
 
   const hours = useMemo(() => Math.floor(left / 3600), [left]);
   const minutes = useMemo(() => Math.floor((left % 3600) / 60), [left]);
   const seconds = useMemo(() => left % 60, [left]);
 
+  const [isReversed, setIsReversed] = useState(false);
+
+  const spentHours = useMemo(() => Math.floor(spent / 3600), [spent]);
+  const spentMinutes = useMemo(() => Math.floor((spent % 3600) / 60), [spent]);
+  const spentSeconds = useMemo(() => spent % 60, [spent]);
+
   const playAlarm = useAlarm();
 
   const showSnackbar = useSnackbar();
@@ -79,9 +72,6 @@ export function Timer({ enableAnimations, id }: TimerProps) {
 
     enableAnimations(false);
 
-    setIsDeleting(true);
-    setSnapshot({ spent, total });
-
     deleteTimer(id);
 
     setTimeout(() => enableAnimations(true), 100);
@@ -157,14 +147,30 @@ export function Timer({ enableAnimations, id }: TimerProps) {
 
       <Toolbar first={first} id={id} last={last} />
 
-      <ReverseTimer spent={spent} />
-
-      <div className={styles.left}>
-        {padNumber(hours)}
-        <span>:</span>
-        {padNumber(minutes)}
-        <span>:</span>
-        {padNumber(seconds)}
+      <div
+        className={styles.left}
+        tabIndex={0}
+        onClick={() => setIsReversed(prev => !prev)}
+        onKeyDown={() => setIsReversed(prev => !prev)}
+      >
+        {!isReversed ? (
+          <>
+            {padNumber(hours)}
+            <span>:</span>
+            {padNumber(minutes)}
+            <span>:</span>
+            {padNumber(seconds)}
+          </>
+        ) : (
+          <>
+            <span>-</span>
+            {padNumber(spentHours)}
+            <span>:</span>
+            {padNumber(spentMinutes)}
+            <span>:</span>
+            {padNumber(spentSeconds)}
+          </>
+        )}
       </div>
 
       <footer className={styles.footer}>