vhg6j0bp2: Add frosted top bar and progress rail to the mobile feed

tests/mobile-feed.test.ts

@@ -3,7 +3,7 @@ import { createElement } from "react";
 import { renderToStaticMarkup } from "react-dom/server";
 import { readFileSync } from "node:fs";
 import { FeedView, type FeedViewProps } from "@/components/FeedView";
-import { pickCurrent, isDoubleTap, isTapTarget, featuredSlideIndex } from "@/components/MobileFeed";
+import { pickCurrent, isDoubleTap, isTapTarget, featuredSlideIndex, railPercent } from "@/components/MobileFeed";
 import { FIXTURE_DISCOVER } from "@/dev/fixtures";
 import { CompactLayoutContext, isCompactWidth } from "@/components/layout-context";
 import { toCardPosts } from "@/lib/feed-model";
@@ -171,3 +171,27 @@ describe("featured experts slide", () => {
     expect(render({})).not.toContain("feed-slide-featured");
   });
 });
+
+describe("top bar and progress rail", () => {
+  it("renders the brand pill, the theme toggle and the rail", () => {
+    const html = render({});
+    expect(html).toContain('data-testid="top-bar"');
+    expect(html).toContain("MINNECT");
+    expect(html).toMatch(/data-testid="top-theme"[^>]*aria-label="Switch to (light|dark) theme"/);
+    expect(html).toContain('data-testid="feed-rail"');
+    expect(html).toContain('data-on-media="false"');
+  });
+
+  it("sizes the rail by the slide on screen out of the loaded slides", () => {
+    expect(railPercent(0, 4)).toBe(25);
+    expect(railPercent(2, 4)).toBe(75);
+    expect(railPercent(9, 4)).toBe(100);
+    expect(railPercent(0, 0)).toBe(0);
+  });
+
+  it("keeps the own-post menu below the bar and the safe area", () => {
+    const css = readFileSync("src/styles/mobile.css", "utf8");
+    expect(css).toMatch(/\.slide-menu \{[^}]*top: calc\(70px \+ env\(safe-area-inset-top/);
+    expect(css).toMatch(/\.ph-top \{[^}]*safe-area-inset-top/);
+  });
+});