From 14fbdca9aa1a23553ea4511e0c43ad2e2f015c86 Mon Sep 17 00:00:00 2001
From: Jakub Biesiada <kbba@op.pl>
Date: Sun, 16 May 2021 20:03:25 +0200
Subject: [PATCH 1/3] docs: add preview to README (#102)

---
 README.md    | 4 ++++
 assets/.keep | 0
 2 files changed, 4 insertions(+)
 create mode 100644 assets/.keep

diff --git a/README.md b/README.md
index 9b85a42..53c6335 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,10 @@
 [![GitHub license](https://img.shields.io/github/license/pluginsky/invert-color?style=flat-square)](https://github.com/pluginsky/invert-color)
 [![Travis](https://img.shields.io/travis/pluginsky/invert-color/master?style=flat-square)](https://travis-ci.org/pluginsky/invert-color)
 
+<p align="center">
+  <img width="420" src="https://raw.githubusercontent.com/pluginsky/invert-color/main/assets/preview.jpg" alt="TODO">
+</p>
+
 ## About
 
 Simply invert fills, strokes & effects colors in Figma
diff --git a/assets/.keep b/assets/.keep
new file mode 100644
index 0000000..e69de29

From 692bdfc340e4a3271a6fdbdb91c47a5206f85d9a Mon Sep 17 00:00:00 2001
From: Jakub Biesiada <kbba@op.pl>
Date: Sun, 16 May 2021 22:22:09 +0200
Subject: [PATCH 2/3] feat: add sticky search field (#81)

---
 .../Configurator/Configurator.module.scss     |  1 +
 .../components/Elements/Elements.module.scss  | 12 +++++++++-
 src/ui/components/Elements/Elements.tsx       | 23 +++++++++++--------
 src/ui/ui.module.scss                         |  2 +-
 4 files changed, 26 insertions(+), 12 deletions(-)

diff --git a/src/ui/components/Configurator/Configurator.module.scss b/src/ui/components/Configurator/Configurator.module.scss
index 27cd45e..533fbb1 100644
--- a/src/ui/components/Configurator/Configurator.module.scss
+++ b/src/ui/components/Configurator/Configurator.module.scss
@@ -1,4 +1,5 @@
 .configurator {
+  // TODO
   margin-top: var(--size-xxsmall);
   margin-bottom: var(--size-xsmall);
 }
diff --git a/src/ui/components/Elements/Elements.module.scss b/src/ui/components/Elements/Elements.module.scss
index 1426c5d..695ef3f 100644
--- a/src/ui/components/Elements/Elements.module.scss
+++ b/src/ui/components/Elements/Elements.module.scss
@@ -1,7 +1,17 @@
 .toolbar {
   display: flex;
-  margin: var(--size-xxsmall) 0 var(--size-xsmall);
+  background-color: var(--white);
+  padding: var(--size-xxsmall);
+  // margin-bottom: var(--size-xxsmall); // TODO
   gap: var(--size-xxsmall);
+  border-bottom: 1px solid var(--silver);
+  z-index: 10;
+  position: sticky;
+  top: 0;
+}
+
+.elementsContent {
+  padding: 0 var(--size-xxsmall);
 }
 
 .search {
diff --git a/src/ui/components/Elements/Elements.tsx b/src/ui/components/Elements/Elements.tsx
index 891c3fe..9fa8e72 100644
--- a/src/ui/components/Elements/Elements.tsx
+++ b/src/ui/components/Elements/Elements.tsx
@@ -34,6 +34,7 @@ export const Elements = () => {
   }, [searchValue]);
 
   return (
+    // TODO classnames
     <div className={configurators.length > 0 ? undefined : styles.fullLayout}>
       <div className={styles.toolbar}>
         <Input
@@ -45,16 +46,18 @@ export const Elements = () => {
         />
       </div>
 
-      {configurators.length > 0 ? (
-        configurators.map(([group, options]) => (
-          <Configurator group={group} options={options} key={group} />
-        ))
-      ) : (
-        <MessageScreen
-          title="No results"
-          message="Parts, Nodes and Paints not found"
-        />
-      )}
+      <div className={styles.elementsContent}>
+        {configurators.length > 0 ? (
+          configurators.map(([group, options]) => (
+            <Configurator group={group} options={options} key={group} />
+          ))
+        ) : (
+          <MessageScreen
+            title="No results"
+            message="Parts, Nodes and Paints not found"
+          />
+        )}
+      </div>
     </div>
   );
 };
diff --git a/src/ui/ui.module.scss b/src/ui/ui.module.scss
index f8a2a89..003de3d 100644
--- a/src/ui/ui.module.scss
+++ b/src/ui/ui.module.scss
@@ -6,6 +6,6 @@
 
 .tabsContent {
   flex: 1;
-  padding: 0 var(--size-xxsmall);
+  // padding: 0 var(--size-xxsmall); // TODO
   overflow: auto;
 }

From 80b0bf7b60c682b88566b28942f3a9a3d0aaf074 Mon Sep 17 00:00:00 2001
From: Jakub Biesiada <kbba@op.pl>
Date: Sun, 16 May 2021 22:42:17 +0200
Subject: [PATCH 3/3] feat: remember search value after tab switch (#103)

---
 src/ui/components/Elements/Elements.tsx |  3 ++-
 src/ui/hooks/useSearch.ts               | 11 +++++++++++
 2 files changed, 13 insertions(+), 1 deletion(-)
 create mode 100644 src/ui/hooks/useSearch.ts

diff --git a/src/ui/components/Elements/Elements.tsx b/src/ui/components/Elements/Elements.tsx
index 9fa8e72..438eb89 100644
--- a/src/ui/components/Elements/Elements.tsx
+++ b/src/ui/components/Elements/Elements.tsx
@@ -5,6 +5,7 @@ import { Configurator } from '../Configurator/Configurator';
 import { availableOptions } from '../../../shared/constants/availableOptions';
 import { prepareOptionName } from '../../utils/prepareOptionName';
 import { MessageScreen } from '../MessageScreen/MessageScreen';
+import { useSearch } from '../../hooks/useSearch';
 import type { Group } from '../../types/Group';
 
 import styles from './Elements.module.scss';
@@ -16,7 +17,7 @@ const configuratorsEntries = Object.entries(
 ) as OptionsEntries[];
 
 export const Elements = () => {
-  const [searchValue, setSearchValue] = useState('');
+  const { searchValue, setSearchValue } = useSearch();
 
   const [configurators, setConfigurators] = useState(configuratorsEntries);
 
diff --git a/src/ui/hooks/useSearch.ts b/src/ui/hooks/useSearch.ts
new file mode 100644
index 0000000..ae85797
--- /dev/null
+++ b/src/ui/hooks/useSearch.ts
@@ -0,0 +1,11 @@
+import create from 'zustand';
+
+type State = {
+  readonly searchValue: string;
+  setSearchValue: (searchValue: string) => void;
+};
+
+export const useSearch = create<State>((set) => ({
+  searchValue: '',
+  setSearchValue: (searchValue) => set(() => ({ searchValue })),
+}));