From 7bc2f23d5bdb2265032c2741e292d2ab363d2caa Mon Sep 17 00:00:00 2001 From: "kacaii.dev" Date: Tue, 31 Mar 2026 19:50:59 -0300 Subject: [PATCH] :sparkles: display "selected" badge for leader --- client/src/client.css | 2 + client/src/client/page/register_crew.gleam | 58 ++++++++++++++-------- client/src/client/page/signup.gleam | 18 +++---- client/src/icon.gleam | 25 ++++++++++ 4 files changed, 74 insertions(+), 29 deletions(-) diff --git a/client/src/client.css b/client/src/client.css index 8cdef77..1655162 100644 --- a/client/src/client.css +++ b/client/src/client.css @@ -11,4 +11,6 @@ --color-background: #181825; --color-foreground: #1e1e2e; + + --color-accent: #f2cdcd; } diff --git a/client/src/client/page/register_crew.gleam b/client/src/client/page/register_crew.gleam index 84b89ee..a4680e7 100644 --- a/client/src/client/page/register_crew.gleam +++ b/client/src/client/page/register_crew.gleam @@ -157,17 +157,17 @@ pub fn view(_session: Session, model: Model) -> element.Element(Msg) { view_form([ input.view(model.crew_name, UserTypedCrewName), view_leader_selection(model), + view_submit_button(), ]), ]) } -fn view_form(elements: List(element.Element(Msg))) -> element.Element(Msg) { - let attributes = [class("flex flex-col gap-2 w-full")] +fn view_form(content: List(element.Element(Msg))) -> element.Element(Msg) { + let attributes = [class("flex flex-col gap-4 w-full")] card.card([], [ card.header([], [html.h3([], [html.text("Register Crew")])]), - card.content([], [form.fieldset(attributes, elements)]), - card.footer([], [view_submit_button()]), + card.content([], [html.div(attributes, content)]), ]) } @@ -176,7 +176,7 @@ fn view_leader_selection(model: Model) -> element.Element(Msg) { let attributes = [ form.field(), - attr.type_("email"), + attr.type_("text"), attr.id(input_id), attr.value(model.crew_leader_email), attr.placeholder("leader@email.com"), @@ -196,8 +196,9 @@ fn view_leader_selection(model: Model) -> element.Element(Msg) { button.outline(), attr.disabled(email_is_empty || email_is_too_short), - class("h-full"), - class("hover:text-background"), + // magic number? + class("h-11"), + class("not-disabled:hover:text-background"), ] button.button(attributes, [icon.mail_search([])]) @@ -206,10 +207,8 @@ fn view_leader_selection(model: Model) -> element.Element(Msg) { let view_leaders = case model.suggested_leaders { [] -> element.none() found -> - html.div( - [class("grid grid-cols-1 gap-2 @md:grid-cols-2")], - list.map(found, user_to_leader_card), - ) + [class("grid grid-cols-1 gap-2 @md:grid-cols-2")] + |> html.div(list.map(found, view_user_to_leader_card(model, _))) } html.div([class("@container")], [ @@ -219,25 +218,44 @@ fn view_leader_selection(model: Model) -> element.Element(Msg) { ]) } -fn user_to_leader_card(user: User) -> element.Element(Msg) { +fn view_user_to_leader_card(model: Model, user: User) -> element.Element(Msg) { let on_click = event.on_click(UserSelectedLeader(user)) let hover_style = class("hover:cursor-pointer") - let card_header = - card.header([class("flex gap-2")], [ - badge.badge([badge.outline()], [html.text(user.role |> role.to_string)]), - html.strong([class("truncate")], [html.text(user.full_name)]), - ]) - - let card_content = - card.content([], [html.p([class("truncate")], [html.text(user.email)])]) + // - Display "Selected" if user is already the leader. + // - Display the user's role if they are not. + // + let badge_style = class("py-2 px-4 text-sm") + let badge = case model.selected_leader { + option.Some(selected) if selected == user -> + badge.badge([badge.success(), badge_style], [ + icon.user_check([]), + html.text("Leader"), + ]) + + _ -> + badge.badge([badge.outline(), badge_style], [ + icon.user([]), + html.text(user.role |> role.to_string), + ]) + } let card_attributes = [ on_click, hover_style, class("flex flex-col items-center p-4"), + class("hover:border-accent"), ] + let card_header = + card.header([class("flex gap-2 justify-center items-center")], [ + badge, + html.strong([class("truncate")], [html.text(user.full_name)]), + ]) + + let card_content = + card.content([], [html.p([class("truncate")], [html.text(user.email)])]) + card.card(card_attributes, [ html.div([class("flex flex-col gap-2")], [card_header, card_content]), ]) diff --git a/client/src/client/page/signup.gleam b/client/src/client/page/signup.gleam index 2e8181f..6350a31 100644 --- a/client/src/client/page/signup.gleam +++ b/client/src/client/page/signup.gleam @@ -101,15 +101,6 @@ pub type Msg { ApiReturnedUser(Result(user.User, rsvp.Error)) } -pub fn view(_session: session.Session, model: Model) -> element.Element(Msg) { - let attributes = [ - class(header.offset), - class("grid p-4 mx-auto w-full max-w-xl"), - ] - - html.section(attributes, [view_form(model)]) -} - pub fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) { case msg { UserTypedName(value:) -> { @@ -277,6 +268,15 @@ pub fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) { } } +pub fn view(_session: session.Session, model: Model) -> element.Element(Msg) { + let attributes = [ + class(header.offset), + class("flex flex-col p-4 mx-auto w-full max-w-xl"), + ] + + html.section(attributes, [view_form(model)]) +} + fn view_form(model: Model) -> element.Element(Msg) { card.card([], [ card.header([], [html.h3([], [html.text("Register User")])]), diff --git a/client/src/icon.gleam b/client/src/icon.gleam index aeb86e2..7b2201f 100644 --- a/client/src/icon.gleam +++ b/client/src/icon.gleam @@ -201,3 +201,28 @@ pub fn circle_user(attributes: List(Attribute(a))) { ], ) } + +pub fn user_check(attributes: List(Attribute(a))) { + svg.svg( + [ + attribute("stroke-linejoin", "round"), + attribute("stroke-linecap", "round"), + attribute("stroke-width", "2"), + attribute("stroke", "currentColor"), + attribute("fill", "none"), + attribute("viewBox", "0 0 24 24"), + attribute("height", "24"), + attribute("width", "24"), + ..attributes + ], + [ + svg.path([attribute("d", "m16 11 2 2 4-4")]), + svg.path([attribute("d", "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2")]), + svg.circle([ + attribute("r", "4"), + attribute("cy", "7"), + attribute("cx", "9"), + ]), + ], + ) +} -- 2.51.2