Side A fixes a real correctness bug (duplicate `#entity-section`/`#entity-panel` IDs breaking morph targeting when multiple entity cards appear on the same page, e.g. vote compare) by switching to a per-item data-attribute selector, and it deduplicates significant logic by making vote_compare_item_card reuse entity_section instead of a parallel hand-rolled renderer. Side B is a smaller, well-tested UI tweak that changes sibling grouping semantics but has narrower impact and no bug being fixed.
constitution · epochs · watch · epoch 3
comparison
c_c6beb77e8e71 (tommy-mor) vs c_3403e5929da7 (tommy-mor)
download prompt · raw event · cmp_267ae00323a0e7
council reasoning
A replaces single global #entity-section/#entity-panel IDs with per-item data-entity-section selectors and reuses entity_section in the vote compare UI, deleting duplicated markup/CSS—a lasting morph/SSE design fix. B only splits unranked siblings into singleton nav groups plus a unit test, a narrower UX tweak under #130.
Side A fixes a structural UI issue by replacing the hard-coded `#entity-section` target with per-item `data-entity-section` selectors, adds a reusable selector helper, and reuses the same `entity_section` component in the voting UI, reducing duplication and enabling correct morph/SSE updates for multiple entities. Side B changes sibling navigation so each unranked sibling becomes its own group and adds a focused test, but its impact is limited to one navigation behavior compared with A's broader architectural improvement and component reuse.
sides
A — c_c6beb77e8e71 (tommy-mor)
message
[8dab9b80] nice
diff preview
diff --git a/server/src/fetch/html.rs b/server/src/fetch/html.rs
index 3e0309ff1c2ac1b17923922d2340ba6710e0f9d1..dadf050515f0473943dad97df5d318032c8cb385 100644
--- a/server/src/fetch/html.rs
+++ b/server/src/fetch/html.rs
@@ -10,13 +10,18 @@ use crate::{
ui_action::UI_RPC_FIELD,
};
-fn entity_panel(node: &NodeState) -> Markup {
+/// CSS selector for Idiomorph / SSE updates of one entity block.
+pub fn entity_section_selector(item: &ItemId) -> String {
+ format!(r#"[data-entity-section="{}"]"#, item.as_str())
+}
+
+pub fn entity_panel(node: &NodeState) -> Markup {
if let Some(markup) = crate::render::reddit::entity_markup(node) {
return markup;
}
html! {
@if let Some(data) = &node.data {
- div id="entity-panel" class="entity-card" {
+ div class="entity-card" {
h2 { (data.title) }
@if let Some(author) = &data.author {
p class="muted small" { "by " (author) }
@@ -76,11 +81,11 @@ pub fn fetch_entity_panel(item: &ItemId, has_data: bool, fetching: bool) -> Mark
}
}
-/// Entity card + fetch control (target `#entity-section` for Idiomorph / SSE).
+/// Entity card + fetch control (morph target [`entity_section_selector`]).
pub fn entity_section(item: &ItemId, node: &NodeState, fetching: bool) -> Markup {
let has_data = node.data.is_some();
html! {
- section id="entity-section" class="demo-panel" {
+ section class="entity-section demo-panel" data-entity-section=(item.as_str()) {
(entity_panel(node))
(fetch_entity_panel(item, has_data, fetching))
}
diff --git a/server/src/fetch/mod.rs b/server/src/fetch/mod.rs
index 35f968c21c69ca557bab7951413e3cfbbccfebfd..f5759a34a1afe4069805441cefde6474a6403550 100644
--- a/server/src/fetch/mod.rs
+++ b/server/src/fetch/mod.rs
@@ -77,8 +77,9 @@ pub fn fetch_entity_stream(
let tree = state.tree.read().await;
let empty = NodeState::default();
let node = tree.get(&id).unwrap_or(&empty);
+ let sel = html::entity_section_selector(&id);
JsBuilder::new()
- .morph_selector("#entity-section", html::entity_section(&id, node, true))
+ .morph_selector(&sel, html::entity_section(&id, node, true))
.build()
};
yield Ok(js_event(fetching_js));
@@ -100,12 +101,13 @@ pub fn fetch_entity_stream(
FetchJobResult::Imported(_)
| FetchJobResult::NotFound
| FetchJobResult::SkippedCached
- | FetchJobResult::SkippedDuplicate => {
+ | FetchJobResult::SkippedDuplicate => {
let tree = state.tree.read().await;
let empty = NodeState::default();
let node = tree.get(&id).unwrap_or(&empty);
+ let sel = html::entity_section_selector(&id);
let mut b = JsBuilder::new()
- .morph_selector("#entity-section", html::entity_section(&id, node, false));
+ .morph_selector(&sel, html::entity_section(&id, node, false));
if kind == FetchKind::Children {
b = b.morph_selector("#ranking-panel", ranking_panel(&id, node, &tree));
}
@@ -115,8 +117,9 @@ pub fn fetch_entity_stream(
let tree = state.tree.read().await;
let empty = NodeState::default();
let node = tree.get(&id).unwrap_or(&empty);
+ let sel = html::entity_section_selector(&id);
let js = JsBuilder::new()
- .morph_selector("#entity-section", html::entity_section(&id, node, false))
+ .morph_selector(&sel, html::entity_section(&id, node, false))
.raw(&error_js(&format!("Reddit rate limit — retry in {reset_secs}s.")))
.build();
yield Ok(js_event(js));
@@ -125,8 +128,9 @@ pub fn fetch_entity_stream(
let tree = state.tree.read().await;
let empty = NodeState::default();
let node = tree.get(&id).unwrap_or(&empty);
+ let sel = html::entity_section_selector(&id);
let js = JsBuilder::new()
- .morph_selector("#entity-section", html::entity_section(&id, node, false))
+ .morph_selector(&sel, html::entity_section(&id, node, false))
.raw(&error_js(&format!("Fetch failed: {msg}")))
.build();
yield Ok(js_event(js));
diff --git a/server/src/html/vote.rs b/server/src/html/vote.rs
index 89ed621ad861214e147add2062224fc4137ff8ad..48752f4d78d4762d1badc44e8df008bf5a45bab4 100644
--- a/server/src/html/vote.rs
+++ b/server/src/html/vote.rs
@@ -8,6 +8,7 @@ use maud::{html, Markup};
use serde::Deserialize;
use crate::{
+ fetch::html::entity_section,
form_template::template_json_compact,
html::JsBuilder,
pair::{children_of, resolve_pair, suggest_next_pair_in_pool},
@@ -169,37 +170,13 @@ pub(crate) fn vote_recorded_morph(
}
fn vote_compare_item_card(tree: &GlobalTree, item: &ItemId, side_class: &str) -> Markup {
- let href = item_href(item);
- let title = child_title(tree, item);
+ let node = tree.get(item).cloned().unwrap_or_else(|| NodeState {
+ id: item.clone(),
+ ..Default::default()
+ });
html! {
div class=(format!("vote-compare-side {side_class}")) {
- a class=(format!("vote-compare-item {side_class}")) href=(href) {
- @if let Some(row) = crate::render::reddit::child_row_markup(tree, item, &href) {
- (row)
- } @else {
- strong { (title) }
- }
- }
- @if let Some(node) = tree.get(item) {
- @if crate::render::reddit::is_reddit_post(item) {
- @if let Some(data) = &node.data {
- @if let Some(src) = data.image_url.as_ref().or(data.thumb_url.as_ref()) {
- figure class="vote-compare-figure" {
- img class="vote-compare-image" src=(src) alt="" loading="lazy";
- }
- }
- @if let Some(author) = &data.author {
- p class="muted small" { "by " (author) }
- }
- }
- } @else if let Some(data) = &node.data {
- @if let Some(body) = &data.body_html {
- div class="vote-compare-item-body" {
- (maud::PreEscaped(body))
- }
- }
- }
- }
+ (entity_section(item, &node, false))
}
}
}
@@ -270,9 +247,6 @@ pub async fn vote_page(
(vote_compare_item_card(&tree, &right, "vote-compare-right"))
}
(vote_back_nav(&parent))
- div id="vote-edge-history-region" {
- (edge_history)
- }
form id="vote-compare-form" method="POST" action="/ui" {
input type="hidden" name=(UI_RPC_FIELD) value=(rpc_json);
input type="hidden" name="ratio_left" id="vote-ratio-left" value="50";
@@ -285,6 +259,9 @@ pub async fn vote_page(
}
(vote_compare_actions(&parent, next_pair.as_ref()))
}
+ div id="vote-edge-history-region" {
+ (edge_history)
+ }
}
};
diff --git a/server/src/render/reddit.rs b/server/src/render/reddit.rs
index 4a18de93cf57d8395ded3caa373a708f39b3f43f..c4f98fc760c32ce1b41a91bd41e97908bd198937 100644
--- a/server/src/render/reddit.rs
+++ b/server/src/render/reddit.rs
@@ -11,7 +11,7 @@ pub fn is_reddit_post(id: &ItemId) -> bool {
id.as_str().starts_with("reddit.com/") && id.as_str().contains("/comments/")
}
-/// Post detail card (`#entity-panel`).
+/// Post detail card (inside [`crate::fetch::html::entity_panel`]).
pub fn entity_markup(node: &NodeState) -> Option<Markup> {
if !is_reddit_post(&node.id) {
return None;
@@ -41,7 +41,7 @@ pub fn child_row_markup(tree: &GlobalTree, id: &ItemId, href: &str) -> Option<Ma
fn post_entity_card(data: &EntityData) -> Markup {
let image = data.image_url.as_ref().or(data.thumb_url.as_ref());
html! {
- div id="entity-panel" class="entity-card reddit-post" {
+ div class="entity-card reddit-post" {
h2 { (data.title) }
@if let Some(author) = &data.author {
p class="muted small" { "by " (author) }
diff --git a/server/static/sorter.css b/server/static/sorter.css
index b95718ce463b200a5667d3014dac2119836a0bef..9379c5f41dedbd41fd8951099a118de1da2a62f4 100644
--- a/server/static/sorter.css
+++ b/server/static/sorter.css
@@ -254,38 +254,11 @@ h1 {
}
.vote-compare-side {
- background: var(--panel);
- border: 1px solid var(--border);
- border-radius: 8px;
- padding: 1rem;
min-height: 120px;
}
-.vote-compare-item {
- color: var(--accent);
- text-decoration: none;
- display: block;
-}
-
-.vote-compare-item:hover {
- text-decoration: underline;
-}
-
-.vote-compare-figure {
- margin: 0.75rem 0 0;
-}
-
-.vote-compare-image {
- display: block;
- max-width: 100%;
- height: auto;
- border-radius: 6px;
- border: 1px solid var(--border);
-}
-
-.vote-compare-item-body {
- margin-top: 0.75rem;
- font-size: 0.9rem;
+.vote-compare-side .entity-section {
+ margin: 0;
}
.vote-compare-nav {
B — c_3403e5929da7 (tommy-mor)
message
[65bce99f] sibling groups #130
diff preview
diff --git a/server/src/html/garden.rs b/server/src/html/garden.rs
index 82c1b4b4f36ea13a906035a1789ba893222b3695..e3c56d124ab7b0fa08c7f9ae736103e6b7cf5862 100644
--- a/server/src/html/garden.rs
+++ b/server/src/html/garden.rs
@@ -837,7 +837,8 @@ struct SiblingNavGroup {
links: Vec<SiblingNavLink>,
}
-/// Siblings under the same parent, grouped like child rankings (components then isolates).
+/// Siblings under the same parent: one group per ranking component (ordered list), then one
+/// group per isolated unranked sibling (each shows rank `1`, separated like components).
#[derive(Debug, Clone)]
struct SiblingNavBar {
groups: Vec<SiblingNavGroup>,
@@ -890,15 +891,12 @@ fn build_sibling_nav(
groups.push(SiblingNavGroup { links });
}
}
- if !rankings.unranked_items.is_empty() {
- let links: Vec<SiblingNavLink> = rankings
- .unranked_items
- .iter()
- .map(|u| SiblingNavLink {
+ for u in &rankings.unranked_items {
+ groups.push(SiblingNavGroup {
+ links: vec![SiblingNavLink {
path: u.clone().normalized_storage().to_storage_string(),
- })
- .collect();
- groups.push(SiblingNavGroup { links });
+ }],
+ });
}
let sibling_total: usize = groups.iter().map(|g| g.links.len()).sum();
if sibling_total <= 1 {
@@ -1541,6 +1539,29 @@ mod tests {
assert_eq!(nav.groups[1].links.len(), 1);
}
+ #[test]
+ fn sibling_nav_splits_each_unranked_into_its_own_group() {
+ let mut reduced = ReducerState::default();
+ apply_ingest(
+ &mut reduced,
+ 1,
+ "@00000000-0000-0000-0000-000000000000:test:local/test\n\
+ ~/topic {topic body}\n\
+ ~/topic/a {alpha}\n\
+ ~/topic/b {beta}\n\
+ ~/topic/c {gamma}\n\
+ ~/topic/d {delta}\n\
+ {a beats b}\n ~/topic/a 2:1 ~/topic/b\n",
+ );
+
+ let model = build_item_page_view_model(&reduced, &ScopeId::Public, "~/topic/a");
+ let nav = model.sibling_nav.expect("expected sibling nav");
+ assert_eq!(nav.groups.len(), 3);
+ assert_eq!(nav.groups[0].links.len(), 2);
+ assert_eq!(nav.groups[1].links.len(), 1);
+ assert_eq!(nav.groups[2].links.len(), 1);
+ }
+
#[test]
fn item_page_model_builds_ranked_child_components() {
let mut reduced = ReducerState::default();
Hardlinks — judgments / attempts / prompt
judgments
attempts
Prompt text is loaded only by the download route.