refactor: improve search input

Signed-off-by: Guillaume Hivert <[email protected]>

apps/frontend/src/data/model.gleam

@@ -25,7 +25,7 @@ pub fn init() {
   let search_results = search_result.Start
   let index = compute_index(search_results)
   Model(
-    input: "",
+    input: "in:name in:signature ",
     search_results: search_results,
     index: index,
     loading: False,
@@ -64,7 +64,7 @@ pub fn update_search_results(model: Model, search_results: SearchResults) {
 pub fn reset(_model: Model) {
   Model(
     search_results: search_result.SearchResults([], [], []),
-    input: "",
+    input: "in:name in:signature ",
     index: [],
     loading: False,
     view_cache: element.none(),

apps/frontend/src/frontend.gleam

@@ -143,7 +143,7 @@ fn handle_search_results(
 fn handle_route_change(model: Model, route: router.Route) {
   let model = model.update_route(model, route)
   update.none(case route {
-    router.Home -> model.update_input(model, "")
+    router.Home -> model.update_input(model, "in:name in:signature ")
     router.Search(q) -> model.update_input(model, q)
   })
 }

apps/frontend/src/frontend/view/body/body.gleam

@@ -5,6 +5,7 @@ import frontend/images
 import frontend/router
 import frontend/strings as frontend_strings
 import frontend/view/body/styles as s
+import frontend/view/search_input/search_input
 import lustre/attribute as a
 import lustre/element/html as h
 import lustre/event as e
@@ -21,11 +22,7 @@ fn view_search_input(model: Model) {
       ]),
       h.text(frontend_strings.gloogle_description),
     ]),
-    s.search_input(model.loading, [
-      a.placeholder("Search for a function, or a type"),
-      e.on_input(msg.UpdateInput),
-      a.value(model.input),
-    ]),
+    search_input.view(model.loading, model.input),
     s.search_submit([
       a.type_("submit"),
       a.value("Submit"),

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

@@ -1,5 +1,4 @@
 import frontend/colors/palette
-import gleam/bool
 import gleam/list
 import lustre/element
 import sketch as s
@@ -161,48 +160,6 @@ pub fn search_lucy(attributes) {
   l.memo("img", attributes, [], [s.width(px(40))])
 }
 
-pub fn search_input(loading: Bool, attributes) {
-  let id = "search-input-wrapper-" <> bool.to_string(loading)
-  let id_ = "search-input-" <> bool.to_string(loading)
-  let content =
-    l.dynamic("input", attributes, [], id_, [
-      s.appearance("none"),
-      s.border("none"),
-      s.padding(
-        px(case loading {
-          True -> 18
-          False -> 22
-        }),
-      ),
-      s.outline("none"),
-      s.color(palette.dark.charcoal),
-      s.width(size.percent(100)),
-      s.background(palette.dark.white),
-      s.border_radius(px(14)),
-      s.transition("padding .3s"),
-    ])
-
-  l.dynamic("div", [], [content], id, [
-    s.border_radius(px(18)),
-    s.overflow("hidden"),
-    s.grid_area("input"),
-    s.padding(
-      px(case loading {
-        True -> 4
-        False -> 0
-      }),
-    ),
-    s.background("linear-gradient(-45deg, #4ce7ff, #c651e5, #e3d8be, #4ce7ff)"),
-    s.property("background-size", "400% 400%"),
-    s.transition("padding .3s"),
-    s.animation("bg-spin 3s linear infinite"),
-    s.animation_play_state(case loading {
-      True -> "running"
-      False -> "paused"
-    }),
-  ])
-}
-
 pub fn search_submit(attributes) {
   l.memo("input", attributes, [], [
     s.grid_area("submit"),

apps/frontend/src/frontend/view/navbar/navbar.gleam

@@ -2,6 +2,7 @@ import data/model.{type Model}
 import data/msg
 import frontend/router
 import frontend/view/navbar/styles as s
+import frontend/view/search_input/search_input
 import lustre/attribute as a
 import lustre/element/html as h
 import lustre/event as e
@@ -30,11 +31,7 @@ pub fn navbar(model: Model) {
             h.text("Gloogle"),
           ]),
           s.search_input_wrapper([e.on_submit(msg.SubmitSearch)], [
-            s.search_input(model.loading, [
-              a.placeholder("Search for a function, or a type"),
-              e.on_input(msg.UpdateInput),
-              a.value(model.input),
-            ]),
+            search_input.view(model.loading, model.input),
           ]),
         ])
     },

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

@@ -6,8 +6,6 @@ import sketch/size.{px}
 
 pub const search_lucy = body_styles.search_lucy
 
-pub const search_input = body_styles.search_input
-
 pub fn search_input_wrapper(attributes, children) {
   l.memo("form", attributes, children, [s.width_("100%")])
 }

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

@@ -0,0 +1,16 @@
+import data/msg
+import frontend/view/search_input/styles as s
+import lustre/attribute as a
+import lustre/event as e
+
+pub fn view(loading loading: Bool, input input: String) {
+  s.search_input_wrapper(loading, [
+    s.search_input(loading, [
+      s.search_input_content([
+        a.placeholder("Search for a function, or a type"),
+        e.on_input(msg.UpdateInput),
+        a.value(input),
+      ]),
+    ]),
+  ])
+}

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

@@ -0,0 +1,57 @@
+import frontend/colors/palette
+import gleam/bool
+import sketch as s
+import sketch/lustre/extra as l
+import sketch/size.{px}
+
+pub fn search_input_wrapper(loading: Bool, children) {
+  let id = "search-input-wrapper-" <> bool.to_string(loading)
+  l.dynamic("div", [], children, id, [
+    s.border_radius(px(18)),
+    s.overflow("hidden"),
+    s.grid_area("input"),
+    s.padding(
+      px(case loading {
+        True -> 4
+        False -> 0
+      }),
+    ),
+    s.background("linear-gradient(-45deg, #4ce7ff, #c651e5, #e3d8be, #4ce7ff)"),
+    s.property("background-size", "400% 400%"),
+    s.transition("padding .3s"),
+    s.animation("bg-spin 3s linear infinite"),
+    s.animation_play_state(case loading {
+      True -> "running"
+      False -> "paused"
+    }),
+  ])
+}
+
+pub fn search_input(loading, children) {
+  let id_ = "search-input-" <> bool.to_string(loading)
+  l.dynamic("div", [], children, id_, [
+    s.display("flex"),
+    s.gap(px(6)),
+    s.border_radius(px(14)),
+    s.color(palette.dark.charcoal),
+    s.background(palette.dark.white),
+    s.transition("padding .3s"),
+    s.align_items("baseline"),
+    s.padding(
+      px(case loading {
+        True -> 16
+        False -> 20
+      }),
+    ),
+  ])
+}
+
+pub fn search_input_content(attributes) {
+  l.element("input", attributes, [], [
+    s.appearance("none"),
+    s.border("none"),
+    s.outline("none"),
+    s.width(size.percent(100)),
+    s.line_height("1.5"),
+  ])
+}