Make family preview cards navigate to family pages

app.py

@@ -261,6 +261,16 @@ gradio-app,
   height: 154px;
 }
 
+.open-label {
+  display: inline-block;
+  margin-top: 10px;
+  color: var(--ink);
+  font-size: 13px;
+  font-weight: 700;
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
 .record-book {
   padding: 10px 0 0;
 }
@@ -555,14 +565,6 @@ gradio-app,
   background: var(--green-strong) !important;
 }
 
-.family-button-shell button {
-  min-height: 46px !important;
-  justify-content: flex-start !important;
-  text-align: left !important;
-  white-space: normal !important;
-  margin-bottom: 12px !important;
-}
-
 .preview-card {
   max-width: 420px;
   background: var(--paper);
@@ -1136,30 +1138,21 @@ def family_preview(setup: str, coordinates: dict[str, dict[str, Any]]) -> str:
 def family_card(summary: dict[str, Any], coordinates: dict[str, dict[str, Any]]) -> str:
     setup = str(summary["setup"])
     return f"""
-    <div class="family-card">
+    <a class="family-card front-family-card" href="?family={esc(setup)}" aria-label="Open {esc(summary["title"])} records">
       {family_preview(setup, coordinates)}
       <div class="family-card-top">
         <div>
           <div class="family-code">{esc(setup)}</div>
           <h3>{esc(summary["title"])}</h3>
+          <span class="open-label">Open records</span>
         </div>
       </div>
-    </div>
+    </a>
     """
 
 
 def front_family_card_html(setup: str, coordinates: dict[str, dict[str, Any]]) -> str:
-    return f"""
-    <div class="family-card front-family-card">
-      {family_preview(setup, coordinates)}
-      <div class="family-card-top">
-        <div>
-          <div class="family-code">{esc(setup)}</div>
-          <h3>{esc(setup_title(setup))}</h3>
-        </div>
-      </div>
-    </div>
-    """
+    return family_card({"setup": setup, "title": setup_title(setup)}, coordinates)
 
 
 def family_page_html(setup: str | None = None) -> str:
@@ -1180,6 +1173,7 @@ def family_page_html(setup: str | None = None) -> str:
           <div class="family-code">{esc(setup)}</div>
           <h2>{esc(summary["title"])}</h2>
           <p class="family-subtitle">{family_description(summary)}</p>
+          <a class="back-link" href="./">Back to all families</a>
         </div>
       </div>
       <div class="record-grid">{cards}</div>
@@ -1193,7 +1187,7 @@ def top_nav() -> str:
     return """
       <nav class="top-nav">
         <div class="contain top-nav-inner">
-          <a href="#top" aria-label="Packing Benchmark home">Packing Benchmark</a>
+          <a href="./" aria-label="Packing Benchmark home">Packing Benchmark</a>
           <div class="nav-links">
             <a href="https://erich-friedman.github.io/packing/" target="_blank" rel="noopener noreferrer">Friedman</a>
           </div>
@@ -1204,6 +1198,9 @@ def top_nav() -> str:
 
 def directory_html() -> str:
     choices = setup_choices()
+    summaries = [setup_summary(setup) for setup in choices]
+    coordinates = coordinate_records_by_case()
+    family_cards = "".join(family_card(summary, coordinates) for summary in summaries)
     return f"""
     <main class="packing-shell" id="top">
       <section class="hero-stage">
@@ -1227,10 +1224,11 @@ def directory_html() -> str:
             <div>
               <h2>Choose a family</h2>
               <p class="section-note">
-                Use the selector below. Records load only after a family is selected, so the front page stays short.
+                Click a preview to open that family as its own page.
               </p>
             </div>
           </div>
+          <div class="family-grid">{family_cards}</div>
         </div>
       </section>
     </main>
@@ -1241,6 +1239,17 @@ def browse_html() -> str:
     return directory_html()
 
 
+def browse_page_for_request(request: gr.Request):
+    try:
+        query = dict(request.query_params) if request else {}
+    except Exception:
+        query = {}
+    setup = str(query.get("family") or "").strip()
+    if setup in setup_choices():
+        return family_page_html(setup)
+    return directory_html()
+
+
 def empty_family_html() -> str:
     return """
     <main class="packing-shell">
@@ -1423,25 +1432,6 @@ with gr.Blocks(title="Packing Benchmark") as demo:
     with gr.Tabs():
         with gr.Tab("Families"):
             browse_page = gr.HTML(directory_html())
-            home_family_select = gr.Dropdown(
-                choices=[FAMILY_PROMPT, *setup_choices()],
-                value=FAMILY_PROMPT,
-                label="Family",
-                elem_id="home-family-selector",
-            )
-            gr.Markdown("### All families")
-            family_buttons: list[tuple[str, gr.Button]] = []
-            family_choices = setup_choices()
-            family_coordinates = coordinate_records_by_case()
-            with gr.Group(elem_classes=["family-button-shell"]):
-                for row_start in range(0, len(family_choices), 3):
-                    with gr.Row():
-                        for setup in family_choices[row_start : row_start + 3]:
-                            with gr.Column(scale=1):
-                                gr.HTML(front_family_card_html(setup, family_coordinates))
-                                button = gr.Button("Open records", size="sm")
-                                family_buttons.append((setup, button))
-            home_family_page = gr.HTML(empty_family_html())
 
         with gr.Tab("Family Records"):
             choices = setup_choices()
@@ -1475,18 +1465,7 @@ with gr.Blocks(title="Packing Benchmark") as demo:
                         preview = gr.HTML(label="Browser render")
                 normalized_json = gr.Code(label="Normalized JSON", language="json", lines=10)
 
-    home_family_select.change(
-        update_family_page,
-        inputs=[home_family_select],
-        outputs=[home_family_page],
-        scroll_to_output=True,
-    )
-    for setup, button in family_buttons:
-        button.click(
-            lambda setup=setup: choose_family(setup),
-            outputs=[home_family_page, home_family_select],
-            scroll_to_output=True,
-        )
+    demo.load(browse_page_for_request, outputs=[browse_page], show_progress="hidden")
     family_select.change(update_family_page, inputs=[family_select], outputs=[family_page])
     verify_btn.click(verify_only, inputs=[json_code, json_file, tolerance], outputs=[report, preview, normalized_json])
     submit_btn.click(