Remove the nonfunctional audio-settings and profile controls from the listening header, clean up their styling, and add regression coverage.

Hop-State: A_06FNQBGTH3EZP9YTHQFSN70
Hop-Proposal: R_06FNQBG6HFCYVTT9N9GZVV8
Hop-Task: T_06FNQAVP16933S9299CM51G
Hop-Attempt: AT_06FNQAVP171XNBCKRTEEES0

src/App.test.tsx

@@ -91,6 +91,13 @@ describe("App bootstrap", () => {
     expect(await screen.findByText("Let it find you again.")).not.toBeNull();
   });
 
+  it("keeps unfinished audio settings and profile controls out of the listening shell", async () => {
+    await renderDemoApp();
+
+    expect(screen.queryByRole("button", { name: "Audio settings" })).toBeNull();
+    expect(screen.queryByRole("button", { name: "Profile" })).toBeNull();
+  });
+
   it("defaults Albums and Songs to A–Z and remembers reordered views", async () => {
     await renderDemoApp();
 

src/App.tsx

@@ -28,7 +28,6 @@ import {
   Shuffle,
   SkipBack,
   SkipForward,
-  SlidersHorizontal,
   Volume2,
   X,
 } from "lucide-react";
@@ -607,7 +606,6 @@ export default function App() {
         <header className="topbar">
           <IconButton label="Open menu" className="menu-button" onClick={() => setMobileNav(true)}><Menu size={20} /></IconButton>
           <label className="search-field"><Search size={17} /><span className="sr-only">Search your library</span><input value={query} onChange={(event) => setQuery(event.target.value)} placeholder="Search your library" />{query && <button type="button" aria-label="Clear search" onClick={() => setQuery("")}><X size={15} /></button>}</label>
-          <div className="topbar-actions"><IconButton label="Audio settings"><SlidersHorizontal size={18} /></IconButton><button type="button" className="avatar" aria-label="Profile">C</button></div>
         </header>
 
         {view === "settings" ? (

src/styles.css

@@ -70,8 +70,6 @@ main { min-width: 0; height: calc(100vh - var(--player-height)); overflow-y: aut
 .search-field input { width: 100%; padding: 0; border: 0; outline: 0; color: var(--ink); background: transparent; font-size: 0.82rem; }
 .search-field input::placeholder { color: var(--faint); }
 .search-field button { display: grid; padding: 2px; border: 0; background: transparent; color: var(--muted); }
-.topbar-actions { display: flex; align-items: center; gap: 7px; margin-left: auto; }
-.avatar { display: grid; width: 31px; height: 31px; margin-left: 4px; place-items: center; border: 0; border-radius: 50%; color: oklch(0.2 0.012 275); background: oklch(0.78 0.018 275); font-size: 0.73rem; font-weight: 700; }
 .menu-button { display: none !important; }
 
 .icon-button { display: inline-grid; width: 32px; height: 32px; flex: 0 0 auto; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--muted); background: transparent; transition: color 150ms ease, background 150ms ease, transform 150ms ease; }
@@ -317,8 +315,6 @@ input[type="range"]:hover::-webkit-slider-thumb, input[type="range"]:focus-visib
 @media (max-width: 560px) {
   .topbar { gap: 8px; height: 61px; padding: 0 12px; }
   .search-field { width: 100%; }
-  .topbar-actions .icon-button { display: none; }
-  .avatar { width: 29px; height: 29px; }
   .library-view { padding: 14px 14px 50px; }
   .hero { display: block; min-height: 330px; padding: 31px 25px; }
   .hero h1 { max-width: 330px; font-size: 2.55rem; }