feat(gui,core): modern Photos layout

Lay the timeline out in justified rows. Each photo keeps its own shape,
clamped between 1:2 and 5:2, and every row but a section's last spans
the width to the pixel. "Square Tiles" in the page menu restores the
even grid, and the Year zoom stays square. The zoom level and the
tile shape persist in a new `photos_view` config section.

Move Timeline/Albums/Places into the header as an icon-and-label
switch that shows only icons in a narrow window. The filters take a
single row whose kind tabs scroll sideways.

Selection mode follows GNOME apps:
- the header shows "N selected" and Cancel;
- an ActionBar along the bottom offers Favorite (or unfavorite), Add
  to Album, Remove from Album, Save Copies and Move to Trash;
- each section heading gets a check that selects the whole section.
One function, sync_header, decides the header for the page, an open
album or place, and selection mode.

The heading of the section at the top of the grid floats over the
grid. Favorites get a star badge, and video placeholders a video
glyph. New bundled icons: pdfs-photos, pdfs-album and pdfs-slideshow.

Upload takes several photos and videos at once, and files dropped on
the timeline upload too. The media type comes from the MIME database,
except that a recording-sized .ts counts as video.

The viewer's details panel moves into an OverlaySplitView that lies
over the photo below 800sp.

crates/pdfs-gui/src/app/main.rs

@@ -71,7 +71,7 @@ use gtk4::glib::BoxedAnyObject;
 
 use pdfs_core::auth;
 
-use pdfs_core::config::{AppDirs, FileSort, FilesView, WindowState};
+use pdfs_core::config::{AppDirs, FileSort, FilesView, PhotosView, WindowState};
 
 use pdfs_core::control::{
     ActivityEntry, ActivityKind, AlbumInfo, BookmarkInfo, ConflictInfo, ConflictKeep, DeviceInfo,
@@ -587,10 +587,13 @@ fn build_window(app: &adw::Application) {
             selected: RefCell::new(HashSet::new()),
             select_anchor: RefCell::new(None),
             select_btn: gallery_widgets.select_btn.clone(),
-            select_bar: gallery_widgets.select_bar.clone(),
-            select_label: gallery_widgets.select_label.clone(),
-            select_trash: gallery_widgets.select_trash.clone(),
-            select_album: gallery_widgets.select_album.clone(),
+            selection: gallery_widgets.selection.clone(),
+            more: gallery_widgets.more.clone(),
+            upload_face: gallery_widgets.upload_face.clone(),
+            float_heading: gallery_widgets.float_heading.clone(),
+            float_label: gallery_widgets.float_label.clone(),
+            square: Cell::new(false),
+            zoom_save: RefCell::new(None),
         },
         shared: SharedState::new(&shared_widgets),
         shared_by_me: SharedByMeState::new(&shared_by_me_widgets),
@@ -693,7 +696,7 @@ fn build_window(app: &adw::Application) {
         &ui,
         &gallery_widgets.list,
         &gallery_widgets.scroll,
-        &gallery_widgets.select_done,
+        &gallery_widgets.square_action,
     );
     wire_gallery_empty(
         &ui,
@@ -795,6 +798,7 @@ fn build_window(app: &adw::Application) {
 /// split collapsed whatever the width.
 fn set_narrow(ui: &Ui, narrow: bool) {
     ui.narrow.set(narrow);
+    set_photos_narrow(ui, narrow);
     if ui.session.borrow().is_some() {
         ui.nav.set_collapsed(narrow);
     }
@@ -858,11 +862,7 @@ fn window_hidden(window: &adw::ApplicationWindow) -> bool {
 /// sync, set off by a separator.
 const DESTINATIONS: [(&str, &str, &str); 7] = [
     ("browser", gettext_noop("My files"), "folder-symbolic"),
-    (
-        "gallery",
-        gettext_noop("Photos"),
-        "image-x-generic-symbolic",
-    ),
+    ("gallery", gettext_noop("Photos"), "pdfs-photos-symbolic"),
     (
         "shared",
         gettext_noop("Shared with me"),

crates/pdfs-gui/src/app/pages/albums.rs

@@ -40,7 +40,7 @@ pub(crate) fn load_albums(ui: &Rc<Ui>) {
     if ui.gallery.albums_stack.visible_child_name().as_deref() != Some("grid") {
         albums_status(
             ui,
-            "view-grid-symbolic",
+            "pdfs-album-symbolic",
             &gettext("Loading albums…"),
             &gettext("Reading your Proton Drive albums."),
         );
@@ -62,7 +62,7 @@ pub(crate) fn load_albums(ui: &Rc<Ui>) {
             ),
             Ok(Ok(Response::Albums { items, .. })) if items.is_empty() => albums_status(
                 &ui,
-                "view-grid-symbolic",
+                "pdfs-album-symbolic",
                 &gettext("No albums"),
                 &gettext("Create one with New Album, or in Proton Photos."),
             ),
@@ -136,7 +136,7 @@ fn album_card(ui: &Rc<Ui>, album: &AlbumInfo) -> gtk4::Button {
     picture.add_css_class("photo-thumb");
 
     let placeholder = gtk4::Image::builder()
-        .icon_name("view-grid-symbolic")
+        .icon_name("pdfs-album-symbolic")
         .pixel_size(32)
         .halign(gtk4::Align::Center)
         .valign(gtk4::Align::Center)
@@ -618,9 +618,7 @@ pub(crate) fn open_album(ui: &Rc<Ui>, album: AlbumInfo) {
     // would silently do something else. The Photos/Albums switcher goes too: an
     // album is a level below it, and back is the way out.
     ui.gallery.filters.set_visible(false);
-    ui.gallery.view_switch.widget().set_visible(false);
-    ui.gallery.upload.set_visible(false);
-    ui.gallery.back.set_visible(true);
+    sync_header(ui);
     // A stale kind/date filter would otherwise be sent with the album request.
     ui.gallery.kind.set(None);
     ui.gallery.range.set(None);
@@ -636,9 +634,7 @@ pub(crate) fn close_album(ui: &Rc<Ui>) {
         return;
     }
     ui.gallery.title.set_title(&gettext("Photos"));
-    ui.gallery.view_switch.widget().set_visible(true);
-    ui.gallery.upload.set_visible(true);
-    ui.gallery.back.set_visible(false);
+    sync_header(ui);
 }
 
 /// Show the album grid's own status page (loading, empty, or an error).

crates/pdfs-gui/src/app/pages/photo_viewer.rs

@@ -40,7 +40,9 @@ pub(crate) struct Viewer {
     /// Details panel: the toggle that reveals it, the rows it fills in, and the
     /// "Show on map" button (hidden when the photo carries no GPS tags).
     pub(crate) info_toggle: gtk4::ToggleButton,
-    pub(crate) info_revealer: gtk4::Revealer,
+    /// Lays the details panel beside the photo, or over it in a narrow
+    /// window.
+    pub(crate) info_split: adw::OverlaySplitView,
     pub(crate) info_rows: gtk4::Box,
     pub(crate) info_map: gtk4::Button,
     /// Coordinates behind `info_map`, once a photo with GPS tags is shown.
@@ -358,9 +360,7 @@ fn stop_slideshow(viewer: &Rc<Viewer>) {
     if viewer.slide_fullscreened.replace(false) {
         viewer.window.unfullscreen();
     }
-    viewer
-        .slideshow
-        .set_icon_name("media-playback-start-symbolic");
+    viewer.slideshow.set_icon_name("pdfs-slideshow-symbolic");
     if viewer.slideshow.is_active() {
         viewer.slideshow.set_active(false);
     }
@@ -1004,13 +1004,16 @@ fn show_photo_position(ui: &Rc<Ui>, viewer: &Rc<Viewer>, index: u32, capture_tim
 pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
     let parent = ui.stack.root().and_downcast::<gtk4::Window>().unwrap();
 
-    let window = gtk4::Window::builder()
+    // An `adw::Window` for its breakpoints: the details panel lies over the
+    // photo once the window is too narrow to show both side by side.
+    let adw_window = adw::Window::builder()
         .title(gettext("Photo"))
         .modal(true)
         .transient_for(&parent)
         .default_width(1100)
         .default_height(760)
         .build();
+    let window: gtk4::Window = adw_window.clone().upcast();
     window.add_css_class("photo-viewer-window");
 
     let overlay = gtk4::Overlay::new();
@@ -1120,7 +1123,7 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
     favorite_btn.add_css_class("viewer-action-btn");
 
     let slideshow_btn = gtk4::ToggleButton::builder()
-        .icon_name("media-playback-start-symbolic")
+        .icon_name("pdfs-slideshow-symbolic")
         .tooltip_text(gettext("Slideshow (F5)"))
         .valign(gtk4::Align::Center)
         .build();
@@ -1205,17 +1208,8 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
 
     let info_panel = gtk4::Box::new(gtk4::Orientation::Vertical, 0);
     info_panel.add_css_class("viewer-info-panel");
-    info_panel.set_width_request(320);
     info_panel.append(&info_scroll);
 
-    // Set explicitly: the title's hexpand would otherwise propagate up and have
-    // the revealer take half the window even while it is closed.
-    let info_revealer = gtk4::Revealer::builder()
-        .transition_type(gtk4::RevealerTransitionType::SlideLeft)
-        .hexpand(false)
-        .child(&info_panel)
-        .build();
-
     let spinner = spinner();
     spinner.set_halign(gtk4::Align::Center);
     spinner.set_valign(gtk4::Align::Center);
@@ -1232,10 +1226,23 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
     status_label.add_css_class("viewer-status");
     overlay.add_overlay(&status_label);
 
-    let body = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
-    body.append(&overlay);
-    body.append(&info_revealer);
-    window.set_child(Some(&body));
+    // The panel docks beside the photo, or lies over it in a narrow window,
+    // where a click on the photo closes it again.
+    let info_split = adw::OverlaySplitView::builder()
+        .content(&overlay)
+        .sidebar(&info_panel)
+        .sidebar_position(gtk4::PackType::End)
+        .min_sidebar_width(300.0)
+        .max_sidebar_width(360.0)
+        .show_sidebar(false)
+        .build();
+    let narrow = adw::Breakpoint::new(
+        adw::BreakpointCondition::parse("max-width: 800sp").expect("static breakpoint"),
+    );
+    narrow.add_setter(&info_split, "collapsed", Some(&true.to_value()));
+    adw_window.add_breakpoint(narrow);
+    let body = info_split.clone();
+    adw_window.set_content(Some(&body));
 
     let viewer = Rc::new(Viewer {
         window: window.clone(),
@@ -1250,7 +1257,7 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
         prev: prev_btn.clone(),
         next: next_btn.clone(),
         info_toggle: info_toggle.clone(),
-        info_revealer: info_revealer.clone(),
+        info_split: info_split.clone(),
         info_rows,
         info_map: info_map.clone(),
         favorite: favorite_btn.clone(),
@@ -1435,9 +1442,14 @@ pub(crate) fn open_photo_viewer(ui: &Rc<Ui>, initial_uid: String) {
         let Some(viewer_info) = viewer_info.upgrade() else {
             return;
         };
-        viewer_info
-            .info_revealer
-            .set_reveal_child(toggle.is_active());
+        viewer_info.info_split.set_show_sidebar(toggle.is_active());
+    });
+    // A collapsed panel also closes on its own, by a click on the photo.
+    let toggle_info = info_toggle.clone();
+    info_split.connect_show_sidebar_notify(move |split| {
+        if toggle_info.is_active() != split.shows_sidebar() {
+            toggle_info.set_active(split.shows_sidebar());
+        }
     });
 
     let ui_slides = ui.clone();

crates/pdfs-gui/src/app/pages/places.rs

@@ -422,9 +422,7 @@ fn open_place(ui: &Rc<Ui>, place: PlaceInfo) {
 
     // As in an album: no filters, no Upload, no view switch — back leads out.
     ui.gallery.filters.set_visible(false);
-    ui.gallery.view_switch.widget().set_visible(false);
-    ui.gallery.upload.set_visible(false);
-    ui.gallery.back.set_visible(true);
+    sync_header(ui);
     ui.gallery.kind.set(None);
     ui.gallery.range.set(None);
 
@@ -439,9 +437,7 @@ pub(crate) fn close_place(ui: &Rc<Ui>) {
         return;
     }
     ui.gallery.title.set_title(&gettext("Photos"));
-    ui.gallery.view_switch.widget().set_visible(true);
-    ui.gallery.upload.set_visible(true);
-    ui.gallery.back.set_visible(false);
+    sync_header(ui);
 }
 
 /// Show the place grid's own status page (loading, empty, or an error).

crates/pdfs-gui/src/app/widgets/compat.rs

@@ -10,6 +10,12 @@ use crate::*;
 pub(crate) struct ToggleGroup {
     widget: gtk4::Widget,
     options: Options,
+    /// Each option's label, kept while [`Self::set_compact`] shows the icons
+    /// alone.
+    labels: Rc<RefCell<Vec<String>>>,
+    /// Each option's own tooltip, as given.
+    tooltips: Rc<[Option<String>]>,
+    compact: Rc<Cell<bool>>,
 }
 
 #[derive(Clone)]
@@ -47,6 +53,9 @@ impl ToggleGroup {
             Self {
                 widget,
                 options: Options::Toggles(toggles),
+                labels: Rc::new(RefCell::new(labels_of(options))),
+                tooltips: tooltips_of(options),
+                compact: Rc::default(),
             }
         } else {
             let bar = gtk4::Box::new(gtk4::Orientation::Horizontal, 0);
@@ -71,6 +80,9 @@ impl ToggleGroup {
             Self {
                 widget: bar.upcast(),
                 options: Options::Buttons(buttons),
+                labels: Rc::new(RefCell::new(labels_of(options))),
+                tooltips: tooltips_of(options),
+                compact: Rc::default(),
             }
         }
     }
@@ -115,15 +127,69 @@ impl ToggleGroup {
     }
 
     pub(crate) fn set_label(&self, index: u32, label: &str) {
+        if let Some(stored) = self.labels.borrow_mut().get_mut(index as usize) {
+            *stored = label.to_string();
+        }
+        self.show_label(index, label);
+    }
+
+    /// Put an icon before each option's label, in option order.
+    pub(crate) fn set_icons(&self, icons: &[&str]) {
+        match &self.options {
+            Options::Toggles(toggles) => {
+                for (toggle, icon) in toggles.iter().zip(icons) {
+                    toggle.set_property("icon-name", *icon);
+                }
+            }
+            Options::Buttons(buttons) => {
+                let labels = self.labels.borrow();
+                for ((button, icon), label) in buttons.iter().zip(icons).zip(labels.iter()) {
+                    let face = adw::ButtonContent::builder()
+                        .icon_name(*icon)
+                        .label(label.as_str())
+                        .build();
+                    button.set_child(Some(&face));
+                }
+            }
+        }
+    }
+
+    /// Show the icons alone, for a narrow window, with each label moved to
+    /// the option's tooltip; or bring the labels back.
+    pub(crate) fn set_compact(&self, compact: bool) {
+        if self.compact.replace(compact) == compact {
+            return;
+        }
+        let labels = self.labels.borrow().clone();
+        for (index, label) in labels.iter().enumerate() {
+            self.show_label(index as u32, label);
+        }
+    }
+
+    /// Show `label` on option `index`, or only in its tooltip while compact.
+    fn show_label(&self, index: u32, label: &str) {
+        let compact = self.compact.get();
+        let shown = if compact { "" } else { label };
+        let given = self.tooltips.get(index as usize).cloned().flatten();
+        let tooltip = if compact {
+            Some(label.to_string())
+        } else {
+            given
+        };
         match &self.options {
             Options::Toggles(toggles) => {
                 if let Some(toggle) = toggles.get(index as usize) {
-                    toggle.set_property("label", label);
+                    toggle.set_property("label", shown);
+                    toggle.set_property("tooltip", tooltip.unwrap_or_default());
                 }
             }
             Options::Buttons(buttons) => {
                 if let Some(button) = buttons.get(index as usize) {
-                    button.set_label(label);
+                    match button.child().and_downcast::<adw::ButtonContent>() {
+                        Some(face) => face.set_label(shown),
+                        None => button.set_label(shown),
+                    }
+                    button.set_tooltip_text(tooltip.as_deref());
                 }
             }
         }
@@ -271,6 +337,19 @@ fn shortcuts_dialog(groups: &[(String, Vec<(&str, String)>)]) -> adw::Dialog {
         .build()
 }
 
+/// The labels of `(label, tooltip)` options.
+fn labels_of(options: &[(&str, Option<&str>)]) -> Vec<String> {
+    options.iter().map(|(label, _)| label.to_string()).collect()
+}
+
+/// The tooltips of `(label, tooltip)` options.
+fn tooltips_of(options: &[(&str, Option<&str>)]) -> Rc<[Option<String>]> {
+    options
+        .iter()
+        .map(|(_, tooltip)| tooltip.map(str::to_string))
+        .collect()
+}
+
 #[cfg(test)]
 mod tests {
     use super::*;