postnhost 0.0.0 → 0.1.1

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

@@ -0,0 +1,132 @@
+<div class="order-2 md:order-1 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] %>"
+     data-controller="collapsible-sidebar"
+     data-collapsible-sidebar-storage-key-value="<%= is_variant ? "page-variant-sidebar-#{resource.id}" : "page-sidebar-#{resource.id}" %>">
+  <div class="md:hidden flex items-center justify-between mb-4">
+    <h3 class="text-sm font-semibold text-gray-900">Details</h3>
+    <button type="button"
+            class="text-gray-500 hover:text-gray-700 cursor-pointer"
+            data-action="click->editor-mobile-sidebars#closeMeta">
+      <%= icon("close", css_class: "w-4 h-4") %>
+    </button>
+  </div>
+
+  <div class="space-y-6">
+    <div data-collapsible-sidebar-target="section" data-section-id="title-tag">
+      <button type="button"
+              class="w-full flex items-center justify-between text-left mb-2 cursor-pointer"
+              data-role="section-toggle"
+              data-action="click->collapsible-sidebar#toggle"
+              data-collapsible-sidebar-id-param="title-tag"
+              aria-expanded="true"
+              aria-controls="sidebar-section-title-tag">
+        <span class="text-sm font-medium text-gray-900">Title Tag</span>
+        <span data-role="section-icon" class="inline-flex text-gray-400 transition-transform duration-200 rotate-0">
+          <%= icon("chevron-down", css_class: "w-4 h-4") %>
+        </span>
+      </button>
+      <div data-role="section-content" id="sidebar-section-title-tag">
+        <%= form.text_field :title_tag, 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", placeholder: "Fallbacks to page title if empty", autocomplete: "off" %>
+      </div>
+    </div>
+
+    <div data-collapsible-sidebar-target="section" data-section-id="meta-description">
+      <button type="button"
+              class="w-full flex items-center justify-between text-left mb-2 cursor-pointer"
+              data-role="section-toggle"
+              data-action="click->collapsible-sidebar#toggle"
+              data-collapsible-sidebar-id-param="meta-description"
+              aria-expanded="true"
+              aria-controls="sidebar-section-meta-description">
+        <span class="text-sm font-medium text-gray-900">Meta Description</span>
+        <span data-role="section-icon" class="inline-flex text-gray-400 transition-transform duration-200 rotate-0">
+          <%= icon("chevron-down", css_class: "w-4 h-4") %>
+        </span>
+      </button>
+      <div data-role="section-content" id="sidebar-section-meta-description">
+        <%= form.text_area :meta_description, rows: 4, 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 resize-none", placeholder: "Brief description for SEO...", autocomplete: "off" %>
+        <p class="mt-2 text-xs text-gray-500">Recommended: 150-160 characters.</p>
+      </div>
+    </div>
+
+    <div data-collapsible-sidebar-target="section" data-section-id="og-title" data-default-collapsed="true">
+      <button type="button"
+              class="w-full flex items-center justify-between text-left mb-2 cursor-pointer"
+              data-role="section-toggle"
+              data-action="click->collapsible-sidebar#toggle"
+              data-collapsible-sidebar-id-param="og-title"
+              aria-expanded="false"
+              aria-controls="sidebar-section-og-title">
+        <span class="text-sm font-medium text-gray-900">OG Title</span>
+        <span data-role="section-icon" class="inline-flex text-gray-400 transition-transform duration-200 -rotate-90">
+          <%= icon("chevron-down", css_class: "w-4 h-4") %>
+        </span>
+      </button>
+      <div data-role="section-content" id="sidebar-section-og-title" class="hidden">
+        <%= form.text_field :og_title, 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", placeholder: "Fallbacks to Title Tag / title if empty", autocomplete: "off" %>
+      </div>
+    </div>
+
+    <% if is_variant %>
+      <div data-collapsible-sidebar-target="section" data-section-id="language">
+        <button type="button"
+                class="w-full flex items-center justify-between text-left mb-2 cursor-pointer"
+                data-role="section-toggle"
+                data-action="click->collapsible-sidebar#toggle"
+                data-collapsible-sidebar-id-param="language"
+                aria-expanded="true"
+                aria-controls="sidebar-section-language">
+          <span class="text-sm font-medium text-gray-900">Language</span>
+          <span data-role="section-icon" class="inline-flex text-gray-400 transition-transform duration-200 rotate-0">
+            <%= icon("chevron-down", css_class: "w-4 h-4") %>
+          </span>
+        </button>
+        <div data-role="section-content" id="sidebar-section-language">
+          <%= form.text_field :language, disabled: true, value: resource.language&.name, 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 disabled:bg-gray-100" %>
+        </div>
+      </div>
+    <% else %>
+      <div data-collapsible-sidebar-target="section" data-section-id="url-slug">
+        <button type="button"
+                class="w-full flex items-center justify-between text-left mb-2 cursor-pointer"
+                data-role="section-toggle"
+                data-action="click->collapsible-sidebar#toggle"
+                data-collapsible-sidebar-id-param="url-slug"
+                aria-expanded="true"
+                aria-controls="sidebar-section-url-slug">
+          <span class="text-sm font-medium text-gray-900">URL Slug</span>
+          <span data-role="section-icon" class="inline-flex text-gray-400 transition-transform duration-200 rotate-0">
+            <%= icon("chevron-down", css_class: "w-4 h-4") %>
+          </span>
+        </button>
+        <div data-role="section-content" id="sidebar-section-url-slug">
+          <%= form.text_field :slug, 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", placeholder: "page-url-slug", autocomplete: "off" %>
+        </div>
+      </div>
+    <% end %>
+
+    <div class="pt-4 border-t border-gray-100" data-collapsible-sidebar-target="section" data-section-id="timestamps">
+      <button type="button"
+              class="w-full flex items-center justify-between text-left mb-2 cursor-pointer"
+              data-role="section-toggle"
+              data-action="click->collapsible-sidebar#toggle"
+              data-collapsible-sidebar-id-param="timestamps"
+              aria-expanded="true"
+              aria-controls="sidebar-section-timestamps">
+        <span class="text-sm font-medium text-gray-900">Timestamps</span>
+        <span data-role="section-icon" class="inline-flex text-gray-400 transition-transform duration-200 rotate-0">
+          <%= icon("chevron-down", css_class: "w-4 h-4") %>
+        </span>
+      </button>
+      <div data-role="section-content" id="sidebar-section-timestamps">
+        <div class="text-sm text-gray-600 space-y-1">
+          <p><strong>Created:</strong> <%= admin_datetime(resource.created_at) %></p>
+          <p><strong>Updated:</strong> <%= admin_datetime(resource.updated_at) %></p>
+          <% if !is_variant && resource.page_snapshot.present? %>
+            <p><strong>Published:</strong> <%= admin_datetime(resource.page_snapshot.published_at) %></p>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>

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

@@ -0,0 +1,69 @@
+<%= turbo_frame_tag (resource_type == "variant" ? "page_variant_actions" : "page_actions") do %>
+  <div class="space-y-3">
+    <% if resource_type == "page" %>
+      <% if resource.published? && resource.slug.present? %>
+        <%= link_to public_static_page_path(slug: resource.slug), target: "_blank", rel: "noopener", class: editor_button_classes do %>
+          <div class="flex items-center justify-center space-x-2">
+            <span>Open</span>
+            <%= icon("external-link", css_class: "w-4 h-4") %>
+          </div>
+        <% end %>
+      <% end %>
+    <% elsif resource_type == "variant" && resource.published? && !resource.generating? %>
+      <%= link_to localized_public_static_page_path(locale: resource.language.html_lang, slug: resource.page.slug), target: "_blank", rel: "noopener", class: editor_button_classes do %>
+        <div class="flex items-center justify-center space-x-2">
+          <span>Open</span>
+          <%= icon("external-link", css_class: "w-4 h-4") %>
+        </div>
+      <% end %>
+    <% end %>
+
+    <% unless resource_type == "variant" && resource.generating? %>
+      <% if resource.published? %>
+        <% if resource.unpublished_changes? %>
+          <%= link_to (resource_type == "variant" ? publish_page_variant_path(page, resource) : publish_page_path(resource)),
+              class: editor_button_classes(variant: :primary),
+              data: { turbo_method: :patch, publish_guard_target: "publishButton", action: "click->publish-guard#prevent" } do %>
+            Publish New Version
+          <% end %>
+        <% end %>
+
+        <%= link_to (resource_type == "variant" ? unpublish_page_variant_path(page, resource) : unpublish_page_path(resource)),
+            class: "#{editor_button_classes} #{'mb-4' if resource_type == 'variant'}",
+            data: { turbo_method: :patch } do %>
+          Unpublish
+        <% end %>
+      <% else %>
+        <%= link_to (resource_type == "variant" ? publish_page_variant_path(page, resource) : publish_page_path(resource)),
+            class: "#{editor_button_classes(variant: :primary)} #{'mb-4' if resource_type == 'variant'}",
+            data: { turbo_method: :patch, publish_guard_target: "publishButton", action: "click->publish-guard#prevent" } do %>
+          Publish Now
+        <% end %>
+      <% end %>
+    <% end %>
+  </div>
+
+  <div class="mt-5 pt-3 pb-3 border-t border-gray-100">
+    <h4 class="text-sm font-semibold text-gray-900 mb-4">Current Status</h4>
+    <div class="space-y-3">
+      <% if resource.published? %>
+        <div class="flex items-start">
+          <div class="w-2 h-2 bg-green-400 rounded-full mt-2 mr-3 flex-shrink-0"></div>
+          <p class="text-sm text-gray-600">This <%= resource_type %> is published and visible to everyone</p>
+        </div>
+
+        <% if resource.unpublished_changes? %>
+          <div class="flex items-start">
+            <div class="w-2 h-2 bg-yellow-400 rounded-full mt-2 mr-3 flex-shrink-0"></div>
+            <p class="text-sm text-gray-600">You have unpublished changes. Click "Publish New Version" to make them live.</p>
+          </div>
+        <% end %>
+      <% else %>
+        <div class="flex items-start">
+          <div class="w-2 h-2 bg-gray-400 rounded-full mt-2 mr-3 flex-shrink-0"></div>
+          <p class="text-sm text-gray-600">This <%= resource_type %> is a draft and only visible to you</p>
+        </div>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,83 @@
+<% content_for :title, "Template" %>
+
+<div class="space-y-8">
+  <%= render "postnhost/shared/elements/page_header",
+    title: "Template",
+    description: "Choose and preview the public website template." %>
+
+  <div
+    class="grid grid-cols-1 gap-6 xl:grid-cols-3"
+    data-controller="template-preview"
+    data-template-preview-base-url-value="<%= postnhost.root_path %>">
+    <section class="xl:col-span-1">
+      <%= form_with model: @template, url: template_path, method: :patch, class: "space-y-6" do |f| %>
+        <%= render "postnhost/shared/form_errors", resource: @template %>
+
+        <div class="rounded-xl border border-gray-200 p-4 space-y-4">
+          <h2 class="text-base font-medium text-gray-900">Template</h2>
+          <p class="text-sm text-gray-500">Choose a template. The preview updates before saving.</p>
+
+          <div class="grid grid-cols-1 gap-3">
+            <% cms_template_options.each do |label, value| %>
+              <label class="cursor-pointer rounded-xl border border-gray-200 p-3 transition-colors hover:border-gray-400 has-[:checked]:border-gray-900 has-[:checked]:bg-gray-50">
+                <div class="flex items-center gap-2">
+                  <%= radio_button_tag "template[name]",
+                    value,
+                    @template.name == value,
+                    class: "h-4 w-4 border-gray-300 text-gray-900 focus:ring-gray-900",
+                    data: { action: "template-preview#update" } %>
+                  <span class="text-sm font-medium text-gray-900"><%= label %></span>
+                </div>
+              </label>
+            <% end %>
+          </div>
+        </div>
+
+        <details class="group rounded-xl border border-gray-200 bg-gray-50 p-4">
+          <summary class="flex cursor-pointer list-none items-center justify-between gap-3">
+            <h2 class="text-base font-medium text-gray-900">Customize template files</h2>
+            <%= icon("chevron-down", css_class: "h-4 w-4 shrink-0 text-gray-400 transition-transform duration-200 group-open:rotate-180") %>
+          </summary>
+
+          <div class="mt-3 space-y-3">
+            <p class="text-sm leading-6 text-gray-600">Run this command from the host Rails application to copy every public template and layout into your app:</p>
+
+            <code class="block overflow-x-auto rounded-lg bg-gray-900 px-3 py-2 text-xs leading-5 text-white">bin/rails g postnhost:views --views-scope=full</code>
+
+            <p class="text-sm leading-6 text-gray-600">
+              Edit the copied <code class="rounded bg-gray-200 px-1.5 py-0.5 text-xs font-mono text-gray-900">.html.erb</code> files under
+              <code class="rounded bg-gray-200 px-1.5 py-0.5 text-xs font-mono text-gray-900">app/views/postnhost/public/templates/</code>
+              and <code class="rounded bg-gray-200 px-1.5 py-0.5 text-xs font-mono text-gray-900">app/views/layouts/postnhost/public/templates/</code>.
+              Rails uses these host-app copies instead of the packaged engine views. The selection above still controls which template is active.
+            </p>
+
+            <div class="space-y-2 border-t border-gray-200 pt-3">
+              <p class="text-sm leading-6 text-gray-600">If your changes add new Tailwind classes, install and run the optional host Tailwind pipeline:</p>
+              <div class="space-y-1">
+                <code class="block overflow-x-auto rounded-lg bg-gray-900 px-3 py-2 text-xs leading-5 text-white">bin/rails g postnhost:tailwindcss:install</code>
+                <code class="block overflow-x-auto rounded-lg bg-gray-900 px-3 py-2 text-xs leading-5 text-white">bin/rails postnhost:tailwindcss:watch</code>
+              </div>
+            </div>
+          </div>
+        </details>
+
+        <%= f.submit "Save Template", class: button_classes %>
+      <% end %>
+    </section>
+
+    <section class="relative xl:col-span-2">
+      <div
+        class="hidden absolute left-4 top-4 z-10 rounded-full border border-gray-200 bg-white px-3 py-1 text-xs font-medium text-gray-600 shadow-sm"
+        data-template-preview-target="status">
+        Loading preview...
+      </div>
+      <iframe
+        title="Website preview"
+        src="<%= postnhost.root_path(preview_template: @template.name) %>"
+        class="h-[760px] w-full rounded-xl border border-gray-200 bg-white"
+        loading="eager"
+        data-template-preview-target="iframe"
+        data-action="load->template-preview#loaded"></iframe>
+    </section>
+  </div>
+</div>

data/app/views/postnhost/users/_avatar.html.erb

@@ -0,0 +1,9 @@
+<div class="<%= size_class %> <%= mobile_visibility_class %> flex-shrink-0 aspect-square bg-gray-100 rounded-full flex items-center justify-center overflow-hidden">
+  <% if author_avatar(user).present? %>
+    <%= image_tag author_avatar(user), class: "w-full h-full object-cover", alt: "Author Image" %>
+  <% elsif author_initials(user).present? %>
+    <span class="<%= text_size_class %> font-medium text-gray-600">
+      <%= author_initials(user) %>
+    </span>
+  <% end %>
+</div>

data/app/views/postnhost/users/_form.html.erb

@@ -0,0 +1,160 @@
+<%= form_with model: user, local: true, multipart: true, class: "space-y-6" do |form| %>
+  <%= render "postnhost/shared/elements/error_messages", resource: user %>
+
+  <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 items-start">
+    <div class="order-1 lg:order-2 lg:col-span-1">
+      <div class="lg:sticky lg:top-6 space-y-6">
+        <%= render "postnhost/shared/elements/form_card" do %>
+          <div class="space-y-4">
+            <%= form.submit submit_text, class: "#{button_classes} w-full" %>
+            <%= render "postnhost/shared/elements/button_link",
+              text: "Cancel",
+              url: cancel_url,
+              variant: :secondary,
+              extra_class: "w-full justify-center" %>
+
+            <% if local_assigns.fetch(:show_sign_out, false) %>
+              <div>
+                <%= button_to "Sign Out", session_path, method: :delete, class: "#{button_classes(variant: :secondary)} w-full" %>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+
+        <%= render "postnhost/shared/elements/form_card" do %>
+          <div class="space-y-2">
+            <h4 class="text-base font-medium text-gray-900">Credentials</h4>
+          </div>
+
+          <div>
+            <%= form.label :password, class: form_label_classes %>
+            <%= form.password_field :password, autocomplete: "new-password", required: user.new_record?, class: form_input_classes %>
+            <p class="mt-1 text-xs text-gray-500">Leave blank to keep existing password when editing.</p>
+          </div>
+
+          <div>
+            <%= form.label :password_confirmation, class: form_label_classes %>
+            <%= form.password_field :password_confirmation, autocomplete: "new-password", required: user.new_record?, class: form_input_classes %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+
+    <div class="order-2 lg:order-1 lg:col-span-2 space-y-6">
+      <%= render "postnhost/shared/elements/form_card" do %>
+        <div class="space-y-2">
+          <%= form.label :avatar_file, "Author Image", class: form_label_classes %>
+          <div class="flex items-center gap-4">
+            <%= render "postnhost/users/avatar",
+              user: user,
+              size_class: "w-16 h-16 min-w-16 min-h-16",
+              text_size_class: "text-base",
+              mobile_visibility_class: "flex" %>
+            <%= form.file_field :avatar_file, accept: "image/png,image/jpeg,image/gif,image/webp,image/heic", class: "#{form_input_classes} cursor-pointer" %>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <%= form.label :name, "Author Name", class: form_label_classes %>
+            <%= form.text_field :name, class: form_input_classes, placeholder: "Enter author name" %>
+          </div>
+
+          <div>
+            <%= form.label :email, class: form_label_classes %>
+            <%= form.email_field :email, autocomplete: "email", required: true, class: form_input_classes, placeholder: "author@example.com" %>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+          <div>
+            <%= form.label :position, class: form_label_classes %>
+            <%= form.text_field :position, class: form_input_classes, placeholder: "Editor in Chief" %>
+            <p class="mt-1 text-xs text-gray-500">If left blank, the default label "Author" will be used.</p>
+
+          </div>
+
+          <div>
+            <%= form.label :slug, "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">
+                authors/
+              </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: "author-slug" %>
+            </div>
+            <p class="mt-1 text-xs text-gray-500">Auto-generated from Author Name. You can edit it before saving.</p>
+          </div>
+        </div>
+
+        <div>
+          <%= form.label :bio, "BIO", class: form_label_classes %>
+          <%= form.text_area :bio, rows: 3, class: form_textarea_classes, placeholder: "Short biography shown on the public author profile." %>
+        </div>
+
+        <details class="group rounded-xl border border-gray-200 p-4">
+          <summary class="cursor-pointer list-none flex items-center justify-between">
+            <span class="text-base font-medium text-gray-900">Social Links</span>
+            <%= icon("chevron-down", css_class: "w-4 h-4 text-gray-400 transition-transform duration-200 group-open:rotate-180") %>
+          </summary>
+          <p class="mt-2 text-xs text-gray-500">Links shown on the public author profile.</p>
+
+          <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4">
+            <div>
+              <%= form.label :website_url, "Website", class: form_label_classes %>
+              <%= form.url_field :website_url, class: form_input_classes, placeholder: "https://example.com" %>
+            </div>
+
+            <div>
+              <%= form.label :x_url, "X", class: form_label_classes %>
+              <%= form.url_field :x_url, class: form_input_classes, placeholder: "https://x.com/username" %>
+            </div>
+
+            <div>
+              <%= form.label :linkedin_url, "LinkedIn", class: form_label_classes %>
+              <%= form.url_field :linkedin_url, class: form_input_classes, placeholder: "https://linkedin.com/in/username" %>
+            </div>
+
+            <div>
+              <%= form.label :facebook_url, "Facebook", class: form_label_classes %>
+              <%= form.url_field :facebook_url, class: form_input_classes, placeholder: "https://facebook.com/username" %>
+            </div>
+
+            <div>
+              <%= form.label :youtube_url, "YouTube", class: form_label_classes %>
+              <%= form.url_field :youtube_url, class: form_input_classes, placeholder: "https://youtube.com/@channel" %>
+            </div>
+
+            <div>
+              <%= form.label :instagram_url, "Instagram", class: form_label_classes %>
+              <%= form.url_field :instagram_url, class: form_input_classes, placeholder: "https://instagram.com/username" %>
+            </div>
+
+            <div>
+              <%= form.label :threads_url, "Threads", class: form_label_classes %>
+              <%= form.url_field :threads_url, class: form_input_classes, placeholder: "https://threads.net/@username" %>
+            </div>
+
+            <div>
+              <%= form.label :tiktok_url, "TikTok", class: form_label_classes %>
+              <%= form.url_field :tiktok_url, class: form_input_classes, placeholder: "https://tiktok.com/@username" %>
+            </div>
+
+            <div>
+              <%= form.label :mastodon_url, "Mastodon", class: form_label_classes %>
+              <%= form.url_field :mastodon_url, class: form_input_classes, placeholder: "https://mastodon.social/@username" %>
+            </div>
+
+            <div>
+              <%= form.label :bluesky_url, "Bluesky", class: form_label_classes %>
+              <%= form.url_field :bluesky_url, class: form_input_classes, placeholder: "https://bsky.app/profile/username" %>
+            </div>
+          </div>
+
+          <div class="mt-4">
+            <%= form.submit submit_text, class: "#{button_classes} w-full md:w-auto" %>
+          </div>
+        </details>
+      <% end %>
+    </div>
+  </div>
+<% end %>

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

@@ -0,0 +1,26 @@
+<% content_for :title, "Edit Author" %>
+
+<div class="space-y-8">
+  <%= render "postnhost/shared/elements/page_header",
+    title: "Edit Author",
+    description: "Update profile details and credentials",
+    stats: [
+      { text: author_pages_enabled? ? "Slug: /authors/#{@user.slug}" : "Slug: #{@user.slug}", class: "" },
+      *(@user.slug.present? && author_pages_enabled? ? [{ text: "Open", url: public_author_path(@user.slug), icon: "external-link", target: "_blank" }] : [])
+    ] do %>
+    <%= render "postnhost/shared/elements/button_link",
+      text: "Back to Authors",
+      url: users_path,
+      variant: :secondary,
+      icon: "chevron-left",
+      extra_class: "w-full md:w-auto" %>
+    <%= render "postnhost/shared/elements/button_link",
+      text: "Edit Schema",
+      url: schema_edit_user_path(@user),
+      variant: :secondary,
+      icon: "layers",
+      extra_class: "w-full md:w-auto" %>
+  <% end %>
+
+  <%= render "form", user: @user, submit_text: "Update", cancel_url: users_path, show_sign_out: (@user == current_user) %>
+</div>

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

@@ -0,0 +1,91 @@
+<% content_for :title, "Authors" %>
+
+<div class="space-y-8">
+  <%= render "postnhost/shared/elements/page_header",
+    title: "Authors",
+    description: "Manage author accounts and profile details for article attribution" do %>
+    <%= render "postnhost/shared/elements/button_link",
+      text: "New Author",
+      url: new_user_path,
+      icon: "plus",
+      extra_class: "w-full md:w-auto" %>
+  <% end %>
+
+  <% if @users.any? %>
+    <%= render "postnhost/shared/elements/table_container",
+      headers: [
+        { text: "Author", class: "col-span-7" },
+        { text: "Slug", class: "hidden md:block md:col-span-3" },
+        { text: "Actions", class: "col-span-2 text-right" }
+      ] do %>
+      <% @users.each do |user| %>
+        <div class="<%= table_row_classes %>">
+          <div class="grid grid-cols-12 gap-4 items-center">
+            <div class="col-span-10 md:col-span-7">
+              <%= link_to edit_user_path(user), class: "block group" do %>
+                <div class="flex items-center gap-3">
+                  <%= render "postnhost/users/avatar",
+                    user: user,
+                    size_class: "w-10 h-10 min-w-10 min-h-10",
+                    text_size_class: "text-sm",
+                    mobile_visibility_class: "hidden md:flex" %>
+                  <div>
+                    <div class="font-medium text-gray-900 group-hover:text-gray-600 transition-colors">
+                      <%= user.name %>
+                    </div>
+                    <div class="text-sm text-gray-500 mt-0.5"><%= user.email %></div>
+                  </div>
+                </div>
+              <% end %>
+            </div>
+
+            <div class="hidden md:block md:col-span-3">
+              <% if author_pages_enabled? %>
+                <%= link_to public_author_path(user.slug),
+                  class: "text-sm text-gray-600 hover:text-gray-900 transition-colors inline-flex items-center gap-1 cursor-pointer",
+                  target: "_blank",
+                  rel: "noopener" do %>
+                  <span>/authors/<%= user.slug %></span>
+                  <%= icon("external-link", css_class: "w-3.5 h-3.5") %>
+                <% end %>
+              <% else %>
+                <span class="text-sm text-gray-500"><%= user.slug %></span>
+              <% end %>
+            </div>
+
+            <div class="col-span-2 flex items-center justify-end space-x-2">
+              <%= render "postnhost/shared/elements/icon_button",
+                icon: "edit",
+                url: edit_user_path(user) %>
+
+              <% unless user == current_user %>
+                <%= render "postnhost/shared/elements/icon_button",
+                  icon: "trash",
+                  url: user_path(user),
+                  variant: :danger,
+                  data: {
+                    turbo_method: :delete,
+                    turbo_confirm: "Are you sure you want to remove this author? Their articles will be kept. Authors who own pages cannot be removed."
+                  } %>
+              <% end %>
+            </div>
+          </div>
+        </div>
+      <% end %>
+    <% end %>
+  <% else %>
+    <%= render "postnhost/shared/elements/empty_state",
+      icon: "users",
+      title: "No authors",
+      description: "Create your first author profile to start assigning article bylines." do %>
+      <%= render "postnhost/shared/elements/button_link",
+        text: "New Author",
+        url: new_user_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">
+    Authors can be assigned to articles from the editor sidebar. You can add multiple authors per article.
+  </div>
+</div>

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

@@ -0,0 +1,9 @@
+<% content_for :title, "New Author" %>
+
+<div class="space-y-8">
+  <%= render "postnhost/shared/elements/form_page_header",
+    title: "New Author",
+    description: "Create a new author account for article attribution and CMS access" %>
+
+  <%= render "form", user: @user, submit_text: "Create", cancel_url: users_path %>
+</div>