hop2 0.11.59 → 0.11.60

package/hay/apps/web/src/components/ViewsPanel.tsx

@@ -7,11 +7,11 @@ import { relativeTime } from "../utils/switcherModel";
 // this client was to catch the printed URL before it scrolled out of the
 // viewport.
 //
-// ONE SHAPE: a reader. Opening Views lands you IN the newest result (the
-// scoped session's, or the fleet's), with ‹ › to step through the rest and
-// an index you can pull open beside or over the page. There is no separate
-// "list mode" to click through first — the list was a detour on the way to
-// the thing you came to read.
+// ONE SHAPE: a reader with its index beside it. Opening Views lands you IN
+// the newest result (the scoped session's, or the fleet's), the list of
+// everything published on the left, ‹ › to step through it. Both in one
+// window, like a mail client — there is no separate "list mode" to click
+// through first.
 //
 // Two placements of that one shape:
 //
@@ -168,11 +168,11 @@ const previewSrc = (item: ViewItem) =>
     : hrefFor(item);
 
 const RAIL_KEY = "hop_views_rail";
-// Wide enough to read a report AND keep the index beside it; still leaves a
-// usable terminal on a 1440 display. The drag handle remembers a choice.
-const DEFAULT_DOCK_W = 620;
+// Wide enough for the index beside a readable page; on a 1440 display that
+// still leaves 680px of terminal. The drag handle remembers a choice.
+const DEFAULT_DOCK_W = 760;
 const clampDockW = (w: number) =>
-  Math.max(380, Math.min(Math.round(window.innerWidth * 0.7), w));
+  Math.max(560, Math.min(Math.round(window.innerWidth * 0.75), w));
 
 export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Props) => {
   const [items, setItems] = useState<ViewItem[] | null>(null);
@@ -199,15 +199,13 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     return clampDockW(Number.isFinite(stored) && stored > 0 ? stored : DEFAULT_DOCK_W);
   });
   const panelRef = useRef<HTMLDivElement | null>(null);
-  // The index (the list of everything published) is a companion to the
-  // reader, not a mode of its own: a sheet over the page in a narrow dock, a
-  // rail beside it where there is room — either way only when you ask.
-  // Hidden until asked for, everywhere: the page is what you opened Views
-  // to see. Beside the page it stays as you left it (remembered).
+  // The index (the list of everything published) sits BESIDE the page, in
+  // the same window, like a mail client: the list on the left, the result on
+  // the right, both visible at once. ☰ hides it for a wider page, and that
+  // choice is remembered.
   const [railOpen, setRailOpen] = useState<boolean>(() => {
-    try { return localStorage.getItem(RAIL_KEY) === "1"; } catch { return false; }
+    try { return localStorage.getItem(RAIL_KEY) !== "0"; } catch { return true; }
   });
-  const [indexOpen, setIndexOpen] = useState(false);
   const now = Date.now();
 
   // The scope arrives as whatever identifier the opener HAD — the URL's
@@ -312,10 +310,8 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
       if (event.key === "Escape") {
         event.preventDefault();
         event.stopPropagation();
-        // The index OVER the page is the one layer to back out of; the
-        // reader itself is the panel, so the next Escape closes it.
-        if (railOverlay && indexOpen) setIndexOpen(false);
-        else onClose();
+        // The reader IS the panel: Escape closes it.
+        onClose();
         return;
       }
       const dir = event.key === "ArrowDown" || event.key === "ArrowRight" ? 1
@@ -329,7 +325,7 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     window.addEventListener("keydown", onKey, true);
     return () => window.removeEventListener("keydown", onKey, true);
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [onClose, preview, flatRows, docked, indexOpen, dockW]);
+  }, [onClose, preview, flatRows, docked]);
 
   // Opening the panel IS the act of seeing what it shows.
   useEffect(() => {
@@ -366,7 +362,6 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     if (!canPreview()) return;   // narrow: the anchor's new tab is right
     event.preventDefault();
     setPreview(item);
-    setIndexOpen(false);
   };
 
   const copyLink = (item: ViewItem) => {
@@ -434,13 +429,8 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     el.addEventListener("pointerup", onUp);
   };
 
-  // Where the index lives: beside the page when the panel is wide enough for
-  // both, over it otherwise (a 620px dock with a 240px rail leaves 380px of
-  // page — enough for a plot, not for a report).
-  const railOverlay = docked ? dockW < 900 : false;
-  const railVisible = (railOverlay ? indexOpen : railOpen) && flatRows.length > 0;
+  const railVisible = railOpen && flatRows.length > 0;
   const toggleRail = () => {
-    if (railOverlay) { setIndexOpen((v) => !v); return; }
     setRailOpen((v) => {
       try { localStorage.setItem(RAIL_KEY, v ? "0" : "1"); } catch { /* private mode */ }
       return !v;
@@ -586,7 +576,7 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
     <div className="views-nav">
       <button type="button" className={"views-act views-rail-toggle" + (railVisible ? " on" : "")}
               aria-label={railVisible ? "Hide the index" : "Show the index"} aria-pressed={railVisible}
-              title={railVisible ? "Hide the index" : "Everything published"}
+              title={railVisible ? "Hide the index (a wider page)" : "Show the index beside the page"}
               onClick={toggleRail}>☰</button>
       <button type="button" className="views-act" aria-label="Previous view" title="Previous (←)"
               disabled={at <= 0} onClick={() => step(-1)}>‹</button>
@@ -638,7 +628,7 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
       {!docked && <div className="views-backdrop" onClick={onClose} />}
       <div className={"views-panel" + (docked ? " docked" : "")
              + (flatRows.length > 0 ? " reading" : "")
-             + (railVisible ? (railOverlay ? " rail-over" : " rail-side") : "")}
+             + (railVisible ? " rail-side" : "")}
            style={docked ? { width: dockW } : undefined}
            role="dialog" aria-label="Published views"
            ref={panelRef} tabIndex={-1}>
@@ -673,15 +663,10 @@ export const ViewsPanel = ({ session, sessions = [], dock = false, onClose }: Pr
         </div>
         {nav}
         <div className="views-body">
-          {railVisible && !railOverlay && list}
+          {railVisible && list}
           <div className="views-preview">
             {empty || (canPreview() ? page : list)}
           </div>
-          {railVisible && railOverlay && (
-            <div className="views-index" role="region" aria-label="Everything published">
-              {list}
-            </div>
-          )}
         </div>
       </div>
     </>

package/hay/apps/web/src/styles.css

@@ -4511,17 +4511,12 @@ body.pane-dragging { user-select: none; }
   padding-right: 10px;
   margin-right: 12px;
 }
-.views-panel.docked.rail-side .views-list { flex-basis: 240px; }
-/* The index OVER the page (a narrow dock): a sheet under the nav bar. */
-.views-index {
-  position: absolute; inset: 0; z-index: 2;
-  display: flex; flex-direction: column;
-  background: var(--panel);
-  border: 1px solid var(--line); border-radius: 10px;
-  padding: 8px 10px;
-  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
-}
-.views-index .views-list { flex: 1; }
+.views-panel.docked.rail-side .views-list { flex-basis: 232px; }
+/* In the rail the title owns the row: the per-row actions would crowd it
+   to three letters, and the reader's bar carries the same actions for the
+   page that is open. (Still in the DOM — a screen reader finds them.) */
+.views-panel.rail-side .views-row .views-acts { display: none; }
+.views-panel.rail-side .views-row.selected { background: color-mix(in srgb, var(--accent, #7c5cff) 16%, transparent); }
 .views-preview { flex: 1; min-width: 0; display: flex; flex-direction: column; }
 /* The reader's bar: index toggle · ‹ n/N › · title · actions. */
 .views-nav {

package/hay/apps/web/test/ViewsPanel.test.tsx

@@ -16,10 +16,7 @@ let store: Record<string, string> = {};
 beforeEach(() => {
   // jsdom's own localStorage is only partially implemented here, and the
   // seen-markers are the whole point of these cases.
-  // The index rail is hidden until asked and the choice is remembered; most
-  // cases below read rows from it, so they start with it open, the way a
-  // reader who opened it once would. The reader-first case clears this.
-  store = { hop_views_rail: "1" };
+  store = {};
   vi.stubGlobal("localStorage", {
     getItem: (key: string) => (key in store ? store[key] : null),
     setItem: (key: string, value: string) => { store[key] = value; },
@@ -60,7 +57,6 @@ describe("ViewsPanel", () => {
 
   it("opens STRAIGHT INTO the newest result; a row click switches the page; the row stays a real link", async () => {
     const onClose = vi.fn();
-    delete store.hop_views_rail; // a first-time reader: nothing remembered
     render(<ViewsPanel onClose={onClose} />);
     await waitFor(() => expect(document.querySelector("iframe.views-frame")).toBeTruthy());
     // jsdom's window is 1024 wide — the desk case, where the page exists.
@@ -74,10 +70,9 @@ describe("ViewsPanel", () => {
     // browser's PDF viewer, which is half of what the pane is for.
     expect(frame.hasAttribute("sandbox")).toBe(false);
     expect(screen.getByText("1 / 3")).toBeTruthy();
-    // The index is not shown until asked — the page is the point. ☰ opens
-    // it beside the page; a plain click on a row turns the page.
-    expect(document.querySelector(".views-list")).toBeNull();
-    fireEvent.click(screen.getByRole("button", { name: "Show the index" }));
+    // The index is beside the page from the start — both in one window; a
+    // plain click on a row turns the page.
+    expect(document.querySelector(".views-panel.rail-side .views-list")).toBeTruthy();
     const row = screen.getByText("views-test.html").closest("a") as HTMLAnchorElement;
     expect(row.getAttribute("target")).toBe("_blank");
     fireEvent.click(row);
@@ -95,7 +90,7 @@ describe("ViewsPanel", () => {
     expect(onClose).toHaveBeenCalled();
   });
 
-  it("docked: the page is open at once, the index rides OVER it on demand, and keys are focus-scoped", async () => {
+  it("docked: the page is open at once with the index beside it, and keys are focus-scoped", async () => {
     // The dock only exists on wide windows; jsdom defaults to 1024.
     vi.stubGlobal("innerWidth", 1280);
     const onClose = vi.fn();
@@ -118,14 +113,14 @@ describe("ViewsPanel", () => {
     fireEvent.keyDown(window, { key: "Escape" });
     expect(onClose).not.toHaveBeenCalled();
 
-    // A 620px dock has no room for the index beside the page: ☰ lays it
-    // OVER the page, and Esc from the panel backs that one layer out.
-    fireEvent.click(screen.getByRole("button", { name: "Show the index" }));
-    expect(document.querySelector(".views-index .views-list")).toBeTruthy();
-    expect(document.querySelector("iframe.views-frame")).toBeTruthy(); // the page stays under it
-    fireEvent.keyDown(panel, { key: "Escape" });
-    expect(document.querySelector(".views-index")).toBeNull();
-    // The next Esc from the panel closes it.
+    // The index sits beside the page in the dock too; ☰ hides it for a
+    // wider page and the choice is remembered.
+    expect(document.querySelector(".views-panel.rail-side .views-list")).toBeTruthy();
+    fireEvent.click(screen.getByRole("button", { name: "Hide the index" }));
+    expect(document.querySelector(".views-list")).toBeNull();
+    expect(store.hop_views_rail).toBe("0");
+    expect(document.querySelector("iframe.views-frame")).toBeTruthy();
+    // Esc from the panel closes it.
     fireEvent.keyDown(panel, { key: "Escape" });
     expect(onClose).toHaveBeenCalled();
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "hop2",
-  "version": "0.11.59",
+  "version": "0.11.60",
   "description": "🐰 Hop into your terminal from anywhere. Secure remote shell access with 2FA via Cloudflare Tunnel. Next-gen rewrite with native terminal sharing.",
   "main": "hop",
   "bin": {