trek 2.1.0 → 2.3.0

data/app/components/trek/dropdown_component.rb

@@ -0,0 +1,29 @@
+module Trek
+  class DropdownComponent < Trek::Component
+    option :label, optional: true       # accessible name (aria-label on trigger + menu)
+    option :classnames, optional: true  # extra classes on root
+    option :hide_chevron, default: proc { false }
+
+    renders_one :trigger                 # inner content of the trigger button (e.g. an icon)
+    renders_many :items, "ItemComponent"
+
+    def classes
+      class_names_for(root_class, classnames)
+    end
+
+    def menu_id
+      @menu_id ||= "#{identifier}-menu-#{SecureRandom.hex(4)}"
+    end
+
+    class ItemComponent < Trek::Component
+      option :data, default: -> { {} }
+
+      def call
+        attrs = { class: class_for("root"), role: "menuitem", tabindex: -1, data: }
+        tag.li(**attrs) do
+          content
+        end
+      end
+    end
+  end
+end

data/app/components/trek/form/actions_component/actions_component.css

@@ -2,14 +2,8 @@
 
 .root {
   align-items: center;
-  background-color: var(--accent-1);
-  bottom: 0;
   display: flex;
   max-width: 120rem;
-  padding: 4rem 0;
-  position: sticky;
-  width: 100%;
-  z-index: 2;
 }
 
 .buttons {
@@ -36,9 +30,14 @@
 
 /* aspect */
 .root.aspect-default {
+  background-color: var(--accent-1);
   border-top: 1px solid var(--slate-6);
+  bottom: 0;
   margin-top: 3.2rem;
-  padding-top: 3.2rem;
+  padding: 3.2rem 0 4rem;
+  position: sticky;
+  width: 100%;
+  z-index: 2;
 }
 
 /* .root.aspect-seamless {

data/app/components/trek/form/content_editor_component/content_editor_component.html.slim

@@ -29,16 +29,14 @@ div(
         /   data-action=stimulus_action("toggleCode")
         / ) code
 
-        / slim-lint:disable ControlStatementSpacing
+        / The panel opening is handled by the hidden button's
+          openStackedPanelWhenLoaded action — a direct openPanel here would
+          pop the (possibly empty) primary panel alongside the stacked one.
         button.link(
           class=class_for("button")
           type="button"
-          data-action=[ \
-            stimulus_action("toggleLink"),
-            "trek--layout#openPanel",
-          ].join(" ")
+          data-action=stimulus_action("toggleLink")
         ) = render Trek::IconComponent.new("trek/link", title: t(".link"))
-        / slim-lint:enable ControlStatementSpacing
 
         = link_to "",
                   new_link_path,
@@ -46,8 +44,8 @@ div(
                   hidden: true,
                   data: stimulus_target_hash("hiddenLinkButton").merge( \
                     'base-path': new_link_path,
-                    action: "trek--layout#openPanelWhenLoaded",
-                    'turbo-frame': "trek--layout-panel",
+                    action: "trek--layout#openStackedPanelWhenLoaded",
+                    'turbo-frame': "trek--layout-stacked-panel",
                   )
 
         button(
@@ -239,8 +237,8 @@ div(
                 hidden: true,
                 data: stimulus_target_hash("hiddenPromptsButton").merge( \
                   'base-path': new_prompt_path,
-                  action: "trek--layout#openPanelWhenLoaded",
-                  'turbo-frame': "trek--layout-panel",
+                  action: "trek--layout#openStackedPanelWhenLoaded",
+                  'turbo-frame': "trek--layout-stacked-panel",
                 )
       = link_to "",
                 new_image_path,
@@ -248,6 +246,6 @@ div(
                 hidden: true,
                 data: stimulus_target_hash("hiddenImageButton").merge( \
                   'base-path': new_image_path,
-                  action: "trek--layout#openPanelWhenLoaded",
-                  'turbo-frame': "trek--layout-panel",
+                  action: "trek--layout#openStackedPanelWhenLoaded",
+                  'turbo-frame': "trek--layout-stacked-panel",
                 )

data/app/components/trek/form/content_editor_component/content_editor_component.js

@@ -41,6 +41,10 @@ export class Controller extends BaseController {
         // }),
         Link.configure({
           openOnClick: false,
+          // Internal links are stored as GlobalIDs (resolved to URLs at render
+          // time); without this the gid:// scheme fails Link's URI validation
+          // and setLink silently does nothing.
+          protocols: ["gid"],
           HTMLAttributes: {
             "data-action": "trek--form--content-editor#selectLink",
             target: null,

data/app/components/trek/form/group_component/group_component.css

@@ -92,6 +92,40 @@
   color: var(--slate-12);
 }
 
+.root input[type="file"] {
+  color: var(--slate-12);
+  font-size: 1.4rem;
+}
+
+/* Mirrors Trek::ButtonComponent with size: :narrow — keep in sync with
+   button_component/button_component.css (the scoped class can't be reused here) */
+.root input[type="file"]::file-selector-button {
+  appearance: none;
+  background-color: transparent;
+  border: 1px solid var(--slate-6);
+  border-radius: 0.8rem;
+  color: var(--slate-12);
+  cursor: pointer;
+  font-size: 1.6rem;
+  font-weight: var(--semibold);
+  line-height: 1.25;
+  margin-right: 1.6rem;
+  padding: 1rem 2.8rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+}
+
+.root input[type="file"]::file-selector-button:hover {
+  background-color: var(--accent-3);
+  border-color: var(--accent-5);
+}
+
+.root input[type="file"]::file-selector-button:active {
+  background-color: var(--accent-4);
+  border-color: var(--accent-6);
+  color: var(--accent-12);
+}
+
 .root input:disabled,
 .root select:disabled,
 .root textarea:disabled {

data/app/components/trek/header_component/header_component.css

@@ -40,6 +40,7 @@
   align-items: center;
   border-radius: 0.8rem;
   display: flex;
+  gap: 0.8rem;
   padding: 1rem 1.6rem;
   transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
 }
@@ -52,10 +53,6 @@
   cursor: pointer;
 }
 
-.nav-item-link .nav-item-icon {
-  margin-left: 0.8rem;
-}
-
 .nav-item-link:hover,
 .nav-item-button:hover {
   background-color: var(--accent-3);
@@ -69,6 +66,15 @@
   text-overflow: ellipsis;
 }
 
+/* Theme Dropdown */
+.nav-item-link:global(.c-trek--dropdown-root) {
+  padding: 0.8rem 1.6rem;
+}
+
+.nav-item-link:global(.c-trek--dropdown-root .c-trek--icon-root) {
+  --icon-size: 2rem;
+}
+
 /* Media queries */
 
 @media (max-width: 768px) {

data/app/components/trek/header_component/header_component.html.slim

@@ -1,4 +1,5 @@
-div(class=classes data-controller=identifier)
+div(class=classes data-controller=identifier \
+    data=stimulus_value_hash("url", theme_admin_users_path))
   = render Trek::BrandComponent.new
   nav(class=class_for("nav"))
     ul(class=class_for("nav-items"))
@@ -31,12 +32,18 @@ div(class=classes data-controller=identifier)
                 "trek/profile",
                 classnames: class_for("nav-item-icon"),
               )
-      li(class=class_for("nav-item"))
-        button(
-          class=class_for("nav-item-button")
-          data-action=stimulus_action("toggleTheme")
-        )
-          = render Trek::IconComponent.new( \
-              "trek/theme",
-              classnames: class_for("nav-item-icon"),
-            )
+        li(class=class_for("nav-item"))
+          = render Trek::DropdownComponent.new( \
+              label: User.human_attribute_name(:theme),
+              classnames: class_for("nav-item-link"),
+              hide_chevron: true,
+            ) do |dropdown|
+            - dropdown.with_trigger do
+              = helpers.theme_icon(current_user.theme)
+            - %w[auto light dark].each do |theme|
+              = dropdown.with_item(data: theme_item_data(theme)) do
+                = render Trek::IconComponent.new( \
+                    "trek/theme-#{theme}",
+                    classnames: class_for("nav-item-icon"),
+                  )
+                span = t("user.theme.#{theme}")

data/app/components/trek/header_component/header_component.js

@@ -3,11 +3,35 @@ import "./header_component.css";
 import { Controller as BaseController } from "@hotwired/stimulus";
 
 export class Controller extends BaseController {
-  toggleTheme() {
-    const dark = document.documentElement.classList.toggle("dark-theme");
-    document.documentElement.classList.toggle("light-theme");
+  static values = { url: String };
 
-    // TODO: save theme to user account
-    console.log(dark ? "dark" : "light");
+  setTheme(event) {
+    const theme = event.currentTarget.dataset.theme;
+    if (!theme) return;
+
+    const root = document.documentElement;
+    root.classList.remove("auto-theme", "light-theme", "dark-theme");
+    root.classList.add(`${theme}-theme`);
+
+    this.persist(theme);
+  }
+
+  async persist(theme) {
+    if (!this.hasUrlValue) return;
+
+    const token = document.querySelector('meta[name="csrf-token"]')?.content;
+    const response = await fetch(this.urlValue, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": token,
+        Accept: "text/vnd.turbo-stream.html",
+      },
+      body: JSON.stringify({ theme }),
+    });
+
+    // A manual fetch is not processed by Turbo automatically; render the
+    // returned stream ourselves to refresh the server-rendered theme icon.
+    if (response.ok) window.Turbo.renderStreamMessage(await response.text());
   }
 }

data/app/components/trek/header_component.rb

@@ -4,6 +4,7 @@ module Trek
   class HeaderComponent < Trek::Component
     extend Dry::Initializer
     include ActionPolicy::Behaviour
+    include Trek::PagePathHelper
 
     option :current_object, optional: true
     option :current_user, optional: true
@@ -25,14 +26,32 @@ module Trek
       current_object&.persisted? && (
         allowed_to?(:preview?, current_object, namespace: Admin, strict_namespace: true) ||
         (current_object_page? || current_object.respond_to?(:page))
-      )
+      ) && preview_path.present?
+    end
+
+    def theme_item_data(theme)
+      { action: stimulus_action("click", "setTheme"), theme: }
     end
 
     def can_preview_home?
       Admin::PreviewPolicy.new(user: current_user).apply(:home?)
     end
 
+    # Where the current object shows on the website, or nil when the app has no front-office route
+    # for it (a freshly generated app has none): the link is then left out rather than raising.
     def preview_path
+      return @preview_path if defined?(@preview_path)
+
+      @preview_path = website_path
+    rescue NoMethodError => e
+      raise unless e.receiver.equal?(self) && e.name.to_s.end_with?("_path", "_url")
+
+      @preview_path = nil
+    end
+
+    private
+
+    def website_path
       return current_object unless defined?(Page) && defined?(PageVersion)
 
       case current_object
@@ -50,8 +69,6 @@ module Trek
       end
     end
 
-    private
-
     def current_object_page?
       defined?(Page) && current_object.is_a?(Page)
     end

data/app/components/trek/layout_component/layout_component.css

@@ -34,6 +34,18 @@
   transform: translateX(0);
 }
 
+/* Stacked panel: overlays the primary panel. */
+.panel-stacked {
+  box-shadow: 0 0 16px var(--slate-a8);
+  z-index: 3;
+}
+
+/* Only when it actually stacks on an open primary panel, make it 1rem
+   narrower so a sliver of the panel underneath stays visible. */
+.panel.open + .panel-stacked {
+  width: 41rem;
+}
+
 .panel-close {
   --icon-size: 1.6rem;
 
@@ -65,4 +77,12 @@
   .content {
     margin: 6rem 3rem;
   }
+
+  .panel {
+    width: 100vw;
+  }
+
+  .panel.open + .panel-stacked {
+    width: calc(100vw - 1rem);
+  }
 }

data/app/components/trek/layout_component/layout_component.html.slim

@@ -18,3 +18,19 @@ div(
       data-action=stimulus_action("closePanel")
     )
       = render(Trek::IconComponent.new("trek/close"))
+  / Stacked panel: opens on top of the primary panel, so a panel-hosted form
+    (e.g. a content editor in a section panel) survives sub-panels like the
+    link/image/prompt inserters.
+  aside(
+    class=[class_for("panel"), class_for("panel-stacked")]
+    data=stimulus_target_hash("stackedPanel")
+  )
+    = turbo_frame_tag( \
+        "#{identifier}-stacked-panel",
+        data: stimulus_target_hash("stackedPanelFrame"),
+      )
+    button(
+      class=class_for("panel-close")
+      data-action=stimulus_action("closeStackedPanel")
+    )
+      = render(Trek::IconComponent.new("trek/close"))

data/app/components/trek/layout_component/layout_component.js

@@ -5,7 +5,14 @@ import { useClickOutside } from "stimulus-use";
 
 export class Controller extends BaseController {
   static classes = ["open"];
-  static targets = ["panel", "panelFrame", "panelCloser"];
+  static targets = [
+    "panel",
+    "panelFrame",
+    "panelCloser",
+    "stackedPanel",
+    "stackedPanelFrame",
+    "stackedPanelCloser",
+  ];
 
   connect() {
     useClickOutside(this, { element: this.panelTarget });
@@ -17,31 +24,53 @@ export class Controller extends BaseController {
     this.closePanel();
   }
 
+  stackedPanelCloserTargetConnected() {
+    this.closeStackedPanel();
+  }
+
   openPanelWhenLoaded() {
     this.panelFrameTarget.loaded.then(() => this.openPanel());
   }
 
+  openStackedPanelWhenLoaded() {
+    this.stackedPanelFrameTarget.loaded.then(() => this.openStackedPanel());
+  }
+
   openPanel() {
     this.panelTarget.classList.add(this.openClass);
   }
 
+  openStackedPanel() {
+    this.stackedPanelTarget.classList.add(this.openClass);
+  }
+
   closePanel() {
+    this.closeStackedPanel();
     this.panelTarget.classList.remove(this.openClass);
-    this.emptyFrame();
+    this.emptyFrame(this.panelFrameTarget);
+  }
+
+  closeStackedPanel() {
+    this.stackedPanelTarget.classList.remove(this.openClass);
+    this.emptyFrame(this.stackedPanelFrameTarget);
   }
 
   clickOutside(e) {
     if (
       e.target.dataset.action &&
-      e.target.dataset.action.includes("trek--layout#openPanel")
+      (e.target.dataset.action.includes("trek--layout#openPanel") ||
+        e.target.dataset.action.includes("trek--layout#openStackedPanel"))
     )
       return;
+    // Clicks inside the stacked panel are outside the primary panel element,
+    // but must not close anything.
+    if (this.stackedPanelTarget.contains(e.target)) return;
     this.closePanel();
   }
 
-  emptyFrame() {
-    while (this.panelFrameTarget.firstChild) {
-      this.panelFrameTarget.removeChild(this.panelFrameTarget.firstChild);
+  emptyFrame(frame) {
+    while (frame.firstChild) {
+      frame.removeChild(frame.firstChild);
     }
   }
 }

data/app/components/trek/menu_component/menu_component.css

@@ -38,6 +38,12 @@
   padding: 1rem 2.4rem;
 }
 
+.-section--item-icon {
+  --icon-size: 1.2rem;
+
+  margin-left: 0.6rem;
+}
+
 .-section--item-link:hover {
   background-color: var(--accent-3);
   color: var(--accent-11);

data/app/components/trek/menu_component.rb

@@ -62,13 +62,16 @@ module Trek
         # against it, a boolean forces the state. By default the item is active when its href
         # matches the current controller.
         option :active, optional: true
+        option :target, optional: true
 
         def call
           tag.li(
             link_to(
-              text,
+              rendered_text,
               href,
-              class: class_for("link")
+              class: class_for("link"),
+              target:,
+              rel:
             ),
             class: class_names_for(
               root_class,
@@ -83,6 +86,24 @@ module Trek
 
         private
 
+        def rendered_text
+          safe_join([text, icon].compact)
+        end
+
+        def icon
+          return unless new_tab?
+
+          render IconComponent.new("trek/external", classnames: class_for("icon"))
+        end
+
+        def rel
+          "noopener" if new_tab?
+        end
+
+        def new_tab?
+          target == "_blank"
+        end
+
         def active?
           case active
           when nil then href_path == controller_path
@@ -93,8 +114,12 @@ module Trek
         end
 
         def href_path
-          Array.wrap(href).map do |part|
-            part.respond_to?(:model_name) ? part.model_name.collection : part
+          Array.wrap(href).inject([]) do |parts, part|
+            segments = part.respond_to?(:model_name) ? part.model_name.collection.split("/") : [part.to_s]
+            # A namespaced model's collection already contains the namespace symbols the
+            # route helper needs before it — drop the overlap instead of doubling it.
+            overlap = (segments.length - 1).downto(0).find { |n| parts.last(n) == segments.first(n) }
+            parts + segments.drop(overlap)
           end.join("/").sub("root", "dashboards")
         end
       end

data/app/components/trek/toaster/toast_component.rb

@@ -52,7 +52,7 @@ module Trek
         def icon
           return if target != "_blank"
 
-          render IconComponent.new("external", classnames: class_for("icon"))
+          render IconComponent.new("trek/external", classnames: class_for("icon"))
         end
 
         def params

data/app/controllers/concerns/trek/authorization.rb

@@ -4,6 +4,8 @@ module Trek
 
     included do
       helper_method :policy_for, :policy_permitted_attribute?
+
+      rescue_from ActionPolicy::Unauthorized, with: :deny_access
     end
 
     private
@@ -11,5 +13,15 @@ module Trek
     def policy_permitted_attribute?(name)
       policy_for(record: @object).permitted_attribute?(name)
     end
+
+    # A signed-in user opening what their role doesn't allow (an editor on the users panel…) goes back
+    # where they came from, or to the dashboard, with an alert, rather than to an error page. Other
+    # formats (Turbo Streams, JSON) get a plain 403.
+    def deny_access
+      respond_to do |format|
+        format.html { redirect_back_or_to admin_root_path, alert: t("notices.unauthorized") }
+        format.any { head :forbidden }
+      end
+    end
   end
 end

data/app/formatters/prosemirror_to_html/global_id_to_links_formatter.rb

@@ -2,7 +2,9 @@ module ProsemirrorToHtml
   class GlobalIdToLinksFormatter
     include Rails.application.routes.url_helpers
 
-    GLOBAL_ID_REGEX = %r{(gid://[[:alnum:]]+/[\w:]+/[\w-]+)}
+    # The app segment allows hyphens and dots: GlobalID derives it from the
+    # Rails application name (e.g. "au-poste").
+    GLOBAL_ID_REGEX = %r{(gid://[\w.-]+/[\w:]+/[\w-]+)}
 
     def initialize(str)
       @str = str

data/app/helpers/trek/page_path_helper.rb

@@ -13,10 +13,11 @@ module Trek
       raise "#{object} is not a page" unless object.is_a?(Page)
 
       if object.pageable.present?
-        klass = object.pageable.class.name.underscore
+        # Same key as Rails' polymorphic routes: `shop_product` for Shop::Product, `post` for an isolated engine's Blog::Post
+        route_key = object.pageable.model_name.singular_route_key
         id = object.slug.presence || object.to_param
 
-        id ? send(:"#{klass}_#{suffix}", id:, **options) : nil
+        id ? send(:"#{route_key}_#{suffix}", id:, **options) : nil
       else
         begin
           key = object.key.presence
@@ -27,7 +28,7 @@ module Trek
               send(:"localized_root_#{suffix}", locale:, **options)
             end
           else
-            send(:"#{key}_path", **options)
+            send(:"#{key}_#{suffix}", **options)
           end
         rescue NoMethodError
           I18n.with_locale(locale) do

data/app/helpers/trek/theme_helper.rb

@@ -1,10 +1,25 @@
 module Trek
   module ThemeHelper
+    # DOM id of the header's theme indicator, targeted by the theme turbo_stream.
+    THEME_ICON_ID = "header-theme-icon".freeze
+
     def class_for_theme
       if authenticated?
         "#{Current.user.theme}-theme"
       else
-        "light-theme"
+        "auto-theme"
+      end
+    end
+
+    # Renders the theme indicator used in the header trigger. Wrapped in a
+    # stable-id element so the +theme+ turbo_stream can replace it after a
+    # theme change. Used both on initial render and in the stream response.
+    def theme_icon(theme)
+      tag.span(id: THEME_ICON_ID) do
+        render Trek::IconComponent.new(
+          "trek/theme-#{theme}",
+          classnames: "c-trek--header-nav-item-icon"
+        )
       end
     end
   end

data/app/models/concerns/trek/phonable.rb

@@ -10,14 +10,26 @@ module Trek
   module Phonable
     extend ActiveSupport::Concern
 
+    STRICTNESSES = %i[possible valid].freeze
+
     class_methods do
-      def phonable_attributes(*attrs)
+      # `strictness:` picks how hard Phonelib looks. `:possible`, the default, only asks whether the
+      # digits could form a number for the country; `:valid` asks whether they fall in a range the
+      # regulator has actually assigned. The gap is not academic: with a French default country,
+      # "0012345678" is possible, so it is accepted and normalized to "+12345678" — the stray leading
+      # zero read as an international prefix, the number silently rehomed to country code +1. An app
+      # that intends to call the numbers it collects wants `:valid`.
+      def phonable_attributes(*attrs, strictness: :possible)
+        unless STRICTNESSES.include?(strictness)
+          raise ArgumentError, "unknown strictness #{strictness.inspect}, expected one of #{STRICTNESSES.inspect}"
+        end
+
         @__phonable_attributes ||= []
         @__phonable_attributes += attrs
 
         attrs.each do |attr|
           validates attr,
-            phone: { possible: true, allow_blank: true }
+            phone: { possible: strictness == :possible, allow_blank: true }
 
           define_method :"formatted_#{attr}" do
             return if send(attr).blank?
@@ -42,7 +54,7 @@ module Trek
 
     def normalize_phone
       self.class.instance_variable_get(:@__phonable_attributes).each do |attr|
-        send(:"#{attr}=", Phonelib.parse(phone).full_e164.presence)
+        send(:"#{attr}=", Phonelib.parse(send(attr)).full_e164.presence)
       end
     end
   end

data/app/models/concerns/trek/sectionable.rb

@@ -9,6 +9,11 @@ module Trek
     end
 
     included do
+      # Sections are the host app's own `Section` model, which Trek doesn't generate: without one, a
+      # record has no sections, and declaring the association anyway would make `destroy` raise
+      # (`dependent: :destroy`). `const_defined?` also sees a model Zeitwerk hasn't loaded yet.
+      next unless Object.const_defined?(:Section)
+
       has_many :sections,
         -> { ordered },
         as: :sectionable,