Packages

Social posts module for PhoenixKit — user posts, threaded comments, tags, boards, likes/dislikes, media, mentions, and scheduling

Current section

Files

Jump to
phoenix_kit_posts lib phoenix_kit_posts web settings.html.heex
Raw

lib/phoenix_kit_posts/web/settings.html.heex

<div class="container flex flex-col mx-auto px-4 py-6">
<%!-- Header Section --%>
<.admin_page_header
back={PhoenixKit.Utils.Routes.path("/admin/settings")}
title="Posts Settings"
subtitle="Configure posts module behavior, limits, and features"
/>
<%!-- Main Content --%>
<div class="max-w-4xl mx-auto space-y-8">
<.form for={%{}} phx-submit="save">
<%!-- Content Limits Card --%>
<div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-adjustments-horizontal" class="w-6 h-6" /> Content Limits
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<%!-- Max Media --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Max Media Per Post</span>
</label>
<input
name="settings[posts_max_media]"
type="number"
value={@posts_max_media}
class="input input-bordered focus:input-primary"
min="0"
max="50"
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
Maximum number of images/media files per post (0-50)
</span>
</label>
</div>
<%!-- Max Title Length --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Max Title Length</span>
</label>
<input
name="settings[posts_max_title_length]"
type="number"
value={@posts_max_title_length}
class="input input-bordered focus:input-primary"
min="10"
max="500"
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
Maximum characters for post title (10-500)
</span>
</label>
</div>
<%!-- Max Subtitle Length --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Max Subtitle Length</span>
</label>
<input
name="settings[posts_max_subtitle_length]"
type="number"
value={@posts_max_subtitle_length}
class="input input-bordered focus:input-primary"
min="10"
max="1000"
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
Maximum characters for post subtitle/tagline (10-1000)
</span>
</label>
</div>
<%!-- Max Content Length --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Max Content Length</span>
</label>
<input
name="settings[posts_max_content_length]"
type="number"
value={@posts_max_content_length}
class="input input-bordered focus:input-primary"
min="100"
max="100000"
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
Maximum characters for post content (100-100000)
</span>
</label>
</div>
<%!-- Max Mentions --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Max Mentions</span>
</label>
<input
name="settings[posts_max_mentions]"
type="number"
value={@posts_max_mentions}
class="input input-bordered focus:input-primary"
min="0"
max="50"
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
Maximum user mentions per post (0-50)
</span>
</label>
</div>
<%!-- Max Tags --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Max Tags</span>
</label>
<input
name="settings[posts_max_tags]"
type="number"
value={@posts_max_tags}
class="input input-bordered focus:input-primary"
min="0"
max="100"
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
Maximum hashtags per post (0-100)
</span>
</label>
</div>
</div>
</div>
</div>
<%!-- Module Configuration Card --%>
<div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-cog-6-tooth" class="w-6 h-6" /> Module Configuration
</h2>
<div class="space-y-4">
<%!-- Posts Per Page --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Posts Per Page</span>
</label>
<input
name="settings[posts_per_page]"
type="number"
value={@posts_per_page}
class="input input-bordered focus:input-primary w-full max-w-xs"
min="5"
max="100"
/>
<label class="label">
<span class="label-text-alt text-base-content/70">
Number of posts to display per page (5-100)
</span>
</label>
</div>
<div class="divider"></div>
<%!-- Default Status --%>
<div class="form-control">
<label class="label">
<span class="label-text font-medium">Default Post Status</span>
</label>
<label class="select focus:select-primary w-full max-w-xs">
<select
name="settings[posts_default_status]"
>
<option value="draft" selected={@posts_default_status == "draft"}>
Draft
</option>
<option value="public" selected={@posts_default_status == "public"}>
Public
</option>
<option value="unlisted" selected={@posts_default_status == "unlisted"}>
Unlisted
</option>
</select>
</label>
<label class="label">
<span class="label-text-alt text-base-content/70">
Default visibility status for new posts
</span>
</label>
</div>
</div>
</div>
</div>
<%!-- Feature Toggles Card --%>
<div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-check-circle" class="w-6 h-6" /> Feature Toggles
</h2>
<div class="space-y-4">
<%!-- Likes Enabled --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">Enable Likes</span>
<div class="text-sm text-base-content/70 mt-1">
Allow users to like/favorite posts
</div>
</span>
<input type="hidden" name="settings[posts_likes_enabled]" value="false" />
<input
type="checkbox"
name="settings[posts_likes_enabled]"
value="true"
class="toggle toggle-secondary"
checked={@posts_likes_enabled == "true"}
/>
</label>
</div>
<div class="divider"></div>
<%!-- Allow Scheduling --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">Allow Scheduling</span>
<div class="text-sm text-base-content/70 mt-1">
Enable scheduling posts for future publication
</div>
</span>
<input type="hidden" name="settings[posts_allow_scheduling]" value="false" />
<input
type="checkbox"
name="settings[posts_allow_scheduling]"
value="true"
class="toggle toggle-accent"
checked={@posts_allow_scheduling == "true"}
/>
</label>
</div>
<div class="divider"></div>
<%!-- Allow Groups --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">Allow Groups</span>
<div class="text-sm text-base-content/70 mt-1">
Enable user-specific post collections (Pinterest-style)
</div>
</span>
<input type="hidden" name="settings[posts_allow_groups]" value="false" />
<input
type="checkbox"
name="settings[posts_allow_groups]"
value="true"
class="toggle toggle-accent"
checked={@posts_allow_groups == "true"}
/>
</label>
</div>
<div class="divider"></div>
<%!-- Allow Reposts --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">Allow Reposts</span>
<div class="text-sm text-base-content/70 mt-1">
Enable sharing/reposting of other users' posts
</div>
</span>
<input type="hidden" name="settings[posts_allow_reposts]" value="false" />
<input
type="checkbox"
name="settings[posts_allow_reposts]"
value="true"
class="toggle toggle-accent"
checked={@posts_allow_reposts == "true"}
/>
</label>
</div>
<div class="divider"></div>
<%!-- SEO Auto Slug --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">Auto-generate SEO Slugs</span>
<div class="text-sm text-base-content/70 mt-1">
Automatically create URL-friendly slugs from post titles
</div>
</span>
<input type="hidden" name="settings[posts_seo_auto_slug]" value="false" />
<input
type="checkbox"
name="settings[posts_seo_auto_slug]"
value="true"
class="toggle toggle-info"
checked={@posts_seo_auto_slug == "true"}
/>
</label>
</div>
<div class="divider"></div>
<%!-- Show View Count --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">Show View Count</span>
<div class="text-sm text-base-content/70 mt-1">
Display view counter on posts
</div>
</span>
<input type="hidden" name="settings[posts_show_view_count]" value="false" />
<input
type="checkbox"
name="settings[posts_show_view_count]"
value="true"
class="toggle toggle-info"
checked={@posts_show_view_count == "true"}
/>
</label>
</div>
</div>
</div>
</div>
<%!-- Moderation Card --%>
<div class="card bg-base-100 shadow-xl mb-6">
<div class="card-body">
<h2 class="card-title text-2xl mb-4">
<.icon name="hero-shield-check" class="w-6 h-6" /> Moderation
</h2>
<div class="space-y-4">
<%!-- Require Approval --%>
<div class="form-control">
<label class="label cursor-pointer">
<span class="label-text text-lg">
<span class="font-semibold">Require Post Approval</span>
<div class="text-sm text-base-content/70 mt-1">
All new posts must be approved by an admin before going public
</div>
</span>
<input type="hidden" name="settings[posts_require_approval]" value="false" />
<input
type="checkbox"
name="settings[posts_require_approval]"
value="true"
class="toggle toggle-warning"
checked={@posts_require_approval == "true"}
/>
</label>
</div>
</div>
<div class="alert alert-info mt-4">
<.icon name="hero-information-circle" class="w-5 h-5" />
<div>
<h3 class="font-bold">Moderation Tips</h3>
<p class="text-sm mt-1">
Enable these features for tighter content control. Moderation can help prevent spam and inappropriate content from appearing on your platform.
</p>
</div>
</div>
</div>
</div>
<%!-- Action Buttons --%>
<div class="flex flex-col sm:flex-row gap-4 justify-end">
<button
type="button"
phx-click="reset_defaults"
class="btn btn-ghost btn-outline"
data-confirm="Are you sure you want to reset all settings to defaults?"
>
<.icon name="hero-arrow-path" class="w-4 h-4 mr-2" /> Reset to Defaults
</button>
<button
type="submit"
class={["btn btn-primary", if(@saving, do: "loading", else: "")]}
disabled={@saving}
>
<%= if @saving do %>
Saving...
<% else %>
<.icon name="hero-check" class="w-4 h-4 mr-2" /> Save Settings
<% end %>
</button>
</div>
</.form>
</div>
</div>