feat(snippet):Black Section Remover

[Jayant-1]

Summary by CodeRabbit

• New Features
  • Added a new "Black Section Remover" snippet that provides CSS styling to eliminate black sections from top navigation and user widget areas.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[coderabbitai]

Walkthrough

A new snippet entry titled "Black Section Remover" was added to resources/snippets.json. The addition includes a description, CSS code for removing black sections from top navigation and user widget areas, and a preview image path reference.

Changes

Cohort / File(s)	Summary
Snippet Addition resources/snippets.json	Added "Black Section Remover" snippet object with description, CSS code, and preview image path to the exported array

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• feat(snippets): add Dynamic Search Bar #1034 — Also modifies resources/snippets.json by appending a new snippet object ("Dynamic Search Bar"), following the same structural pattern.

Suggested reviewers

• kyrie25
• Delusoire
• rxri

Poem

🐰 A snippet so black, now shall disappear,
CSS magic makes sections clear!
New array member hops into place,
Snippets grow: a design-space race! ✨

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes the main change: adding a new snippet called 'Black Section Remover' to the resources/snippets.json file. It is concise, specific, and directly related to the primary purpose of the pull request.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Post copyable unit tests in a comment

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

📜 Review details

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 3e330df and 67189f2.

⛔ Files ignored due to path filters (1)

• resources/assets/snippets/blackremover.png is excluded by !**/*.png

📒 Files selected for processing (1)

• resources/snippets.json

🧰 Additional context used

🧠 Learnings (2)

📓 Common learnings

Learnt from: rxri
Repo: spicetify/marketplace PR: 1064
File: resources/snippets.json:539-539
Timestamp: 2025-12-06T15:28:17.086Z
Learning: In resources/snippets.json, CSS code must be minified and placed in the "code" variable as a single-line string. This is a project requirement, not a code quality issue.

📚 Learning: 2025-12-06T15:28:17.086Z

Learnt from: rxri
Repo: spicetify/marketplace PR: 1064
File: resources/snippets.json:539-539
Timestamp: 2025-12-06T15:28:17.086Z
Learning: In resources/snippets.json, CSS code must be minified and placed in the "code" variable as a single-line string. This is a project requirement, not a code quality issue.

Applied to files:

• resources/snippets.json

[coderabbitai]

⚠️ Potential issue | 🟠 Major

🧩 Analysis chain

🏁 Script executed:

git ls-files | head -20

Repository: spicetify/marketplace

Length of output: 593

---

🏁 Script executed:

find . -name "snippets.json" -type f 2>/dev/null

Repository: spicetify/marketplace

Length of output: 90

---

🏁 Script executed:

wc -l resources/snippets.json 2>/dev/null || echo "File not found"

Repository: spicetify/marketplace

Length of output: 92

---

🏁 Script executed:

sed -n '535,547p' resources/snippets.json

Repository: spicetify/marketplace

Length of output: 3624

---

🏁 Script executed:

# Also verify JSON syntax is valid
python3 <<'EOF'
import json
try:
    with open('resources/snippets.json', 'r') as f:
        data = json.load(f)
    print("✓ JSON syntax is valid")
    # Get the last entry
    last_entry = data[-1]
    print(f"Last entry title: {last_entry.get('title', 'N/A')}")
    print(f"Has description: {'description' in last_entry}")
    print(f"Has code: {'code' in last_entry}")
    print(f"Has preview: {'preview' in last_entry}")
except json.JSONDecodeError as e:
    print(f"✗ JSON syntax error: {e}")
except Exception as e:
    print(f"✗ Error: {e}")
EOF

Repository: spicetify/marketplace

Length of output: 151

---

🏁 Script executed:

# Extract and analyze the CSS code from the snippet
python3 <<'EOF'
import json
with open('resources/snippets.json', 'r') as f:
    data = json.load(f)

# Find the "Black Section Remover" snippet
for entry in data:
    if entry.get('title') == 'Black Section Remover':
        css = entry.get('code', '')
        print("CSS Code:")
        print(css)
        print("\n" + "="*80)
        print("Analysis of CSS selectors:")
        
        # Split by { to find each rule
        rules = css.split('{')
        for i, rule in enumerate(rules[:-1]):  # Skip last split which is after }
            selector_part = rule.strip().split(',')
            if i == 0:
                print(f"\nRule {i+1} selectors:")
                for sel in selector_part:
                    print(f"  - {sel.strip()}")
EOF

Repository: spicetify/marketplace

Length of output: 151

---

🏁 Script executed:

# Let's check the context around this snippet to understand the project better
cat -n README.md | head -50

Repository: spicetify/marketplace

Length of output: 1999

---

🏁 Script executed:

# Check if there are other similar CSS snippets to understand the pattern
rg "Root__globalNav|main-topBar" --type json -C 1 | head -40

Repository: spicetify/marketplace

Length of output: 7536

---

🏁 Script executed:

# Let's check the asset file exists to validate preview path
test -f resources/assets/snippets/blackremover.png && echo "✓ Preview image exists" || echo "✗ Preview image missing"

Repository: spicetify/marketplace

Length of output: 87

---

🏁 Script executed:

# Verify the syntax more carefully - compare selector patterns
python3 <<'EOF'
css_in_file = ".Root__globalNav button, .Root__globalNav.main-globalNav-link-icon, .main-topBar-historyButtons.main-topBar-button { background-color: transparent !important; }"

print("Analyzing selector patterns:")
print("\nSelectors in Black Section Remover:")
selectors = [s.strip() for s in css_in_file.split('{')[0].split(',')]
for sel in selectors:
    print(f"  {sel}")

print("\n" + "="*70)
print("Pattern Analysis:")
print("  ✓ '.Root__globalNav button' - valid descendant selector")
print("  ? '.Root__globalNav.main-globalNav-link-icon' - combines classes without space")
print("  ? '.main-topBar-historyButtons.main-topBar-button' - combines classes without space")
print("\nCompare with pattern from 'Always Show Forward' snippet:")
print("  ✓ '.main-topBar-historyButtons .main-topBar-forward' - has space (descendant)")
print("\nConclusion: The missing spaces appear to be typos based on naming convention")
EOF

Repository: spicetify/marketplace

Length of output: 780

---

Fix missing spaces in CSS selectors.

The snippet has CSS syntax errors that will prevent it from working correctly:

1. Missing spaces in selectors: .Root__globalNav.main-globalNav-link-icon and .main-topBar-historyButtons.main-topBar-button should use descendant selectors with a space, not combined class selectors:

   • Change .Root__globalNav.main-globalNav-link-icon to .Root__globalNav .main-globalNav-link-icon
   • Change .main-topBar-historyButtons.main-topBar-button to .main-topBar-historyButtons .main-topBar-button

   Without the space, these selectors target elements with both classes simultaneously, which is unlikely to exist.

2. Obfuscated class names: The CSS relies on Spotify's internal obfuscated classes (.Fxnb0xe6bL7I7W8V0p6C, .SFgYidQmrqrFEVh65Zrg, .sl_aPp6GDg05ItSfmsS7), which will break with future Spotify updates.

3. Consider height: 0 approach: In the media query, using display: none instead of height: 0 would better hide the element and avoid leaving empty space.

🤖 Prompt for AI Agents

In resources/snippets.json around lines 541 to 546, the CSS snippet contains
selector mistakes and fragile class usage: change the combined-class selectors
to descendant selectors by inserting a space (i.e., replace
`.Root__globalNav.main-globalNav-link-icon` with `.Root__globalNav
.main-globalNav-link-icon` and `.main-topBar-historyButtons.main-topBar-button`
with `.main-topBar-historyButtons .main-topBar-button`), replace the media query
rule using `height: 0` with `display: none` to fully hide the element and avoid
empty space, and add a short comment or note in the snippet metadata warning
that obfuscated Spotify class names (`.Fxnb0xe6bL7I7W8V0p6C`,
`.SFgYidQmrqrFEVh65Zrg`, `.sl_aPp6GDg05ItSfmsS7`) are brittle and may break on
updates so prefer stable selectors when possible.