Align session titles in the sidebar

src/app/view.rs

@@ -31,7 +31,6 @@ 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");
@@ -53,6 +52,11 @@ const TITLE_BAR_HEIGHT: f32 = 30.0;
 const TITLE_BAR_CONTROL: f32 = 24.0;
 /// Space the macOS traffic lights need before our own controls start.
 const TRAFFIC_LIGHT_WIDTH: f32 = 78.0;
+const PROJECT_DISCLOSURE_WIDTH: f32 = 12.0;
+const PROJECT_ICON_WIDTH: u16 = 17;
+const PROJECT_LABEL_SPACING: f32 = 9.0;
+const SESSION_INDENT: f32 =
+    PROJECT_DISCLOSURE_WIDTH + PROJECT_ICON_WIDTH as f32 + PROJECT_LABEL_SPACING * 2.0;
 
 impl App {
     pub(crate) fn view(&self, id: window::Id) -> Element<'_, Message> {
@@ -328,11 +332,13 @@ impl App {
                 row![
                     button(
                         row![
-                            text(if project.collapsed { "›" } else { "▾" }).size(12),
+                            text(if project.collapsed { "›" } else { "▾" })
-                            icon(ICON_FOLDER, 17),
+                                .size(12)
+                                .width(PROJECT_DISCLOSURE_WIDTH),
+                            icon(ICON_FOLDER, PROJECT_ICON_WIDTH),
                             text(&project.name).size(14)
                         ]
-                        .spacing(9)
+                        .spacing(PROJECT_LABEL_SPACING)
                         .align_y(Alignment::Center),
                     )
                     .width(Length::Fill)
@@ -353,6 +359,28 @@ impl App {
                 continue;
             }
 
+            if let Some(title) = self.drafts.get(&project.id) {
+                let draft_selected = self.draft_selected(project.id);
+                projects = projects.push(
+                    row![
+                        Space::new().width(SESSION_INDENT),
+                        button(text(title).size(13).color(muted_text()))
+                            .width(Length::Fill)
+                            .on_press(Message::CreateSession(project.id))
+                            .style(if draft_selected {
+                                button::secondary
+                            } else {
+                                button::text
+                            }),
+                        button(icon(ICON_TRASH, 14))
+                            .on_press(Message::DiscardSession(project.id))
+                            .style(button::text),
+                    ]
+                    .spacing(3)
+                    .align_y(Alignment::Center),
+                );
+            }
+
             for session in item
                 .sessions
                 .iter()
@@ -392,35 +420,6 @@ impl App {
                     }
                 }
             }
-
-            if let Some(title) = self.drafts.get(&project.id) {
-                let draft_selected = self.draft_selected(project.id);
-                projects = projects.push(
-                    row![
-                        Space::new().width(26),
-                        button(
-                            row![
-                                icon(ICON_CHAT, 15),
-                                text(title).size(13).color(muted_text())
-                            ]
-                            .spacing(8)
-                            .align_y(Alignment::Center),
-                        )
-                        .width(Length::Fill)
-                        .on_press(Message::CreateSession(project.id))
-                        .style(if draft_selected {
-                            button::secondary
-                        } else {
-                            button::text
-                        }),
-                        button(icon(ICON_TRASH, 14))
-                            .on_press(Message::DiscardSession(project.id))
-                            .style(button::text),
-                    ]
-                    .spacing(3)
-                    .align_y(Alignment::Center),
-                );
-            }
         }
 
         container(
@@ -450,18 +449,14 @@ impl App {
         project_selected: bool,
     ) -> Element<'a, Message> {
         let session_selected = project_selected && self.selected_session == Some(session.id);
-        let mut label = row![icon(ICON_CHAT, 15)]
+        let mut label = row![text(&session.title).size(13)]
             .spacing(8)
             .align_y(Alignment::Center);
-        if session.state() == SessionState::Pinned {
-            label = label.push(icon(ICON_PIN, 12));
-        }
-        label = label.push(text(&session.title).size(13));
         if self.session_is_active(session.id) {
             label = label.push(text("●").size(10).color(app_theme().palette().success));
         }
         row![
-            Space::new().width(26),
+            Space::new().width(SESSION_INDENT),
             button(label)
                 .width(Length::Fill)
                 .on_press(Message::SelectSession(project_id, session.id))