comprehensively completed common control operations in Pattern List

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

@@ -1,14 +1,29 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
-import { FC } from 'react';
+import { useAtom } from 'jotai';
+import { FC, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
 import EditableContent from '../../components/EditableContent';
+import { CurrentPatternAtom } from '../../context/Patterns';
 import styles from './PatternHeader.module.css';
 
 const PatternHeader: FC = () => {
+  const navigate = useNavigate();
+  const [currentPattern, setPattern] = useAtom(CurrentPatternAtom);
+  const handleClosePattern = useCallback(() => {
+    setPattern(null);
+    navigate('/library');
+  }, [currentPattern]);
+
   return (
     <div className={styles.pattern_header}>
-      <EditableContent as="h3" placeholder="Pattern Name" additionalClassName={styles.content} />
+      <EditableContent
+        as="h3"
+        placeholder="Pattern Name"
+        value={currentPattern?.name ?? null}
+        additionalClassName={styles.content}
+      />
       <div className="spacer" />
-      <button className="tonal">
+      <button className="tonal" onClick={handleClosePattern}>
         <Icon icon="material-symbols-light:close" />
         Close Edit
       </button>

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}>
+      onClick={handleSingleClick}
-      <h6 className={styles.name}>{pattern.name}</h6>
+      onDoubleClick={handleDblClick}>
+      <h5 className={styles.name}>{pattern.name}</h5>
       <span>{duration.toFixed(2)} s</span>
     </div>
   );