completely refactor patterns atom workflow.

src/page-components/pattern-library/PatternDetail.module.css

@@ -9,7 +9,9 @@
     gap: calc(var(--spacing) * 2);
   }
   .empty_promption {
-    flex: 1;
+    flex: 2;
+    border-radius: calc(var(--border-radius) * 2);
+    background-color: var(--color-surface-container);
     display: flex;
     flex-direction: column;
     align-items: stretch;

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

@@ -1,6 +1,6 @@
 import { useAtomValue } from 'jotai';
 import { FC } from 'react';
-import { CurrentPatternAtom } from '../../context/Patterns';
+import { CurrentPatternAtom, Pattern } from '../../context/Patterns';
 import styles from './PatternDetail.module.css';
 
 const EmptyPromption: FC = () => {
@@ -14,10 +14,14 @@ const EmptyPromption: FC = () => {
   );
 };
 
+const Detail: FC<{ pattern: Pattern }> = ({ pattern }) => {
+  return <div className={styles.pattern_detail}></div>;
+};
+
 const PatternDetail: FC = () => {
   const currentPattern = useAtomValue(CurrentPatternAtom);
 
-  return <div className={styles.pattern_detail}>{!currentPattern && <EmptyPromption />}</div>;
+  return !currentPattern ? <EmptyPromption /> : <Detail pattern={currentPattern} />;
 };
 
 export default PatternDetail;

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

@@ -1,29 +1,35 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
 import cx from 'clsx';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } 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';
+import {
+  Pattern,
+  PatternsAtom,
+  SearchKeywordAtom,
+  SelectedPatternIdAtom,
+  totalDuration,
+} from '../../context/Patterns';
 import styles from './Patterns.module.css';
 
 const PatternCard: FC<{ pattern: Pattern }> = ({ pattern }) => {
-  const [currentPattern, setCurrentPattern] = useAtom(CurrentPatternAtom);
+  const [selectedId, setSelectedId] = useAtom(SelectedPatternIdAtom);
   const navigate = useNavigate();
   const duration = useMemo(() => {
     return totalDuration(pattern) / 1000;
   }, [pattern]);
-  const selected = useMemo(() => currentPattern?.id === pattern.id, [currentPattern, pattern]);
+  const selected = useMemo(() => selectedId === pattern.id, [selectedId, pattern]);
   const handleSingleClick = useCallback(() => {
-    if (currentPattern?.id === pattern.id) {
-      setCurrentPattern(null);
+    if (selectedId === pattern.id) {
+      setSelectedId(null);
     } else {
-      setCurrentPattern(pattern);
+      setSelectedId(pattern.id);
     }
-  }, [pattern, currentPattern]);
+  }, [pattern, selectedId]);
   const handleDblClick = useCallback(() => {
-    setCurrentPattern(pattern);
+    setSelectedId(pattern.id);
     navigate('/pattern-editor/edit');
   }, [pattern]);
 
@@ -40,8 +46,14 @@ const PatternCard: FC<{ pattern: Pattern }> = ({ pattern }) => {
 
 const Patterns: FC = () => {
   const [rawKeyword, setRawKeyword] = useState<string>('');
-  const [keyword, setKeyword] = useState<string | null>(null);
-  const patterns = useAtomValue(PatternsAtom(keyword));
+  const [keyword, setKeyword] = useAtom(SearchKeywordAtom);
+  const patterns = useAtomValue(PatternsAtom);
+  const setPatternSelection = useSetAtom(SelectedPatternIdAtom);
+  const navigate = useNavigate();
+  const createNewAction = useCallback(() => {
+    setPatternSelection(null);
+    navigate('/pattern-editor/new');
+  }, []);
 
   useDebounce(
     () => {
@@ -67,7 +79,7 @@ const Patterns: FC = () => {
             onChange={(evt) => setRawKeyword(evt.currentTarget.value)}
           />
         </div>
-        <button className="tonal secondary">
+        <button className="tonal secondary" onClick={createNewAction}>
           <Icon icon="material-symbols-light:add" />
           New Pattern
         </button>