update pattern card action.

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

@@ -24,4 +24,28 @@
     align-items: stretch;
     gap: calc(var(--spacing) * 2);
   }
+  .pattern_card {
+    padding: calc(var(--spacing) * 3) calc(var(--spacing) * 2);
+    border-radius: calc(var(--border-radius) * 2);
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: calc(var(--spacing) * 2);
+    box-shadow: var(--elevation-0);
+    .name {
+      flex: 1;
+    }
+    &.selected {
+      background-color: color-mix(in oklch, var(--color-on-surface) 18%, transparent);
+    }
+    &:hover {
+      background-color: color-mix(in oklch, var(--color-on-surface) 8%, transparent);
+      box-shadow: var(--elevation-2-ambient), var(--elevation-2-umbra);
+    }
+    &:active {
+      background-color: color-mix(in oklch, var(--color-on-surface) 18%, transparent);
+    }
+  }
 }

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

@@ -1,12 +1,36 @@
 import { Icon } from '@iconify/react/dist/iconify.js';
 import cx from 'clsx';
-import { useAtomValue } from 'jotai';
-import { FC, useState } from 'react';
+import { useAtom, useAtomValue } from 'jotai';
+import { FC, useCallback, useMemo, useState } from 'react';
 import { useDebounce } from 'react-use';
 import { ScrollArea } from '../../components/ScrollArea';
-import { PatternsAtom } from '../../context/Patterns';
+import { CurrentPatternAtom, Pattern, PatternsAtom, totalDuration } from '../../context/Patterns';
 import styles from './Patterns.module.css';
 
+const PatternCard: FC<{ pattern: Pattern }> = ({ pattern }) => {
+  const [currentPattern, setCurrentPattern] = useAtom(CurrentPatternAtom);
+  const duration = useMemo(() => {
+    return totalDuration(pattern) / 1000;
+  }, [pattern]);
+  const selected = useMemo(() => currentPattern?.id === pattern.id, [currentPattern, pattern]);
+  const handleSingleClick = useCallback(() => {
+    if (currentPattern?.id === pattern.id) {
+      setCurrentPattern(null);
+    } else {
+      setCurrentPattern(pattern);
+    }
+  }, [pattern, currentPattern]);
+
+  return (
+    <div
+      className={cx(styles.pattern_card, selected && styles.selected)}
+      onClick={handleSingleClick}>
+      <h6 className={styles.name}>{pattern.name}</h6>
+      <span>{duration.toFixed(2)} s</span>
+    </div>
+  );
+};
+
 const Patterns: FC = () => {
   const [rawKeyword, setRawKeyword] = useState<string>('');
   const [keyword, setKeyword] = useState<string | null>(null);
@@ -44,6 +68,9 @@ const Patterns: FC = () => {
       <ScrollArea enableY>
         <div className={styles.pattern_list}>
           {patterns.length === 0 && <div className="empty_prompt">No pattern found.</div>}
+          {patterns.map((p) => (
+            <PatternCard key={p.id} pattern={p} />
+          ))}
         </div>
       </ScrollArea>
     </div>