postnhost 0.0.0 → 0.1.0

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

@@ -0,0 +1,132 @@
+<% content_for :title, "Articles" %>
+
+<div class="space-y-6">
+  <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
+    <nav aria-label="Filter by status" class="flex w-full gap-0.5 overflow-x-auto rounded-lg bg-gray-100 p-0.5 sm:w-auto">
+      <% [
+        ["All", nil],
+        ["Published", "published"],
+        ["Draft", "draft"],
+        ["Scheduled", "scheduled"]
+      ].each do |label, status| %>
+        <%= link_to label,
+          articles_path(status:, sort: @sort),
+          class: [
+            "shrink-0 rounded-md px-2.5 py-1 text-xs font-medium cursor-pointer",
+            @status == status ? "bg-white text-gray-900 shadow-sm" : "text-gray-600 hover:text-gray-900"
+          ].join(" ") %>
+      <% end %>
+    </nav>
+
+    <%= form_with url: articles_path, method: :get, class: "w-full sm:w-auto" do %>
+      <%= hidden_field_tag :status, @status if @status.present? %>
+      <label for="articles-sort" class="sr-only">Sort</label>
+      <div class="relative rounded-lg bg-gray-100 p-0.5">
+        <%= select_tag :sort,
+          options_for_select(
+            [
+              ["Newest", "created_at_desc"],
+              ["Oldest", "created_at_asc"]
+            ],
+            @sort
+          ),
+          id: "articles-sort",
+          class: "w-full appearance-none rounded-md bg-transparent py-1 pl-2.5 pr-7 text-xs font-medium text-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-900 cursor-pointer sm:w-auto",
+          onchange: "this.form.requestSubmit()" %>
+        <span class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
+          <%= icon("chevron-down", css_class: "h-3.5 w-3.5 text-gray-500") %>
+        </span>
+      </div>
+    <% end %>
+  </div>
+
+  <% if @articles.any? %>
+    <div class="grid grid-cols-1 gap-6">
+      <% @articles.each do |article| %>
+        <div class="bg-white rounded-2xl border border-gray-200 p-6 hover:border-gray-300 transition-colors duration-200">
+          <div class="flex items-start justify-between">
+            <div class="flex-1">
+              <div class="flex items-center space-x-3 mb-2">
+                <span class="<%= stats_badge_classes(variant: article.published? ? :green : :gray) %>">
+                  <%= article.published? ? 'Published' : 'Draft' %>
+                </span>
+                <% if article.scheduled_at.present? && !article.published? %>
+                  <span class="<%= stats_badge_classes(variant: :blue) %>" title="Scheduled for <%= admin_datetime(article.scheduled_at, format: '%b %d, %Y at %H:%M %Z') %>">
+                    Scheduled
+                  </span>
+                  <span class="hidden md:inline-flex text-sm text-gray-500">
+                    <%= admin_datetime(article.scheduled_at, format: '%b %d, %Y at %H:%M %Z') %>
+                  </span>
+                <% end %>
+                <% if article.categories.loaded? && article.categories.any? %>
+                  <span class="hidden md:inline-flex text-sm text-gray-500"><%= article.categories.first.name %></span>
+                <% end %>
+                <span class="text-sm text-gray-500"><%= article.language&.name %></span>
+                <% if article.article_variants_count > 0 %>
+                  <span class="hidden md:inline-flex <%= stats_badge_classes(variant: :gray) %>">
+                    + <%= article.article_variants_count %>
+                  </span>
+                <% end %>
+              </div>
+
+              <%= link_to edit_article_path(article), class: "block group" do %>
+                <h3 class="text-lg font-semibold text-gray-900 group-hover:text-gray-700 mb-2">
+                  <%= article.title.presence || "Untitled Article" %>
+                </h3>
+                <% if article_excerpt(article).present? %>
+                  <p class="text-sm text-gray-600 mb-3">
+                    <%= article_excerpt(article) %>
+                  </p>
+                <% end %>
+              <% end %>
+
+              <div class="text-xs text-gray-500">
+                Updated <%= time_ago_in_words(article.updated_at) %> ago
+              </div>
+            </div>
+
+            <div class="flex items-center space-x-2 ml-6">
+              <%= link_to edit_article_path(article), class: "p-2 #{icon_button_classes}" do %>
+                <%= icon("edit", css_class: "w-4 h-4") %>
+              <% end %>
+              <%= button_to article, method: :delete,
+                  data: { turbo_confirm: "Are you sure you want to delete this article? This action cannot be undone." },
+                  class: "p-2 #{icon_button_classes(variant: :danger)} cursor-pointer" do %>
+                <%= icon("trash", css_class: "w-4 h-4") %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    </div>
+
+    <% if @pagy.pages > 1 %>
+      <div class="mt-8 flex justify-center">
+        <%== pagination_nav(@pagy) %>
+      </div>
+    <% end %>
+  <% elsif @status.present? %>
+    <%= render 'postnhost/shared/elements/empty_state',
+      icon: 'document-text',
+      title: 'No matching articles',
+      description: 'Try a different status filter, or clear filters to see all articles.' do %>
+      <%= render 'postnhost/shared/elements/button_link',
+        text: 'Clear filters',
+        url: articles_path(sort: @sort),
+        variant: :secondary,
+        extra_class: 'rounded-xl' %>
+    <% end %>
+  <% else %>
+    <%= render 'postnhost/shared/elements/empty_state',
+      icon: 'document-text',
+      title: 'No articles yet',
+      description: 'Get started by creating your first article.' do %>
+      <%= render 'postnhost/shared/elements/button_link',
+        text: 'Create Article',
+        url: new_article_path,
+        icon: 'plus',
+        extra_class: 'rounded-xl',
+        data: { turbo_prefetch: false } %>
+    <% end %>
+  <% end %>
+</div>

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

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

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

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

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

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

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

@@ -0,0 +1,17 @@
+<% content_for :title, "Previewing #{@article.title}" %>
+
+<div>
+  <!-- 3-Column Layout -->
+  <div class="flex min-h-screen">
+    <%= render 'postnhost/shared/articles/meta_sidebar_preview',
+        resource: @versioned_article %>
+
+    <%= render 'postnhost/shared/articles/editor_column_preview',
+        article: @versioned_article,
+        content: @versioned_article.content %>
+
+    <%= render 'postnhost/shared/articles/version_action_buttons',
+        article: @article,
+        version: @version %>
+  </div>
+</div>

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

@@ -0,0 +1,68 @@
+<% content_for :title, "Version History - #{@article.title}" %>
+
+<div class="space-y-8">
+  <%= render 'postnhost/shared/elements/page_header',
+    title: 'Version History',
+    description: "View and restore previous published versions of \"#{@article.title}\"" 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' %>
+  <% end %>
+
+  <div class="bg-white border border-gray-200 rounded-xl overflow-hidden">
+    <% if @versions.any? %>
+      <ul class="divide-y divide-gray-200">
+        <% @versions.each_with_index do |version, index| %>
+          <li class="p-4 sm:p-6 hover:bg-gray-50 transition-colors">
+            <div class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
+              <div class="min-w-0 flex-1">
+                <div class="mb-2 flex flex-wrap items-center gap-x-3 gap-y-2">
+                  <span class="inline-flex items-center px-3 py-1 rounded-full text-xs font-medium <%= version.id == @article.article_snapshot&.paper_trail_version_id ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' %>">
+                    <% if version.id == @article.article_snapshot&.paper_trail_version_id %>
+                      Published Version
+                    <% else %>
+                      Version <%= @versions.count - index %>
+                    <% end %>
+                  </span>
+                  <span class="text-sm text-gray-500">
+                    <%= admin_datetime(version.created_at) %>
+                  </span>
+                </div>
+
+                <%= render "postnhost/articles/version_snapshot", versioned: version.reify %>
+              </div>
+
+              <div class="flex w-full min-w-0 gap-2 sm:ml-4 sm:w-auto sm:flex-shrink-0 sm:justify-end">
+                <%= render 'postnhost/shared/elements/button_link',
+                  text: 'Preview',
+                  url: version_preview_article_path(@article, version_id: version.id),
+                  variant: :secondary,
+                  icon: 'eye',
+                  extra_class: 'flex-1 justify-center sm:flex-initial' %>
+                <%= render 'postnhost/shared/elements/button_link',
+                  text: 'Restore',
+                  url: rollback_article_path(@article, version_id: version.id),
+                  variant: :secondary,
+                  icon: 'clock',
+                  method: :post,
+                  extra_class: 'flex-1 justify-center sm:flex-initial',
+                  data: {
+                    turbo_method: :post,
+                    turbo_confirm: "Are you sure you want to restore this version? Your current changes will be overwritten."
+                  } %>
+              </div>
+            </div>
+          </li>
+        <% end %>
+      </ul>
+    <% else %>
+      <%= render 'postnhost/shared/elements/empty_state',
+        icon: 'clock',
+        title: 'No version history',
+        description: 'Versions are created when you publish changes to a published article.' %>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,77 @@
+<% content_for :title, "Editing #{@category.name}" %>
+
+<div class="space-y-8">
+  <%= render 'postnhost/shared/elements/page_header',
+    title: 'Edit Category',
+    description: 'Update category information' do %>
+
+    <%= render 'postnhost/shared/elements/button_link',
+      text: 'Back to Categories',
+      url: categories_path,
+      variant: :secondary,
+      icon: 'chevron-left',
+      extra_class: 'w-full md:w-auto' %>
+
+    <%= render 'postnhost/shared/elements/button_link',
+      text: 'Translations',
+      url: category_variants_path(@category),
+      icon: 'language',
+      extra_class: 'w-full md:w-auto' %>
+
+    <%= render 'postnhost/shared/elements/button_link',
+      text: 'Delete',
+      url: category_path(@category),
+      variant: :danger,
+      icon: 'trash',
+      extra_class: 'w-full md:w-auto',
+      data: {
+        turbo_method: :delete,
+        turbo_confirm: "Are you sure you want to delete this category? This action cannot be undone."
+      } %>
+  <% end %>
+
+  <div class="max-w-2xl">
+    <%= form_with model: @category, local: true, class: "space-y-6" do |form| %>
+      <%= render 'postnhost/shared/elements/error_messages', resource: @category %>
+
+      <%= render 'postnhost/shared/elements/form_card' do %>
+        <div>
+          <%= form.label :name, class: form_label_classes %>
+          <%= form.text_field :name,
+              class: form_input_classes,
+              placeholder: "Enter category name" %>
+        </div>
+
+        <div>
+          <%= form.label :slug, class: form_label_classes %>
+          <div class="flex">
+            <span class="inline-flex items-center px-4 py-3 border-r-0 border-gray-200 bg-gray-50 text-gray-500 text-sm font-medium rounded-l-xl">
+              /
+            </span>
+            <%= form.text_field :slug,
+                class: "block w-full rounded-r-xl border-gray-200 bg-gray-50 px-4 py-3 text-sm font-medium text-gray-900 transition-all duration-200 focus:border-gray-900 focus:bg-white focus:ring-0",
+                placeholder: "category-slug" %>
+          </div>
+          <p class="mt-1 text-sm text-gray-500">URL-friendly version of the category name</p>
+        </div>
+
+        <div>
+          <%= form.label :meta_description, "Description", class: form_label_classes %>
+          <%= form.text_area :meta_description,
+              rows: 3,
+              class: form_textarea_classes,
+              placeholder: "Optional description for this category" %>
+          <p class="mt-1 text-sm text-gray-500">This will be used for SEO meta descriptions and public category pages</p>
+        </div>
+      <% end %>
+
+      <div class="flex items-center space-x-4">
+        <%= form.submit "Update Category", class: button_classes %>
+        <%= render 'postnhost/shared/elements/button_link',
+          text: 'Cancel',
+          url: category_path(@category),
+          variant: :secondary %>
+      </div>
+    <% end %>
+  </div>
+</div>

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

@@ -0,0 +1,80 @@
+<% content_for :title, "Categories" %>
+
+<div class="space-y-8">
+  <%= render 'postnhost/shared/elements/page_header',
+    title: 'Categories',
+    description: 'Manage your article categories and their translations' do %>
+    <%= render 'postnhost/shared/elements/button_link',
+      text: 'New Category',
+      url: new_category_path,
+      icon: 'plus',
+      extra_class: 'w-full md:w-auto' %>
+  <% end %>
+
+  <% if @categories.any? %>
+    <%= render 'postnhost/shared/elements/table_container',
+      headers: [
+        { text: 'Category', class: 'col-span-6' },
+        { text: 'Articles', class: 'col-span-3' },
+        { text: 'Actions', class: 'col-span-3 text-right' }
+      ] do %>
+      <% @categories.each do |category| %>
+        <div class="<%= table_row_classes %>">
+          <div class="grid grid-cols-12 gap-4 items-center">
+            <div class="col-span-6">
+              <%= link_to category_path(category), class: "block group" do %>
+                <div class="font-medium text-gray-900 group-hover:text-gray-600 transition-colors">
+                  <%= category.name %>
+                </div>
+                <% if category.slug.present? %>
+                  <div class="text-sm text-gray-500 mt-1">
+                    /<%= category.slug %>
+                  </div>
+                <% end %>
+              <% end %>
+            </div>
+
+            <div class="col-span-3">
+              <span class="<%= stats_badge_classes(variant: :blue) %>">
+                <%= category.articles_count %>
+              </span>
+            </div>
+
+            <div class="col-span-3 flex items-center justify-end space-x-2">
+              <%= render 'postnhost/shared/elements/icon_button',
+                icon: 'eye',
+                url: category_path(category) %>
+
+              <%= render 'postnhost/shared/elements/icon_button',
+                icon: 'edit',
+                url: edit_category_path(category) %>
+
+              <%= render 'postnhost/shared/elements/icon_button',
+                icon: 'trash',
+                url: category_path(category),
+                variant: :danger,
+                data: {
+                  turbo_method: :delete,
+                  turbo_confirm: "Are you sure you want to delete this category? This action cannot be undone."
+                } %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= render 'postnhost/shared/elements/empty_state',
+      icon: 'folder',
+      title: 'No categories',
+      description: 'Get started by creating your first category.' do %>
+      <%= render 'postnhost/shared/elements/button_link',
+        text: 'New Category',
+        url: new_category_path,
+        icon: 'plus' %>
+    <% end %>
+  <% end %>
+
+  <div class="rounded-xl border border-gray-200 bg-gray-50 px-4 py-3 text-sm text-gray-600">
+    Categories appear in the footer between the list of the articles and a footer links if there are at least one published article in the category.
+  </div>
+</div>

data/app/views/postnhost/categories/new.html.erb

@@ -0,0 +1,50 @@
+<% content_for :title, "New Category" %>
+
+<div class="max-w-2xl">
+  <%= render 'postnhost/shared/elements/form_page_header',
+    title: 'New Category',
+    description: 'Create a new category for organizing your articles' %>
+
+  <%= form_with model: @category, url: postnhost.categories_path, local: true, class: "space-y-6" do |form| %>
+    <%= render 'postnhost/shared/elements/error_messages', resource: @category %>
+
+    <%= render 'postnhost/shared/elements/form_card' do %>
+      <div>
+        <%= form.label :name, class: form_label_classes %>
+        <%= form.text_field :name,
+            class: form_input_classes,
+            placeholder: "Enter category name" %>
+      </div>
+
+      <div>
+        <%= form.label :slug, class: form_label_classes %>
+        <div class="flex">
+          <span class="inline-flex items-center px-4 py-3 border-r-0 border-gray-200 bg-gray-50 text-gray-500 text-sm font-medium rounded-l-xl">
+            /
+          </span>
+          <%= form.text_field :slug,
+              class: "block w-full rounded-r-xl border-gray-200 bg-gray-50 px-4 py-3 text-sm font-medium text-gray-900 transition-all duration-200 focus:border-gray-900 focus:bg-white focus:ring-0",
+              placeholder: "category-slug" %>
+        </div>
+        <p class="mt-1 text-sm text-gray-500">URL-friendly version of the category name</p>
+      </div>
+
+      <div>
+        <%= form.label :meta_description, "Description", class: form_label_classes %>
+        <%= form.text_area :meta_description,
+            rows: 3,
+            class: form_textarea_classes,
+            placeholder: "Optional description for this category" %>
+        <p class="mt-1 text-sm text-gray-500">This will be used for SEO meta descriptions and public category pages</p>
+      </div>
+    <% end %>
+
+    <div class="flex items-center space-x-4">
+      <%= form.submit "Create Category", class: button_classes %>
+      <%= render 'postnhost/shared/elements/button_link',
+        text: 'Cancel',
+        url: postnhost.categories_path,
+        variant: :secondary %>
+    </div>
+  <% end %>
+</div>

data/app/views/postnhost/categories/show.html.erb

@@ -0,0 +1,99 @@
+<% content_for :title, @category.name %>
+
+<div class="space-y-8">
+  <%= render 'postnhost/shared/elements/page_header',
+    title: @category.name,
+    description: @category.meta_description,
+    stats: [
+      { text: "Slug: /#{@category.slug}", class: '' },
+      { text: "#{@pagy.count} articles", class: '' },
+      { text: "Open", url: public_category_path(@category.slug), icon: 'external-link', target: '_blank' }
+    ] do %>
+
+    <%= render 'postnhost/shared/elements/button_link',
+      text: 'Back to Categories',
+      url: categories_path(@article),
+      variant: :secondary,
+      icon: 'chevron-left',
+      extra_class: 'w-full md:w-auto' %>
+
+    <%= render 'postnhost/shared/elements/button_link',
+      text: 'Translations',
+      url: category_variants_path(@category),
+      icon: 'language',
+      extra_class: 'w-full md:w-auto' %>
+
+    <%= render 'postnhost/shared/elements/button_link',
+      text: 'Edit',
+      url: edit_category_path(@category),
+      icon: 'edit',
+      extra_class: 'w-full md:w-auto' %>
+
+    <%= render 'postnhost/shared/elements/button_link',
+      text: 'Delete',
+      url: category_path(@category),
+      variant: :danger,
+      icon: 'trash',
+      extra_class: 'w-full md:w-auto',
+      data: {
+        turbo_method: :delete,
+        turbo_confirm: "Are you sure you want to delete this category? This action cannot be undone."
+      } %>
+  <% end %>
+
+  <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="flex items-center justify-between">
+        <div>
+          <h2 class="text-lg font-medium text-gray-900">Articles</h2>
+          <p class="mt-1 text-sm text-gray-600">Articles in this category</p>
+        </div>
+
+        <span class="<%= stats_badge_classes(variant: :gray) %>">
+          <%= @pagy.count %> articles
+        </span>
+      </div>
+    </div>
+
+    <% if @articles.any? %>
+      <div class="divide-y divide-gray-200">
+        <% @articles.each do |article| %>
+          <div class="<%= table_row_classes %>">
+            <div class="flex items-center justify-between">
+              <div class="flex-1">
+                <%= link_to edit_article_path(article), class: "block group" do %>
+                  <div class="font-medium text-gray-900 group-hover:text-gray-600 transition-colors">
+                    <%= article.title.present? ? article.title : 'Untitled' %>
+                  </div>
+                  <div class="text-sm text-gray-500 mt-1 flex items-center space-x-4">
+                    <% if article.language %>
+                      <span><%= article.language.name %></span>
+                    <% end %>
+                    <span><%= article.created_at.strftime('%b %d, %Y') %></span>
+                  </div>
+                <% end %>
+              </div>
+
+              <div class="flex items-center space-x-2">
+                <span class="<%= stats_badge_classes(variant: article.published? ? :green : :gray) %>">
+                  <%= article.published? ? 'Published' : 'Draft' %>
+                </span>
+              </div>
+            </div>
+          </div>
+        <% end %>
+      </div>
+
+      <% if @pagy.pages > 1 %>
+        <div class="border-t border-gray-200 px-6 py-4">
+          <%== pagination_nav(@pagy) %>
+        </div>
+      <% end %>
+    <% else %>
+      <%= render 'postnhost/shared/elements/empty_state',
+        icon: 'document-text',
+        title: 'No articles',
+        description: 'No articles have been created in this category yet.' %>
+    <% end %>
+  </div>
+</div>

data/app/views/postnhost/category_variants/_category_variants_list.html.erb

@@ -0,0 +1,67 @@
+<% 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-1 min-w-0">
+        <% if variant.generating? %>
+          <div class="block">
+            <div class="font-medium text-gray-900">
+              <%= variant.name.present? ? variant.name : "Untitled translation" %>
+            </div>
+            <% if variant.meta_description.present? %>
+              <div class="text-sm text-gray-500 mt-1 line-clamp-1">
+                <%= variant.meta_description %>
+              </div>
+            <% end %>
+          </div>
+        <% else %>
+          <%= link_to edit_category_variant_path(category, variant), class: "block group" do %>
+            <div class="font-medium text-gray-900 group-hover:text-gray-600 transition-colors">
+              <%= variant.name %>
+            </div>
+            <% if variant.meta_description.present? %>
+              <div class="text-sm text-gray-500 mt-1 line-clamp-1">
+                <%= variant.meta_description %>
+              </div>
+            <% end %>
+          <% end %>
+        <% end %>
+      </div>
+
+      <div class="w-32 flex-shrink-0">
+        <span class="<%= stats_badge_classes(variant: :gray) %>">
+          <%= 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>
+        <% end %>
+      </div>
+
+      <div class="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_category_variant_path(category, variant), class: "text-gray-400 hover:text-gray-600 cursor-pointer" do %>
+            <%= icon("edit", css_class: "w-4 h-4") %>
+          <% end %>
+        <% end %>
+
+        <%= link_to category_variant_path(category, variant),
+            class: "text-gray-400 hover:text-red-600 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/category_variants/_form.html.erb

@@ -0,0 +1,29 @@
+<%= render 'postnhost/shared/elements/form_card' do %>
+  <% if category_variant.language %>
+    <div>
+      <label class="<%= form_label_classes %>">Language</label>
+      <div class="flex items-center space-x-2 py-3">
+        <span class="<%= stats_badge_classes(variant: :gray) %>">
+          <%= category_variant.language.name %>
+        </span>
+      </div>
+      <%= form.hidden_field :language_id %>
+    </div>
+  <% end %>
+
+  <div>
+    <%= form.label :name, class: form_label_classes %>
+    <%= form.text_field :name,
+        class: form_input_classes,
+        placeholder: "Translated category name" %>
+  </div>
+
+  <div>
+    <%= form.label :meta_description, "Description", class: form_label_classes %>
+    <%= form.text_area :meta_description,
+        rows: 3,
+        class: form_textarea_classes,
+        placeholder: "Translated description for this category" %>
+    <p class="mt-1 text-sm text-gray-500">This will be used for SEO meta descriptions in this language</p>
+  </div>
+<% end %>

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

@@ -0,0 +1,21 @@
+<% content_for :title, "Editing #{@category.name}" %>
+
+<div class="max-w-2xl">
+  <%= render 'postnhost/shared/elements/form_page_header',
+    title: 'Edit Translation',
+    description: "Update #{@category_variant.language.name} translation for \"#{@category.name}\"" %>
+
+  <%= form_with model: @category_variant, url: category_variant_path(@category, @category_variant), local: true, class: "space-y-6" do |form| %>
+    <%= render 'postnhost/shared/elements/error_messages', resource: @category_variant %>
+
+    <%= render 'postnhost/category_variants/form', form: form, category_variant: @category_variant %>
+
+    <div class="flex items-center space-x-4">
+      <%= form.submit "Update Translation", class: button_classes %>
+      <%= render 'postnhost/shared/elements/button_link',
+        text: 'Cancel',
+        url: category_variants_path(@category),
+        variant: :secondary %>
+    </div>
+  <% end %>
+</div>