diff --git a/apps/frontend/src/data/model.gleam b/apps/frontend/src/data/model.gleam index e98063f..daeea85 100644 --- a/apps/frontend/src/data/model.gleam +++ b/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(), diff --git a/apps/frontend/src/frontend.gleam b/apps/frontend/src/frontend.gleam index d04811e..cd87ba8 100644 --- a/apps/frontend/src/frontend.gleam +++ b/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) }) } diff --git a/apps/frontend/src/frontend/view/body/body.gleam b/apps/frontend/src/frontend/view/body/body.gleam index b56deab..673cbd2 100644 --- a/apps/frontend/src/frontend/view/body/body.gleam +++ b/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"), diff --git a/apps/frontend/src/frontend/view/body/styles.gleam b/apps/frontend/src/frontend/view/body/styles.gleam index d0e1cf4..21a33d3 100644 --- a/apps/frontend/src/frontend/view/body/styles.gleam +++ b/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"), diff --git a/apps/frontend/src/frontend/view/navbar/navbar.gleam b/apps/frontend/src/frontend/view/navbar/navbar.gleam index 72a04fc..9701b85 100644 --- a/apps/frontend/src/frontend/view/navbar/navbar.gleam +++ b/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), ]), ]) }, diff --git a/apps/frontend/src/frontend/view/navbar/styles.gleam b/apps/frontend/src/frontend/view/navbar/styles.gleam index 68e7c0f..9f66c84 100644 --- a/apps/frontend/src/frontend/view/navbar/styles.gleam +++ b/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%")]) } diff --git a/apps/frontend/src/frontend/view/search_input/search_input.gleam b/apps/frontend/src/frontend/view/search_input/search_input.gleam new file mode 100644 index 0000000..da16520 --- /dev/null +++ b/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), + ]), + ]), + ]) +} diff --git a/apps/frontend/src/frontend/view/search_input/styles.gleam b/apps/frontend/src/frontend/view/search_input/styles.gleam new file mode 100644 index 0000000..170596f --- /dev/null +++ b/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"), + ]) +}