feat: Active/Completed tabs on My Log page (v3.4.0)

Replaces the two stacked sections (Active above, Completed below)
on the main Logbook page with a single-pane WP-admin tabbed view
using the native subsubsub pattern (same as Posts/Comments/Plugins).

- Two tabs: Active (N) | Completed (M) with live counts
- URL-driven state via ?tab=active|completed; bookmarkable,
  refresh-stable, back-button works, invalid values fall back to
  Active server-side via whitelist + sanitize_key
- No JavaScript — each tab is a hyperlink built with add_query_arg
- WP-admin core CSS handles .subsubsub + .current; only a small
  margin block added in wp-notes-styles.php
- Single-pane render: only the selected tab's section is in the
  DOM, so no flash-of-wrong-content
- "Add a Note" form stays visible on both tabs for UI consistency

Flagged in the 2026-05-25 UX audit as the highest-payoff next move
(Tier 3 item #7). When the v4 timer/time_logged field ships, the
structure can extend to 3 tabs (TODO/IN PROGRESS/Completed) in
the same place; without it, an IN PROGRESS tab would always be
empty, so v3.4.0 ships the 2-tab version matching the current
data model.

Storage model unchanged — Active and Completed remain in their
separate options (wp_notes, wp_done_notes). The
wp_notes_display_notes($type) function is unchanged.

MINOR bump: new feature, no breaking changes.

CHANGELOG.md

@@ -9,6 +9,36 @@ Format: [Keep a Changelog 1.1.0](https://keepachangelog.com/en/1.1.0/) — versi
 
 ---
 
+## [3.4.0] — 2026-05-27
+
+### Added — Active / Completed tabs on the My Log page
+
+The main Logbook page used to render two stacked sections — Active notes from `wp_notes` above, Completed notes from `wp_done_notes` below. As the lists grew, this became a "wall of stacked sections" with Completed pushing content off the visible fold and users having to scroll past it to scan their active work.
+
+v3.4.0 replaces the stacked layout with a **single-pane tabbed view** using WordPress's native `subsubsub` filter-tab pattern (the same one Posts / Comments / Plugins admin pages use):
+
+- **Two tabs**: `Active (N)` and `Completed (M)`. Counts in the labels match the actual list lengths.
+- **URL-driven state**: `?page=wp-notes&tab=active` (default) and `?page=wp-notes&tab=completed`. Bookmarkable, refresh-stable, back-button works. Invalid tab values fall back to Active server-side.
+- **No JavaScript**: each tab is a hyperlink. WP-admin core CSS handles the `.subsubsub` and `.current` styling; we just add a small top/bottom margin block.
+- **Single-pane render**: only the selected tab's section is in the DOM, so no flash-of-wrong-content and no wasted markup.
+- **"Add a Note" form stays visible on both tabs** — even from Completed you can think of something new to log.
+
+This was flagged in the 2026-05-25 UX audit as the highest-payoff next move (Tier 3 item #7). When the v4 roadmap's timer / `time_logged` field ships, the tab structure can extend naturally to three tabs (TODO / IN PROGRESS / Completed) in the same place; for now, without that field, an IN PROGRESS tab would always be empty, so v3.4.0 ships the 2-tab version that matches the current data model.
+
+### Files changed
+
+- `wp-notes.php` — `wp_notes_page_callback()`: tab detection from `$_GET['tab']` (sanitized + whitelisted), `subsubsub` markup with link-builder via `add_query_arg`, single-pane conditional render of either the active or completed section. Replaces the previous two-stacked-section block.
+- `inc/wp-notes-styles.php` — minor spacing (`margin: 12px 0 18px`) on `.subsubsub` so the tab strip has breathing room.
+- Plugin header `Version: 3.3.5 → 3.4.0`; `WP_NOTES_VERSION` constant updated to match. MINOR bump (new feature, no breaking changes).
+
+### Not changed
+
+- Storage model — Active and Completed remain in their separate options (`wp_notes`, `wp_done_notes`).
+- The `wp_notes_display_notes($type)` function in `inc/wp-notes-display.php` — already accepts the section type, no signature change needed.
+- No new DB writes, schema changes, AJAX endpoints, or dependencies.
+
+---
+
 ## [3.3.5] — 2026-05-25
 
 ### Changed — Admin-menu icon

inc/wp-notes-styles.php

@@ -198,6 +198,14 @@ function wp_notes_admin_styles() {
             color: #3c763d;
         }
 
+        /* v3.4.0 — Active/Completed tab strip on the My Log page.
+           WP-admin core already styles .subsubsub and .current;
+           we only need to add breathing room above + below. */
+        .wp-notes-page .subsubsub,
+        .wrap > .subsubsub {
+            margin: 12px 0 18px;
+        }
+
         /* Responsive Design */
         @media screen and (max-width: 782px) {
             .wp-notes-formatting {

wp-notes.php

@@ -5,7 +5,7 @@
  * Plugin Name: Logbook
  * Plugin URI: https://icanhelp.ie/wp-notes
  * Description: A lightweight task & logbook plugin for WordPress. Log your daily work, mark tasks done, and keep a tidy record inside the dashboard. Perfect for freelancers showing clients what's been delivered and students proving work to teachers.
- * Version: 3.3.5
+ * Version: 3.4.0
  * Requires at least: 5.0
  * Requires PHP: 7.2
  * Author: IR240474
@@ -33,7 +33,7 @@ if (!isset($wp_notes_init)) {
     $wp_notes_init = true;
     
     // Plugin Constants
-    if (!defined('WP_NOTES_VERSION')) define('WP_NOTES_VERSION', '3.3.5');
+    if (!defined('WP_NOTES_VERSION')) define('WP_NOTES_VERSION', '3.4.0');
     if (!defined('WP_NOTES_FILE')) define('WP_NOTES_FILE', __FILE__);
     if (!defined('WP_NOTES_PATH')) define('WP_NOTES_PATH', plugin_dir_path(__FILE__));
     if (!defined('WP_NOTES_URL')) define('WP_NOTES_URL', plugin_dir_url(__FILE__));
@@ -832,6 +832,14 @@ function wp_notes_page_callback() {
     $total_notes = count($notes);
     $total_done = count($done_notes);
 
+    // v3.4.0 — which tab is selected? Default 'active'. Whitelist-only.
+    $current_tab = isset($_GET['tab']) ? sanitize_key(wp_unslash($_GET['tab'])) : 'active';
+    if (!in_array($current_tab, array('active', 'completed'), true)) {
+        $current_tab = 'active';
+    }
+    $active_tab_url    = esc_url(add_query_arg(array('page' => 'wp-notes', 'tab' => 'active'),    admin_url('admin.php')));
+    $completed_tab_url = esc_url(add_query_arg(array('page' => 'wp-notes', 'tab' => 'completed'), admin_url('admin.php')));
+
     // Get user settings
     $settings = get_option('wp_notes_settings', array(
         'default_font' => 'Arial',
@@ -1005,15 +1013,36 @@ function wp_notes_page_callback() {
 
         <!-- Notes List -->
         <h2>Log entries</h2>
-        <!-- Active Notes List -->
-        <div class="wp-notes-active" id="active-notes">
-            <?php wp_notes_display_notes('active'); ?>
-        </div>
 
-        <!-- Completed Notes List -->
+        <!-- v3.4.0 — WP-native subsubsub tab strip. Single-pane: only the
-        <div class="wp-notes-completed" id="completed-notes">
+             selected tab's section is rendered below. URL-driven state
-            <?php wp_notes_display_notes('completed'); ?>
+             (?tab=active|completed) so it's bookmarkable + refresh-stable.
-        </div>
+             WP-admin core supplies .subsubsub and .current styling. -->
+        <ul class="subsubsub">
+            <li>
+                <a href="<?php echo $active_tab_url; ?>"<?php echo $current_tab === 'active' ? ' class="current"' : ''; ?>>
+                    <?php esc_html_e('Active', 'a-wp-notes'); ?>
+                    <span class="count">(<?php echo (int) $total_notes; ?>)</span>
+                </a> |
+            </li>
+            <li>
+                <a href="<?php echo $completed_tab_url; ?>"<?php echo $current_tab === 'completed' ? ' class="current"' : ''; ?>>
+                    <?php esc_html_e('Completed', 'a-wp-notes'); ?>
+                    <span class="count">(<?php echo (int) $total_done; ?>)</span>
+                </a>
+            </li>
+        </ul>
+        <div style="clear:both;"></div>
+
+        <?php if ($current_tab === 'active') : ?>
+            <div class="wp-notes-active" id="active-notes">
+                <?php wp_notes_display_notes('active'); ?>
+            </div>
+        <?php else : ?>
+            <div class="wp-notes-completed" id="completed-notes">
+                <?php wp_notes_display_notes('completed'); ?>
+            </div>
+        <?php endif; ?>
 
         <!-- Footer: support link (lives at the BOTTOM, not the top) -->
         <p class="wp-notes-footer-support">