[Phylo] UI for websearch

src/Gargantext/Components/PhyloExplorer/Sidebar/DocList.purs

@@ -11,7 +11,7 @@ import Data.Sequence as Seq
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (Variant(..))
+import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.FacetsTable (DocumentsView(..), Rows(..), publicationDate, initialPageGQL, loadPageGQL)
 import Gargantext.Components.PhyloExplorer.Store as PhyloStore
 import Gargantext.Components.PhyloExplorer.Types (CorpusId, DocId, FrameDoc(..), ListId)
@@ -143,6 +143,8 @@ docListCpt = here.component "main" cpt where
     frameDoc' <-
       R2.useLive' frameDoc
 
+    buttonState <- T.useBox false
+
     -- | Hooks
     -- |
 
@@ -223,7 +225,12 @@ docListCpt = here.component "main" cpt where
           R2.when (not $ eq results Seq.empty) $
           H.div {}
           [
-            H.h6 {} [ H.text $ show (Seq.length results) <> " related documents"]
+            H.ul { className: "flex-row list-group vertical-align-middle" } 
+              [ H.li {} [ andOrButton { state: buttonState } ]
+              , H.li {} [ H.h6 {} [ H.text $ show (Seq.length results) <> " related documents" ] ]
+              , H.li {} [ B.iconButton { name: "search", title: "Search the web", callback: \_ -> pure unit} ]
+              , H.li {} [ B.iconButton { name: "wikipedia-w", title: "Search Wikipedia", callback: \_ -> pure unit} ]
+              ]
             ,
             H.ul
               { className: intercalate " "
@@ -334,3 +341,46 @@ itemCpt = here.component "item" cpt where
           ]
         ]
       ]
+
+---------------------------------------------------------
+
+type AndOrButtonProps =
+  ( state :: T.Box Boolean
+  )
+
+andOrButton :: R2.Leaf AndOrButtonProps
+andOrButton = R2.leaf andOrButtonCpt
+andOrButtonCpt :: R.Component AndOrButtonProps
+andOrButtonCpt = here.component "andOrButton" cpt
+  where
+    cpt { state } _ = do
+      state' <- R2.useLive' state
+
+      pure $
+        H.div
+        { className: intercalate " "
+            [ "btn-group"
+            , "align-items-center"
+            ]
+        , role: "group"
+        }
+        [
+          B.button
+          { className: "btn-sm"
+          , callback: \_ -> T.write_ false state
+          , variant: state' ?
+              OutlinedButtonVariant Secondary $
+              ButtonVariant Secondary
+          }
+          [ H.text "AND" ]
+        ,
+          B.button
+          { className: "btn-sm"
+          , callback: \_ -> T.write_ true state
+          , variant: state' ?
+              ButtonVariant Secondary $
+              OutlinedButtonVariant Secondary
+          }
+          [ H.text "OR" ]
+        ]
+