add pulse operation.

src/page-components/pattern-editor/PulseList.module.css

@@ -6,6 +6,15 @@
     align-items: center;
     gap: calc(var(--spacing) * 2);
   }
+  .attribute_unit {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--spacing));
+    label {
+      font-weight: bold;
+    }
+  }
   .pulses {
     min-width: 0;
     min-height: 0;
@@ -17,4 +26,10 @@
     flex-direction: column;
     align-items: stretch;
   }
+  .pulse_cards {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 2);
+  }
 }

src/page-components/pattern-editor/PulseList.tsx

@@ -1,19 +1,51 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
+import { useAtomValue } from 'jotai';
 import { FC } from 'react';
 import { ScrollArea } from '../../components/ScrollArea';
+import {
+  CurrentPatternAtom,
+  CurrentPatternDuration,
+  PulsesInCurrentPatternAtom,
+} from '../../context/Patterns';
 import styles from './PulseList.module.css';
 
 const PulseList: FC = () => {
+  const pattern = useAtomValue(CurrentPatternAtom);
+  const pulses = useAtomValue(PulsesInCurrentPatternAtom);
+  const duration = useAtomValue(CurrentPatternDuration);
+
   return (
     <>
       <div className={styles.pulse_tools}>
+        <button className="text">
+          <Icon icon="material-symbols-light:play-arrow-outline" />
+          <span>Test Run</span>
+        </button>
         <button className="text">
           <Icon icon="material-symbols-light:add" />
           <span>Add Pulse</span>
         </button>
+        <button className="text">
+          <Icon icon="material-symbols-light:delete-forever-outline" />
+          <span>Delete Selected</span>
+        </button>
+      </div>
+      <div className={styles.pulse_tools}>
+        <div className={styles.attribute_unit}>
+          <span>{pulses.length ?? 0}</span>
+          <label>Key Pulses</label>
+        </div>
+        <div className={styles.attribute_unit}>
+          <label>Total Duration</label>
+          <span>{duration.toFixed(2)} s</span>
+        </div>
       </div>
       <div className={styles.pulses}>
-        <ScrollArea enableY></ScrollArea>
+        <ScrollArea enableY>
+          <div className={styles.pulse_cards}>
+            {pulses.length === 0 && <div className="empty_prompt">No key pulses.</div>}
+          </div>
+        </ScrollArea>
       </div>
     </>
   );