From d0c1ee2adb312512632f8908752fa8da2b6af0b9 Mon Sep 17 00:00:00 2001
From: Vixalie <vixalie@outlook.com>
Date: Mon, 10 Mar 2025 21:36:47 +0800
Subject: [PATCH] add basic layout for Pattern Library.

---
 src/context/Patterns.tsx                      |  4 +-
 .../pattern-library/Patterns.module.css       | 19 +++++++-
 .../pattern-library/Patterns.tsx              | 46 +++++++++++++++++--
 3 files changed, 63 insertions(+), 6 deletions(-)

diff --git a/src/context/Patterns.tsx b/src/context/Patterns.tsx
index 02fc97b..2dbd8ed 100644
--- a/src/context/Patterns.tsx
+++ b/src/context/Patterns.tsx
@@ -1,7 +1,7 @@
 import { invoke } from '@tauri-apps/api/core';
 import dayjs from 'dayjs';
 import { atom } from 'jotai';
-import { atomFamily } from 'jotai/utils';
+import { atomFamily, atomWithRefresh } from 'jotai/utils';
 import { get, reduce } from 'lodash-es';
 import { v4 } from 'uuid';
 
@@ -121,7 +121,7 @@ export function totalDuration(pattern: Pattern): number {
 }
 
 export const PatternsAtom = atomFamily((keyword: string) =>
-  atom(async () => {
+  atomWithRefresh(async () => {
     try {
       const patterns = await invoke<Pattern[]>('list_patterns', { keyword });
       return patterns;
diff --git a/src/page-components/pattern-library/Patterns.module.css b/src/page-components/pattern-library/Patterns.module.css
index 94c2d18..fb9d34e 100644
--- a/src/page-components/pattern-library/Patterns.module.css
+++ b/src/page-components/pattern-library/Patterns.module.css
@@ -1,10 +1,27 @@
 @layer pages {
-  .pattern_list {
+  .patterns {
     min-width: 0;
     min-height: 0;
     overflow: hidden;
     flex: 1;
     border-radius: calc(var(--border-radius) * 2);
     background-color: var(--color-surface-container);
+    padding: calc(var(--spacing) * 2);
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 2);
+    .search_row {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      gap: calc(var(--spacing));
+    }
+  }
+  .pattern_list {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: calc(var(--spacing) * 2);
   }
 }
diff --git a/src/page-components/pattern-library/Patterns.tsx b/src/page-components/pattern-library/Patterns.tsx
index 7b78a33..2309e18 100644
--- a/src/page-components/pattern-library/Patterns.tsx
+++ b/src/page-components/pattern-library/Patterns.tsx
@@ -1,11 +1,51 @@
-import { FC } from 'react';
+import { Icon } from '@iconify/react/dist/iconify.js';
+import cx from 'clsx';
+import { useAtomValue } from 'jotai';
+import { FC, useState } from 'react';
+import { useDebounce } from 'react-use';
 import { ScrollArea } from '../../components/ScrollArea';
+import { PatternsAtom } from '../../context/Patterns';
 import styles from './Patterns.module.css';
 
 const Patterns: FC = () => {
+  const [rawKeyword, setRawKeyword] = useState<string>('');
+  const [keyword, setKeyword] = useState<string | null>(null);
+  const patterns = useAtomValue(PatternsAtom(keyword));
+
+  useDebounce(
+    () => {
+      if (rawKeyword.trim().length > 0) {
+        setKeyword(rawKeyword.trim());
+      } else {
+        setKeyword(null);
+      }
+    },
+    1500,
+    [rawKeyword],
+  );
+
   return (
-    <div className={styles.pattern_list}>
-      <ScrollArea enableY></ScrollArea>
+    <div className={styles.patterns}>
+      <div className={styles.search_row}>
+        <div className={cx('input_wrapper', 'extendable')}>
+          <Icon icon="material-symbols-light:search" />
+          <input
+            type="text"
+            placeholder="Search patterns..."
+            value={rawKeyword}
+            onChange={(evt) => setRawKeyword(evt.currentTarget.value)}
+          />
+        </div>
+        <button className="tonal secondary">
+          <Icon icon="material-symbols-light:add" />
+          New Pattern
+        </button>
+      </div>
+      <ScrollArea enableY>
+        <div className={styles.pattern_list}>
+          {patterns.length === 0 && <div className="empty_prompt">No pattern found.</div>}
+        </div>
+      </ScrollArea>
     </div>
   );
 };