* Add UserProvider to App component and enhance user data fetching logic
- Integrated UserProvider into the App component to manage user state.
- Updated UserProvider to fetch current user data on token availability and handle token expiration by clearing the token on fetch failure.
- Improved user data fetching logic for better error handling and user experience.
* Enhance Telegram connection handling and error management
- Added logic to handle Telegram account mismatch, providing user feedback and resetting connection state.
- Improved user verification during authentication to ensure the logged-in account matches the Telegram account.
- Refactored connection status checks and error handling for better user experience.
- Introduced a method to clear session and disconnect when account mismatch occurs.
- Updated polling mechanism for authentication status to ensure timely updates.
This update improves the robustness of the Telegram connection process and enhances user feedback during authentication failures.
* ran prettier
* Refactor socket and auth state management for user-specific handling
- Updated socket state management to support multiple users by introducing user-specific selectors and actions.
- Refactored connection status handling in the socket service to dispatch user-specific status updates.
- Enhanced onboarding state management to track completion per user, allowing for more granular control.
- Introduced new selectors for socket and auth states to improve readability and maintainability.
- Updated relevant components to utilize the new user-specific state management.
This update improves the application's ability to handle multiple users and enhances the overall user experience during onboarding and socket connections.
* Enhance MTProto client session management and introduce user-specific session handling
- Updated the MTProtoService to manage sessions per user by storing session data under a user-specific key.
- Modified the initialize method to accept a userId parameter, allowing for user-specific session initialization and management.
- Improved session loading and saving logic to ensure proper handling of user sessions.
- Added a utility function to generate session keys based on userId for better maintainability.
This update enhances the application's ability to handle multiple user sessions effectively.
* Refactor Telegram state management for user-specific handling
- Introduced user-specific state management in the Telegram store, allowing for better handling of multiple users.
- Updated selectors to retrieve state based on the current user, improving data encapsulation and reducing global state dependencies.
- Enhanced reducers and thunks to ensure actions are dispatched with user context, maintaining user-specific data integrity.
- Modified persistence configuration to store Telegram state scoped by user, ensuring isolated state management.
This update significantly improves the application's ability to manage multiple user sessions effectively and enhances overall user experience.
* Enhance MTProtoService connection handling with user-specific initialization
- Updated the checkConnection method to accept an optional userId parameter, allowing for user-specific connection initialization.
- Modified the connection logic to ensure proper initialization only occurs when a userId is provided, improving session management.
- Refactored related thunks to use a consistent naming convention for userId parameters, enhancing code clarity.
This update improves the handling of user sessions in the MTProtoService, aligning with recent enhancements in user-specific state management.
* Refactor Telegram connection handling for user-specific management
- Updated the TelegramConnectionModal to utilize user-specific identifiers for connection status and authentication processes, enhancing session management.
- Refactored related components and selectors to ensure userId is consistently passed and utilized, improving clarity and maintainability.
- Enhanced the ConnectionsPanel and ConnectStep to check for saved sessions based on userId, allowing for better handling of multiple user connections.
This update significantly improves the application's ability to manage user-specific Telegram connections and enhances the overall user experience.
* Refactor Telegram connection logic to simplify session management
- Removed unnecessary userId checks and localStorage interactions from ConnectionsPanel and ConnectStep components, streamlining the connection status determination.
- Updated MTProtoService to manage session data through Redux instead of localStorage, enhancing consistency and maintainability.
- Improved session loading and saving logic to focus solely on Redux state, ensuring better integration with user-specific session handling.
This update enhances the clarity and efficiency of the Telegram connection management process, aligning with recent improvements in user-specific state management.
* Update CLAUDE.md to clarify localStorage usage and emphasize Redux for state management
- Revised documentation to discourage the use of localStorage and sessionStorage for app state, advocating for Redux and Redux Persist instead.
- Added guidelines for removing existing localStorage usage and migrating relevant data to Redux.
- Updated service layer documentation to reflect changes in session management, specifying that session data is now stored in Redux rather than localStorage.
- Enhanced clarity on deep link handling and the prevention of infinite reload loops.
This update aligns with recent improvements in user-specific state management and reinforces best practices for state handling.
* Enhance onboarding process with error handling and API integration
- Updated the Onboarding component to include an API call for marking onboarding as complete, with error handling to provide user feedback.
- Refactored the GetStartedStep component to support asynchronous completion handling, including loading state and error messages.
- Introduced a new onboardingComplete method in the userApi service to facilitate the onboarding completion process.
This update improves the user experience during onboarding by ensuring proper error management and feedback.
* Enhance TelegramConnectionModal with socket connection management and improved initialization flow
- Integrated socket connection handling in the TelegramConnectionModal to ensure the socket is connected when the modal opens, enhancing real-time features.
- Refactored the initialization logic to streamline the connection process, including user verification and error handling.
- Introduced a reference to track the QR code flow state, preventing multiple initiations and improving user experience during authentication.
This update improves the reliability of the Telegram connection process and enhances user feedback during the onboarding experience.
* Refactor Telegram connection checks for improved logic consistency
- Updated the ConnectionsPanel and ConnectStep components to refine the logic for determining if a Telegram connection is established, ensuring that both session string and authentication status are required for a valid connection.
- Simplified className definitions in the UI components for better readability and maintainability.
This update enhances the clarity of connection status checks and improves the overall user experience during the onboarding process.
* Refactor Telegram authentication flow and improve error handling
- Simplified the TelegramLoginButton component by removing complex authentication logic and replacing it with a direct link to the Telegram bot for login.
- Enhanced the Login page to consume a login token from the URL, providing better error handling and user feedback during the authentication process.
- Introduced a new API service for consuming login tokens, ensuring secure retrieval of JWT tokens from the backend.
This update streamlines the authentication experience and improves error management, enhancing overall user experience during login.
- Add "Delete All Data" option to settings modal with proper dangerous styling
- Logout option already existed in settings modal
- Remove "Delete All Data" and "Logout" buttons from home page
- Update home page to have only Settings button with clean styling
- Increase modal height from 600px to 800px for better spacing
- All account management actions now centralized in settings modal
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add "View Encryption Key" menu item to SettingsHome between Advanced and Billing
- Include key icon and description matching original Home page implementation
- Remove "View Encryption Key" button from Home page action buttons list
- Remove handleViewEncryptionKey function from Home component
- Improve organization by grouping security options in settings menu
- Clean up Home page layout with fewer action items
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove all browser focus outlines globally with outline: none !important
- Remove all custom focus rings and box shadows from components
- Update global CSS to suppress all focus styling including box-shadow: none
- Remove focus ring styles from Home page action buttons
- Remove focus ring styles from SettingsMenuItem components
- Clean interaction with no visible focus styling on any elements
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
Settings Modal Styling Fixes:
- Convert from light theme to dark glass morphism design
- Update modal container to use fixed height (600px) and glass styling
- Apply dark theme to menu items matching Home page action buttons
- Update profile header with dark background and proper typography
- Fix menu item spacing and borders with proper first/last item handling
Focus Management Fixes:
- Add focus:outline-none to settings modal container to remove unwanted blue outline
- Preventively fix same issue in TelegramConnectionModal
- Maintain accessibility while removing browser default focus styling
Navigation Update:
- Change settings button to navigate to /settings instead of /settings/connections
- Provides better UX by showing main settings menu first
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Change button label to 'Settings' for clarity since it opens the full settings modal
- Update description to reflect comprehensive settings options available
- Better represents the actual functionality of opening the settings modal system
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Add complete settings modal infrastructure with clean white design
- Implement user profile section with Redux integration for user data
- Create settings menu with Connections, Messaging, Privacy, Profile, Advanced, Billing, Logout
- Add connections management panel reusing onboarding components
- Integrate with existing TelegramConnectionModal for connection setup
- Add URL-based routing for /settings and /settings/connections paths
- Update Home.tsx to open settings modal from "Manage Connections" button
- Include proper animations, accessibility, and mobile responsive design
- Follow pixel-perfect design specifications with 520px modal width
- Maintain TypeScript safety and existing code patterns throughout
Features:
• Modal overlay system with backdrop blur and center positioning
• Settings navigation with smooth panel transitions (200ms entry, 250ms slides)
• Connection status display from Redux state with Connect/Disconnect actions
• Profile display with avatar, user name, and email from user slice
• Logout functionality integrated with auth slice clearToken action
• Mobile-first responsive design with full-screen behavior on small screens
• Accessibility features: focus management, ARIA labels, ESC key support
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Changed the initial step in Onboarding from 4 to 1 to reflect the correct starting point.
- Enhanced ConnectStep by adding session management and connection checks for Telegram.
- Introduced a helper function to determine if a saved session exists in localStorage.
- Updated the connection options to disable buttons for already connected accounts and added visual feedback for connected status.
These changes improve the onboarding experience and ensure better handling of account connections.
- Cleaned up whitespace in TelegramConnectionModal for improved code readability.
- Updated import paths in ConnectStep to align with the new asset structure, ensuring consistency across components.
- Enhanced the structure of reducers in the Telegram state management to improve clarity and maintainability.
These changes streamline the codebase and enhance the overall organization of the Telegram integration within the application.
- Introduced a new GmailIcon component for better visual representation of Gmail connectivity.
- Replaced inline SVG in GmailConnectionIndicator with the new GmailIcon component, improving code maintainability and readability.
- Updated import paths for GoogleIcon in ConnectStep to reflect the new asset structure.
These changes enhance the user interface by providing a dedicated icon for Gmail and streamline the codebase for easier future updates.
- Introduced several SVG icons including Binance, MetaMask, Google, Notion, Telegram, and Wallet, enriching the visual assets available for the application.
- Created new React components for ExchangeIcon, GoogleIcon, and WalletIcon, providing reusable icon components with customizable class names.
- Added GmailConnectionIndicator component to display Gmail connection status, improving user feedback on connectivity.
- Updated Home component to integrate GmailConnectionIndicator alongside existing TelegramConnectionIndicator, enhancing the user experience with real-time connection indicators.
These changes improve the application's visual appeal and user interaction by providing clear indicators and a variety of icons for different functionalities.
- Introduced TelegramConnectionIndicator component to display real-time connection status to Telegram, enhancing user feedback.
- Integrated TelegramConnectionIndicator into the Home component, providing users with immediate visibility of their Telegram connection status.
- Updated App component to include TelegramProvider, ensuring proper context for the new connection indicator.
These changes improve the user experience by providing clear indications of Telegram connectivity within the application.
- Enhanced the TelegramConnectionModal to provide better management of the 2FA password input process, including timeout handling and improved error messaging.
- Updated MTProtoService to ensure proper handling of SESSION_PASSWORD_NEEDED errors, allowing the password callback to manage authentication flow more effectively.
- Added logging for password resolution and authentication status checks to improve visibility during the connection process.
These changes enhance the reliability and user experience of the Telegram authentication process, ensuring smoother transitions and clearer feedback during authentication steps.
- Removed UserProvider from the App component, simplifying the structure and relying on the useUser hook for user data management.
- Updated Home component to utilize the useUser hook for fetching user information, improving user experience by displaying the user's first name.
- Refactored Redux store configuration to conditionally include redux-logger in development mode, enhancing debugging capabilities.
- Introduced IS_DEV constant in the config utility to streamline environment checks.
These changes improve the application's architecture by enhancing user data management and refining the development experience.
- Integrated Redux state management into the Onboarding component by dispatching the setOnboarded action upon completion.
- Updated authSlice to include isOnboarded state, allowing for tracking of onboarding status.
- Modified the Redux store configuration to persist the onboarding status alongside the token, improving user experience and state consistency.
These changes streamline the onboarding process and enhance state management for user authentication.
- Added Redux Toolkit for managing authentication state, replacing Zustand for token handling.
- Implemented authSlice for token management, including setting and clearing tokens with localStorage synchronization.
- Refactored components (Login, Home, TelegramLoginButton) to utilize Redux for token management, enhancing state consistency.
- Updated App component to include Redux Provider and PersistGate for state persistence.
- Removed Zustand-based authStore and socketStore, streamlining the state management approach.
These changes improve the application's architecture by centralizing state management with Redux, enhancing maintainability and scalability.
- Replaced phone number input handling with JWT token retrieval from URL query parameters.
- Implemented useEffect to store the token in Zustand auth store and navigate to onboarding after successful login.
- Removed unused phone number input and Telegram authentication logic for a cleaner interface.
- Added loading animation to indicate login processing.
These changes enhance the login experience by simplifying the authentication process and improving user feedback during login.
- Introduced Zustand for managing authentication state, including token storage and user session handling.
- Updated TelegramLoginButton and Home components to utilize the new auth store for setting and clearing tokens.
- Enhanced the desktop deep link listener to store session tokens in the Zustand store, ensuring consistent state management.
- Refactored localStorage interactions for session tokens to improve backward compatibility.
These changes streamline the authentication process and improve state management across the application.
- Introduced a new TelegramLoginButton component to handle user authentication via Telegram.
- Replaced the previous Telegram login button implementation in the Welcome component with the new TelegramLoginButton for improved modularity and code clarity.
- Updated configuration to include TELEGRAM_BOT_ID for seamless integration with the Telegram authentication flow.
These changes enhance the user experience by providing a dedicated component for Telegram login, streamlining the authentication process.
- Updated the Welcome component to handle Telegram login via a direct URL opening instead of navigation.
- Removed the handleBack function from the Onboarding component to simplify navigation logic.
- Added a new AnalyticsStep component to allow users to choose their data sharing preferences during onboarding.
These changes aim to streamline the authentication process and improve user engagement with privacy options.
- Modified the description in the ConnectionIndicator component for clearer messaging.
- Refactored button styles in the Home component to enhance visual consistency and user interaction.
- Removed the AnalyticsStep component to streamline the onboarding process.
These changes aim to improve user clarity and engagement throughout the application.
- Introduced a new LottieAnimation component to handle Lottie animations in the onboarding flow.
- Updated the Onboarding component to include Lottie animations for each step, enhancing visual engagement.
- Added multiple Lottie animation files to the public/lottie directory for use in onboarding steps.
- Adjusted the ConnectStep and GetStartedStep components to improve messaging and user experience.
These changes aim to create a more dynamic and engaging onboarding experience for users, utilizing animations to illustrate key steps in the process.
- Introduced a new TelegramConnectionModal component to facilitate user login via QR code and two-factor authentication.
- Updated ConnectStep to manage the modal's visibility and handle completion of the Telegram connection process.
- Enhanced user experience by providing clear steps for connecting to Telegram during onboarding.
These changes aim to streamline the onboarding process by offering a seamless connection experience for Telegram users.
- Changed background color and border styles for improved visual consistency.
- Updated messaging to emphasize that all data is stored privately and encrypted, enhancing user trust in the application.
These changes aim to strengthen user confidence during the onboarding process by clearly communicating privacy measures.
- Moved the openUrl function to a new utility file for better organization and reusability across components.
- Updated import paths in Home and GetStartedStep components to reflect the new location of the openUrl function.
- Simplified error handling in the handleStartCooking function by removing unnecessary try-catch block.
These changes enhance code maintainability and streamline the process of opening URLs in the application.
- Changed the title in index.html to "AlphaHuman" for better branding.
- Introduced a new ConnectionIndicator component to provide real-time connection status updates in Home and GetStartedStep pages.
- Updated Home and GetStartedStep components to include the ConnectionIndicator, improving user awareness of their connection status and enhancing the onboarding experience.
- Optimized primary color definitions in tailwind.config.js for better visibility on dark backgrounds.
- Updated text in the Welcome, Connect, Features, Get Started, and Privacy steps to improve clarity and user engagement.
- Adjusted button labels to create a more inviting and action-oriented experience for users.
These changes aim to enhance the overall onboarding experience, ensuring users have a clear understanding of the application while maintaining a visually appealing design.
- Adjusted button styles and text in the FeaturesStep and PrivacyStep components to enhance clarity and user experience.
- Updated titles and descriptions across onboarding steps to better communicate the features and privacy measures of AlphaHuman.
- Modified button text to create a more engaging call-to-action for users.
These changes aim to streamline the onboarding process, making it more intuitive and appealing while emphasizing the application's key features and privacy commitments.
- Added a new FeaturesStep component to showcase key features of AlphaHuman.
- Updated the Onboarding component to include the new FeaturesStep, increasing total steps from 4 to 5.
- Rearranged the sequence of steps to enhance user engagement and clarity.
- Improved messaging in the ConnectStep and GetStartedStep for better user understanding.
These changes aim to provide a more comprehensive onboarding experience, highlighting the features of the application while ensuring a smooth transition through the steps.
- Introduced new connection options for Google, Notion, Telegram, Web3 Wallet, and Crypto Trading Exchanges.
- Implemented a 'coming soon' feature to disable buttons for options not yet available.
- Updated messaging to clarify the importance of connecting accounts for a personalized experience.
- Added new icons for Binance, Google, Notion, Telegram, and Metamask to enhance visual appeal.
These changes aim to provide users with a clearer and more engaging onboarding experience while connecting their accounts.
- Modified button styles in the Onboarding component for a cleaner look.
- Changed default selected option in AnalyticsStep from 'maximumPrivacy' to 'shareAnalytics' to better reflect user preferences.
- Updated titles and descriptions in AnalyticsStep and GetStartedStep for clearer messaging and enhanced user understanding.
- Improved overall layout and text for a more cohesive onboarding experience.
These changes aim to streamline the onboarding process, making it more intuitive and engaging for users.
- Adjusted padding and text styles in PrivacyFeatureCard for better readability and alignment.
- Updated privacy feature titles with icons to enhance visual appeal and user engagement.
- Modified layout in Step1Privacy to improve spacing and overall design consistency.
- Streamlined button styles for a more cohesive user experience.
This update enhances the onboarding process by making privacy features more visually engaging and easier to read, aligning with the focus on user security and clarity.
- Introduced PrivacyFeatureCard component to display privacy features with titles and descriptions.
- Updated Step1Privacy to utilize PrivacyFeatureCard, showcasing key privacy features in the onboarding process.
- Enhanced layout and messaging for improved user understanding of privacy protections.
This update enriches the onboarding experience by clearly communicating privacy features, aligning with the overall focus on user security and engagement.
- Replaced Step1Phone with Step1Privacy, introducing a new privacy-focused onboarding step.
- Added Step2Analytics and Step3Connect components to enhance user engagement and data privacy options.
- Updated routing in App.tsx to reflect new onboarding structure, ensuring a seamless transition between steps.
- Removed Step4Connect and replaced it with Step4GetStarted, which guides users to interact with the Telegram bot.
- Enhanced overall onboarding experience with clearer messaging and streamlined navigation.
This update improves the onboarding process, emphasizing user privacy and engagement while maintaining a cohesive design.
- Introduced a new TypewriterGreeting component that displays greetings with typing and deleting animations.
- Updated the Welcome page to utilize the TypewriterGreeting component, enhancing user engagement with dynamic text.
- Modified the greetings array to include additional crypto-themed messages.
This update improves the visual appeal and interactivity of the Welcome page, creating a more engaging user experience.
- Updated onboarding steps to remove background patterns and enhance layout consistency.
- Modified text styles for better readability and accessibility, including opacity adjustments.
- Improved button styles for Google and Microsoft account connections.
- Enhanced privacy and security messaging across onboarding steps.
- Streamlined the overall design to align with the dark mode theme and glass morphism aesthetics.
This update enhances the onboarding flow, making it more visually appealing and user-friendly while maintaining a focus on privacy and security.
- Created a new .env file to store the Telegram bot username.
- Added new background images (bg-dark.png, bg.jpg, bg.png) for enhanced visuals.
- Updated App.css and index.css to implement dark mode styles, including color adjustments and background changes.
- Modified Home.tsx to include a button that opens the Telegram bot link.
- Enhanced the configuration file to include the Telegram bot username.
This update improves the user interface with a dark mode theme and integrates Telegram functionality for better user engagement.
- Introduced @tauri-apps/plugin-deep-link for handling deep link events
- Implemented setup for deep link listener in main application entry
- Enhanced Login page to support Telegram authentication via deep links
- Created utility functions for building and handling deep links
- Added configuration for backend URL management
- Updated Tauri configuration to support deep link plugin
This update enhances the user experience by allowing seamless transitions between web and desktop applications through deep linking.
- Add React Router setup with comprehensive routing structure
- Create Welcome page with crypto-themed humor and engaging greetings
- Implement Login page with phone number input (formatted) and Telegram authentication options
- Build 3-step onboarding flow: Privacy settings, Analytics preferences, Account connection
- Add Privacy page with Enterprise-Grade Security messaging and certifications (SOC 2, CASA)
- Create Analytics page with privacy controls (Securely Share vs Maximum Privacy)
- Implement Connect Account page with Google/Microsoft integration options
- Add beautiful Home page with weather card design, tropical beach theme, and personalized greeting
- Include dummy data and mobile-first responsive design throughout
- Maintain glass morphism design system consistency across all components
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
