@leftium/gg 0.0.29 → 0.0.30

package/dist/eruda/plugin.js

@@ -95,6 +95,20 @@ export function createGgPlugin(options, gg) {
             }
         });
     }
+    function soloNamespace(namespace) {
+        const ns = namespace.trim();
+        // Toggle: if already soloed on this namespace, restore all
+        if (filterPattern === ns) {
+            filterPattern = 'gg:*';
+            enabledNamespaces.clear();
+            getAllCapturedNamespaces().forEach((n) => enabledNamespaces.add(n));
+            return;
+        }
+        // Solo: show only this namespace
+        filterPattern = ns;
+        enabledNamespaces.clear();
+        enabledNamespaces.add(ns);
+    }
     function simplifyPattern(pattern) {
         if (!pattern)
             return '';
@@ -172,7 +186,11 @@ export function createGgPlugin(options, gg) {
     }
     function gridColumns() {
         const ns = nsColWidth !== null ? `${nsColWidth}px` : 'auto';
-        // diff | ns | handle | content (× is now inside ns)
+        // When filter expanded: icons | diff | ns | handle | content
+        // When collapsed:               diff | ns | handle | content
+        if (filterExpanded) {
+            return `auto auto ${ns} 4px 1fr`;
+        }
         return `auto ${ns} 4px 1fr`;
     }
     function buildHTML() {
@@ -191,6 +209,7 @@ export function createGgPlugin(options, gg) {
 			.gg-log-header {
 				display: contents;
 			}
+			.gg-log-icons,
 			.gg-log-diff,
 			.gg-log-ns,
 			.gg-log-handle,
@@ -199,6 +218,32 @@ export function createGgPlugin(options, gg) {
 				align-self: start !important;
 				border-top: 1px solid rgba(0,0,0,0.05);
 			}
+			.gg-log-icons {
+				display: flex;
+				gap: 2px;
+				padding: 0 4px 0 0;
+				white-space: nowrap;
+				align-self: stretch !important;
+			}
+			.gg-log-icons button {
+				all: unset;
+				cursor: pointer;
+				opacity: 0.35;
+				padding: 4px 10px;
+				line-height: 1;
+				display: flex;
+				align-items: center;
+			}
+			.gg-log-icons button:hover {
+				opacity: 1;
+				background: rgba(0,0,0,0.05);
+			}
+			.gg-solo-target {
+				cursor: pointer;
+			}
+			.gg-solo-target:hover {
+				background: rgba(0,0,0,0.05);
+			}
 			.gg-details {
 				grid-column: 1 / -1;
 				border-top: none;
@@ -242,15 +287,6 @@ export function createGgPlugin(options, gg) {
 					word-break: break-word;
 					padding: 4px 0;
 				}
-			/* Make header clickable for filtering when filters are expanded */
-			.gg-log-header.clickable {
-				cursor: pointer;
-			}
-			/* Desktop: highlight child elements since header has display: contents */
-			.gg-log-header.clickable:hover .gg-log-diff,
-			.gg-log-header.clickable:hover .gg-log-ns {
-				background: rgba(0,0,0,0.05);
-			}
 				.gg-filter-panel {
 					background: #f5f5f5;
 					padding: 10px;
@@ -333,6 +369,7 @@ export function createGgPlugin(options, gg) {
 					.gg-log-entry:not(:first-child) {
 						border-top: 1px solid rgba(0,0,0,0.05);
 					}
+				.gg-log-icons,
 				.gg-log-diff,
 				.gg-log-ns,
 				.gg-log-handle,
@@ -347,18 +384,6 @@ export function createGgPlugin(options, gg) {
 				margin-bottom: 4px;
 				min-width: 0;
 			}
-			/* Mobile: hover on container since it's not display: contents */
-			.gg-log-header.clickable {
-				padding: 2px 0;
-			}
-			.gg-log-header.clickable:hover {
-				background: rgba(0,0,0,0.05);
-			}
-				/* Override desktop child hover on mobile */
-				.gg-log-header.clickable:hover .gg-log-diff,
-				.gg-log-header.clickable:hover .gg-log-ns {
-					background: transparent;
-				}
 				.gg-log-diff {
 					padding: 0;
 					text-align: left;
@@ -612,17 +637,42 @@ export function createGgPlugin(options, gg) {
                 }
                 return;
             }
-            // Handle clickable header (when filters expanded)
-            // Skip if clicking on resize handle
-            if (!target?.classList?.contains('gg-log-handle') &&
-                target?.closest('.gg-log-header.clickable')) {
-                const header = target.closest('.gg-log-header.clickable');
-                const namespace = header.getAttribute('data-namespace');
+            // Handle filter icon clicks (hide / solo)
+            if (target?.classList?.contains('gg-icon-hide') ||
+                target?.classList?.contains('gg-icon-solo')) {
+                const iconsDiv = target.closest('.gg-log-icons');
+                const namespace = iconsDiv?.getAttribute('data-namespace');
+                if (!namespace)
+                    return;
+                if (target.classList.contains('gg-icon-hide')) {
+                    toggleNamespace(namespace, false);
+                }
+                else {
+                    soloNamespace(namespace);
+                }
+                localStorage.setItem('debug', filterPattern);
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
+            // Handle clicking diff/ns cells to solo (same as 🎯)
+            if (target?.classList?.contains('gg-solo-target')) {
+                const namespace = target.getAttribute('data-namespace');
                 if (!namespace)
                     return;
-                // Toggle this namespace off
-                toggleNamespace(namespace, false);
-                // Save to localStorage and re-render
+                soloNamespace(namespace);
+                localStorage.setItem('debug', filterPattern);
+                renderFilterUI();
+                renderLogs();
+                return;
+            }
+            // Clicking background (container or grid, not a log element) restores all
+            if (filterExpanded &&
+                filterPattern !== 'gg:*' &&
+                (target === containerEl || target?.classList?.contains('gg-log-grid'))) {
+                filterPattern = 'gg:*';
+                enabledNamespaces.clear();
+                getAllCapturedNamespaces().forEach((ns) => enabledNamespaces.add(ns));
                 localStorage.setItem('debug', filterPattern);
                 renderFilterUI();
                 renderLogs();
@@ -727,20 +777,22 @@ export function createGgPlugin(options, gg) {
                 })
                     .join(' ');
             }
-            // Make header clickable when filters expanded
-            const headerClass = filterExpanded ? 'gg-log-header clickable' : 'gg-log-header';
-            const headerAttrs = filterExpanded
-                ? ` data-namespace="${ns}" title="Click to hide this namespace"`
-                : '';
-            // Add × at start of diff when filters expanded (bold, darker)
-            const filterIcon = filterExpanded
-                ? '<span style="font-weight: bold; color: #000; opacity: 0.6;">× </span>'
+            // Filter icons column (only when expanded)
+            const iconsCol = filterExpanded
+                ? `<div class="gg-log-icons" data-namespace="${ns}">` +
+                    `<button class="gg-icon-hide" title="Hide this namespace">🗑</button>` +
+                    `<button class="gg-icon-solo" title="Show only this namespace">🎯</button>` +
+                    `</div>`
                 : '';
+            // When filter expanded, diff+ns are clickable (solo) with data-namespace
+            const soloAttr = filterExpanded ? ` data-namespace="${ns}"` : '';
+            const soloClass = filterExpanded ? ' gg-solo-target' : '';
             // Desktop: grid layout, Mobile: stacked layout
             return (`<div class="gg-log-entry">` +
-                `<div class="${headerClass}"${headerAttrs}>` +
-                `<div class="gg-log-diff" style="color: ${color};">${filterIcon}${diff}</div>` +
-                `<div class="gg-log-ns" style="color: ${color};">${ns}</div>` +
+                `<div class="gg-log-header">` +
+                iconsCol +
+                `<div class="gg-log-diff${soloClass}" style="color: ${color};"${soloAttr}>${diff}</div>` +
+                `<div class="gg-log-ns${soloClass}" style="color: ${color};"${soloAttr}>${ns}</div>` +
                 `<div class="gg-log-handle"></div>` +
                 `</div>` +
                 `<div class="gg-log-content">${argsHTML}</div>` +

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leftium/gg",
-  "version": "0.0.29",
+  "version": "0.0.30",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Leftium/gg.git"