Keep selected Aliki search result visible

.github/workflows/pr-preview-check.yml

@@ -1,53 +1,45 @@
-name: PR Preview Check
+name: Build PR Preview
 
 on:
   pull_request:
+    types: [opened, synchronize, reopened]
+
+permissions:
+  contents: read
+
+concurrency:
+  group: pr-preview-build-${{ github.event.pull_request.number }}
+  cancel-in-progress: true
 
 jobs:
-  # Deploy main repo PRs directly
-  deploy-for-main:
-    name: Trigger Preview Build and Deploy (Main Repo)
+  build:
+    name: Build Preview
+    if: github.repository == 'ruby/rdoc'
     runs-on: ubuntu-latest
-    if: github.event.pull_request.head.repo.fork == false
-    permissions:
-      contents: write
+    timeout-minutes: 20
     steps:
-      - name: Trigger preview deployment
-        uses: actions/github-script@v9
+      # This job executes untrusted pull request code. It must not receive secrets
+      # or a token with write access.
+      - name: Checkout PR code
+        uses: actions/checkout@3d3c42e5aac5ba805825da76410c181273ba90b1 # v7.0.1
         with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
-          script: |
-            await github.rest.repos.createDispatchEvent({
-              owner: context.repo.owner,
-              repo: context.repo.repo,
-              event_type: 'pr-preview-deploy',
-              client_payload: {
-                pr_number: '${{ github.event.pull_request.number }}',
-                pr_head_sha: '${{ github.event.pull_request.head.sha }}',
-                pr_checkout_repository: '${{ github.repository }}',
-                is_fork: 'false'
-              }
-            });
-            console.log('Triggered main repo preview deployment');
+          repository: ${{ github.event.pull_request.head.repo.full_name }}
+          ref: ${{ github.event.pull_request.head.sha }}
+          persist-credentials: false
 
-  # Approval gate for fork PRs
-  approve-for-fork:
-    name: Approve Fork PR
-    runs-on: ubuntu-latest
-    if: github.event.pull_request.head.repo.fork == true
-    environment: fork-preview-protection
-    steps:
-      - name: Save PR information
-        run: |
-          echo "Fork PR #${{ github.event.pull_request.number }} approved for preview deployment"
-          mkdir -p ./pr
-          echo "${{ github.event.pull_request.number }}" > ./pr/pr_number
-          echo "${{ github.event.pull_request.head.sha }}" > ./pr/pr_head_sha
-          echo "${{ github.event.pull_request.head.repo.full_name }}" > ./pr/pr_checkout_repository
-
-      - name: Upload PR information
-        uses: actions/upload-artifact@v7
+      - name: Setup Ruby
+        uses: ruby/setup-ruby@95ef2b042f9d7a56d8268cba8559e2842e2ad01b # v1.321.0
+        with:
+          ruby-version: '3.4'
+          bundler-cache: true
+
+      - name: Build site
+        run: bundle exec rake rdoc
+
+      - name: Upload preview site
+        uses: actions/upload-artifact@043fb46d1a93c77aae656e7c1c64a875d1fc6a0a # v7.0.1
         with:
-          name: pr
-          path: pr/
+          name: pr-preview-site
+          path: _site/
+          if-no-files-found: error
           retention-days: 1

lib/rdoc/generator/template/aliki/DESIGN.md

@@ -289,12 +289,14 @@ horizontally.
 
 ### Search
 
+One search form and one result list serve both header layouts. CSS changes the presentation at `1023px`.
+
 | Element                          | Value                                                       |
 |----------------------------------|-------------------------------------------------------------|
-| Desktop field (`#search-field`)  | full-width border-box, `space-2 space-4` pad, 1px border, `radius-md`, `base`; focus → accent border + `0 0 0 3px accent-subtle` |
-| Desktop dropdown (`#search-results-desktop`) | absolute inside the search form, full-width border-box to match the field, `max-height: 60vh`, `radius-lg`, `shadow-lg`, `z-popover` (500) |
-| Mobile modal (`.search-modal-content`) | centered card, `max-width: 600px`, `max-height: 80vh`, `radius-lg`, `shadow-xl` |
-| Modal result item                | `space-3 space-4` pad, `radius-md`, hover `background-secondary` |
+| Shared field (`#search-field`)   | full-width border-box, `space-2 space-4` pad, 1px border, `radius-md`, `base`. Focus uses an accent border + `0 0 0 3px accent-subtle` |
+| Desktop results (`#search-results`) | absolute inside the search surface, full-width border-box, `max-height: 60vh`, `radius-lg`, `shadow-lg`, `z-popover` (500) |
+| Compact surface (`.navbar-search.is-open .search-surface`) | centered overlay, `max-width: 600px`, `max-height: 80vh`, `radius-lg`, `shadow-xl` |
+| Compact result item              | `space-3 space-4` pad, `radius-md`, hover `background-secondary` |
 | Servlet field                    | pill `border-radius: 1.25rem`, leading 🔍 (`\1F50D`) glyph   |
 | Result lines                     | `.search-match` `base` · `.search-namespace` `sm` secondary · `.search-snippet` `sm` tertiary |
 | Type badge (`.search-type-*`)    | inline-block, `space-0 space-2` pad, `xs`, weight 500, `radius-sm`, colors per §2 |

lib/rdoc/generator/template/aliki/_header.rhtml

@@ -3,54 +3,39 @@
     <%= h @options.title %>
   </a>
 
-  <!-- Desktop search bar -->
-  <div class="navbar-search navbar-search-desktop" role="search">
-    <form action="#" method="get" accept-charset="utf-8">
-      <input id="search-field" role="combobox" aria-label="Search"
-             aria-autocomplete="list" aria-controls="search-results-desktop"
-             type="text" name="search" placeholder="Search (/) for a class, method..."
-             spellcheck="false" autocomplete="off"
-             title="Type to search, Up and Down to navigate, Enter to load">
-      <ul id="search-results-desktop" aria-label="Search Results"
-          aria-busy="false" aria-expanded="false"
-          aria-atomic="false" class="initially-hidden search-results"></ul>
-    </form>
-  </div>
-
-  <!-- Mobile search icon button -->
-  <button id="search-toggle" class="navbar-search-mobile" aria-label="Open search" type="button">
-    <span aria-hidden="true">🔍</span>
-  </button>
-
-  <!-- Theme toggle button -->
-  <button id="theme-toggle" class="theme-toggle" aria-label="Switch to dark mode" type="button">
-    <span class="theme-toggle-icon" aria-hidden="true">🌙</span>
-  </button>
-</header>
+  <div class="navbar-search" data-search-container>
+    <button id="search-toggle" class="navbar-search-mobile" aria-label="Open search"
+            aria-controls="search-surface" aria-expanded="false" type="button">
+      <span aria-hidden="true">🔍</span>
+    </button>
 
-<!-- Search Modal (Mobile) -->
-<div id="search-modal" class="search-modal" hidden aria-modal="true" role="dialog" aria-label="Search">
-  <div class="search-modal-backdrop"></div>
-  <div class="search-modal-content">
-    <div class="search-modal-header">
-      <form class="search-modal-form" action="#" method="get" accept-charset="utf-8">
-        <span class="search-modal-icon" aria-hidden="true">🔍</span>
-        <input id="search-field-mobile" role="combobox" aria-label="Search"
-               aria-autocomplete="list" aria-controls="search-results-mobile"
-               type="text" name="search" placeholder="Search documentation"
-               spellcheck="false" autocomplete="off">
-        <button type="button" class="search-modal-close" aria-label="Close search" id="search-modal-close">
+    <div class="search-backdrop" data-search-close></div>
+    <div id="search-surface" class="search-surface">
+      <form class="search-form" role="search" action="#" method="get" accept-charset="utf-8">
+        <span class="search-icon" aria-hidden="true">🔍</span>
+        <input id="search-field" role="combobox" aria-label="Search"
+               aria-autocomplete="list" aria-controls="search-results"
+               type="text" name="search" placeholder="Search (/) for a class, method..."
+               spellcheck="false" autocomplete="off"
+               title="Type to search, Up and Down to navigate, Enter to load">
+        <button type="button" class="search-close" aria-label="Close search" data-search-close>
           <span aria-hidden="true">esc</span>
         </button>
       </form>
-    </div>
-    <div class="search-modal-body">
-      <ul id="search-results-mobile" aria-label="Search Results"
-          aria-busy="false" aria-expanded="false"
-          aria-atomic="false" class="search-results search-modal-results initially-hidden"></ul>
-      <div class="search-modal-empty">
-        <p>No recent searches</p>
+
+      <div class="search-body">
+        <ul id="search-results" aria-label="Search Results"
+            aria-busy="false" aria-expanded="false"
+            aria-atomic="false" class="initially-hidden search-results"></ul>
+        <div class="search-empty">
+          <p>No recent searches</p>
+        </div>
       </div>
     </div>
   </div>
-</div>
+
+  <!-- Theme toggle button -->
+  <button id="theme-toggle" class="theme-toggle" aria-label="Switch to dark mode" type="button">
+    <span class="theme-toggle-icon" aria-hidden="true">🌙</span>
+  </button>
+</header>

lib/rdoc/generator/template/aliki/_sidebar_search.rhtml

@@ -1,14 +1,14 @@
-<div id="search-section" role="search" class="project-section initially-hidden">
-  <form action="#" method="get" accept-charset="utf-8">
+<div id="search-section" class="project-section initially-hidden" data-search-container>
+  <form role="search" action="#" method="get" accept-charset="utf-8">
     <div id="search-field-wrapper">
       <input id="search-field" role="combobox" aria-label="Search"
-             aria-autocomplete="list" aria-controls="search-results-desktop"
+             aria-autocomplete="list" aria-controls="search-results"
              type="text" name="search" placeholder="Search (/) for a class, method, ..." spellcheck="false"
              autocomplete="off"
              title="Type to search, Up and Down to navigate, Enter to load">
     </div>
 
-    <ul id="search-results-desktop" aria-label="Search Results"
+    <ul id="search-results" aria-label="Search Results"
         aria-busy="false" aria-expanded="false"
         aria-atomic="false" class="initially-hidden search-results"></ul>
   </form>