postnhost 0.0.0 → 0.1.0

data/app/views/postnhost/article_variants/_variants_list.html.erb

@@ -0,0 +1,82 @@
+<% variants.each do |variant| %>
+  <div class="px-6 py-4 hover:bg-gray-50 transition-colors duration-200">
+    <div class="flex items-center gap-2 md:gap-4">
+      <div class="flex items-center justify-center w-6 md:w-8 flex-shrink-0">
+        <input
+          type="checkbox"
+          name="ids[]"
+          value="<%= variant.id %>"
+          data-bulk-selection-target="checkbox"
+          data-action="change->bulk-selection#toggle"
+          <%= "disabled" if variant.generating? %>
+          class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 <%= variant.generating? ? 'cursor-not-allowed opacity-50' : 'cursor-pointer' %>"
+        >
+      </div>
+      <div class="flex-1 min-w-0">
+        <% if variant.generating? %>
+          <div class="block">
+            <div class="font-medium text-gray-900">
+              <%= variant.title.present? ? variant.title : 'Untitled Translation' %>
+            </div>
+            <% if variant.meta_description.present? %>
+              <div class="text-sm text-gray-500 mt-1 line-clamp-2">
+                <%= variant.meta_description %>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <%= link_to edit_article_variant_path(variant.article, variant), class: "block group" do %>
+            <div class="font-medium text-gray-900 group-hover:text-gray-600 transition-colors">
+              <%= variant.title.present? ? variant.title : 'Untitled Translation' %>
+            </div>
+            <% if variant.meta_description.present? %>
+              <div class="text-sm text-gray-500 mt-1 line-clamp-2">
+                <%= variant.meta_description %>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+
+      <div class="hidden md:block md:w-32 flex-shrink-0">
+        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
+          <%= variant.language.name %>
+        </span>
+      </div>
+
+      <div class="hidden md:block md:w-28 flex-shrink-0">
+        <% if variant.generating? %>
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+            <%= icon("spinner", css_class: "animate-spin -ml-1 mr-1.5 h-3 w-3 text-purple-800") %>
+            Translating
+          </span>
+        <% else %>
+          <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium <%= variant.published? ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' %>">
+            <%= variant.published? ? 'Published' : 'Draft' %>
+          </span>
+        <% end %>
+      </div>
+
+      <div class="w-16 md:w-24 flex items-center justify-end space-x-2 flex-shrink-0">
+        <% if variant.generating? %>
+          <span class="text-gray-300 cursor-not-allowed inline-flex" title="Editing is available when translation finishes">
+            <%= icon("edit", css_class: "w-4 h-4") %>
+          </span>
+        <% else %>
+          <%= link_to edit_article_variant_path(variant.article, variant), class: "text-gray-400 hover:text-gray-600 transition-colors cursor-pointer" do %>
+            <%= icon("edit", css_class: "w-4 h-4") %>
+          <% end %>
+        <% end %>
+
+        <%= link_to article_variant_path(variant.article, variant), method: :delete,
+            class: "text-gray-400 hover:text-red-600 transition-colors cursor-pointer",
+            data: {
+              turbo_method: :delete,
+              turbo_confirm: "Are you sure you want to delete this translation? This action cannot be undone."
+            } do %>
+          <%= icon("trash", css_class: "w-4 h-4") %>
+        <% end %>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/views/postnhost/article_variants/edit.html.erb

@@ -0,0 +1,48 @@
+<% content_for :title, "Editing #{@article.title}" %>
+
+<div data-controller="auto-save publish-guard editor-mobile-sidebars">
+  <%= form_with model: @article_variant, url: article_variant_path(@article, @article_variant), local: true, data: { auto_save_target: "form" } do |form| %>
+  <%= render 'postnhost/shared/articles/error_messages', resource: @article_variant, resource_type: "variant" %>
+
+  <div class="md:hidden px-4 py-3 bg-white border-b border-gray-200">
+    <div class="grid grid-cols-2 gap-2">
+      <button type="button"
+              data-action="click->editor-mobile-sidebars#toggleMeta"
+              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">
+        Details
+      </button>
+      <button type="button"
+              data-action="click->editor-mobile-sidebars#toggleActions"
+              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">
+        Actions
+      </button>
+    </div>
+  </div>
+
+  <div class="flex flex-col md:flex-row min-h-screen">
+    <%= render 'postnhost/shared/articles/meta_sidebar',
+        form: form,
+        resource: @article_variant,
+        article: @article,
+        is_variant: true,
+        languages: nil,
+        categories: nil,
+        mobile_target: "metaSidebar" %>
+
+    <%= render 'postnhost/shared/articles/editor_column',
+        form: form,
+        article: @article,
+        content: @article_variant.content,
+        is_variant: true,
+        placeholder: "Translation Title" %>
+
+    <%= render 'postnhost/shared/articles/action_buttons',
+        form: form,
+        resource: @article_variant,
+        resource_type: "variant",
+        article: @article,
+        is_variant: true,
+        mobile_target: "actionsSidebar" %>
+  </div>
+<% end %>
+</div>

data/app/views/postnhost/article_variants/index.html.erb

@@ -0,0 +1,128 @@
+<% content_for :title, "Translations for #{@article.title}" %>
+
+<%= turbo_stream_from "article_variants_#{@article.id}" %>
+<div class="space-y-8" data-controller="ai-translation dialog" data-action="click->dialog#backdropClose">
+  <%= render 'postnhost/shared/elements/page_header',
+    title: 'Article Translations',
+    description: "Manage translations for \"#{@article.title.present? ? @article.title : 'Untitled Article'}\"",
+    stats: [
+      { text: "#{@pagy.count} translations", class: '' },
+      { text: "#{@available_languages.count} available languages", class: '' }
+    ] do %>
+    <%= render 'postnhost/shared/elements/button_link',
+      text: 'Back to Article',
+      url: edit_article_path(@article),
+      variant: :secondary,
+      icon: 'chevron-left',
+      extra_class: 'w-full md:w-auto' %>
+
+    <% if @available_languages.any? %>
+      <button
+        data-action="dialog#open"
+        class="<%= button_classes %> w-full md:w-auto">
+        <%= icon("sparkles", css_class: "w-4 h-4 mr-2") %>
+        Translate with AI
+      </button>
+
+      <div class="relative w-full md:w-auto" data-controller="dropdown">
+        <button
+          data-action="click->dropdown#toggle"
+          class="<%= button_classes %> w-full md:w-auto">
+          <%= icon("language", css_class: "w-4 h-4 mr-2") %>
+          Manual Translation
+          <%= icon("chevron-down", css_class: "w-4 h-4 ml-2") %>
+        </button>
+
+        <div data-dropdown-target="menu" class="absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-gray-200 overflow-hidden z-20 hidden">
+          <div class="py-1">
+            <% @available_languages.each do |language| %>
+              <%= link_to new_article_variant_path(@article, language_id: language.id), data: { turbo_prefetch: false}, class: "flex items-center px-4 py-3 text-sm text-gray-700 hover:bg-gray-50 transition-colors duration-150" do %>
+                <div class="flex-1">
+                  <div class="font-medium"><%= language.name %></div>
+                  <div class="text-xs text-gray-500"><%= language.html_lang %></div>
+                </div>
+              <% end %>
+            <% end %>
+          </div>
+        </div>
+      </div>
+    <% else %>
+      <span class="<%= button_classes(variant: :secondary, disabled: true) %> w-full md:w-auto">
+        All languages translated
+      </span>
+    <% end %>
+  <% end %>
+
+  <% if @variants.any? %>
+    <%= form_with url: "#", method: :patch, data: { controller: "bulk-selection" } do |form| %>
+      <div class="bg-white rounded-lg border border-gray-200 overflow-hidden">
+        <div data-bulk-selection-target="bulkActions" class="hidden px-6 py-4 bg-gray-50 border-b border-gray-200">
+          <div class="flex items-center justify-between">
+            <span class="text-sm font-medium text-gray-700">
+              <span data-bulk-selection-target="selectedCount">0</span> translation(s) selected
+            </span>
+            <div class="flex space-x-3">
+              <%= form.button type: "submit",
+                  formaction: bulk_publish_article_variants_path(@article),
+                  data: { turbo_confirm: "Publish selected translation(s)?" },
+                  class: "#{button_classes} bg-green-600 hover:bg-green-700" do %>
+                Publish
+              <% end %>
+              <%= form.button type: "submit",
+                  formaction: bulk_unpublish_article_variants_path(@article),
+                  data: { turbo_confirm: "Unpublish selected translation(s)?" },
+                  class: "#{button_classes(variant: :secondary)} border border-gray-300" do %>
+                Unpublish
+              <% end %>
+              <%= form.button type: "submit",
+                  formaction: bulk_destroy_article_variants_path(@article),
+                  formmethod: "delete",
+                  data: { turbo_confirm: "Are you sure you want to delete the selected translation(s)? This action cannot be undone." },
+                  class: "#{button_classes} bg-red-600 hover:bg-red-700" do %>
+                Delete
+              <% end %>
+            </div>
+          </div>
+        </div>
+
+      <div class="px-6 py-4 border-b border-gray-200 bg-gray-50">
+        <div class="flex items-center gap-2 md:gap-4 text-xs font-medium text-gray-500 uppercase tracking-wider">
+          <div class="flex items-center justify-center w-6 md:w-8">
+            <input
+              type="checkbox"
+              data-bulk-selection-target="checkAll"
+              data-action="change->bulk-selection#toggleAll"
+              class="w-4 h-4 text-blue-600 bg-gray-100 border-gray-300 rounded focus:ring-blue-500 cursor-pointer"
+            >
+          </div>
+          <div class="flex-1">Translation</div>
+          <div class="hidden md:block md:w-32">Language</div>
+          <div class="hidden md:block md:w-28">Status</div>
+          <div class="w-16 md:w-24 text-right">Actions</div>
+        </div>
+      </div>
+
+        <div id="variants_list" class="divide-y divide-gray-200">
+          <%= render partial: "variants_list", locals: { variants: @variants } %>
+        </div>
+      </div>
+    <% end %>
+
+    <!-- Pagination -->
+    <% if @pagy.pages > 1 %>
+      <div class="mt-8 flex justify-center">
+        <%== pagination_nav(@pagy) %>
+      </div>
+    <% end %>
+  <% else %>
+    <%= render 'postnhost/shared/elements/empty_state',
+      icon: 'translate',
+      title: 'No translations',
+      description: 'Use "Translate with AI" to automatically create translations, or "Manual Translation" to create them manually.' %>
+  <% end %>
+
+  <%= render "postnhost/shared/ai_translation_modal",
+      subject_title: (@article.title.present? ? @article.title : "this article"),
+      form_url: article_translations_path(@article),
+      available_languages: @available_languages %>
+</div>

data/app/views/postnhost/article_variants/publish.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace "article_variant_actions" do %>
+  <%= render "postnhost/shared/articles/post_actions", resource: @article_variant, resource_type: "variant", article: @article %>
+<% end %>

data/app/views/postnhost/article_variants/unpublish.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace "article_variant_actions" do %>
+  <%= render "postnhost/shared/articles/post_actions", resource: @article_variant, resource_type: "variant", article: @article %>
+<% end %>

data/app/views/postnhost/article_variants/update.turbo_stream.erb

@@ -0,0 +1,3 @@
+<%= turbo_stream.replace "article_variant_actions" do %>
+  <%= render "postnhost/shared/articles/post_actions", resource: @article_variant, resource_type: "variant", article: @article %>
+<% end %>

data/app/views/postnhost/articles/_author_manager.html.erb

@@ -0,0 +1,38 @@
+<div data-controller="author-manager">
+  <%= hidden_field_tag "#{form.object_name}[author_ids][]", "" %>
+  <div data-author-manager-target="authorList" class="space-y-2 mb-3">
+    <% article.authors.each do |author| %>
+      <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-xl" data-author-id="<%= author.id %>">
+        <span class="text-sm text-gray-900" data-author-name><%= author.name.presence || author.email %></span>
+        <button type="button" class="text-gray-400 hover:text-red-600 transition-colors cursor-pointer" data-action="click->author-manager#removeAuthor">
+          <%= icon("close", css_class: "w-4 h-4") %>
+        </button>
+        <%= form.hidden_field :author_ids, value: author.id, multiple: true %>
+      </div>
+    <% end %>
+  </div>
+
+  <button type="button" data-author-manager-target="addButton" data-action="click->author-manager#showSelector" class="w-full text-left px-3 py-2 border border-dashed border-gray-300 rounded-xl text-sm text-gray-500 hover:border-gray-400 hover:text-gray-700 transition-colors cursor-pointer">
+    + Add author
+  </button>
+
+  <div data-author-manager-target="selector" class="hidden mt-2">
+    <select data-action="change->author-manager#addAuthor" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent text-sm bg-white">
+      <option value="">Select an author to add...</option>
+      <% users.each do |user| %>
+        <option value="<%= user.id %>"><%= user.name.presence || user.email %></option>
+      <% end %>
+    </select>
+    <button type="button" data-action="click->author-manager#hideSelector" class="mt-2 text-xs text-gray-500 hover:text-gray-700 cursor-pointer">Cancel</button>
+  </div>
+
+  <template data-author-manager-target="template">
+    <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-xl" data-author-id="">
+      <span class="text-sm text-gray-900" data-author-name></span>
+      <button type="button" class="text-gray-400 hover:text-red-600 transition-colors cursor-pointer" data-action="click->author-manager#removeAuthor">
+        <%= icon("close", css_class: "w-4 h-4") %>
+      </button>
+      <%= form.hidden_field :author_ids, value: "", multiple: true %>
+    </div>
+  </template>
+</div>

data/app/views/postnhost/articles/_category_manager.html.erb

@@ -0,0 +1,42 @@
+<div data-controller="category-manager">
+  <%= hidden_field_tag "#{form.object_name}[category_ids][]", "" %>
+  <!-- Current Categories -->
+  <div data-category-manager-target="categoryList" class="space-y-2 mb-3">
+    <% article.categories.each do |category| %>
+      <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-xl" data-category-id="<%= category.id %>">
+        <span class="text-sm text-gray-900" data-category-name><%= category.name %></span>
+        <button type="button" class="text-gray-400 hover:text-red-600 transition-colors cursor-pointer" data-action="click->category-manager#removeCategory">
+          <%= icon("close", css_class: "w-4 h-4") %>
+        </button>
+        <%= form.hidden_field :category_ids, value: category.id, multiple: true %>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Add Category Button -->
+  <button type="button" data-category-manager-target="addButton" data-action="click->category-manager#showSelector" class="w-full text-left px-3 py-2 border border-dashed border-gray-300 rounded-xl text-sm text-gray-500 hover:border-gray-400 hover:text-gray-700 transition-colors cursor-pointer">
+    + Add category
+  </button>
+
+  <!-- Category Selector (Hidden by default) -->
+  <div data-category-manager-target="selector" class="hidden mt-2">
+    <select data-action="change->category-manager#addCategory" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent text-sm bg-white">
+      <option value="">Select a category to add...</option>
+      <% categories.each do |category| %>
+        <option value="<%= category.id %>"><%= category.name %></option>
+      <% end %>
+    </select>
+    <button type="button" data-action="click->category-manager#hideSelector" class="mt-2 text-xs text-gray-500 hover:text-gray-700 cursor-pointer">Cancel</button>
+  </div>
+
+  <!-- Template for new category items -->
+  <template data-category-manager-target="template">
+    <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-xl" data-category-id="">
+      <span class="text-sm text-gray-900" data-category-name></span>
+      <button type="button" class="text-gray-400 hover:text-red-600 transition-colors cursor-pointer" data-action="click->category-manager#removeCategory">
+        <%= icon("close", css_class: "w-4 h-4") %>
+      </button>
+      <%= form.hidden_field :category_ids, value: "", multiple: true %>
+    </div>
+  </template>
+</div>

data/app/views/postnhost/articles/_cover_image_upload.html.erb

@@ -0,0 +1,82 @@
+<div class="px-6 py-4 border-b border-gray-100"
+     data-controller="cover-image-upload collapsible-sidebar"
+     data-cover-image-upload-article-id-value="<%= article.id %>"
+     data-cover-image-upload-mount-path-value="<%= postnhost.root_path %>"
+     data-collapsible-sidebar-storage-key-value="article-cover-image-<%= article.id %>">
+  <div data-collapsible-sidebar-target="section" data-section-id="cover-image">
+    <div class="flex items-center justify-between">
+      <button type="button"
+              class="inline-flex items-center text-left cursor-pointer"
+              data-role="section-toggle"
+              data-action="click->collapsible-sidebar#toggle"
+              data-collapsible-sidebar-id-param="cover-image"
+              aria-expanded="true"
+              aria-controls="cover-image-section-<%= article.id %>">
+        <span class="text-sm font-medium text-gray-900">Cover Image (ogimage)</span>
+        <span data-role="section-icon" class="ml-1 inline-flex text-gray-400 transition-transform duration-200 rotate-0">
+          <%= icon("chevron-down", css_class: "w-4 h-4") %>
+        </span>
+      </button>
+      <button type="button"
+              data-role="section-accessory"
+              class="mb-2 inline-flex items-center px-2.5 py-1 bg-gray-200 text-gray-400 text-xs font-medium rounded-lg cursor-not-allowed opacity-60"
+              disabled
+              title="AI generation coming soon">
+        <%= icon("sparkles", css_class: "w-3 h-3 mr-1") %>
+        <span>Generate</span>
+      </button>
+    </div>
+
+    <div data-role="section-content" id="cover-image-section-<%= article.id %>">
+      <!-- Preview with Alt Text -->
+      <div data-cover-image-upload-target="preview" class="<%= 'hidden' unless article.cover_image? %> space-y-2">
+        <div class="relative">
+          <%= image_tag(article.cover_image? ? article.cover_image.url : '',
+                alt: article.cover_image_alt,
+                width: 1200,
+                height: 630,
+                data: { cover_image_upload_target: "previewImage" },
+                class: "w-full object-cover") %>
+          <button type="button" data-action="click->cover-image-upload#removeImage" class="absolute top-2 right-2 bg-white/90 hover:bg-red-50 text-gray-600 hover:text-red-600 p-1.5 rounded-lg shadow transition-colors cursor-pointer">
+            <%= icon("trash", css_class: "w-4 h-4") %>
+          </button>
+        </div>
+        <%= form.text_field :cover_image_alt,
+              data: { cover_image_upload_target: "altField" },
+              class: "w-full px-3 py-1.5 rounded-lg focus:outline-none text-sm text-gray-600",
+              placeholder: "Add alt text...",
+              autocomplete: "off" %>
+      </div>
+
+      <!-- Compact Upload Area -->
+      <div data-cover-image-upload-target="uploadSection" class="<%= 'hidden' if article.cover_image? %>">
+        <div data-cover-image-upload-target="uploadArea"
+             data-action="dragover->cover-image-upload#dragOver dragleave->cover-image-upload#dragLeave drop->cover-image-upload#drop"
+             class="border-2 border-dashed border-gray-300 rounded-lg p-4 text-center hover:border-gray-400 transition-colors">
+
+          <%= form.file_field :cover_image,
+                data: { cover_image_upload_target: "input", action: "change->cover-image-upload#selectFile" },
+                accept: "image/jpeg,image/png,image/gif,image/webp,image/heic",
+                class: "hidden" %>
+
+          <!-- Placeholder -->
+          <div data-cover-image-upload-target="placeholder">
+            <div class="w-8 h-8 bg-gray-100 rounded-lg flex items-center justify-center mx-auto mb-2">
+              <%= icon("image", css_class: "w-4 h-4 text-gray-400") %>
+            </div>
+            <p class="text-xs text-gray-600 mb-1">Drag and drop or <button type="button" data-action="click->cover-image-upload#triggerFileInput" class="text-gray-900 font-medium hover:underline">browse</button></p>
+            <p class="text-xs text-gray-400">1200x630 • Max 25MB</p>
+          </div>
+
+          <!-- Loading Spinner -->
+          <div data-cover-image-upload-target="spinner" class="hidden flex items-center justify-center">
+            <span class="inline-flex items-center px-2.5 py-1 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
+              <%= icon("spinner", css_class: "animate-spin -ml-0.5 mr-1.5 h-3 w-3 text-purple-800") %>
+              Uploading...
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

data/app/views/postnhost/articles/_suggestion_manager.html.erb

@@ -0,0 +1,43 @@
+<div data-controller="suggestion-manager">
+  <%= hidden_field_tag "#{form.object_name}[suggested_article_ids][]", "" %>
+  <!-- Current Suggestions -->
+  <div data-suggestion-manager-target="suggestionList" class="space-y-2 mb-3">
+    <% article.suggested_articles.each do |suggested| %>
+      <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-xl" data-suggestion-id="<%= suggested.id %>">
+        <span class="text-sm text-gray-900 truncate" data-suggestion-name><%= suggested.title %></span>
+        <button type="button" class="text-gray-400 hover:text-red-600 transition-colors cursor-pointer flex-shrink-0 ml-2" data-action="click->suggestion-manager#removeSuggestion">
+          <%= icon("close", css_class: "w-4 h-4") %>
+        </button>
+        <%= form.hidden_field :suggested_article_ids, value: suggested.id, multiple: true %>
+      </div>
+    <% end %>
+  </div>
+
+  <!-- Add Suggestion Button -->
+  <button type="button" data-suggestion-manager-target="addButton" data-action="click->suggestion-manager#showSelector" class="w-full text-left px-3 py-2 border border-dashed border-gray-300 rounded-xl text-sm text-gray-500 hover:border-gray-400 hover:text-gray-700 transition-colors cursor-pointer">
+    + Add suggestion
+  </button>
+
+  <!-- Suggestion Selector (Hidden by default) -->
+  <div data-suggestion-manager-target="selector" class="hidden mt-2">
+    <select data-action="change->suggestion-manager#addSuggestion" class="w-full px-3 py-2 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-gray-900 focus:border-transparent text-sm bg-white">
+      <option value="">Select an article to suggest...</option>
+      <% articles.each do |a| %>
+        <% next if a.id == article.id %>
+        <option value="<%= a.id %>"><%= a.title %></option>
+      <% end %>
+    </select>
+    <button type="button" data-action="click->suggestion-manager#hideSelector" class="mt-2 text-xs text-gray-500 hover:text-gray-700 cursor-pointer">Cancel</button>
+  </div>
+
+  <!-- Template for new suggestion items -->
+  <template data-suggestion-manager-target="template">
+    <div class="flex items-center justify-between bg-gray-50 px-3 py-2 rounded-xl" data-suggestion-id="">
+      <span class="text-sm text-gray-900 truncate" data-suggestion-name></span>
+      <button type="button" class="text-gray-400 hover:text-red-600 transition-colors cursor-pointer flex-shrink-0 ml-2" data-action="click->suggestion-manager#removeSuggestion">
+        <%= icon("close", css_class: "w-4 h-4") %>
+      </button>
+      <%= form.hidden_field :suggested_article_ids, value: "", multiple: true %>
+    </div>
+  </template>
+</div>

data/app/views/postnhost/articles/_version_snapshot.html.erb

@@ -0,0 +1,10 @@
+<%# locals: versioned (Article snapshot from PaperTrail#reify, or nil) %>
+<% if versioned %>
+  <h3 class="text-lg font-medium text-gray-900 mb-1 break-words"><%= versioned.title %></h3>
+  <% if versioned.meta_description.present? %>
+    <p class="text-sm text-gray-600 mb-2 break-words"><%= truncate(versioned.meta_description, length: 120) %></p>
+  <% end %>
+  <div class="text-xs text-gray-500 break-words">
+    Content: <%= truncate(strip_tags(versioned.content), length: 100) %>
+  </div>
+<% end %>

data/app/views/postnhost/articles/edit.html.erb

@@ -0,0 +1,51 @@
+<% content_for :title, "Editing #{@article.title}" %>
+
+<div data-controller="auto-save publish-guard editor-mobile-sidebars">
+<%= form_with model: @article, local: true, data: { auto_save_target: "form" } do |form| %>
+  <%= render 'postnhost/shared/articles/error_messages', resource: @article, resource_type: "article" %>
+
+  <div class="md:hidden px-4 py-3 bg-white border-b border-gray-200">
+    <div class="grid grid-cols-2 gap-2">
+      <button type="button"
+              data-action="click->editor-mobile-sidebars#toggleMeta"
+              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">
+        Details
+      </button>
+      <button type="button"
+              data-action="click->editor-mobile-sidebars#toggleActions"
+              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">
+        Actions
+      </button>
+    </div>
+  </div>
+
+  <!-- 3-Column Layout -->
+  <div class="flex flex-col md:flex-row min-h-screen">
+    <%= render 'postnhost/shared/articles/meta_sidebar',
+        form: form,
+        resource: @article,
+        article: @article,
+        is_variant: false,
+        languages: @languages,
+        users: @users,
+        categories: @categories,
+        articles: @articles,
+        mobile_target: "metaSidebar" %>
+
+    <%= render 'postnhost/shared/articles/editor_column',
+        form: form,
+        article: @article,
+        content: @article.content,
+        is_variant: false,
+        placeholder: "Untitled Article" %>
+
+    <%= render 'postnhost/shared/articles/action_buttons',
+        form: form,
+        resource: @article,
+        resource_type: "article",
+        article: @article,
+        is_variant: false,
+        mobile_target: "actionsSidebar" %>
+  </div>
+<% end %>
+</div>