mollusk/peerspeak
Public Access
1
0
Fork 0
Code Issues Pull Requests 3 Actions Packages Projects Releases 10 Wiki Activity

refactor(w7): move recents into its own card on the home screen

Browse Source 
A growing recents history shouldn't reflow the Connect card's Create/Join
controls. Extract the rendering into a `recents_card` free fn (mirroring
`friends_panel`'s self-contained styling) and place it in the left column
beneath the Connect card — both are "get into a room" — with Friends on
the right. The card is omitted entirely (no stray gap) when empty, in both
the narrow (stacked) and wide (row) responsive layouts.

Screenshot-verified at the default width: Connect + Recent Rooms stacked
left, Friends right; the Connect card stays fixed-size as recents grow.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
mollusk
2026-06-16 15:04:18 -04:00
co-authored by Claude Opus 4.8
parent c12d15ed7d
commit cb936cdcbd
1 changed files with 114 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/mod.rs
+114 -56
View File
@@ -1290,7 +1290,6 @@ fn connect_card(state: &AppState) -> Element<'_, AppMessage> {
let color_subtext = pal.subtext;
let color_blue = pal.blue;
let color_lavender = pal.lavender;
let color_maroon = pal.maroon;
let c_style = move |bg: Color, b_color: Color, radius: f32| {
move |_theme: &Theme| container::Style {
@@ -1327,55 +1326,6 @@ fn connect_card(state: &AppState) -> Element<'_, AppMessage> {
selection: color_blue,
};
// Recently-joined rooms (W7 P5): a one-click rejoin list. Only shown when
// non-empty so the launch card stays clean on a fresh install.
let recents_group: Element<AppMessage> = if state.config.recents.is_empty() {
column![].into()
} else {
let now = std::time::SystemTime::now()
.duration_since(std::time::UNIX_EPOCH)
.map(|d| d.as_secs())
.unwrap_or(0);
let mut rows = column![].spacing(6).width(iced::Length::Fill);
for r in &state.config.recents {
let label = {
let n = crate::sanitize::sanitize_name(&r.name);
if n.is_empty() { "Untitled room".to_string() } else { n }
};
let when = crate::recents::relative_time(now, r.joined_at);
let entry = button(
row![
text(label).size(14).color(color_text),
horizontal_space(),
text(when).size(11).color(color_subtext),
]
.align_y(iced::alignment::Vertical::Center),
)
.on_press(AppMessage::JoinRecent(r.ticket.clone()))
.style(b_style(color_crust, color_surface, color_text, 6.0))
.padding(8)
.width(iced::Length::Fill);
rows = rows.push(
row![
entry,
button(text("✕").size(12))
.on_press(AppMessage::RemoveRecent(r.ticket.clone()))
.style(b_style(color_surface, color_maroon, color_text, 6.0))
.padding(8),
]
.spacing(6)
.align_y(iced::alignment::Vertical::Center),
);
}
column![
text("Recent rooms").size(14).color(color_subtext),
vertical_space(4.0),
rows,
]
.width(iced::Length::Fill)
.into()
};
let logo = text("PEERSPEAK").size(36).color(color_blue);
let subtitle = text("NAT-traversing full-mesh voice chat").size(16).color(color_subtext);
@@ -1433,8 +1383,6 @@ fn connect_card(state: &AppState) -> Element<'_, AppMessage> {
text("— OR —").size(12).color(color_surface).align_x(iced::alignment::Horizontal::Center),
vertical_space(16.0),
join_group,
vertical_space(16.0),
recents_group,
vertical_space(10.0),
status
]
@@ -1447,6 +1395,102 @@ fn connect_card(state: &AppState) -> Element<'_, AppMessage> {
.into()
}
/// The "Recent rooms" card (W7 P5): a one-click rejoin list, in its own card so a
/// growing history never reflows the Connect card's Create/Join controls. Returns
/// an empty element when there are no recents, so the home screen can omit it
/// entirely on a fresh install. Mirrors `friends_panel`'s self-contained styling.
fn recents_card(state: &AppState) -> Element<'_, AppMessage> {
if state.config.recents.is_empty() {
return column![].into();
}
let pal = state.config.theme.palette();
let color_crust = pal.crust;
let color_mantle = pal.mantle;
let color_surface = pal.surface;
let color_text = pal.text;
let color_subtext = pal.subtext;
let color_maroon = pal.maroon;
let c_style = move |bg: Color, b_color: Color, radius: f32| {
move |_theme: &Theme| container::Style {
text_color: Some(color_text),
background: Some(Background::Color(bg)),
border: Border {
color: b_color,
width: if b_color == Color::TRANSPARENT { 0.0 } else { 1.0 },
radius: radius.into(),
},
..Default::default()
}
};
let b_style = move |bg: Color, hover_bg: Color, text_c: Color, radius: f32| {
move |_theme: &Theme, status: button::Status| {
let active_bg = match status {
button::Status::Hovered => hover_bg,
_ => bg,
};
button::Style {
background: Some(Background::Color(active_bg)),
text_color: text_c,
border: Border { color: Color::TRANSPARENT, width: 0.0, radius: radius.into() },
..Default::default()
}
}
};
let now = std::time::SystemTime::now()
.duration_since(std::time::UNIX_EPOCH)
.map(|d| d.as_secs())
.unwrap_or(0);
let mut rows = column![].spacing(6).width(iced::Length::Fill);
for r in &state.config.recents {
let label = {
let n = crate::sanitize::sanitize_name(&r.name);
if n.is_empty() { "Untitled room".to_string() } else { n }
};
let when = crate::recents::relative_time(now, r.joined_at);
let entry = button(
row![
text(label).size(14).color(color_text),
horizontal_space(),
text(when).size(11).color(color_subtext),
]
.align_y(iced::alignment::Vertical::Center),
)
.on_press(AppMessage::JoinRecent(r.ticket.clone()))
.style(b_style(color_crust, color_surface, color_text, 6.0))
.padding(8)
.width(iced::Length::Fill);
rows = rows.push(
row![
entry,
button(text("✕").size(12))
.on_press(AppMessage::RemoveRecent(r.ticket.clone()))
.style(b_style(color_surface, color_maroon, color_text, 6.0))
.padding(8),
]
.spacing(6)
.align_y(iced::alignment::Vertical::Center),
);
}
container(
column![
text("RECENT ROOMS").size(18).color(color_text),
text("Rooms you've been in — click to hop back. Best-effort: only works while someone's still there.")
.size(11)
.color(color_subtext),
vertical_space(10.0),
rows,
]
.spacing(6),
)
.style(c_style(color_mantle, color_surface, 12.0))
.padding(24)
.width(380)
.into()
}
fn friends_panel(state: &AppState) -> Element<'_, AppMessage> {
let pal = state.config.theme.palette();
let color_crust = pal.crust;
@@ -2255,14 +2299,28 @@ fn view(state: &AppState) -> Element<'_, AppMessage> {
// fixed-width Connect card would otherwise squeeze it until its node-ID
// field and remove button clip away. `responsive` measures the available
// width each layout pass and picks the orientation accordingly.
// The Recent-rooms card lives in the LEFT column under the Connect card
// (both are about getting into a room), so it has its own card and a
// growing history can't reflow the Create/Join controls. Friends stays on
// the right. Recents is omitted entirely (no stray gap) when empty.
let body = responsive(move |size| {
let has_recents = !state.config.recents.is_empty();
let cards: Element<AppMessage> = if size.width < 900.0 {
column![connect_card(state), friends_panel(state)]
let mut col = column![connect_card(state)]
.spacing(20)
.align_x(iced::alignment::Horizontal::Center)
.into()
.align_x(iced::alignment::Horizontal::Center);
if has_recents {
col = col.push(recents_card(state));
}
col.push(friends_panel(state)).into()
} else {
row![connect_card(state), friends_panel(state)]
let mut left = column![connect_card(state)]
.spacing(20)
.align_x(iced::alignment::Horizontal::Center);
if has_recents {
left = left.push(recents_card(state));
}
row![left, friends_panel(state)]
.spacing(20)
.align_y(iced::alignment::Vertical::Top)
.into()