Skip to content

Improve blogging and entity UX with autosave, slug handling, and module page polish - #195

Merged
ddon merged 7 commits into
BeamLabEU:devfrom
mdon:dev
Nov 23, 2025
Merged

Improve blogging and entity UX with autosave, slug handling, and module page polish#195
ddon merged 7 commits into
BeamLabEU:devfrom
mdon:dev

Conversation

@mdon

@mdon mdon commented Nov 23, 2025

Copy link
Copy Markdown
Contributor

TL;DR

Comprehensive UX improvements to blogging editor and entity forms: centralized slug generation with autosave support, featured image autosave,
fixed JavaScript warning persistence, cleaner module cards with better mobile responsiveness, and resolved all code quality issues.


🎯 Overview

This PR enhances the blogging and entity modules with better autosave behavior, unified slug handling, and improved UI consistency across the admin
modules page.

✨ Key Changes

Blogging Editor Improvements

  • Autosave slug generation: Automatically generates unique slugs from content titles during autosaves, with intelligent tracking of manual vs
    auto-generated slugs
  • Featured image autosave: Featured image selections now trigger autosave with inline save button
  • JavaScript warning fix: Banner no longer reappears after LiveView updates (wrapped with phx-update="ignore")
  • Dynamic path updates: Editor URL automatically updates via push_patch when slug changes

Centralized Slug Utilities

  • New PhoenixKit.Utils.Slug module: Unified slug generation and uniqueness validation
  • Smart conflict resolution: Deduplicates slugs while excluding the current record
  • Shared across modules: Used by blogging storage and entity data forms for consistency

Entity Forms Enhancement

  • Slug pattern enforcement: Entity data forms now use centralized slug validation
  • Improved field modals: Auto-generate field keys from labels until manually edited
  • Input throttling: All form inputs use phx-debounce for better performance
  • Normalized field maps: Cleaner internal state management

Admin Modules Page Polish

  • Better visual hierarchy: Moved blogging paths to stats section (below buttons)
  • Mobile-friendly: Added break-all class for proper path wrapping on small screens
  • Cleaner labels: Simplified button text ("Open"/"Configure" instead of "Open Blogging"/"Manage Blogging")
  • Consistent layout: SEO noindex status moved to stats section, matching other modules
  • Removed redundancy: Cleaned up unnecessary headings and "Module" prefix in badges

🔧 Code Quality

  • ✅ Fixed alias ordering in entity forms (Credo)
  • ✅ Reduced cyclomatic complexity in blogging editor from 13 to acceptable levels
  • ✅ All 316 source files pass mix credo --strict
  • ✅ Code formatted with mix format

📝 Files Changed

  • lib/phoenix_kit/utils/slug.ex (new file)
  • lib/phoenix_kit_web/live/modules/blogging/editor.ex
  • lib/phoenix_kit_web/live/modules/blogging/editor.html.heex
  • lib/phoenix_kit_web/live/modules/blogging/context/storage.ex
  • lib/phoenix_kit_web/live/modules/entities/data_form.ex
  • lib/phoenix_kit_web/live/modules/entities/entity_form.ex
  • lib/phoenix_kit_web/live/modules.html.heex

🧪 Testing

  • Manually tested blogging editor autosave and slug generation
  • Verified module page responsiveness on mobile
  • Confirmed JavaScript warning stays hidden
  • Validated entity form slug uniqueness

Ready for review! All changes maintain backward compatibility and improve user experience across the board.

mdon and others added 7 commits November 23, 2025 18:16
* add PhoenixKit.Utils.Slug and reuse it from the blogging storage layer so slug
  generation/uniqueness is centralized and honors the current post’s slug
* keep track of last auto-generated slug vs manual edits in the blogging editor,
  keep generating slugs after autosaves, and push_patch to the new edit path
  when a slug/path change occurs
* teach entity data forms to share the slug helper, enforce the slug pattern,
  and de-duplicate against existing records (excluding the current one)
* overhaul entity field modal state: normalize field maps, auto-generate keys
  from labels until the slug input is touched, and throttle all inputs with
  phx-debounce
Fixed an issue where the JavaScript warning banner would reappear after
LiveView updates (e.g., when opening/closing the media selector modal).

Changes:
- Wrap warning banner in parent div with phx-update="ignore"
- Prevents LiveView from re-rendering the banner on updates
- Banner hides once on initial load and stays hidden across all updates
- Preserves intended behavior: banner only shows when JS is disabled

The previous implementation without phx-update would re-render the banner
on every LiveView patch, but the hide script wouldn't re-execute, causing
the banner to become visible again.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
- Move blogging paths from info section to stats section for better visual hierarchy
- Remove bullet points from blogging paths and add break-all for proper wrapping
- Simplify blogging button labels from "Open Blogging"/"Manage Blogging" to "Open"/"Configure"
- Remove redundant "Key paths & URLs" heading from blogging module
- Move SEO noindex status from badge to stats section for consistency
- Simplify SEO status badges by removing "Module" prefix
- Remove unnecessary info section from SEO module
- Change SEO button from "Configure SEO" to "Configure"
- Standardize all module cards to use consistent "Configure" button text
- Fix alias ordering in entity_form.ex and data_form.ex (alphabetize Utils aliases)
- Reduce cyclomatic complexity in blogging editor slug update function
- Extract helper functions: no_slug_update, update_slug_from_content, apply_new_slug
- Improve code readability and maintainability
Remove unnecessary 'title || ""' guard that Dialyzer flagged as always
being a binary. The extract_title_from_content function always returns
a string, never nil, making the fallback to empty string redundant and
causing a type mismatch warning.
@ddon
ddon merged commit 1b89a80 into BeamLabEU:dev Nov 23, 2025
6 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants