Match the docs' PageFooter for page navigation

The invented bordered cards with Previous/Next labels are replaced by the
docs' actual footer: the destination name with a 14px emcn chevron on a
flex-1 hover pill (rounded-lg, px-3 py-3, --surface-active), next
right-justified, and a spacer holding the empty half — verified against
apps/docs/components/docs-layout/page-footer.tsx.

Author: Sg312

apps/sim/lib/workspace-files/artifact-stylesheet.ts

@@ -551,18 +551,21 @@ figcaption { font-size: 0.875em; line-height: 1.4285714; color: var(--text-prima
 .codeblock-copy.is-copied { color: var(--brand-accent); }
 .codeblock pre { border: none; border-radius: 0; margin: 0; background: transparent; }
 
-/* Footer pagination — the docs' previous/next cards. */
-.page-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 3rem; }
+/* Footer pagination — the docs' PageFooter verbatim: name + chevron on a
+   hover pill (mt-12 flex gap-2 py-3; cards flex-1 gap-1.5 rounded-lg px-3
+   py-3 text-sm --text-body, hover --surface-active; chevrons 14px
+   --text-icon; a missing side keeps its half as a spacer). */
+.page-nav { display: flex; gap: 0.5rem; margin-top: 3rem; padding: 0.75rem 0; }
 .page-nav-card {
-  display: flex; flex-direction: column; gap: 0.15rem;
-  border: 1px solid var(--border); border-radius: 0.75rem;
-  padding: 0.75rem 1rem; text-decoration: none;
+  flex: 1; display: flex; align-items: center; gap: 0.375rem; min-width: 0;
+  border-radius: 0.5rem; padding: 0.75rem;
+  font-size: var(--text-sm); font-weight: 400; color: var(--text-body);
+  text-decoration: none; transition: background-color 0.2s;
 }
-.page-nav-card:hover { background: var(--surface-hover); }
-.page-nav-card.prev { grid-column: 1; }
-.page-nav-card.next { grid-column: 2; text-align: right; }
-.page-nav-dir { font-size: var(--text-caption); color: var(--text-muted); }
-.page-nav-title { font-size: var(--text-sm); font-weight: 500; color: var(--text-primary); }
+.page-nav-card:hover { background: var(--surface-active); opacity: 1; }
+.page-nav-card.next { justify-content: flex-end; }
+.page-nav-card svg { flex-shrink: 0; color: var(--text-icon); }
+.page-nav-spacer { flex: 1; }
 `.trim()
 
 /**

apps/sim/lib/workspace-files/page-compile.test.ts

@@ -133,15 +133,23 @@ describe('compileSimPage', () => {
     expect(html).toContain('src="/api/files/view/img9"')
   })
 
+  it('keeps a lone next card right-aligned with a spacer', () => {
+    const html = compileSimPage('---\ntitle: T\nnext: "[API](sim:file/b)"\n---\nBody.')
+    expect(html).toContain('<div class="page-nav-spacer"></div><a class="page-nav-card next"')
+  })
+
   it('renders frontmatter prev/next as footer pagination cards', () => {
     const html = compileSimPage(
       '---\ntitle: T\nprev: "[Getting Started](sim:file/a)"\nnext: "[API Reference](sim:file/b)"\n---\nBody.',
       { workspaceId: 'ws1' }
     )
     expect(html).toContain('<footer class="page-nav">')
     expect(html).toContain('class="page-nav-card prev"')
-    expect(html).toContain('<span class="page-nav-title">API Reference</span>')
+    expect(html).toContain('Getting Started')
     expect(html).toContain('href="/workspace/ws1/files/b/view"')
+    // The docs' PageFooter shape: chevron + name, no Previous/Next labels.
+    expect(html).toContain('M6.25 3L13.25 10.25L6.25 17.5')
+    expect(html).not.toContain('Previous')
   })
 
   it('renders sim:accordion like sim:faq with title keys', () => {

apps/sim/lib/workspace-files/page-compile.ts

@@ -46,13 +46,26 @@ const frontmatterSchema = z.object({
 
 const MD_LINK = /^\s*\[([^\]]+)\]\(([^)]+)\)\s*$/
 
-/** Renders one footer pagination card from a frontmatter `[Title](href)` link. */
-function paginationCard(value: string, direction: 'prev' | 'next'): string {
-  const match = value.match(MD_LINK)
-  if (!match) return ''
+const CHEVRON_ATTRS =
+  'viewBox="-1 -2 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="1.55" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"'
+const CHEVRON_LEFT = `<svg ${CHEVRON_ATTRS}><path d="M13.25 3L6.25 10.25L13.25 17.5"/></svg>`
+const CHEVRON_RIGHT = `<svg ${CHEVRON_ATTRS}><path d="M6.25 3L13.25 10.25L6.25 17.5"/></svg>`
+
+/**
+ * One footer navigation card from a frontmatter `[Title](href)` link — the
+ * docs' own PageFooter: the destination name with a direction chevron on a
+ * hover pill, no border and no Previous/Next label (the chevron already says
+ * which way you are going). A missing side renders a spacer so the other
+ * card keeps its half.
+ */
+function paginationCard(value: string | undefined, direction: 'prev' | 'next'): string {
+  const match = value?.match(MD_LINK)
+  if (!match) return '<div class="page-nav-spacer"></div>'
   const [, title, href] = match
-  const label = direction === 'prev' ? '← Previous' : 'Next →'
-  return `<a class="page-nav-card ${direction}" href="${escapeHtml(href)}"><span class="page-nav-dir">${label}</span><span class="page-nav-title">${escapeHtml(title)}</span></a>`
+  const name = escapeHtml(title)
+  return direction === 'prev'
+    ? `<a class="page-nav-card prev" href="${escapeHtml(href)}">${CHEVRON_LEFT}${name}</a>`
+    : `<a class="page-nav-card next" href="${escapeHtml(href)}">${name}${CHEVRON_RIGHT}</a>`
 }
 
 /** YAML leaves unquoted scalars typed; reject null/objects rather than stringify them. */
@@ -344,15 +357,11 @@ function compileSimPageDocument(source: string, lenient = false): string {
     `<h1>${escapeHtml(meta.title)}</h1>`,
     ...(meta.lede ? [`<p class="lede">${escapeHtml(meta.lede)}</p>`] : []),
     compileBody(rest, lenient),
-    ...(() => {
-      const cards = [
-        meta.prev ? paginationCard(meta.prev, 'prev') : '',
-        meta.next ? paginationCard(meta.next, 'next') : '',
-      ]
-        .filter(Boolean)
-        .join('')
-      return cards ? [`<footer class="page-nav">${cards}</footer>`] : []
-    })(),
+    ...(meta.prev || meta.next
+      ? [
+          `<footer class="page-nav">${paginationCard(meta.prev, 'prev')}${paginationCard(meta.next, 'next')}</footer>`,
+        ]
+      : []),
     '</div>',
     '</body>',
     '</html>',