feat(core,gui): phase 1 shell — per-page headers, sidebar footer, Preferences dialog

Restructure the app shell per docs/UI_UX_PLAN.md phase 1:

- Every destination page gets its own AdwHeaderBar via page_frame(), with
  page actions packed into it and a busy spinner beside the title.
- The sidebar is regrouped (files, then a Sync section) with a primary menu
  (Preferences, Keyboard Shortcuts, About) and a footer showing sync state,
  storage quota and the account with Sign Out.
- The Settings page is gone: startup, folder location, appearance and cache
  options move into an AdwPreferencesDialog (Ctrl+,); transfers move to the
  Sync page; developer details move into About's debug info.
- Inline CSS moves to a gresource stylesheet using libadwaita colour
  variables. The system accent is the default; the Proton purple accent is
  an opt-in preference (new `proton_accent` config key, defaults off).
- Add a keyboard shortcuts dialog (Ctrl+?).

libadwaita requirement stays at 1.5, so Ubuntu 24.04 remains supported.

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

@@ -46,33 +46,17 @@ pub(crate) struct DevicesWidgets {
 /// The Computers page: a "This computer" section naming the device this machine
 /// backs up to (renamable from its header), plus an "Other computers" section
 /// listing the account's other registered devices. The synced folders
-/// themselves live on the Locations page.
+/// themselves live on the Sync page.
 pub(crate) fn build_devices_page() -> (gtk4::Widget, DevicesWidgets) {
-    let title = gtk4::Label::builder()
-        .label("Computers")
-        .halign(gtk4::Align::Start)
-        .build();
-    title.add_css_class("title-2");
-    let titles = gtk4::Box::new(gtk4::Orientation::Vertical, 2);
-    titles.set_hexpand(true);
-    titles.append(&title);
-
     let restore = gtk4::Button::builder()
-        .label("Restore Folders")
+        .label("Restore Folders…")
         .tooltip_text("Sync this computer's Drive folders back to local directories")
-        .valign(gtk4::Align::Center)
         .build();
-    restore.add_css_class("flat");
     let refresh = refresh_button();
 
-    let header = gtk4::Box::new(gtk4::Orientation::Horizontal, 8);
-    header.append(&titles);
-    header.append(&refresh);
-    header.append(&restore);
-
     // This page is about device *identity* — which computer this is, which other
     // computers back up to the account, and how to adopt one. The folders
-    // themselves are local paths, so they live on the Locations page; keeping a
+    // themselves are local paths, so they live on the Sync page; keeping a
     // second copy of that list here would be two places to change the same mode.
     let sync_group = adw::PreferencesGroup::builder()
         .title("This computer")
@@ -124,15 +108,17 @@ pub(crate) fn build_devices_page() -> (gtk4::Widget, DevicesWidgets) {
     content.add_named(&status, Some("status"));
 
     let inner = gtk4::Box::new(gtk4::Orientation::Vertical, 12);
-    inner.set_margin_top(12);
-    inner.set_margin_bottom(12);
-    inner.set_margin_start(12);
-    inner.set_margin_end(12);
-    inner.append(&header);
+    inner.set_margin_top(18);
+    inner.set_margin_bottom(18);
+    inner.set_margin_start(18);
+    inner.set_margin_end(18);
     inner.append(&content);
+    let (frame, header, _) = page_frame("Computers", &inner);
+    header.pack_start(&restore);
+    header.pack_end(&refresh);
 
     (
-        inner.upcast(),
+        frame.upcast(),
         DevicesWidgets {
             content,
             status,