Add Constellation view for visualizing memos as an interactive graph

[ksaltnes]

Summary

This PR introduces a new "Constellation" view that visualizes memos as an interactive force-directed graph, where each memo is represented as a glowing star and connections between memos are shown as constellation lines. This provides a novel way to explore and understand relationships between memos.

Key Changes

New Components

• ConstellationView: Main component that renders the force-directed graph using react-force-graph-2d

  • Custom node rendering with glowing star effects and brightness based on recency
  • Custom link rendering for constellation-style connections
  • Tag-based clustering with radial force layout
  • Interactive tooltips showing memo content and tags on hover
  • Zoom and pan controls with fit-to-view functionality

• ConstellationControls: Control panel for the visualization

  • Zoom in/out/fit buttons
  • Tag filtering with visibility toggles
  • Stats display (memo and link counts)
  • Expandable tag legend with color coding

• Constellation page: Full-screen view for the constellation visualization with memo loading

Utilities

• utils.ts: Graph building and visualization utilities
  • buildConstellationGraph(): Constructs nodes and links from memos with tag-based filtering
  • computeStarSize(): Calculates node size based on content length, reactions, and pinned status
  • computeStarBrightness(): Determines brightness based on memo recency (exponential decay)
  • tagToColor(): Deterministic color assignment from tag names using hash function
  • getUniqueTags(): Extracts and counts unique tags across memos
  • hexToRgb(): Color conversion utility

Styling

• constellation.css: New stylesheet with
  • Nebula-inspired night sky background with radial gradient
  • Twinkling background stars animation (two layers with offset timing)
  • Sparkle animation for pinned memos
  • Tag color dot styling

Integration

• Added "Constellation" layout option to view store alongside LIST and MASONRY
• Added constellation route to router
• Updated MemoDisplaySettingMenu to include constellation layout option
• Added constellation navigation link to HomeSidebar with sparkles icon
• Added i18n support for "constellation" label
• Applied sparkle animation styling to pinned memo indicators

Security & Quality Improvements

• Added password minimum length validation (8 characters) in user creation
• Disabled debug mode in production (echoServer.Debug = false)
• Disabled gRPC tracing in production (grpc.EnableTracing = false)
• Implemented CORS configuration with origin validation (dev-only permissive, prod-only same-origin)
• Added path traversal attack prevention in resource blob saving
• Added HTTP timeout (10s) to OAuth2 client
• Fixed resource leak in webhook plugin (added defer resp.Body.Close())

Implementation Details

• Uses nebula-inspired color palette (14 colors) for tag-based node coloring
• Star size ranges from 3-12 based on content length, reactions, and pinned status
• Star brightness decays exponentially with age (half-life ~14 days)
• Force simulation uses custom clustering force to group nodes by primary tag
• Supports filtering memos by visible tags with toggle functionality
• Memo references (REFERENCE relation type) are rendered as constellation links
• Untagged memos are shown in silver/white color

https://claude.ai/code/session_018iYDVMmBxJLWBvqugc6tNe

[chatgpt-codex-connector]

💡 Codex Review

Here are some automated review suggestions for this pull request.

Reviewed commit: 39b221c0ef

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

• Open a pull request for review
• Mark a draft as ready
• Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

[chatgpt-codex-connector]

Handle missing current user before leaving loading state

When /constellation is opened without an authenticated user (e.g., public instances where disallowPublicVisibility is false and the route is entered directly), the effect exits early and never updates loading, so the page stays on the spinner forever instead of showing empty state or redirecting. This is a user-visible dead-end introduced by the new route and should explicitly handle the unauthenticated case.

Useful? React with 👍 / 👎.