feat: add diagram support with Mermaid.js and optimize notes list per…

[typelets]

Summary

Adds Mermaid.js diagram rendering to mobile app with pinch-to-zoom support and fixes critical
scroll performance issues in notes list.

Problem

Mobile notes list had severe scroll jank due to:

• Cache clearing on every notes update causing expensive HTML stripping recalculations
• Animated.FlatList with useNativeDriver: false adding overhead
• Each list item subscribing to theme context via useTheme() hook
• Progressive decryption updates causing scroll interruptions

Additionally, diagram notes from web app were not rendering on mobile.

Solution

Diagram Support

• Integrated Mermaid.js for diagram rendering
• Added pinch-to-zoom functionality with viewport controls (0.5x-5x)
• Disabled parent ScrollView for diagrams to allow WebView gesture handling
• Theme-aware rendering (dark/light mode support)
• Error handling for Mermaid render failures

Performance Optimizations

• Removed cache clearing - Critical fix that was forcing recalculations on every update
• Switched to regular FlatList - Eliminated useNativeDriver: false overhead
• Added getItemLayout - Enables instant scroll with fixed item heights
• Theme props instead of hook - Pass colors as props to avoid context subscriptions
• Limited preview length - Cap at 200 characters to reduce HTML stripping cost
• Optimized decryption - Single UI update after parallel decryption vs batch updates
• Smart reload skip - Skip full reload on navigation back if notes already decrypted
• Memoized context - Theme context value memoized to prevent app-wide re-renders

Performance Impact

• Scroll performance: 3-5x faster with eliminated jank
• Initial render: Notes list shows immediately with skeletons
• Decryption: Background parallel processing with single UI update
• Memory: Persistent cache reduces recalculations

Testing

• Diagram notes render correctly from web app
• Pinch-to-zoom works on diagrams
• Regular notes scroll smoothly without jank
• Fast scrolling doesn't cause freezing
• Navigation back doesn't flash skeletons
• Dark/light theme switching works
• Lint and type-check pass

Technical Details

• NoteListItem: Removed useTheme() hook, simplified React.memo to default comparison
• useNotesLoader: Changed to parallel decryption with single update (was batch-by-batch)
• NoteContent: Added Mermaid.js integration, memoized HTML generation with 18 dependencies
• ViewNote: Conditionally disable scroll (scrollEnabled={note.type !== 'diagram'})
• Theme: Added useMemo to context value with proper dependency array
• types.ts: Added type?: 'note' | 'diagram' | 'code' to Note interface"

[github-actions]

🎉 This PR is included in version 1.36.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀