From 184a1243151b64707b37ccd1269ba05d589d7f0d Mon Sep 17 00:00:00 2001
From: David Keane <david.keane.1974@gmail.com>
Date: Mon, 25 May 2026 08:04:07 +0100
Subject: [PATCH] =?UTF-8?q?ux:=20rewrite=20About=20page=20=E2=80=94=20read?=
 =?UTF-8?q?able=20cards,=20accurate=20version=20history?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The About page had been showing "Version 2.0.3 (Current)" while the
plugin reports v3.1.0 — the on-page version log was years behind
the actual changelog. Both the About and Version History sections
were also hidden behind onclick=toggleSection() buttons by default,
which is anti-UX for a page users specifically navigate to in order
to READ content.

Rewrote the left column as three plain cards using the same visual
rhythm as the side-by-side intro row that landed earlier today:

1. What WP Notes does — two paragraphs of prose
2. Who it's for — clean bulleted list (dropped the "Teachers ←
   Email Notifications" entry since that feature isn't implemented
   in v3.x; the claim was misleading)
3. Version history — compact, accurate, latest-first summary:
   v3.1.0 (latest, with "latest" pill) → v3.0.2 → v2.x → v2.0.0.
   Plus a "View the full CHANGELOG.md →" link to the canonical
   history on Gitea so the on-page summary stays small.

Also fixed:
- Removed redundant duplicate paragraphs ("WP Notes is a versatile
  plugin that caters to a wide range of users" appeared twice in
  two consecutive lines).
- Removed invalid HTML (bare <li> outside <ul>, <p> wrapping <li>).
- Removed a buried banner image + buried Buy-Me-A-Coffee that
  were inside the hidden-by-default Version History toggle —
  visible to no-one. Both already exist in better positions on
  the page.

Added CSS classes for the new cards (.wp-notes-about-card,
.wp-notes-about-card--versions) including a green "latest" pill
on the current version and monospaced version labels in the
plugin's blue.

Right-column feedback box unchanged. toggleSection() helper kept
(still referenced by the feedback form's submit handler — its
broken behaviour is a separate Tier 2 problem).

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 CHANGELOG.md           |  42 +++++++++
 inc/wp-notes-about.php | 197 +++++++++++++++--------------------------
 2 files changed, 113 insertions(+), 126 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 3f24c51..0129999 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -7,6 +7,48 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 
 ## [Unreleased]
 
+### Changed — About page rewritten (content + layout)
+The About page (`Settings → WP Notes → About`) has been rewritten
+from "wall of nested toggle boxes with outdated content" to
+"readable cards with accurate content". The left column is now
+three plain cards: **What WP Notes does**, **Who it's for**, and a
+**Version history** that actually matches the current plugin
+version.
+
+What changed:
+- **Removed two `<button>onclick=toggleSection()</button>` wrappers**
+  around the About and Version History sections. Users came to the
+  About page to read content — hiding it behind a toggle was
+  anti-UX.
+- **"Version 2.0.3 (Current)"** entry was lying — the plugin is now
+  v3.1.0. Replaced the whole version section with a compact
+  accurate summary (v3.1.0 → v3.0.2 → v2.x → v2.0.0) plus a
+  prominent **"View the full CHANGELOG.md →"** link to the canonical
+  history on Gitea so the on-page summary doesn't have to be
+  exhaustive.
+- **Removed redundant duplicate paragraphs** ("WP Notes is a
+  versatile plugin that caters to a wide range of users" appeared
+  twice in two lines).
+- **Removed invalid HTML** — bare `<li>` outside `<ul>`, `<p>`
+  wrapping `<li>`.
+- **Removed buried banner image + Buy-Me-A-Coffee** that were
+  inside the (hidden-by-default) Version History toggle, never
+  seen by anyone. The banner already lives at the top of the page
+  in the side-by-side intro row; the support link already lives in
+  the right-column feedback card.
+- **Dropped the "Teachers want progress with Email Notifications"
+  use-case** — email notifications aren't implemented in v3.x so
+  the claim was misleading.
+- **Added three CSS card classes** (`.wp-notes-about-card`,
+  `.wp-notes-about-card--versions`) for visual rhythm with the
+  intro row above, plus styling for the version entries (latest
+  pill, monospace version labels).
+
+The right-column feedback box is unchanged. `toggleSection()` is
+also unchanged — still defined (no harm, used by the feedback
+form's broken-since-forever submit handler which is its own
+Tier 2 problem).
+
 ---
 
 ## [3.1.0] — 2026-05-25
diff --git a/inc/wp-notes-about.php b/inc/wp-notes-about.php
index 96f4d02..c811934 100644
--- a/inc/wp-notes-about.php
+++ b/inc/wp-notes-about.php
@@ -65,138 +65,83 @@ function wp_notes_about_page() {
             </div>
 
             <style>
-            /* Hide most plugin notices on the About page — they push the
-               long-form content down and the user came here to read, not
-               to dismiss admin chatter. Scoped to the About page only by
-               virtue of living in this file. */
-            .notice, .updated, .error {
-                display: none !important;
+            /* Hide most plugin notices on the About page — they push
+               the long-form content down and the user came here to
+               read, not to dismiss admin chatter. */
+            .notice, .updated, .error { display: none !important; }
+
+            /* About-page content cards — same visual rhythm as the
+               intro row above. */
+            .wp-notes-about-card {
+                background: #fff;
+                border: 1px solid #ccd0d4;
+                border-radius: 4px;
+                padding: 20px 24px;
+                margin: 0 0 22px;
+            }
+            .wp-notes-about-card h2 {
+                margin: 0 0 10px;
+                font-size: 16px;
+            }
+            .wp-notes-about-card p:last-child { margin-bottom: 0; }
+            .wp-notes-about-card ul {
+                margin: 8px 0 0 18px;
+                list-style: disc;
+            }
+            .wp-notes-about-card ul li { margin-bottom: 4px; }
+            .wp-notes-about-card--versions ul { list-style: none; margin-left: 0; }
+            .wp-notes-about-card--versions li { margin-bottom: 12px; }
+            .wp-notes-about-card--versions .ver { font-weight: 600; color: #2271b1; }
+            .wp-notes-about-card--versions .latest { display: inline-block; margin-left: 6px; padding: 1px 7px; background: #00a32a; color: #fff; border-radius: 9px; font-size: 11px; font-weight: 600; }
+            .wp-notes-about-changelog-link {
+                display: inline-block;
+                margin-top: 6px;
+                font-size: 13px;
+                color: #646970;
             }
             </style>
 
-            <!-- About and Versions Section -->
-            <h1>About WP Notes v <?php echo esc_html(WP_NOTES_VERSION); ?></h1>
-            <div class="wp-notes-welcome" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
-                <button onclick="toggleSection('about-section')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;">
-                    Toggle About Section
-                </button>
-
-                <div id="about-section" style="margin-top: 10px; display: none;">
-                    <!-- Content for About and Versions -->
-                    <h2>About WP Notes</h2>
-                    <p>
-                        Thank you for using WP Notes! This plugin helps you manage your WordPress tasks and notes efficiently. 
-                        Keep track of your todo's, mark them as complete, and export your data for safekeeping. I made this
-                        plugin for my website to log my daily tasks and notes as a logbook for my clients, so they can see the work
-                        done by me or you and so PAY, as every task is important and the customers need to know what I've done.
-                    </p>
-
-                    <ul>
-                        <li>Log all your tasks and jobs so prove work is being done.</li>
-                        <li>As you can see, this plugin is very flexible and can be used for a wide range of WordPress users.</li>
-                        <li>I hope you find it useful too.</li>
-                    </ul>
-
-                    <h1>What WP Notes Offers</h1>
-                    <p>WP Notes is a versatile plugin that caters to a wide range of users:</p>
-                    <p>We're excited to offer our plugin to our customers.</p>
-                    <p>WP Notes is a versatile plugin that caters to a wide range of users:</p>
-                    <p>We have several features for you to choose from:</p>
-                    <ul>
-                        <li><strong>Freelancers and site developers</strong> tracking work done on client sites.</li>
-                        <li><strong>Teams</strong> wanting to document changes or keep a changelog in the dashboard.</li>
-                        <li><strong>WordPress power users</strong> wanting a straightforward dashboard notes system.</li>
-                        <li><strong>Small businesses</strong> needing a simple task management solution for WordPress.</li>
-                        <li><strong>Students</strong> wanting to keep track of their daily tasks to prove work is being done.</li>
-                        <li><strong>Teachers</strong> wanting to keep track of their students' progress with Email Notifications.</li>
-                    </ul>
-
-                    <p>
-                        <li><strong>If you have any questions or feedback</strong>, feel free to reach out to us. Enjoy your note-taking experience!</li>
-                    </p>
-
-                    <p>
-                        <li><strong>Join our community</strong> and unlock the full potential of WP Notes.</li>
-                    </p>   
-                </div>
+            <!-- What WP Notes does -->
+            <div class="wp-notes-about-card">
+                <h2>What WP Notes does</h2>
+                <p>WP Notes is a lightweight task &amp; logbook plugin that lives entirely inside the WordPress admin. Type a note, format it with colour / size / font / emoji, mark it done when the work is finished, restore it later if you need to revisit. Everything is stored in the site's own database &mdash; nothing leaves your server.</p>
+                <p>I built it for my own client work as a transparent &ldquo;here's what I did this week&rdquo; logbook, so customers can see clearly what they're paying for. It turned out to be just as useful for any small team or single user who wants notes attached to the WordPress dashboard rather than a separate app.</p>
             </div>
-            
-            <p>
-            <!-- About and Versions Section -->
-            <h1>Version History v <?php echo esc_html(WP_NOTES_VERSION); ?></h1>
-            <div class="wp-notes-versions" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
-                <button onclick="toggleSection('version-section')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;">
-                    Toggle Version Section
-                </button>
 
-                <div id="version-section" style="margin-top: 10px; display: none;">
-                    <h3>Version 2.0.3 (Current)</h3>
-                    <ul>
-                        <li>Added Error Logging: Introduced a comprehensive error logging system to capture plugin-related errors. The logs are now viewable within the admin bar for easy troubleshooting.</li>
-                        <li>Added Welcome Section and Version history</li>
-                        <li>Added Image to main menu</li>
-                        <li>Edit Function is now working</li>
-                        <li>Popup notification with "Saved" status added</li>
-                        <li>Error controls incorporated into code for stability</li>
-                        <li>Enhanced `wp-config.php` for error capturing</li>
-                        <li>Ability to restore older notes</li>
-                        <li>Displays "Created by," "Modified by," and "Edited by" fields</li>
-                        <li>Improved task-tracking feature with a dashboard interface</li>
-                        <li>Added color, font, and size customization for notes</li>
-                        <li>Added edit and mark-as-done functions</li>
-                        <li>AJAX-based updates for smoother note editing</li>
-                        <li>Added Create WP Note into Tools in admin bar</li>
-                        <li>Added Create WP Note into Wp-Notes in admin bar</li>
-                        <li>Added Activity Chart for activity tracking in admin bar Still needs Work</li>
-                    </ul>
-                    <div class="wp-notes-header" style="margin-bottom: 30px;">
-                        <img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg" 
-                        style="max-width: 1200px; width: 100%; height: auto; margin-bottom: 20px;" 
-                        alt="WP Notes Banner">
-                    </div>
-                    <p>
-                    <h3>Version 2.0.4 (New) Additions</h3>
-                    <ul>
-                        <li>Ability to Export and Import Notes from a JSON file or a CSV file</li>
-                        <li>Email notification when a note is marked as complete</li>
-                        <li>Email the Notes Owner when a note is marked as complete</li>
-                        <li>Email the current user's email when a note is created</li>
-                        <li>Email notification when a note is edited</li>
-                        <li>Enhanced `wp-config.php` for error capturing</li>
-                        <li>Ability to close sections such as What's New, Version 2.0.3, and the Welcome Section</li>
-                        <li>Welcome popup message to greet users</li>
-                        <li>A page for ChatGPT API support, including other options like Claude-API</li>
-                        <li>Add Emoji Support and icons</li>
-                    </ul>
+            <!-- Who it's for -->
+            <div class="wp-notes-about-card">
+                <h2>Who it's for</h2>
+                <ul>
+                    <li><strong>Freelancers &amp; site developers</strong> tracking work done on client sites.</li>
+                    <li><strong>Small teams</strong> documenting changes or keeping a project changelog inside the dashboard.</li>
+                    <li><strong>WordPress power users</strong> who'd rather not jump out to a separate notes app.</li>
+                    <li><strong>Small businesses</strong> needing a simple task list tied to their website.</li>
+                    <li><strong>Students &amp; teachers</strong> logging daily progress.</li>
+                </ul>
+            </div>
 
-                    <h3>Version 2.0.2</h3>
-                    <ul>
-                        <li>Added user attribution for notes</li>
-                        <li>Enhanced timestamp functionality</li>
-                        <li>Added email export option</li>
-                        <li>Improved dashboard widget synchronization</li>
-                        <li>Added welcome section and version history</li>
-                    </ul>
-
-                    <h3>Version 2.0.1</h3>
-                    <ul>
-                        <li>Enhanced admin bar integration</li>
-                        <li>Added timestamp to notes</li>
-                        <li>Improved data preservation</li>
-                    </ul>
-
-                    <h3>Version 2.0.0</h3>
-                    <ul>
-                        <li>Initial release with basic note functionality</li>
-                        <li>Dashboard widget integration</li>
-                        <li>Note styling options</li>
-                    </ul>
-                    <br>
-                    <!-- Buy Me a Coffee Button -->
-                    <a href="https://www.buymeacoffee.com/davidkeanek" target="_blank">
-                        <img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=davidkeanek&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" alt="Buy me a coffee">
-                    </a>
-                </div>
+            <!-- Version history (compact, accurate) -->
+            <div class="wp-notes-about-card wp-notes-about-card--versions">
+                <h2>Version history</h2>
+                <ul>
+                    <li>
+                        <span class="ver">v3.1.0</span> &mdash; 25 May 2026 <span class="latest">latest</span><br>
+                        UX polish + bug-fix pass. Single-H1 cleanup, banner moved to this About page, menu renamed to <em>My Notes</em>, duplicate forms removed, empty-state notice now persistently dismissible per-user via <code>user_meta</code>, Tools shortcut retired with a backward-compatible redirect.
+                    </li>
+                    <li>
+                        <span class="ver">v3.0.2</span> &mdash; 10 May 2025<br>
+                        The &ldquo;without all the crap&rdquo; trim-back from the v1.1.5 feature-creep era (AI chat, tamagotchi, journal, speedtest&hellip; gone). Baseline of what the plugin is today: notes, admin bar, settings, import/export, about, updater.
+                    </li>
+                    <li>
+                        <span class="ver">v2.x</span> &mdash; 2024<br>
+                        Editor improvements, AJAX edits, mark-as-done / restore, color &amp; font / size customisation, JSON + CSV import/export, user-attribution &amp; timestamps, dashboard widget.
+                    </li>
+                    <li>
+                        <span class="ver">v2.0.0</span> &mdash; initial release<br>
+                        Basic note functionality with the dashboard widget and styling options.
+                    </li>
+                </ul>
+                <a class="wp-notes-about-changelog-link" href="https://git.davidtkeane.com/ranger/a-wp-notes-v3/src/branch/main/CHANGELOG.md" target="_blank" rel="noopener">View the full CHANGELOG.md →</a>
             </div>
         </div>