Split files over 1000 lines into modules under 700 lines

[ford442]

Summary

• App.tsx (1064 → 675 lines): extracted constants to appConfig.ts, 3D render to components/App3DView.tsx, and 2D render to components/MainLayout.tsx
• hooks/useWebGLOverlay.ts (1075 → 542 lines): extracted ~540 lines of inline GLSL shader strings to hooks/webGLShaders.ts as buildVertexShader() / buildFragmentShader() functions

New files

File	Lines	Contents
appConfig.ts	73	Shader groups, theme options, computeModuleHash, IS_PUBLIC_MODE
hooks/webGLShaders.ts	544	GLSL vertex + fragment shader builders
components/App3DView.tsx	234	3D Studio mode render tree
components/MainLayout.tsx	601	Main 2D layout render tree

Bug fixes during refactor

• Fixed setPan prop: was incorrectly passing setLibPan (the libopenmpt setter) instead of the local React state setter, which would have broken pan state sync
• Fixed MainLayout shaderCatalog prop type to use the proper ShaderMeta interface from storageApi
• Fixed async handler types for handleLibrarySongLoad / onSyncLibrary

Test plan

• Load a .mod/.xm/.s3m/.it file and verify playback works
• Pan slider updates audio panning correctly
• Shader switching still works
• 3D mode (🎬 3D Mode button) renders and exits correctly
• Playlist, library browser, VU meters, metadata panel all visible and functional

https://claude.ai/code/session_01BKN1s4nq125fD1Q3fbSdfS

---

Generated by Claude Code

Summary by CodeRabbit

• Refactor
  • Reorganized application architecture to better separate 3D and 2D rendering logic.
  • Consolidated configuration settings into a centralized module for improved maintainability.
  • Modularized shader generation code for better code organization.

[coderabbitai]

Looking for one thing? Review this PR in Change Stack to search files, summaries, diffs, and code without losing your place.

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 91d25f8c-cca9-4147-a092-b506e2eb1c9b

📥 Commits

Reviewing files that changed from the base of the PR and between 8da2b49 and 9d44f98.

📒 Files selected for processing (6)

• App.tsx
• appConfig.ts
• components/App3DView.tsx
• components/MainLayout.tsx
• hooks/useWebGLOverlay.ts
• hooks/webGLShaders.ts

---

📝 Walkthrough

Walkthrough

This PR refactors the app architecture by consolidating configuration and delegating UI rendering to mode-specific layout components. App.tsx now imports centralized shader/theme config and delegates to App3DView (3D mode) or MainLayout (2D mode). WebGL shader generation is extracted into a dedicated builder module.

Changes

UI Architecture Refactor and Configuration Consolidation

Layer / File(s)	Summary
Configuration module foundation appConfig.ts	Centralizes shader identifiers, theme definitions, and utility functions: DEFAULT_SHADER, SHADER_GROUPS (Square/Circular/Video), AppTheme type, LIGHT_THEMES set, THEME_OPTIONS array, computeModuleHash(), and IS_PUBLIC_MODE computed from URL.
App.tsx refactoring and delegation App.tsx	Consolidates imports from appConfig and bloom preset types. Replaces inline JSX and Studio3D usage with delegating to App3DView (when is3DMode true) or MainLayout (when false), passing full playback/audio/media state and handlers through props.
App3DView component (3D rendering mode) components/App3DView.tsx	Renders Studio3D with embedded Header (including "Audio Engine" diagnostics from syncDebug with color-coded drift/seek status), PatternDisplay (with playback timing, channel data, interaction handlers, bloom preset, and performance refs), Controls (with file/media actions and bloom/color controls), optional MediaOverlay, and optional KeyboardShortcutHelp. Selects WGSL shader filename based on viewMode.
MainLayout component (2D UI layout) components/MainLayout.tsx	Comprehensive 2D layout: Header with Global Controls row (shader selector in non-public mode, theme/audio/lite toggles, palette/steps selectors), main PatternDisplay (keyed by shader, with bloom/night-mode computation), Controls panel (bloom/color/night/CRT toggles), optional SeekBar, panel visibility toggles (meters/metadata/playlist/library), conditional right-side Panel region (MetadataPanel, ChannelMeters), conditional Playlist/LibraryBrowser panels, footer notes, and KeyboardShortcutHelp.
WebGL shader generation extraction hooks/webGLShaders.ts, hooks/useWebGLOverlay.ts	Introduces webGLShaders.ts module exporting buildVertexShader() and buildFragmentShader() that generate parameterized GLSL ES 300 code. Vertex builder computes per-instance cell data visibility and playhead activation (with separate v0.21 vs. duration-tail logic) and supports horizontal/circular layout modes. Fragment builder reconstructs packed note/expression/sustain state, applies pitch-based cosine palette, renders three-emitter lens cap using SDF helpers with glow/fresnel/glass shading, and applies vignette/discard. useWebGLOverlay now imports and calls these builders instead of embedding inline GLSL.

Sequence Diagram

sequenceDiagram
  participant App as App.tsx
  participant Config as appConfig
  participant App3D as App3DView
  participant MainLayout as MainLayout
  participant Header as Header
  participant PatternDisplay as PatternDisplay
  participant Controls as Controls

  App->>Config: import shader/theme config
  App->>App: evaluate is3DMode
  alt 3D Mode
    App->>App3D: render with state/handlers
    App3D->>Header: pass syncDebug diagnostics
    App3D->>PatternDisplay: pass playback/channel/handlers
    App3D->>Controls: pass file/media/bloom controls
  else 2D Mode
    App->>MainLayout: render with full state/handlers
    MainLayout->>Header: Global Controls (shader/theme/audio)
    MainLayout->>PatternDisplay: main display with keying
    MainLayout->>Controls: bloom/night/CRT toggles
    MainLayout->>MainLayout: conditional panels (playlist/library/meters)
  end

Loading

Estimated Code Review Effort

🎯 4 (Complex) | ⏱️ ~45 minutes

Suggested Labels

codex

Poem

🐰 Hops through configs neat and tidy,
Delegates the UI work more widely,
Shaders built in functions fine,
Architecture in its prime! ✨

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/optimistic-keller-OhiNH

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}