comprehensively completed common control operations in Pattern List

src/page-components/pattern-library/Patterns.tsx

@@ -2,6 +2,7 @@ import { Icon } from '@iconify/react/dist/iconify.js';
 import cx from 'clsx';
 import { useAtom, useAtomValue } from 'jotai';
 import { FC, useCallback, useMemo, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
 import { useDebounce } from 'react-use';
 import { ScrollArea } from '../../components/ScrollArea';
 import { CurrentPatternAtom, Pattern, PatternsAtom, totalDuration } from '../../context/Patterns';
@@ -9,6 +10,7 @@ import styles from './Patterns.module.css';
 
 const PatternCard: FC<{ pattern: Pattern }> = ({ pattern }) => {
   const [currentPattern, setCurrentPattern] = useAtom(CurrentPatternAtom);
+  const navigate = useNavigate();
   const duration = useMemo(() => {
     return totalDuration(pattern) / 1000;
   }, [pattern]);
@@ -20,12 +22,17 @@ const PatternCard: FC<{ pattern: Pattern }> = ({ pattern }) => {
       setCurrentPattern(pattern);
     }
   }, [pattern, currentPattern]);
+  const handleDblClick = useCallback(() => {
+    setCurrentPattern(pattern);
+    navigate('/pattern-editor/edit');
+  }, [pattern]);
 
   return (
     <div
       className={cx(styles.pattern_card, selected && styles.selected)}
-      onClick={handleSingleClick}>
-      <h6 className={styles.name}>{pattern.name}</h6>
+      onClick={handleSingleClick}
+      onDoubleClick={handleDblClick}>
+      <h5 className={styles.name}>{pattern.name}</h5>
       <span>{duration.toFixed(2)} s</span>
     </div>
   );