Popular is a top 10; a Directory lists every listed feed A to Z

- GET /api/popular returns the ten most subscribed feeds. The new GET
  /api/directory returns every feed that may be listed, sorted by name,
  from the same list: everyone counted, you included, never a URL, never
  a private feed or a feed inside an OPML. POST /api/popular/{id} still
  subscribes to anything on it.
- A Directory button sits beside Popular; both open the same list
  screen. The sidebar toolbar wraps rather than squeezing four buttons.
- Tests: the directory is A to Z, Popular is its top ten, Paid Show is
  in neither, and subscribing works from the directory.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_016HdTEWQNrzyFULijigkmMn

tests/ui/app.spec.js

@@ -579,6 +579,21 @@ test('Popular lists what everyone here reads, but never a private feed', async (
   expect(listed).not.toContain('.xml');
   expect((await piper.request.post('/api/popular/paid-show')).status()).toBe(400);
 
+  // Popular is the top ten of the directory, and the directory is every listed feed, A to Z.
+  const dir = await (await piper.request.get('/api/directory')).json();
+  const top = await (await piper.request.get('/api/popular')).json();
+  const names = dir.map(p => (p.title || p.id).toLowerCase());
+  expect(names).toEqual([...names].sort());
+  expect(top.length).toBe(Math.min(10, dir.length));
+  expect(top.every(t => dir.some(d => d.id === t.id))).toBe(true);
+  expect(dir.map(p => p.id)).not.toContain('paid-show');
+
+  // Subscribe from the directory this time; the popular list shares the same rows.
+  await piper.keyboard.press('Escape');
+  await piper.locator('#directoryFeeds').click();
+  await expect(offered.filter({ hasText: 'Test Show' })).toBeVisible();
+  await expect(offered.filter({ hasText: /Paid Show|paid-show/ })).toHaveCount(0);
+
   const row = async () =>
     (await (await piper.request.get('/api/popular')).json()).find(p => p.id === 'test-show');
   const before = await row();