Add keyboard shortcut tooltip to search button

Author: hojberg

src/UnisonShare/Page/CodePage.elm

@@ -732,8 +732,8 @@ viewContent appContext perspective content =
             PageContent.oneColumn [ Html.map WorkspacePanesMsg (WorkspacePanes.view cfg workspace) ]
 
 
-viewSidebar : Model -> Sidebar Msg
-viewSidebar model =
+viewSidebar : AppContext -> Model -> Sidebar Msg
+viewSidebar appContext model =
     let
         codebaseTree =
             Just { codebaseTree = model.codebaseTree, codebaseTreeMsg = CodebaseTreeMsg }
@@ -749,6 +749,7 @@ viewSidebar model =
                     FQNSet.empty
     in
     CodePageContent.viewSidebar
+        appContext.operatingSystem
         model.config.perspective
         { upOneLevelMsg = UpOneLevel
         , showFinderModalMsg = ShowFinderModal
@@ -783,7 +784,7 @@ view appContext toMsg model =
         PerspectivePage _ ->
             ( PageLayout.sidebarLeftContentLayout
                 appContext.operatingSystem
-                (Sidebar.map toMsg (viewSidebar model))
+                (Sidebar.map toMsg (viewSidebar appContext model))
                 content
                 PageFooter.pageFooter
                 |> PageLayout.withSidebarToggle model.sidebarToggled
@@ -793,7 +794,7 @@ view appContext toMsg model =
         WorkspacePage _ ->
             ( PageLayout.sidebarEdgeToEdgeLayout
                 appContext.operatingSystem
-                (Sidebar.map toMsg (viewSidebar model))
+                (Sidebar.map toMsg (viewSidebar appContext model))
                 content
                 PageFooter.pageFooter
                 |> PageLayout.withSidebarToggle model.sidebarToggled

src/UnisonShare/Page/CodePageContent.elm

@@ -18,13 +18,16 @@ import Html exposing (Html, div, h3, text)
 import Html.Attributes exposing (class, classList)
 import Http
 import Lib.HttpApi as HttpApi
+import Lib.OperatingSystem exposing (OperatingSystem(..))
 import RemoteData exposing (RemoteData(..), WebData)
 import UI
 import UI.Button as Button
 import UI.Card as Card
 import UI.Click as Click
 import UI.ErrorCard as ErrorCard
 import UI.Icon as Icon
+import UI.KeyboardShortcut as KeyboardShortcut
+import UI.KeyboardShortcut.Key as Key exposing (Key(..))
 import UI.Placeholder as Placeholder
 import UI.Sidebar as Sidebar exposing (Sidebar)
 import UI.Tooltip as Tooltip
@@ -182,7 +185,8 @@ viewPerspectiveHeader changePerspectiveToNamespaceMsg upOneLevelMsg perspective
 
 
 viewSidebar :
-    Perspective
+    OperatingSystem
+    -> Perspective
     ->
         { upOneLevelMsg : msg
         , showFinderModalMsg : msg
@@ -191,14 +195,33 @@ viewSidebar :
     -> FQNSet
     -> Maybe { codebaseTree : CodebaseTree.Model, codebaseTreeMsg : CodebaseTree.Msg -> msg }
     -> Sidebar msg
-viewSidebar perspective cfg openDefinitions codebaseTree =
+viewSidebar os perspective cfg openDefinitions codebaseTree =
     let
         perspectiveHeader =
             viewPerspectiveHeader
                 cfg.changePerspectiveToNamespaceMsg
                 cfg.upOneLevelMsg
                 perspective
 
+        searchShortcuts =
+            case os of
+                MacOS ->
+                    [ KeyboardShortcut.Chord Meta (K Key.Lower)
+                    , KeyboardShortcut.single ForwardSlash
+                    ]
+
+                _ ->
+                    [ KeyboardShortcut.Chord Ctrl (K Key.Lower)
+                    , KeyboardShortcut.single ForwardSlash
+                    ]
+
+        searchButtonTooltip =
+            div [ class "sidebar-search_tooltip" ]
+                [ KeyboardShortcut.viewShortcuts
+                    (KeyboardShortcut.init os)
+                    searchShortcuts
+                ]
+
         codeSection =
             Maybe.map
                 (\c ->
@@ -211,6 +234,11 @@ viewSidebar perspective cfg openDefinitions codebaseTree =
                             )
                         ]
                         |> Sidebar.sectionWithTitleButton (Button.iconThenLabel cfg.showFinderModalMsg Icon.browse "Search" |> Button.small)
+                        |> Sidebar.sectionWithTitleButtonTooltip
+                            (Tooltip.tooltip (Tooltip.rich searchButtonTooltip)
+                                |> Tooltip.withPosition Tooltip.Below
+                                |> Tooltip.withArrow Tooltip.End
+                            )
                         |> Sidebar.sectionWithScrollable
                         |> Sidebar.sectionWithStickyHeader
                 )

src/css/unison-share/page/code-page.css

@@ -95,6 +95,13 @@
   height: initial;
 }
 
+.code-page .sidebar .sidebar-section_header .tooltip.below .tooltip-bubble {
+  min-width: auto;
+  width: max-content;
+  top: 2.25rem;
+  right: -4.5rem;
+}
+
 .code-page .perspective-tree-divider {
   display: flex;
   flex-grow: 1;