2 files changed, 71 insertions, 0 deletions
diff --git a/plugins/base/frontend/src/main/components/app/index.scss b/plugins/base/frontend/src/main/components/app/index.scss
new file mode 100644
index 00000000..c267bc6e
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/app/index.scss
@@ -0,0 +1,21 @@
+@import "src/main/scss/index.scss";
+
+html,
+.app-root {
+  height: 100%;
+}
+
+.search-root {
+  margin: 0;
+  padding: 0;
+
+  background: var(--ring-content-background-color);
+
+  font-family: var(--ring-font-family);
+  font-size: var(--ring-font-size);
+  line-height: var(--ring-line-height);
+}
+
+.search-content {
+  padding: 24px 41px;
+}
diff --git a/plugins/base/frontend/src/main/components/app/index.tsx b/plugins/base/frontend/src/main/components/app/index.tsx
new file mode 100644
index 00000000..1a51e699
--- /dev/null
+++ b/plugins/base/frontend/src/main/components/app/index.tsx
@@ -0,0 +1,50 @@
+import React, {useEffect, useRef, useState} from 'react';
+import {WithFuzzySearchFilter} from '../search/search';
+import './index.scss';
+
+function useComponentVisible(initialIsVisible: boolean) {
+    const [isComponentVisible, setIsComponentVisible] = useState(initialIsVisible);
+    const ref = useRef(null);
+
+    const handleHideDropdown = (event: KeyboardEvent) => {
+        if (event.key === "Escape") {
+            setIsComponentVisible(false);
+        }
+    };
+
+    const handleClickOutside = (event : MouseEvent)=> {
+        // @ts-ignore
+        if (ref.current && !ref.current.contains(event.target)) {
+            setIsComponentVisible(false);
+        }
+    };
+
+    useEffect(() => {
+        document.addEventListener("keydown", handleHideDropdown, false);
+        document.addEventListener("click", handleClickOutside, false);
+        return () => {
+            document.removeEventListener("keydown", handleHideDropdown, false);
+            document.removeEventListener("click", handleClickOutside, false);
+        };
+    });
+
+    return { ref, isComponentVisible, setIsComponentVisible };
+}
+
+const App: React.FC = () => {
+    const {
+        ref,
+        isComponentVisible,
+        setIsComponentVisible
+    } = useComponentVisible(false);
+
+    return <div ref={ref} className="search-content">
+        {isComponentVisible && (<WithFuzzySearchFilter/>)}
+        {!isComponentVisible && (
+            <span onClick={() => setIsComponentVisible(true)}>
+                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><path d="M19.64 18.36l-6.24-6.24a7.52 7.52 0 1 0-1.28 1.28l6.24 6.24zM7.5 13.4a5.9 5.9 0 1 1 5.9-5.9 5.91 5.91 0 0 1-5.9 5.9z"/></svg>
+          </span>)}
+    </div>
+}
+
+export default App