refine app foundation
This commit is contained in:
454
src/app/view.rs
Normal file
454
src/app/view.rs
Normal file
@@ -0,0 +1,454 @@
|
||||
use super::{App, MODEL_CHOICES, Message, ModelChoice};
|
||||
use crate::database::{ProjectWithSessions, Session};
|
||||
use iced::theme::{Palette, palette};
|
||||
use iced::widget::{
|
||||
Space, Svg, button, checkbox, column, container, opaque, pick_list, row, scrollable, stack,
|
||||
svg, text, text_input,
|
||||
};
|
||||
use iced::{Alignment, Color, Element, Length, Theme};
|
||||
use std::path::Path;
|
||||
|
||||
const ICON_FOLDER: &[u8] = include_bytes!("../../assets/icons/folder.svg");
|
||||
const ICON_FOLDER_PLUS: &[u8] = include_bytes!("../../assets/icons/folder-plus.svg");
|
||||
const ICON_NEW_SESSION: &[u8] = include_bytes!("../../assets/icons/new-session.svg");
|
||||
const ICON_CHAT: &[u8] = include_bytes!("../../assets/icons/chat.svg");
|
||||
const ICON_SETTINGS: &[u8] = include_bytes!("../../assets/icons/settings.svg");
|
||||
const ICON_TRASH: &[u8] = include_bytes!("../../assets/icons/trash.svg");
|
||||
const ICON_MORE: &[u8] = include_bytes!("../../assets/icons/more.svg");
|
||||
const ICON_PAPERCLIP: &[u8] = include_bytes!("../../assets/icons/paperclip.svg");
|
||||
const ICON_SEND: &[u8] = include_bytes!("../../assets/icons/send.svg");
|
||||
const ICON_MODEL: &[u8] = include_bytes!("../../assets/icons/model.svg");
|
||||
const ICON_SPARK: &[u8] = include_bytes!("../../assets/icons/spark.svg");
|
||||
|
||||
impl App {
|
||||
pub(crate) fn view(&self) -> Element<'_, Message> {
|
||||
let mut shell = column![
|
||||
row![self.sidebar(), self.detail()]
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
];
|
||||
if let Some(error) = &self.error {
|
||||
shell = shell.push(
|
||||
container(text(error).style(iced::widget::text::danger))
|
||||
.padding([8, 14])
|
||||
.width(Length::Fill),
|
||||
);
|
||||
}
|
||||
let content: Element<'_, Message> = shell.into();
|
||||
let mut layers = vec![content];
|
||||
|
||||
if self.preferences_open {
|
||||
layers.push(self.preferences_panel());
|
||||
} else if let Some(path) = &self.pending_project_path {
|
||||
layers.push(self.project_dialog(path));
|
||||
}
|
||||
|
||||
stack(layers)
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
.into()
|
||||
}
|
||||
|
||||
fn sidebar(&self) -> Element<'_, Message> {
|
||||
let new_session_content = row![icon(ICON_NEW_SESSION, 17), text("New session").size(14),]
|
||||
.spacing(9)
|
||||
.align_y(Alignment::Center);
|
||||
let new_session = if self.selected_project.is_some() {
|
||||
button(new_session_content)
|
||||
.width(Length::Fill)
|
||||
.on_press(Message::CreateSession)
|
||||
} else {
|
||||
button(new_session_content).width(Length::Fill)
|
||||
};
|
||||
let preference_content = row![
|
||||
icon(ICON_SETTINGS, 17),
|
||||
text("Preferences").size(14),
|
||||
Space::with_width(Length::Fill),
|
||||
text("⌘,").size(12),
|
||||
]
|
||||
.spacing(9)
|
||||
.align_y(Alignment::Center);
|
||||
let preferences = if self.database.is_some() {
|
||||
button(preference_content)
|
||||
.width(Length::Fill)
|
||||
.on_press(Message::OpenPreferences)
|
||||
} else {
|
||||
button(preference_content).width(Length::Fill)
|
||||
};
|
||||
let add_project_content = row![icon(ICON_FOLDER_PLUS, 17), text("Add project…").size(14),]
|
||||
.spacing(9)
|
||||
.align_y(Alignment::Center);
|
||||
let add_project = if self.choosing_folder || self.database.is_none() {
|
||||
button(add_project_content).width(Length::Fill)
|
||||
} else {
|
||||
button(add_project_content)
|
||||
.width(Length::Fill)
|
||||
.on_press(Message::ChooseProjectFolder)
|
||||
};
|
||||
let header = column![
|
||||
row![
|
||||
text("DS4Server").size(20),
|
||||
Space::with_width(Length::Fill),
|
||||
text("Local").size(12),
|
||||
]
|
||||
.align_y(Alignment::Center),
|
||||
new_session.style(button::text),
|
||||
]
|
||||
.spacing(10);
|
||||
let mut projects = column![
|
||||
row![
|
||||
text("PROJECTS").size(11),
|
||||
Space::with_width(Length::Fill),
|
||||
text("LOCAL").size(10),
|
||||
],
|
||||
add_project.style(button::text),
|
||||
]
|
||||
.spacing(10);
|
||||
|
||||
for item in &self.projects {
|
||||
let project = &item.project;
|
||||
let selected = self.selected_project == Some(project.id);
|
||||
projects = projects.push(
|
||||
row![
|
||||
button(
|
||||
row![icon(ICON_FOLDER, 17), text(&project.name).size(14)]
|
||||
.spacing(9)
|
||||
.align_y(Alignment::Center),
|
||||
)
|
||||
.width(Length::Fill)
|
||||
.on_press(Message::SelectProject(project.id))
|
||||
.style(button::text),
|
||||
button(icon(ICON_TRASH, 15))
|
||||
.on_press(Message::DeleteProject(project.id))
|
||||
.style(button::text),
|
||||
]
|
||||
.spacing(4)
|
||||
.align_y(Alignment::Center),
|
||||
);
|
||||
|
||||
for session in &item.sessions {
|
||||
let session_selected = selected && self.selected_session == Some(session.id);
|
||||
projects = projects.push(
|
||||
row![
|
||||
Space::with_width(26),
|
||||
button(
|
||||
row![icon(ICON_CHAT, 15), text(&session.title).size(13)]
|
||||
.spacing(8)
|
||||
.align_y(Alignment::Center),
|
||||
)
|
||||
.width(Length::Fill)
|
||||
.on_press(Message::SelectSession(project.id, session.id))
|
||||
.style(if session_selected {
|
||||
button::secondary
|
||||
} else {
|
||||
button::text
|
||||
}),
|
||||
button(icon(ICON_TRASH, 14))
|
||||
.on_press(Message::DeleteSession(session.id))
|
||||
.style(button::text),
|
||||
]
|
||||
.spacing(3)
|
||||
.align_y(Alignment::Center),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
container(
|
||||
column![
|
||||
header,
|
||||
scrollable(projects).height(Length::Fill),
|
||||
preferences.style(button::text),
|
||||
]
|
||||
.spacing(10),
|
||||
)
|
||||
.width(276)
|
||||
.height(Length::Fill)
|
||||
.padding(16)
|
||||
.style(sidebar_style)
|
||||
.into()
|
||||
}
|
||||
|
||||
fn detail(&self) -> Element<'_, Message> {
|
||||
let Some(item) = self.selected_project() else {
|
||||
let open_project_content = row![icon(ICON_FOLDER_PLUS, 17), text("Open project…"),]
|
||||
.spacing(8)
|
||||
.align_y(Alignment::Center);
|
||||
let open_project = if self.database.is_some() && !self.choosing_folder {
|
||||
button(open_project_content)
|
||||
.on_press(Message::ChooseProjectFolder)
|
||||
.style(button::primary)
|
||||
} else {
|
||||
button(open_project_content)
|
||||
};
|
||||
return container(
|
||||
column![
|
||||
icon(ICON_SPARK, 36),
|
||||
text("Start a local coding session").size(28),
|
||||
text("Choose a project folder to create your first session.").size(14),
|
||||
Space::with_height(10),
|
||||
open_project,
|
||||
]
|
||||
.spacing(10)
|
||||
.align_x(Alignment::Center),
|
||||
)
|
||||
.center_x(Length::Fill)
|
||||
.center_y(Length::Fill)
|
||||
.into();
|
||||
};
|
||||
|
||||
let project = &item.project;
|
||||
let selected_title = self
|
||||
.selected_session(item)
|
||||
.map(|session| session.title.as_str())
|
||||
.unwrap_or(project.name.as_str());
|
||||
let header = row![
|
||||
icon(ICON_FOLDER, 19),
|
||||
text(selected_title).size(18),
|
||||
icon(ICON_MORE, 18),
|
||||
Space::with_width(Length::Fill),
|
||||
]
|
||||
.spacing(10)
|
||||
.align_y(Alignment::Center);
|
||||
|
||||
let body: Element<'_, Message> = if let Some(session) = self.selected_session(item) {
|
||||
let conversation = column![
|
||||
Space::with_height(Length::Fill),
|
||||
column![
|
||||
text(&session.title).size(26),
|
||||
text("This session is ready for the agent runtime.").size(14),
|
||||
]
|
||||
.spacing(8),
|
||||
Space::with_height(Length::Fill),
|
||||
container(
|
||||
column![
|
||||
text("Ask DS4Server anything…"),
|
||||
Space::with_height(28),
|
||||
row![
|
||||
icon(ICON_PAPERCLIP, 19),
|
||||
Space::with_width(Length::Fill),
|
||||
icon(ICON_MODEL, 16),
|
||||
text(
|
||||
ModelChoice::from_id(&self.preferences.selected_model)
|
||||
.unwrap_or_default()
|
||||
.to_string(),
|
||||
)
|
||||
.size(12),
|
||||
button(icon(ICON_SEND, 18)),
|
||||
]
|
||||
.align_y(Alignment::Center),
|
||||
]
|
||||
.spacing(8),
|
||||
)
|
||||
.padding(16)
|
||||
.width(Length::Fill)
|
||||
.style(container::rounded_box),
|
||||
]
|
||||
.height(Length::Fill)
|
||||
.spacing(8);
|
||||
container(conversation)
|
||||
.max_width(860)
|
||||
.center_x(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
.into()
|
||||
} else {
|
||||
container(
|
||||
column![
|
||||
text(if item.sessions.is_empty() {
|
||||
"No sessions yet"
|
||||
} else {
|
||||
"Choose a session"
|
||||
})
|
||||
.size(24),
|
||||
text("Create a session above or select one from the sidebar.").size(14),
|
||||
]
|
||||
.spacing(8)
|
||||
.align_x(Alignment::Center),
|
||||
)
|
||||
.center_x(Length::Fill)
|
||||
.center_y(Length::Fill)
|
||||
.into()
|
||||
};
|
||||
|
||||
container(column![header, body].spacing(24))
|
||||
.width(Length::Fill)
|
||||
.height(Length::Fill)
|
||||
.padding(24)
|
||||
.into()
|
||||
}
|
||||
|
||||
fn preferences_panel(&self) -> Element<'_, Message> {
|
||||
let dflash_toggle: Option<fn(bool) -> Message> = self
|
||||
.preference_draft
|
||||
.model
|
||||
.supports_dflash()
|
||||
.then_some(Message::PreferenceDflashChanged);
|
||||
let dflash = checkbox(
|
||||
"Enable DFlash for this model",
|
||||
self.preference_draft.dflash_enabled,
|
||||
)
|
||||
.on_toggle_maybe(dflash_toggle);
|
||||
|
||||
let mut content = column![
|
||||
row![
|
||||
icon(ICON_SETTINGS, 22),
|
||||
text("Preferences").size(24),
|
||||
Space::with_width(Length::Fill),
|
||||
text("⌘,").size(12),
|
||||
]
|
||||
.spacing(10)
|
||||
.align_y(Alignment::Center),
|
||||
Space::with_height(6),
|
||||
text("MODEL").size(11),
|
||||
pick_list(
|
||||
&MODEL_CHOICES[..],
|
||||
Some(self.preference_draft.model),
|
||||
Message::PreferenceModelChanged,
|
||||
)
|
||||
.width(Length::Fill),
|
||||
dflash,
|
||||
text(if self.preference_draft.model.supports_dflash() {
|
||||
"DFlash is downloaded and used only when enabled."
|
||||
} else {
|
||||
"DFlash is not available for the selected model."
|
||||
})
|
||||
.size(12),
|
||||
Space::with_height(8),
|
||||
text("INACTIVITY").size(11),
|
||||
row![
|
||||
text_input("10", &self.preference_draft.idle_timeout_minutes)
|
||||
.on_input(Message::PreferenceTimeoutChanged)
|
||||
.width(90)
|
||||
.padding(9),
|
||||
text("minutes before unloading the model").size(13),
|
||||
]
|
||||
.spacing(10)
|
||||
.align_y(Alignment::Center),
|
||||
text("Enter a whole number from 1 to 1440.").size(12),
|
||||
]
|
||||
.spacing(10);
|
||||
|
||||
if let Some(error) = &self.preference_error {
|
||||
content = content.push(text(error).style(iced::widget::text::danger));
|
||||
}
|
||||
content = content.push(
|
||||
row![
|
||||
Space::with_width(Length::Fill),
|
||||
button("Cancel")
|
||||
.on_press(Message::DismissPanel)
|
||||
.style(button::secondary),
|
||||
button("Save")
|
||||
.on_press(Message::SavePreferences)
|
||||
.style(button::primary),
|
||||
]
|
||||
.spacing(8),
|
||||
);
|
||||
|
||||
let panel = container(content)
|
||||
.padding(24)
|
||||
.width(520)
|
||||
.style(container::rounded_box);
|
||||
opaque(
|
||||
container(panel)
|
||||
.center_x(Length::Fill)
|
||||
.center_y(Length::Fill)
|
||||
.style(|_| {
|
||||
container::Style::default().background(Color::from_rgba8(0, 0, 0, 0.68))
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
fn project_dialog<'a>(&'a self, path: &'a Path) -> Element<'a, Message> {
|
||||
let dialog = container(
|
||||
column![
|
||||
text("Add project").size(24),
|
||||
text(path.display().to_string()).size(12),
|
||||
text("Name").size(13),
|
||||
text_input("Project name", &self.project_name_input)
|
||||
.on_input(Message::ProjectNameChanged)
|
||||
.on_submit(Message::ConfirmProject)
|
||||
.padding(10),
|
||||
row![
|
||||
Space::with_width(Length::Fill),
|
||||
button("Cancel")
|
||||
.on_press(Message::CancelProject)
|
||||
.style(button::secondary),
|
||||
button("Add project")
|
||||
.on_press(Message::ConfirmProject)
|
||||
.style(button::primary),
|
||||
]
|
||||
.spacing(8),
|
||||
]
|
||||
.spacing(12),
|
||||
)
|
||||
.padding(22)
|
||||
.width(440)
|
||||
.style(container::rounded_box);
|
||||
|
||||
opaque(
|
||||
container(dialog)
|
||||
.center_x(Length::Fill)
|
||||
.center_y(Length::Fill)
|
||||
.style(|_| {
|
||||
container::Style::default().background(Color::from_rgba8(0, 0, 0, 0.68))
|
||||
}),
|
||||
)
|
||||
}
|
||||
|
||||
pub(super) fn selected_project(&self) -> Option<&ProjectWithSessions> {
|
||||
self.projects
|
||||
.iter()
|
||||
.find(|item| Some(item.project.id) == self.selected_project)
|
||||
}
|
||||
|
||||
fn selected_session<'a>(&self, project: &'a ProjectWithSessions) -> Option<&'a Session> {
|
||||
project
|
||||
.sessions
|
||||
.iter()
|
||||
.find(|session| Some(session.id) == self.selected_session)
|
||||
}
|
||||
}
|
||||
|
||||
pub(crate) fn app_theme() -> Theme {
|
||||
let palette = Palette {
|
||||
background: Color::from_rgb8(29, 29, 31),
|
||||
text: Color::from_rgb8(235, 235, 235),
|
||||
primary: Color::from_rgb8(85, 118, 255),
|
||||
success: Color::from_rgb8(72, 176, 112),
|
||||
danger: Color::from_rgb8(220, 80, 86),
|
||||
};
|
||||
Theme::custom_with_fn("DS4Server".into(), palette, |palette| {
|
||||
let mut extended = palette::Extended::generate(palette);
|
||||
extended.background.weak = palette::Pair::new(Color::from_rgb8(38, 38, 40), palette.text);
|
||||
extended.background.strong = palette::Pair::new(Color::from_rgb8(58, 58, 61), palette.text);
|
||||
extended.secondary.base = palette::Pair::new(Color::from_rgb8(47, 47, 50), palette.text);
|
||||
extended.secondary.weak = palette::Pair::new(Color::from_rgb8(41, 41, 44), palette.text);
|
||||
extended.secondary.strong = palette::Pair::new(Color::from_rgb8(57, 57, 60), palette.text);
|
||||
extended
|
||||
})
|
||||
}
|
||||
|
||||
fn sidebar_style(_: &Theme) -> container::Style {
|
||||
container::Style::default().background(Color::from_rgb8(23, 23, 25))
|
||||
}
|
||||
|
||||
fn icon(data: &'static [u8], size: u16) -> Svg<'static> {
|
||||
svg(svg::Handle::from_memory(data))
|
||||
.width(size as f32)
|
||||
.height(size as f32)
|
||||
.style(|theme: &Theme, _| iced::widget::svg::Style {
|
||||
color: Some(theme.palette().text),
|
||||
})
|
||||
}
|
||||
|
||||
#[cfg(test)]
|
||||
mod tests {
|
||||
use super::*;
|
||||
|
||||
#[test]
|
||||
fn raised_surfaces_stay_dark() {
|
||||
let theme = app_theme();
|
||||
let palette = theme.extended_palette();
|
||||
assert_eq!(palette.background.weak.color, Color::from_rgb8(38, 38, 40));
|
||||
assert_eq!(palette.secondary.base.color, Color::from_rgb8(47, 47, 50));
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user