refactor(kanban): render shell from hemplate

Move the kanban full-page shell into a checked .heml unit so page assembly uses slhx render/SafeHtml composition instead of hand-built trusted HTML strings.

req: html_safety/001

req: html_safety/002

req: component/003
This commit is contained in:
slhx agent
2026-06-02 00:08:48 +02:00
parent e9bc145b22
commit bff769b52a
2 changed files with 26 additions and 25 deletions
+6 -25
View File
@@ -35,6 +35,11 @@ struct Card {
column: usize,
}
#[derive(Hemplate)]
struct AppShell {
body: SafeHtml,
}
#[derive(Hemplate)]
#[hemplate = "partials"]
struct BoardColumns {
@@ -232,32 +237,8 @@ fn page_html(board: &BoardState) -> SafeHtml {
}
fn shell(body: SafeHtml) -> SafeHtml {
// Explicit full-page composition boundary for already-rendered hemplate fragments.
// req: html_safety/001 req: html_safety/002 req: axum_integration/001
SafeHtml::trusted(format!(
r#"<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slhx Kanban</title>
<script src="/slhx.js" defer></script>
<style>
body {{ font-family: system-ui, sans-serif; margin: 2rem; }}
form {{ display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }}
.columns {{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }}
.column {{ border: 1px solid #ddd; border-radius: .5rem; padding: 1rem; background: #fafafa; }}
.card {{ background: white; border: 1px solid #ccc; border-radius: .5rem; margin: .75rem 0; padding: .75rem; }}
.card menu {{ display: flex; gap: .35rem; padding: 0; margin: .5rem 0 0; }}
.presence {{ color: #376; }}
button, input, select {{ font: inherit; }}
</style>
</head>
<body>
{body}
</body>
</html>"#
))
slhx::render(&AppShell { body })
}
fn render_options() -> SafeHtml {
+20
View File
@@ -0,0 +1,20 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>slhx Kanban</title>
<script src="/slhx.js" defer></script>
<style>
body { font-family: system-ui, sans-serif; margin: 2rem; }
form { display: flex; gap: .5rem; flex-wrap: wrap; margin: 1rem 0; }
.columns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.column { border: 1px solid #ddd; border-radius: .5rem; padding: 1rem; background: #fafafa; }
.card { background: white; border: 1px solid #ccc; border-radius: .5rem; margin: .75rem 0; padding: .75rem; }
.card menu { display: flex; gap: .35rem; padding: 0; margin: .5rem 0 0; }
.presence { color: #376; }
button, input, select { font: inherit; }
</style>
</head>
<body>{+= self.body =+}</body>
</html>