extract PatternPreview component styles.

src-tauri/src/config_db.rs

@@ -94,6 +94,7 @@ impl ConfigDb {
             .collect::<Vec<u8>>();
         db.remove(key)
             .map_err(|e| anyhow::anyhow!("Unable to remove pattern: {}", e))?;
+        // todo: need to remove requested pattern in all playlists.
         db.flush_async()
             .await
             .map_err(|e| anyhow::anyhow!("Unable to save db: {}", e))?;

src/components/PatternPreview.module.css

@@ -1,15 +1,10 @@
 @layer components {
   .pattern_preview {
-    flex-basis: 140px;
     display: flex;
     flex-direction: column;
     justify-content: flex-start;
     align-items: stretch;
     gap: calc(var(--spacing) * 2);
-    color: var(--color-on-surface);
-    background-color: var(--color-surface-container);
-    padding: calc(var(--spacing)) calc(var(--spacing) * 2);
-    border-radius: calc(var(--border-radius) * 2);
     .canvas_wrapper {
       flex: 1 0;
       canvas {

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

@@ -15,7 +15,13 @@ const EmptyPromption: FC = () => {
 };
 
 const Detail: FC<{ pattern: Pattern }> = ({ pattern }) => {
-  return <div className={styles.pattern_detail}></div>;
+  return (
+    <div className={styles.pattern_detail}>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+  );
 };
 
 const PatternDetail: FC = () => {

src/pages/PatternEditor.module.css

@@ -7,4 +7,11 @@
     align-items: stretch;
     gap: calc(var(--spacing) * 4);
   }
+  .pattern_preview {
+    flex-basis: 140px;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface-container);
+    padding: calc(var(--spacing)) calc(var(--spacing) * 2);
+    border-radius: calc(var(--border-radius) * 2);
+  }
 }

src/pages/PatternEditor.tsx

@@ -13,7 +13,9 @@ const PatternEditor: FC = () => {
         <PatternOverview />
         <PulseAttributes />
       </div>
-      <PatternPreview />
+      <div className={styles.pattern_preview}>
+        <PatternPreview />
+      </div>
     </div>
   );
 };