Redesign plugin settings UI and add version rollback feature

[jackgranatowski]

Summary

This PR significantly improves the SLASHED plugin's admin interface by redesigning the CSS bundle selector with a modern card-based layout, adding a version rollback feature, and consolidating design token documentation tabs.

Key Changes

Admin Settings UI Redesign

• Bundle selector redesign: Replaced table-based layout with a responsive 3-column grid of interactive cards
  • Added visual hierarchy with bundle names, taglines, and feature lists
  • Implemented "Recommended" badge for the Optimal bundle
  • Added hover and selection states with color-coded styling
  • Made responsive (single column on mobile)
  • Enhanced feature descriptions with detailed capability lists for each bundle tier

Version Rollback Feature

• Added "Install a previous version" toggle button in the CSS delivery section
• Implemented ajax_list_framework_versions() to fetch available release tags from jsdelivr
• Created version selector dropdown that loads up to 20 stable releases
• Added confirmation dialog before installing a selected version
• Displays status messages during download and installation
• Allows users to downgrade to any previous stable release

Menu & Navigation Updates

• Added explicit "Plugin Settings" submenu entry to override auto-generated first submenu label
• Renamed "Tokens" submenu to "Design Settings" for better clarity
• Consolidated Variables and Classes tabs into the Cheatsheet tab (removed separate tabs from registry)

Code Quality

• Added inline JavaScript for bundle card selection highlighting
• Improved AJAX action registration with consistent formatting
• Enhanced user feedback with status messages for all async operations
• Added security checks (nonce verification, capability checks) for new AJAX endpoints

Implementation Details

• Bundle data structure now includes label, tagline, badge, base description, and feature items
• Feature items support safe HTML (e.g., &) via wp_kses()
• Rollback controls use flexbox layout with conditional display
• Version list fetches from jsdelivr metadata API with proper error handling
• All new strings are properly internationalized with __() and esc_html()

https://claude.ai/code/session_01F6yRLAhfRuUGheCRTLfEFG

Summary by CodeRabbit

• New Features

  • CSS framework rollback UI with version listing and install controls for local CSS delivery.
  • Redesigned CSS bundle picker using a 3‑card layout with visual selection highlighting.
  • Palette Optimizer in the WCAG checker to suggest accessible color alternatives.
  • New admin "Filter Hooks" reference page and a dedicated "Plugin Settings" submenu.
  • Persisted plugin display options (font size, class hints).

• Changes

  • Variables and Classes consolidated into Cheatsheet; header shows active bundle pill and revised counts.
  • Save/SaveBar visibility adjusted for read-only tabs.

[coderabbitai]

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Free

Run ID: b9382ea5-e9f2-4ae2-8347-3108e5762e7a

📥 Commits

Reviewing files that changed from the base of the PR and between 26797d5 and e1d8809.

📒 Files selected for processing (7)

• SLASHED-for-WP/includes/class-admin.php
• SLASHED-for-WP/includes/class-hooks-page.php
• SLASHED-for-WP/includes/class-tab-registry.php
• SLASHED-for-WP/integrations/bricks/admin-app/src/App.svelte
• SLASHED-for-WP/integrations/bricks/admin-app/src/components/CheatsheetTab.svelte
• SLASHED-for-WP/integrations/bricks/admin-app/src/components/WcagTab.svelte
• SLASHED-for-WP/slashed.php

🚧 Files skipped from review as they are similar to previous changes (1)

• SLASHED-for-WP/includes/class-tab-registry.php

---

📝 Walkthrough

Walkthrough

Redesigns admin settings: bundle selector becomes selectable cards; adds version rollback UI and backend AJAX for version listing; consolidates Variables/Classes into Cheatsheet and renames Tokens to Design Settings; adds a Hooks admin page; adds a WCAG palette optimizer in the Bricks admin app.

Changes

Settings Page Redesign & Admin Organization

Layer / File(s)	Summary
Bundle selector grid & styling SLASHED-for-WP/includes/class-admin.php	Replaces the CSS framework bundle radio table with a styled 3-card grid (Essential/Optimal/Full), adds inline styles for selected state and layout, registers an explicit "Plugin Settings" submenu, and adds client JS to highlight the selected card.
Site behaviour settings SLASHED-for-WP/includes/class-admin.php	Reads and persists html_font_size and show_class_hints via Slashed_Token_Store::update_plugin_settings() and renders the Site behaviour form controls populated from get_plugin_settings().
Version rollback implementation SLASHED-for-WP/includes/class-admin.php, SLASHED-for-WP/includes/class-framework-updater.php	Adds rollback UI under Local files (toggle, version select, Install button, status message). Client JS lazily fetches available framework versions and posts install requests via AJAX; backend registers wp_ajax_slashed_list_framework_versions and ajax_list_versions() to fetch and return jsDelivr tag metadata.
Filter Hooks admin page SLASHED-for-WP/includes/class-hooks-page.php, SLASHED-for-WP/slashed.php	New Slashed_Hooks_Page registers a “Filter Hooks” submenu and renders documented filter hooks grouped by integration, checking manage_options and marking Bricks group inactive when integration is disabled.
Tab consolidation & Svelte wiring SLASHED-for-WP/includes/class-tab-registry.php, SLASHED-for-WP/includes/class-token-page.php, SLASHED-for-WP/integrations/bricks/admin-app/src/App.svelte, .../CheatsheetTab.svelte	get_view_tabs() no longer exposes variables/classes; unified-mode Tokens submenu label changed to "Design Settings"; Svelte admin app removes Variables/Classes imports and render branches, narrows readOnlyTabs, and updates Cheatsheet header to show active bundle label and optional settings link.
WCAG palette optimizer (Bricks admin app) SLASHED-for-WP/integrations/bricks/admin-app/src/components/WcagTab.svelte	Adds RGB→HSL conversion, a search-based optimizer that suggests accessible neutral/action colors, result UI with badges/ratios, apply/dismiss actions that persist suggested tokens, and related styling.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

---

Note

🎁 Summarized by CodeRabbit Free

Your organization is on the Free plan. CodeRabbit will generate a high-level summary and a walkthrough for each pull request. For a comprehensive line-by-line review, please upgrade your subscription to CodeRabbit Pro by visiting https://app.coderabbit.ai/login.

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