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" = {
-        sha256 = "0m5bk0qhsjv14vajqrkph386696pnhj5rn51kgma8lwyvvx9ihw1";
-        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";
+      "NoRedInk/elm-json-decode-pipeline" = {
+        sha256 = "0y25xn0yx1q2xlg1yx1i0hg4xq1yxx6yfa99g272z8162si75hnl";
         version = "1.0.0";
       };
 
@@ -35,8 +15,8 @@
         version = "1.0.4";
       };
 
-      "elm/url" = {
-        sha256 = "0av8x5syid40sgpl5vd7pry2rq0q4pga28b4yykn9gd9v12rs3l4";
+      "elm/html" = {
+        sha256 = "1n3gpzmpqqdsldys4ipgyl1zacn0kbpc3g4v3hdpiyfjlgh8bf3k";
         version = "1.0.0";
       };
 
@@ -45,8 +25,18 @@
         version = "2.0.0";
       };
 
-      "NoRedInk/elm-json-decode-pipeline" = {
-        sha256 = "0y25xn0yx1q2xlg1yx1i0hg4xq1yxx6yfa99g272z8162si75hnl";
+      "elm/json" = {
+        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

@@ -16,6 +16,7 @@
             "elm/url": "1.0.0",
             "hecrj/html-parser": "2.3.4",
             "krisajenkins/remotedata": "6.0.1",
+            "leojpod/elm-keyboard-shortcut": "1.0.1",
             "truqu/elm-base64": "2.0.4"
         },
         "indirect": {
@@ -24,7 +25,11 @@
             "elm/parser": "1.1.0",
             "elm/time": "1.0.0",
             "elm/virtual-dom": "1.0.2",
-      "rtfeldman/elm-hex": "1.0.0"
+            "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"
         }
     },
     "test-dependencies": {

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,6 +387,18 @@ view model =
     in
     { title = title
     , body =
+        [ Shortcut.shortcutElement
+            [ { msg = CtrlKRegistered
+              , keyCombination =
+                  { baseKey = Shortcut.Regular "K"
+                  , shift = Nothing
+                  , alt = Nothing
+                  , meta = Nothing
+                  , ctrl = Just True
+                  }
+                },
+            Shortcut.simpleShortcut (Shortcut.Regular "/") <| CtrlKRegistered ]
+            []
             [ div []
                 [ header []
                     [ div [ class "navbar navbar-static-top" ]
@@ -417,6 +437,7 @@ view model =
                     ]
                 ]
             ]
+        ]
     }
 
 

frontend/src/index.js

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