feat: add search shortcut

apps/backend/src/backend/router.gleam

@@ -8,7 +8,6 @@ import cors_builder as cors
 import gleam/erlang/process
 import gleam/http
 import gleam/int
-import gleam/io
 import gleam/json
 import gleam/list
 import gleam/option
@@ -43,7 +42,6 @@ fn search(query: String, ctx: Context) {
     |> result.map_error(error.debug_log)
     |> result.unwrap([])
     |> list.filter(fn(i) { !list.contains(exact_type_searches, i) })
-    |> io.debug
 
   let exact_module_and_name_matches =
     queries.module_and_name_search(ctx.db, query)

apps/frontend/src/config.ffi.mjs

@@ -43,3 +43,20 @@ export function coerce(a) {
 export function coerceEvent(a) {
   return a.detail
 }
+
+export function subscribeFocus() {
+  document.addEventListener('keydown', event => {
+    if ((!event.metaKey && !event.ctrlKey) || event.key !== 'k') return
+    const element = document.getElementById('search-input')
+    if (element) {
+      element.focus()
+      element.select()
+    }
+  })
+}
+
+export function isMac() {
+  return (
+    navigator.platform.indexOf('Mac') === 0 || navigator.platform === 'iPhone'
+  )
+}

apps/frontend/src/frontend.gleam

@@ -29,6 +29,14 @@ import toast/error as toast_error
 @external(javascript, "./config.ffi.mjs", "scrollTo")
 fn scroll_to_element(id: String) -> fn(dispatch) -> Nil
 
+@external(javascript, "./config.ffi.mjs", "subscribeFocus")
+fn do_subscribe_focus() -> Nil
+
+fn subscribe_focus() {
+  use _ <- effect.from()
+  do_subscribe_focus()
+}
+
 pub fn main() {
   let assert Ok(cache) = sketch.setup(sketch_options.node())
   let assert Ok(_) = lazy.setup()
@@ -54,6 +62,7 @@ fn init(_) {
   submit_search(initial.0)
   |> update.add_effect(modem.init(on_url_change))
   |> update.add_effect(router.update_page_title({ initial.0 }.route))
+  |> update.add_effect(subscribe_focus())
   |> update.add_effect(
     http.expect_json(dynamic.list(package.decoder), msg.Trendings)
     |> http.get(config.api_endpoint() <> "/trendings", _),

apps/frontend/src/frontend/view/search_input/search_input.gleam

@@ -1,19 +1,29 @@
 import data/msg
 import frontend/view/search_input/styles as s
 import lustre/attribute as a
+import lustre/element as el
 import lustre/event as e
 
+@external(javascript, "../../../config.ffi.mjs", "isMac")
+fn is_mac() -> Bool
+
 pub fn view(loading loading: Bool, input input: String, small small: Bool) {
+  let modifier = case is_mac() {
+    True -> "Cmd"
+    False -> "Ctrl"
+  }
   s.search_with_filters([], [
     s.search_input_wrapper(loading, [
       s.search_input(loading, small, [
         s.search_input_content([
+          a.id("search-input"),
           a.placeholder("Search for a function, or a type"),
           e.on_input(msg.UpdateInput),
           a.value(input),
           a.attribute("autocorrect", "off"),
           a.attribute("autocapitalize", "none"),
         ]),
+        s.shortcut_hint([], [el.text(modifier <> " + K")]),
       ]),
     ]),
   ])

apps/frontend/src/frontend/view/search_input/styles.gleam

@@ -49,7 +49,7 @@ pub fn search_input(loading, small, children) {
       True -> "var(--dark-background)"
     }),
     s.transition("padding .3s"),
-    s.align_items("baseline"),
+    s.align_items("center"),
     s.padding(
       px(case loading, small {
         True, False -> 16
@@ -73,30 +73,13 @@ pub fn search_input_content(attributes) {
   ])
 }
 
-pub fn filter_pills(attributes, children) {
-  l.element("div", attributes, children, [
-    s.display("flex"),
-    s.gap(px(12)),
-    s.justify_content("end"),
-    s.media(media.max_width(px(700)), [s.display("none")]),
-  ])
-}
-
-pub fn filter_pill(active: Bool, attributes, children) {
-  let id = "filter_pill-active-" <> bool.to_string(active)
-  l.dynamic("button", attributes, children, id, [
-    s.background("var(--secondary)"),
-    // s.color("var(--text-color)"),
-    s.padding_("3px 12px"),
-    s.border_radius(px(30)),
-    s.font_size(px(12)),
-    s.transition("opacity .3s"),
-    s.appearance("none"),
-    s.border("none"),
-    s.cursor("pointer"),
-    s.opacity(case active {
-      True -> 1.0
-      False -> 0.5
-    }),
+pub fn shortcut_hint(attrs, children) {
+  l.element("div", attrs, children, [
+    s.white_space("nowrap"),
+    s.font_size(px(11)),
+    s.border("1px solid var(--text-color)"),
+    s.padding_("3px 6px"),
+    s.border_radius(px(6)),
+    s.opacity(0.4),
   ])
 }