From 30eb801296399b06096a32d9db4ef1016ddd04ed Mon Sep 17 00:00:00 2001
From: "kacaii.dev" <kacaii.privado@gmail.com>
Date: Mon, 6 Apr 2026 16:55:44 -0300
Subject: [PATCH] :lipstick: display selected icon to leader card

---
 client/src/client.css                      |  2 +
 client/src/client/page/register_crew.gleam | 78 +++++++++++++---------
 2 files changed, 48 insertions(+), 32 deletions(-)

diff --git a/client/src/client.css b/client/src/client.css
index 2302081..d838b7d 100644
--- a/client/src/client.css
+++ b/client/src/client.css
@@ -13,6 +13,8 @@
   --color-foreground: #1e1e2e;
 
   --color-accent: #f2cdcd;
+
+  --color-green: #a6e3a1;
 }
 
 @layer base {
diff --git a/client/src/client/page/register_crew.gleam b/client/src/client/page/register_crew.gleam
index 8ad4ee2..2f53707 100644
--- a/client/src/client/page/register_crew.gleam
+++ b/client/src/client/page/register_crew.gleam
@@ -55,17 +55,15 @@ pub type Msg {
 
 pub fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
   case msg {
-    UserSelectedLeader(user) -> {
-      let new =
-        Model(
-          ..model,
-          selected_leader: option.Some(user),
-          crew_leader_name: user.full_name,
-          suggested_leaders: [],
-        )
-
-      #(new, effect.none())
-    }
+    UserSelectedLeader(user) -> #(
+      Model(
+        ..model,
+        selected_leader: option.Some(user),
+        crew_leader_name: user.full_name,
+        suggested_leaders: [],
+      ),
+      effect.none(),
+    )
 
     UserSelectedMember(user) ->
       case list.contains(model.selected_members, user) {
@@ -191,35 +189,51 @@ fn view_leader_selection(model: Model) -> element.Element(Msg) {
   let view_leaders = case model.suggested_leaders {
     [] -> element.none()
     some ->
-      [class("grid grid-cols-1 gap-4"), class("@md:grid-cols-2")]
-      |> html.div(list.map(some, view_leader_card(_, UserSelectedLeader)))
+      [class("grid grid-cols-1 gap-4 py-4"), class("@md:grid-cols-2")]
+      |> html.div(list.map(some, view_leader_card(model, _)))
   }
 
+  let input =
+    html.input([
+      attr.id(id),
+      event.on_input(UserTypedLeaderName),
+      attr.placeholder("John Doe"),
+      attr.value(model.crew_leader_name),
+      attr.type_("text"),
+    ])
+
   html.div([class("@container")], [
-    html.label([attr.for(id)], [html.text("Leader")]),
-    form.fieldset([form.group(), class("mt-1")], [
-      html.input([
-        attr.id(id),
-        event.on_input(UserTypedLeaderName),
-        attr.placeholder("John Doe"),
-        attr.value(model.crew_leader_name),
-        attr.type_("text"),
-      ]),
-      search_button,
-    ]),
+    html.label([attr.for(id)], [html.text("Leader name")]),
+    form.fieldset([form.group(), class("mt-1")], [input, search_button]),
     view_leaders,
   ])
 }
 
-pub fn view_leader_card(
-  user: User,
-  on_click: fn(User) -> Msg,
-) -> element.Element(Msg) {
-  let on_click = event.on_click(on_click(user))
-  let hover_style = class("hover:cursor-pointer hover:border-accent")
+pub fn view_leader_card(model: Model, user: User) -> element.Element(Msg) {
+  let on_click = event.on_click(UserSelectedLeader(user))
 
-  card.card([on_click, hover_style, class("flex flex-col gap-1 p-3")], [
-    card.header([], [html.strong([], [html.text(user.full_name)])]),
+  let selected = case model.selected_leader {
+    option.Some(current) if current == user -> True
+    _ -> False
+  }
+
+  // Display green border if already selected
+  let on_hover = case selected {
+    True -> class("hover:cursor-pointer hover:border-green")
+    False -> class("hover:cursor-pointer hover:border-accent")
+  }
+
+  let icon_style = [class("h-full")]
+  let user_icon = case selected {
+    True -> icon.user_check([class("text-green"), ..icon_style])
+    False -> icon.user(icon_style)
+  }
+
+  card.card([on_click, on_hover, class("flex flex-col gap-1 p-3")], [
+    card.header([class("flex gap-2")], [
+      user_icon,
+      html.strong([], [html.text(user.full_name)]),
+    ]),
     card.content([], [html.div([], [html.small([], [html.text(user.email)])])]),
   ])
 }
-- 
2.51.2