wrap_it_ruby 0.3.2 → 0.3.4

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fa2cef76d046309295713f567c31c703aad9b7856b3349e9a65900f864940f90
-  data.tar.gz: ad16cee91fa318b565cfda5b0eececb3c85ccdfca93745704f933591a7036b89
+  metadata.gz: 7a551e7f6f103d0580623f12f28c3f75121af83099ad2d853b1a936650a77cbb
+  data.tar.gz: 92b6870e46cf110e94e2a821ffe9eb4e5e9244a1952e0db19f5b853e71ab423b
 SHA512:
-  metadata.gz: ce33cc961a1b61b8a70fb5f8732d5e48b2442622998518d83f02cbef72e417cf7d31c9eaa369eb708e7cec6f0a33a08b8374b0d889c54688eac80074347efab7
-  data.tar.gz: e499fa0de180cf977f94c9c7ab800298ec3dbee57a4d375ebdb9c2940f7c24478527e13e86f101f5f462d447820cf2e7aa522d7d31ad5be4e285de2e6d0ce562
+  metadata.gz: e7a67218134d13a4bb57e4d6d70ae3c6917aa02a1d40417418c9dde57a975082e407c3f421d8fc4bfc93abee1cc11a76e74a122f74da87e2e569832307b96e1b
+  data.tar.gz: fa81fcff2623d919bfdb2b20c22ee5ec12ee25e3fc3fd2513e65fd9791e5c4e04994c5b55ef9e729910b356af96d1772366ed75aeeb63e5d094cfbe1df5796f7

data/app/assets/stylesheets/wrap_it_ruby/application.css

@@ -2,6 +2,60 @@
  * WrapItRuby engine styles — full layout + iframe proxy.
  */
 
+.ui.segments > .ui.segments {
+  border-top: 1px solid rgba(34,36,38,.15);
+}
+
+.ui.accordion .accordion {
+  margin: 0;
+}
+
+.ui.styled.accordion > .content {
+  padding: 0.5em 1em 0.5em;
+}
+
+.drag-handle {
+  cursor: grab;
+  opacity: 0.4;
+  margin-left: 0.5em !important;
+}
+
+.drag-handle:active {
+  cursor: grabbing;
+}
+
+.sortable-chosen details,
+.sortable-ghost details {
+  pointer-events: none;
+}
+
+details[open] > div > .ui.segments:empty {
+  min-height: 30px;
+  border: 2px dashed rgba(34,36,38,.15);
+  border-radius: 4px;
+  margin: 4px;
+}
+
+/* Accordion segments: <details> with segment class */
+details.ui.segment {
+  padding: 0;
+}
+
+details.ui.segment > summary {
+  padding: 1em;
+  cursor: pointer;
+}
+
+details.ui.segment > div {
+  padding: 0 1em 1em;
+}
+
+.edit-link > .icon {
+  line-height: inherit !important;
+}
+
+
+
 html, body {
   height: 100%;
   margin: 0;
@@ -51,8 +105,12 @@ html, body {
     margin: 7px;
     margin-top: 0px;
     border-radius: 15px;
-    #background-color: grey;
     overflow: hidden;
+
+    #site-content-scroll {
+      height: 100%;
+      overflow-y: auto;
+    }
   }
 }
 

data/app/controllers/wrap_it_ruby/menu_settings_controller.rb

@@ -3,32 +3,46 @@
 module WrapItRuby
   class MenuSettingsController < ::ApplicationController
     def index
-      @menu_items = ::MenuItem.roots.includes(children: :children)
+      @menu_items = menu_items_exist? ? MenuItem.roots.includes(children: :children) : []
+    end
+
+    def new
+      @menu_item = MenuItem.new
+    end
+
+    def edit
+      @menu_item = MenuItem.find(params[:id])
     end
 
     def create
-      ::MenuItem.create!(menu_item_params)
-      respond_with_tree_refresh
+      MenuItem.create!(menu_item_params)
+      redirect_to wrap_it_ruby.menu_settings_path
     end
 
     def update
-      item = ::MenuItem.find(params[:id])
-      item.update!(menu_item_params)
-      respond_with_tree_refresh
+      item = MenuItem.find(params[:id])
+      position = params.dig(:menu_item, :position) || params[:position]
+      if position
+        item.move_to(params[:parent_id].presence, position.to_i)
+        head :no_content
+      else
+        item.update!(menu_item_params)
+        redirect_to wrap_it_ruby.menu_settings_path
+      end
     end
 
     def destroy
-      item = ::MenuItem.find(params[:id])
+      item = MenuItem.find(params[:id])
       item.destroy!
-      respond_with_tree_refresh
+      redirect_to wrap_it_ruby.menu_settings_path
     end
 
     def sort
       ordering = params.require(:ordering)
 
-      ::MenuItem.transaction do
+      MenuItem.transaction do
         ordering.each do |entry|
-          item = ::MenuItem.find(entry[:id])
+          item = MenuItem.find(entry[:id])
           new_parent_id = entry[:parent_id].presence
 
           if item.parent_id.to_s != new_parent_id.to_s
@@ -40,25 +54,19 @@ module WrapItRuby
         end
       end
 
-      respond_with_tree_refresh
+      redirect_to wrap_it_ruby.menu_settings_path
     end
 
     private
 
     def menu_item_params
-      params.permit(:label, :icon, :route, :url, :item_type, :parent_id)
+      params.require(:menu_item).permit(:label, :icon, :route, :url, :item_type, :parent_id)
     end
 
-    def respond_with_tree_refresh
-      respond_to do |format|
-        format.turbo_stream do
-          render turbo_stream: turbo_stream.replace(
-            'menu-tree-container',
-            partial: 'wrap_it_ruby/menu_settings/tree'
-          )
-        end
-        format.html { head :no_content }
-      end
+    def menu_items_exist?
+      defined?(MenuItem) && MenuItem.table_exists? && MenuItem.exists?
+    rescue StandardError
+      false
     end
   end
 end

data/app/helpers/wrap_it_ruby/menu_helper.rb

@@ -29,171 +29,6 @@ module WrapItRuby
       end
     end
 
-    # Renders the menu-settings, edit, and add modals.
-    # Call this outside the Menu { } block so modals are not
-    # nested inside the menu bar.
-    def render_menu_modals
-      # Settings modal — sortable tree + add button
-      concat tag.div(id: 'menu-settings-modal', class: 'ui large modal') {
-        safe_join([
-                    tag.i(class: 'close icon'),
-                    tag.div(class: 'header') { tag.i(class: 'bars icon') + ' Menu Settings' },
-                    tag.div(class: 'scrolling content') {
-                      tag.div(id: 'menu-tree-container') { sortable_menu_tree }
-                    },
-                    tag.div(class: 'actions') {
-                      safe_join([
-                                  tag.button(class: 'ui green button', onclick: 'menuSettingsShowAdd()') {
-                                    tag.i(class: 'plus icon') + ' Add Item'
-                                  }
-                                ])
-                    }
-                  ])
-      }
-
-      # Edit modal — stacked on top of settings modal
-      concat tag.div(id: 'menu-edit-modal', class: 'ui small modal') {
-        safe_join([
-                    tag.i(class: 'close icon'),
-                    tag.div(class: 'header') { 'Edit Menu Item' },
-                    tag.div(class: 'content') {
-                      tag.form(class: 'ui form', id: 'menu-edit-form') {
-                        safe_join([
-                                    tag.input(type: 'hidden', name: 'id', id: 'menu-edit-id'),
-                                    tag.div(class: 'two fields') {
-                                      safe_join([
-                                                  tag.div(class: 'field') {
-                                                    tag.label {
-                                                      'Label'
-                                                    } + tag.input(type: 'text', name: 'label', id: 'menu-edit-label')
-                                                  },
-                                                  tag.div(class: 'field') {
-                                                    tag.label {
-                                                      'Icon'
-                                                    } + tag.input(type: 'text', name: 'icon', id: 'menu-edit-icon',
-                                                                  placeholder: 'e.g. server')
-                                                  }
-                                                ])
-                                    },
-                                    tag.div(class: 'two fields', id: 'menu-edit-proxy-fields') {
-                                      safe_join([
-                                                  tag.div(class: 'field') {
-                                                    tag.label {
-                                                      'Route'
-                                                    } + tag.input(type: 'text', name: 'route', id: 'menu-edit-route',
-                                                                  placeholder: '/path')
-                                                  },
-                                                  tag.div(class: 'field') {
-                                                    tag.label {
-                                                      'URL'
-                                                    } + tag.input(type: 'text', name: 'url', id: 'menu-edit-url',
-                                                                  placeholder: 'upstream.example.com')
-                                                  }
-                                                ])
-                                    },
-                                    tag.div(class: 'field') {
-                                      tag.label { 'Type' } +
-                                      tag.select(name: 'item_type', id: 'menu-edit-type', class: 'ui dropdown',
-                                                 onchange: "menuSettingsToggleProxyFields('menu-edit')") {
-                                        safe_join([
-                                                    tag.option(value: 'group') { 'Group' },
-                                                    tag.option(value: 'proxy') { 'Proxy' }
-                                                  ])
-                                      }
-                                    }
-                                  ])
-                      }
-                    },
-                    tag.div(class: 'actions') {
-                      safe_join([
-                                  tag.button(class: 'ui red left floated button', onclick: 'menuSettingsDelete()') {
-                                    tag.i(class: 'trash icon') + ' Delete'
-                                  },
-                                  tag.button(class: 'ui button', onclick: "$('#menu-edit-modal').modal('hide')") {
-                                    'Cancel'
-                                  },
-                                  tag.button(class: 'ui green button', onclick: 'menuSettingsSave()') {
-                                    tag.i(class: 'save icon') + ' Save'
-                                  }
-                                ])
-                    }
-                  ])
-      }
-
-      # Add modal — stacked on top of settings modal
-      concat tag.div(id: 'menu-add-modal', class: 'ui small modal') {
-        safe_join([
-                    tag.i(class: 'close icon'),
-                    tag.div(class: 'header') { 'Add Menu Item' },
-                    tag.div(class: 'content') {
-                      tag.form(class: 'ui form', id: 'menu-add-form') {
-                        safe_join([
-                                    tag.div(class: 'field') {
-                                      tag.label { 'Type' } +
-                                      tag.select(name: 'item_type', id: 'menu-add-type', class: 'ui dropdown',
-                                                 onchange: "menuSettingsToggleProxyFields('menu-add')") {
-                                        safe_join([
-                                                    tag.option(value: 'group') { 'Group' },
-                                                    tag.option(value: 'proxy') { 'Proxy' }
-                                                  ])
-                                      }
-                                    },
-                                    tag.div(class: 'two fields') {
-                                      safe_join([
-                                                  tag.div(class: 'field') {
-                                                    tag.label {
-                                                      'Label'
-                                                    } + tag.input(type: 'text', name: 'label', id: 'menu-add-label')
-                                                  },
-                                                  tag.div(class: 'field') {
-                                                    tag.label {
-                                                      'Icon'
-                                                    } + tag.input(type: 'text', name: 'icon', id: 'menu-add-icon',
-                                                                  placeholder: 'e.g. server')
-                                                  }
-                                                ])
-                                    },
-                                    tag.div(class: 'two fields', id: 'menu-add-proxy-fields', style: 'display:none') {
-                                      safe_join([
-                                                  tag.div(class: 'field') {
-                                                    tag.label {
-                                                      'Route'
-                                                    } + tag.input(type: 'text', name: 'route', id: 'menu-add-route',
-                                                                  placeholder: '/path')
-                                                  },
-                                                  tag.div(class: 'field') {
-                                                    tag.label {
-                                                      'URL'
-                                                    } + tag.input(type: 'text', name: 'url', id: 'menu-add-url',
-                                                                  placeholder: 'upstream.example.com')
-                                                  }
-                                                ])
-                                    },
-                                    tag.div(class: 'field') {
-                                      tag.label { 'Parent' } +
-                                      tag.select(name: 'parent_id', id: 'menu-add-parent', class: 'ui dropdown') {
-                                        safe_join([
-                                                    tag.option(value: '') { 'Root (top level)' },
-                                                    *menu_group_options
-                                                  ])
-                                      }
-                                    }
-                                  ])
-                      }
-                    },
-                    tag.div(class: 'actions') {
-                      safe_join([
-                                  tag.button(class: 'ui button', onclick: "$('#menu-add-modal').modal('hide')") {
-                                    'Cancel'
-                                  },
-                                  tag.button(class: 'ui green button', onclick: 'menuSettingsCreate()') {
-                                    tag.i(class: 'plus icon') + ' Add'
-                                  }
-                                ])
-                    }
-                  ])
-      }
-    end
 
     def all_menu_items
       flatten_items(menu_config)
@@ -209,9 +44,7 @@ module WrapItRuby
         .map    { |item| item['route'] }
     end
 
-    def reset_menu_cache!
-      @menu_config = nil
-    end
+    def reset_menu_cache!; end
 
     extend self
 
@@ -220,16 +53,20 @@ module WrapItRuby
     def render_menu_entry(entry, top_level: false)
       if entry['items']
         if top_level
-          MenuItem(dropdown: true, icon: entry['icon']) do
+          MenuItem(dropdown: true) do
+            text entry['icon'] if entry['icon']
+            text " "
             text entry['label']
-            concat tag.i(class: 'dropdown icon')
+            Icon(name: "dropdown")
             SubMenu do
               entry['items'].each { |child| render_menu_entry(child) }
             end
           end
         else
           MenuItem do
-            concat tag.i(class: 'dropdown icon')
+            Icon(name: "dropdown")
+            text entry['icon'] if entry['icon']
+            text " "
             text entry['label']
             SubMenu do
               entry['items'].each { |child| render_menu_entry(child) }
@@ -237,7 +74,11 @@ module WrapItRuby
           end
         end
       else
-        MenuItem(href: entry['route'], icon: entry['icon']) { text entry['label'] }
+        MenuItem(href: entry['route']) {
+          text entry['icon'] if entry['icon']
+          text " "
+          text entry['label']
+        }
       end
     end
 
@@ -245,15 +86,20 @@ module WrapItRuby
     # Pass an array of MenuItem records (roots with children eager-loaded).
     # The Stimulus controller reads the JSON and initializes sortable-tree.
     def sortable_menu_tree
-      items = ::MenuItem.roots.includes(children: :children)
+      unless database_menu_available?
+        return tag.div { "No menu items. Configure MenuItem in your app or use config/menu.yml" }
+      end
+      items = WrapItRuby::MenuItem.roots.includes(children: :children)
       nodes_json = menu_items_to_nodes(items).to_json
       sort_url = wrap_it_ruby.sort_menu_setting_path(id: 'bulk')
+      edit_url_template = wrap_it_ruby.edit_menu_setting_path(id: ':id')
 
       tag.div(
         data: {
           controller: 'wrap-it-ruby--sortable-tree',
           "wrap-it-ruby--sortable-tree-nodes-value": nodes_json,
           "wrap-it-ruby--sortable-tree-sort-url-value": sort_url,
+          "wrap-it-ruby--sortable-tree-edit-url-template-value": edit_url_template,
           "wrap-it-ruby--sortable-tree-lock-root-value": false,
           "wrap-it-ruby--sortable-tree-collapse-level-value": 3
         }
@@ -278,21 +124,21 @@ module WrapItRuby
       end
     end
 
-    # Builds <option> tags for all group items (for parent dropdown in add modal).
-    # Indents sub-groups with dashes to show hierarchy.
-    def menu_group_options(items = nil, depth = 0)
-      items ||= ::MenuItem.groups.where(parent_id: nil).order(:position).includes(children: :children)
+    # Returns [label, value] pairs for all group items, suitable for
+    # f.select in the new/edit forms.  Indents sub-groups to show hierarchy.
+    def menu_group_options_for_select(items = nil, depth = 0)
+      items ||= WrapItRuby::MenuItem.groups.where(parent_id: nil).order(:position).includes(children: :children)
       items.flat_map do |item|
         prefix = "\u00A0\u00A0" * depth + (depth > 0 ? "\u2514 " : '')
-        opts = [tag.option(value: item.id) { "#{prefix}#{item.label}" }]
+        opts = [ [ "#{prefix}#{item.label}", item.id ] ]
         sub_groups = item.children.select(&:group?)
-        opts += menu_group_options(sub_groups, depth + 1) if sub_groups.any?
+        opts += menu_group_options_for_select(sub_groups, depth + 1) if sub_groups.any?
         opts
       end
     end
 
     def flatten_items(items)
-      items.flat_map { |item| [item, *flatten_items(item.fetch('items', []))] }
+      items.flat_map { |item| [ item, *flatten_items(item.fetch('items', [])) ] }
     end
 
     def menu_file
@@ -300,21 +146,21 @@ module WrapItRuby
     end
 
     def load_menu
-      @menu_config ||= if database_menu_available?
-                         load_menu_from_database
-                       else
-                         YAML.load_file(menu_file)
-                       end
+      if database_menu_available?
+        load_menu_from_database
+      else
+        YAML.load_file(menu_file)
+      end
     end
 
     def database_menu_available?
-      defined?(::MenuItem) && ::MenuItem.table_exists? && ::MenuItem.exists?
+      defined?(WrapItRuby::MenuItem) && WrapItRuby::MenuItem.table_exists? && WrapItRuby::MenuItem.exists?
     rescue StandardError
       false
     end
 
     def load_menu_from_database
-      ::MenuItem.roots.includes(children: :children).map { |item| item_to_hash(item) }
+      WrapItRuby::MenuItem.roots.includes(children: :children).map { |item| item_to_hash(item) }
     end
 
     def item_to_hash(item)

data/app/javascript/wrap_it_ruby/controllers/iframe_proxy_controller.js

@@ -14,6 +14,9 @@
 // - Breakout:      if navigation inside the iframe lands on a path
 //                  belonging to a DIFFERENT menu route, Turbo.visit
 //                  swaps the frame to the new route.
+// - Tab sync:      mirrors the iframe's <title> and favicon into the
+//                  parent page so the browser tab reflects the proxied
+//                  content.
 //
 import { Controller } from "@hotwired/stimulus"
 
@@ -24,12 +27,22 @@ export default class extends Controller {
     host:    String,  // proxy host, e.g. "github.com"
   }
 
+  #originalTitle
+  #originalIcons
+
   connect() {
+    this.#originalTitle = document.title
+    this.#originalIcons = [...document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]')]
+
     this.element.addEventListener("load", this.onLoad)
     window.addEventListener("popstate", this.onPopstate)
   }
 
   disconnect() {
+    document.title = this.#originalTitle
+    this.#removeIcons()
+    this.#originalIcons.forEach(el => document.head.appendChild(el))
+
     this.element.removeEventListener("load", this.onLoad)
     window.removeEventListener("popstate", this.onPopstate)
   }
@@ -45,6 +58,7 @@ export default class extends Controller {
       Turbo.visit(breakout, { action: "advance" })
     } else {
       this.#syncHistory(iframePath)
+      this.#syncTab()
     }
   }
 
@@ -84,4 +98,50 @@ export default class extends Controller {
       history.pushState({ iframeSrc: iframePath }, "", browserPath)
     }
   }
+
+  // Read the iframe's <title> and favicon, apply them to the parent page.
+  #syncTab() {
+    try {
+      const doc = this.element.contentDocument
+      if (!doc) return
+
+      if (doc.title) document.title = doc.title
+
+      const icon = doc.querySelector('link[rel="icon"], link[rel="shortcut icon"]')
+      if (icon) {
+        const href = this.#resolveHref(icon.getAttribute("href"))
+        if (href) this.#setFavicon(href)
+      }
+    } catch (_) {
+      // cross-origin iframe – cannot access contentDocument
+    }
+  }
+
+  // Resolve a favicon href from the iframe document.
+  // Absolute / data URIs pass through unchanged; root-relative and
+  // relative paths are routed through the proxy.
+  #resolveHref(raw) {
+    if (!raw) return null
+    if (raw.startsWith("data:") || /^https?:\/\//.test(raw) || raw.startsWith("//")) return raw
+
+    if (raw.startsWith("/")) {
+      return `/_proxy/${this.hostValue}${raw}`
+    }
+
+    // Relative path – resolve against the iframe's current directory
+    const dir = this.element.contentWindow.location.pathname.replace(/\/[^/]*$/, "/")
+    return `${dir}${raw}`
+  }
+
+  #setFavicon(href) {
+    this.#removeIcons()
+    const link = document.createElement("link")
+    link.rel = "icon"
+    link.href = href
+    document.head.appendChild(link)
+  }
+
+  #removeIcons() {
+    document.querySelectorAll('link[rel="icon"], link[rel="shortcut icon"]').forEach(el => el.remove())
+  }
 }

data/app/javascript/wrap_it_ruby/controllers/sortable_controller.js

@@ -0,0 +1,74 @@
+import { Controller } from "@hotwired/stimulus"
+import SortableJS from "sortablejs"
+
+export default class extends Controller {
+  static values = {
+    resourceName: { type: String, default: "menu_item" },
+    animation: { type: Number, default: 150 },
+  }
+
+  connect() {
+    // If reconnecting after a DOM move, skip re-init
+    if (this._disconnectTimer) {
+      clearTimeout(this._disconnectTimer)
+      this._disconnectTimer = null
+      return
+    }
+
+    this.sortable = SortableJS.create(this.element, {
+      group: {
+        name: this.resourceNameValue,
+        pull: true,
+        put: true,
+      },
+      animation: this.animationValue,
+      draggable: "> .ui.attached.segment",
+      handle: ".drag-handle",
+      forceFallback: true,
+      fallbackOnBody: true,
+      emptyInsertThreshold: 20,
+      onClone: (evt) => {
+        evt.clone.querySelectorAll("[data-controller]").forEach(el => {
+          el.removeAttribute("data-controller")
+        })
+      },
+      onEnd: (evt) => {
+        this.#persist(evt.item, evt.newIndex, evt.to)
+      },
+    })
+  }
+
+  disconnect() {
+    // Debounce: SortableJS swaps cause disconnect+reconnect in same tick.
+    // Wait before destroying so the reconnect can cancel it.
+    this._disconnectTimer = setTimeout(() => {
+      if (this.sortable) {
+        this.sortable.destroy()
+        this.sortable = null
+      }
+    }, 100)
+  }
+
+  #persist(item, newIndex, toContainer) {
+    const url = item.dataset.sortableUpdateUrl
+    if (!url) return
+
+    const parentEl = toContainer.closest("[data-sortable-update-url]")
+    const parentId = parentEl
+      ? parentEl.dataset.sortableUpdateUrl.match(/\/(\d+)$/)?.[1]
+      : null
+
+    fetch(url, {
+      method: "PATCH",
+      headers: {
+        "Content-Type": "application/json",
+        "X-CSRF-Token": this.#csrfToken,
+      },
+      body: JSON.stringify({ position: newIndex + 1, parent_id: parentId }),
+    })
+  }
+
+  get #csrfToken() {
+    return document.querySelector('meta[name="csrf-token"]')?.content
+  }
+}

data/app/javascript/wrap_it_ruby/controllers/sortable_tree_controller.js

@@ -1,14 +1,15 @@
 import { Controller } from "@hotwired/stimulus"
 import SortableTree from "sortable-tree"
-import { patch, post, destroy } from "@rails/request.js"
+import { patch } from "@rails/request.js"
 
 // Wraps the sortable-tree library as a Stimulus controller.
-// Handles drag-to-sort, click-to-edit, and CRUD via modals.
+// Handles drag-to-sort; click navigates to the edit page.
 
 export default class extends Controller {
   static values = {
     nodes: Array,
     sortUrl: String,
+    editUrlTemplate: String,
     lockRoot: { type: Boolean, default: true },
     collapseLevel: { type: Number, default: 2 },
   }
@@ -43,17 +44,14 @@ export default class extends Controller {
           : ""
         return `<span class="st-label-inner">${icon}${typeBadge}<strong>${data.title}</strong>${route}</span>`
       },
-      onChange: async ({ nodes, movedNode, srcParentNode, targetParentNode }) => {
+      onChange: async ({ nodes }) => {
         if (!this.hasSortUrlValue) return
         await this.persistTree(nodes)
       },
-      onClick: (event, node) => {
-        this.editNode(node)
+      onClick: (_event, node) => {
+        this.navigateToEdit(node)
       },
     })
-
-    // Expose global functions for the modal buttons
-    this.registerGlobalFunctions()
   }
 
   disconnect() {
@@ -61,99 +59,20 @@ export default class extends Controller {
       this.tree.destroy()
       this.tree = null
     }
-    this.unregisterGlobalFunctions()
   }
 
-  // -- Edit --
-
-  editNode(node) {
-    const data = node.data
-    this._currentEditId = data.id
-
-    document.getElementById("menu-edit-id").value = data.id
-    document.getElementById("menu-edit-label").value = data.title || ""
-    document.getElementById("menu-edit-icon").value = data.icon || ""
-    document.getElementById("menu-edit-route").value = data.route || ""
-    document.getElementById("menu-edit-url").value = data.url || ""
-    document.getElementById("menu-edit-type").value = data.item_type || "proxy"
-
-    menuSettingsToggleProxyFields("menu-edit")
-
-    $("#menu-edit-modal").modal({ allowMultiple: true }).modal("show")
+  navigateToEdit(node) {
+    if (!this.hasEditUrlTemplateValue) return
+    const url = this.editUrlTemplateValue.replace(":id", node.data.id)
+    window.location.href = url
   }
 
-  async saveNode() {
-    const id = document.getElementById("menu-edit-id").value
-    const data = {
-      label: document.getElementById("menu-edit-label").value,
-      icon: document.getElementById("menu-edit-icon").value,
-      route: document.getElementById("menu-edit-route").value,
-      url: document.getElementById("menu-edit-url").value,
-      item_type: document.getElementById("menu-edit-type").value,
-    }
-
-    await patch(`/menu/settings/${id}`, {
-      body: JSON.stringify(data),
-      contentType: "application/json",
-      responseKind: "turbo-stream",
-    })
-
-    $("#menu-edit-modal").modal("hide")
-  }
-
-  async deleteNode() {
-    const id = document.getElementById("menu-edit-id").value
-    if (!confirm("Delete this item and all its children?")) return
-
-    await destroy(`/menu/settings/${id}`, {
-      responseKind: "turbo-stream",
-    })
-
-    $("#menu-edit-modal").modal("hide")
-  }
-
-  // -- Add --
-
-  showAdd() {
-    document.getElementById("menu-add-label").value = ""
-    document.getElementById("menu-add-icon").value = ""
-    document.getElementById("menu-add-route").value = ""
-    document.getElementById("menu-add-url").value = ""
-    document.getElementById("menu-add-type").value = "group"
-    document.getElementById("menu-add-parent").value = ""
-
-    menuSettingsToggleProxyFields("menu-add")
-
-    $("#menu-add-modal").modal({ allowMultiple: true }).modal("show")
-  }
-
-  async createNode() {
-    const data = {
-      label: document.getElementById("menu-add-label").value,
-      icon: document.getElementById("menu-add-icon").value,
-      route: document.getElementById("menu-add-route").value,
-      url: document.getElementById("menu-add-url").value,
-      item_type: document.getElementById("menu-add-type").value,
-      parent_id: document.getElementById("menu-add-parent").value || null,
-    }
-
-    await post("/menu/settings", {
-      body: JSON.stringify(data),
-      contentType: "application/json",
-      responseKind: "turbo-stream",
-    })
-
-    $("#menu-add-modal").modal("hide")
-  }
-
-  // -- Sort --
-
   async persistTree(nodes) {
     const ordering = this.flattenTree(nodes)
     await patch(this.sortUrlValue, {
       body: JSON.stringify({ ordering }),
       contentType: "application/json",
-      responseKind: "turbo-stream",
+      responseKind: "html",
     })
   }
 
@@ -171,28 +90,4 @@ export default class extends Controller {
     })
     return result
   }
-
-  // -- Global functions (called by modal button onclick handlers) --
-
-  registerGlobalFunctions() {
-    window.menuSettingsSave = () => this.saveNode()
-    window.menuSettingsDelete = () => this.deleteNode()
-    window.menuSettingsCreate = () => this.createNode()
-    window.menuSettingsShowAdd = () => this.showAdd()
-    window.menuSettingsToggleProxyFields = (prefix) => {
-      const type = document.getElementById(`${prefix}-type`).value
-      const proxyFields = document.getElementById(`${prefix}-proxy-fields`)
-      if (proxyFields) {
-        proxyFields.style.display = type === "proxy" ? "" : "none"
-      }
-    }
-  }
-
-  unregisterGlobalFunctions() {
-    delete window.menuSettingsSave
-    delete window.menuSettingsDelete
-    delete window.menuSettingsCreate
-    delete window.menuSettingsShowAdd
-    delete window.menuSettingsToggleProxyFields
-  }
 }

data/app/models/wrap_it_ruby/menu_item.rb

@@ -0,0 +1,76 @@
+# frozen_string_literal: true
+
+module WrapItRuby
+  class MenuItem < ApplicationRecord
+    self.table_name = "menu_items"
+
+    acts_as_tree order: "position"
+    acts_as_list scope: :parent
+
+    scope :roots, -> { where(parent_id: nil).order(:position) }
+    scope :groups, -> { where(item_type: "group") }
+    scope :links, -> { where(item_type: "link") }
+
+    validates :label, presence: true
+    validates :icon, emoji: { allow_blank: true }
+
+    after_commit :reset_menu_cache
+
+    def group?  = item_type == "group"
+    def link?   = item_type == "link"
+
+    # Move item to a new parent and position.
+    # Handles acts_as_list scope change without triggering NOT NULL on position.
+    def move_to(new_parent_id, position)
+      return insert_at(position) if parent_id.to_s == new_parent_id.to_s
+
+      # Close gap in old scope
+      acts_as_list_class.where(scope_condition)
+                        .where("position > ?", self.position)
+                        .update_all("position = position - 1")
+
+      # Place at bottom of new scope temporarily
+      new_bottom = acts_as_list_class.where(parent_id: new_parent_id).maximum(:position).to_i + 1
+      update_columns(parent_id: new_parent_id, position: new_bottom)
+      reload
+
+      # Now insert_at works within the new scope
+      insert_at(position)
+    end
+
+    # Seed the menu_items table from a YAML menu config file.
+    def self.seed_from_yaml!(path)
+      transaction do
+        destroy_all
+        entries = YAML.load_file(path)
+        entries.each_with_index do |entry, pos|
+          create_entry!(entry, parent: nil, position: pos + 1)
+        end
+      end
+    end
+
+    def self.create_entry!(hash, parent:, position:)
+      item = create!(
+        label:     hash["label"],
+        icon:      hash["icon"],
+        route:     hash["route"],
+        url:       hash["url"],
+        item_type: hash["items"] ? "group" : (hash["type"] || "link"),
+        parent_id: parent&.id,
+        position:  position
+      )
+
+      hash.fetch("items", []).each_with_index do |child, pos|
+        create_entry!(child, parent: item, position: pos + 1)
+      end
+
+      item
+    end
+
+    private
+
+    def reset_menu_cache
+      WrapItRuby::MenuHelper.reset_menu_cache! if defined?(WrapItRuby::MenuHelper)
+    end
+  end
+end

data/app/views/wrap_it_ruby/menu_settings/edit.html.ruby

@@ -0,0 +1,60 @@
+# Edit Menu Item
+
+Style('
+  form:has(select[name="menu_item[item_type]"] option[value="group"]:checked) .field:has([name="menu_item[route]"]),
+  form:has(select[name="menu_item[item_type]"] option[value="group"]:checked) .field:has([name="menu_item[url]"]) {
+    display: none;
+  }
+')
+
+Container {
+  Header(size: :h1, icon: "pencil") {
+    text "Edit Menu Item"
+  }
+
+  Segment {
+    Form(model: @menu_item, url: update_menu_setting_path(@menu_item), method: :patch) {
+      Grid(columns: 2) {
+        Column {
+          Select(:item_type, [["Group", "group"], ["Link", "link"]], hint: "Group contains children, Link opens a website")
+        }
+        Column {
+          Select(:parent_id, [["No group (top level)", ""]] + menu_group_options_for_select, hint: "Which group this item belongs to")
+        }
+      }
+
+      Grid(columns: 2) {
+        Column {
+          TextField(:label, placeholder: "Menu item label", hint: "Display name in the menu")
+        }
+        Column {
+          EmojiField(:icon, hint: "Emoji shown next to the label")
+        }
+      }
+
+      Grid(columns: 2) {
+        Column {
+          TextField(:route, placeholder: "/path", hint: "The URL to visit after clicking, e.g. #{request.base_url}/git")
+        }
+        Column {
+          TextField(:url, placeholder: "upstream.example.com", hint: "The web address for this website, e.g. github.com")
+        }
+      }
+
+      Divider(hidden: true)
+
+      Button(color: "green", type: "submit") {
+        Icon(name: "save")
+        text " Save"
+      }
+      Button(href: menu_settings_path) { text "Cancel" }
+    }
+  }
+
+  Divider(hidden: true)
+
+  ButtonTo(url: destroy_menu_setting_path(@menu_item), method: :delete, color: "red", confirm: "Delete this item and all its children?") {
+    Icon(name: "trash")
+    text " Delete"
+  }
+}

data/app/views/wrap_it_ruby/menu_settings/index.html.ruby

@@ -0,0 +1,86 @@
+Container {
+  Header(size: :h1, icon: "bars") {
+    text "Menu Settings"
+  }
+
+  Wrapper(id: "menu-sortable",
+    html_class: "ui segments",
+    data: {
+      controller: "wrap-it-ruby--sortable",
+      sortable_animation_value: "150",
+      sortable_resource_name_value: "menu_item"
+    }) {
+    @menu_items.each do |item|
+      if item.group?
+        Accordion(attached: true, data: { sortable_update_url: update_menu_setting_path(item) }) { |a|
+          a.title {
+            Icon(name: "arrows alternate", class: "drag-handle")
+            text item.icon if item.icon
+            text " "
+            text item.label
+            Link(href: edit_menu_setting_path(item), class: "edit-link") { Icon(name: "pencil") }
+          }
+          Wrapper(html_class: "ui segments",
+            data: {
+              controller: "wrap-it-ruby--sortable",
+              sortable_animation_value: "150",
+              sortable_resource_name_value: "menu_item"
+            }) {
+            item.children.each do |child|
+              if child.group?
+                Accordion(attached: true, data: { sortable_update_url: update_menu_setting_path(child) }) { |a2|
+                  a2.title {
+                    Icon(name: "arrows alternate", class: "drag-handle")
+                    text child.icon if child.icon
+                    text " "
+                    text child.label
+                    Link(href: edit_menu_setting_path(child), class: "edit-link") { Icon(name: "pencil") }
+                  }
+                  Wrapper(html_class: "ui segments",
+                    data: {
+                      controller: "wrap-it-ruby--sortable",
+                      sortable_animation_value: "150",
+                      sortable_resource_name_value: "menu_item"
+                    }) {
+                    child.children.each do |grandchild|
+                      Segment(attached: true, data: { sortable_update_url: update_menu_setting_path(grandchild) }) {
+                        Icon(name: "arrows alternate", class: "drag-handle")
+                        text grandchild.icon if grandchild.icon
+                        text " "
+                        text grandchild.label
+                        Link(href: edit_menu_setting_path(grandchild), class: "edit-link") { Icon(name: "pencil") }
+                      }
+                    end
+                  }
+                }
+              else
+                Segment(attached: true, data: { sortable_update_url: update_menu_setting_path(child) }) {
+                  Icon(name: "arrows alternate", class: "drag-handle")
+                  text child.icon if child.icon
+                  text " "
+                  text child.label
+                  Link(href: edit_menu_setting_path(child), class: "edit-link") { Icon(name: "pencil") }
+                }
+              end
+            end
+          }
+        }
+      else
+        Segment(attached: true, data: { sortable_update_url: update_menu_setting_path(item) }) {
+          Icon(name: "arrows alternate", class: "drag-handle")
+          text item.icon if item.icon
+          text " "
+          text item.label
+          Link(href: edit_menu_setting_path(item), class: "edit-link") { Icon(name: "pencil") }
+        }
+      end
+    end
+  }
+
+  Divider(hidden: true)
+
+  Button(color: "green", href: new_menu_setting_path) {
+    Icon(name: "plus")
+    text " Add Item"
+  }
+}

data/app/views/wrap_it_ruby/menu_settings/new.html.ruby

@@ -0,0 +1,53 @@
+# Add Menu Item
+
+Style('
+  form:has(select[name="menu_item[item_type]"] option[value="group"]:checked) .field:has([name="menu_item[route]"]),
+  form:has(select[name="menu_item[item_type]"] option[value="group"]:checked) .field:has([name="menu_item[url]"]) {
+    display: none;
+  }
+')
+
+Container {
+  Header(size: :h1, icon: "plus") {
+    text "Add Menu Item"
+  }
+
+  Segment {
+    Form(model: @menu_item, url: create_menu_setting_path, method: :post) {
+      Grid(columns: 2) {
+        Column {
+          Select(:item_type, [["Group", "group"], ["Link", "link"]], hint: "Group contains children, Link opens a website")
+        }
+        Column {
+          Select(:parent_id, [["No group (top level)", ""]] + menu_group_options_for_select, hint: "Which group this item belongs to")
+        }
+      }
+
+      Grid(columns: 2) {
+        Column {
+          TextField(:label, placeholder: "Menu item label", hint: "Display name in the menu")
+        }
+        Column {
+          EmojiField(:icon, hint: "Emoji shown next to the label")
+        }
+      }
+
+      Grid(columns: 2) {
+        Column {
+          TextField(:route, placeholder: "/path", hint: "The URL to visit after clicking, e.g. #{request.base_url}/git")
+        }
+        Column {
+          TextField(:url, placeholder: "upstream.example.com", hint: "The web address for this website, e.g. github.com")
+        }
+      }
+
+      Divider(hidden: true)
+
+      Button(color: "green", type: "submit") {
+        Icon(name: "plus")
+        text " Add"
+      }
+      Button(href: menu_settings_path) { text "Cancel" }
+    }
+  }
+}

data/config/importmap.rb

@@ -8,3 +8,7 @@ pin_all_from WrapItRuby::Engine.root.join('app/javascript/wrap_it_ruby/controlle
 # Sortable tree + request helpers
 pin 'sortable-tree', to: 'https://esm.sh/sortable-tree@0.7.6'
 pin '@rails/request.js', to: 'https://ga.jspm.io/npm:@rails/request.js@0.0.11/src/index.js'
+
+# Stimulus Sortable (drag-and-drop reordering)
+pin 'sortablejs', to: 'https://ga.jspm.io/npm:sortablejs@1.15.6/modular/sortable.esm.js'
+pin '@stimulus-components/sortable', to: 'https://ga.jspm.io/npm:@stimulus-components/sortable@5.0.1/dist/stimulus-sortable.mjs'

data/config/routes.rb

@@ -2,9 +2,11 @@
 
 WrapItRuby::Engine.routes.draw do
   get    'menu/settings',          to: 'menu_settings#index',   as: :menu_settings
-  post   'menu/settings',          to: 'menu_settings#create',  as: :create_menu_setting
-  patch  'menu/settings/:id/sort', to: 'menu_settings#sort',    as: :sort_menu_setting
-  patch  'menu/settings/:id',      to: 'menu_settings#update',  as: :update_menu_setting
+  get    'menu/settings/new',      to: 'menu_settings#new',    as: :new_menu_setting
+  post   'menu/settings',          to: 'menu_settings#create', as: :create_menu_setting
+  get    'menu/settings/:id/edit', to: 'menu_settings#edit',   as: :edit_menu_setting
+  patch  'menu/settings/:id',      to: 'menu_settings#update', as: :update_menu_setting
+  patch  'menu/settings/:id/sort', to: 'menu_settings#sort',   as: :sort_menu_setting
   delete 'menu/settings/:id',      to: 'menu_settings#destroy', as: :destroy_menu_setting
 
   get '/*path', to: 'proxy#show', constraints: lambda { |req|

data/lib/wrap_it_ruby/engine.rb

@@ -1,6 +1,7 @@
 # frozen_string_literal: true
 
 require 'ui'
+require 'emoji_validator'
 require 'wrap_it_ruby/middleware/proxy_middleware'
 require 'wrap_it_ruby/middleware/root_relative_proxy_middleware'
 require 'wrap_it_ruby/middleware/script_injection_middleware'
@@ -41,6 +42,14 @@ module WrapItRuby
       app.config.assets.paths << Ui::Engine.root.join('app/assets')
     end
 
+    # Append engine migrations to the host app's migration paths.
+    initializer 'wrap_it_ruby.migrations' do |app|
+      config.paths["db/migrate"].expanded.each do |expanded_path|
+        app.config.paths["db/migrate"] << expanded_path
+        ActiveRecord::Migrator.migrations_paths << expanded_path
+      end
+    end
+
     # Make engine helpers (MenuHelper, IframeHelper) available in host app views.
     # MenuHelper#render_menu depends on ComponentHelper from rails-active-ui,
     # which is already injected into ActionView by the Ui engine.

data/lib/wrap_it_ruby/middleware/proxy_middleware.rb

@@ -27,7 +27,6 @@ module WrapItRuby
         authorization
         cache-control
         content-type
-        content-length
         cookie
         if-match
         if-modified-since
@@ -36,6 +35,7 @@ module WrapItRuby
         if-unmodified-since
         pragma
         range
+        user-agent
         x-requested-with
       ].to_set.freeze
 
@@ -148,9 +148,10 @@ module WrapItRuby
           headers.add(name, value)
         end
 
-        # Also forward content-type/content-length from Rack env
-        headers.add('content-type', env['CONTENT_TYPE'])     if env['CONTENT_TYPE']
-        headers.add('content-length', env['CONTENT_LENGTH']) if env['CONTENT_LENGTH']
+        # Forward content-type from Rack env (Rack stores it without HTTP_ prefix)
+        # Note: content-length is NOT forwarded — Async::HTTP::Client sets it
+        # automatically from the body, and duplicates cause nginx to return 400.
+        headers.add('content-type', env['CONTENT_TYPE']) if env['CONTENT_TYPE']
 
         # 2. Modify: nothing to modify at this stage (cookies pass through
         #    as-is since the .cia.net domain covers both proxy and upstream)

data/lib/wrap_it_ruby/middleware/root_relative_proxy_middleware.rb

@@ -7,15 +7,22 @@ module WrapItRuby
     #
     # Detects the proxy host from two sources (in priority order):
     #
-    #   1. X-Proxy-Host header -- set by the interception script on fetch/XHR.
-    #      Signals the request came from inside the proxy. The actual upstream
-    #      host is resolved from the Referer header.
-    #
-    #   2. Referer header -- contains /_proxy/{host}/... for requests where the
+    #   1. Referer header -- contains /_proxy/{host}/... for requests where the
     #      browser sends the full path. Works for both scripted requests and
     #      asset loads (<img>, <link>, <script>).
     #
-    # Rewrites PATH_INFO to /_proxy/{host}{path} so ProxyMiddleware handles it.
+    #   2. X-Proxy-Host header -- set by the interception script on fetch/XHR.
+    #      Signals the request came from inside the proxy.
+    #
+    # For programmatic requests (fetch/XHR) that carry X-Proxy-Host, the path
+    # is rewritten inline to /_proxy/{host}{path}.
+    #
+    # For browser-initiated requests (script/link/img tags), a 307 redirect is
+    # returned instead.  This ensures the browser's URL for the resource retains
+    # the /_proxy/{host} prefix, which keeps the Referer chain intact for any
+    # sub-resources loaded by that resource (e.g. a JS module that imports
+    # another module via a root-relative path).
+    #
     # Must be inserted BEFORE ProxyMiddleware in the Rack stack.
     #
     class RootRelativeProxyMiddleware
@@ -33,7 +40,21 @@ module WrapItRuby
         unless path.start_with?(PROXY_PREFIX)
           host = extract_proxy_host(env)
           if host
-            env["PATH_INFO"] = "#{PROXY_PREFIX}/#{host}#{path}"
+            proxy_path = "#{PROXY_PREFIX}/#{host}#{path}"
+
+            if env[PROXY_HOST_HEADER]
+              # Programmatic request (fetch/XHR) — rewrite inline.
+              # interception.js already sets the correct Referer and
+              # X-Proxy-Host header so the chain won't break.
+              env["PATH_INFO"] = proxy_path
+            else
+              # Browser-initiated request — redirect so the browser's URL
+              # (and thus Referer for any sub-resource loads) retains the
+              # /_proxy/{host} prefix.
+              query = env["QUERY_STRING"]
+              proxy_path += "?#{query}" unless query.nil? || query.empty?
+              return [307, { "location" => proxy_path }, []]
+            end
           end
         end
 

data/lib/wrap_it_ruby/version.rb

@@ -1,5 +1,5 @@
 # frozen_string_literal: true
 
 module WrapItRuby
-  VERSION = "0.3.2"
+  VERSION = "0.3.4"
 end

metadata

@@ -1,13 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: wrap_it_ruby
 version: !ruby/object:Gem::Version
-  version: 0.3.2
+  version: 0.3.4
 platform: ruby
 authors:
 - Nathan Kidd
+autorequire:
 bindir: bin
 cert_chain: []
-date: 1980-01-01 00:00:00.000000000 Z
+date: 2026-03-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -93,6 +94,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: '0'
+- !ruby/object:Gem::Dependency
+  name: emoji-validator-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
 description: Wraps upstream web applications in an iframe via a same-origin reverse
   proxy. Provides Rack middleware for proxying, script injection, and root-relative
   URL rewriting, plus Stimulus controllers for browser history synchronisation.
@@ -110,9 +125,12 @@ files:
 - app/helpers/wrap_it_ruby/iframe_helper.rb
 - app/helpers/wrap_it_ruby/menu_helper.rb
 - app/javascript/wrap_it_ruby/controllers/iframe_proxy_controller.js
+- app/javascript/wrap_it_ruby/controllers/sortable_controller.js
 - app/javascript/wrap_it_ruby/controllers/sortable_tree_controller.js
-- app/views/wrap_it_ruby/menu_settings/_tree.html.erb
-- app/views/wrap_it_ruby/menu_settings/index.html.erb
+- app/models/wrap_it_ruby/menu_item.rb
+- app/views/wrap_it_ruby/menu_settings/edit.html.ruby
+- app/views/wrap_it_ruby/menu_settings/index.html.ruby
+- app/views/wrap_it_ruby/menu_settings/new.html.ruby
 - app/views/wrap_it_ruby/proxy/show.html.ruby
 - config/importmap.rb
 - config/routes.rb
@@ -130,6 +148,7 @@ homepage: https://github.com/n-at-han-k/wrap-it-ruby
 licenses:
 - Apache-2.0
 metadata: {}
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -144,7 +163,8 @@ required_rubygems_version: !ruby/object:Gem::Requirement
     - !ruby/object:Gem::Version
       version: '0'
 requirements: []
-rubygems_version: 3.7.2
+rubygems_version: 3.3.15
+signing_key:
 specification_version: 4
 summary: Rails engine for iframe-based reverse proxy portals
 test_files: []

data/app/views/wrap_it_ruby/menu_settings/_tree.html.erb

@@ -1 +0,0 @@
-<div id="menu-tree-container"><%= sortable_menu_tree %></div>

data/app/views/wrap_it_ruby/menu_settings/index.html.erb

@@ -1 +0,0 @@
-<%= render partial: "wrap_it_ruby/menu_settings/tree" %>