bvandeusen/minstrel
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 38 Wiki Activity

feat(web): trim main nav; pair Discover+Requests; move chrome to user menu

Browse Source 
The main nav was carrying surfaces that didn't belong on it:

- Search led to an empty page when clicked (you only ever want to land
  there from the global SearchInput typing into /search?q=...). Drop it.
- Requests is downstream of Discover (you discover, then you request).
  Lift both onto a shared horizontal tab strip; keep their URLs so
  bookmarks survive. New DiscoverTabs component used by both pages.
- Settings + Admin are operator chrome, not primary surfaces. Move them
  into the username dropdown alongside Log out, with Admin gated on
  is_admin. Users see Settings + Log out; admins see Settings + Admin
  + Log out.

Final main nav: Home / Artists / Albums / Liked / Discover / Playlists.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-05-01 22:23:56 -04:00
parent 14c1895beb
commit 22ac86f200
6 changed files with 136 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/Shell.test.ts
+31 -29
View File
@@ -39,54 +39,56 @@ describe('Shell', () => {
expect(screen.getByText('alice')).toBeInTheDocument();
});
test('renders nav items in expected order', () => {
test('main nav renders the six primary surfaces in order', () => {
render(Shell);
const labels = ['Home', 'Artists', 'Albums', 'Liked', 'Search',
'Discover', 'Requests', 'Playlists', 'Settings'];
const labels = ['Home', 'Artists', 'Albums', 'Liked', 'Discover', 'Playlists'];
for (const label of labels) {
expect(screen.getByRole('link', { name: label })).toBeInTheDocument();
}
expect(screen.getByRole('link', { name: 'Home' })).toHaveAttribute('href', '/');
expect(screen.getByRole('link', { name: 'Artists' })).toHaveAttribute('href', '/library/artists');
expect(screen.getByRole('link', { name: 'Albums' })).toHaveAttribute('href', '/library/albums');
expect(screen.getByRole('link', { name: 'Search' })).toHaveAttribute('href', '/search');
expect(screen.getByRole('link', { name: 'Discover' })).toHaveAttribute('href', '/discover');
expect(screen.getByRole('link', { name: 'Requests' })).toHaveAttribute('href', '/requests');
expect(screen.getByRole('link', { name: 'Playlists' })).toHaveAttribute('href', '/playlists');
});
test('Hidden link is not in the main nav', () => {
render(Shell);
expect(screen.queryByRole('link', { name: 'Hidden' })).not.toBeInTheDocument();
});
test('non-admin users do not see the Admin nav link', () => {
userState.current = { id: '1', username: 'alice', is_admin: false };
render(Shell);
expect(screen.queryByRole('link', { name: 'Admin' })).not.toBeInTheDocument();
});
test('admin users see the Admin nav link between Playlists and Settings', () => {
test('main nav omits Search, Requests, Hidden, Settings, and Admin', () => {
userState.current = { id: '1', username: 'alice', is_admin: true };
render(Shell);
const link = screen.getByRole('link', { name: 'Admin' });
expect(link).toHaveAttribute('href', '/admin');
// Order check: Playlists then Admin then Settings.
const labels = screen
// Search reaches /search via the global SearchInput, Requests is a
// tab inside Discover, Hidden lives under Settings, Settings + Admin
// live in the username dropdown — none belong on the main nav.
const navLinks = screen
.getAllByRole('link')
.map((el) => el.textContent?.trim())
.filter(Boolean);
const idxPlaylists = labels.indexOf('Playlists');
const idxAdmin = labels.indexOf('Admin');
const idxSettings = labels.indexOf('Settings');
expect(idxPlaylists).toBeLessThan(idxAdmin);
expect(idxAdmin).toBeLessThan(idxSettings);
.filter((el) => el.closest('nav') !== null)
.map((el) => el.textContent?.trim());
for (const label of ['Search', 'Requests', 'Hidden', 'Settings', 'Admin']) {
expect(navLinks).not.toContain(label);
}
});
test('user-menu shows Settings + Log out for non-admin users', async () => {
userState.current = { id: '1', username: 'alice', is_admin: false };
render(Shell);
await fireEvent.click(screen.getByRole('button', { name: /alice/i }));
expect(screen.getByRole('menuitem', { name: 'Settings' })).toHaveAttribute('href', '/settings');
expect(screen.getByRole('menuitem', { name: /log out/i })).toBeInTheDocument();
expect(screen.queryByRole('menuitem', { name: 'Admin' })).not.toBeInTheDocument();
});
test('user-menu adds Admin between Settings and Log out for admin users', async () => {
userState.current = { id: '1', username: 'alice', is_admin: true };
render(Shell);
await fireEvent.click(screen.getByRole('button', { name: /alice/i }));
const items = screen.getAllByRole('menuitem').map((el) => el.textContent?.trim());
expect(items).toEqual(['Settings', 'Admin', 'Log out']);
expect(screen.getByRole('menuitem', { name: 'Admin' })).toHaveAttribute('href', '/admin');
});
test('user-menu "Log out" calls logout() and navigates to /login', async () => {
render(Shell);
await fireEvent.click(screen.getByRole('button', { name: /alice/i }));
await fireEvent.click(screen.getByRole('button', { name: /log out/i }));
await fireEvent.click(screen.getByRole('menuitem', { name: /log out/i }));
expect(logout).toHaveBeenCalledTimes(1);
expect(goto).toHaveBeenCalledWith('/login', { replaceState: true });
});