Polish, Add CI

Author: andrewshen

.github/workflows/ci.yml

@@ -0,0 +1,32 @@
+name: CI
+
+on:
+  push:
+    branches: [main, v2]
+  pull_request:
+
+concurrency:
+  group: ci-${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          cache: npm
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Typecheck
+        run: npm run typecheck
+
+      - name: Test
+        run: npm test

src/content/App.tsx

@@ -7,10 +7,7 @@ import {
 } from 'react';
 import { writeSidebarCollapsed } from '../lib/storage';
 import type { ThemePreference, TocItem } from '../lib/types';
-import {
-  getActiveTocIndex,
-  identifyPrintBlock,
-} from '../host/toc';
+import { getActiveTocIndex, identifyPrintBlock } from '../host/toc';
 import { Sidebar } from './sidebar/Sidebar';
 
 type AppProps = {
@@ -19,14 +16,9 @@ type AppProps = {
   initialTheme: ThemePreference;
 };
 
-type SidebarPhase =
-  | 'closed'
-  | 'opening'
-  | 'open'
-  | 'closing-ready'
-  | 'closing';
+type SidebarPhase = 'closed' | 'opening' | 'open' | 'closing-ready' | 'closing';
 
-const SIDEBAR_TRANSITION_MS = 150;
+const SIDEBAR_TRANSITION_MS = 200;
 const SIDEBAR_TRANSITION_FALLBACK_MS = SIDEBAR_TRANSITION_MS + 100;
 
 function syncSidebarPhase(phase: SidebarPhase): void {
@@ -38,18 +30,14 @@ function prefersReducedMotion(): boolean {
   return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
 }
 
-export function App({
-  items,
-  initialCollapsed,
-  initialTheme,
-}: AppProps) {
+export function App({ items, initialCollapsed, initialTheme }: AppProps) {
   const [sidebarPhase, setSidebarPhase] = useState<SidebarPhase>(
-    initialCollapsed ? 'closed' : 'open'
+    initialCollapsed ? 'closed' : 'open',
   );
   const [paletteOpen, setPaletteOpen] = useState(false);
   const [activeIndex, setActiveIndex] = useState(0);
   const [dark, setDark] = useState(() =>
-    document.body.classList.contains('dark')
+    document.body.classList.contains('dark'),
   );
   const prepareFrameRef = useRef<number | null>(null);
   const startFrameRef = useRef<number | null>(null);
@@ -67,7 +55,7 @@ export function App({
         window.cancelAnimationFrame(startFrameRef.current);
       }
     },
-    []
+    [],
   );
 
   useEffect(() => {
@@ -94,10 +82,7 @@ export function App({
     }
 
     container?.addEventListener('transitionend', onTransitionEnd);
-    const fallback = window.setTimeout(
-      finish,
-      SIDEBAR_TRANSITION_FALLBACK_MS
-    );
+    const fallback = window.setTimeout(finish, SIDEBAR_TRANSITION_FALLBACK_MS);
     return () => {
       container?.removeEventListener('transitionend', onTransitionEnd);
       window.clearTimeout(fallback);
@@ -203,7 +188,11 @@ export function App({
   }, [paletteOpen]);
 
   return (
-    <div className={['sep-plus-app', dark ? 'is-dark' : ''].filter(Boolean).join(' ')}>
+    <div
+      className={['sep-plus-app', dark ? 'is-dark' : '']
+        .filter(Boolean)
+        .join(' ')}
+    >
       <Sidebar
         items={items}
         activeIndex={activeIndex}

src/content/palette/Palette.tsx

@@ -89,6 +89,7 @@ export function Palette({ open, onClose, anchorRef, dark }: PaletteProps) {
   const [loading, setLoading] = useState(false);
   const [loadError, setLoadError] = useState<string | null>(null);
   const [activeIndex, setActiveIndex] = useState(0);
+  const prevActiveIndexRef = useRef(0);
   const [mounted, setMounted] = useState(open);
   const [expanded, setExpanded] = useState(false);
   const [anchor, setAnchor] = useState<AnchorRect | null>(null);
@@ -116,6 +117,7 @@ export function Palette({ open, onClose, anchorRef, dark }: PaletteProps) {
       setMounted(false);
       setQuery('');
       setActiveIndex(0);
+      prevActiveIndexRef.current = 0;
       setLoadError(null);
       setAnchor(null);
     }, delay);
@@ -217,8 +219,14 @@ export function Palette({ open, onClose, anchorRef, dark }: PaletteProps) {
   }, [query, rows.length]);
 
   useEffect(() => {
-    // Skip index 0 / mount — scrollIntoView during the open morph nudges the list.
-    if (!open || closing || !expanded || activeIndex === 0 || !listRef.current) {
+    if (!open || closing || !expanded || !listRef.current) {
+      return;
+    }
+    const previousIndex = prevActiveIndexRef.current;
+    prevActiveIndexRef.current = activeIndex;
+    // Skip idle/initial index 0 — scrollIntoView during the open morph nudges the
+    // list. Still scroll when wrapping from the last result back to the first.
+    if (activeIndex === 0 && previousIndex === 0) {
       return;
     }
     const active = listRef.current.querySelector<HTMLElement>(

src/content/sidebar/Sidebar.tsx

@@ -20,7 +20,8 @@ type SidebarProps = {
 
 type TogglePhase = 'idle' | 'area' | 'target' | 'pressed';
 
-const SIDEBAR_TOGGLE_FALLBACK_MS = 250;
+const SIDEBAR_TOGGLE_TRANSITION_MS = 200;
+const SIDEBAR_TOGGLE_FALLBACK_MS = SIDEBAR_TOGGLE_TRANSITION_MS + 100;
 
 function IconAnnotations() {
   return (
@@ -52,13 +53,7 @@ function IconAnnotations() {
 function IconSettings() {
   return (
     <svg viewBox="0 0 16 16" aria-hidden="true" fill="none">
-      <circle
-        cx="6.5"
-        cy="5"
-        r="1.5"
-        stroke="currentColor"
-        strokeWidth="1.2"
-      />
+      <circle cx="6.5" cy="5" r="1.5" stroke="currentColor" strokeWidth="1.2" />
       <circle
         cx="10.5"
         cy="11"
@@ -132,7 +127,7 @@ export function Sidebar({
   const toggleResetTimerRef = useRef<number | null>(null);
   const searchSlotRef = useRef<HTMLDivElement>(null);
   const logoSrc = chrome.runtime.getURL(
-    dark ? 'sep-logo-white.png' : 'sep-logo.png'
+    dark ? 'sep-logo-white.png' : 'sep-logo.png',
   );
 
   useEffect(() => {
@@ -150,7 +145,7 @@ export function Sidebar({
         window.clearTimeout(toggleResetTimerRef.current);
       }
     },
-    []
+    [],
   );
 
   function finishToggleTransition(): void {
@@ -169,7 +164,7 @@ export function Sidebar({
     setTogglePhase('pressed');
     toggleResetTimerRef.current = window.setTimeout(
       finishToggleTransition,
-      SIDEBAR_TOGGLE_FALLBACK_MS
+      SIDEBAR_TOGGLE_FALLBACK_MS,
     );
     onToggleCollapsed();
   }
@@ -240,7 +235,7 @@ export function Sidebar({
               aria-current={surface === 'annotations' ? 'page' : undefined}
               onClick={() =>
                 setSurface((current) =>
-                  current === 'annotations' ? 'toc' : 'annotations'
+                  current === 'annotations' ? 'toc' : 'annotations',
                 )
               }
             >
@@ -260,7 +255,7 @@ export function Sidebar({
               aria-current={surface === 'settings' ? 'page' : undefined}
               onClick={() =>
                 setSurface((current) =>
-                  current === 'settings' ? 'toc' : 'settings'
+                  current === 'settings' ? 'toc' : 'settings',
                 )
               }
             >
@@ -314,10 +309,7 @@ export function Sidebar({
 
       {createPortal(
         <div
-          className={[
-            'sep-sidebar-toggle',
-            collapsed ? 'is-collapsed' : '',
-          ]
+          className={['sep-sidebar-toggle', collapsed ? 'is-collapsed' : '']
             .filter(Boolean)
             .join(' ')}
           data-phase={togglePhase}
@@ -372,7 +364,7 @@ export function Sidebar({
             <span className="sep-expander bottom" />
           </button>
         </div>,
-        document.getElementById('sep-plus-edge-toggle') ?? document.body
+        document.getElementById('sep-plus-edge-toggle') ?? document.body,
       )}
     </>
   );

src/content/styles.css

@@ -32,8 +32,9 @@
   --sep-duration-fast: 100ms;
   --sep-duration-ui: 150ms;
   --sep-duration-drawer: 200ms;
-  --sep-font: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', sans-serif;
+  --sep-font:
+    'Public Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
+    sans-serif;
 
   font-family: var(--sep-font);
   color: var(--sep-text);
@@ -100,7 +101,7 @@
   border-right: none;
   transform: translateX(0);
   /* Match article #container timing so the sheet edge and sidebar move as one. */
-  transition: transform var(--sep-duration-ui) var(--sep-ease-in-out);
+  transition: transform var(--sep-duration-drawer) var(--sep-ease-out);
   box-sizing: border-box;
 }
 
@@ -595,7 +596,7 @@
   background: transparent;
   color: var(--sep-muted-soft);
   font-family: var(--sep-font);
-  font-size: 11px;
+  font-size: 12px;
   line-height: 16px;
   font-weight: 500;
   pointer-events: none;

src/host/footnotes.css

@@ -4,9 +4,10 @@
   inset: 0;
   z-index: 1000;
   pointer-events: none;
-  font-family: 'Public Sans', system-ui, -apple-system, BlinkMacSystemFont,
-    'Segoe UI', sans-serif;
+  font-family: var(--sep-font);
   color: var(--sep-text);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }
 
 .sep-footnote-preview {
@@ -19,8 +20,8 @@
   background: var(--sep-panel-bg);
   box-shadow: 0 10px 30px
     color-mix(in srgb, var(--sand-12) 14%, transparent);
-  color: var(--sep-muted);
-  font-size: 13px;
+  color: var(--sep-text);
+  font-size: 14px;
   font-weight: 400;
   line-height: 20px;
   opacity: 0;
@@ -61,7 +62,7 @@
   max-height: min(420px, calc(100vh - 24px));
   overflow: auto;
   overscroll-behavior: contain;
-  padding: 16px 20px;
+  padding: 12px 20px;
 }
 
 .sep-footnote-preview p,