Implement shared packages/ui for code reuse between web and pro-web apps

[coderabbitai]

Context

Following the architectural transformation in PR #423 that separated the platform into dual-app architecture ( and ), we've identified significant code duplication and synchronization issues that need to be addressed.

Problem

The current dual-app structure has created maintenance overhead:

1. Code Duplication: 181 vs 190 component files with customizations between apps
2. Missing Features: Pro-web is missing onboarding elements that exist in the main web app
3. Synchronization Issues: Bug fixes and improvements made to one app are not automatically applied to the other
4. Layout Improvements: Pro-web has Thread Pop-up layout improvements that should be available in both apps

Solution

Create a shared packages/ui package that both apps can consume, containing:

Core Shared Components

• Onboarding Elements: CustomNextStepCard, OnboardingCard, and related components
• Header Components: Currently differ between apps but should be unified
• Common UI Primitives: Buttons, inputs, modals, etc.
• Thread Components: Including the improved Thread Pop-up layout from pro-web
• Shared Business Logic: Common utilities and helpers

Benefits

• ✅ Eliminate code duplication
• ✅ Ensure feature parity between apps
• ✅ Single source of truth for bug fixes and improvements
• ✅ Maintain architectural separation while sharing UI components
• ✅ Simplified maintenance and development workflow

Implementation Steps

1. Create packages/ui package structure
2. Extract shared components starting with:
   • Onboarding components (missing in pro-web)
   • Thread popup improvements (from pro-web to web)
   • Header components standardization
3. Update both apps to consume shared components
4. Establish build/bundling configuration for the UI package
5. Update development workflows and documentation

References

• Origin PR: Feat pro layout | @coderabbitai #423 (Feat pro layout)
• Discussion: https://github.com/bitcashorg/masterbots/pull/423#issuecomment-[COMMENT_ID]
• Architectural Analysis: Identified in comprehensive review of dual-app structure

Acceptance Criteria

• packages/ui package created with proper TypeScript configuration
• Onboarding components available in both apps
• Thread popup improvements synchronized between apps
• Header components unified across both apps
• Both apps successfully consume shared UI components
• Build processes updated for monorepo UI package consumption
• Documentation updated for shared component usage

This implementation will significantly improve the maintainability of the dual-app architecture while preserving the benefits of domain separation.