expose h_align/v_align through full stack

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

crates/api-types/src/widget.rs

@@ -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