feat(settings): add p2p network configuration, theme customizer, live connectivity probing, and fluid ui animations by alicangnll · Pull Request #2357 · anyproto/anytype-ts

alicangnll · 2026-08-27T22:41:56Z

I understand that contributing to this repository will require me to agree with the CLA

Description

This PR introduces a comprehensive set of features and improvements covering P2P Network Configuration, Interactive Mesh Topology Map, Live Socket Connectivity Probing (yamux, quic, tcp, ws), Background Image Caching with 12h Auto-Eviction, Theme & Typography Customization, Smart JSON Merging, Sidebar UI Refinements, and Cross-Platform Installation Documentation (INSTALL.md):

P2P Network Configuration & Node Management (PageMainSettingsNetworkConfig):
- Provides full GUI management for node identity, libp2p multiaddr listener bindings (HostAddr), network cluster IDs (NetworkId), and discovery timeout/ban parameters stored in config.json.
- Adds dedicated management interfaces for Local Listen Addresses (own-addresses.json) and Static & Bootstrap Peers (static-peers.json).
- Includes a 1-click peer identity card with instant clipboard payload export and multiaddr sharing.
- Backend reading/writing of config.json, own-addresses.json, and static-peers.json in active vault storage directory via Electron IPC.
- Labeled un-prefixed transport addresses as Automatic in the protocol dropdown.
Interactive P2P Mesh Topology Map (NetworkTopologyMap):
- Visualizes all configured static & bootstrap peers in an organic, constellation-style SVG mesh graph with interconnected peer links.
- Animated pulse stream lines (linkPulseStream) representing live data packets flowing across reachable peer connections.
- Real-time status indicators on nodes displaying round-trip latency (25ms), transport protocol tags (YAMUX, QUIC, TCP, WS), and offline states.
- Top metrics overview bar tracking Total Peer Nodes, Online Reachability Count, Average Response Time (ms), and Cluster Isolation ID.
- Transport filter buttons (All Transports, Yamux, QUIC, TCP, WS, Online Only) and optional Auto-Ping (30s) background monitoring.
- Interactive Node Inspector card for selected nodes with 1-click address copy, endpoint details, and instant single-node ping testing.
Live Peer Connectivity Probing (yamux, quic, tcp, ws):
- Implemented checkAddressConnectivity IPC method to test live socket reachability and measure round-trip latency to peer multiaddrs and endpoints.
- Supports yamux://, quic://, tcp://, ws://, wss://, IPv6 bracket notation, and multiaddrs (/ip4/.../tcp/.../yamux).
- Visual circular status badges beside each address row:
  - 🟢 Green dot (Online): Shows live round-trip latency (e.g. [YAMUX] 18ms).
  - 🔴 Red dot (Offline): Displays connection error / timeout status.
  - 🟡 Yellow pulsing dot (Testing): Indicates active socket handshake in progress.
- Interactive click-to-retest per row, auto-probe on mount, and a table-header Test Connectivity action.
Background Image Caching & 12-Hour Auto-Eviction (ImageCache):
- Implemented UtilImageCache combining in-memory object URL caching, browser CacheStorage API, and idle pre-decoding to eliminate image loading lag, flickering, and network latency across blocks, covers, and avatars.
- Added automated 12-hour TTL eviction: images not accessed or viewed for 12 hours are automatically cleaned from cache storage and memory on startup and hourly background sweeps.
Sidebar UI & Space Channel Refinements:
- Removed the left vertical white bar indicator from selected channels in the minimal sidebar.
- Ensured all space/channel logos, icons, and buttons are strictly circular (border-radius: 50%).
- Added a clean circular outline ring selection effect around active channels.
Full Application Relaunch & Lifecycle Management:
- Fixed Electron IPC exit argument routing to properly propagate relaunch boolean flags.
- Added a dedicated relaunch IPC method ensuring Anytype, its window manager, and backend daemon processes shut down cleanly and reboot automatically upon confirming "Restart Now".
Smart Non-Destructive JSON Import & Deduplication:
- own-addresses.json & static-peers.json import merges incoming peers with existing ones, appending only new unique addresses without duplicates.
- config.json and theme JSON imports incrementally update new/modified parameters while preserving existing settings.
Theme Customizer & Live Typography Controls (PageMainSettingsThemeCustomizer):
- Built a customizable theming engine covering backgrounds, text, headers, controls, and badge colors.
- Curated one-click color presets (Midnight OLED, Nordic Frost, Tokyo Cyberpunk, Forest Moss, etc.).
- Quick font family chips (Inter, System Native, SF Pro / Roboto, IBM Plex Sans, JetBrains / Menlo, Georgia Serif).
- Dynamic system font enumeration via getSystemFonts IPC scanning macOS and Windows font directories.
- Interactive volume-style range sliders (volumeSlider) with - / + step buttons and real-time size badges for font sizes, line heights, and letter spacing.
- Live typography and UI component preview card.
Build Resolution & Documentation (INSTALL.md):
- Resolved ./service and systemRelations.json import errors during build by tracking src/ts/lib/api/service.ts, dist/lib/json/generated/*.json, and middleware/ in git, plus adding fallback verification in build-electron.js.
- Created comprehensive INSTALL.md with step-by-step setup, compilation, dev mode, hot-deploy, and standalone packaging instructions for macOS, Linux, and Windows.

What type of PR is this? (check all applicable)

Related Tickets & Documents

Associated with anytype-heart PR: anyproto/anytype-heart#3193

Mobile & Desktop Screenshots/Recordings

Interactive P2P mesh topology map with live animated pulse streams, latency gauges, and protocol indicators
Live peer connectivity status badges with latency tooltips (🟢 Online / 🔴 Offline / 🟡 Testing) supporting yamux://, quic://, tcp://, etc.
Theme Customizer with live typography volume sliders and system font selection dropdown
P2P network configuration tabs with smart JSON import/export
Circular space channel logos with round outline selection rings

Added tests?

👍 yes
🙅 no, because they aren't needed
🙋 no, because I need help

Added to documentation?

📜 README.md / INSTALL.md
📓 tech-docs
🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

None.

Add a Network Config settings page and backing Electron APIs to read/write network files, wire it into settings/sidebar/menu, and add a deploy helper. Changes: - electron/ts/api.ts: add readNetworkFiles / writeNetworkFiles for config.json, own-address.json, static-peers.json - src/ts/component/page/main/settings/networkConfig.tsx: new Network Config UI (read/save network files) - src/ts/component/page/main/settings/index.tsx, src/ts/component/sidebar/page/settings/index.tsx, src/ts/lib/util/menu.ts: register the new page in settings/menu/sidebar - scripts/deploy.go: new deploy tool to build/copy dist into an installed Anytype app.asar Enables editing per-account network configs from the app.

This update refreshes the vault/sidebar, toast, button, and settings styling to match the new denser design system. It adds a richer network configuration UI with tabbed config management, import support, peer address parsing, and static/own peer editing, while improving bun auto-install in the Makefile and the ASAR repack flow for macOS reliability.

Add a Theme Customizer settings page with presets, live preview, import/export, save/reset and persistence in localStorage (new component and integration into settings sidebar). Apply stored theme on app startup. Introduce page entrance animation and refine UI interactions (hover/active/transition) for buttons, settings items and cards in SCSS. Display a restart-confirm popup after saving network configuration. Misc: style delete-peer button, set remove icon color, and add menu label for the new Theme Customizer.

Add a new SVG icon component for the settings "style" entry (src/ts/component/util/icons/settings/style.tsx) and register it in src/ts/component/util/icons/settings/index.ts. Exports a React SVG component and registers it as 'settings/style' so the icon can be used by the UI.

Introduce typed theme variables and full typography controls in the Theme Customizer. Adds a `type` field for theme vars, new Font Family & Sizing category, FONT_PRESETS and FONT_SCALE_PRESETS, and UI to apply font families/scale presets. Renames internal state from `colors` to `themeProps`, adjusts apply/import/export/save/reset logic (export version bumped to 2.0), and only shows color pickers for vars typed as 'color'. Also updates live preview copy and layout. Minor SCSS tweaks: caption.alert styling and preset font sample/presetInfo styles.

Standardize and polish UI motion and make config/theme/peer imports more robust. - electron/ts/api.ts: add Api.relaunch helper and normalize exit() params/signals; improve logging and Server.stop call. - scss: introduce unified easing/transition vars and timings (_mixins.scss) and apply smoother shadows, borders, hover/active transforms and transition tuning across menu, popup, sidebar vault, widget (common/object/tree) for subtler, consistent micro-interactions. - src/ts/component/page/main/settings/networkConfig.tsx: make peer JSON import resilient (trim values, accept multiple layouts), merge imported peers/addresses into existing list while deduplicating, and provide clearer toasts. Use 'relaunch' IPC when restarting. - src/ts/component/page/main/settings/themeCustomizer.tsx: merge imported theme with current theme before applying. Reason: smoother UI animations and safer, user-friendly import/merge behavior.

Add a network connectivity checker for peer addresses. Implements electron API checkAddressConnectivity that parses multiaddr/URI (ip4/ip6/dns, tcp/udp, ws/wss, yamux/quic) and attempts a TCP socket connect with a 2.5s timeout, returning reachable/latency/error. Expose usage from renderer and wire UI in networkConfig: support ws/wss, status badges per address, a "Test Connectivity" button, click-to-retest behavior, and live status map. Add styles for .connStatusBadge (.online/.offline/.checking) and a pulsing status animation.

github-actions · 2026-08-27T22:42:08Z

CLA Assistant Lite bot All contributors have signed the CLA ✍️ ✅

Introduce a high-performance image caching utility (src/ts/lib/util/imageCache.ts) that uses CacheStorage, in-memory LRU object-URL caching, pre-decoding and idle-time prefetching. Export ImageCache from util/index.ts and integrate background prefetch calls into CommonStore (fileUrl and imageUrl) so image URLs are warmed automatically. Also tidy up several SCSS files (vault.scss, object.scss, tree.scss) by removing transform/hover animations and replacing some transitions with the $transitionCommon variable to reduce paint/transform effects and rely on simpler opacity/background transitions.

Added documentation for installing

…fallback verification

Add generated JSON files under dist/lib/json/generated: internalRelations.json, internalTypes.json, systemRelations.json, and systemTypes.json. These files contain lists of internal/system relation and type keys used by the build. Also remove the prior .gitignore entries that excluded the generated JSON and delete the per-folder .gitignore so the new files are tracked in the repository.

…opdown

…s, macOS and Linux

…t-Finish wizard

…contrast

alicangnll · 2026-08-28T14:00:33Z

I have read the CLA Document and I hereby sign the CLA

…ies config

…card styling

Adds a new 'Soft Theme' option to the app theme customizer with a dark, blurple-inspired palette. The preset updates the background, surface, text, and accent colors to match a soft dark aesthetic.

Perlsowisdom · 2026-08-31T17:35:33Z

This is awesome! Thanks for all the work you're contributing.

alicangnll added 7 commits August 27, 2026 23:10

alicangnll marked this pull request as draft August 28, 2026 06:35

Update - Fixed some bugs

b41a2a8

Added documentation for installing

alicangnll marked this pull request as ready for review August 28, 2026 06:43

alicangnll added 6 commits August 28, 2026 09:49

fix(build): track generated systemRelations JSONs and add build-time …

57b83d4

…fallback verification

fix(build): track middleware protobuf TypeScript bindings in git

d6f85b4

fix(build): track google protobuf middleware bindings in git

56a2a3b

fix(network): label un-prefixed transport protocol as Automatic in dr…

e71c1fc

…opdown

feat: add interactive Next-Next-Finish installation wizard for Window…

4cbacf8

…s, macOS and Linux

alicangnll marked this pull request as draft August 28, 2026 11:29

alicangnll added 6 commits August 28, 2026 14:31

feat(install): add automatic Bun detection & installation in Next-Nex…

10d56ea

…t-Finish wizard

feat(install): add 1-click install.bat script for Windows

7dc8d1f

feat(install): auto-install Go in install.bat if missing on Windows

156d858

chore: localize install.bat and install.go strings to English

8c0de99

feat(network): add interactive P2P mesh topology map in network settings

223ae9b

fix(topology): smooth line animation loop and fix active filter text …

c54296c

…contrast

alicangnll marked this pull request as ready for review August 28, 2026 13:57

alicangnll added 3 commits August 28, 2026 18:54

feat(media): add P2P sync auto-retry, cache recovery and maxImageRetr…

d0485f4

…ies config

fix(settings): restore clean image block design and align share node …

af01190

…card styling

Add Soft Theme preset

ebfce3a

Adds a new 'Soft Theme' option to the app theme customizer with a dark, blurple-inspired palette. The preset updates the background, surface, text, and accent colors to match a soft dark aesthetic.

Navigation Menu

feat(settings): add p2p network configuration, theme customizer, live connectivity probing, and fluid ui animations - #2357

feat(settings): add p2p network configuration, theme customizer, live connectivity probing, and fluid ui animations#2357
alicangnll wants to merge 24 commits into
anyproto:developfrom
alicangnll:develop

alicangnll commented Aug 27, 2026 •

edited

Loading

Uh oh!

github-actions Bot commented Aug 27, 2026 •

edited

Loading

Uh oh!

alicangnll commented Aug 28, 2026

Uh oh!

Perlsowisdom commented Aug 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

alicangnll commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

What type of PR is this? (check all applicable)

Related Tickets & Documents

Mobile & Desktop Screenshots/Recordings

Added tests?

Added to documentation?

[optional] Are there any post-deployment tasks we need to perform?

Uh oh!

github-actions Bot commented Aug 27, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

alicangnll commented Aug 28, 2026

Uh oh!

Perlsowisdom commented Aug 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

alicangnll commented Aug 27, 2026 •

edited

Loading

github-actions Bot commented Aug 27, 2026 •

edited

Loading