frontend: Add global ^K and / shortcuts (#787)

Closes https://github.com/NixOS/nixos-search/issues/762

frontend/elm-srcs.nix

@@ -1,27 +1,7 @@
 {
 
-      "krisajenkins/remotedata" = {
+      "NoRedInk/elm-json-decode-pipeline" = {
-        sha256 = "0m5bk0qhsjv14vajqrkph386696pnhj5rn51kgma8lwyvvx9ihw1";
+        sha256 = "0y25xn0yx1q2xlg1yx1i0hg4xq1yxx6yfa99g272z8162si75hnl";
-        version = "6.0.1";
-      };
-
-      "elm/json" = {
-        sha256 = "0kjwrz195z84kwywaxhhlnpl3p251qlbm5iz6byd6jky2crmyqyh";
-        version = "1.1.3";
-      };
-
-      "truqu/elm-base64" = {
-        sha256 = "12w68b4idbs2vn0gm0lj354pm745jb7n0fj69408mpvh5r1z4m1b";
-        version = "2.0.4";
-      };
-
-      "elm/regex" = {
-        sha256 = "0lijsp50w7n1n57mjg6clpn9phly8vvs07h0qh2rqcs0f1jqvsa2";
-        version = "1.0.0";
-      };
-
-      "elm/html" = {
-        sha256 = "1n3gpzmpqqdsldys4ipgyl1zacn0kbpc3g4v3hdpiyfjlgh8bf3k";
         version = "1.0.0";
       };
 
@@ -35,8 +15,8 @@
         version = "1.0.4";
       };
 
-      "elm/url" = {
+      "elm/html" = {
-        sha256 = "0av8x5syid40sgpl5vd7pry2rq0q4pga28b4yykn9gd9v12rs3l4";
+        sha256 = "1n3gpzmpqqdsldys4ipgyl1zacn0kbpc3g4v3hdpiyfjlgh8bf3k";
         version = "1.0.0";
       };
 
@@ -45,8 +25,18 @@
         version = "2.0.0";
       };
 
-      "NoRedInk/elm-json-decode-pipeline" = {
+      "elm/json" = {
-        sha256 = "0y25xn0yx1q2xlg1yx1i0hg4xq1yxx6yfa99g272z8162si75hnl";
+        sha256 = "0kjwrz195z84kwywaxhhlnpl3p251qlbm5iz6byd6jky2crmyqyh";
+        version = "1.1.3";
+      };
+
+      "elm/regex" = {
+        sha256 = "0lijsp50w7n1n57mjg6clpn9phly8vvs07h0qh2rqcs0f1jqvsa2";
+        version = "1.0.0";
+      };
+
+      "elm/url" = {
+        sha256 = "0av8x5syid40sgpl5vd7pry2rq0q4pga28b4yykn9gd9v12rs3l4";
         version = "1.0.0";
       };
 
@@ -55,6 +45,36 @@
         version = "2.3.4";
       };
 
+      "krisajenkins/remotedata" = {
+        sha256 = "0m5bk0qhsjv14vajqrkph386696pnhj5rn51kgma8lwyvvx9ihw1";
+        version = "6.0.1";
+      };
+
+      "leojpod/elm-keyboard-shortcut" = {
+        sha256 = "0p4m06ycimbiaffqzqzmwjlpcwsld82m9z4m6r52j6cswfy5rmdl";
+        version = "1.0.1";
+      };
+
+      "truqu/elm-base64" = {
+        sha256 = "12w68b4idbs2vn0gm0lj354pm745jb7n0fj69408mpvh5r1z4m1b";
+        version = "2.0.4";
+      };
+
+      "elm-community/json-extra" = {
+        sha256 = "10phb49jhfb2764zni5aivz59a06mjbggxlpqqza2iwn212h6m6j";
+        version = "4.3.0";
+      };
+
+      "elm-community/list-extra" = {
+        sha256 = "02grd0p5hc2gvdy4n723d1s28pm1grn95jrzic6jcgb26qh16vcc";
+        version = "8.7.0";
+      };
+
+      "elm-community/maybe-extra" = {
+        sha256 = "185jy9jxx3bqf0xl3rmdxfqqmxzcr084llf32glr6hgl5agshywk";
+        version = "5.3.0";
+      };
+
       "elm/bytes" = {
         sha256 = "02ywbf52akvxclpxwj9n04jydajcbsbcbsnjs53yjc5lwck3abwj";
         version = "1.0.8";
@@ -65,11 +85,6 @@
         version = "1.0.5";
       };
 
-      "rtfeldman/elm-hex" = {
-        sha256 = "1y0aa16asvwdqmgbskh5iba6psp43lkcjjw9mgzj3gsrg33lp00d";
-        version = "1.0.0";
-      };
-
       "elm/parser" = {
         sha256 = "0a3cxrvbm7mwg9ykynhp7vjid58zsw03r63qxipxp3z09qks7512";
         version = "1.1.0";
@@ -85,18 +100,28 @@
         version = "1.0.2";
       };
 
+      "rtfeldman/elm-hex" = {
+        sha256 = "1y0aa16asvwdqmgbskh5iba6psp43lkcjjw9mgzj3gsrg33lp00d";
+        version = "1.0.0";
+      };
+
+      "rtfeldman/elm-iso8601-date-strings" = {
+        sha256 = "1ah491kgyicgvy1c9myylqvhzb7ya9kgmn0hcsv23ymvqgaf6b1a";
+        version = "1.1.4";
+      };
+
       "elm-explorations/test" = {
         sha256 = "1fsd7bajm7qa93r5pn3mdafqh3blpzya601jbs9l238p0hmvh576";
         version = "1.2.2";
       };
 
-      "elm/svg" = {
-        sha256 = "1cwcj73p61q45wqwgqvrvz3aypjyy3fw732xyxdyj6s256hwkn0k";
-        version = "1.0.1";
-      };
-
       "elm/random" = {
         sha256 = "138n2455wdjwa657w6sjq18wx2r0k60ibpc4frhbqr50sncxrfdl";
         version = "1.0.0";
       };
+
+      "elm/svg" = {
+        sha256 = "1cwcj73p61q45wqwgqvrvz3aypjyy3fw732xyxdyj6s256hwkn0k";
+        version = "1.0.1";
+      };
 }

frontend/elm.json

@@ -1,39 +1,44 @@
 {
-  "type": "application",
+    "type": "application",
-  "source-directories": [
+    "source-directories": [
-    "src"
+        "src"
-  ],
+    ],
-  "elm-version": "0.19.1",
+    "elm-version": "0.19.1",
-  "dependencies": {
+    "dependencies": {
-    "direct": {
+        "direct": {
-      "NoRedInk/elm-json-decode-pipeline": "1.0.0",
+            "NoRedInk/elm-json-decode-pipeline": "1.0.0",
-      "elm/browser": "1.0.2",
+            "elm/browser": "1.0.2",
-      "elm/core": "1.0.4",
+            "elm/core": "1.0.4",
-      "elm/html": "1.0.0",
+            "elm/html": "1.0.0",
-      "elm/http": "2.0.0",
+            "elm/http": "2.0.0",
-      "elm/json": "1.1.3",
+            "elm/json": "1.1.3",
-      "elm/regex": "1.0.0",
+            "elm/regex": "1.0.0",
-      "elm/url": "1.0.0",
+            "elm/url": "1.0.0",
-      "hecrj/html-parser": "2.3.4",
+            "hecrj/html-parser": "2.3.4",
-      "krisajenkins/remotedata": "6.0.1",
+            "krisajenkins/remotedata": "6.0.1",
-      "truqu/elm-base64": "2.0.4"
+            "leojpod/elm-keyboard-shortcut": "1.0.1",
+            "truqu/elm-base64": "2.0.4"
+        },
+        "indirect": {
+            "elm/bytes": "1.0.8",
+            "elm/file": "1.0.5",
+            "elm/parser": "1.1.0",
+            "elm/time": "1.0.0",
+            "elm/virtual-dom": "1.0.2",
+            "elm-community/json-extra": "4.3.0",
+            "elm-community/list-extra": "8.7.0",
+            "elm-community/maybe-extra": "5.3.0",
+            "rtfeldman/elm-hex": "1.0.0",
+            "rtfeldman/elm-iso8601-date-strings": "1.1.4"
+        }
     },
-    "indirect": {
+    "test-dependencies": {
-      "elm/bytes": "1.0.8",
+        "direct": {
-      "elm/file": "1.0.5",
+            "elm-explorations/test": "1.2.2"
-      "elm/parser": "1.1.0",
+        },
-      "elm/time": "1.0.0",
+        "indirect": {
-      "elm/virtual-dom": "1.0.2",
+            "elm/random": "1.0.0",
-      "rtfeldman/elm-hex": "1.0.0"
+            "elm/svg": "1.0.1"
+        }
     }
-  },
-  "test-dependencies": {
-    "direct": {
-      "elm-explorations/test": "1.2.2"
-    },
-    "indirect": {
-      "elm/random": "1.0.0",
-      "elm/svg": "1.0.1"
-    }
-  }
 }

frontend/package.json

@@ -53,5 +53,8 @@
   },
   "prettier": {
     "tabWidth": 4
+  },
+  "dependencies": {
+    "elm-keyboard-shortcut": "^1.0.1"
   }
 }

frontend/src/Main.elm

@@ -1,6 +1,7 @@
 module Main exposing (main)
 
 import Browser
+import Browser.Dom
 import Browser.Navigation
 import Html
     exposing
@@ -38,6 +39,8 @@ import Search
         , decodeNixOSChannels
         , defaultFlakeId
         )
+import Shortcut
+import Task
 import Url
 
 
@@ -113,6 +116,8 @@ type Msg
     | PackagesMsg Page.Packages.Msg
     | OptionsMsg Page.Options.Msg
     | FlakesMsg Page.Flakes.Msg
+    | CtrlKRegistered
+    | SearchFocusResult (Result Browser.Dom.Error ())
 
 
 updateWith :
@@ -326,6 +331,9 @@ update msg model =
             Page.Flakes.update model.navKey subMsg subModel model.nixosChannels
                 |> updateWith Flakes FlakesMsg model
 
+        ( CtrlKRegistered, _ ) ->
+            ( model, Browser.Dom.focus "search-query-input" |> Task.attempt SearchFocusResult )
+
         _ ->
             -- Disregard messages that arrived for the wrong page.
             ( model, Cmd.none )
@@ -379,39 +387,52 @@ view model =
     in
     { title = title
     , body =
-        [ div []
+        [ Shortcut.shortcutElement
-            [ header []
+            [ { msg = CtrlKRegistered
-                [ div [ class "navbar navbar-static-top" ]
+              , keyCombination =
-                    [ div [ class "navbar-inner" ]
+                  { baseKey = Shortcut.Regular "K"
-                        [ div [ class "container" ]
+                  , shift = Nothing
-                            [ a [ class "brand", href "https://nixos.org" ]
+                  , alt = Nothing
-                                [ img [ alt "NixOS logo", src "/images/nix-logo.png", class "logo" ] []
+                  , meta = Nothing
-                                ]
+                  , ctrl = Just True
-                            , div []
+                  }
-                                [ ul [ class "nav pull-left" ]
+                },
-                                    (viewNavigation model.route)
+            Shortcut.simpleShortcut (Shortcut.Regular "/") <| CtrlKRegistered ]
+            []
+            [ div []
+                [ header []
+                    [ div [ class "navbar navbar-static-top" ]
+                        [ div [ class "navbar-inner" ]
+                            [ div [ class "container" ]
+                                [ a [ class "brand", href "https://nixos.org" ]
+                                    [ img [ alt "NixOS logo", src "/images/nix-logo.png", class "logo" ] []
+                                    ]
+                                , div []
+                                    [ ul [ class "nav pull-left" ]
+                                        (viewNavigation model.route)
+                                    ]
                                 ]
                             ]
                         ]
                     ]
-                ]
+                , div [ class "container main" ]
-            , div [ class "container main" ]
+                    [ div [ id "content" ] [ viewPage model ]
-                [ div [ id "content" ] [ viewPage model ]
+                    , footer
-                , footer
+                        [ class "container text-center" ]
-                    [ class "container text-center" ]
+                        [ div []
-                    [ div []
+                            [ span [] [ text "Please help us improve the search by " ]
-                        [ span [] [ text "Please help us improve the search by " ]
+                            , a
-                        , a
+                                [ href "https://github.com/NixOS/nixos-search/issues"
-                            [ href "https://github.com/NixOS/nixos-search/issues"
+                                ]
+                                [ text "reporting issues" ]
+                            , span [] [ text "." ]
+                            ]
+                        , div []
+                            [ span [] [ text "❤️  " ]
+                            , span [] [ text "Elasticsearch instance graciously provided by " ]
+                            , a [ href "https://bonsai.io" ] [ text "Bonsai" ]
+                            , span [] [ text ". Thank you! ❤️ " ]
                             ]
-                            [ text "reporting issues" ]
-                        , span [] [ text "." ]
-                        ]
-                    , div []
-                        [ span [] [ text "❤️  " ]
-                        , span [] [ text "Elasticsearch instance graciously provided by " ]
-                        , a [ href "https://bonsai.io" ] [ text "Bonsai" ]
-                        , span [] [ text ". Thank you! ❤️ " ]
                         ]
                     ]
                 ]

frontend/src/index.js

@@ -1,6 +1,7 @@
 'use strict';
 
 require("./index.scss");
+require("elm-keyboard-shortcut")
 
 const {Elm} = require('./Main');