Merge pull request #637 from dripnex/develop

chore(release): promote 0.23.0

Author: tomymaritano

apps/desktop/e2e/authgate.spec.ts

@@ -13,7 +13,7 @@ test.describe('AuthGate is the first window', () => {
       await expect(page.getByRole('button', { name: 'Email me a link' })).toBeVisible();
       await expect(page.locator('canvas')).toHaveCount(1);
 
-      await expect(page.getByRole('button', { name: 'Create Your First Note' })).toHaveCount(0);
+      await expect(page.getByRole('button', { name: 'Create a note' })).toHaveCount(0);
       await expect(page.getByRole('button', { name: /continue locally/i })).toHaveCount(0);
 
       const [settings] = await Promise.all([

apps/desktop/e2e/fixtures.ts

@@ -84,7 +84,7 @@ export async function launchApp({
  * New notes start as `# Untitled\\n\\n` (see useNoteActions).
  */
 export async function openFirstNote(window: Page): Promise<Locator> {
-  const create = window.getByRole('button', { name: 'Create Your First Note' });
+  const create = window.getByRole('button', { name: 'Create a note' });
   await create.waitFor({ state: 'visible', timeout: 15_000 });
   await create.click();
   const content = window.locator('.cm-content');

apps/desktop/package.json

@@ -51,6 +51,7 @@
     "cross-fetch": "^4.1.0",
     "diff": "^9.0.0",
     "electron-updater": "^6.8.9",
+    "gsap": "^3.15.0",
     "isomorphic-git": "^1.38.4",
     "katex": "^0.18.4",
     "lucide": "^1.17.0",

apps/desktop/src/renderer/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { useState, useEffect, useLayoutEffect, useCallback, useMemo, useRef } from 'react';
 import { useCssVariables, usePluginStyles, useThemeOverrides } from '@dripnex/plugin-api';
 import { scanMarkdown } from '@dripnex/markdown';
 import type { NoteSnapshot } from '../preload/index';
@@ -61,10 +61,25 @@ import { useMcpLocalPath } from './hooks/useMcpLocalPath';
 import type { PaletteMode } from './utils/paletteQuery';
 import { useEditorBufferStore, selectContentForNote } from './stores/editorBufferStore';
 import { useHeadingJumpStore } from './stores/headingJumpStore';
+import { initGsapRuntime, playMotion, setPerformanceLow } from './motion/gsapRuntime';
+import { shouldPlaySidebarIn } from './motion/sidebarIn';
+import { usePerformanceStore } from './stores/performanceStore';
 
 function NotesApp() {
   usePerformanceMode();
   useOfficialThemes();
+
+  useEffect(() => {
+    const stop = initGsapRuntime();
+    setPerformanceLow(usePerformanceStore.getState().mode === 'low');
+    const unsub = usePerformanceStore.subscribe(state => {
+      setPerformanceLow(state.mode === 'low');
+    });
+    return () => {
+      stop();
+      unsub();
+    };
+  }, []);
   useThemeOverrides();
   useAppearanceSettings();
   useCssVariables();
@@ -131,6 +146,15 @@ function SignedInApp({
 
   const hideSidebar = sidebarCollapsed || distractionFree;
   const hideNoteList = distractionFree;
+  const sidebarRef = useRef<HTMLElement>(null);
+  const sidebarWasHiddenRef = useRef(hideSidebar);
+
+  useLayoutEffect(() => {
+    if (shouldPlaySidebarIn(sidebarWasHiddenRef.current, hideSidebar)) {
+      playMotion('sidebar-in', sidebarRef.current);
+    }
+    sidebarWasHiddenRef.current = hideSidebar;
+  }, [hideSidebar]);
 
   useEffect(() => {
     const setVisibility = window.dripnex.windows.setButtonVisibility;
@@ -434,6 +458,7 @@ function SignedInApp({
           <UpdateBanner />
           <div className="app__layout">
             <aside
+              ref={sidebarRef}
               className="app__sidebar"
               data-collapsed={hideSidebar ? 'true' : 'false'}
               style={{ width: sidebarWidth }}

apps/desktop/src/renderer/components/CommandPalette.module.css

@@ -44,7 +44,6 @@
   border-radius: 12px;
   box-shadow: var(--shadow-xl);
   overflow: hidden;
-  animation: command-palette-slide-in 150ms ease-out;
 }
 
 :global(:root[data-color-scheme='light']) .command-palette {

apps/desktop/src/renderer/components/CommandPalette.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useState, useEffect, useLayoutEffect, useRef, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import {
   Bold,
@@ -55,6 +55,7 @@ import {
   parsePaletteQuery,
   type PaletteMode,
 } from '../utils/paletteQuery';
+import { playMotion } from '../motion/gsapRuntime';
 import { cssm } from '../lib/cssm';
 import styles from './CommandPalette.module.css';
 
@@ -142,6 +143,7 @@ export function CommandPalette({
   const [selectedIndex, setSelectedIndex] = useState(0);
   const inputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const paletteRef = useRef<HTMLDivElement>(null);
   const previousFocusRef = useRef<HTMLElement | null>(null);
 
   const parsed = useMemo(() => parsePaletteQuery(query, mode), [query, mode]);
@@ -225,6 +227,11 @@ export function CommandPalette({
     }
   }, [isOpen, mode]);
 
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    playMotion('palette-in', paletteRef.current);
+  }, [isOpen]);
+
   useEffect(() => {
     setSelectedIndex(0);
   }, [query]);
@@ -371,6 +378,7 @@ export function CommandPalette({
       aria-modal="true"
     >
       <div
+        ref={paletteRef}
         className={sc('command-palette')}
         onClick={e => e.stopPropagation()}
         style={{

apps/desktop/src/renderer/components/GraphView.module.css

@@ -174,6 +174,39 @@
   color: var(--danger);
 }
 
+.filterEmpty {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  padding: var(--space-8) var(--space-6);
+  pointer-events: none;
+  text-align: center;
+}
+
+.filterEmptyIcon {
+  color: var(--text-faint);
+}
+
+.filterEmptyTitle {
+  margin: 0;
+  font-size: var(--text-lg);
+  font-weight: 500;
+  letter-spacing: var(--tracking-tight);
+  color: var(--text-primary);
+}
+
+.filterEmptyHint {
+  margin: 0;
+  font-size: var(--text-sm);
+  color: var(--text-muted);
+}
+
 /* ── Inspector ──────────────────────────────────────────────────────────── */
 
 .inspector {

apps/desktop/src/renderer/components/GraphView.tsx

@@ -6,7 +6,7 @@
 import { useCallback, useEffect, useMemo, useRef, useState, type ReactNode } from 'react';
 import { useQuery, useQueryClient } from '@tanstack/react-query';
 import ForceGraph2D from 'react-force-graph-2d';
-import { X } from 'lucide';
+import { Search, X } from 'lucide';
 import { Icon } from '../ui/icons/Icon';
 import { useGraphData } from '../hooks/useLinks';
 import { noteKeys } from '../hooks/useNotes';
@@ -21,6 +21,13 @@ import {
   type NoteKind,
 } from '../lib/knowledge';
 import { GraphInspector, type GraphActivityEvent, type GraphRelation } from './GraphInspector';
+import {
+  GRAPH_EMPTY_HINT,
+  GRAPH_EMPTY_TITLE,
+  GRAPH_ERROR_HINT,
+  GRAPH_ERROR_TITLE,
+  graphFilterEmpty,
+} from './graphCopy';
 import styles from './GraphView.module.css';
 
 interface GraphViewProps {
@@ -449,21 +456,23 @@ export function GraphView({ selectedNoteId, onOpenNote, onAskNote, onClose }: Gr
   if (error) {
     return stage(
       <div className={`${styles.center} ${styles.centerError}`}>
-        Failed to load graph
-        <p className={styles.centerHint}>Wikilinks will appear here once notes are indexed.</p>
+        {GRAPH_ERROR_TITLE}
+        <p className={styles.centerHint}>{GRAPH_ERROR_HINT}</p>
       </div>
     );
   }
 
   if (graphData.nodes.length === 0) {
     return stage(
       <div className={styles.center}>
-        No notes to map
-        <p className={styles.centerHint}>Create notes and connect them with [[wikilinks]].</p>
+        {GRAPH_EMPTY_TITLE}
+        <p className={styles.centerHint}>{GRAPH_EMPTY_HINT}</p>
       </div>
     );
   }
 
+  const filterEmpty = graphFilterEmpty(query, matchIds ? matchIds.size : null);
+
   return (
     <div className={styles.graph}>
       <div className={styles.stage}>
@@ -501,6 +510,15 @@ export function GraphView({ selectedNoteId, onOpenNote, onAskNote, onClose }: Gr
         </div>
 
         <div ref={setCanvasHost} className={styles.canvasHost}>
+          {filterEmpty ? (
+            <div className={styles.filterEmpty} role="status" aria-live="polite">
+              <span className={styles.filterEmptyIcon} aria-hidden="true">
+                <Icon icon={Search} size={28} />
+              </span>
+              <p className={styles.filterEmptyTitle}>{filterEmpty.title}</p>
+              <p className={styles.filterEmptyHint}>{filterEmpty.hint}</p>
+            </div>
+          ) : null}
           {canvasSize.width > 0 && canvasSize.height > 0 ? (
             <ForceGraph2D
               ref={graphRef}

apps/desktop/src/renderer/components/NoteList.module.css

@@ -198,21 +198,6 @@
   padding: 0;
 }
 
-/* ============================================================================
-   Note List Item Enter Animation
-   ============================================================================ */
-
-@keyframes fade-slide-in {
-  from {
-    opacity: 0;
-    transform: translateY(-8px);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
 /* ============================================================================
    Note List Item
    ============================================================================ */
@@ -223,14 +208,6 @@
   cursor: pointer;
   position: relative;
   transition: background var(--transition-fast);
-  animation: fade-slide-in 150ms ease both;
-  animation-delay: calc(var(--item-index, 0) * 20ms);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .note-list-item {
-    animation: none;
-  }
 }
 
 .note-list-item:hover {
@@ -414,7 +391,8 @@
    ============================================================================ */
 
 @keyframes skeleton-pulse {
-  0%, 100% {
+  0%,
+  100% {
     opacity: 0.4;
   }
   50% {

apps/desktop/src/renderer/components/NoteList.tsx

@@ -1,4 +1,4 @@
-import { useState, useCallback, useEffect, useRef } from 'react';
+import { useState, useCallback, useEffect, useLayoutEffect, useRef } from 'react';
 import {
   Archive,
   Search,
@@ -29,6 +29,8 @@ import { dispatchCommand } from '../hooks/useCommandRegistry';
 import { IconButton } from '../ui/primitives';
 import { noteListNavDirection } from '../utils/noteListKeys';
 import { modAccel } from '../utils/modAccel';
+import { playListEnter, playMotion } from '../motion/gsapRuntime';
+import { elementsForNoteIds, planListEnter } from '../motion/listEnter';
 import type { QuickFilterType } from './sidebar';
 import { NoteListContextMenu } from './NoteListContextMenu';
 import { NotebookPicker } from './NotebookPicker';
@@ -178,12 +180,41 @@ export function NoteList({
   const { data: notebooks = [] } = useNotebookList();
   const { data: notebook } = useNotebook(selectedNotebookId);
   const listItemsRef = useRef<HTMLUListElement | null>(null);
+  const seenNoteIdsRef = useRef(new Set<string>());
+  const prevSelectedIdRef = useRef<string | null>(null);
 
   useEffect(() => {
     const selected = listItemsRef.current?.querySelector('[aria-selected="true"]');
     selected?.scrollIntoView({ block: 'nearest' });
   }, [selectedId]);
 
+  const noteIdsKey = notes.map(n => n.id).join('\0');
+
+  useLayoutEffect(() => {
+    const noteIds = noteIdsKey ? noteIdsKey.split('\0') : [];
+    if (!listItemsRef.current) {
+      if (noteIds.length === 0) seenNoteIdsRef.current = new Set();
+      return;
+    }
+
+    const plan = planListEnter({
+      noteIds,
+      seenIds: seenNoteIdsRef.current,
+    });
+    seenNoteIdsRef.current = new Set(noteIds);
+
+    if (plan.mode !== 'none') {
+      playListEnter(elementsForNoteIds(plan.ids));
+      prevSelectedIdRef.current = selectedId;
+      return;
+    }
+
+    if (selectedId && selectedId !== prevSelectedIdRef.current) {
+      playMotion('list-select', document.getElementById(`note-${selectedId}`));
+    }
+    prevSelectedIdRef.current = selectedId;
+  }, [noteIdsKey, selectedId, isLoading]);
+
   useEffect(() => {
     const onKeyDown = (event: KeyboardEvent) => {
       const direction = noteListNavDirection(event);
@@ -349,11 +380,10 @@ export function NoteList({
             aria-label="Notes"
             aria-activedescendant={selectedId ? `note-${selectedId}` : undefined}
           >
-            {notes.map((note, index) => (
+            {notes.map(note => (
               <NoteListItem
                 key={note.id}
                 note={note}
-                index={index}
                 isSelected={note.id === selectedId}
                 onSelect={onSelect}
                 onTagClick={onTagClick}
@@ -412,7 +442,6 @@ export function NoteList({
 
 interface NoteListItemProps {
   note: NoteWithExcerpt;
-  index: number;
   isSelected: boolean;
   onSelect: (id: string) => void;
   onTagClick: (tag: string) => void;
@@ -421,7 +450,6 @@ interface NoteListItemProps {
 
 function NoteListItem({
   note,
-  index,
   isSelected,
   onSelect,
   onTagClick,
@@ -453,7 +481,6 @@ function NoteListItem({
       role="option"
       aria-selected={isSelected}
       className={sc('note-list-item', isSelected && 'selected')}
-      style={{ '--item-index': Math.min(index, 10) } as React.CSSProperties}
       onClick={() => onSelect(note.id)}
       onContextMenu={e => onContextMenu(e, note)}
       onKeyDown={e => {