Polish + performance updates

Author: andrewshen

manifest.config.ts

@@ -12,11 +12,25 @@ export default defineManifest({
     '48': 'icons/icon48.png',
     '128': 'icons/icon128.png',
   },
-  permissions: ['storage'],
+  // WithHostAccess (not declarativeNetRequest) so install only shows Plato
+  // host access — no "Block content on any page you visit" warning.
+  permissions: ['storage', 'declarativeNetRequestWithHostAccess'],
   host_permissions: [
     'http://plato.stanford.edu/*',
     'https://plato.stanford.edu/*',
   ],
+  // Drop unused Font Awesome CSS (native chrome that used it is hidden).
+  // Network-layer block beats the preload scanner; same-origin only so we
+  // don't need Google Fonts host permissions or the broader DNR warning.
+  declarative_net_request: {
+    rule_resources: [
+      {
+        id: 'block-unused-fonts',
+        enabled: true,
+        path: 'src/rules/block-unused-fonts.json',
+      },
+    ],
+  },
   content_scripts: [
     {
       matches: [

src/content/palette/Palette.tsx

@@ -21,6 +21,8 @@ type PaletteProps = {
   open: boolean;
   onClose: () => void;
   anchorRef: RefObject<HTMLElement | null>;
+  /** Collapsed sidebar: center the palette instead of morphing from the slot. */
+  collapsed: boolean;
   dark: boolean;
 };
 
@@ -118,10 +120,36 @@ const EXIT_MS = 150;
 const PROTRUDE_PX = 60;
 /** Sidebar content padding-right; included so width clears the sidebar edge. */
 const SIDEBAR_PAD_RIGHT = 20;
+/** Centered (collapsed-sidebar) palette width and viewport insets. */
+const CENTERED_WIDTH = 560;
+const CENTERED_MARGIN = 16;
+/** Vertical placement as a fraction of viewport height (upper-center). */
+const CENTERED_TOP_RATIO = 0.22;
 const CLOSED_HEIGHT = 40;
 /** Wait out rapid ↑/↓ before kicking off a prefetch. */
 const PREFETCH_DEBOUNCE_MS = 75;
 
+type PaletteLayout = {
+  top: number;
+  left: number;
+  width: number;
+};
+
+function getCenteredLayout(
+  viewportWidth = window.innerWidth,
+  viewportHeight = window.innerHeight
+): PaletteLayout {
+  const width = Math.min(
+    CENTERED_WIDTH,
+    Math.max(0, viewportWidth - CENTERED_MARGIN * 2)
+  );
+  return {
+    width,
+    left: Math.max(CENTERED_MARGIN, Math.round((viewportWidth - width) / 2)),
+    top: Math.round(viewportHeight * CENTERED_TOP_RATIO),
+  };
+}
+
 function getPaletteMount(): HTMLElement | null {
   const layer = document.getElementById('sep-plus-palette-layer');
   return layer?.shadowRoot?.getElementById('sep-plus-palette-mount') ?? null;
@@ -143,7 +171,13 @@ function measureAnchor(
   };
 }
 
-export function Palette({ open, onClose, anchorRef, dark }: PaletteProps) {
+export function Palette({
+  open,
+  onClose,
+  anchorRef,
+  collapsed,
+  dark,
+}: PaletteProps) {
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLUListElement>(null);
   const [query, setQuery] = useState('');
@@ -157,14 +191,25 @@ export function Palette({ open, onClose, anchorRef, dark }: PaletteProps) {
   const [mounted, setMounted] = useState(open);
   const [expanded, setExpanded] = useState(false);
   const [anchor, setAnchor] = useState<AnchorRect | null>(null);
+  const [viewport, setViewport] = useState(() => ({
+    width: window.innerWidth,
+    height: window.innerHeight,
+  }));
 
   const closing = mounted && !open;
+  // Layout mode is captured when opening so a sidebar toggle mid-session
+  // (or during close) doesn't jump between centered and anchored geometry.
+  const collapsedRef = useRef(collapsed);
+  collapsedRef.current = collapsed;
+  const [centered, setCentered] = useState(collapsed);
 
   useEffect(() => {
     if (!open) {
       return;
     }
+    setCentered(collapsedRef.current);
     setRelated(collectRelatedEntries());
+    setViewport({ width: window.innerWidth, height: window.innerHeight });
     const next = measureAnchor(anchorRef);
     setAnchor(next);
     setMounted(true);
@@ -208,6 +253,7 @@ export function Palette({ open, onClose, anchorRef, dark }: PaletteProps) {
     }
 
     function onResize(): void {
+      setViewport({ width: window.innerWidth, height: window.innerHeight });
       const next = measureAnchor(anchorRef);
       if (next) {
         setAnchor(next);
@@ -393,9 +439,15 @@ export function Palette({ open, onClose, anchorRef, dark }: PaletteProps) {
     return null;
   }
 
-  const width = expanded
-    ? anchor.width + SIDEBAR_PAD_RIGHT + PROTRUDE_PX
-    : anchor.width;
+  const layout: PaletteLayout = centered
+    ? getCenteredLayout(viewport.width, viewport.height)
+    : {
+        top: anchor.top,
+        left: anchor.left,
+        width: expanded
+          ? anchor.width + SIDEBAR_PAD_RIGHT + PROTRUDE_PX
+          : anchor.width,
+      };
 
   return createPortal(
     <div
@@ -423,6 +475,7 @@ export function Palette({ open, onClose, anchorRef, dark }: PaletteProps) {
       <div
         className={[
           'sep-palette-inline',
+          centered ? 'is-centered' : '',
           expanded ? 'is-open' : '',
           closing ? 'is-closing' : '',
         ]
@@ -432,9 +485,9 @@ export function Palette({ open, onClose, anchorRef, dark }: PaletteProps) {
         aria-modal={expanded ? true : undefined}
         aria-label="Search"
         style={{
-          top: anchor.top,
-          left: anchor.left,
-          width,
+          top: layout.top,
+          left: layout.left,
+          width: layout.width,
         }}
       >
         <div className="sep-palette-input-row">

src/content/sidebar/ContentsTab.tsx

@@ -1,4 +1,3 @@
-import { useEffect, useRef } from 'react';
 import type { SiteNavSection, TocItem } from '../../lib/types';
 import { smoothScrollToHref } from '../../host/toc';
 
@@ -26,36 +25,9 @@ export function ContentsTab({
   activeIndex,
   siteNav,
 }: ContentsTabProps) {
-  const listRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    const list = listRef.current;
-    if (!list || activeIndex < 0 || siteNav?.length) {
-      return;
-    }
-    // First section: pin to the top so the "Contents" label stays visible.
-    if (activeIndex === 0) {
-      list.scrollTop = 0;
-      return;
-    }
-    const active = list.querySelector<HTMLElement>(
-      `[data-index="${activeIndex}"]`
-    );
-    if (!active) {
-      return;
-    }
-    const top = active.offsetTop;
-    const bottom = top + active.offsetHeight;
-    if (top < list.scrollTop) {
-      list.scrollTop = top;
-    } else if (bottom > list.scrollTop + list.clientHeight) {
-      list.scrollTop = bottom - list.clientHeight;
-    }
-  }, [activeIndex, siteNav]);
-
   if (siteNav?.length) {
     return (
-      <div className="sep-toc-scroll" ref={listRef}>
+      <div className="sep-toc-scroll">
         {siteNav.map((section) => (
           <div key={section.title} className="sep-site-nav-section">
             <div className="sep-contents-label">{section.title}</div>
@@ -84,13 +56,12 @@ export function ContentsTab({
   }
 
   return (
-    <div className="sep-toc-scroll" ref={listRef}>
+    <div className="sep-toc-scroll">
       <div className="sep-contents-label">Contents</div>
       {items.map((item, index) => (
         <button
           key={`${item.href}-${index}`}
           type="button"
-          data-index={index}
           className={[
             'sep-toc-link',
             `sep-toc-link--level-${item.level}`,

src/content/sidebar/Sidebar.tsx

@@ -231,6 +231,7 @@ export function Sidebar({
             open={paletteOpen}
             onClose={onClosePalette}
             anchorRef={searchSlotRef}
+            collapsed={collapsed}
             dark={dark}
           />
         </div>

src/content/styles.css

@@ -526,6 +526,52 @@
   pointer-events: none;
 }
 
+/*
+ * Collapsed sidebar: full-size shell immediately; only scale + opacity.
+ * (Sidebar-open mode keeps the width/height morph above.)
+ */
+.sep-palette-inline.is-centered,
+.sep-palette-inline.is-centered.is-open,
+.sep-palette-inline.is-centered.is-closing {
+  /* Same open height as .is-open — no expand/collapse morph */
+  max-height: min(298px, calc(100vh - 96px));
+  background: var(--sep-surface);
+  box-shadow:
+    0 0 0 1px var(--sep-border-subtle),
+    0 8px 28px color-mix(in srgb, var(--sand-12) 12%, transparent);
+  transform-origin: center center;
+  transition:
+    opacity var(--sep-duration-ui) var(--sep-ease-out),
+    transform var(--sep-duration-ui) var(--sep-ease-out);
+}
+
+.sep-palette-inline.is-centered {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+.sep-palette-inline.is-centered.is-open {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.sep-palette-inline.is-centered.is-closing {
+  opacity: 0;
+  transform: scale(0.95);
+}
+
+/* Parent opacity handles the fade; skip nested reveal fades. */
+.sep-palette-inline.is-centered .sep-palette-esc,
+.sep-palette-inline.is-centered .sep-palette-results-wrap {
+  opacity: 1;
+  transition: none;
+}
+
+.sep-palette-inline.is-centered .sep-palette-input-row::after {
+  background: var(--sep-border-subtle);
+  transition: none;
+}
+
 .sep-palette-input-row {
   position: relative;
   z-index: 1;
@@ -665,6 +711,13 @@
       box-shadow var(--sep-duration-fast) var(--sep-ease);
   }
 
+  .sep-palette-inline.is-centered,
+  .sep-palette-inline.is-centered.is-open,
+  .sep-palette-inline.is-centered.is-closing {
+    transform: none;
+    transition: opacity var(--sep-duration-fast) var(--sep-ease-out);
+  }
+
   .sep-palette-input-row::after {
     transition: background-color var(--sep-duration-fast) var(--sep-ease);
   }
@@ -792,7 +845,8 @@
   }
 }
 
-.sep-plus-app.is-dark .sep-palette-inline.is-open {
+.sep-plus-app.is-dark .sep-palette-inline.is-open,
+.sep-plus-app.is-dark .sep-palette-inline.is-centered {
   background: var(--sep-surface);
   box-shadow:
     0 0 0 1px var(--sep-border-subtle),
@@ -802,3 +856,9 @@
 .sep-plus-app.is-dark .sep-palette-input {
   color: var(--sep-text);
 }
+
+/* Surface and elevated share sand-4 in dark; lift the row highlight. */
+.sep-plus-app.is-dark button.sep-palette-result:hover,
+.sep-plus-app.is-dark button.sep-palette-result.is-active {
+  background: var(--sep-panel-bg);
+}

src/host/footnotes.css

@@ -29,6 +29,12 @@
   pointer-events: none;
 }
 
+/* sand-12 is light in dark mode — use sand-1 like the article sheet shadow. */
+:host-context(body.dark) .sep-footnote-preview {
+  box-shadow: 0 10px 30px
+    color-mix(in srgb, var(--sand-1) 45%, transparent);
+}
+
 .sep-footnote-preview[hidden] {
   display: none;
 }

src/host/styles.css

@@ -917,6 +917,13 @@ body.sep-plus .sep-plus-related-entries a:hover {
 .sep-plus-footnotes .sep-plus-footnote > :last-child {
   margin-bottom: 0;
 }
+
+/* Leading "1." backrefs — match body text, not brand link pink/red. */
+body.sep-plus .sep-plus-footnotes .sep-plus-footnote > :first-child a:first-of-type:link,
+body.sep-plus .sep-plus-footnotes .sep-plus-footnote > :first-child a:first-of-type:visited,
+body.sep-plus .sep-plus-footnotes .sep-plus-footnote > :first-child a:first-of-type:hover {
+  color: var(--sep-text) !important;
+}
 /* Dark Mode — sand scale flips on body.dark; only overrides that need
    different semantic roles or non-sand brand colors live here. */
 
@@ -1004,6 +1011,16 @@ body.dark a:hover {
   color: #ffcbcb !important;
 }
 
+/* Related-entry pills stay sand (beat the pink link accent above). */
+body.dark.sep-plus .sep-plus-related-entries a:link,
+body.dark.sep-plus .sep-plus-related-entries a:visited {
+  color: var(--sep-muted) !important;
+}
+
+body.dark.sep-plus .sep-plus-related-entries a:hover {
+  color: var(--sep-text) !important;
+}
+
 body.dark .btn:hover i {
   color: #ffcbcb !important;
 }

src/rules/block-unused-fonts.json

@@ -0,0 +1,12 @@
+[
+  {
+    "id": 1,
+    "action": { "type": "block" },
+    "condition": {
+      "initiatorDomains": ["plato.stanford.edu"],
+      "requestDomains": ["plato.stanford.edu"],
+      "urlFilter": "font-awesome",
+      "resourceTypes": ["stylesheet"]
+    }
+  }
+]

src/rules/block-unused-fonts.test.ts

@@ -0,0 +1,19 @@
+import { describe, expect, it } from 'vitest';
+import rules from './block-unused-fonts.json';
+
+describe('block-unused-fonts ruleset', () => {
+  it('only blocks same-origin Font Awesome stylesheets on SEP', () => {
+    expect(rules).toHaveLength(1);
+    const [rule] = rules;
+    expect(rule?.action.type).toBe('block');
+    expect(rule?.condition.initiatorDomains).toEqual(['plato.stanford.edu']);
+    expect(rule?.condition.requestDomains).toEqual(['plato.stanford.edu']);
+    expect(rule?.condition.urlFilter).toBe('font-awesome');
+    expect(rule?.condition.resourceTypes).toEqual(['stylesheet']);
+  });
+
+  it('gives every rule a unique id', () => {
+    const ids = rules.map((rule) => rule.id);
+    expect(new Set(ids).size).toBe(ids.length);
+  });
+});