spree_admin 5.0.0.rc1

data/app/views/spree/admin/page_blocks/forms/_buttons.html.erb

@@ -0,0 +1,13 @@
+<%= render 'spree/admin/page_blocks/forms/link', f: f %>
+
+<div class="form-group">
+  <%= f.label :preferred_button_style_1, Spree.t('admin.page_builder.button_style') %>
+  <%= f.select :preferred_button_style_1, options_for_select(['primary', 'secondary'], @page_block.preferred_button_style_1), {  }, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment, Spree.t('admin.page_builder.button_alignment') %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_buy_buttons.html.erb

@@ -0,0 +1,10 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_heading.html.erb

@@ -0,0 +1,28 @@
+<div class="trix-container">
+  <%= f.rich_text_area :text, data: {
+    action: 'trix-change->auto-submit#submit'
+  }, class: 'mb-3' %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_size %>
+    <%= f.select :preferred_size, options_for_select(['small', 'medium', 'large'], @page_block.preferred_size), {  }, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <% unless @page_block.section.is_a? Spree::PageSections::Video %>
+    <div class="form-group">
+      <%= f.label :preferred_text_alignment %>
+      <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+    </div>
+
+    <div class="form-group">
+      <%= f.label :preferred_container_alignment %>
+      <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+    </div>
+  <% end %>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max heading width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_image.html.erb

@@ -0,0 +1 @@
+<%= render 'active_storage/upload_form', form: f, field_name: :asset, width: 512, height: 512, auto_submit: true %>

data/app/views/spree/admin/page_blocks/forms/_link.html.erb

@@ -0,0 +1,19 @@
+<%= f.fields_for :link do |lf| %>
+  <div class="form-group">
+    <%= lf.label :linkable_type, 'Link' %>
+    <%= lf.select :linkable_type, @page_block.allowed_linkable_types, { include_blank: false }, { class: 'custom-select mb-3', data: { action: 'auto-submit#submit' } } %>
+    <div id="linkable_type_dropdown">
+      <%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: lf.object, form_name: 'page_block[link_attributes]' %>
+    </div>
+  </div>
+
+  <div class="form-group">
+    <%= lf.label :label %>
+    <%= lf.text_field :label, class: 'form-control', data: { action: 'blur->auto-submit#submit' }, placeholder: 'eg. About us', required: true %>
+  </div>
+
+  <div class="custom-control custom-checkbox mb-5">
+    <%= lf.check_box :open_in_new_tab, class: 'custom-control-input', data: { action: 'auto-submit#submit' } %>
+    <%= lf.label :open_in_new_tab, class: 'custom-control-label' %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_mega_nav.html.erb

@@ -0,0 +1,14 @@
+<h5 class="font-weight-bold"><%= Spree.t(:title_link) %></h5>
+<%= render 'spree/admin/page_blocks/forms/link', f: f %>
+
+<%= render 'spree/admin/page_links/list', parent: @page_block, show_add_link_button: true %>
+
+<h5 class="font-weight-bold"><%= Spree.t(:featured_taxon) %></h5>
+<div class="form-group">
+  <%= tom_select_tag 'page_block[preferred_featured_taxon_id]',
+    active_option: @page_block.preferred_featured_taxon_id,
+    class: 'w-100',
+    url: spree.admin_taxons_select_options_path(format: :json),
+    select_data: { action: 'auto-submit#submit' },
+    include_blank: "" %>
+</div>

data/app/views/spree/admin/page_blocks/forms/_mega_nav_with_subcategories.html.erb

@@ -0,0 +1,9 @@
+<h5 class="font-weight-bold"><%= Spree.t(:category) %></h5>
+<div class="form-group">
+  <%= tom_select_tag 'page_block[preferred_taxon_id]', active_option: @page_block.preferred_taxon_id, class: 'w-100', url: spree.admin_taxons_select_options_path(format: :json), select_data: { action: 'auto-submit#submit' } %>
+</div>
+
+<h5 class="font-weight-bold"><%= Spree.t(:featured_taxon) %></h5>
+<div class="form-group">
+  <%= tom_select_tag 'page_block[preferred_featured_taxon_id]', active_option: @page_block.preferred_featured_taxon_id, class: 'w-100', url: spree.admin_taxons_select_options_path(format: :json), select_data: { action: 'auto-submit#submit' } %>
+</div>

data/app/views/spree/admin/page_blocks/forms/_nav.html.erb

@@ -0,0 +1,6 @@
+<div class="form-group">
+  <%= f.label :preferred_label %>
+  <%= f.text_field :preferred_label, data: { action: 'auto-submit#submit' }, class: 'form-control' %>
+</div>
+
+<%= render 'spree/admin/page_links/list', parent: @page_block, show_add_link_button: true %>

data/app/views/spree/admin/page_blocks/forms/_newsletter_form.html.erb

@@ -0,0 +1,20 @@
+<div class="form-group">
+  <%= f.label :preferred_button_text %>
+  <%= f.text_field :preferred_button_text, data: { action: 'auto-submit#submit' }, class: 'form-control' %>
+</div>
+
+<div class="form-group">
+  <%= f.label :preferred_placeholder %>
+  <%= f.text_field :preferred_placeholder, data: { action: 'auto-submit#submit' }, class: 'form-control' %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_justify %>
+    <%= f.select :preferred_justify, options_for_select(['start', 'center', 'end'], @page_block.preferred_justify), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+  <div class="form-group">
+    <%= f.label :preferred_button_style %>
+    <%= f.select :preferred_button_style, options_for_select(['primary', 'secondary'], @page_block.preferred_button_style), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_price.html.erb

@@ -0,0 +1,15 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_quantity_selector.html.erb

@@ -0,0 +1,10 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_share.html.erb

@@ -0,0 +1,5 @@
+<div class="trix-container">
+  <%= f.rich_text_area :text, data: {
+    action: 'trix-change->auto-submit#submit'
+  }, class: 'mb-3' %>
+</div>

data/app/views/spree/admin/page_blocks/forms/_subheading.html.erb

@@ -0,0 +1,26 @@
+<div class="trix-container">
+  <%= f.rich_text_area :text, data: {
+    action: 'trix-change->auto-submit#submit'
+  }, class: 'mb-3' %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_size %>
+    <%= f.select :preferred_size, options_for_select(['small', 'medium', 'large'], @page_block.preferred_size), {  }, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max subheading width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_text.html.erb

@@ -0,0 +1,21 @@
+<div class="trix-container">
+  <%= f.rich_text_area :text, data: {
+    action: 'trix-change->auto-submit#submit'
+  }, class: 'mb-3' %>
+</div>
+
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_title.html.erb

@@ -0,0 +1,20 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_size %>
+    <%= f.select :preferred_size, options_for_select(['small', 'medium', 'large'], @page_block.preferred_size), {  }, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_text_alignment %>
+    <%= f.select :preferred_text_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_text_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%',_label: 'Max heading width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/forms/_variant_picker.html.erb

@@ -0,0 +1,10 @@
+<% content_for(:design_tab) do %>
+  <div class="form-group">
+    <%= f.label :preferred_container_alignment %>
+    <%= f.select :preferred_container_alignment, options_for_select(['left', 'center', 'right'], @page_block.preferred_container_alignment), {}, { class: 'custom-select', data: {  action: 'auto-submit#submit' } } %>
+  </div>
+
+  <%= render 'spree/admin/page_builder/labeled_range_input',
+    f: f, field: :preferred_width_desktop, min: 1, max: 100, unit: '%', _label: 'Max text width on desktop'
+  %>
+<% end %>

data/app/views/spree/admin/page_blocks/move_higher.turbo_stream.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.replace dom_id(@page_block.section) do %>
+  <%= render 'spree/admin/page_builder/sidebar_section', section: @page_block.section %>
+<% end %>
+<%= refresh_theme_preview %>

data/app/views/spree/admin/page_blocks/move_lower.turbo_stream.erb

@@ -0,0 +1,4 @@
+<%= turbo_stream.replace dom_id(@page_block.section) do %>
+  <%= render 'spree/admin/page_builder/sidebar_section', section: @page_block.section %>
+<% end %>
+<%= refresh_theme_preview %>

data/app/views/spree/admin/page_blocks/show.html.erb

@@ -0,0 +1 @@
+<%= render 'spree/admin/page_builder/sidebar_block', block: @page_block %>

data/app/views/spree/admin/page_blocks/update.turbo_stream.erb

@@ -0,0 +1,6 @@
+<%= refresh_theme_preview(@page_block.section, @page_block) %>
+<% if @page_block.respond_to?(:link) %>
+  <%= turbo_stream.update :linkable_type_dropdown do %>
+    <%= render 'spree/admin/page_links/linkable_type_dropdown', page_link: @page_block.link, form_name: 'page_block[link_attributes]' %>
+  <% end %>
+<% end %>

data/app/views/spree/admin/page_builder/_add_block.html.erb

@@ -0,0 +1,20 @@
+<%= form_for section.blocks.new, url: spree.admin_page_section_blocks_path(section), html: { class: 'list-group-item sidebar-page-block px-0 py-0 border-0 rounded'}, data: { controller: 'block-form', block_form_target: :form } do |f| %>
+  <%= f.hidden_field :type, data: { block_form_target: 'type' } %>
+
+  <button class="btn btn-sm btn-link d-flex-inline" data-toggle="dropdown">
+    <%= icon("circle-plus") %>
+    Add block
+  </button>
+  <div class="dropdown-menu p-1">
+    <% section.available_blocks_to_add.each do |block_class| %>
+      <a href="#" class="dropdown-item btn-sm"
+          data-action="click->block-form#addBlock"
+        data-block-form-type-param="<%= block_class %>"
+        >
+        <% block_instance = block_class.new %>
+        <%= icon block_instance.icon_name, height: 18, class: 'mr-2' if block_class.new.icon_name.present? %>
+        <%= block_instance.display_name.presence || block_class.to_s.demodulize.titleize %>
+      </a>
+    <% end %>
+  </div>
+<% end %>

data/app/views/spree/admin/page_builder/_color_palette.html.erb

@@ -0,0 +1,17 @@
+<% active ||= false %>
+<div
+  data-action="click->color-palette#selectPalette"
+  data-color-palette-primary-color-param="<%= primary_color %>"
+  data-color-palette-text-color-param="<%= text_color %>"
+  data-color-palette-button-text-color-param="<%= button_text_color %>"
+  data-color-palette-border-color-param="<%= border_color %>"
+  data-color-palette-background-color-param="<%= background_color %>"
+  class="mb-3 d-block w-100 rounded overflow-hidden border cursor-pointer <% if active %>border-2 border-primary<% end %>" style="height: 40px">
+  <div class="row mx-0 h-100">
+    <div class="col" style="background-color: <%= primary_color %>"></div>
+    <div class="col" style="background-color: <%= text_color %>"></div>
+    <div class="col" style="background-color: <%= button_text_color %>"></div>
+    <div class="col" style="background-color: <%= border_color %>"></div>
+    <div class="col" style="background-color: <%= background_color %>"></div>
+  </div>
+</div>

data/app/views/spree/admin/page_builder/_color_picker.html.erb

@@ -0,0 +1,26 @@
+<% color_picker_value ||= value || @theme_preview&.try(:send, field) %>
+
+<div
+  class="mb-4 form-group"
+  data-controller="color-picker"
+  data-color-picker-clear-value="<%= defined?(clear) ? clear : false %>"
+  data-color-picker-default-color-value="<%= color_picker_value %>">
+  <div class="d-flex align-items-center">
+    <%= f.hidden_field field, class: 'form-control mr-2', data: {
+      'color-picker-target': 'input',
+      'color-palette-target': field.to_s.camelize(:lower),
+      action: action,
+    }, value: value %>
+    <div>
+      <label class="mb-0"><%= label %></label>
+      <br />
+      <span data-color-picker-target="value" class="text-muted">
+        <%= color_picker_value&.upcase || Spree.t('admin.page_builder.not_set') %>
+      </span>
+    </div>
+    <div class="ml-auto d-flex align-items-center" style="width:40px">
+      <div data-color-picker-target="picker" class="border d-inline-block rounded-circle <% unless color_picker_value.present? %>checkered-background<% end %>" style="height: 40px;width: 40px; background-color: <%= color_picker_value %>;">
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/page_builder/_header.html.erb

@@ -0,0 +1,99 @@
+<header id="page-builder-header" class="fixed-top">
+  <nav class="navbar navbar-expand-lg">
+    <%= link_to spree.admin_themes_path, class: 'btn btn-light with-tip px-2', title: 'Go back to dashboard' do %>
+      <%= icon('x', class: 'mr-0') %>
+    <% end %>
+    <div class="px-3">
+      <span class="text-muted mr-1"><%= Spree.t(:theme) %>:</span>
+      <strong class="mr-1"><%= @theme.name %></strong>
+      &nbsp;
+      <% if @theme.default? %>
+        <span class="badge badge-success">
+          <%= icon('check') %>
+          Live
+        </span>
+      <% else %>
+        <span class="badge badge-warning">Draft</span>
+      <% end %>
+    </div>
+    <%= render 'spree/admin/page_builder/pages_dropdown' %>
+
+    <ul class="nav nav-pills" role="tablist">
+      <% if @page.custom? %>
+        <li class="nav-item" role="presentation" data-toggle="modal" data-target="#modal">
+          <%= link_to_with_icon 'settings', Spree.t(:page_settings), spree.edit_admin_page_path(@page.id), class: 'btn btn-light', data: { turbo_frame: 'dialog_modal' } %>
+        </li>
+      <% else %>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link active"
+                        title="Page sections"
+                        data-toggle="tab"
+                        data-target="#sections"
+                        type="button"
+                        role="tab"
+                        aria-controls="sections"
+                        aria-selected="true"
+                        data-trigger="hover"
+                        id="sidebar-icon-page">
+            <%= icon 'section', class: 'mr-0' %>
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link"
+                  title="Theme"
+                  data-toggle="tab"
+                  data-target="#colors"
+                  type="button"
+                  role="tab"
+                  aria-controls="theme"
+                  aria-selected="false"
+                  data-trigger="hover"
+                  id="sidebar-icon-colors">
+            <%= icon 'palette', class: 'mr-0' %>
+          </button>
+        </li>
+        <li class="nav-item" role="presentation">
+          <button class="nav-link"
+                title="Fonts"
+                type="button"
+                data-toggle="tab"
+                data-target="#fonts"
+                type="button"
+                role="tab"
+                aria-controls="fonts"
+                aria-selected="false"
+                data-trigger="hover"
+                id="sidebar-icon-fonts">
+            <%= icon 'typography', class: 'mr-0' %>
+          </button>
+        </li>
+      <% end %>
+    </ul>
+
+    <ul class="nav nav-pills ml-auto" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="nav-link with-tip" type="button"
+                title="Mobile"
+                data-trigger="hover"
+                data-action="click->page-builder#setResponsiveBreakpoint"
+                data-page-builder-target="mobileButton"
+                data-page-builder-breakpoint-param="mobile">
+          <%= icon 'device-mobile', class: 'mr-0' %>
+        </button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link active with-tip" type="button" 
+                title="Desktop"
+                data-action="click->page-builder#setResponsiveBreakpoint"
+                data-page-builder-breakpoint-param="desktop"
+                data-trigger="hover"
+                data-page-builder-target="desktopButton">
+          <%= icon 'device-laptop', class: 'mr-0' %>
+        </button>
+      </li>
+    </ul>
+
+    <%= link_to_with_icon 'eye', Spree.t(:preview), @page.preview_url(@theme_preview, @page_preview), class: 'btn btn-light ml-auto', target: '_blank' %>
+    <%= turbo_save_button_tag(@theme.default? ? Spree.t('actions.publish') : Spree.t('actions.save')) %>
+  </nav>
+</header>

data/app/views/spree/admin/page_builder/_labeled_range_input.html.erb

@@ -0,0 +1,10 @@
+<div class="mb-4 form-group">
+  <div data-controller="better-slider">
+    <label><%= _label %>: <span data-better-slider-target="currentValueLabel"></span><%= unit %></label>
+    <div class="flex flex-row w-full">
+      <span class="mr-2"><%= min %><%= unit %></span>
+      <%= f.range_field field, class: "custom-range", min: min, max: max, step: 1, data: {'better-slider-target': 'rangeInput', action: 'change->auto-submit#submit'} %>
+      <span class="ml-2"><%= max %><%= unit  %></span>
+    </div>
+  </div>
+</div>

data/app/views/spree/admin/page_builder/_pages_dropdown.html.erb

@@ -0,0 +1,23 @@
+<% if @page.custom? %>
+  <div class="d-flex justify-content-center h-100 align-items-center px-3">
+    <p class="mb-0 font-weight-bold"><%= truncate(@page.display_name, length: 150) %></p>
+  </div>
+<% else %>
+  <div class="dropdown h-100" id="pages_dropdown">
+    <button class="btn btn-light" type="button" data-toggle="dropdown" aria-expanded="false">
+      <span class="d-flex align-items-center pr-5">
+        <%= icon @page.icon_name, class: 'mr-2' %>
+        <%= @page.display_name %>
+      </span>
+      <%= icon 'selector', class: 'mr-0 ml-2 mb-0 text-muted' %>
+    </button>
+    <div class="dropdown-menu" style="min-width: 300px">
+      <% @theme.pages.standard.order(name: :asc).find_all(&:customizable?).each do |page| %>
+        <%= active_link_to spree.edit_admin_theme_path(@theme, theme_preview_id: @theme_preview.id, page_id: page.id), class: 'dropdown-item', active: @page == page do %>
+          <%= icon page.icon_name, class: 'mr-2' %>
+          <%= page.display_name %>
+        <% end %>
+      <% end %>
+    </div>
+  </div>
+<% end %>

data/app/views/spree/admin/page_builder/_range_input.html.erb

@@ -0,0 +1,12 @@
+<% label ||= nil %>
+<% label_for_min_value ||= nil %>
+<% action ||= 'change->auto-submit#submit' %>
+<div class="mb-4 form-group">
+  <div data-controller="better-slider" data-better-slider-label-for-min-value="<%= label_for_min_value %>" data-better-slider-unit-value="<%= unit %>">
+    <label><%= label.presence || field.to_s.humanize %></label>
+    <div class="flex flex-row w-full">
+      <%= f.range_field field, class: "custom-range", min: min, max: max, step: 1, data: {'better-slider-target': 'rangeInput', action: action} %>
+    </div>
+    <span data-better-slider-target="currentValueLabel"></span>
+  </div>
+</div>

data/app/views/spree/admin/page_builder/_sidebar.html.erb

@@ -0,0 +1,14 @@
+<aside id="page-builder-sidebar" class="fixed-top h-100 overflow-auto pb-5">
+  <div class="tab-content mb5">
+    <div class="tab-pane fade show active" id="sections" role="tabpanel" aria-labelledby="sidebar-icon-page">
+      <%= render 'spree/admin/page_builder/sidebar_sections' %>
+      <%= render 'spree/admin/page_builder/sidebar_sections_toolbar' %>
+    </div>
+    <div class="tab-pane fade" role="tabpanel" aria-labelledby="sidebar-icon-colors" id="colors">
+      <%= render 'spree/admin/page_builder/sidebar_colors' %>
+    </div>
+    <div class="tab-pane fade" role="tabpanel" aria-labelledby="sidebar-icon-fonts" id="fonts">
+      <%= render 'spree/admin/page_builder/sidebar_fonts' %>
+    </div>
+  </div>
+</aside>

data/app/views/spree/admin/page_builder/_sidebar_block.html.erb

@@ -0,0 +1,29 @@
+<% if block.persisted? %>
+  <%= turbo_frame_tag dom_id(block), class: 'list-group-item sidebar-page-block px-0 py-0 border-0 rounded',
+                                     data: {
+                                       action: 'mouseover->page-builder#toggleHighlightElement mouseout->page-builder#toggleHighlightElement',
+                                       page_builder_editor_id_param: "block-#{block.id}",
+                                       sortable_update_url: spree.admin_page_section_block_path(block.section, block, format: :turbo_stream)
+                                     } do %>
+    <div class="d-flex align-items-center justify-content-between sidebar-block-title p-1 rounded-sm">
+      <div class="d-flex align-items-center flex-fill">
+        <%= icon "#{block.icon_name}", class: 'mr-2' if block.icon_name.present? %>
+        <%= link_to block.display_name, edit_admin_page_section_block_path(block.section, block),
+                    class: 'block-edit-link flex-fill text-dark',
+                    data: {
+                      turbo_frame: :page_sidebar,
+                      action: 'click->page-builder#makeOverlayActive',
+                      page_builder_editor_id_param: "block-#{block.id}"
+                    }
+        %>
+      </div>
+      <div class="d-flex align-items-center d-none">
+        <% if block.section.can_sort_blocks? %>
+          <button class="btn btn-sm pr-0 handle hover-gray-200 h-100 mr-1 px-1 handle-block">
+            <%= icon('grip-vertical', class: 'mr-0') %>
+          </button>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/views/spree/admin/page_builder/_sidebar_colors.html.erb

@@ -0,0 +1,84 @@
+<div id="sidebar-colors">
+  <h6 class="sidebar-header">
+    <%= Spree.t(:theme) %>
+  </h6>
+
+  <%= form_for @theme_preview, as: :theme, url: spree.admin_theme_path(@theme_preview), method: :put, data: { 'page-builder-target': 'form' } do |f| %>
+    <ul class="nav nav-pills nav-fill m-3" id="pills-tab" role="tablist">
+      <li class="nav-item" role="presentation">
+        <button class="btn nav-link w-100 active" id="pills-home-tab" data-toggle="pill" data-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Color scheme</button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="btn nav-link w-100" id="pills-profile-tab" data-toggle="pill" data-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Elements</button>
+      </li>
+    </ul>
+    <div class="tab-content" id="pills-tabContent">
+      <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab">
+        <div class="px-3 py-2" data-controller="color-palette">
+          <% color_palettes.each do |color_palette| %>
+            <%#= render 'spree/admin/page_builder/color_palette',
+              active: color_palette_active?(color_palette),
+              primary_color: color_palette[:primary_color],
+              text_color: color_palette[:text_color],
+              border_color: color_palette[:border_color],
+              button_background_color: color_palette[:button_background_color],
+              button_text_color: color_palette[:button_text_color],
+              background_color: color_palette[:background_color]
+            %>
+          <% end %>
+
+          <%# <hr class="my-4 bg-light" /> %>
+
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_primary_color, label: Spree.t("theme_settings.brand_color"),
+                        value: @theme_preview.preferred_primary_color, action: 'change->page-builder#refreshPreview' %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_text_color, label: Spree.t("theme_settings.text_color"),
+                        value: @theme_preview.preferred_text_color, action: 'change->page-builder#refreshPreview' %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_button_text_color, label: Spree.t("theme_settings.button_text_color"),
+                        value: @theme_preview.preferred_button_text_color, action: 'change->page-builder#refreshPreview' %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_input_text_color, label: Spree.t("theme_settings.input_text_color"),
+                        value: @theme_preview.preferred_input_text_color, action: 'change->page-builder#refreshPreview' %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_border_color, label: Spree.t("theme_settings.border_color"),
+                        value: @theme_preview.preferred_border_color, action: 'change->page-builder#refreshPreview' %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_button_border_color, label: Spree.t("theme_settings.button_border_color"),
+                        value: @theme_preview.preferred_button_border_color, action: 'change->page-builder#refreshPreview', clear: true %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_background_color, label: Spree.t("theme_settings.background_color"),
+                        value: @theme_preview.preferred_background_color, action: 'change->page-builder#refreshPreview' %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_accent_color, label: Spree.t("theme_settings.accent_color"),
+                        value: @theme_preview.preferred_accent_color, action: 'change->page-builder#refreshPreview' %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_danger_color, label: Spree.t("theme_settings.danger_color"),
+                        value: @theme_preview.preferred_danger_color, action: 'change->page-builder#refreshPreview' %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_neutral_color, label: Spree.t("theme_settings.neutral_color"),
+                        value: @theme_preview.preferred_neutral_color, action: 'change->page-builder#refreshPreview' %>
+          <%= render 'spree/admin/page_builder/color_picker', f: f,
+                        field: :preferred_success_color, label: Spree.t("theme_settings.success_color"),
+                        value: @theme_preview.preferred_success_color, action: 'change->page-builder#refreshPreview' %>
+        </div>
+      </div>
+      <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">
+        <div class="px-3 py-2">
+          <%= render 'spree/admin/page_builder/range_input',
+            f: f, field: :preferred_button_border_radius, min: 0, max: 100, unit: 'px', action: 'change->page-builder#refreshPreview'
+          %>
+          <%= render 'spree/admin/page_builder/range_input',
+            f: f, field: :preferred_button_border_thickness, min: 0, max: 10, unit: 'px', action: 'change->page-builder#refreshPreview'
+          %>
+          <hr>
+
+          <%= render 'spree/admin/page_builder/range_input',
+            f: f, field: :preferred_input_border_radius, min: 0, max: 100, unit: 'px', action: 'change->page-builder#refreshPreview'
+          %>
+        </div>
+      </div>
+    </div>
+  <% end %>
+</div>