Arrange the rail: drag pages into your own order, kept with the account

The close cross on a detail pane is drawn, not a glyph, and sits in no box.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>

web/src/ui.tsx

@@ -4,6 +4,16 @@ import { ReactNode, useEffect, useRef, useState } from 'react'
 export function Spinner({ size = 14 }: { size?: number }) {
   return <span className="spin" style={{ width: size, height: size }} aria-hidden="true" />
 }
+// The × in the corner of a detail pane. A drawn cross rather than the × glyph, which sits
+// differently in every font and theme.
+export function CloseBtn({ onClick, title = 'Close' }: { onClick: () => void; title?: string }) {
+  return (
+    <button type="button" className="detail-close" title={title} aria-label={title} onClick={onClick}>
+      <svg width="14" height="14" viewBox="0 0 14 14" aria-hidden="true"><path d="M2 2l10 10M12 2L2 12" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" fill="none" /></svg>
+    </button>
+  )
+}
+
 export function Loading({ label = 'Loading…' }: { label?: string }) {
   return <div className="center muted loading"><Spinner size={22} /><div>{label}</div></div>
 }