[2 / 7] - Characters menu

[TheSCREWEDSoftware]

Split from the main PR: #197

Split by Claude

Reworked character rows (class-colour tab, faction-colour border, level badge, bigger race/class icons with tooltips). Adds a Reset Order button that nulls the DB order to fix characters soft-locked out of login.

Summary by CodeRabbit

• New Features

  • Dark mode support for the admin interface with convenient toggle option
  • Character order reset functionality for efficient character management

• Improvements

  • Redesigned character ordering interface with enhanced visual design
  • Comprehensive styling improvements and theming across admin pages for better readability and consistency

[coderabbitai]

📝 Walkthrough

Walkthrough

Adds an AcoreCharColors utility class for WoW class/race/faction/expansion display data, reworks the character ordering screen with nonce validation and a SQL-based reset action, and introduces a full admin dark mode toggle stored in user meta with AJAX persistence, inline jQuery, and comprehensive CSS across three new/updated stylesheets.

Changes

Character Order Screen Rework

Layer / File(s)	Summary
AcoreCharColors utility and boot wiring src/acore-wp-plugin/src/Utils/AcoreCharColors.php, src/acore-wp-plugin/src/boot.php	New AcoreCharColors class defines CLASS_NAMES, CLASS_COLORS, RACE_NAMES, RACE_FACTION constants and static helpers for class/race/faction lookups, rowStyle() inline CSS generation, and expansionSlug()/expansionLabel() level mappers; boot.php loads it at init.
Character order controller and view src/acore-wp-plugin/src/Components/CharactersMenu/CharactersController.php, src/acore-wp-plugin/src/Components/CharactersMenu/CharactersView.php	loadHome() adds check_admin_referer() and branches on acore_reset_order to call new resetCharacterOrder() (sets characters.order = NULL for the account) or saveCharacterOrder(); view imports AcoreCharColors, reworks HTML to acore-char-* DOM with nonce field, computed positions, and Reset Order button, and replaces sortable init with an update-event handler.
Shared character-row CSS src/acore-wp-plugin/web/assets/css/main.css	Replaces prior char-order/char-unstuck styles with .acore-char-list and button.acore-char-row flex layout, cursor/drag behaviors, race/class icon sizing, [data-exp] expansion badge variants, and a background-image-driven unstuck button with disabled states.

Admin Dark Mode Toggle

Layer / File(s)	Summary
DarkMode PHP hooks and AJAX handler src/acore-wp-plugin/src/Hooks/Various/DarkMode.php, src/acore-wp-plugin/src/boot.php	Registers admin bar sun/moon node keyed on acore_dark_mode user meta, appends acore-dark-mode body class, enqueues main.css/dark-mode.css/theme.css with embedded nonce script, injects late admin_head CSS at priority 9999 (WP2FA modal sizing always; dark overrides conditionally), provides AJAX toggle endpoint that flips user meta and returns {dark: bool}, generates inline jQuery click handler, and conditionally injects theme.css on the WP 2FA setup wizard.
main.css mail-return and profile page layouts src/acore-wp-plugin/web/assets/css/main.css	Rebuilds mail-return UI with #mail-return-layout grid, #mail-return-items 2-column grid, new mail entry/slot structure for JS-controlled border colors, and flex-shrink:0 on the return button; adds profile/security/item-restoration page blocks with responsive sidebar grids, 4-column item card grid, WowHead <a> overlay handling, and restore button states.
dark-mode.css comprehensive dark overrides src/acore-wp-plugin/web/assets/css/dark-mode.css	Provides Bootstrap 5 CSS variable overrides and WP admin dark theming for profile/security tables, expansion selector, admin bar toggle icon, postboxes, character list rows, form controls, mail entries, tables, buttons, notices, links, footer, myCred widgets, Scroll of Resurrection page, expansion badges, and Mail Return page.
theme.css CSS custom property palette and component theming src/acore-wp-plugin/web/assets/css/theme.css	Defines :root light and body.acore-dark-mode dark CSS custom property palettes with --q0..--q7 item quality colors, then layers component overrides for danger buttons, item restore quality icon borders, Security/connection tables, Mail Return, myCRED history, WP 2FA wizard and micromodal, 2FA disabled/required callouts, current-IP row highlight, admin bar toggle, dark-mode form controls, and myCRED-specific overrides.

Sequence Diagram(s)

sequenceDiagram
  rect rgba(100, 149, 237, 0.5)
    Note over Browser,UserMeta: Dark Mode Toggle
  end
  participant Browser
  participant DarkMode.php
  participant WP_AJAX
  participant UserMeta
  Browser->>DarkMode.php: admin_bar_menu (page load)
  DarkMode.php->>UserMeta: get_user_meta(acore_dark_mode)
  UserMeta-->>DarkMode.php: current value
  DarkMode.php-->>Browser: render sun/moon icon + body class
  Browser->>WP_AJAX: POST acore_toggle_dark_mode + nonce
  WP_AJAX->>WP_AJAX: wp_verify_nonce()
  WP_AJAX->>UserMeta: update_user_meta(flip value)
  UserMeta-->>WP_AJAX: saved
  WP_AJAX-->>Browser: JSON {dark: bool}
  Browser->>Browser: toggle body.acore-dark-mode + update icon/title

Loading

sequenceDiagram
  rect rgba(144, 238, 144, 0.5)
    Note over Browser,CharDB: Character Order Reset
  end
  participant Browser
  participant loadHome
  participant resetCharacterOrder
  participant CharDB
  Browser->>loadHome: POST acore_reset_order + nonce
  loadHome->>loadHome: check_admin_referer()
  loadHome->>resetCharacterOrder: call
  resetCharacterOrder->>CharDB: UPDATE characters SET order=NULL WHERE account=? AND deleteInfos_Account=0
  CharDB-->>resetCharacterOrder: ok
  resetCharacterOrder-->>loadHome: done
  loadHome-->>Browser: "Character order reset successfully" notice

Loading

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~60 minutes

Poem

🐇 Hippity-hop through the dark of night,
A moon on the toolbar brings dark-mode delight!
Reset the order with one little click,
Race icons and colors — a colorful trick.
theme.css loaded last, overrides in place,
This bunny approves of this elegant grace! ✨

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 16.67% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title '[2 / 7] - Characters menu' is vague and does not clearly describe the primary changes; it lacks specificity about what was implemented or modified.	Consider a more descriptive title like 'Add character order reset and improve characters menu UI' to better convey the main changes and improvements.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 4

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/acore-wp-plugin/src/Components/CharactersMenu/CharactersController.php`:
- Line 26: The success notice message in the admin notice has a spelling error
where "succesfully" should be "successfully". In the div with class "updated",
locate the text "Character settings succesfully saved." and correct the
misspelling to "Character settings successfully saved." to ensure the
user-visible message is grammatically correct.

In `@src/acore-wp-plugin/src/Components/CharactersMenu/CharactersView.php`:
- Line 31: The introductory sentence in the paragraph element on line 31 of
CharactersView.php is grammatically broken and reads awkwardly due to the comma
splice construction "by dragging them, matches in-game position". Rewrite this
sentence to be grammatically correct and clear for the admin UI, restructuring
it to properly connect the dragging action with the outcome of matching the
in-game position. The revised text should flow naturally and clearly communicate
the purpose of the feature to users.

In `@src/acore-wp-plugin/web/assets/css/main.css`:
- Around line 45-54: The CSS rule for preventing text selection in character
rows currently targets only button.acore-char-row, but character rows are also
rendered as div.acore-char-row elements in CharactersView.php. Add a selector
for .acore-char-row (without the button prefix) to the rule so that the
user-select: none property applies to both button and div elements with the
acore-char-row class, ensuring all character row elements are included in the
selection lock.

In `@src/acore-wp-plugin/web/assets/css/theme.css`:
- Around line 600-616: The CSS selectors for dark mode styling are too broad and
affect all WordPress admin pages instead of only myCRED-specific pages. Add the
`.mycred-log-page` class to each selector in the dark mode rule set that
currently targets `.subsubsub a`, `input[type="checkbox"]`, and `a.btn`
elements. This will scope all the color and styling overrides to only apply when
the `.mycred-log-page` class is present, preventing unintended style changes on
unrelated admin pages.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 6d5a0e4d-cdf1-449a-a0bc-d85393b7be3e

📥 Commits

Reviewing files that changed from the base of the PR and between 94af292 and ba1c597.

📒 Files selected for processing (8)

• src/acore-wp-plugin/src/Components/CharactersMenu/CharactersController.php
• src/acore-wp-plugin/src/Components/CharactersMenu/CharactersView.php
• src/acore-wp-plugin/src/Hooks/Various/DarkMode.php
• src/acore-wp-plugin/src/Utils/AcoreCharColors.php
• src/acore-wp-plugin/src/boot.php
• src/acore-wp-plugin/web/assets/css/dark-mode.css
• src/acore-wp-plugin/web/assets/css/main.css
• src/acore-wp-plugin/web/assets/css/theme.css

[TheSCREWEDSoftware]

The reviews are valid for this, but the are fixed in the on the way to latest PR and including he last PR #205

PR #199 — Characters Menu

• Fixed typo: "succesfully" → "successfully" in save confirmation
• Fixed broken sentence in the Order Character Screen description
• Extended user-select: none to cover all .acore-char-row elements, not just button