feat(ui): refine Graphite visuals and center navigation content

shell/ferese-settings/src/all_options.rs

@@ -501,43 +501,83 @@ impl App {
         }
         Task::none()
     }
-    pub fn settings_hub(&self) -> Element<'_, Message> {
-        let mut out = column([]).spacing(18);
+    pub fn settings_hub(&self, width: f32) -> Element<'_, Message> {
+        self.hub_layout(if width >= 680. { 2 } else { 1 })
+    }
+    fn hub_layout(&self, columns: usize) -> Element<'_, Message> {
+        let palette = visuals::Palette::from_resolved(&self.resolved.presented);
+        let mut out = column([]).spacing(24);
         for (name, pages) in Page::NAVIGATION {
-            if name == "Appearance" {
+            if name == "Advanced" {
                 continue;
             }
-            out = out.push(self.panel_heading(tr(name), 15.));
-            for &p in pages {
-                out = out.push(self.hub_card(p));
+            let pages = if name == "Appearance" {
+                vec![Page::General, Page::Configuration]
+            } else {
+                pages
+                    .iter()
+                    .copied()
+                    .filter(|p| *p != Page::Appearance)
+                    .collect::<Vec<_>>()
+            };
+            let mut section = column([]).spacing(8).push(
+                self.panel_heading(
+                    tr(if name == "Appearance" {
+                        "Quick access"
+                    } else {
+                        name
+                    }),
+                    12.,
+                )
+                .class(cosmic::theme::Text::Color(palette.muted)),
+            );
+            for pair in pages.chunks(columns) {
+                let mut cards = row([]).spacing(12);
+                for &page in pair {
+                    cards = cards.push(self.hub_card(page));
+                }
+                if pair.len() < columns {
+                    cards = cards.push(cosmic::widget::Space::new().width(Length::Fill));
+                }
+                section = section.push(cards);
             }
+            out = out.push(section);
         }
-        column([])
-            .spacing(12)
-            .push(self.hub_card(Page::General))
-            .push(out)
-            .into()
+        out.into()
     }
     fn hub_card(&self, p: Page) -> Element<'static, Message> {
         let palette = visuals::Palette::from_resolved(&self.resolved.presented);
-        button::custom(
-            row([])
-                .spacing(12)
-                .align_y(Alignment::Center)
-                .push(visuals::icon(p, palette.accent))
-                .push(
-                    column([])
-                        .spacing(3)
-                        .push(self.label(p.title(), 15.))
-                        .push(self.label(p.subtitle(), 12.)),
-                )
-                .push(self.label(ferese_config::tr!("›"), 20.)),
+        let content = row([])
+            .spacing(12)
+            .align_y(Alignment::Center)
+            .push(visuals::icon(p, palette.muted))
+            .push(
+                column([])
+                    .spacing(4)
+                    .push(self.label(p.title(), 14.).font(cosmic::iced::Font {
+                        weight: cosmic::iced::font::Weight::Medium,
+                        ..self.font
+                    }))
+                    .push(
+                        self.label(p.subtitle(), 12.)
+                            .class(cosmic::theme::Text::Color(palette.muted)),
+                    )
+                    .width(Length::Fill),
+            )
+            .push(visuals::action_icon("M9 5l7 7-7 7", palette.muted));
+        container(
+            button::custom(content)
+                .name(p.title())
+                .padding(16)
+                .width(Length::Fill)
+                .class(visuals::button_style(palette, false))
+                .on_press(Message::Page(p)),
         )
-        .name(p.title())
-        .padding(14)
+        .id(cosmic::widget::Id::new(format!(
+            "settings-hub-{}",
+            p as usize
+        )))
         .width(Length::Fill)
-        .class(visuals::button_style(palette, false))
-        .on_press(Message::Page(p))
         .into()
     }
     pub fn all_options_view(&self) -> Element<'_, Message> {