spina 2.7.0 → 2.9.0

data/app/assets/config/spina/manifest.js

@@ -4,6 +4,8 @@
 //= link_directory ../../javascripts/spina/controllers
 //= link_directory ../../javascripts/spina/libraries
 
-//= link spina/application.css
+//= link spina/animate.css
+//= link spina/fonts.css
+//= link spina/tailwind.css
 
 //= link spina/application.js

data/app/assets/javascripts/spina/controllers/image_collection_controller.js

@@ -7,9 +7,11 @@ export default class extends Controller {
   }
   
   connect() {
-    this.sortable = Sortable.create(this.collectionTarget, {
-      animation: 150
-    })
+    setTimeout(function() {
+      this.sortable = Sortable.create(this.collectionTarget, {
+        animation: 150
+      })
+    }.bind(this), 250)
   }
   
   removeImage(event) {

data/app/assets/javascripts/spina/controllers/infinite_scroll_controller.js

@@ -7,6 +7,7 @@ export default class extends Controller {
 
   connect() {
     this.scrollElement.addEventListener("scroll", this.load.bind(this))
+    this.load() // Initial load
   }
 
   disconnect() {
@@ -16,8 +17,9 @@ export default class extends Controller {
   load() {
     if (this.hasButtonTarget) {
       let top = this.buttonTarget.getBoundingClientRect().top
-      if (top < this.scrollElement.innerHeight + 500) {
+      if (top < window.innerHeight + 500) {
         this.buttonTarget.click()
+        this.buttonTarget.remove()
       }
     }
   }
@@ -26,7 +28,7 @@ export default class extends Controller {
     if (this.hasContainerTarget) {
       return this.containerTarget
     } else {
-      return window
+      return document.getElementById("main")
     }
   }
 

data/app/assets/stylesheets/spina/{tailwind/custom.css → application.tailwind.css}

@@ -138,58 +138,52 @@
     @apply border border-gray-400;
   }
 
-  /* Trix */
-  .trix-toolbar {  
-    button[data-trix-active] {
-      @apply text-white bg-spina;
-    }
+  /* Trix */  
+  .trix-toolbar button[data-trix-active] {
+    @apply text-white bg-spina;
+  }
   
-    button[disabled] {
-      @apply bg-gray-100 text-gray-400;
-    }
+  .trix-toolbar button[disabled] {
+    @apply bg-gray-100 text-gray-400;
   }
   
-  trix-editor {
-    
-    [data-trix-mutable]:not(.attachment__captain-editor) {
-      @apply select-none
-    }
-    
-    figure.attachment {
-      @apply m-0 inline-block
-    }
-  
-    figure.attachment[data-trix-content-type="Spina::Image"] {
-      max-height: 150px;
-      max-width: 200px;
-    }
-  
-    figure.attachment[data-trix-content-type="Spina::Image"] img {
-      @apply m-0 rounded-md object-contain;
-    }
-    
-    figure.attachment[data-trix-content-type="Spina::Image"] [data-label]:after {
-      content: attr(data-label);
-      @apply italic text-gray-500 h-8 flex items-center px-2 mt-1 text-sm;
-    }
-  
-    figure[data-trix-mutable].attachment[data-trix-content-type="Spina::Image"] img {
-      @apply shadow-lg ring ring-spina-light
-    }
+  trix-editor [data-trix-mutable]:not(.attachment__captain-editor) {
+    @apply select-none
+  }
     
-    figure[data-trix-mutable][data-trix-content-type="application/vnd+spina.embed+html"].attachment > spina-embed {
-      @apply block;
-      @apply shadow-lg ring ring-spina-light rounded-md;
-    }
-  
-    figure .attachment__caption {
-      @apply hidden
-    }
+  trix-editor figure.attachment {
+    @apply m-0 inline-block
+  }
+
+  trix-editor figure.attachment[data-trix-content-type="Spina::Image"] {
+    max-height: 150px;
+    max-width: 200px;
+  }
+
+  trix-editor figure.attachment[data-trix-content-type="Spina::Image"] img {
+    @apply m-0 rounded-md object-contain;
+  }
   
-    figure .attachment__toolbar {
-      @apply hidden
-    }
+  trix-editor figure.attachment[data-trix-content-type="Spina::Image"] [data-label]:after {
+    content: attr(data-label);
+    @apply italic text-gray-500 h-8 flex items-center px-2 mt-1 text-sm;
+  }
+
+  trix-editor figure[data-trix-mutable].attachment[data-trix-content-type="Spina::Image"] img {
+    @apply shadow-lg ring ring-spina-light
+  }
   
+  trix-editor figure[data-trix-mutable][data-trix-content-type="application/vnd+spina.embed+html"].attachment > spina-embed {
+    @apply block;
+    @apply shadow-lg ring ring-spina-light rounded-md;
+  }
+
+  trix-editor figure .attachment__caption {
+    @apply hidden
+  }
+
+  trix-editor figure .attachment__toolbar {
+    @apply hidden
   }
   
   trix-editor [data-trix-mutable]::-moz-selection,

data/app/components/spina/forms/trix_toolbar_component.html.erb

@@ -1,4 +1,4 @@
-<div class="relative sticky top-0 pt-4 bg-white trix-toolbar" id="<%= @trix_id %>">
+<div class="relative sticky z-10 top-0 pt-4 bg-white trix-toolbar" id="<%= @trix_id %>">
   <div class="flex items-center flex-wrap" data-controller="reveal">
     <div class="flex items-center bg-gray-200 rounded overflow-hidden mb-3 mr-3">
       <button type="button" class="hover:bg-gray-300 text-gray-700 w-9 h-9 flex items-center justify-center" data-trix-attribute="bold" data-trix-key="b" title="${Trix.config.lang.bold}" tabindex="-1">

data/app/components/spina/media_picker/image_component.html.erb

@@ -10,7 +10,7 @@
     data-deselected-class="border-transparent"
     class="w-full h-40 overflow-hidden rounded-md transform transition-transform duration-200 border-2 border-transparent hover:scale-105">
 
-    <%= image_tag helpers.thumbnail_url(@image), class: 'object-contain h-40 w-full', data: {controller: "image-fade-in"} %>
+    <%= image_tag helpers.large_thumbnail_url(@image), class: 'object-contain h-40 w-full', data: {controller: "image-fade-in"} %>
   </button>
 
   <div class="text-xs text-center text-gray-700 rounded p-1" data-selected-class="text-white bg-spina" data-deselected-class="text-gray-700"><%= @image.file.filename %></div>

data/app/components/spina/media_picker/modal_component.html.erb

@@ -1,9 +1,9 @@
 <%= render(Spina::UserInterface::ModalComponent.new(size: "max-w-6xl h-full")) do |component| %>
   <div class="h-full w-full" data-controller="infinite-scroll media-picker-modal" data-target="<%= @target %>">
-    <turbo-frame id="media_picker">
+    <turbo-frame id="media_picker" data-action= "turbo:frame-load->infinite-scroll#load">
       <div class="flex flex-col md:flex-row h-full w-full">
         <div class="flex-1 bg-white flex flex-col max-h-full relative overflow-hidden">
-          <div data-infinite-scroll-target="container" data-controller="selectable" class="p-6 h-full w-full overflow-scroll ">
+          <div data-infinite-scroll-target="container" data-controller="selectable" class="p-6 h-full w-full overflow-scroll" data-action="scroll->infinite-scroll#load">
             
             <!-- Images are loaded using nested turbo-frame-tags -->
             <!-- Only load images in multiples of 4 so that this grid -->
@@ -14,8 +14,8 @@
               </div>
               
               <% if @images.next_page %>
-                <turbo-frame id="images-<%= @images.next_page %>">
-                  <%= link_to "...", helpers.path_to_next_page(@images), data: {infinite_scroll_target: "button"} %>
+                <turbo-frame id="images-<%= @images.next_page %>" data-action= "turbo:frame-load->infinite-scroll#load">
+                  <%= link_to "Load more images", helpers.path_to_next_page(@images), class: "btn btn-default mt-6", data: {infinite_scroll_target: "button"} %>
                 </turbo-frame>
               <% end %>
               

data/app/components/spina/user_interface/tab_link_component.html.erb

@@ -1,3 +1,3 @@
-<%= link_to @url, class: "block px-3 leading-relaxed py-1 hover:text-gray-800 rounded-md text-gray-400 font-medium text-sm flex items-center #{css_classes}" do %>
+<%= link_to @url, class: "block px-3 leading-relaxed py-1 hover:text-gray-800 rounded-md text-gray-400 font-medium text-sm flex items-center whitespace-nowrap #{css_classes}" do %>
   <%= content || @name %>
 <% end %>

data/app/components/spina/user_interface/translations_component.html.erb

@@ -0,0 +1,21 @@
+<div class="relative" data-controller="reveal" data-reveal-away-value>
+  <button type="button" class="btn btn-default px-3" data-action="reveal#toggle">
+    <%= helpers.heroicon("chat-alt", style: :solid, class: 'w-4 h-4 text-gray-300') %>
+    
+    <span class="ml-1 font-semibold"><%= @label %></span>
+  </button>
+
+  <div hidden data-reveal data-transition class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg border border-gray-200 z-20">
+    <div class="rounded-md bg-white shadow-xs">
+      <div class="py-1">
+        <% locales.each do |locale| %>
+          <%= link_to "?locale=#{locale}", class: "block px-3 py-2 text-sm leading-4 text-gray-700 hover:bg-gray-100 hover:text-gray-900 focus:outline-none focus:bg-gray-100 focus:text-gray-900 font-medium" do %>
+            <div class="text-gray-700">
+              <%=t('spina.pages.edit_translation', language: '<span class="font-semibold">' + t("spina.languages.#{locale}") + '</span>').html_safe %>  
+            </div>
+          <% end %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/components/spina/user_interface/translations_component.rb

@@ -0,0 +1,26 @@
+module Spina
+  module UserInterface
+    class TranslationsComponent < ApplicationComponent
+  
+      def initialize(record, label: nil)
+        @record = record
+        @label = label
+      end
+      
+      def render?
+        spina_locales.many?
+      end
+      
+      def locales
+        spina_locales
+      end
+  
+      private
+  
+        def spina_locales
+          Spina.config.locales.map(&:to_sym)
+        end
+  
+    end
+  end
+end

data/app/controllers/concerns/spina/frontend.rb

@@ -74,7 +74,7 @@ module Spina
       end
 
       def render_404
-        render file: "#{Rails.root}/public/404.html", status: 404
+        render file: "#{Rails.root}/public/404.html", status: 404, layout: false
       end
 
       def render_with_template(page)

data/app/controllers/spina/admin/images_controller.rb

@@ -5,7 +5,7 @@ module Spina
       before_action :set_breadcrumbs
 
       def index
-        @media_folders = MediaFolder.order(:name)
+        @media_folders = MediaFolder.order(:name).includes(:images)
         @images = Image.sorted.where(media_folder: @media_folder).with_attached_file.page(params[:page]).per(25)
       end
       
@@ -53,7 +53,8 @@ module Spina
         if @image.saved_change_to_media_folder_id?
           render :update
         else
-          redirect_to [:admin, @image]
+          @media_folders = MediaFolder.order(:name)
+          render @image
         end
       end
 

data/app/controllers/spina/admin/layout_controller.rb

@@ -11,7 +11,7 @@ module Spina::Admin
 
     def update
       if @account.update(layout_params)
-        redirect_to spina.edit_admin_layout_path, flash: {success: t('spina.layout.saved')}
+        redirect_to spina.edit_admin_layout_path(locale: @locale), flash: {success: t('spina.layout.saved')}
       else
         flash.now[:error] = t('spina.layout.couldnt_be_saved')
         render partial: 'error', status: :unprocessable_entity

data/app/controllers/spina/admin/navigation_items_controller.rb

@@ -5,7 +5,7 @@ module Spina
       
       def new
         @navigation_item = @navigation.navigation_items.new(parent_id: params[:parent_id])
-        @pages = Page.sorted
+        @pages = Page.sorted.main.includes(:translations)
       end
       
       def create

data/app/helpers/spina/images_helper.rb

@@ -1,10 +1,25 @@
 module Spina
   module ImagesHelper
+  
+    def original_url(image)
+      return "" if image.nil?
+      main_app.url_for(image.file)
+    end
 
     def thumbnail_url(image)
       return "" if image.nil?
       main_app.url_for(image.variant(resize_to_fill: [400, 300]))
     end
+    
+    def large_thumbnail_url(image)
+      return "" if image.nil?
+      main_app.url_for(image.variant(resize_to_fit: [800, 600]))
+    end
+    
+    def preview_url(image)
+      return "" if image.nil?
+      main_app.url_for(image.variant(resize_to_limit: [1600, 1200]))
+    end
 
     def embedded_image_url(image)
       return "" if image.nil?

data/app/models/concerns/spina/partable.rb

@@ -10,7 +10,7 @@ module Spina
         part = find_part(attributes[:name]) || attributes[:part_type].constantize.new
 
         # Copy all attributes to part
-        %w(name title options).each do |attribute|
+        %w(name title hint options).each do |attribute|
           part.public_send("#{attribute}=", attributes[attribute.to_sym]) if part.respond_to?(attribute)
         end
 

data/app/models/spina/parts/attachment.rb

@@ -13,7 +13,7 @@ module Spina
         signed_blob_id.present?
       end
       
-      def signed_id
+      def signed_id(expires_in: nil)
         signed_blob_id
       end
       

data/app/models/spina/parts/base.rb

@@ -5,8 +5,9 @@ module Spina
 
       attr_json_config(unknown_key: :strip)
 
-      attr_json :title, :string
       attr_json :name, :string
+      
+      attr_accessor :title, :hint
 
       def label
         content&.to_s

data/app/presenters/spina/menu_presenter.rb

@@ -8,9 +8,11 @@ module Spina
 
     # Configuration
     config_accessor :menu_tag, :menu_css,
-                    :list_tag, :list_css, 
-                    :list_item_tag, :list_item_css, 
+                    :list_tag, :list_css,
+                    :list_item_tag, :list_item_css,
                     :link_tag_css,
+                    :active_list_item_css,
+                    :current_list_item_css,
                     :include_drafts,
                     :depth # root nodes are at depth 0
 
@@ -51,9 +53,10 @@ module Spina
 
       def render_item(item)
         return nil unless item.materialized_path
+
         children = scoped_collection(item.children)
 
-        content_tag(list_item_tag, class: list_item_css, data: {page_id: item.page_id, draft: (true if item.draft?) }) do
+        content_tag(list_item_tag, class: item_css(item), data: { page_id: item.page_id, draft: (true if item.draft?) }) do
           buffer = ActiveSupport::SafeBuffer.new
           buffer << link_to(item.menu_title, item.materialized_path, class: link_tag_css)
           buffer << render_items(children) if render_children?(item) && children.any?
@@ -70,6 +73,26 @@ module Spina
         return true unless depth
         item.depth < depth
       end
+      
+      def item_css(item)
+        return current_list_item_css if apply_current_css?(item)
+        return active_list_item_css if apply_active_css?(item)
+        list_item_css
+      end
+
+      def apply_current_css?(item)
+        return false if current_list_item_css.nil?
+        Spina::Current.page == item
+      end
 
+      def apply_active_css?(item)
+        return false if apply_current_css?(item)
+        parent_of_current?(item)
+      end
+
+      def parent_of_current?(item)
+        return false if item.homepage?
+        Spina::Current.page.materialized_path.starts_with? item.materialized_path
+      end
   end
 end

data/app/views/layouts/spina/admin/admin.html.erb

@@ -2,7 +2,7 @@
   <div class="flex flex-col md:flex-row md:h-screen min-h-screen w-full overflow-hidden">
     <%= render partial: "spina/admin/shared/navigation" %>
     
-    <section class="w-full md:overflow-scroll">
+    <section id="main" class="w-full md:overflow-scroll">
       <%= yield %>
       
       <%= turbo_frame_tag "flash" do %>

data/app/views/layouts/spina/admin/application.html.erb

@@ -10,8 +10,8 @@
     
     <title>Spina CMS</title>
 
-    <!-- Tailwind -->
-    <%= stylesheet_link_tag 'spina/application', data: {turbolinks_track: true} %>
+    <!-- Stylesheets -->
+    <%= stylesheet_link_tag "spina/tailwind", "spina/fonts", "spina/animate", "data-turbo-track": "reload" %>
     
     <!-- Spina's importmap -->
     <%= spina_importmap_tags %>

data/app/views/spina/admin/images/_image.html.erb

@@ -1,7 +1,9 @@
 <%= turbo_frame_tag dom_id(image) do %>
   <div class="flex items-center h-12 border-b border-gray-200 px-8 hover:bg-white group">
     <div class="w-8 mr-4 h-12 flex justify-center">
-      <%= image_tag thumbnail_url(image), class: "object-contain" %>
+      <%= link_to spina.admin_image_path(image), class: "flex items-center cursor-zoom-in", data: {turbo_frame: "modal"} do %>
+        <%= image_tag thumbnail_url(image), class: "object-contain" %>
+      <% end %>
     </div>
     
     <turbo-frame id="<%= dom_id(image) %>_filename" class="font-medium text-gray-800 h-full flex-1 w-56 text-sm flex items-center relative">
@@ -13,34 +15,36 @@
           <%=t 'spina.ui.rename' %>
         <% end %>
         
-        <%= render Spina::UserInterface::DropdownComponent.new do |dropdown| %>
-          <% dropdown.button(classes: 'btn btn-default h-7 px-2 text-xs') do %>
-            <%= heroicon('folder', style: :solid, class: 'w-4 h-4 mr-1 text-gray-600') %>
-            <%=t 'spina.ui.move_to' %>
-            <%= heroicon('chevron-down', style: :solid, class: 'w-4 h-4') %>
-          <% end %>
-          
-          <% dropdown.menu do %>
-            <% if image.media_folder_id.present? %>
-              <%= form_with model: image, url: spina.admin_image_path(image) do |f| %>
-                <%= f.hidden_field :media_folder_id, value: nil %>
-                <%= render Spina::UserInterface::DropdownButtonComponent.new do %>
-                  <%=t 'spina.media_library.no_folder' %>
-                <% end %>
-              <% end %>
+        <% if @media_folders.present? %>
+          <%= render Spina::UserInterface::DropdownComponent.new do |dropdown| %>
+            <% dropdown.button(classes: 'btn btn-default h-7 px-2 text-xs') do %>
+              <%= heroicon('folder', style: :solid, class: 'w-4 h-4 mr-1 text-gray-600') %>
+              <%=t 'spina.ui.move_to' %>
+              <%= heroicon('chevron-down', style: :solid, class: 'w-4 h-4') %>
             <% end %>
-            <% Spina::MediaFolder.order(:name).each do |media_folder| %>
-              <% if media_folder.id == image.media_folder_id %>
-                <%= render Spina::UserInterface::DropdownButtonComponent.new(disabled: true) do %>
-                  <%= media_folder.name %>
-                <% end %>
-              <% else %>
+            
+            <% dropdown.menu do %>
+              <% if image.media_folder_id.present? %>
                 <%= form_with model: image, url: spina.admin_image_path(image) do |f| %>
-                  <%= f.hidden_field :media_folder_id, value: media_folder.id %>
-                  
+                  <%= f.hidden_field :media_folder_id, value: nil %>
                   <%= render Spina::UserInterface::DropdownButtonComponent.new do %>
+                    <%=t 'spina.media_library.no_folder' %>
+                  <% end %>
+                <% end %>
+              <% end %>
+              <% @media_folders.each do |media_folder| %>
+                <% if media_folder.id == image.media_folder_id %>
+                  <%= render Spina::UserInterface::DropdownButtonComponent.new(disabled: true) do %>
                     <%= media_folder.name %>
                   <% end %>
+                <% else %>
+                  <%= form_with model: image, url: spina.admin_image_path(image) do |f| %>
+                    <%= f.hidden_field :media_folder_id, value: media_folder.id %>
+                    
+                    <%= render Spina::UserInterface::DropdownButtonComponent.new do %>
+                      <%= media_folder.name %>
+                    <% end %>
+                  <% end %>
                 <% end %>
               <% end %>
             <% end %>
@@ -56,8 +60,12 @@
       </div>
     </div>
     <div class="text-gray-500 text-xs w-32 text-right whitespace-nowrap"><%=l image.created_at, format: :short %></div>
-    <div class="">
-      <%= button_to spina.admin_image_path(image), method: :delete, class: "block py-3 px-4 ml-2 text-gray-500 hover:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.images.delete_confirmation_html')}} do %>
+    <div class="flex items-center ml-2">
+      <%= link_to original_url(image), class: "block py-3 px-2 text-gray-500 hover:text-gray-900", download: image.file.filename do %>
+        <%= heroicon('download', class: 'w-5 h-5') %>
+      <% end %>
+      
+      <%= button_to spina.admin_image_path(image), method: :delete, class: "block py-3 px-2 text-gray-500 hover:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.images.delete_confirmation_html')}} do %>
         <%= heroicon('trash', class: "w-5 h-5") %>
       <% end %>
     </div>

data/app/views/spina/admin/images/index.html.erb

@@ -64,7 +64,7 @@
         
         <% if @images.next_page %>
           <%= turbo_frame_tag "images-#{@images.next_page}", data: {action: "turbo:frame-load->infinite-scroll#load"} do %>
-            <%= link_to t('spina.ui.load_more'), path_to_next_page(@images), class: 'hidden', data: {infinite_scroll_target: "button"} %>
+            <%= link_to t('spina.ui.load_more'), path_to_next_page(@images), class: "btn btn-default", data: {infinite_scroll_target: "button"} %>
           <% end %>
         <% end %>
       <% end %>

data/app/views/spina/admin/images/show.html.erb

@@ -1 +1,3 @@
-<%= render @image %>
+<%= render Spina::UserInterface::ModalComponent.new(size: "max-w-screen-lg w-auto") do |modal| %>
+  <%= image_tag preview_url(@image) %>
+<% end %>

data/app/views/spina/admin/layout/edit.html.erb

@@ -1,5 +1,7 @@
 <%= render Spina::UserInterface::HeaderComponent.new do |header| %>
   <% header.actions do %>
+    <%= render Spina::UserInterface::TranslationsComponent.new(@account, label: @locale.upcase) %>
+  
     <% if Spina::Current.theme.layout_parts.any? %>
       <%= button_tag type: :submit, form: dom_id(@account), class: 'btn btn-primary', data: {controller: "button hotkeys", hotkeys: "command+s, ctrl+s", hotkeys_target: "button", action: "button#loading", loading_message: t('spina.ui.saving')} do %>
         <%= heroicon('check', style: :solid, class: 'w-5 h-5 mr-1 -ml-2') %>

data/app/views/spina/admin/media_folders/_media_folder.html.erb

@@ -11,8 +11,10 @@
     </div>
     <div class="text-gray-500 text-xs w-32 text-right"><%=l media_folder.created_at, format: :short %></div>
     
-    <%= button_to spina.admin_media_folder_path(media_folder), method: :delete, class: "block py-3 px-4 ml-2 text-gray-500 hover:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.media_library.media_folder_delete_confirmation_html')}} do %>
-      <%= heroicon('trash', class: 'w-5 h-5') %>
-    <% end %>
+    <div class="flex items-center ml-11">
+      <%= button_to spina.admin_media_folder_path(media_folder), method: :delete, class: "block py-3 px-2 text-gray-500 hover:text-gray-900", form: {data: {controller: "confirm", confirm_message: t('spina.media_library.media_folder_delete_confirmation_html')}} do %>
+        <%= heroicon('trash', class: 'w-5 h-5') %>
+      <% end %>
+    </div>
   </div>
 <% end %>

data/app/views/spina/admin/navigation_items/_form.html.erb

@@ -10,7 +10,11 @@
           </h3>
     
           <div class="mt-3">
-            <%= f.select :page_id, @pages.map{|page| [page.menu_title, page.id]}, {disabled: @navigation.navigation_items.pluck(:page_id), include_blank: t('spina.navigations.choose_page')}, class: 'form-select w-full' %>
+            
+            <div class="border border-gray-300 rounded-md bg-white">
+              <%= render Spina::Pages::PageSelectComponent.new("navigation_item[page_id]", @pages, include_blank: t("spina.navigations.choose_page"), disabled: @navigation.navigation_items.pluck(:page_id)) %>
+            </div>
+            
           </div>
         </div>
       </div>

data/app/views/spina/admin/navigations/edit.html.erb

@@ -1,7 +1,7 @@
 <%= render Spina::UserInterface::HeaderComponent.new do |header| %>
   <% header.navigation do %>
     <nav class="-mb-3 mt-4">
-      <ul class="inline-flex w-auto rounded-md bg-white">
+      <ul class="inline-flex flex-wrap w-auto rounded-md bg-white">
         <% @navigations.each do |navigation| %>
           <%= render Spina::UserInterface::TabLinkComponent.new(spina.edit_admin_navigation_path(navigation), active: @navigation == navigation) do %>
             <%= heroicon('menu-alt-2', style: :solid, class: 'w-3 h-3 mr-1') %>

data/app/views/spina/admin/pages/_form.html.erb

@@ -4,7 +4,7 @@
       <% if @page.draft? %>
         <span class="text-gray-400 ml-2 text-sm">(<%= Spina::Page.human_attribute_name(:draft) %>)</span>
       <% end %>
-      <%= link_to @page.materialized_path, class: 'px-3 py-2 flex items-center text-gray-400 hover:text-gray-700', target: :blank, data: {turbo: false} do %>
+      <%= link_to @page.materialized_path(locale: @locale), class: 'px-3 py-2 flex items-center text-gray-400 hover:text-gray-700', target: :blank, data: {turbo: false} do %>
         <%= heroicon("external-link", style: :solid, class: "w-4 h-4") %>
       <% end %>
     <% end %>
@@ -33,4 +33,4 @@
       <% end %>
     <% end %>
   </div>
-</div>
+</div>

data/app/views/spina/admin/pages/index.html.erb

@@ -14,7 +14,7 @@
   
   <% header.navigation do %>
     <nav class="-mb-1 md:-mb-3 mt-4">
-      <ul class="inline-flex w-auto rounded-md bg-white">
+      <ul class="inline-flex flex-wrap w-auto rounded-md bg-white">
         <%= render Spina::UserInterface::TabLinkComponent.new(spina.admin_pages_path, active: @resource.nil?) do %>
           <%= heroicon('collection', style: :solid, class: "h-4 w-4 mr-1 -ml-1 opacity-75") %>
           <%=t 'spina.website.main' %>

data/app/views/spina/admin/parts/attachments/_form.html.erb

@@ -1,8 +1,9 @@
 <div class="mt-6" data-controller="attachment-picker">
   <label for="price" class="block text-sm leading-5 font-medium text-gray-700"><%= f.object.title %></label>
+  <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
 
   <%= f.hidden_field :signed_blob_id, data: {attachment_picker_target: 'signedBlobId'} %>
   <%= f.hidden_field :filename, data: {attachment_picker_target: 'filename'} %>
 
-  <%= f.select :attachment_id, Spina::Attachment.sorted.map{|attachment| [attachment.file&.filename, attachment.id, data: {signed_blob_id: attachment.file&.blob&.signed_id, filename: attachment.file&.filename}]}, {include_blank: t("spina.attachments.choose_attachment")}, {class: "form-select", data: {action: "attachment-picker#pick"}} %>
+  <%= f.select :attachment_id, Spina::Attachment.sorted.map{|attachment| [attachment.file&.filename, attachment.id, data: {signed_blob_id: attachment.file&.blob&.signed_id, filename: attachment.file&.filename}]}, {include_blank: t("spina.attachments.choose_attachment")}, {class: "form-select mt-1", data: {action: "attachment-picker#pick"}} %>
 </div>

data/app/views/spina/admin/parts/image_collections/_form.html.erb

@@ -10,6 +10,7 @@
   <label class="block text-sm leading-5 font-medium text-gray-700">
     <%= f.object.title %>
   </label>
+  <div class="text-gray-400 text-sm"><%= f.object.hint %></div>
 
   <div class="flex items-start mt-1">
     <div class="flex items-center" data-image-collection-target="collection">