Skip to content

Add sidebar hide toggles for Spaces and Trends #1

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jnptzl wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Add sidebar hide toggles for Spaces and Trends #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
63 changes: 63 additions & 0 deletions content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@
fadeEnabled: true,
reportEnabled: true,
blockEnabled: true,
hideSpaces: false,
hideTrends: false,
dislikeStyle: 'blur' // blur, dim, grayscale
};

Expand Down Expand Up @@ -45,6 +47,7 @@
chrome.runtime.onMessage.addListener((msg) => {
if (msg.type === 'configUpdated') {
config = { ...config, ...msg.config };
applySidebarFilters();
}
if (msg.type === 'dislikedUsersUpdated') {
dislikedUsers = new Set(msg.users);
Expand Down Expand Up @@ -432,6 +435,60 @@
});
}

// ============================================
// SIDEBAR FILTERING
// ============================================

const HIDE_CLASS = 'be-hidden';

function getSidebar() {
return document.querySelector('[data-testid="sidebarColumn"]') ||
document.querySelector('aside[aria-label][role="complementary"]') ||
document.querySelector('aside[aria-label]');
}

function collectSidebarTargets(sidebar) {
const filters = [];
if (config.hideSpaces) filters.push('spaces');
if (config.hideTrends) filters.push('trends for you');

if (filters.length === 0) return new Set();

const targets = new Set();
const elements = sidebar.querySelectorAll('[aria-label], [role="heading"], h2, h3, span');

elements.forEach(element => {
const label = element.getAttribute('aria-label') || '';
const text = `${label} ${element.textContent || ''}`.toLowerCase();

if (filters.some(filter => text.includes(filter))) {
const container = element.closest('section') ||
Comment on lines +461 to +465
Copy link
Copy Markdown

@chatgpt-codex-connector chatgpt-codex-connector bot Jan 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Restrict sidebar matches to module headers

The filter logic matches any sidebar text that contains the filter string (e.g., the literal "spaces" from the same function), so enabling “Hide Spaces” will also match unrelated sidebar content that happens to include that word, such as a trending topic like “SpaceX” or “Spaces”, and then hide that item’s closest container. This can unintentionally hide the Trends module or other cards even when hideTrends is off. Consider matching only the module header (specific heading/aria-label) or a stable testid for the Spaces module to avoid false positives.

Useful? React with 👍 / 👎.

element.closest('div[role="region"]') ||
element.closest('div');
if (container && sidebar.contains(container)) {
targets.add(container);
}
}
});

return targets;
}

function applySidebarFilters() {
const sidebar = getSidebar();
if (!sidebar) return;

const targets = collectSidebarTargets(sidebar);

sidebar.querySelectorAll(`.${HIDE_CLASS}`).forEach(element => {
if (!targets.has(element)) {
element.classList.remove(HIDE_CLASS);
}
});

targets.forEach(element => element.classList.add(HIDE_CLASS));
}

// ============================================
// REPORT FUNCTIONALITY
// ============================================
Expand Down Expand Up @@ -813,17 +870,23 @@
text-transform: uppercase;
opacity: 0.7;
}

.be-hidden {
display: none !important;
}
`;
document.head.appendChild(style);

processTweets();
processVideos();
processAds();
applySidebarFilters();

const observer = new MutationObserver(() => {
processTweets();
processVideos();
processAds();
applySidebarFilters();
});
observer.observe(document.body, { childList: true, subtree: true });
}
Expand Down
16 changes: 16 additions & 0 deletions popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -451,6 +451,22 @@ <h1>Bot Exploder</h1>
</div>
<div class="toggle active" id="toggle-block" data-setting="blockEnabled"></div>
</div>

<div class="toggle-row">
<div class="toggle-info">
<span class="toggle-label">Hide Spaces</span>
<span class="toggle-sublabel">Remove Spaces module</span>
</div>
<div class="toggle" id="toggle-spaces" data-setting="hideSpaces"></div>
</div>

<div class="toggle-row">
<div class="toggle-info">
<span class="toggle-label">Hide Trends</span>
<span class="toggle-sublabel">Remove Trends for you</span>
</div>
<div class="toggle" id="toggle-trends" data-setting="hideTrends"></div>
</div>
</div>

<div class="section">
Expand Down
6 changes: 5 additions & 1 deletion popup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,9 @@ const DEFAULT_CONFIG = {
nudge: 2,
fadeEnabled: true,
reportEnabled: true,
blockEnabled: true
blockEnabled: true,
hideSpaces: false,
hideTrends: false
};

let config = { ...DEFAULT_CONFIG };
Expand Down Expand Up @@ -218,6 +220,8 @@ function updateUI() {
document.getElementById('toggle-fade').classList.toggle('active', config.fadeEnabled);
document.getElementById('toggle-report').classList.toggle('active', config.reportEnabled);
document.getElementById('toggle-block').classList.toggle('active', config.blockEnabled);
document.getElementById('toggle-spaces').classList.toggle('active', config.hideSpaces);
document.getElementById('toggle-trends').classList.toggle('active', config.hideTrends);
}

function setupListeners() {
Expand Down