Follow the system style, add a compact mode and show the 1-9 keys

data/re.sonny.Junction.gschema.xml

@@ -1,8 +1,21 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <schemalist gettext-domain="re.sonny.Junction">
+  <!-- Values match AdwColorScheme so they can be passed straight to
+       Adw.StyleManager.set_color_scheme -->
+  <enum id="re.sonny.Junction.ColorScheme">
+    <value nick="default" value="0" />
+    <value nick="force-light" value="1" />
+    <value nick="force-dark" value="4" />
+  </enum>
   <schema id="re.sonny.Junction" path="/re/sonny/Junction/">
     <key name="show-app-names" type="b">
       <default>false</default>
     </key>
+    <key name="compact" type="b">
+      <default>false</default>
+    </key>
+    <key name="color-scheme" enum="re.sonny.Junction.ColorScheme">
+      <default>'default'</default>
+    </key>
     </schema>
 </schemalist>

src/AppButton.blp

@@ -10,22 +10,34 @@ Button button {
 
   styles ["flat"]
 
-  Box box {
-    orientation: vertical;
-    valign: center;
-    halign: center;
+  Overlay {
+    Box box {
+      orientation: vertical;
+      valign: center;
+      halign: center;
 
-    Image image {
-      pixel-size: 92;
-      width-request: 92;
-      height-request: 92;
-      styles ["icon-dropshadow"]
+      Image image {
+        pixel-size: 92;
+        width-request: 92;
+        height-request: 92;
+        styles ["icon-dropshadow"]
+      }
+
+      Label label {
+        ellipsize: end;
+        max-width-chars: 10;
+        margin-top: 6;
+      }
     }
 
-    Label label {
-      ellipsize: end;
-      max-width-chars: 10;
-      margin-top: 6;
+    // the 1...9 key that opens this app, set in AppButton.js
+    [overlay]
+    Label position {
+      halign: start;
+      valign: start;
+      visible: false;
+      can-target: false;
+      styles ["position"]
     }
   }
 }

src/AppButton.js

@@ -15,36 +15,105 @@ import Interface from "./AppButton.blp" with { type: "uri" };
 const portal = new Xdp.Portal();
 Gio._promisify(portal, "open_directory", "open_directory_finish");
 
+const ICON_SIZE = 92;
+const ICON_SIZE_COMPACT = 64;
+const TILE_SIZE = 134;
+// icon + 8px of breathing room on each side, so the tile hugs the icon
+const TILE_SIZE_COMPACT = 80;
+// only 1...9 can be typed, see getButtonForKeyval in window.js
+const MAX_POSITION = 9;
+
+// Show which of the 1...9 keys opens this app. Without it the shortcut is
+// only discoverable from the Keyboard Shortcuts window.
+function setPosition(label, position) {
+  if (!position || position > MAX_POSITION) return;
+  label.label = String(position);
+  label.visible = true;
+}
+
+// GtkImage:pixel-size and size requests cannot be set from CSS, so the
+// compact sizes are applied here rather than in style.css.
+function bindCompact({
+  button,
+  image,
+  label,
+  icon_size = ICON_SIZE,
+  icon_size_compact = ICON_SIZE_COMPACT,
+}) {
+  function update() {
+    const compact = settings.get_boolean("compact");
+
+    const size = compact ? icon_size_compact : icon_size;
+    image.set_pixel_size(size);
+    image.set_size_request(size, size);
+
+    const tile = compact ? TILE_SIZE_COMPACT : TILE_SIZE;
+    button.set_size_request(tile, tile);
+
+    // A name doesn't fit under a compact tile - it ends up ellipsized to
+    // uselessness - so compact mode is icons only, whatever "Show App Names"
+    // is set to. The name is still in the tooltip.
+    label.visible = !compact && settings.get_boolean("show-app-names");
+  }
+
+  const handlers = [
+    settings.connect("changed::compact", update),
+    settings.connect("changed::show-app-names", update),
+  ];
+  button.connect("destroy", () => {
+    for (const handler of handlers) settings.disconnect(handler);
+  });
+  update();
+}
+
 export function TileButton({
   label,
   tooltip = label,
   icon_name,
   icon_size,
+  icon_size_compact,
+  position,
   onClicked,
 }) {
   const {
     button,
     label: glabel,
     image,
+    position: position_label,
   } = build(Interface, {
     onClicked,
   });
 
   button.set_tooltip_text(tooltip);
   glabel.label = label;
-  glabel.visible = false;
-  settings.bind("show-app-names", glabel, "visible", Gio.SettingsBindFlags.GET);
+  setPosition(position_label, position);
 
   image.set_from_icon_name(icon_name);
-  if (icon_size) {
-    image.set_pixel_size(icon_size);
-  }
+  bindCompact({
+    button,
+    image,
+    label: glabel,
+    icon_size,
+    icon_size_compact,
+  });
 
   return button;
 }
 
-export default function AppButton({ appInfo, content_type, entry, window }) {
-  const { button, label, image, box } = build(Interface, {
+export default function AppButton({
+  appInfo,
+  content_type,
+  entry,
+  window,
+  position,
+}) {
+  const {
+    button,
+    label,
+    image,
+    box,
+    position: position_label,
+  } = build(Interface, {
     onClicked() {
       open(true);
     },
@@ -53,8 +122,7 @@ export default function AppButton({ appInfo, content_type, entry, window }) {
   const name = appInfo.get_display_name();
   button.set_tooltip_text(name);
   label.label = name;
-  label.visible = false;
-  settings.bind("show-app-names", label, "visible", Gio.SettingsBindFlags.GET);
+  setPosition(position_label, position);
 
   const menu = new Gio.Menu();
   const popoverMenu = Gtk.PopoverMenu.new_from_model(menu);
@@ -67,6 +135,8 @@ export default function AppButton({ appInfo, content_type, entry, window }) {
     image.set_from_file(getIconFilename(icon.get_file().get_path()));
   }
 
+  bindCompact({ button, image, label });
+
   function open(close_on_success) {
     const success = openWithApplication({
       appInfo,
@@ -150,7 +220,7 @@ export default function AppButton({ appInfo, content_type, entry, window }) {
   return button;
 }
 
-export function ShowInFolderButton({ file, window }) {
+export function ShowInFolderButton({ file, window, position }) {
   function onClicked() {
     portal
       .open_directory(
@@ -168,6 +238,8 @@ export function ShowInFolderButton({ file, window }) {
     tooltip: _("View File in File Manager"),
     icon_name: "folder-symbolic",
     icon_size: 48,
+    icon_size_compact: 32,
+    position,
     onClicked,
   });
 }

src/application.js

@@ -8,6 +8,7 @@ import Window from "./window.js";
 import Welcome from "./welcome.js";
 import About from "./about.js";
 import ShortcutsWindow from "./ShortcutsWindow.js";
+import { settings } from "./common.js";
 
 import "./style.css";
 
@@ -46,7 +47,15 @@ export default function Application() {
   }
 
   application.connect("startup", () => {
-    Adw.StyleManager.get_default().set_color_scheme(Adw.ColorScheme.FORCE_DARK);
+    // "default" lets the desktop decide - the color scheme, accent color and
+    // contrast preference are read from the org.freedesktop.appearance portal,
+    // which GNOME, KDE Plasma and others implement.
+    const style_manager = Adw.StyleManager.get_default();
+    function updateColorScheme() {
+      style_manager.set_color_scheme(settings.get_enum("color-scheme"));
+    }
+    settings.connect("changed::color-scheme", updateColorScheme);
+    updateColorScheme();
   });
 
   // FIXME: Cannot deal with mailto:, xmpp:, ... URIs
@@ -124,6 +133,8 @@ export default function Application() {
   application.add_action(quit);
   application.set_accels_for_action("app.quit", ["<Primary>Q"]);
 
+  application.add_action(settings.create_action("color-scheme"));
+
   application.set_accels_for_action("window.close", ["<Primary>W", "Escape"]);
   application.set_accels_for_action("win.copy", ["<Primary>C"]);
 

src/style.css

@@ -2,14 +2,13 @@
   padding: 68px;
 }
 
-.welcome button.link {
-  color: white;
-}
-
 .main {
   border-radius: 30px;
   background: none;
-  background-color: #353433;
+  /* Junction floats above the desktop like a popover rather than sitting on
+     it like a document window, so it follows the popover background - which
+     is also a touch lighter than the window background in dark styles. */
+  background-color: @popover_bg_color;
   border: none;
   box-shadow: none;
 }
@@ -59,20 +58,97 @@
   font-size: 0.6rem;
 }
 
+.main .list button:hover {
+  background-color: alpha(currentColor, 0.08);
+}
+
+/* Tiles are reachable with the 1-9 keys, so the focused tile has to be
+   obvious. Tint it with the desktop accent color instead of a fixed white
+   wash, which was invisible on light backgrounds. */
 .main .list button:focus {
   outline: none;
-  /* This is libadwaita background for active */
-  /* https://gitlab.gnome.org/GNOME/libadwaita/-/blob/main/src/stylesheet/widgets/_buttons.scss#L3 */
-  background-color: alpha(white, 0.3);
+  background-color: alpha(@accent_bg_color, 0.25);
+  box-shadow: inset 0 0 0 2px @accent_color;
 }
 
 .main .list button label {
   font-size: 14px;
   font-weight: 400;
 }
 
+/* The 1...9 key that opens each app */
+.main .list button .position {
+  font-size: 11px;
+  font-weight: 700;
+  min-width: 18px;
+  min-height: 18px;
+  padding: 0 4px;
+  margin: 4px;
+  border-radius: 9px;
+  background-color: alpha(currentColor, 0.12);
+}
+
+.main .list button:focus .position {
+  background-color: @accent_bg_color;
+  color: @accent_fg_color;
+}
+
 .main entry.uri {
-  background-color: #1e1e1e;
+  background-color: @view_bg_color;
   border-radius: 18px;
-  border: solid 1px black;
+  border: solid 1px @borders;
+  box-shadow: none;
+}
+
+/* Compact mode - smaller icons, tiles and padding so the window takes up
+   much less room. */
+
+/* 30px is a big bite out of a 140px tall window - the corner curves into
+   the first tile and pushes it inwards. */
+.main.compact {
+  border-radius: 18px;
+}
+
+.main.compact .list {
+  padding-top: 6px;
+  padding-left: 6px;
+  padding-right: 6px;
+}
+
+.main.compact .bar {
+  padding: 6px;
+}
+
+.main.compact .list button {
+  border-radius: 12px;
+  padding: 6px;
+}
+
+.main.compact .list button label {
+  font-size: 12px;
+}
+
+.main.compact .list button .position {
+  font-size: 9px;
+  min-width: 14px;
+  min-height: 14px;
+  padding: 0 3px;
+  margin: 1px;
+  border-radius: 7px;
+}
+
+.main.compact entry.uri {
+  border-radius: 12px;
+}
+
+/* High contrast: the accent wash alone is too subtle, so lean on the
+   border and a solid focus ring. */
+@media (prefers-contrast: more) {
+  .main entry.uri {
+    border-width: 2px;
+  }
+
+  .main .list button:focus {
+    box-shadow: inset 0 0 0 3px @accent_color;
+  }
 }