Home on a phone: Home screen pages, phone title bars and stage, sheets, 44 px targets (phone-only)

capsules/_shared/elastos-drawer.js

@@ -0,0 +1,116 @@
+/* ElastOS UI — phone push drawer (the Assistant's saved-chats pattern).
+ *
+ * On the phone stage (html[data-el-form-factor="phone"], see elastos-theme.js)
+ * a capsule's sidebar leaves the layout and becomes a drawer: the sidebar
+ * slides in from the leading edge and the main view slides aside with a
+ * rounded edge; tapping that view, Escape, or picking an item closes it. On
+ * tablet and desktop this module does nothing and the sidebar stays a column.
+ *
+ * Markup contract (no capsule JS needed):
+ *   <aside id="x" data-el-drawer>                     the sidebar
+ *   <main data-el-drawer-room="x">                    the view it pushes aside
+ *   <button data-el-drawer-toggle="x">                opens / closes it
+ *   [data-el-drawer-close] inside the drawer          closes after a tap
+ * Enter in a search field inside the drawer also closes it so the results are
+ * visible. State lands as data-el-drawer-state="open|closed" on the drawer and
+ * its room; layout and motion live in elastos-ui.css.
+ * Vendored by `just vendor-ui` to the capsules that carry a sidebar.
+ */
+(function () {
+  const OPEN = "open";
+  const CLOSED = "closed";
+
+  function onPhone() {
+    return document.documentElement.getAttribute("data-el-form-factor") === "phone";
+  }
+
+  function bindDrawer(drawer) {
+    const id = drawer.id;
+    const room = document.querySelector(`[data-el-drawer-room="${id}"]`);
+    const toggles = Array.from(document.querySelectorAll(`[data-el-drawer-toggle="${id}"]`));
+    if (!id || !room || toggles.length === 0) {
+      return;
+    }
+    let open = false;
+
+    function render() {
+      const phone = onPhone();
+      const state = phone && open ? OPEN : CLOSED;
+      drawer.setAttribute("data-el-drawer-state", state);
+      room.setAttribute("data-el-drawer-state", state);
+      // An off-screen drawer must not take focus or speak; off the phone the
+      // sidebar is a normal column again.
+      drawer.inert = phone && !open;
+      for (const toggle of toggles) {
+        toggle.setAttribute("aria-controls", id);
+        toggle.setAttribute("aria-expanded", String(phone && open));
+      }
+    }
+
+    function setOpen(next, { restoreFocus = false } = {}) {
+      open = Boolean(next) && onPhone();
+      render();
+      if (open) {
+        drawer.focus({ preventScroll: true });
+      } else if (restoreFocus) {
+        toggles[0].focus({ preventScroll: true });
+      }
+    }
+
+    if (!drawer.hasAttribute("tabindex")) {
+      drawer.setAttribute("tabindex", "-1");
+    }
+    for (const toggle of toggles) {
+      toggle.addEventListener("click", () => setOpen(!open));
+    }
+    // A tap on the pushed-aside view closes the drawer and goes no further,
+    // so it never also activates whatever sat under the finger.
+    room.addEventListener(
+      "click",
+      (event) => {
+        if (!open || toggles.some((toggle) => toggle.contains(event.target))) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        setOpen(false);
+      },
+      true,
+    );
+    drawer.addEventListener("click", (event) => {
+      if (open && event.target.closest?.("[data-el-drawer-close]")) {
+        setOpen(false);
+      }
+    });
+    drawer.addEventListener("keydown", (event) => {
+      if (!open) {
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false, { restoreFocus: true });
+        return;
+      }
+      if (event.key === "Enter" && event.target.matches?.('input[type="search"]')) {
+        setOpen(false);
+      }
+    });
+    new MutationObserver(() => {
+      if (!onPhone()) {
+        open = false;
+      }
+      render();
+    }).observe(document.documentElement, { attributes: true, attributeFilter: ["data-el-form-factor"] });
+    render();
+  }
+
+  function bindAll() {
+    document.querySelectorAll("[data-el-drawer]").forEach(bindDrawer);
+  }
+
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", bindAll, { once: true });
+  } else {
+    bindAll();
+  }
+})();

capsules/_shared/elastos-theme.js

@@ -205,6 +205,27 @@
     });
   }
 
+  // The shell's size class (`elastos:shell-layout`): phone means the shell's
+  // own title bar sits above the frame and no window controls overlay it, so
+  // elastos-ui.css drops the desktop chrome safe areas and capsules take
+  // their phone layout. Unknown values clear the attribute (desktop).
+  const FORM_FACTORS = ["phone", "tablet", "desktop"];
+  const POINTERS = ["coarse", "fine"];
+
+  function setOrClear(name, value, allowed) {
+    if (allowed.includes(value)) {
+      document.documentElement.setAttribute(name, value);
+    } else {
+      document.documentElement.removeAttribute(name);
+    }
+  }
+
+  function applyShellLayout(layout) {
+    const value = layout && typeof layout === "object" ? layout : {};
+    setOrClear("data-el-form-factor", value.formFactor, FORM_FACTORS);
+    setOrClear("data-el-pointer", value.pointer, POINTERS);
+  }
+
   // Opaque-sandboxed frames (no allow-same-origin) own no browser-profile
   // storage, so persistence stays with the host and the shell relays
   // preferences by message instead. Cross-frame updates arrive as
@@ -215,6 +236,10 @@
       return;
     }
     const message = event.data || {};
+    if (message.type === "elastos:shell-layout") {
+      applyShellLayout(message.layout);
+      return;
+    }
     if (message.type !== "elastos:ui-preference") {
       return;
     }

capsules/_shared/elastos-ui.css

@@ -6,8 +6,9 @@
  * then run `just vendor-ui`; `scripts/vendor-ui-tokens.sh --check` fails on drift.
  *
  * Contents: Inter (OFL, latin variable subset), palette, type scale, radii,
- * hairlines, blur/elevation steps, motion tokens, and minimal control
- * primitives. Layout is each app's business — tokens only.
+ * hairlines, blur/elevation steps, motion tokens, minimal control
+ * primitives, and the phone push drawer (with elastos-drawer.js). Layout is
+ * otherwise each app's business — tokens only.
  */
 
 @font-face {
@@ -385,6 +386,108 @@
   display: none;
 }
 
+/* Phone stage (html[data-el-form-factor="phone"], set from the shell's
+   `elastos:shell-layout` message by elastos-theme.js). The shell's own 44 px
+   title bar sits above the frame and no traffic lights overlay it, so the
+   desktop chrome safe areas are zero. The drawer tokens are the Assistant's
+   push-sidebar values, so every capsule's sidebar moves the same way. */
+:root {
+  --el-drawer-w: min(300px, 82vw);
+  --el-drawer-ms: 420ms;
+  --el-drawer-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --el-drawer-room-radius: 28px;
+  --el-touch-target: 44px;
+}
+
+:root[data-el-form-factor="phone"] {
+  --window-chrome-safe-top: 0px;
+  --window-chrome-safe-leading: 0px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  :root {
+    --el-drawer-ms: 1ms;
+  }
+}
+
+/* Phone push drawer (elastos-drawer.js): the sidebar leaves the layout and
+   sits under the leading edge; opening slides it in and pushes the room
+   aside by the same width with a rounded edge. Transform only — no reflow of
+   the room while it moves. */
+.el-drawer-toggle {
+  display: none;
+}
+
+:root[data-el-form-factor="phone"] .el-drawer-toggle {
+  display: inline-grid;
+  place-items: center;
+  flex: 0 0 auto;
+  width: var(--el-touch-target);
+  height: var(--el-touch-target);
+  padding: 0;
+  border: 0;
+  border-radius: var(--el-radius-md);
+  background: transparent;
+  color: var(--el-text);
+  cursor: pointer;
+}
+
+:root[data-el-form-factor="phone"] .el-drawer-toggle::before {
+  content: "";
+  width: 22px;
+  height: 22px;
+  background: currentColor;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16'/%3E%3C/svg%3E") center / contain no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='3'/%3E%3Cpath d='M9 4v16'/%3E%3C/svg%3E") center / contain no-repeat;
+}
+
+:root[data-el-form-factor="phone"] .el-drawer-toggle:active {
+  background: var(--el-lift);
+}
+
+:root[data-el-form-factor="phone"] .el-drawer-toggle:focus-visible {
+  outline: 2px solid var(--el-focus);
+  outline-offset: -2px;
+}
+
+:root[data-el-form-factor="phone"] [data-el-drawer] {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 40;
+  width: var(--el-drawer-w);
+  max-width: none;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+  outline: none;
+  transform: translateX(-105%);
+  visibility: hidden;
+  transition:
+    transform var(--el-drawer-ms) var(--el-drawer-ease),
+    visibility 0s linear var(--el-drawer-ms);
+}
+
+:root[data-el-form-factor="phone"] [data-el-drawer][data-el-drawer-state="open"] {
+  transform: none;
+  visibility: visible;
+  transition: transform var(--el-drawer-ms) var(--el-drawer-ease);
+}
+
+:root[data-el-form-factor="phone"] [data-el-drawer-room] {
+  transition:
+    transform var(--el-drawer-ms) var(--el-drawer-ease),
+    border-radius var(--el-drawer-ms) var(--el-drawer-ease);
+}
+
+:root[data-el-form-factor="phone"] [data-el-drawer-room][data-el-drawer-state="open"] {
+  transform: translateX(var(--el-drawer-w));
+  border-radius: var(--el-drawer-room-radius) 0 0 var(--el-drawer-room-radius);
+  overflow: hidden;
+  box-shadow: -1px 0 0 var(--el-hairline);
+  cursor: pointer;
+}
+
 @media (prefers-reduced-motion: reduce) {
   .el-app *,
   .el-app *::before,

capsules/archive-manager/browser/elastos-theme.js

@@ -206,6 +206,27 @@
     });
   }
 
+  // The shell's size class (`elastos:shell-layout`): phone means the shell's
+  // own title bar sits above the frame and no window controls overlay it, so
+  // elastos-ui.css drops the desktop chrome safe areas and capsules take
+  // their phone layout. Unknown values clear the attribute (desktop).
+  const FORM_FACTORS = ["phone", "tablet", "desktop"];
+  const POINTERS = ["coarse", "fine"];
+
+  function setOrClear(name, value, allowed) {
+    if (allowed.includes(value)) {
+      document.documentElement.setAttribute(name, value);
+    } else {
+      document.documentElement.removeAttribute(name);
+    }
+  }
+
+  function applyShellLayout(layout) {
+    const value = layout && typeof layout === "object" ? layout : {};
+    setOrClear("data-el-form-factor", value.formFactor, FORM_FACTORS);
+    setOrClear("data-el-pointer", value.pointer, POINTERS);
+  }
+
   // Opaque-sandboxed frames (no allow-same-origin) own no browser-profile
   // storage, so persistence stays with the host and the shell relays
   // preferences by message instead. Cross-frame updates arrive as
@@ -216,6 +237,10 @@
       return;
     }
     const message = event.data || {};
+    if (message.type === "elastos:shell-layout") {
+      applyShellLayout(message.layout);
+      return;
+    }
     if (message.type !== "elastos:ui-preference") {
       return;
     }