kacaii.dev
This repository has no description
lustre
gleam
:sparkles: display "selected" badge for leader
author
kacaii.dev
date
(Mar 31, 2026, 8:46 PM -0300)
commit
7bc2f23d
7bc2f23d5bdb2265032c2741e292d2ab363d2caa
parent
237c09d6
237c09d654eab307a40c263e7faa700c6752806c
change-id
mlkkrttt
mlkkrtttwmzxwpoxruxmuysnynlxxpxr
+73
-28
+2
client/src/client.css
+2
client/src/client.css
+37
-19
client/src/client/page/register_crew.gleam
+37
-19
client/src/client/page/register_crew.gleam
···
157
157
view_form([
158
158
input.view(model.crew_name, UserTypedCrewName),
159
159
view_leader_selection(model),
160
+
view_submit_button(),
160
161
]),
161
162
])
162
163
}
163
164
164
-
fn view_form(elements: List(element.Element(Msg))) -> element.Element(Msg) {
165
-
let attributes = [class("flex flex-col gap-2 w-full")]
165
+
fn view_form(content: List(element.Element(Msg))) -> element.Element(Msg) {
166
+
let attributes = [class("flex flex-col gap-4 w-full")]
166
167
167
168
card.card([], [
168
169
card.header([], [html.h3([], [html.text("Register Crew")])]),
169
-
card.content([], [form.fieldset(attributes, elements)]),
170
-
card.footer([], [view_submit_button()]),
170
+
card.content([], [html.div(attributes, content)]),
171
171
])
172
172
}
173
173
···
176
176
177
177
let attributes = [
178
178
form.field(),
179
-
attr.type_("email"),
179
+
attr.type_("text"),
180
180
attr.id(input_id),
181
181
attr.value(model.crew_leader_email),
182
182
attr.placeholder("leader@email.com"),
···
196
196
button.outline(),
197
197
attr.disabled(email_is_empty || email_is_too_short),
198
198
199
-
class("h-full"),
200
-
class("hover:text-background"),
199
+
// magic number?
200
+
class("h-11"),
201
+
class("not-disabled:hover:text-background"),
201
202
]
202
203
203
204
button.button(attributes, [icon.mail_search([])])
···
206
207
let view_leaders = case model.suggested_leaders {
207
208
[] -> element.none()
208
209
found ->
209
-
html.div(
210
-
[class("grid grid-cols-1 gap-2 @md:grid-cols-2")],
211
-
list.map(found, user_to_leader_card),
212
-
)
210
+
[class("grid grid-cols-1 gap-2 @md:grid-cols-2")]
211
+
|> html.div(list.map(found, view_user_to_leader_card(model, _)))
213
212
}
214
213
215
214
html.div([class("@container")], [
···
219
218
])
220
219
}
221
220
222
-
fn user_to_leader_card(user: User) -> element.Element(Msg) {
221
+
fn view_user_to_leader_card(model: Model, user: User) -> element.Element(Msg) {
223
222
let on_click = event.on_click(UserSelectedLeader(user))
224
223
let hover_style = class("hover:cursor-pointer")
225
224
226
-
let card_header =
227
-
card.header([class("flex gap-2")], [
228
-
badge.badge([badge.outline()], [html.text(user.role |> role.to_string)]),
229
-
html.strong([class("truncate")], [html.text(user.full_name)]),
230
-
])
225
+
// - Display "Selected" if user is already the leader.
226
+
// - Display the user's role if they are not.
227
+
//
228
+
let badge_style = class("py-2 px-4 text-sm")
229
+
let badge = case model.selected_leader {
230
+
option.Some(selected) if selected == user ->
231
+
badge.badge([badge.success(), badge_style], [
232
+
icon.user_check([]),
233
+
html.text("Leader"),
234
+
])
231
235
232
-
let card_content =
233
-
card.content([], [html.p([class("truncate")], [html.text(user.email)])])
236
+
_ ->
237
+
badge.badge([badge.outline(), badge_style], [
238
+
icon.user([]),
239
+
html.text(user.role |> role.to_string),
240
+
])
241
+
}
234
242
235
243
let card_attributes = [
236
244
on_click,
237
245
hover_style,
238
246
class("flex flex-col items-center p-4"),
247
+
class("hover:border-accent"),
239
248
]
249
+
250
+
let card_header =
251
+
card.header([class("flex gap-2 justify-center items-center")], [
252
+
badge,
253
+
html.strong([class("truncate")], [html.text(user.full_name)]),
254
+
])
255
+
256
+
let card_content =
257
+
card.content([], [html.p([class("truncate")], [html.text(user.email)])])
240
258
241
259
card.card(card_attributes, [
242
260
html.div([class("flex flex-col gap-2")], [card_header, card_content]),
+9
-9
client/src/client/page/signup.gleam
+9
-9
client/src/client/page/signup.gleam
···
101
101
ApiReturnedUser(Result(user.User, rsvp.Error))
102
102
}
103
103
104
-
pub fn view(_session: session.Session, model: Model) -> element.Element(Msg) {
105
-
let attributes = [
106
-
class(header.offset),
107
-
class("grid p-4 mx-auto w-full max-w-xl"),
108
-
]
109
-
110
-
html.section(attributes, [view_form(model)])
111
-
}
112
-
113
104
pub fn update(model: Model, msg: Msg) -> #(Model, Effect(Msg)) {
114
105
case msg {
115
106
UserTypedName(value:) -> {
···
275
266
effect.none(),
276
267
)
277
268
}
269
+
}
270
+
271
+
pub fn view(_session: session.Session, model: Model) -> element.Element(Msg) {
272
+
let attributes = [
273
+
class(header.offset),
274
+
class("flex flex-col p-4 mx-auto w-full max-w-xl"),
275
+
]
276
+
277
+
html.section(attributes, [view_form(model)])
278
278
}
279
279
280
280
fn view_form(model: Model) -> element.Element(Msg) {
+25
client/src/icon.gleam
+25
client/src/icon.gleam
···
201
201
],
202
202
)
203
203
}
204
+
205
+
pub fn user_check(attributes: List(Attribute(a))) {
206
+
svg.svg(
207
+
[
208
+
attribute("stroke-linejoin", "round"),
209
+
attribute("stroke-linecap", "round"),
210
+
attribute("stroke-width", "2"),
211
+
attribute("stroke", "currentColor"),
212
+
attribute("fill", "none"),
213
+
attribute("viewBox", "0 0 24 24"),
214
+
attribute("height", "24"),
215
+
attribute("width", "24"),
216
+
..attributes
217
+
],
218
+
[
219
+
svg.path([attribute("d", "m16 11 2 2 4-4")]),
220
+
svg.path([attribute("d", "M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2")]),
221
+
svg.circle([
222
+
attribute("r", "4"),
223
+
attribute("cy", "7"),
224
+
attribute("cx", "9"),
225
+
]),
226
+
],
227
+
)
228
+
}