Remembers Hidden Elements + Use Hover based Highlights + Very Precise Selectors

plugins/element-hider-luna/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@meowarex/element-hider",
-	"description": "adds a right-click option to hide any element on the page.",
+	"description": "Adds RightClick/Context menu options for hiding elements",
 	"author": {
 		"name": "meowarex",
 		"url": "https://github.com/meowarex",

plugins/element-hider-luna/src/Settings.tsx

@@ -0,0 +1,28 @@
+import { ReactiveStore } from "@luna/core";
+import { LunaSettings } from "@luna/ui";
+import React from "react";
+
+export const settings = await ReactiveStore.getPluginStorage("ElementHider", {
+	hiddenElements: [] as Array<{
+		selector: string;
+		tagName: string;
+		className: string;
+		textContent: string;
+		timestamp: number;
+	}>
+});
+
+export const Settings = () => {
+	const [hiddenElementsCount, setHiddenElementsCount] = React.useState(settings.hiddenElements.length);
+	
+	// Update count when settings change
+	React.useEffect(() => {
+		const interval = setInterval(() => {
+			setHiddenElementsCount(settings.hiddenElements.length);
+		}, 1000);
+		
+		return () => clearInterval(interval);
+	}, []);
+	
+	return null;
+}; 

plugins/element-hider-luna/src/index.ts

@@ -1,36 +1,167 @@
 import { LunaUnload, Tracer } from "@luna/core";
 import { StyleTag, ContextMenu } from "@luna/lib";
+import { settings, Settings } from "./Settings";
 
 // Import CSS directly using Luna's file:// syntax
 import styles from "file://styles.css?minify";
 
 export const { trace } = Tracer("[Element Hider]");
 
+// Export Settings
+export { Settings };
+
 // Clean up resources
 export const unloads = new Set<LunaUnload>();
 
-// StyleTag for element hider styling
+// StyleTag for element hider
 const styleTag = new StyleTag("Element-Hider", unloads, styles);
 
 // State management
 let targetElement: HTMLElement | null = null;
 let hiddenElements = new WeakSet<HTMLElement>();
-let hiddenElementsArray: HTMLElement[] = []; // Keep array for iteration since WeakSet isn't iterable
+let hiddenElementsArray: HTMLElement[] = [];
 
+// MutationObserver for reactive element detection
+let elementObserver: MutationObserver | null = null;
 
+// Generate a unique selector for an element
+function generateElementSelector(element: HTMLElement): string {
+	// Priority 1: ID (most specific)
+	if (element.id) {
+		return `#${element.id}`;
+	}
 	
-// Hide element directly without animation (for restoration)
+	// Priority 2: data-test attribute (very specific for Tidal <3)
+	const dataTest = element.getAttribute('data-test');
+	if (dataTest) {
+		return `[data-test="${dataTest}"]`;
+	}
+	
+	// Priority 3: Combination of tag + specific classes + position
+	let selector = element.tagName.toLowerCase();
+	
+	// Get filtered classes (exclude our temporary classes)
+	const classes = element.className ? element.className.trim().split(/\s+/).filter(cls => {
+		return cls.length > 0 && 
+			   !cls.startsWith('element-hider-') &&
+			   cls !== 'element-hider-target' &&
+			   cls !== 'element-hider-hiding' &&
+			   cls !== 'element-hider-hidden';
+	}) : [];
+	
+	// Only use classes if we have them and they're not generic and dumb
+	if (classes.length > 0) {
+		// Use ALL classes to be very specific
+		selector += '.' + classes.join('.');
+		
+		// Add parent context for extra specificity (for when the element is inside another element)
+		const parent = element.parentElement;
+		if (parent && parent.tagName !== 'BODY' && parent.tagName !== 'HTML') {
+			const parentClasses = parent.className ? parent.className.trim().split(/\s+/).filter(cls => {
+				return cls.length > 0 && !cls.startsWith('element-hider-');
+			}) : [];
+			
+			if (parentClasses.length > 0) {
+				const parentSelector = parent.tagName.toLowerCase() + '.' + parentClasses.slice(0, 2).join('.');
+				selector = `${parentSelector} > ${selector}`;
+			}
+		}
+	} else {
+		// If no useful classes, use position-based selector with parent context
+		const parent = element.parentElement;
+		if (parent) {
+			const siblings = Array.from(parent.children).filter(child => child.tagName === element.tagName);
+			const index = siblings.indexOf(element);
+			if (index >= 0) {
+				selector += `:nth-of-type(${index + 1})`;
+				
+				// Add parent context
+				if (parent.tagName !== 'BODY' && parent.tagName !== 'HTML') {
+					const parentClasses = parent.className ? parent.className.trim().split(/\s+/).filter(cls => {
+						return cls.length > 0 && !cls.startsWith('element-hider-');
+					}) : [];
+					
+					if (parentClasses.length > 0) {
+						const parentSelector = parent.tagName.toLowerCase() + '.' + parentClasses.slice(0, 2).join('.');
+						selector = `${parentSelector} > ${selector}`;
+					}
+				}
+			}
+		}
+	}
+	
+	console.log(`[Element Hider] Generated specific selector: ${selector}`);
+	return selector;
+}
+
+// Save hidden element to persistent storage | uses @Inrixia's Reactive Storage <3
+function saveHiddenElement(element: HTMLElement): void {
+	const selector = generateElementSelector(element);
+	const elementInfo = {
+		selector: selector,
+		tagName: element.tagName,
+		className: element.className || '',
+		textContent: element.textContent?.substring(0, 100) || '',
+		timestamp: Date.now()
+	};
+	
+	// Check if element is already saved
+	const existingIndex = settings.hiddenElements.findIndex(
+		stored => stored.selector === elementInfo.selector
+	);
+	
+	if (existingIndex === -1) {
+		settings.hiddenElements.push(elementInfo);
+		console.log(`[Element Hider] Saved element: ${elementInfo.selector}`);
+		console.log(`[Element Hider] Total stored: ${settings.hiddenElements.length}`);
+	} else {
+		console.log(`[Element Hider] Element already saved: ${elementInfo.selector}`);
+	}
+}
+
+// Remove hidden element from persistent storage (for unhiding)
+function removeSavedElement(element: HTMLElement): void {
+	const selector = generateElementSelector(element);
+	const index = settings.hiddenElements.findIndex(stored => stored.selector === selector);
+	
+	if (index !== -1) {
+		settings.hiddenElements.splice(index, 1);
+		console.log(`[Element Hider] Permanently removed: ${selector}`);
+		console.log(`[Element Hider] Remaining stored: ${settings.hiddenElements.length}`);
+	}
+}
+
+// Check if an element matches any stored selector (EXACT match only)
+function matchesStoredSelector(element: HTMLElement): boolean {
+	for (const storedElement of settings.hiddenElements) {
+		try {
+			// Only use EXACT selector match - no fallbacks during reactive hiding
+			if (element.matches(storedElement.selector)) {
+				return true;
+			}
+		} catch (error) {
+			console.warn(`[Element Hider] Invalid selector: ${storedElement.selector}`, error);
+		}
+	}
+	
+	return false;
+}
+
+// Hide element directly without animation
 function hideElementDirectly(element: HTMLElement): void {
+	if (hiddenElements.has(element)) return;
+	
 	element.classList.add("element-hider-hidden");
 	hiddenElements.add(element);
 	hiddenElementsArray.push(element);
+	console.log(`[Element Hider] Hidden element: ${element.tagName}${element.className ? '.' + element.className.split(' ')[0] : ''}`);
 }
 
 // Hide the target element with animation
 function hideTargetElement(): void {
 	if (!targetElement) return;
 	
-    trace.msg.log(`Hiding element: ${targetElement.tagName}${targetElement.className ? '.' + targetElement.className.split(' ').join('.') : ''}`);
+	console.log(`[Element Hider] Hiding with animation: ${targetElement.tagName}${targetElement.className ? '.' + targetElement.className.split(' ')[0] : ''}`);
 	
 	// Add hiding animation class
 	targetElement.classList.add("element-hider-hiding");
@@ -38,6 +169,9 @@ function hideTargetElement(): void {
 	// Store reference to the element
 	const elementToHide = targetElement;
 	
+	// Save to persistent storage
+	saveHiddenElement(elementToHide);
+	
 	// Wait for animation to complete, then hide
 	setTimeout(() => {
 		elementToHide.classList.add("element-hider-hidden");
@@ -50,24 +184,117 @@ function hideTargetElement(): void {
 	targetElement = null;
 }
 
-// Show all hidden elements
-function showAllElements(): void {
-    trace.msg.log(`Showing ${hiddenElementsArray.length} hidden elements`);
+// Unhide all elements permanently (remove from storage)
+function unhideAllElements(): void {
+	console.log(`[Element Hider] Permanently unhiding ${settings.hiddenElements.length} saved elements`);
 	
-    // Use array to iterate and show all hidden elements
+	// Show all currently hidden elements
 	hiddenElementsArray.forEach(element => {
-        // Check if element is still in DOM
 		if (document.body.contains(element)) {
 			element.classList.remove("element-hider-hidden", "element-hider-hiding");
 		}
 	});
 	
-    // Clear both collections
+	// Clear both storage and runtime collections
+	settings.hiddenElements = [];
 	hiddenElements = new WeakSet<HTMLElement>();
 	hiddenElementsArray = [];
 }
 
-// Handle highlighting target element on hover
+// Process all elements in the document to hide matching ones (with strict matching)
+function processAllElements(): void {
+	if (settings.hiddenElements.length === 0) return;
+	
+	console.log(`[Element Hider] Scanning document for ${settings.hiddenElements.length} stored selectors`);
+	let hiddenCount = 0;
+	
+	// Use querySelectorAll for each stored selector with validation
+	settings.hiddenElements.forEach((storedElement, index) => {
+		try {
+			console.log(`[Element Hider] Searching for: ${storedElement.selector}`);
+			const elements = document.querySelectorAll(storedElement.selector);
+			console.log(`[Element Hider] Found ${elements.length} matches for selector ${index + 1}`);
+			
+			// Limit to prevent over-hiding (safety check)
+			if (elements.length > 10) {
+				console.warn(`[Element Hider] Selector too broad (${elements.length} matches), skipping: ${storedElement.selector}`);
+				return;
+			}
+			
+			elements.forEach((element, elemIndex) => {
+				const htmlElement = element as HTMLElement;
+				if (!hiddenElements.has(htmlElement)) {
+					hideElementDirectly(htmlElement);
+					hiddenCount++;
+					console.log(`[Element Hider] Hid element ${elemIndex + 1}/${elements.length} for selector ${index + 1}`);
+				}
+			});
+		} catch (error) {
+			console.warn(`[Element Hider] Invalid selector: ${storedElement.selector}`, error);
+		}
+	});
+	
+	if (hiddenCount > 0) {
+		console.log(`[Element Hider] Total elements hidden: ${hiddenCount}`);
+	}
+}
+
+// Process new elements that are added to the DOM
+function processNewElements(addedNodes: NodeList): void {
+	addedNodes.forEach(node => {
+		if (node.nodeType !== Node.ELEMENT_NODE) return;
+		
+		const element = node as HTMLElement;
+		
+		// Check the element itself
+		if (matchesStoredSelector(element)) {
+			hideElementDirectly(element);
+		}
+		
+		// Check all descendant elements
+		const descendants = element.querySelectorAll('*');
+		descendants.forEach(descendant => {
+			if (matchesStoredSelector(descendant as HTMLElement)) {
+				hideElementDirectly(descendant as HTMLElement);
+			}
+		});
+	});
+}
+
+// Set up reactive element observer
+function setupElementObserver(): void {
+	if (elementObserver) return;
+	
+	elementObserver = new MutationObserver((mutations) => {
+		mutations.forEach((mutation) => {
+			if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
+				processNewElements(mutation.addedNodes);
+			}
+		});
+	});
+	
+	elementObserver.observe(document.body, {
+		childList: true,
+		subtree: true
+	});
+	
+	console.log(`[Element Hider] Set up reactive element observer`);
+}
+
+// Global functions
+(window as any).showAllElementsFromSettings = unhideAllElements;
+(window as any).debugElementHider = () => {
+	console.log(`=== Element Hider Debug Info ===`);
+	console.log(`Stored elements: ${settings.hiddenElements.length}`);
+	console.log(`Currently hidden elements: ${hiddenElementsArray.length}`);
+	console.log(`Reactive hiding enabled: true`);
+	settings.hiddenElements.forEach((element, index) => {
+		console.log(`${index + 1}. ${element.selector} (${element.tagName})`);
+	});
+	console.log(`================================`);
+};
+
+// Handle highlighting target element
 function highlightElement(element: HTMLElement): void {
 	// Remove previous highlights
 	document.querySelectorAll('.element-hider-target').forEach(el => {
@@ -93,7 +320,7 @@ let customMenu: HTMLElement | null = null;
 let contextMenuTimeout: number | null = null;
 let waitingForBuiltInMenu = false;
 
-// Listen for right-click events to capture the target
+// Listen for right-click events to capture the target for context menu
 document.addEventListener('contextmenu', (event: MouseEvent) => {
 	const target = event.target as HTMLElement;
 	
@@ -111,9 +338,8 @@ document.addEventListener('contextmenu', (event: MouseEvent) => {
 	// Close any existing custom menu
 	closeCustomMenu();
 	
-    // Store the right-clicked element and context
+	// Store the right-clicked element for context menu
 	currentContextElement = target;
-    highlightElement(target);
 	waitingForBuiltInMenu = true;
 	
 	// Store event coordinates for potential custom menu
@@ -133,22 +359,23 @@ document.addEventListener('contextmenu', (event: MouseEvent) => {
 	// Don't prevent default initially - let Luna try to handle the context menu
 }, true);
 
-// Listen for clicks to remove highlights and close custom menu
+// Listen for clicks to close custom menu
 document.addEventListener('click', (event: MouseEvent) => {
 	const target = event.target as HTMLElement;
 	
 	// If clicking outside our custom menu, close it
 	if (customMenu && !target.closest(".element-hider-custom-menu")) {
 		closeCustomMenu();
-    }
-    
 		removeHighlight();
+	}
 }, true);
 
-// Handle escape key to close custom menu
+// Handle escape key to close custom menu and remove highlights
 document.addEventListener('keydown', (event: KeyboardEvent) => {
-    if (event.key === "Escape" && customMenu) {
+	if (event.key === "Escape") {
+		if (customMenu) {
 			closeCustomMenu();
+		}
 		removeHighlight();
 	}
 });
@@ -170,17 +397,28 @@ function createCustomMenu(): HTMLElement {
 		}
 	});
 	
-    // Show All Elements option
-    const showAllItem = document.createElement("button");
-    showAllItem.className = "element-hider-menu-item";
-    showAllItem.innerHTML = `Show All Hidden Elements (${hiddenElementsArray.length})`;
-    showAllItem.addEventListener("click", () => {
-        showAllElements();
+	// Add hover effects for highlighting
+	hideItem.addEventListener("mouseenter", () => {
+		if (currentContextElement) {
+			highlightElement(currentContextElement);
+		}
+	});
+	
+	hideItem.addEventListener("mouseleave", () => {
+		removeHighlight();
+	});
+	
+	// Unhide All Elements option
+	const unhideAllItem = document.createElement("button");
+	unhideAllItem.className = "element-hider-menu-item";
+	unhideAllItem.innerHTML = `Unhide All Elements (${hiddenElementsArray.length})`;
+	unhideAllItem.addEventListener("click", () => {
+		unhideAllElements();
 		closeCustomMenu();
 	});
 	
 	menu.appendChild(hideItem);
-    menu.appendChild(showAllItem);
+	menu.appendChild(unhideAllItem);
 	
 	return menu;
 }
@@ -200,7 +438,7 @@ function showCustomMenu(x: number, y: number): void {
 	customMenu.style.left = `${finalX}px`;
 	customMenu.style.top = `${finalY}px`;
 	
-    trace.msg.log(`Custom context menu opened for element: ${currentContextElement?.tagName}${currentContextElement?.className ? '.' + currentContextElement.className.split(' ').join('.') : ''}`);
+	console.log(`[Element Hider] Context menu opened for: ${currentContextElement?.tagName}`);
 }
 
 // Close custom context menu
@@ -270,24 +508,33 @@ function addElementHiderOptions(contextMenu: HTMLElement): void {
 		}
 	});
 	
-    // Create show all button
-    const showAllButton = document.createElement('button');
-    showAllButton.className = 'element-hider-menu-item';
-    showAllButton.style.cssText = hideButton.style.cssText;
-    showAllButton.innerHTML = `Show All Hidden Elements (${hiddenElementsArray.length})`;
-    
-    showAllButton.addEventListener('click', showAllElements);
-    
-    // Add hover effects
-    const buttons = [hideButton, showAllButton];
-    
-    buttons.forEach(button => {
-        button.addEventListener('mouseenter', () => {
-            button.style.background = 'var(--wave-color-background-hover, #3a3a3a)';
+	// Add hover effects for highlighting
+	hideButton.addEventListener('mouseenter', () => {
+		hideButton.style.background = 'var(--wave-color-background-hover, #3a3a3a)';
+		if (currentContextElement) {
+			highlightElement(currentContextElement);
+		}
 	});
-        button.addEventListener('mouseleave', () => {
-            button.style.background = 'transparent';
+	
+	hideButton.addEventListener('mouseleave', () => {
+		hideButton.style.background = 'transparent';
+		removeHighlight();
 	});
+	
+	// Create unhide all button
+	const unhideAllButton = document.createElement('button');
+	unhideAllButton.className = 'element-hider-menu-item';
+	unhideAllButton.style.cssText = hideButton.style.cssText;
+	unhideAllButton.innerHTML = `Unhide All Elements (${hiddenElementsArray.length})`;
+	
+	unhideAllButton.addEventListener('click', unhideAllElements);
+	
+	// Add hover effects for unhide all button
+	unhideAllButton.addEventListener('mouseenter', () => {
+		unhideAllButton.style.background = 'var(--wave-color-background-hover, #3a3a3a)';
+	});
+	unhideAllButton.addEventListener('mouseleave', () => {
+		unhideAllButton.style.background = 'transparent';
 	});
 	
 	// Add a separator if the menu has other items
@@ -303,7 +550,7 @@ function addElementHiderOptions(contextMenu: HTMLElement): void {
 	
 	// Add our buttons
 	contextMenu.appendChild(hideButton);
-    contextMenu.appendChild(showAllButton);
+	contextMenu.appendChild(unhideAllButton);
 }
 
 // Start observing for context menus
@@ -312,9 +559,38 @@ contextMenuObserver.observe(document.body, {
 	subtree: true
 });
 
+// Initialize plugin
+function initializePlugin() {
+	console.log("[Element Hider] Initializing plugin...");
+	
+	// Wait for DOM to be ready
+	setTimeout(() => {
+		console.log("[Element Hider] Starting element processing...");
+		
+		// Process existing elements
+		processAllElements();
+		
+		// Set up reactive observer for new elements
+		setupElementObserver();
+		
+		console.log("[Element Hider] Plugin fully initialized");
+	}, 1000);
+}
+
+// Run initialization when DOM is ready
+if (document.readyState === 'loading') {
+	document.addEventListener('DOMContentLoaded', initializePlugin);
+} else {
+	initializePlugin();
+}
+
 // Add cleanup to unloads
 unloads.add(() => {
-    // Stop observing for context menus
+	// Stop observing
+	if (elementObserver) {
+		elementObserver.disconnect();
+		elementObserver = null;
+	}
 	contextMenuObserver.disconnect();
 	
 	// Close any open custom menu
@@ -323,10 +599,11 @@ unloads.add(() => {
 	// Remove highlights
 	removeHighlight();
 	
-    // Show all hidden elements when plugin is unloaded
-    showAllElements();
+	// Clean up global functions
+	delete (window as any).showAllElementsFromSettings;
+	delete (window as any).debugElementHider;
 	
-    trace.msg.log("Element Hider plugin unloaded");
+	console.log("[Element Hider] Plugin unloaded");
 });
 
-trace.msg.log("Element Hider plugin loaded - Right-click any element to hide it!"); 
+console.log("[Element Hider] Plugin loaded - Right-click any element to hide it!");