feat: scroll the new timer into view

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

@@ -3,6 +3,7 @@ import { useState, useMemo } from 'react';
 import { Field } from './field';
 
 import { useCountdownTimers } from '@/stores/countdown-timers';
+import { waitUntil } from '@/helpers/wait';
 
 import styles from './form.module.css';
 
@@ -19,17 +20,23 @@ export function Form() {
 
   const add = useCountdownTimers(state => state.add);
 
-  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+  const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
 
     if (totalSeconds === 0) return;
 
-    add({
+    const id = add({
       name,
       total: totalSeconds,
     });
 
     setName('');
+
+    await waitUntil(() => !!document.getElementById(`timer-${id}`), 50);
+
+    document
+      .getElementById(`timer-${id}`)
+      ?.scrollIntoView({ behavior: 'smooth' });
   };
 
   return (

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

@@ -139,7 +139,7 @@ export function Timer({ id }: TimerProps) {
   }, [isRunning, tick, id, spent, total, left]);
 
   return (
-    <div className={styles.timer}>
+    <div className={styles.timer} id={`timer-${id}`}>
       <header className={styles.header}>
         <div className={styles.bar}>
           <div

src/helpers/wait.ts

@@ -0,0 +1,20 @@
+export function waitUntil(
+  func: () => boolean,
+  interval: number,
+): Promise<void> {
+  return new Promise((resolve, reject) => {
+    const intervalId = setInterval(() => {
+      try {
+        const result = func();
+
+        if (result) {
+          clearInterval(intervalId);
+          resolve();
+        }
+      } catch (error) {
+        clearInterval(intervalId);
+        reject(error);
+      }
+    }, interval);
+  });
+}

src/stores/countdown-timers/index.ts

@@ -16,7 +16,7 @@ interface State {
 }
 
 interface Actions {
-  add: (timer: { name: string; total: number }) => void;
+  add: (timer: { name: string; total: number }) => string;
   delete: (id: string) => void;
   getTimer: (id: string) => Timer;
   rename: (id: string, newName: string) => void;
@@ -28,17 +28,21 @@ export const useCountdownTimers = create<State & Actions>()(
   persist(
     (set, get) => ({
       add({ name, total }) {
+        const id = uuid();
+
         set(state => ({
           timers: [
             {
-              id: uuid(),
+              id,
               name,
               spent: 0,
               total,
             },
             ...state.timers,
           ],
         }));
+
+        return id;
       },
 
       delete(id) {