GKaszewski/k-frame
1
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

expose h_align/v_align through full stack

Browse Source 
display_hint becomes {kind, h_align, v_align} object in API, SQLite
gets alignment columns, SPA widget form gets alignment selects, layout
preview reflects actual alignment instead of hardcoded center
This commit is contained in:
Gabriel Kaszewski
2026-06-19 10:28:09 +02:00
parent ca2ef61097
commit b448fa15fe
8 changed files with 200 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
crates/adapters/config-sqlite/src/lib.rs
View File

@@ -96,6 +96,14 @@ impl SqliteConfigStore {
.execute(&self.pool)
.await?;
// Add alignment columns to widgets (idempotent)
let _ = sqlx::query("ALTER TABLE widgets ADD COLUMN h_align TEXT NOT NULL DEFAULT 'left'")
.execute(&self.pool)
.await;
let _ = sqlx::query("ALTER TABLE widgets ADD COLUMN v_align TEXT NOT NULL DEFAULT 'top'")
.execute(&self.pool)
.await;
Ok(())
}
}

10
crates/adapters/config-sqlite/src/repository/widgets.rs
View File

@@ -34,15 +34,19 @@ impl SqliteConfigStore {
config: &WidgetConfig,
) -> Result<(), SqliteConfigError> {
let mappings_json = ser::mappings_to_json(&config.mappings)?;
let hint_str = ser::display_hint_to_str(&config.display_hint);
let hint_str = ser::display_hint_kind_to_str(&config.display_hint);
let h_align_str = ser::h_align_to_str(config.display_hint.h_align);
let v_align_str = ser::v_align_to_str(config.display_hint.v_align);
sqlx::query(
"INSERT OR REPLACE INTO widgets (id, name, display_hint, data_source_id, mappings, max_data_size)
VALUES (?, ?, ?, ?, ?, ?)"
"INSERT OR REPLACE INTO widgets (id, name, display_hint, h_align, v_align, data_source_id, mappings, max_data_size)
VALUES (?, ?, ?, ?, ?, ?, ?, ?)"
)
.bind(config.id as i64)
.bind(&config.name)
.bind(hint_str)
.bind(h_align_str)
.bind(v_align_str)
.bind(config.data_source_id as i64)
.bind(&mappings_json)
.bind(config.max_data_size as i64)

58
crates/adapters/config-sqlite/src/serialization/widget.rs
View File

@@ -1,9 +1,9 @@
use crate::error::SqliteConfigError;
use domain::{DisplayHint, DisplayHintKind, KeyMapping, WidgetConfig};
use domain::{DisplayHint, DisplayHintKind, HAlign, KeyMapping, VAlign, WidgetConfig};
use sqlx::Row;
use sqlx::sqlite::SqliteRow;
pub fn display_hint_to_str(hint: &DisplayHint) -> &'static str {
pub fn display_hint_kind_to_str(hint: &DisplayHint) -> &'static str {
match hint.kind {
DisplayHintKind::IconValue => "icon_value",
DisplayHintKind::TextBlock => "text_block",
@@ -11,17 +11,55 @@ pub fn display_hint_to_str(hint: &DisplayHint) -> &'static str {
}
}
fn display_hint_from_str(s: &str) -> Result<DisplayHint, SqliteConfigError> {
pub fn h_align_to_str(a: HAlign) -> &'static str {
match a {
HAlign::Left => "left",
HAlign::Center => "center",
HAlign::Right => "right",
}
}
pub fn v_align_to_str(a: VAlign) -> &'static str {
match a {
VAlign::Top => "top",
VAlign::Middle => "middle",
VAlign::Bottom => "bottom",
}
}
fn hint_kind_from_str(s: &str) -> Result<DisplayHintKind, SqliteConfigError> {
match s {
"icon_value" => Ok(DisplayHint::new(DisplayHintKind::IconValue)),
"text_block" => Ok(DisplayHint::new(DisplayHintKind::TextBlock)),
"key_value" => Ok(DisplayHint::new(DisplayHintKind::KeyValue)),
"icon_value" => Ok(DisplayHintKind::IconValue),
"text_block" => Ok(DisplayHintKind::TextBlock),
"key_value" => Ok(DisplayHintKind::KeyValue),
_ => Err(SqliteConfigError::Serialization(format!(
"unknown display hint: {s}"
))),
}
}
fn h_align_from_str(s: &str) -> Result<HAlign, SqliteConfigError> {
match s {
"left" => Ok(HAlign::Left),
"center" => Ok(HAlign::Center),
"right" => Ok(HAlign::Right),
_ => Err(SqliteConfigError::Serialization(format!(
"unknown h_align: {s}"
))),
}
}
fn v_align_from_str(s: &str) -> Result<VAlign, SqliteConfigError> {
match s {
"top" => Ok(VAlign::Top),
"middle" => Ok(VAlign::Middle),
"bottom" => Ok(VAlign::Bottom),
_ => Err(SqliteConfigError::Serialization(format!(
"unknown v_align: {s}"
))),
}
}
pub fn mappings_to_json(mappings: &[KeyMapping]) -> Result<String, SqliteConfigError> {
let entries: Vec<serde_json::Value> = mappings
.iter()
@@ -60,6 +98,8 @@ pub fn widget_from_row(row: &SqliteRow) -> Result<WidgetConfig, SqliteConfigErro
let id: i64 = row.get("id");
let name: String = row.get("name");
let hint_str: String = row.get("display_hint");
let h_align_str: String = row.get("h_align");
let v_align_str: String = row.get("v_align");
let ds_id: i64 = row.get("data_source_id");
let mappings_json: String = row.get("mappings");
let max_size: i64 = row.get("max_data_size");
@@ -67,7 +107,11 @@ pub fn widget_from_row(row: &SqliteRow) -> Result<WidgetConfig, SqliteConfigErro
Ok(WidgetConfig {
id: id as u16,
name,
display_hint: display_hint_from_str(&hint_str)?,
display_hint: DisplayHint {
kind: hint_kind_from_str(&hint_str)?,
h_align: h_align_from_str(&h_align_str)?,
v_align: v_align_from_str(&v_align_str)?,
},
data_source_id: ds_id as u16,
mappings: mappings_from_json(&mappings_json)?,
max_data_size: max_size as u16,

9
crates/adapters/http-api/tests/api_tests.rs
View File

@@ -86,7 +86,7 @@ async fn create_and_get_widget() {
let body = r#"{
"id": 1,
"name": "weather",
"display_hint": "icon_value",
"display_hint": {"kind": "icon_value", "h_align": "left", "v_align": "top"},
"data_source_id": 10,
"mappings": [{"source_path": "$.temp", "target_key": "temperature"}]
}"#;
@@ -115,8 +115,8 @@ async fn create_and_get_widget() {
async fn list_widgets() {
let app = test_app();
let w1 = r#"{"id":1,"name":"a","display_hint":"icon_value","data_source_id":1,"mappings":[]}"#;
let w2 = r#"{"id":2,"name":"b","display_hint":"key_value","data_source_id":2,"mappings":[]}"#;
let w1 = r#"{"id":1,"name":"a","display_hint":{"kind":"icon_value"},"data_source_id":1,"mappings":[]}"#;
let w2 = r#"{"id":2,"name":"b","display_hint":{"kind":"key_value"},"data_source_id":2,"mappings":[]}"#;
app.clone()
.oneshot(authed_json_request("POST", "/api/widgets", Some(w1)))
@@ -142,8 +142,7 @@ async fn list_widgets() {
async fn delete_widget() {
let app = test_app();
let body =
r#"{"id":1,"name":"a","display_hint":"icon_value","data_source_id":1,"mappings":[]}"#;
let body = r#"{"id":1,"name":"a","display_hint":{"kind":"icon_value"},"data_source_id":1,"mappings":[]}"#;
app.clone()
.oneshot(authed_json_request("POST", "/api/widgets", Some(body)))
.await

84
crates/api-types/src/widget.rs
View File

@@ -7,11 +7,28 @@ pub struct KeyMappingDto {
pub target_key: String,
}
#[derive(Serialize, Deserialize)]
pub struct DisplayHintDto {
pub kind: String,
#[serde(default = "default_h_align")]
pub h_align: String,
#[serde(default = "default_v_align")]
pub v_align: String,
}
fn default_h_align() -> String {
"left".into()
}
fn default_v_align() -> String {
"top".into()
}
#[derive(Serialize, Deserialize)]
pub struct WidgetDto {
pub id: u16,
pub name: String,
pub display_hint: String,
pub display_hint: DisplayHintDto,
pub data_source_id: u16,
pub mappings: Vec<KeyMappingDto>,
pub max_data_size: u16,
@@ -21,7 +38,7 @@ pub struct WidgetDto {
pub struct CreateWidgetDto {
pub id: u16,
pub name: String,
pub display_hint: String,
pub display_hint: DisplayHintDto,
pub data_source_id: u16,
pub mappings: Vec<KeyMappingDto>,
#[serde(default = "default_max_data_size")]
@@ -32,17 +49,40 @@ fn default_max_data_size() -> u16 {
2048
}
fn kind_to_str(kind: &DisplayHintKind) -> &'static str {
match kind {
DisplayHintKind::IconValue => "icon_value",
DisplayHintKind::TextBlock => "text_block",
DisplayHintKind::KeyValue => "key_value",
}
}
fn h_align_to_str(a: HAlign) -> &'static str {
match a {
HAlign::Left => "left",
HAlign::Center => "center",
HAlign::Right => "right",
}
}
fn v_align_to_str(a: VAlign) -> &'static str {
match a {
VAlign::Top => "top",
VAlign::Middle => "middle",
VAlign::Bottom => "bottom",
}
}
impl From<&WidgetConfig> for WidgetDto {
fn from(w: &WidgetConfig) -> Self {
Self {
id: w.id,
name: w.name.clone(),
display_hint: match w.display_hint.kind {
DisplayHintKind::IconValue => "icon_value",
DisplayHintKind::TextBlock => "text_block",
DisplayHintKind::KeyValue => "key_value",
}
.into(),
display_hint: DisplayHintDto {
kind: kind_to_str(&w.display_hint.kind).into(),
h_align: h_align_to_str(w.display_hint.h_align).into(),
v_align: v_align_to_str(w.display_hint.v_align).into(),
},
data_source_id: w.data_source_id,
mappings: w
.mappings
@@ -59,16 +99,32 @@ impl From<&WidgetConfig> for WidgetDto {
impl CreateWidgetDto {
pub fn into_domain(self) -> Result<WidgetConfig, String> {
let hint = match self.display_hint.as_str() {
"icon_value" => DisplayHint::new(DisplayHintKind::IconValue),
"text_block" => DisplayHint::new(DisplayHintKind::TextBlock),
"key_value" => DisplayHint::new(DisplayHintKind::KeyValue),
h => return Err(format!("unknown display_hint: {h}")),
let kind = match self.display_hint.kind.as_str() {
"icon_value" => DisplayHintKind::IconValue,
"text_block" => DisplayHintKind::TextBlock,
"key_value" => DisplayHintKind::KeyValue,
h => return Err(format!("unknown display_hint kind: {h}")),
};
let h_align = match self.display_hint.h_align.as_str() {
"left" => HAlign::Left,
"center" => HAlign::Center,
"right" => HAlign::Right,
h => return Err(format!("unknown h_align: {h}")),
};
let v_align = match self.display_hint.v_align.as_str() {
"top" => VAlign::Top,
"middle" => VAlign::Middle,
"bottom" => VAlign::Bottom,
v => return Err(format!("unknown v_align: {v}")),
};
Ok(WidgetConfig {
id: self.id,
name: self.name,
display_hint: hint,
display_hint: DisplayHint {
kind,
h_align,
v_align,
},
data_source_id: self.data_source_id,
mappings: self
.mappings

10
spa/src/api/types.ts
View File

@@ -1,4 +1,12 @@
export type DisplayHint = "icon_value" | "text_block" | "key_value"
export type DisplayHintKind = "icon_value" | "text_block" | "key_value"
export type HAlign = "left" | "center" | "right"
export type VAlign = "top" | "middle" | "bottom"
export interface DisplayHint {
kind: DisplayHintKind
h_align: HAlign
v_align: VAlign
}
export type SourceType = "weather" | "media" | "rss" | "http_json" | "webhook"
export type SizingType = "fixed" | "flex"
export type Direction = "row" | "column"

15
spa/src/components/layout-preview.tsx
View File

@@ -54,6 +54,11 @@ export function LayoutPreview({
const box = bounds.get(wid)
if (!box) return null
const w = widgets.find((w) => w.id === wid)
const hAlign = w?.display_hint?.h_align ?? "left"
const vAlign = w?.display_hint?.v_align ?? "top"
const flexAlign = hAlign === "center" ? "center" : hAlign === "right" ? "flex-end" : "flex-start"
const flexJustify = vAlign === "middle" ? "center" : vAlign === "bottom" ? "flex-end" : "flex-start"
const textAlign = hAlign === "center" ? "center" as const : hAlign === "right" ? "right" as const : "left" as const
return (
<div
key={wid}
@@ -67,8 +72,8 @@ export function LayoutPreview({
boxSizing: "border-box",
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
alignItems: flexAlign,
justifyContent: flexJustify,
overflow: "hidden",
padding: 2 * scale,
}}
@@ -77,7 +82,7 @@ export function LayoutPreview({
style={{
fontSize: 10 * scale,
color: colorToCSS(theme.text),
textAlign: "center",
textAlign,
lineHeight: 1.2,
}}
>
@@ -88,10 +93,10 @@ export function LayoutPreview({
style={{
fontSize: 8 * scale,
color: colorToCSS(theme.accent),
textAlign: "center",
textAlign,
}}
>
{w.display_hint}
{w.display_hint.kind}
</span>
)}
</div>

49
spa/src/pages/widgets.tsx
View File

@@ -7,7 +7,7 @@ import {
useWidgetPreview,
} from "@/api/widgets"
import { useDataSources } from "@/api/data-sources"
import type { Widget, DisplayHint, KeyMapping } from "@/api/types"
import type { Widget, DisplayHintKind, HAlign, VAlign, KeyMapping } from "@/api/types"
import { Button } from "@/components/ui/button"
import {
Card,
@@ -46,13 +46,12 @@ import { Badge } from "@/components/ui/badge"
import { Plus, Pencil, Trash2, X, Eye } from "lucide-react"
import { toast } from "sonner"
const DISPLAY_HINTS: DisplayHint[] = ["icon_value", "text_block", "key_value"]
const DISPLAY_HINT_KINDS: DisplayHintKind[] = ["icon_value", "text_block", "key_value"]
const EMPTY: Widget = {
id: 0,
name: "",
display_hint: "icon_value",
display_hint: { kind: "icon_value", h_align: "left", v_align: "top" },
data_source_id: 0,
mappings: [],
max_data_size: 2048,
@@ -141,7 +140,7 @@ export function WidgetsPage() {
<div className="space-y-1">
<CardTitle className="text-base">{w.name}</CardTitle>
<CardDescription className="flex items-center gap-2">
<Badge variant="secondary">{w.display_hint}</Badge>
<Badge variant="secondary">{w.display_hint.kind}</Badge>
<span>source: {sourceName(w.data_source_id)}</span>
<span>{w.mappings.length} mapping(s)</span>
</CardDescription>
@@ -326,14 +325,14 @@ function WidgetForm({
<div className="grid gap-2">
<Label>Display Hint</Label>
<Select
value={value.display_hint}
onValueChange={(v) => set("display_hint", v as DisplayHint)}
value={value.display_hint.kind}
onValueChange={(v) => set("display_hint", { ...value.display_hint, kind: v as DisplayHintKind })}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
{DISPLAY_HINTS.map((h) => (
{DISPLAY_HINT_KINDS.map((h) => (
<SelectItem key={h} value={h}>
{h}
</SelectItem>
@@ -341,6 +340,40 @@ function WidgetForm({
</SelectContent>
</Select>
</div>
<div className="grid grid-cols-2 gap-4">
<div className="grid gap-2">
<Label>H Align</Label>
<Select
value={value.display_hint.h_align}
onValueChange={(v) => set("display_hint", { ...value.display_hint, h_align: v as HAlign })}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="left">Left</SelectItem>
<SelectItem value="center">Center</SelectItem>
<SelectItem value="right">Right</SelectItem>
</SelectContent>
</Select>
</div>
<div className="grid gap-2">
<Label>V Align</Label>
<Select
value={value.display_hint.v_align}
onValueChange={(v) => set("display_hint", { ...value.display_hint, v_align: v as VAlign })}
>
<SelectTrigger>
<SelectValue />
</SelectTrigger>
<SelectContent>
<SelectItem value="top">Top</SelectItem>
<SelectItem value="middle">Middle</SelectItem>
<SelectItem value="bottom">Bottom</SelectItem>
</SelectContent>
</Select>
</div>
</div>
<div className="grid gap-2">
<Label>Data Source</Label>
<Select