Add "Find a gene" link to GB sidebar (#767)

src/content/app/genome-browser/components/track-panel/components/track-panel-list/TrackPanelList.scss

@@ -4,6 +4,7 @@
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   height: 100%;
   overflow-x: hidden;
   overflow-y: auto;
@@ -28,7 +29,6 @@
 
   .trackPanelAccordion {
     border: none;
-    margin-top: 30px;
   }
 
   .trackPanelAccordionHeader {
@@ -41,6 +41,7 @@
     padding: 5px 15px 5px 17px;
     border-radius: 5px;
     font-size: 12px;
+
     &:before,
     &:after {
       margin-top: -3px;
@@ -61,3 +62,17 @@
     padding: 10px 0 20px;
   }
 }
+
+.findAGene {
+  color: $blue;
+  cursor: pointer;
+  margin: 30px 0 20px 10px;
+  display: inline-flex;
+  align-items: center;
+  column-gap: 12px;
+
+  svg {
+    fill: $blue;
+    width: 13px;
+  }
+}

src/content/app/genome-browser/components/track-panel/components/track-panel-list/TrackPanelList.tsx

@@ -18,6 +18,8 @@ import React, { memo } from 'react';
 import { useSelector } from 'react-redux';
 import classNames from 'classnames';
 
+import { useAppDispatch } from 'src/store';
+
 import { GenomeTrackCategory } from 'src/shared/state/genome/genomeTypes';
 import { FocusObjectTrack } from 'src/shared/types/focus-object/focusObjectTypes';
 import {
@@ -26,6 +28,10 @@ import {
 } from 'src/content/app/genome-browser/state/browser-general/browserGeneralSelectors';
 import { getSelectedTrackPanelTab } from 'src/content/app/genome-browser/state/track-panel/trackPanelSelectors';
 import { getGenomeTrackCategoriesById } from 'src/shared/state/genome/genomeSelectors';
+import {
+  BrowserSidebarModalView,
+  openBrowserSidebarModal
+} from 'src/content/app/genome-browser/state/browser-sidebar-modal/browserSidebarModalSlice';
 
 import TrackPanelGene from './track-panel-items/TrackPanelGene';
 import TrackPanelRegularItem from './track-panel-items/TrackPanelRegularItem';
@@ -36,6 +42,7 @@ import {
   AccordionItemButton,
   AccordionItemPanel
 } from 'src/shared/components/accordion';
+import SearchIcon from 'static/icons/icon_search.svg';
 
 import styles from './TrackPanelList.scss';
 
@@ -44,11 +51,16 @@ export const TrackPanelList = () => {
   const activeFocusObject = useSelector(getBrowserActiveFocusObject);
   const selectedTrackPanelTab = useSelector(getSelectedTrackPanelTab);
   const genomeTrackCategories = useSelector(getGenomeTrackCategoriesById);
+  const dispatch = useAppDispatch();
 
   if (!activeGenomeId) {
     return null; // will never happen, but makes typescript happy
   }
 
+  const openSearch = () => {
+    dispatch(openBrowserSidebarModal(BrowserSidebarModalView.SEARCH));
+  };
+
   const currentTrackCategories = genomeTrackCategories?.filter(
     (category: GenomeTrackCategory) =>
       category.types.includes(selectedTrackPanelTab)
@@ -71,6 +83,12 @@ export const TrackPanelList = () => {
           />
         </section>
       ) : null}
+
+      <div className={styles.findAGene} onClick={openSearch}>
+        <span>Find a gene</span>
+        <SearchIcon />
+      </div>
+
       <div className={styles.accordionContainer}>
         <Accordion
           className={styles.trackPanelAccordion}