merge queue: embarking main (626fee8), #11548, #11551 and #11550 together

package.json

@@ -14,7 +14,7 @@
     "format": "biome format --write .",
     "format:check": "biome format src integrations plugins scripts",
     "check": "astro check && eslint . && biome check .",
-    "check:links": "linkinator dist/ --recurse --retry-errors --retry-errors-count 3 --timeout 30000 --concurrency 25 --verbosity error --skip 'github.com/.*/edit/' --skip 'https://docs.mergify.com' --skip 'https://slack.mergify.com'"
+    "check:links": "linkinator dist/ --recurse --concurrency 25 --verbosity error --skip 'https?://'"
   },
   "devDependencies": {
     "@actions/core": "^3.0.1",

src/components/Modal/Modal.css

@@ -1,14 +1,24 @@
 .modal {
-  display: none;
   position: fixed;
   z-index: 100;
   left: 0;
   top: 0;
   width: 100%;
   height: 100%;
   overflow: hidden;
-  background-color: rgb(0, 0, 0);
-  background-color: rgba(0, 0, 0, 0.4);
+  background-color: rgba(0, 0, 0, 0);
+  backdrop-filter: blur(0);
+  -webkit-backdrop-filter: blur(0);
+  transition:
+    background-color 180ms ease,
+    backdrop-filter 180ms ease,
+    -webkit-backdrop-filter 180ms ease;
+}
+
+.modal.modal-open {
+  background-color: rgba(0, 0, 0, 0.35);
+  backdrop-filter: blur(2px);
+  -webkit-backdrop-filter: blur(2px);
 }
 
 .modal-content {
@@ -23,7 +33,23 @@
   top: 50%;
   left: 50%;
   overflow: hidden;
-  transform: translate(-50%, -50%);
+  opacity: 0;
+  transform: translate(-50%, calc(-50% + 8px)) scale(0.98);
+  transition:
+    opacity 180ms ease,
+    transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
+}
+
+.modal.modal-open .modal-content {
+  opacity: 1;
+  transform: translate(-50%, -50%) scale(1);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .modal,
+  .modal-content {
+    transition: none;
+  }
 }
 
 .close {

src/components/Modal/Modal.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useEffect, useRef } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 import './Modal.css';
 
@@ -8,8 +8,25 @@ interface Props {
   children: ReactNode;
 }
 
+const TRANSITION_MS = 180;
+
 export default function Modal({ open, onClose, children }: Props) {
   const modal = useRef<HTMLDivElement>(null);
+  // Decouple "in DOM" from "visually open" so we can transition out before
+  // unmounting. mounted controls render; visible drives the .modal-open class.
+  const [mounted, setMounted] = useState(open);
+  const [visible, setVisible] = useState(false);
+
+  useEffect(() => {
+    if (open) {
+      setMounted(true);
+      const raf = requestAnimationFrame(() => setVisible(true));
+      return () => cancelAnimationFrame(raf);
+    }
+    setVisible(false);
+    const timeout = setTimeout(() => setMounted(false), TRANSITION_MS);
+    return () => clearTimeout(timeout);
+  }, [open]);
 
   useEffect(() => {
     const close = (e: MouseEvent) => {
@@ -21,10 +38,12 @@ export default function Modal({ open, onClose, children }: Props) {
     window.addEventListener('click', close);
 
     return () => window.removeEventListener('click', close);
-  }, []);
+  }, [onClose]);
+
+  if (!mounted) return null;
 
   return createPortal(
-    <div ref={modal} id="myModal" className="modal" style={{ display: open ? 'block' : 'none' }}>
+    <div ref={modal} id="myModal" className={`modal${visible ? ' modal-open' : ''}`}>
       <div className="modal-content">{children}</div>
     </div>,
     document.body

src/components/Search/PageDetails.tsx

@@ -113,7 +113,7 @@ export default function Preview({ entry }: PreviewProps) {
     <div
       style={{
         display: 'flex',
-        padding: 16,
+        padding: '0.625rem 1.25rem 1rem',
         justifyContent: 'flex-start',
         alignItems: 'start',
         flex: 2,
@@ -127,7 +127,6 @@ export default function Preview({ entry }: PreviewProps) {
         <div
           className="search-preview-html"
           style={{
-            margin: '8px 0',
             lineHeight: 1.6,
             width: '100%',
             overflow: 'hidden',

src/components/Search/Results.tsx

@@ -80,6 +80,7 @@ interface ResultsProps {
 
 export default function Results({ results, query, onNavigate }: ResultsProps) {
   const [focusedIndex, setFocusedIndex] = useState(0);
+  const [scrolled, setScrolled] = useState(false);
 
   const scrollToIndex = (index: number) => {
     const entry = results[index];
@@ -126,6 +127,7 @@ export default function Results({ results, query, onNavigate }: ResultsProps) {
 
   useEffect(() => {
     setFocusedIndex(0);
+    setScrolled(false);
     // Prefetch preview HTML for the top results so the preview pane is instant.
     for (const entry of results.slice(0, 5)) {
       prefetchSectionHtml(entry);
@@ -149,8 +151,11 @@ export default function Results({ results, query, onNavigate }: ResultsProps) {
   }
 
   return (
-    <div className="search-results-split">
-      <div className="search-results-list">
+    <div className="search-results-split" data-scrolled={scrolled ? '' : undefined}>
+      <div
+        className="search-results-list"
+        onScroll={(e) => setScrolled(e.currentTarget.scrollTop > 4)}
+      >
         {results.map((entry, i) => (
           <PageResult
             key={entry.id}

src/components/Search/Search.astro

@@ -27,9 +27,18 @@ import SearchBar from './SearchBar';
 	</svg>
 	<span class="search-placeholder">Search Mergify Docs</span>
 	<span class="search-keyboard-hint">
-		<kbd aria-hidden="true">/</kbd>
+		<kbd aria-hidden="true" data-search-shortcut>⌘K</kbd>
 	</span>
 </button>
+<script is:inline>
+	(() => {
+		const isMac = /Mac|iPhone|iPad|iPod/.test(navigator.platform);
+		if (isMac) return;
+		for (const el of document.querySelectorAll('[data-search-shortcut]')) {
+			el.textContent = 'Ctrl K';
+		}
+	})();
+</script>
 <SearchBar client:only="react" />
 <style>
 	/** Style search header button */

src/components/Search/Search.scss

@@ -19,7 +19,7 @@
 		display: flex;
 		align-items: center;
 		gap: 0.75rem;
-		padding: 0.875rem 1rem;
+		padding: 0.875rem 1.25rem;
 		border-bottom: 1px solid var(--theme-divider);
 	}
 	.search-input-row [data-icon] {
@@ -33,14 +33,10 @@
 		background: transparent;
 		font-size: 1rem;
 		color: var(--theme-text);
-		border-radius: 4px;
 	}
-	/* Focus-visible affordance for keyboard users — the bare `outline: none`
-	   above clears the browser default; restore on keyboard focus only so
-	   mouse clicks don't show a ring. */
+	.search-input:focus,
 	.search-input:focus-visible {
-		outline: 2px solid var(--theme-link);
-		outline-offset: 2px;
+		outline: none;
 	}
 	.search-input::placeholder {
 		color: var(--theme-text-muted);
@@ -78,7 +74,7 @@
 		letter-spacing: 0.1em;
 		text-transform: uppercase;
 		color: var(--theme-text-muted);
-		padding: 0.75rem 1rem 0.5rem;
+		padding: 1.25rem 1.5rem 0.5rem;
 	}
 
 	/* ----- Recent searches ----- */
@@ -110,10 +106,26 @@
 	/* ----- Empty state (no query, no recent) ----- */
 	.search-state-empty,
 	.search-state-no-results {
+		flex: 1;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
 		padding: 2.5rem 1.5rem;
 		text-align: center;
 		color: var(--theme-text-muted);
 	}
+	.search-state-icon {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: 3.5rem;
+		height: 3.5rem;
+		margin-bottom: 1rem;
+		border-radius: 999px;
+		background: var(--theme-bg-offset);
+		color: var(--theme-text-muted);
+	}
 	.search-state-title {
 		font-size: 1rem;
 		font-weight: 500;
@@ -149,16 +161,45 @@
 		display: flex;
 		min-height: 0;
 		overflow: hidden;
+		position: relative;
+	}
+	/* Soft fades on the scrollable area so content doesn't end on hard edges
+	   above/below. Uses --theme-bg-content so it works in light + dark. */
+	.search-results-split::before,
+	.search-results-split::after {
+		content: '';
+		position: absolute;
+		left: 0;
+		right: 0;
+		pointer-events: none;
+		z-index: 1;
+	}
+	.search-results-split::before {
+		top: 0;
+		height: 1.5rem;
+		background: linear-gradient(to bottom, var(--theme-bg-content), transparent);
+		opacity: 0;
+		transition: opacity 120ms ease;
+	}
+	.search-results-split[data-scrolled]::before {
+		opacity: 1;
+	}
+	.search-results-split::after {
+		bottom: 0;
+		height: 2.5rem;
+		background: linear-gradient(to bottom, transparent, var(--theme-bg-content));
 	}
 	.search-results-list {
 		flex: 1;
 		overflow: auto;
 		min-width: 0;
+		padding: 0 0.75rem 0.5rem;
+		display: flex;
+		flex-direction: column;
+		gap: 0.125rem;
 	}
 	.search-results-preview-divider {
-		border: none;
-		border-left: 1px solid var(--theme-divider);
-		margin: 0;
+		display: none;
 	}
 
 	/* ----- Result row ----- */
@@ -167,41 +208,17 @@
 		justify-content: space-between;
 		align-items: center;
 		gap: 0.5rem;
-		padding: 0.625rem 1rem;
+		padding: 0.625rem 0.75rem;
 		text-decoration: none;
 		color: var(--theme-text);
-		border-left: 3px solid transparent;
+		border-radius: 8px;
 		cursor: pointer;
 		overflow: hidden;
+		flex-shrink: 0;
 	}
 	.page-result.active,
 	.page-result:hover {
 		background: var(--theme-bg-offset);
-		border-left-color: var(--theme-link);
-	}
-	.page-result[data-section="merge-queue"].active,
-	.page-result[data-section="merge-queue"]:hover {
-		border-left-color: var(--color-teal-700);
-	}
-	.page-result[data-section="ci-insights"].active,
-	.page-result[data-section="ci-insights"]:hover {
-		border-left-color: var(--color-purple-700);
-	}
-	.page-result[data-section="test-insights"].active,
-	.page-result[data-section="test-insights"]:hover {
-		border-left-color: var(--color-orange-700);
-	}
-	.page-result[data-section="merge-protections"].active,
-	.page-result[data-section="merge-protections"]:hover {
-		border-left-color: var(--color-blue-700);
-	}
-	.page-result[data-section="stacks"].active,
-	.page-result[data-section="stacks"]:hover {
-		border-left-color: var(--color-coral-700);
-	}
-	.page-result[data-section="workflow"].active,
-	.page-result[data-section="workflow"]:hover {
-		border-left-color: var(--color-rose-700);
 	}
 	.page-result-body {
 		flex: 1;

src/components/Search/SearchBar.tsx

@@ -77,6 +77,9 @@ function RecentSearches({ onSelect }: { onSelect: (q: string) => void }) {
 function EmptyState() {
   return (
     <div className="search-state-empty">
+      <div className="search-state-icon" aria-hidden="true">
+        <Icon icon="lucide:search" width="28" height="28" />
+      </div>
       <p className="search-state-title">Search the docs</p>
       <p className="search-state-subtitle">
         Try a config key, a feature name, or &quot;merge queue&quot;.
@@ -218,6 +221,11 @@ export default function SearchBar() {
       setOpen(true);
     };
     const openModalKeydown = (e: KeyboardEvent) => {
+      if (e.key === 'k' && (e.metaKey || e.ctrlKey) && !e.altKey && !e.shiftKey) {
+        e.preventDefault();
+        openModal();
+        return;
+      }
       if (e.key === '/' && !e.altKey && !e.ctrlKey && !e.metaKey && !e.shiftKey) {
         const active = document.activeElement as HTMLElement | null;
         const isTypingTarget =

src/content/navItems.tsx

@@ -235,7 +235,7 @@ const navItems: NavItem[] = [
   },
   {
     title: 'Workflow Automation',
-    icon: 'lucide:settings',
+    icon: 'lucide:zap',
     path: '/workflow',
     children: [
       { title: 'Workflow Automation', path: '/workflow/', icon: 'lucide:bot' },
@@ -364,7 +364,7 @@ const navItems: NavItem[] = [
   },
   {
     title: 'Integrations',
-    icon: 'lucide:plug',
+    icon: 'lucide:blocks',
     path: '/integrations',
     children: [
       { title: 'GitHub', path: '/integrations/github', icon: 'simple-icons:github' },