ux: Tier 1 cleanup of wp_notes_page_callback — single H1, collapse triple welcome surfaces, footer support link

Single-pass UX cleanup of the main WP Notes admin page. Functionality
unchanged; the page is shorter, has one H1, and stops contradicting
itself.

CHANGES
- Single H1 on the page (was five different H1s).
- Welcome/about content collapsed from THREE on-page surfaces (top
  dismissible notice + nested toggle + Show/Close button row) to one
  single description line linking to the dedicated About page where
  the long copy already lives.
- Two duplicate "Toggle Welcome Section" buttons with the SAME label
  but different targets — both removed.
- Embedded "What's New v3.0.0" changelog block deleted: it was
  hard-coded to v3.0.0 while the plugin reports v3.0.2. The real
  history is in CHANGELOG.md.
- "Buy me a coffee" button moved from page header to page footer —
  promo shouldn't be the first thing under the page title.
- Invalid HTML cleaned up (li outside ul, p wrapping div/ul) by way
  of removing the welcome blob that contained it.
- Dead bulk-action UI removed: per-row checkboxes and "Select all"
  header in both wp_notes_display_notes() and wp_notes_list_table()
  rendered but nothing acted on the selection. Removed with inline
  comments marking the spot for when real bulk-actions land. Edit
  form colspan adjusted to match the new column count.
- ~80 lines of inline style+script for the about-box dismissal
  removed (localStorage tracking, show/hide handlers, two style
  blocks). WordPress's notice notice-info is-dismissible + user-meta
  is the right path if a banner needs to return.
- toggleSection() JS helper removed (no toggles remain).
- Small CSS additions to inc/wp-notes-styles.php for the header
  banner and footer-support link.

ALSO FIXED
- PHP 8.2 deprecation: ${size}px → {$size}px in the dashboard
  list-table render. ${var} interpolation is deprecated since 8.2
  and will hard-error in 9.0.

NET DIFF: wp-notes.php -213 lines, total -111 lines across 4 files
(plus a new CHANGELOG entry). Storage model unchanged.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

CHANGELOG.md

@@ -7,6 +7,66 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 
 ## [Unreleased]
 
+### Changed — Tier 1 UX cleanup
+Single pass through `wp_notes_page_callback()` to remove the layout
+debt that had built up over previous releases. Functionality is
+unchanged; the page is shorter, has one H1, and stops contradicting
+itself.
+
+- **Single H1** on the page — was five (`Welcome to WP Notes`,
+  `Welcome to WP Notes v3.0.2`, `About WP Notes`, `What WP Notes
+  Offers`, `What's New in WP Notes v3.0.2`). Now: just
+  `WP Notes` with the version chip alongside. Accessibility + SEO.
+- **"Welcome / About" content** collapsed from THREE on-page
+  surfaces (a dismissible top notice + a nested toggle + a manual
+  "Show Welcome Message" button) down to a single one-line
+  description that links to the dedicated About page where the long
+  copy already lives.
+- **Duplicate "Toggle Welcome Section" buttons removed.** Both
+  outer and inner toggle buttons had the **same label** but
+  different targets — genuinely confusing. Both gone.
+- **"What's New v3.0.0" embedded changelog block removed.** It was
+  hard-coded to v3.0.0 while the plugin reports v3.0.2 — the embed
+  was lying. The real history lives in `CHANGELOG.md` now.
+- **"Buy me a coffee" button moved from page header to page footer**
+  — promo content should not be the first thing under the page
+  title. Now sits at the bottom of the notes lists, centred, where
+  footer items belong.
+- **Invalid HTML cleaned up** — `<li>` tags outside `<ul>`, `<p>`
+  tags wrapping `<div>` / `<ul>`. Was in the deleted welcome blob,
+  so resolved by removal.
+- **Dead bulk-action UI removed** — both the per-row checkboxes and
+  the "Select all" header column in `wp_notes_display_notes()` and
+  `wp_notes_list_table()` were rendered but nothing acted on the
+  selection. Removed both, with an inline comment marking the spot
+  for when real bulk-actions get wired up. Edit-form colspan
+  adjusted (`6` → `4`) to match the new column count.
+- **Inline `<style>` and `<script>` blocks for the dismissed
+  about-box** (~80 lines of localStorage-based dismiss tracking and
+  show/hide logic) **deleted** along with the about-box itself —
+  WordPress's own `notice notice-info is-dismissible` and the
+  user-meta dismissal API are the correct path if a banner needs to
+  return.
+- **`toggleSection()` JS helper removed** — no toggles remain on
+  the page after the welcome-blob deletion.
+
+### Fixed (PHP 8.2 deprecation)
+- `${size}px` → `{$size}px` in the dashboard list-table render.
+  `${var}` string interpolation is deprecated in PHP 8.2 and will
+  hard-error in PHP 9.
+
+### Notes
+- The dedicated **About** page (`Settings → WP Notes → About WP
+  Notes`) is unchanged and still renders `wp_notes_about_page()` from
+  `inc/wp-notes-about.php`. All the long welcome/about copy lives
+  there — exactly where it belongs.
+- Banner image still renders, in its own bordered container at the
+  top of the page. Moved out of the deleted nested toggle so it
+  actually shows.
+- Storage model is unchanged — notes still live in `wp_options`
+  under `wp_notes` / `wp_done_notes`. The UX cleanup is purely
+  presentational.
+
 ### Fixed
 - **"Add New Note" sidebar submenu opening the WordPress post editor.**
   The plugin registered a `wp_note` custom post type with

inc/wp-notes-display.php

@@ -39,9 +39,8 @@ function wp_notes_display_notes($type = 'active') {
     echo '<div class="wp-notes-list" id="' . esc_attr($type . '-notes') . '">';
     echo '<table class="wp-list-table widefat fixed striped has-hover">';
     echo '<thead><tr>';
-    echo '<th scope="col" class="manage-column column-cb check-column">';
+    /* No checkbox column — bulk actions are not wired up. Re-add this <th>
-    echo '<input type="checkbox" id="select-all-' . esc_attr($type) . '" />';
+       and the matching <td> below when bulk select/delete/done is built. */
-    echo '</th>';
     echo '<th scope="col" class="manage-column column-primary">' . esc_html__('Note', 'a-wp-notes') . '</th>';
     echo '<th scope="col" class="manage-column">' . esc_html__('Author', 'a-wp-notes') . '</th>';
     echo '<th scope="col" class="manage-column">' . esc_html__('Created', 'a-wp-notes') . '</th>';
@@ -61,7 +60,6 @@ function wp_notes_display_notes($type = 'active') {
         $author = esc_html($note['author_name'] ?? 'Unknown');
 
         echo '<tr>';
-        echo '<td><input type="checkbox" name="note_ids[]" value="' . esc_attr($key) . '" class="note-checkbox" /></td>';
         echo '<td style="color: ' . $color . '; font-size: ' . $size . 'px; font-family: ' . $font . ';">' . $text . '</td>';
         echo '<td>' . $author . '</td>';
         echo '<td>' . $timestamp . '</td>';
@@ -91,7 +89,9 @@ function wp_notes_display_notes($type = 'active') {
 
         // Edit form (for active notes only)
         if ($type === 'active') {
-            echo '<tr id="edit-note-' . esc_attr($key) . '" style="display:none;"><td colspan="6">';
+            /* Active rows have 4 columns: Note, Author, Created, Actions
+               (no longer a checkbox column). Edit form spans all 4. */
+            echo '<tr id="edit-note-' . esc_attr($key) . '" style="display:none;"><td colspan="4">';
             echo '<form class="edit-note-form" data-note-id="' . esc_attr($key) . '">';
             wp_nonce_field('wp_notes_nonce', '_wpnonce');
             echo '<input type="hidden" name="note_id" value="' . esc_attr($key) . '">';

inc/wp-notes-styles.php

@@ -11,6 +11,24 @@ if (!defined('ABSPATH')) {
 function wp_notes_admin_styles() {
     ?>
     <style>
+        /* Header banner image */
+        .wp-notes-header-banner {
+            margin: 16px 0 24px;
+        }
+        .wp-notes-banner-img {
+            display: block;
+            max-width: 1200px;
+            width: 100%;
+            height: auto;
+            border-radius: 4px;
+        }
+
+        /* Footer "buy me a coffee" — lives at the BOTTOM of the page */
+        .wp-notes-footer-support {
+            text-align: center;
+            margin: 32px 0 8px;
+        }
+
         /* Notes List Container */
         .wp-notes-active,
         .wp-notes-completed {

wp-notes.php

@@ -731,217 +731,21 @@ function wp_notes_page_callback() {
     ?>
     <div class="wrap">
         <!-- Header Section with WordPress Admin Styling -->
-        <h1 class="wp-heading-inline">Welcome to WP Notes</h1>
+        <h1 class="wp-heading-inline">WP Notes</h1>
-        <span class="page-title-action">Version <?php echo esc_html(WP_NOTES_VERSION); ?></span>
+        <span class="page-title-action">v<?php echo esc_html(WP_NOTES_VERSION); ?></span>
-        
+        <hr class="wp-header-end">
-        <!-- Footer Section with WordPress Admin Styling -->
+
-        <div class="wp-notes-footer postbox">
+        <p class="description" style="max-width: 720px;">
-            <div class="inside">
+            Log your daily tasks and keep a tidy work-log inside WordPress.
-                <div class="centered">
+            <a href="<?php echo esc_url(admin_url('admin.php?page=wp-notes-about')); ?>">Read more on the About page →</a>
-                    <a href="https://www.buymeacoffee.com/davidkeanek" target="_blank" class="button button-secondary"
+        </p>
-                       aria-label="Support the developer by buying them a coffee">
+
-                        <img src="https://img.buymeacoffee.com/button-api/?text=Buy%20me%20a%20coffee&emoji=&slug=davidkeanek&button_colour=FFDD00&font_colour=000000&font_family=Cookie&outline_colour=000000&coffee_colour=ffffff" 
+        <div class="wp-notes-header-banner">
-                             alt="Buy me a coffee button" 
+            <img src="<?php echo esc_url(WP_NOTES_URL); ?>assets/wp-notes-banner.jpg"
-                             style="max-height: 35px;">
+                 alt="WP Notes Banner"
-                    </a>
+                 class="wp-notes-banner-img">
-                </div>
-            </div>
         </div>
 
-        <!-- WordPress Admin Notices Styling -->
-        <style>
-            .centered { text-align: center; }
-            .wp-notes-footer { margin: 20px 0; }
-            .wp-notes-footer .inside { padding: 20px; }
-        </style>
-
-        <!-- Dismissible Box with WordPress Admin Styling -->
-        <div id="wp-notes-about-box" class="notice notice-info is-dismissible">
-            <div class="about-content">
-                <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 todos, mark them as complete, and export your data for safekeeping.</p>
-                <p>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 get clear value for their investment.</p>
-            </div>
-            <button type="button" class="notice-dismiss" onclick="closeAboutBox()" aria-label="Dismiss this notice">
-                <span class="screen-reader-text">Dismiss this notice</span>
-            </button>
-        </div>
-
-        <!-- Action Buttons with WordPress Admin Styling -->
-        <div class="wp-notes-actions">
-            <button type="button" class="button" onclick="showAboutBoxAgain()" aria-label="Show the about message again">
-                Show Welcome Message
-            </button>
-            <button type="button" class="button" onclick="closeAboutBox()" aria-label="Close the about box">
-                Close About Box
-            </button>
-        </div>
-            <script>
-                function showAboutBoxAgain() {
-                    document.getElementById('wp-notes-about-box').style.display = 'block';
-                    // Remove the localStorage value every time they load the plugin page
-                    localStorage.removeItem('wpNotesAboutDismissed'); // Remove dismissal flag
-                }
-            </script>
-        
-        <!-- JavaScript to handle the dismiss action and remember it across page loads -->
-        <script>
-            document.addEventListener('DOMContentLoaded', function() {
-                // Check if the box has been dismissed previously
-                if (localStorage.getItem('wpNotesAboutDismissed') === 'true') {
-                    // Check if the box has been dismissed within the last week
-                    const lastDismissed = localStorage.getItem('wpNotesAboutLastDismissed');
-                    const oneWeek = 7 * 24 * 60 * 60 * 1000; // 1 week in milliseconds
-                    const now = Date.now();
-                    if (!lastDismissed || (now - lastDismissed) > oneWeek) {
-                        document.getElementById('wp-notes-about-box').style.display = 'block';
-                        localStorage.removeItem('wpNotesAboutLastDismissed'); // Reset timestamp to show the message
-                    }
-                    }
-                }
-            );
-
-            function closeAboutBox() {
-                document.getElementById('wp-notes-about-box').style.display = 'none';
-                // Store dismissal in localStorage
-                localStorage.setItem('wpNotesAboutDismissed', 'true');
-                // Store the current time as the last dismissed time
-                localStorage.setItem('wpNotesAboutLastDismissed', Date.now());
-            }
-        </script>
-
-        <!-- Styles for the dismissible box -->
-        <style>
-            .wp-notes-about-box {
-                position: relative;
-                background: #f9f9f9;
-                padding: 20px;
-                border: 1px solid #ccd0d4;
-                border-radius: 4px;
-                margin: 20px 0;
-            }
-            .wp-notes-close-button {
-                position: absolute;
-                top: 10px;
-                right: 10px;
-                background: none;
-                border: none;
-                font-size: 18px;
-                color: #aaa;
-                cursor: pointer;
-            }
-            .wp-notes-close-button:hover {
-                color: #0073aa;
-            }
-        </style>
-
-        <p>
-        <button onclick="toggleSection('header')" style="background: #0073aa; color: #fff; border: none; padding: 8px 12px; cursor: pointer;">
-        Toggle Welcome Section
-        </button>
-
-        <div id="header" style="display: none; margin-top: 10px;">
-        <div class="wp-notes-welcome" style="background: #fff; padding: 20px; margin: 20px 0; border: 1px solid #ccc;">
-        <br>
-        
-        <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">
-            
-            <!-- What's New Section -->
-            <h1>Welcome to WP Notes v <?php echo esc_html(WP_NOTES_VERSION); ?></h1>
-            <p>
-            <div class="wp-notes-whatsnew" 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 Welcome Section
-            </button>
-            
-            <!-- Section to Toggle -->  
-            <div id="about-section" style="display: none; margin-top: 10px;">
-            <h1>About WP Notes</h1>
-            <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>
-
-            <p>
-            <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>
-            </p>
-
-            <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>
-            If you have any questions or feedback, feel free to reach out to us. Enjoy your note-taking experience!
-            </p>
-
-            <p>Join our community and unlock the full potential of WP Notes.</p>    
-        </div>
-    </div>
-</div>
-        <!-- What's New Section -->
-        <h1>What's New in WP Notes 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 What's New Section
-                </button> 
-            <br>
-            <!-- Section to Toggle -->
-            <div id="version-section" style="display: none;">
-            <h3>Version 3.0.0 (Current)</h3>
-            <ul>
-                <li>Major Update: Removed activity tracking functionality for improved focus and privacy</li>
-                <li>Added Error Logging: Introduced a comprehensive error logging system to capture plugin-related errors</li>
-                <li>Added Welcome Section and Version history</li>
-                <li>Added Image to main menu</li>
-                <li>Fixed: Edit Function is now working correctly</li>
-                <li>Added: Popup notification with "Saved" status</li>
-                <li>Improved: Error handling and stability</li>
-                <li>Added: Documentation for enhanced error reporting</li>
-                <li>Feature: Ability to restore older notes</li>
-                <li>Added: "Created by," "Modified by," and "Edited by" fields</li>
-                <li>Improved: Task-tracking interface in dashboard</li>
-                <li>Added: Color, font, and size customization for notes</li>
-                <li>Enhanced: Edit and mark-as-done functions</li>
-                <li>Improved: AJAX-based updates for smoother editing</li>
-                <li>Added: Quick access to Create Note in Tools menu</li>
-                <li>Added: Create Note option in WP-Notes menu</li>
-            </ul>
-        </div>
-        </div>
-    </div>
-</div>
-    
-    <!-- JavaScript to toggle visibility of sections -->
-    <script>
-        function toggleSection(sectionId) {
-            var section = document.getElementById(sectionId);
-            if (section.style.display === "none") {
-                section.style.display = "block";
-            } else {
-                section.style.display = "none";
-            }
-        }
-    </script>
-
         <!-- Note Creation Form with WordPress Admin Styling -->
         <div class="postbox">
             <div class="postbox-header">
@@ -1113,6 +917,15 @@ function wp_notes_page_callback() {
         <div class="wp-notes-completed" id="completed-notes">
             <?php wp_notes_display_notes('completed'); ?>
         </div>
+
+        <!-- Footer: support link (lives at the BOTTOM, not the top) -->
+        <p class="wp-notes-footer-support">
+            <a href="https://www.buymeacoffee.com/davidkeanek" target="_blank" rel="noopener"
+               class="button button-secondary"
+               aria-label="Support the developer by buying them a coffee">
+                ☕ Buy me a coffee
+            </a>
+        </p>
     </div>
     <?php
 }
@@ -1131,12 +944,11 @@ function wp_notes_list_table() {
         return;
     }
 
+    /* Dashboard widget table. No checkbox column — bulk actions are not
+       wired up; re-add when there is something to act on. */
     echo '<table class="wp-list-table widefat striped">
         <thead>
             <tr>
-                <th scope="col" class="manage-column column-cb check-column">
-                    <input type="checkbox" id="select-all-notes">
-                </th>
                 <th scope="col" class="manage-column">Note</th>
                 <th scope="col" class="manage-column">Created By</th>
                 <th scope="col" class="manage-column">Created On</th>
@@ -1154,8 +966,7 @@ function wp_notes_list_table() {
         $author = esc_html($note['author_name'] ?? 'Unknown');
 
         echo "<tr>
-            <td><input type='checkbox' name='note_ids[]' value='$key' class='note-checkbox'></td>
+            <td style='color: $color; font-size: {$size}px; font-family: $font;'>$text</td>
-            <td style='color: $color; font-size: ${size}px; font-family: $font;'>$text</td>
             <td>$author</td>
             <td>$timestamp</td>
             <td>