AMADEUS: First implementation of the kara modal info

amadeus/src/components/modal/karainfos.rs

+use crate::style_sheet::sizes::*;
 use iced::{
-    widget::{column, container, text},
+    widget::{column, container, horizontal_rule, row, text},
     Element,
 };
-use lektor_payloads::Kara;
+use iced_aw::native::{badge, wrap_horizontal};
+use lektor_payloads::{Kara, KaraTimeStamps};
+use lektor_utils::either;
 use std::sync::Arc;
 
 /// Display the specified kara in a modal.
@@ -16,10 +19,103 @@ impl State {
 
     /// View the modal, no action available for now.
     pub fn view(&self) -> Element<'_, ()> {
-        container(column![
+        let Kara {
+            id,
+            remote,
+            song_title,
+            song_source,
+            kara_makers,
+            song_type,
+            song_origin,
+            language,
+            kara_status,
+            timestamps:
+                KaraTimeStamps {
+                    created_at,
+                    updated_at,
+                    epoch,
+                },
+            tags,
+        } = self.0.as_ref();
+
+        let mut language: Vec<_> = language.iter().collect();
+        language.sort();
+        let language = language
+            .into_iter()
+            .map(|lang| badge(text(lang.as_ref()).size(SIZE_FONT_MOAR)).into());
+
+        let mut kara_makers: Vec<_> = kara_makers.iter().collect();
+        kara_makers.sort();
+        let kara_makers = kara_makers
+            .into_iter()
+            .map(|author| badge(text(author.as_ref()).size(SIZE_FONT_MOAR)).into());
+
+        let mut tags: Vec<_> = tags.into_iter().collect();
+        tags.sort();
+        let tags = tags.into_iter().map(|(key, values)| {
+            let values = values.join(", ");
+            either!(values.is_empty() =>
+                badge(text(key.as_ref()).size(SIZE_FONT_MOAR)).into();
+                badge(text(format!("{key}: {values}")).size(SIZE_FONT_MOAR)).into()
+            )
+        });
+
+        let aux_infos = match kara_status {
+            lektor_payloads::KaraStatus::Virtual => column![
+                text(format!("Local ID: {}", id.local_id())),
+                text(format!("Remote Name: {}", remote.remote_name())),
+                text(format!("Remote ID: {}", remote.remote_id())),
+                text(format!("Created at: {}", created_at)),
+                text(format!("Last Modified at: {}", updated_at)),
+                text(format!("Database Epoch: {epoch}")),
+            ],
+            lektor_payloads::KaraStatus::Physical { filesize, hash } => column![
+                text(format!("Local ID: {}", id.local_id())),
+                text(format!("Remote Name: {}", remote.remote_name())),
+                text(format!("Remote ID: {}", remote.remote_id())),
+                text(format!("Created at: {}", created_at)),
+                text(format!("Last Modified at: {}", updated_at)),
+                text(format!("Database Epoch: {epoch}")),
+                text(format!("File Size: {}B", filesize)),
+                text(format!("File Hash: {hash}")),
+            ],
+        };
+
+        container(
+            column![
                 text("Kara Information"),
-            text(format!("{:#?}", self.0))
-        ])
+                horizontal_rule(4),
+                //
+                column![
+                    text(format!("Source: {song_source}")).size(SIZE_FONT_TITLE),
+                    text(format!("Title: {song_title}")).size(SIZE_FONT_TITLE),
+                    row![
+                        badge(text(song_origin.as_str()).size(SIZE_FONT_MOAR)),
+                        badge(text(song_type.as_str()).size(SIZE_FONT_MOAR)),
+                    ]
+                    .spacing(5),
+                    wrap_horizontal(kara_makers.collect()).spacing(5.0),
+                ]
+                .spacing(5),
+                //
+                column![
+                    text("Languages").size(SIZE_FONT_SMALL),
+                    wrap_horizontal(language.collect()).spacing(5.0),
+                ]
+                .spacing(2),
+                //
+                column![
+                    text("Tags").size(SIZE_FONT_SMALL),
+                    wrap_horizontal(tags.collect()).spacing(5.0),
+                ]
+                .spacing(2),
+                //
+                horizontal_rule(4),
+                aux_infos.spacing(5),
+            ]
+            .spacing(10),
+        )
+        .max_width(600)
         .into()
     }
 }