postnhost 0.0.0 → 0.1.1

data/app/views/postnhost/shared/articles/_tiptap_editor.html.erb

@@ -0,0 +1,225 @@
+<div data-controller="tiptap-editor"
+     data-tiptap-editor-content-value="<%= content %>"
+     data-tiptap-editor-resource-type-value="<%= resource_type %>"
+     data-tiptap-editor-resource-id-value="<%= resource_id %>"
+     data-tiptap-editor-mount-path-value="<%= postnhost.root_path %>"
+     class="relative">
+  <!-- Toolbar -->
+  <div class="sticky top-0 z-20 bg-white border-b border-gray-100 px-6 py-1">
+    <div class="flex flex-wrap gap-1 items-center justify-between">
+      <div class="flex flex-wrap gap-1 items-center">
+      <!-- Undo/Redo -->
+      <button type="button" data-action="undo" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("undo", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+      <button type="button" data-action="redo" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("redo", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <!-- Headings -->
+      <button type="button" data-action="heading-2" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("heading-2", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="heading-3" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("heading-3", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <!-- Lists -->
+      <button type="button" data-action="bullet-list" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("bullet-list", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="ordered-list" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("ordered-list", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <!-- Blockquote -->
+      <button type="button" data-action="blockquote" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("blockquote", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <!-- Text Formatting -->
+      <button type="button" data-action="bold" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("bold", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="italic" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("italic", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="strike" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("strike", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <!-- Code Block -->
+      <button type="button" data-action="code-block" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200" title="Code block" aria-label="Code block">
+        <%= icon("code-block", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="code" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("code", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="underline" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("underline", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="link" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("link", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="image" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200" title="Upload image">
+        <%= icon("image-add", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="youtube" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200" title="Embed YouTube video">
+        <%= icon("youtube", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <!-- Table Dropdown -->
+      <div class="relative" data-controller="dropdown">
+        <button type="button" data-action="click->dropdown#toggle table" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200" title="Table">
+          <%= icon("table", css_class: "w-5 h-5", subfolder: "tiptap") %>
+        </button>
+
+        <div data-dropdown-target="menu" class="hidden absolute left-0 mt-2 w-48 rounded-lg shadow-lg bg-white border border-gray-200 z-50">
+          <div class="py-1" role="none">
+            <button type="button" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100" data-action="click->tiptap-editor#insertTable click->dropdown#close" role="menuitem">Insert Table</button>
+            <button type="button" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100" data-action="click->tiptap-editor#deleteTable click->dropdown#close" role="menuitem">Delete Table</button>
+            <button type="button" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100" data-action="click->tiptap-editor#addColumnAfter click->dropdown#close" role="menuitem">Add Column</button>
+            <button type="button" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100" data-action="click->tiptap-editor#deleteColumn click->dropdown#close" role="menuitem">Delete Column</button>
+            <button type="button" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100" data-action="click->tiptap-editor#addRowAfter click->dropdown#close" role="menuitem">Add Row</button>
+            <button type="button" class="text-gray-700 block w-full text-left px-4 py-2 text-sm hover:bg-gray-100" data-action="click->tiptap-editor#deleteRow click->dropdown#close" role="menuitem">Delete Row</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Text Alignment -->
+      <button type="button" data-action="align-left" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("align-left", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="align-center" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("align-center", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+
+      <button type="button" data-action="align-right" class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+        <%= icon("align-right", css_class: "w-5 h-5", subfolder: "tiptap") %>
+      </button>
+      </div>
+
+    </div>
+  </div>
+
+  <!-- Editor -->
+  <div data-tiptap-editor-target="editor" class="min-h-[400px] p-4"></div>
+
+  <!-- Contextual code language selector -->
+  <select
+    data-tiptap-editor-target="codeLanguage"
+    data-action="change->tiptap-editor#changeCodeLanguage"
+    class="absolute z-10 hidden h-8 w-32 cursor-pointer rounded-md border border-slate-600 bg-slate-800 px-2 text-xs font-medium text-slate-200 focus:border-blue-400 focus:outline-none focus:ring-2 focus:ring-blue-400"
+    aria-label="Code language"
+    title="Code language">
+    <option value="plaintext">Plain text</option>
+    <option value="bash">Bash</option>
+    <option value="c">C</option>
+    <option value="cpp">C++</option>
+    <option value="csharp">C#</option>
+    <option value="css">CSS</option>
+    <option value="diff">Diff</option>
+    <option value="go">Go</option>
+    <option value="html">HTML</option>
+    <option value="java">Java</option>
+    <option value="javascript">JavaScript</option>
+    <option value="json">JSON</option>
+    <option value="kotlin">Kotlin</option>
+    <option value="markdown">Markdown</option>
+    <option value="php">PHP</option>
+    <option value="python">Python</option>
+    <option value="ruby">Ruby</option>
+    <option value="rust">Rust</option>
+    <option value="sql">SQL</option>
+    <option value="swift">Swift</option>
+    <option value="typescript">TypeScript</option>
+    <option value="xml">XML</option>
+    <option value="yaml">YAML</option>
+  </select>
+
+  <!-- Link Dropdown -->
+  <div data-tiptap-editor-target="linkDropdown" class="absolute z-10 bg-white border border-gray-200 rounded-lg shadow-lg p-2 hidden" style="min-width: 300px;">
+    <div class="space-y-3">
+      <div class="flex items-center space-x-2">
+        <input
+          data-tiptap-editor-target="linkInput"
+          data-action="keydown->tiptap-editor#handleLinkInputKeydown"
+          type="text"
+          placeholder="Paste a link..."
+          class="flex-1 px-3 py-2 border border-gray-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          tabindex="-1"
+        />
+        <button
+          data-action="click->tiptap-editor#applyLink"
+          type="button"
+          title="Apply link"
+          class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+          <%= icon("apply-link", css_class: "w-4 h-4", subfolder: "tiptap") %>
+        </button>
+
+        <button
+          data-action="click->tiptap-editor#removeLink"
+          type="button"
+          title="Remove link"
+          class="p-2 text-gray-500 hover:text-red-600 hover:bg-red-50 rounded-lg transition-colors duration-200">
+          <%= icon("remove-link", css_class: "w-4 h-4", subfolder: "tiptap") %>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Alt Text Editor -->
+  <div data-tiptap-editor-target="altDropdown" class="absolute z-10 hidden text-gray-600">
+    <input
+      data-tiptap-editor-target="altInput"
+      data-action="input->tiptap-editor#handleAltInputChange keydown->tiptap-editor#handleAltInputKeydown blur->tiptap-editor#applyAlt"
+      type="text"
+      placeholder="Add alt text..."
+      class="w-full px-2 py-1 text-sm text-gray-600 focus:outline-none bg-transparent"
+      autocomplete="off"
+      tabindex="-1"
+    />
+  </div>
+
+  <!-- YouTube Dropdown -->
+  <div data-tiptap-editor-target="youtubeDropdown" class="absolute z-10 bg-white border border-gray-200 rounded-lg shadow-lg p-2 hidden" style="min-width: 300px;">
+    <div class="space-y-3">
+      <div class="flex items-center space-x-2">
+        <input
+          data-tiptap-editor-target="youtubeInput"
+          data-action="keydown->tiptap-editor#handleYoutubeInputKeydown"
+          type="text"
+          placeholder="Paste YouTube URL..."
+          class="flex-1 px-3 py-2 border border-gray-200 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
+          autocomplete="off"
+          autocorrect="off"
+          autocapitalize="off"
+          tabindex="-1"
+        />
+        <button
+          data-action="click->tiptap-editor#applyYoutube"
+          type="button"
+          title="Embed video"
+          class="p-2 text-gray-500 hover:text-gray-900 hover:bg-gray-100 rounded-lg transition-colors duration-200">
+          <%= icon("apply-link", css_class: "w-4 h-4", subfolder: "tiptap") %>
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- Hidden field for form submission -->
+  <%= form.hidden_field :content, data: { tiptap_editor_target: "content" } %>
+</div>

data/app/views/postnhost/shared/articles/_title_field.html.erb

@@ -0,0 +1,9 @@
+<div class="px-6 py-6 border-b border-gray-100" data-controller="title-field">
+  <%= form.text_area :title,
+    class: "w-full text-3xl font-bold text-gray-900 placeholder-gray-400 border-none outline-none focus:ring-0 p-0 m-0 bg-transparent resize-none overflow-hidden leading-snug block",
+    placeholder: placeholder,
+    rows: 1,
+    style: "field-sizing: content;",
+    data: { auto_save_target: "titleField", publish_guard_target: "titleField", action: "keydown->title-field#preventNewLine input->publish-guard#sync" },
+    autocomplete: "off" %>
+</div>

data/app/views/postnhost/shared/articles/_version_action_buttons.html.erb

@@ -0,0 +1,35 @@
+<div class="w-1/5 bg-white border border-gray-200 p-6 hidden md:block border-t-0 sticky top-0 self-start min-h-screen">
+  <div class="space-y-4">
+    <%= link_to versions_article_path(article), class: "w-full bg-white border border-gray-300 text-gray-700 py-2.5 px-4 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium text-center block cursor-pointer" do %>
+      <div class="flex items-center justify-center space-x-2">
+        <%= icon("arrow-left", css_class: "w-4 h-4") %>
+        <span>Back to Versions</span>
+      </div>
+    <% end %>
+
+    <%= link_to rollback_article_path(article, version_id: version.id),
+        method: :post,
+        data: {
+          turbo_method: :post,
+          turbo_confirm: "Are you sure you want to restore this version? Your current changes will be overwritten."
+        },
+        class: "w-full bg-gray-900 text-white py-2.5 px-4 rounded-xl hover:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium text-center block cursor-pointer" do %>
+      <div class="flex items-center justify-center space-x-2">
+        <%= icon("clock", css_class: "w-4 h-4") %>
+        <span>Restore This Version</span>
+      </div>
+    <% end %>
+
+    <div class="pt-4 border-t border-gray-100">
+      <h4 class="text-sm font-semibold text-gray-900 mb-3">Version Information</h4>
+      <div class="text-sm text-gray-600 space-y-1">
+        <p><strong>Created:</strong> <%= admin_datetime(version.created_at) %></p>
+        <% if version.id == article.article_snapshot&.paper_trail_version_id %>
+          <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium bg-green-100 text-green-800">
+            Published Version
+          </span>
+        <% end %>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/postnhost/shared/elements/_button.html.erb

@@ -0,0 +1,20 @@
+<%
+  # Button partial - renders an actual button element
+  #
+  # Parameters:
+  #   text: (required) Button text
+  #   variant: :primary (default), :secondary, :danger
+  #   icon: Icon name (optional)
+  #   disabled: Boolean (optional)
+  #   data: Data attributes (optional)
+  #   extra_class: Additional CSS classes (optional)
+%>
+
+<button type="button"
+        class="<%= button_classes(variant: local_assigns[:variant] || :primary, disabled: local_assigns[:disabled] || false) %> <%= local_assigns[:extra_class] %>"
+        <%= 'disabled' if local_assigns[:disabled] %>>
+  <% if local_assigns[:icon] %>
+    <%= icon(icon, css_class: "w-4 h-4 mr-2") %>
+  <% end %>
+  <%= text %>
+</button>

data/app/views/postnhost/shared/elements/_button_link.html.erb

@@ -0,0 +1,24 @@
+<%
+  # Button link partial - renders a link styled as a button
+  #
+  # Parameters:
+  #   text: (required) Button text
+  #   url: (required) Button URL
+  #   variant: :primary (default), :secondary, :danger
+  #   icon: Icon name (optional)
+  #   method: HTTP method (optional)
+  #   data: Data attributes (optional)
+  #   extra_class: Additional CSS classes (optional)
+  #   target: Link target (optional, e.g. '_blank')
+%>
+
+<%= link_to url,
+    class: "#{button_classes(variant: local_assigns[:variant] || :primary)} #{local_assigns[:extra_class]}",
+    method: local_assigns[:method],
+    target: local_assigns[:target],
+    data: local_assigns[:data] do %>
+  <% if local_assigns[:icon] %>
+    <%= icon(icon, css_class: "w-4 h-4 mr-2") %>
+  <% end %>
+  <%= text %>
+<% end %>

data/app/views/postnhost/shared/elements/_empty_state.html.erb

@@ -0,0 +1,22 @@
+<%
+  # Empty state partial for "no items" states
+  #
+  # Parameters:
+  #   icon: (required) Icon name
+  #   title: (required) Title text
+  #   description: (required) Description text
+  #   actions block: Optional action buttons
+%>
+
+<div class="text-center py-12">
+  <div class="mx-auto h-12 w-12 text-gray-400">
+    <%= icon(icon, css_class: "w-full h-full") %>
+  </div>
+  <h3 class="mt-2 text-sm font-medium text-gray-900"><%= title %></h3>
+  <p class="mt-1 text-sm text-gray-500"><%= description %></p>
+  <% if block_given? %>
+    <div class="mt-6">
+      <%= yield %>
+    </div>
+  <% end %>
+</div>

data/app/views/postnhost/shared/elements/_error_messages.html.erb

@@ -0,0 +1,28 @@
+<%
+  # Error messages partial for form validation errors
+  #
+  # Parameters:
+  #   resource: (required) ActiveRecord model instance with errors
+%>
+
+<% if resource.errors.any? %>
+  <div class="<%= error_container_classes %>">
+    <div class="flex">
+      <div class="flex-shrink-0">
+        <%= icon("alert-circle", css_class: "h-5 w-5 text-red-400") %>
+      </div>
+      <div class="ml-3">
+        <h3 class="text-sm font-medium text-red-800">
+          <%= pluralize(resource.errors.count, "error") %> prohibited this <%= resource.model_name.human.downcase %> from being saved:
+        </h3>
+        <div class="mt-2 text-sm text-red-700">
+          <ul class="list-disc pl-5 space-y-1">
+            <% resource.errors.full_messages.each do |message| %>
+              <li><%= message %></li>
+            <% end %>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/postnhost/shared/elements/_form_card.html.erb

@@ -0,0 +1,10 @@
+<%
+  # Form card partial for form field containers
+  #
+  # Parameters:
+  #   content block: Form fields
+%>
+
+<div class="<%= form_card_classes %>">
+  <%= yield %>
+</div>

data/app/views/postnhost/shared/elements/_form_page_header.html.erb

@@ -0,0 +1,21 @@
+<%
+  # Form page header partial for new/edit pages
+  #
+  # Parameters:
+  #   title: (required) Page title
+  #   description: (required) Page description
+  #   actions block: Action buttons (optional)
+%>
+
+<div class="mb-8 flex flex-col md:flex-row md:items-start md:justify-between gap-4">
+  <div>
+    <h1 class="text-3xl font-bold text-gray-900"><%= title %></h1>
+    <p class="mt-2 text-gray-600"><%= description %></p>
+  </div>
+
+  <% if block_given? %>
+    <div class="flex flex-col space-y-3 md:flex-row md:items-center md:space-y-0 md:space-x-3 w-full md:w-auto shrink-0">
+      <%= yield %>
+    </div>
+  <% end %>
+</div>

data/app/views/postnhost/shared/elements/_icon_button.html.erb

@@ -0,0 +1,17 @@
+<%
+  # Icon button partial for action icons (edit, view, delete)
+  #
+  # Parameters:
+  #   icon: (required) Icon name
+  #   url: (required) Button URL
+  #   variant: :default, :danger
+  #   method: HTTP method for link_to
+  #   data: Data attributes hash
+%>
+
+<%= link_to url,
+    class: icon_button_classes(variant: local_assigns[:variant] || :default),
+    method: local_assigns[:method],
+    data: local_assigns[:data] do %>
+  <%= icon(icon, css_class: "w-4 h-4") %>
+<% end %>

data/app/views/postnhost/shared/elements/_page_header.html.erb

@@ -0,0 +1,40 @@
+<%
+  # Page header partial for consistent page titles
+  #
+  # Parameters:
+  #   title: (required) Page title
+  #   description: Subtitle/description text
+  #   stats: Array of stats hashes [{text: "...", class: "..."}]
+  #   actions block: Action buttons
+%>
+
+<div class="<%= page_header_classes %>">
+  <div>
+    <h1 class="text-3xl font-bold text-gray-900"><%= title %></h1>
+    <% if defined?(description) && description %>
+      <p class="mt-2 text-gray-600 max-w-lg"><%= description %></p>
+    <% end %>
+    <% if defined?(stats) && stats.any? %>
+      <div class="mt-2 flex items-center space-x-4 text-sm text-gray-500">
+        <% stats.each do |stat| %>
+          <% if stat[:url] %>
+            <%= link_to stat[:url], class: "#{stat[:class]} hover:text-gray-700 inline-flex items-center cursor-pointer", target: stat[:target] do %>
+              <%= stat[:text] %>
+              <% if stat[:icon] %>
+                <%= icon(stat[:icon], css_class: "w-3.5 h-3.5 ml-1") %>
+              <% end %>
+            <% end %>
+          <% else %>
+            <span class="<%= stat[:class] %>"><%= stat[:text] %></span>
+          <% end %>
+        <% end %>
+      </div>
+    <% end %>
+  </div>
+
+  <% if block_given? %>
+    <div class="flex flex-col space-y-3 md:flex-row md:items-center md:space-y-0 md:space-x-3 w-full md:w-auto">
+      <%= yield %>
+    </div>
+  <% end %>
+</div>

data/app/views/postnhost/shared/elements/_table_container.html.erb

@@ -0,0 +1,23 @@
+<%
+  # Table container partial for consistent table layouts
+  #
+  # Parameters:
+  #   headers: Array of header hashes [{text: "...", class: "..."}]
+  #   header_grid_class: Optional grid classes for the header row (default: 12-column grid)
+  #   content block: Table body content
+  header_grid_class = local_assigns.fetch(:header_grid_class, 'grid grid-cols-12 gap-4')
+%>
+
+<div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+  <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
+    <div class="<%= header_grid_class %> text-xs font-medium text-gray-500 uppercase tracking-wider">
+      <% headers.each do |header| %>
+        <div class="<%= header[:class] %>"><%= header[:text] %></div>
+      <% end %>
+    </div>
+  </div>
+
+  <div class="divide-y divide-gray-200">
+    <%= yield %>
+  </div>
+</div>

data/app/views/postnhost/shared/pages/_action_buttons.html.erb

@@ -0,0 +1,84 @@
+<div class="order-2 md:order-3 hidden md:block w-full md:w-1/5 bg-white border border-gray-200 p-4 md:p-6 border-t-0 md:sticky md:top-0 md:self-start md:min-h-screen"
+     data-editor-mobile-sidebars-target="<%= local_assigns[:mobile_target] %>">
+  <div class="md:hidden flex items-center justify-between mb-4">
+    <h3 class="text-sm font-semibold text-gray-900">Actions</h3>
+    <button type="button"
+            class="text-gray-500 hover:text-gray-700 cursor-pointer"
+            data-action="click->editor-mobile-sidebars#closeActions">
+      <%= icon("close", css_class: "w-4 h-4") %>
+    </button>
+  </div>
+  <div class="space-y-4">
+    <button
+      type="button"
+      data-auto-save-target="saveButton"
+      data-action="click->auto-save#save"
+      disabled
+      class="w-full bg-white border border-gray-300 text-gray-700 py-2.5 px-4 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium cursor-pointer opacity-50">
+      Saved
+    </button>
+
+    <% if is_variant %>
+      <%= link_to edit_page_path(page), class: "w-full bg-white border border-gray-300 text-gray-700 py-2.5 px-4 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium text-center block cursor-pointer" do %>
+        <div class="flex items-center justify-center space-x-2">
+          <%= icon("arrow-left", css_class: "w-4 h-4") %>
+          <span>Back to Original</span>
+        </div>
+      <% end %>
+
+      <div class="border-b border-gray-100 pb-4">
+        <%= link_to page_variants_path(page), data: { turbo_prefetch: false }, class: "w-full bg-white border border-gray-300 text-gray-700 py-2.5 px-4 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium text-center block cursor-pointer" do %>
+          <div class="flex items-center justify-center space-x-2">
+            <%= icon("language", css_class: "w-4 h-4") %>
+            <span>All Translations</span>
+          </div>
+        <% end %>
+      </div>
+    <% else %>
+      <div class="border-b border-gray-100 pb-4">
+        <%= link_to page_variants_path(page), data: { turbo_prefetch: false }, class: "w-full bg-white border border-gray-300 text-gray-700 py-2.5 px-4 rounded-xl hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-900 focus:ring-offset-2 transition duration-200 text-sm font-medium text-center block" do %>
+          <div class="flex items-center justify-center space-x-2">
+            <%= icon("language", css_class: "w-4 h-4") %>
+            <span>Translations</span>
+            <% if page.page_variants.any? %>
+              <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-800">
+                <%= page.page_variants_count %>
+              </span>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    <% end %>
+
+    <%= render "postnhost/shared/pages/post_actions",
+        resource: resource,
+        resource_type: (is_variant ? "variant" : "page"),
+        page: page %>
+
+    <div class="pt-4">
+      <% if is_variant %>
+        <%= render "postnhost/shared/elements/button_link",
+          text: "Delete",
+          url: page_variant_path(page, resource),
+          variant: :danger,
+          icon: "trash",
+          extra_class: "w-full",
+          data: {
+            turbo_method: :delete,
+            turbo_confirm: "Are you sure you want to delete this variant? This action cannot be undone."
+          } %>
+      <% else %>
+        <%= render "postnhost/shared/elements/button_link",
+          text: "Delete",
+          url: resource,
+          variant: :danger,
+          icon: "trash",
+          extra_class: "w-full",
+          data: {
+            turbo_method: :delete,
+            turbo_confirm: "Are you sure you want to delete this page? This action cannot be undone."
+          } %>
+      <% end %>
+    </div>
+  </div>
+</div>