From 57ba0e3d49d7606dd9a2ba2199c6aa0fb73ad7a3 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Tue, 11 Mar 2025 14:31:01 +0800
Subject: [PATCH] comprehensively completed common control operations in
 Pattern List

---
 .../pattern-editor/PatternHeader.tsx          | 21 ++++++++++++++++---
 .../pattern-library/Patterns.tsx              | 11 ++++++++--
 2 files changed, 27 insertions(+), 5 deletions(-)

diff --git a/src/page-components/pattern-editor/PatternHeader.tsx b/src/page-components/pattern-editor/PatternHeader.tsx
index 15532a2..6a7d135 100644
--- a/src/page-components/pattern-editor/PatternHeader.tsx
+++ b/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>
diff --git a/src/page-components/pattern-library/Patterns.tsx b/src/page-components/pattern-library/Patterns.tsx
index 3596a7d..ed6c6e0 100644
--- a/src/page-components/pattern-library/Patterns.tsx
+++ b/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>
   );