search-panel.diff

search-panel.diff

diff --git a/translate/src/modules/search/components/SearchBox.tsx b/translate/src/modules/search/components/SearchBox.tsx
index f4cd3c37d..06e533e80 100644
--- a/translate/src/modules/search/components/SearchBox.tsx
+++ b/translate/src/modules/search/components/SearchBox.tsx
@@ -21,6 +21,7 @@ import { getAuthorsAndTimeRangeData } from '../actions';
 import { FILTERS_EXTRA, FILTERS_STATUS } from '../constants';

 import { FiltersPanel } from './FiltersPanel';
+import { SearchPanel } from './SearchPanel';
 import './SearchBox.css';

 export type TimeRangeType = {
@@ -245,9 +246,6 @@ export function SearchBoxBase({

   return (
     <div className='search-box clearfix'>
-      <label htmlFor='search'>
-        <div className='fa fa-search'></div>
-      </label>
       <input
         id='search'
         ref={searchInput}
@@ -278,6 +276,7 @@ export function SearchBoxBase({
         setTimeRange={setTimeRange}
         updateFiltersFromURL={updateFiltersFromURL}
       />
+      <SearchPanel />
     </div>
   );
 }
diff --git a/translate/src/modules/search/components/SearchPanel.css b/translate/src/modules/search/components/SearchPanel.css
new file mode 100644
index 000000000..2f1df82ca
--- /dev/null
+++ b/translate/src/modules/search/components/SearchPanel.css
@@ -0,0 +1,73 @@
+.search-panel {
+  float: left;
+  font-size: 14px;
+}
+
+.search-panel .visibility-switch {
+  color: var(--light-grey-7);
+  cursor: pointer;
+  right: 0;
+  position: absolute;
+  width: 43px;
+}
+
+.search-panel .visibility-switch:hover :before {
+  color: var(--white-1);
+}
+
+.search-panel .visibility-switch .fa {
+  font-size: 17px;
+  margin-left: 10px;
+  margin-top: 9px;
+}
+
+.search-panel .menu {
+  background: var(--black-3);
+  border: 1px solid var(--main-border-1);
+  box-sizing: border-box;
+  position: absolute;
+  top: 44px;
+  width: 350px;
+  z-index: 20;
+}
+
+.search-panel .menu ul {
+  margin: 10px 12px;
+  list-style: none;
+}
+
+.search-panel .menu li {
+  color: var(--light-grey-7);
+  cursor: pointer;
+  font-weight: 300;
+  padding: 4px 2px;
+}
+
+.search-panel .menu li:hover {
+  color: var(--white-1);
+}
+
+.search-panel .menu li.title {
+  color: var(--status-translated-alt);
+  cursor: default;
+  font-size: 13px;
+  font-weight: 300;
+  height: auto;
+  margin: 5px 0;
+  padding: 5px 0 0;
+}
+
+.search-panel .menu li.check-box i {
+  font-size: 16px;
+  padding-right: 10px;
+}
+
+.search-panel .menu li.check-box .fa:before {
+  color: var(--status-error);
+  content: '';
+}
+
+.search-panel .menu li.check-box.enabled .fa:before {
+  color: var(--status-translated);
+  content: '';
+}
diff --git a/translate/src/modules/search/components/SearchPanel.tsx b/translate/src/modules/search/components/SearchPanel.tsx
new file mode 100644
index 000000000..2efc6309e
--- /dev/null
+++ b/translate/src/modules/search/components/SearchPanel.tsx
@@ -0,0 +1,54 @@
+import { Localized } from '@fluent/react';
+import React, { useCallback, useState } from 'react';
+
+import { useOnDiscard } from '~/utils';
+
+import './SearchPanel.css';
+
+type SearchPanelProps = {
+  onDiscard: () => void;
+};
+
+export function SearchPanelDialog({
+  onDiscard,
+}: SearchPanelProps): React.ReactElement<'div'> {
+  const ref = React.useRef(null);
+  useOnDiscard(ref, onDiscard);
+
+  return (
+    <div className='menu' ref={ref}>
+      <ul>
+        <li className='title'>SEARCH OPTIONS</li>
+        <li className='check-box'>
+          <i className='fa fa-fw'></i>
+          <span className='label'>Search message identifiers</span>
+        </li>
+        <li className='check-box enabled'>
+          <i className='fa fa-fw'></i>
+          <span className='label'>Demonstrate checked state</span>
+        </li>
+      </ul>
+    </div>
+  );
+}
+
+export function SearchPanel(): React.ReactElement<'div'> | null {
+  const [visible, setVisible] = useState(false);
+
+  const toggleVisible = useCallback(() => {
+    setVisible((prev) => !prev);
+  }, []);
+
+  const handleDiscard = useCallback(() => {
+    setVisible(false);
+  }, []);
+
+  return (
+    <div className='search-panel'>
+      <div className='visibility-switch' onClick={toggleVisible}>
+        <span className='fa fa-search'></span>
+      </div>
+      {visible ? <SearchPanelDialog onDiscard={handleDiscard} /> : null}
+    </div>
+  );
+}