Change search modfier key depending on the browser platform

Co-authored-by: Paweł Pacana <[email protected]>
RailsEventStore · Mar 21, 2024 · 9f7aab4 · 9f7aab4
1 parent e0b6a24
commit 9f7aab4
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 14 deletions.
diff --git a/ruby_event_store-browser/elm/src/Flags.elm b/ruby_event_store-browser/elm/src/Flags.elm
@@ -8,6 +8,7 @@ type alias RawFlags =
     , apiUrl : String
     , resVersion : String
     , repositoryAdapter : String
+    , platform : String
     }
 
 
@@ -16,9 +17,10 @@ type alias Flags =
     , apiUrl : Url.Url
     , resVersion : String
     , repositoryAdapter : String
+    , platform : String
     }
 
 
 buildFlags : RawFlags -> Maybe Flags
-buildFlags { rootUrl, apiUrl, resVersion, repositoryAdapter } =
-    Maybe.map4 Flags (Url.fromString rootUrl) (Url.fromString apiUrl) (Just resVersion) (Just repositoryAdapter)
+buildFlags { rootUrl, apiUrl, resVersion, repositoryAdapter, platform } =
+    Maybe.map5 Flags (Url.fromString rootUrl) (Url.fromString apiUrl) (Just resVersion) (Just repositoryAdapter) (Just platform)
diff --git a/ruby_event_store-browser/elm/src/Layout.elm b/ruby_event_store-browser/elm/src/Layout.elm
@@ -15,6 +15,7 @@ import LinkedTimezones exposing (mapLinkedTimeZone)
 import List.Extra
 import Route
 import Search exposing (..)
+import String
 import TimeZone exposing (zones)
 import Url
 import WrappedModel exposing (..)
@@ -215,7 +216,7 @@ browserNavigation model =
             ]
         , div
             [ class "flex items-center gap-2" ]
-            [ fakeSearchInput, bookmarksMenu model ]
+            [ fakeSearchInput model.flags.platform, bookmarksMenu model ]
         ]
 
 
@@ -322,8 +323,8 @@ bookmarksMenu model =
         ]
 
 
-fakeSearchInput : Html Msg
-fakeSearchInput =
+fakeSearchInput : String -> Html Msg
+fakeSearchInput platform =
     button
         [ onClick ToggleDialog
         , class "text-red-100 outline-none text-sm flex gap-2 items-center bg-red-800 hover:bg-red-900 h-9 px-3 rounded"
@@ -332,10 +333,19 @@ fakeSearchInput =
             |> FeatherIcons.withClass "size-4"
             |> FeatherIcons.toHtml []
         , text "Quick search…"
-        , span [ class "text-xs" ] [ text "⌘K" ]
+        , span [ class "text-xs" ] [ text (platformModifier platform), text "K" ]
         ]
 
 
+platformModifier : String -> String
+platformModifier platform =
+    if String.startsWith "Mac" platform then
+        "⌘"
+
+    else
+        "Ctrl "
+
+
 realSearchInput : WrappedModel Model -> Html Msg
 realSearchInput model =
     Html.map SearchMsg (Search.view model.internal.search)

diff --git a/ruby_event_store-browser/public/bootstrap.js b/ruby_event_store-browser/public/bootstrap.js
@@ -1,10 +1,6 @@
-const app = Elm.Main.init({
-  flags: JSON.parse(
-    document
-      .querySelector("meta[name='ruby-event-store-browser-settings']")
-      .getAttribute("content")
-  ),
-});
+const flags = JSON.parse(document.querySelector("meta[name='ruby-event-store-browser-settings']").getAttribute("content"));
+flags.platform = navigator.platform;
+const app = Elm.Main.init({flags});
 
 app.ports.copyToClipboard.subscribe(function (message) {
   navigator.clipboard.writeText(message);
@@ -15,7 +11,7 @@ app.ports.toggleDialog.subscribe(function (id) {
   dialog.open ? dialog.close() : dialog.showModal();
 });
 
-window.addEventListener("keydown", (event) => {
+window.addEventListener("keydown", function (event) {
   if (event.key === "k" && (event.ctrlKey || event.metaKey)) {
     app.ports.requestSearch.send(null);
     event.preventDefault();