Make it feel a little more lyric-editory

src/app/lyrics.rs

@@ -1,6 +1,9 @@
+use crate::app::Theme;
 use crate::app::Message;
 use crate::app::Element;
 
+use iced::Align;
+use iced::Length;
 use iced::widget::text_input::{self, TextInput};
 use iced::widget::scrollable::{self, Scrollable};
 
@@ -12,8 +15,10 @@ pub struct Lyrics {
 
 impl Lyrics {
 	pub fn new() -> Self {
+		let mut lyric = Lyric::new();
+		lyric.select();
 		Lyrics {
-			lines: vec![Lyric::new()],
+			lines: vec![lyric],
 			scroll_state: scrollable::State::new()
 		}
 	}
@@ -37,11 +42,14 @@ impl Lyrics {
 			.deselect();
 	}
 
-	pub fn view(&mut self) -> Element<Message> {
+	pub fn view(&mut self, theme: Theme) -> Element<Message> {
+		let is_sole_line = self.lines.len() == 1;
 		self.lines.iter_mut()
 			.enumerate()
-			.map(|(i, l)| l.view(i))
+			.map(|(i, l)| l.view(is_sole_line, i, theme))
 			.fold(Scrollable::new(&mut self.scroll_state), |s, l| s.push(l))
+			.width(Length::Fill)
+			.align_items(Align::Center)
 			.into()
 	}
 }
@@ -60,13 +68,25 @@ impl Lyric {
 		}
 	}
 
-	pub fn view(&mut self, line_no: usize) -> Element<Message> {
+	pub fn view(&mut self, show_placeholder: bool, line_no: usize, theme: Theme) -> Element<Message> {
+
+		let placeholder = if show_placeholder {
+			"Paste some lyrics to get started"
+		} else if self.state.is_focused() {
+			"..."
+		} else { "" };
+
+		let size = if self.state.is_focused() { 30 } else { 20 };
+
 		TextInput::new(
 			&mut self.state,
-			"",
+			placeholder,
 			&self.value,
 			move|new_value| Message::LyricChanged { line_no, new_value },
 		)
+			.style(theme)
+			.size(size)
+			.width(Length::Units(300))
 			.on_submit(Message::LineAdvanced(line_no))
 			.into()
 	}
@@ -77,6 +97,7 @@ impl Lyric {
 
 	pub fn select(&mut self) {
 		self.state.focus();
+		self.state.move_cursor_to_end();
 	}
 
 	pub fn deselect(&mut self) {

src/app/mod.rs

@@ -3,6 +3,7 @@ use iced::Row;
 use iced::Element;
 use iced::Sandbox;
 use iced::Length;
+use iced::Align;
 
 mod lyrics;
 mod styles;
@@ -52,8 +53,9 @@ impl Sandbox for DelyriumApp {
 	fn view(&mut self) -> Element<Message> {
 		Container::new(
 			Row::new()
-				.push(self.lyrics_component.view())
+				.push(self.lyrics_component.view(self.theme))
 		)
+		.align_y(Align::Center)
 		.style(self.theme)
 		.height(Length::Fill)
 		.into()

src/app/styles.rs

@@ -1,6 +1,9 @@
 use iced::Background;
 use iced::Color;
 use iced::widget::container;
+use iced::widget::text_input;
+
+const TRANSPARENT: Color = Color { r: 0., g: 0., b: 0., a: 0. };
 
 #[derive(Copy, Clone, Debug)]
 pub struct Theme {
@@ -26,3 +29,32 @@ impl container::StyleSheet for Theme {
 		}
 	}
 }
+
+impl text_input::StyleSheet for Theme {
+	fn active(&self) -> text_input::Style {
+		text_input::Style {
+			background: Background::Color(self.base_color),
+			border_radius: 0.,
+			border_width: 0.,
+			..Default::default()
+		}
+	}
+
+	fn focused(&self) -> text_input::Style {
+		self.active()
+	}
+
+	fn placeholder_color(&self) -> Color {
+		let mut color = self.text_color;
+		color.a = 0.5;
+		color
+	}
+
+	fn value_color(&self) -> Color {
+		self.text_color
+	}
+
+	fn selection_color(&self) -> Color {
+		self.text_color
+	}
+}