User UI: Comments
	100% Width max width container default 1140px

	Role access: 
		Access to reply is According to what is defined in wordpress according to wp settings
	
	Comment Editor: (Create Our Reusable Editor component)
		Minimalist Text Area with a toolbar with B U I A Bullets/Numbers List and Emoji and [Send Reply] Button
		After clicking Send Reply show Toast notification and load the reply with ajax, focus to reply. 
		
	Post-Comment Actions:
	[Optional: Confetti] After a user comments, Jumping tooltip :{post_comment_text}, Copy Link [Facebook, X, Linkedin - According to settings in admin panel], Copy Link, native share in mobile. and close tooltip after 5 seconds if the mouse is not over tooltip

	Comments List:
		Threaded indented replies like in the forum
		Default Max nesting of replying is 5, use css variable for each indentation option

	Post view:
		Commenter Name - Posted X time ago [Admin Actions]		#comment-number
		Title Text
		-------------------------------------------------------------------------------
		The Comment Text
		-------------------------------------------------------------------------------
		Upvote Count, Downvote count, Upvote button, Downvote Button, Reply, Share, Report, [Admin Actions]
			Replyer Name - Posted X time ago [Edit - for admins]		#comment-number
			RE: Title Text
			-------------------------------------------------------------------------------
			The Reply Text
			-------------------------------------------------------------------------------
			Upvote Count, Downvote count, Upvote button, Downvote Button, Reply, Share, Report, [Admin Actions]

		When clicking Reply - a quick reply editor showing up below the post (Use Our Reusable Editor component)
		Each comment needs to have the #comment-number link according to the wp number
		[Upvote Count, Downvote count, Upvote button, Downvote Button, Share] - are optional According to settings in admin panel
		[Admin Actions] - visible only if user is admin, it is a css dropdown list just like in the forum "Actions" button. With quick admin actions: Edit Post, Delete Post, Mute User, Warn User, Ban User, View History

## Admin UI ##
	[Design] Page
		Padding - Dropdown selection: [Wide, Standard, Minimal]
		Styling - Dropdown selection: [Square (Border radius 0), Rounded (Border radius 8), Very Rounded (Border radius 25)]
		Colors - Dropdown selection: [Inherit, Light, Dark]

	[Moderation] Page
		Already implemented, keep as is

	[Settings] Page
		[[ General ]] Tab
			Max Nesting: 1-10 [Default: 5]
			[v] Enable Like 
			[v] Enable Dislike
			Pagination - Comments per Page [Default: 20] combo box with choice 10, 20, 50
			[v] Enable "Share" 
				[v] Facebook
				[v] X/Twitter
				[v] Linkedin
			[v] Post-comment notification
				[v] Confetti
				Tooltip Text {post_comment_text} [Default: Thank you for your comment! Share it on Social Media.] 
		[[ Spam ]] Tab
			Content Restrictions:
				[v] Allow External Links in 
			Anti-Spam (ReCAPTCHAv3):
				[v] Reply throttling - Limit to X replies to Y seconds.
				[v] ReCAPTCHAv3 integration 
					Site Key [Textarea] (Appear only when ReCAPTCHAv3 integration is checked)
					Secret Key [Textarea] (Appear only when ReCAPTCHAv3 integration is checked)
			Word Filter:
				Textarea for "tag adding" for banned words. (You type text, click etner, and it saves it as a "tag")
		[[ Cache ]]
			Redis Support (active only if redis is installed)
				Redis settings
			Memcached Support (active only if memcache is installed)
				Memcached settings

We want to maximize code reusability, so everything needs to be modular and written in reusable code architecture.
The Admin UI needs to be JS SPA, identical design to comments-press-zone admin panel.
Plan which Shared Components needs to be created. See if we can copy them directly from the forums-press-zone plugin, since we already have a fully working panel there, we can use it's skeleton in our project just put different tabs and options there.
Make a plan , in the plan you should Create the shared components with high priority
Make sure to edit the appropriate files with the appropriate agent instruction set:
|         Agent             |		Domain     | File Patterns | When to Use |
|---------------------------|----------------------|-------------------------------------------------------------|------------------------------------------------------|
| `admin-panel-expert`      |  Admin Dashboard     | `src/**/*`, `assets/js/admin.bundle.js`                     | Admin UI, dashboard, settings pages                  |
| `frontend-php-expert`     | Templates, comments  | `templates/**/*.php`, `includes/Comments/*`                 | Comment templates, WordPress integration             |
| `frontend-js-expert`      | Vanilla JS, DOM      | `assets/js/*.js`                                            | Comment interactions, frontend features              |
| `frontend-styling-expert` | CSS                  | `assets/css/*`                                              | Styling, animations, responsive design               |
| `database-expert`         | Database		   | `includes/Comments/Comment_DB.php`, `includes/Database.php` | Schema changes, custom tables			|
| `users-permissions-expert`| Identity, roles	   | `includes/Comments/`,                                       | identity features Permission checks, user management |
| `moderation-expert` 	    | Moderation	   | `includes/Comments/*`                                       | Comment filtering, spam detection			|
| `engagement-expert`       | Social features      | `includes/Comments/*`                                       | Pins, reactions, notifications 			|


Premium:
Quotes
Lazy Load