trek 2.1.0 → 2.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a2b7ab45c51c036cab94f7ab2f6119b84cfccf501d1133cd4f390e320d40aa6
-  data.tar.gz: '0803283b1a6283983d174c9797d5ea753f97ffc1ce458e0285ab2ac681257ecf'
+  metadata.gz: 76621e65ede62feb9ed4fd8aa029352bfbdda31c814a7e9679330597a631b2f6
+  data.tar.gz: a28bce934474a0d57069466281121658c75115eb9b9b1a3056eab9c6ee03ca5f
 SHA512:
-  metadata.gz: 10aea34299dba23456b3f687c6e450996d5473e8d34d9a12200373c2e3f394025e6e5fc2aab4d2dfe00628133113171354780ab3123c6628dc5480e75ed87987
-  data.tar.gz: 966a6004dc2aaa1b7ff21c4db7c87d00e3eb4054ea3dbaec780c62823b0d297f8736be2d93216dc438820375aa3487063882325fd55cb8f612ec831a9179c830
+  metadata.gz: 5653df741bf84cedce799a58c4f9d8c13d8a13226793f05d1f158b4971b0b08b1806463c82fa818526c8a0454d5b489f65cae207373c581bae074e1e3ae037bd
+  data.tar.gz: aad5fb5a6e0e9010c5b611ef2ba67e7ddf112d2b983c85684ce698d32083d1da82ac24469404f3377a131d3ef1be56ec369baa81bd9cd7e71b4560a916800e62

data/CHANGELOG.md

@@ -1,5 +1,18 @@
 ## [Unreleased]
 
+## [2.2.0] - 2026-08-28
+
+### Added
+
+- `Trek::Dashboard::ChartComponent`, a dashboard card wrapping [Chartkick](https://chartkick.com) — pass `title`, `data`, a `type` (`:line_chart`, `:bar_chart`, …), optional `info`/`options`, and a `color` (default `:slate`); it renders `public_send(type, data, **options)` inside a coloured card matching the tiles. Chartkick is an **optional** dependency: the component only includes `Chartkick::Helper` when it is loaded, so Trek keeps working without it. `Trek::Dashboard::AnalyticsComponent` gained a `renders_many :charts` slot (alongside the existing `section`) so charts can be dropped straight into the dashboard with `a.with_chart(...)`. **Upgrade note:** to use `ChartComponent`, add `gem "chartkick"` to your app and `import "chartkick/chart.js"` in your admin JS bundle (Trek does not pull Chartkick in for you).
+- `Trek::Dashboard::TileComponent` gained a `title` option (a large heading above the text, coloured per the tile's `color`) and a `wide` option (default `false`) that spans two tile columns. Its `href` is now optional: without one the tile renders as a plain `div` instead of a link, for read-only stat tiles.
+- The layout gains a **stacked panel**: a second panel frame (`trek--layout-stacked-panel`) that opens on top of the primary one. The content editor's link/image/prompt inserters now open there, so an editor hosted _inside_ a panel (e.g. a Sectionable payload edited in a side panel) no longer loses its unsaved content when inserting a link — the primary panel stays put underneath and the inserted element lands back in the live editor. Closing the primary panel also closes the stacked one; _Annuler_ in the stacked panel closes only that one. The stacked panel is 1rem narrower than the primary panel (only while it stacks on an open one). **Upgrade note:** host apps that override the panel views (`app/views/<engine>/panels/{links,images,prompts}/*`) must retarget them to the `trek--layout-stacked-panel` frame and the `stackedPanelCloser` target, as Trek's own views now do.
+
+### Fixed
+
+- Internal links inserted through the content editor (stored as `gid://` URLs) rendered as literal `gid://…` hrefs — or were dropped by the sanitizer — in formatted content: `Prosemirror#format_content` now resolves GlobalIDs to page paths before rendering, and the editor's Link extension accepts the `gid` protocol so reopening such a link shows the linked page instead of an empty field.
+- `Trek::Form::ActionsComponent`: the sticky footer styling (sticky positioning, `--accent-1` background, `4rem` vertical padding) now only applies to the `default` aspect. It was set on the root rule, so the `seamless` aspect — used by `Trek::DialogComponent` — was also sticky and padded inside dialogs.
+
 ## [2.1.0] - 2026-08-25
 
 ### Added

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    trek (2.1.0)
+    trek (2.2.0)
       action_policy (~> 0.6)
       actioncable
       acts_as_list (~> 1.1)

data/app/assets/icons/trek/audit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M14 18a2 2 0 0 0-4 0"/><path d="m19 11-2.11-6.657a2 2 0 0 0-2.752-1.148l-1.276.61A2 2 0 0 1 12 4H8.5a2 2 0 0 0-1.925 1.456L5 11"/><path d="M2 11h20"/><circle cx="17" cy="18" r="3"/><circle cx="7" cy="18" r="3"/></svg>

data/app/assets/icons/trek/print.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18H4a2 2 0 0 1-2-2v-5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v5a2 2 0 0 1-2 2h-2"/><path d="M6 9V3a1 1 0 0 1 1-1h10a1 1 0 0 1 1 1v6"/><rect x="6" y="14" width="12" height="8" rx="1"/></svg>

data/app/components/trek/dashboard/analytics_component/analytics_component.html.slim

@@ -1,2 +1,4 @@
 div(class=root_class)
   div(class=class_for("info")) = section
+  - charts.each do |chart|
+    = chart

data/app/components/trek/dashboard/analytics_component.rb

@@ -3,5 +3,6 @@
 module Trek
   class Dashboard::AnalyticsComponent < Trek::Component
     renders_one :section, Trek::Dashboard::SectionComponent
+    renders_many :charts, Trek::Dashboard::ChartComponent
   end
 end

data/app/components/trek/dashboard/chart_component/chart_component.css

@@ -0,0 +1,192 @@
+.root {
+  border: 0.1rem solid;
+  border-radius: 0.8rem;
+  font-weight: var(--semibold);
+  margin-bottom: 2rem;
+  max-width: 83.7rem;
+  padding: 2rem;
+  transition: background-color 0.2s ease-in-out, border-color 0.2s ease-in-out,
+    color 0.2s ease-in-out;
+}
+
+.root:last-child {
+  margin-bottom: 0;
+}
+
+.title {
+  color: var(--mint-12);
+  font-size: 1.6rem;
+  font-weight: var(--semibold);
+  margin: 0 0 0.5rem;
+}
+
+.data {
+  margin-bottom: 2rem;
+}
+
+.info {
+  color: var(--slate-11);
+  font-size: 1.4rem;
+  font-weight: var(--medium);
+  padding-bottom: 1.6rem;
+}
+
+.root.color-amber {
+  --icon-color: var(--amber-11);
+
+  background-color: var(--amber-2);
+  border-color: var(--amber-5);
+  color: var(--amber-12);
+}
+
+.root.color-amber:hover {
+  --icon-color: var(--amber-12);
+
+  background-color: var(--amber-3);
+  border-color: var(--amber-6);
+}
+
+.root.color-amber:active {
+  background-color: var(--amber-5);
+  border-color: var(--amber-7);
+}
+
+.root.color-lime {
+  --icon-color: var(--lime-11);
+
+  background-color: var(--lime-2);
+  border-color: var(--lime-5);
+  color: var(--lime-12);
+}
+
+.root.color-lime:hover {
+  --icon-color: var(--lime-12);
+
+  background-color: var(--lime-3);
+  border-color: var(--lime-6);
+}
+
+.root.color-lime:active {
+  background-color: var(--lime-5);
+  border-color: var(--lime-7);
+}
+
+.root.color-mint {
+  --icon-color: var(--mint-11);
+
+  background-color: var(--mint-2);
+  border-color: var(--mint-5);
+  color: var(--mint-12);
+}
+
+.root.color-mint:hover {
+  --icon-color: var(--mint-12);
+
+  background-color: var(--mint-3);
+  border-color: var(--mint-6);
+}
+
+.root.color-mint:active {
+  background-color: var(--mint-5);
+  border-color: var(--mint-7);
+}
+
+.root.color-purple {
+  --icon-color: var(--purple-11);
+
+  background-color: var(--purple-2);
+  border-color: var(--purple-5);
+  color: var(--purple-12);
+}
+
+.root.color-purple:hover {
+  --icon-color: var(--purple-12);
+
+  background-color: var(--purple-3);
+  border-color: var(--purple-6);
+}
+
+.root.color-purple:active {
+  background-color: var(--purple-5);
+  border-color: var(--purple-7);
+}
+
+.root.color-sky {
+  --icon-color: var(--sky-11);
+
+  background-color: var(--sky-2);
+  border-color: var(--sky-5);
+  color: var(--sky-12);
+}
+
+.root.color-sky:hover {
+  --icon-color: var(--sky-12);
+
+  background-color: var(--sky-3);
+  border-color: var(--sky-6);
+}
+
+.root.color-sky:active {
+  background-color: var(--sky-5);
+  border-color: var(--sky-7);
+}
+
+.root.color-slate {
+  --icon-color: var(--slate-11);
+
+  background-color: var(--slate-2);
+  border-color: var(--slate-5);
+  color: var(--slate-12);
+}
+
+.root.color-slate:hover {
+  --icon-color: var(--slate-12);
+
+  background-color: var(--slate-3);
+  border-color: var(--slate-6);
+}
+
+.root.color-slate:active {
+  background-color: var(--slate-5);
+  border-color: var(--slate-7);
+}
+
+.root.color-teal {
+  --icon-color: var(--teal-11);
+
+  background-color: var(--teal-2);
+  border-color: var(--teal-5);
+  color: var(--teal-12);
+}
+
+.root.color-teal:hover {
+  --icon-color: var(--teal-12);
+
+  background-color: var(--teal-3);
+  border-color: var(--teal-6);
+}
+
+.root.color-teal:active {
+  background-color: var(--teal-5);
+  border-color: var(--teal-7);
+}
+
+.root.color-violet {
+  --icon-color: var(--violet-11);
+
+  background-color: var(--violet-2);
+  border-color: var(--violet-5);
+  color: var(--violet-12);
+}
+
+.root.color-violet:hover {
+  --icon-color: var(--violet-12);
+
+  background-color: var(--violet-3);
+  border-color: var(--violet-6);
+}
+
+.root.color-violet:active {
+  background-color: var(--violet-5);
+  border-color: var(--violet-7);
+}

data/app/components/trek/dashboard/chart_component/chart_component.html.slim

@@ -0,0 +1,6 @@
+div(class=classes)
+  div(class=class_for("title")) = title
+  - if info.present?
+    span(class=class_for("info")) = info
+  div(class=class_for("data"))
+  = chart

data/app/components/trek/dashboard/chart_component/chart_component.js

@@ -0,0 +1 @@
+import "./chart_component.css";

data/app/components/trek/dashboard/chart_component.rb

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Trek
+  class Dashboard::ChartComponent < Trek::Component
+    # Chartkick is an optional dependency: host apps that use this component must
+    # add `gem "chartkick"` and import "chartkick/chart.js" in their JS bundle.
+    include Chartkick::Helper if defined?(Chartkick)
+
+    option :title
+    option :info, optional: true
+    option :data
+    option :type
+    option :options, optional: true, default: proc { {} }
+    option :color, default: proc { :slate }
+
+    def chart
+      public_send(type, data, **options)
+    end
+
+    def classes
+      class_names(
+        root_class,
+        class_for("color-#{color}")
+      )
+    end
+  end
+end

data/app/components/trek/dashboard/tile_component/tile_component.css

@@ -20,6 +20,14 @@
   width: 20rem;
 }
 
+.root.wide {
+  width: calc(40rem + 1.2rem);
+}
+
+.title {
+  font-size: 3.6rem;
+}
+
 .root:hover .icon {
   transform: scale(1.125);
 }
@@ -58,6 +66,10 @@
   border-color: var(--amber-7);
 }
 
+.root.color-amber .title {
+  color: var(--amber-11);
+}
+
 .root.color-lime {
   --icon-color: var(--lime-11);
 
@@ -78,6 +90,10 @@
   border-color: var(--lime-7);
 }
 
+.root.color-lime .title {
+  color: var(--lime-11);
+}
+
 .root.color-mint {
   --icon-color: var(--mint-11);
 
@@ -98,6 +114,10 @@
   border-color: var(--mint-7);
 }
 
+.root.color-mint .title {
+  color: var(--mint-11);
+}
+
 .root.color-purple {
   --icon-color: var(--purple-11);
 
@@ -118,6 +138,10 @@
   border-color: var(--purple-7);
 }
 
+.root.color-purple .title {
+  color: var(--purple-11);
+}
+
 .root.color-sky {
   --icon-color: var(--sky-11);
 
@@ -138,6 +162,10 @@
   border-color: var(--sky-7);
 }
 
+.root.color-sky .title {
+  color: var(--sky-11);
+}
+
 .root.color-slate {
   --icon-color: var(--slate-11);
 
@@ -158,6 +186,10 @@
   border-color: var(--slate-7);
 }
 
+.root.color-slate .title {
+  color: var(--slate-11);
+}
+
 .root.color-teal {
   --icon-color: var(--teal-11);
 
@@ -178,6 +210,10 @@
   border-color: var(--teal-7);
 }
 
+.root.color-teal .title {
+  color: var(--teal-11);
+}
+
 .root.color-violet {
   --icon-color: var(--violet-11);
 
@@ -197,3 +233,7 @@
   background-color: var(--violet-5);
   border-color: var(--violet-7);
 }
+
+.root.color-violet .title {
+  color: var(--violet-11);
+}

data/app/components/trek/dashboard/tile_component/tile_component.html.slim

@@ -1,4 +1,14 @@
-= link_to href, class: classes, rel: rel, target: target
-  - if icon
-    = render Trek::IconComponent.new(icon, classnames: class_for("icon"))
-  span(class=class_for("text")) = formatted_text
+- if href.present?
+  = link_to href, class: classes, rel: rel, target: target
+    - if title
+      span(class=class_for("title")) = title
+    - if icon
+      = render Trek::IconComponent.new(icon, classnames: class_for("icon"))
+    span(class=class_for("text")) = formatted_text
+- else
+  div(class=classes)
+    - if title
+      span(class=class_for("title")) = title
+    - if icon
+      = render Trek::IconComponent.new(icon, classnames: class_for("icon"))
+    span(class=class_for("text")) = formatted_text

data/app/components/trek/dashboard/tile_component.rb

@@ -3,12 +3,15 @@
 module Trek
   class Dashboard::TileComponent < Trek::Component
     option :color, default: proc { :slate }
-    option :href
+    option :href, optional: true
     option :icon, optional: true
     option :rel, optional: true
     option :target, optional: true
     option :text
+    option :title, optional: true
     option :allowed_to, default: -> { true }
+    # Spans two tile columns (including the gap between them).
+    option :wide, default: proc { false }
 
     def render?
       allowed_to
@@ -17,7 +20,8 @@ module Trek
     def classes
       class_names(
         root_class,
-        class_for("color-#{color}")
+        class_for("color-#{color}"),
+        class_for("wide") => wide
       )
     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/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/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/models/prosemirror.rb

@@ -10,9 +10,12 @@ class Prosemirror
   def format_content(parsed_content)
     return if parsed_content.blank?
 
-    content = renderer.render(parsed_content)
+    # GlobalIDs must be resolved to URLs before rendering: the renderer's
+    # sanitizer strips href attributes with unknown protocols, so a gid://
+    # link would lose its href entirely.
+    content = ProsemirrorToHtml::GlobalIdToLinksFormatter.new(parsed_content.to_json).to_s
+    content = renderer.render(JSON.parse(content))
     content = ProsemirrorToHtml::RemoveEmptyParagraphsFormatter.new(content).to_s
-    content = ProsemirrorToHtml::GlobalIdToLinksFormatter.new(content).to_s
     # rubocop:disable Rails/OutputSafety
     content.html_safe
     # rubocop:enable Rails/OutputSafety

data/app/views/trek/panels/images/_form.html.slim

@@ -24,7 +24,7 @@ h1.c-trek--layout-panel-title = t(".title")
   = render Trek::Form::ActionsComponent.new do |c|
     ruby:
       c.with_button(
-        data: { action: "trek--layout#closePanel" },
+        data: { action: "trek--layout#closeStackedPanel" },
         text: t("admin.actions.cancel"),
       )
 

data/app/views/trek/panels/images/create.turbo_stream.slim

@@ -1,6 +1,6 @@
 - if @object.valid?
-  = turbo_stream.append("trek--layout-panel")
-    div(data-trek--layout-target="panelCloser")
+  = turbo_stream.append("trek--layout-stacked-panel")
+    div(data-trek--layout-target="stackedPanelCloser")
 
   = turbo_stream.append(@object.turbo_frame_id)
     div(
@@ -15,5 +15,5 @@
         text=@object.text
       )
 - else
-  = turbo_stream.update("trek--layout-panel")
+  = turbo_stream.update("trek--layout-stacked-panel")
     = render "form"

data/app/views/trek/panels/images/new.html.slim

@@ -1,2 +1,2 @@
-= turbo_frame_tag("trek--layout-panel")
+= turbo_frame_tag("trek--layout-stacked-panel")
   = render "form"

data/app/views/trek/panels/links/_form.html.slim

@@ -28,7 +28,7 @@ h1.c-trek--layout-panel-title = t(".title")
   = render Trek::Form::ActionsComponent.new do |c|
     ruby:
       c.with_button(
-        data: { action: "trek--layout#closePanel" },
+        data: { action: "trek--layout#closeStackedPanel" },
         text: t("admin.actions.cancel"),
       )
 

data/app/views/trek/panels/links/create.turbo_stream.slim

@@ -1,6 +1,6 @@
 - if @object.valid?
-  = turbo_stream.append("trek--layout-panel")
-    div(data-trek--layout-target="panelCloser")
+  = turbo_stream.append("trek--layout-stacked-panel")
+    div(data-trek--layout-target="stackedPanelCloser")
 
   = turbo_stream.append(@object.turbo_frame_id)
     div(
@@ -8,5 +8,5 @@
       data-params=@object.to_json
     )
 - else
-  = turbo_stream.update("trek--layout-panel")
+  = turbo_stream.update("trek--layout-stacked-panel")
     = render "form"

data/app/views/trek/panels/links/new.html.slim

@@ -1,2 +1,2 @@
-= turbo_frame_tag("trek--layout-panel")
+= turbo_frame_tag("trek--layout-stacked-panel")
   = render "form"

data/app/views/trek/panels/prompts/_form.html.slim

@@ -26,7 +26,7 @@ h1.c-trek--layout-panel-title = t(".title")
   = render Trek::Form::ActionsComponent.new do |c|
     ruby:
       c.with_button(
-        data: { action: "trek--layout#closePanel" },
+        data: { action: "trek--layout#closeStackedPanel" },
         text: t("admin.actions.cancel"),
       )
 

data/app/views/trek/panels/prompts/create.turbo_stream.slim

@@ -1,6 +1,6 @@
 - if @object.valid?
-  = turbo_stream.append("trek--layout-panel")
-    div(data-trek--layout-target="panelCloser")
+  = turbo_stream.append("trek--layout-stacked-panel")
+    div(data-trek--layout-target="stackedPanelCloser")
 
   = turbo_stream.append(@object.turbo_frame_id)
     div(
@@ -14,5 +14,5 @@
         title=@object.title
       )
 - else
-  = turbo_stream.update("trek--layout-panel")
+  = turbo_stream.update("trek--layout-stacked-panel")
     = render "form"

data/app/views/trek/panels/prompts/new.html.slim

@@ -1,2 +1,2 @@
-= turbo_frame_tag("trek--layout-panel")
+= turbo_frame_tag("trek--layout-stacked-panel")
   = render "form"

data/lib/trek/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module Trek
-  VERSION = "2.1.0"
+  VERSION = "2.2.0"
 end

data/package.json

@@ -1,6 +1,6 @@
 {
   "name": "trek",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "description": "A modern content management & back-office system for Ruby on Rails",
   "homepage": "https://trek.etamin.studio",
   "license": "MIT",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: trek
 version: !ruby/object:Gem::Version
-  version: 2.1.0
+  version: 2.2.0
 platform: ruby
 authors:
 - Mohamed Bengrich
@@ -454,6 +454,7 @@ files:
 - app/assets/icons/trek/add.svg
 - app/assets/icons/trek/arrow-bar-left.svg
 - app/assets/icons/trek/arrow-bar-right.svg
+- app/assets/icons/trek/audit.svg
 - app/assets/icons/trek/bold.svg
 - app/assets/icons/trek/check.svg
 - app/assets/icons/trek/chevron-double-left.svg
@@ -477,6 +478,7 @@ files:
 - app/assets/icons/trek/logout.svg
 - app/assets/icons/trek/paragraph.svg
 - app/assets/icons/trek/pic.svg
+- app/assets/icons/trek/print.svg
 - app/assets/icons/trek/profile.svg
 - app/assets/icons/trek/quotation.svg
 - app/assets/icons/trek/rating.svg
@@ -510,6 +512,10 @@ files:
 - app/components/trek/dashboard/analytics_component/analytics_component.css
 - app/components/trek/dashboard/analytics_component/analytics_component.html.slim
 - app/components/trek/dashboard/analytics_component/analytics_component.js
+- app/components/trek/dashboard/chart_component.rb
+- app/components/trek/dashboard/chart_component/chart_component.css
+- app/components/trek/dashboard/chart_component/chart_component.html.slim
+- app/components/trek/dashboard/chart_component/chart_component.js
 - app/components/trek/dashboard/section_component.rb
 - app/components/trek/dashboard/section_component/section_component.css
 - app/components/trek/dashboard/section_component/section_component.html.slim