Add package-lock.json and yarn.lock to .gitignore to prevent tracking of auto-generated dependency lock files that can cause merge conflicts and are environment-specific.
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- CLAUDE.md: Add settings modal system to recent changes and component structure
- .claude/rules/08-frontend-guide.md: Update project structure with settings components
- .claude/rules/15-settings-modal-system.md: Add comprehensive documentation for new modal system
Documentation covers:
• Complete settings modal architecture with URL-based routing
• Component structure and file organization in src/components/settings/
• Design specifications for clean white modal (520px width, backdrop blur)
• Redux integration patterns for auth, user, and telegram state
• Connection management panel with status indicators and actions
• Mobile responsiveness and accessibility features
• Development guidelines for adding new settings panels
• Performance considerations and code splitting patterns
🤖 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>
- Introduced `apiCastHelpers.ts` to centralize type casting functions for Telegram's complex union types, improving type safety and code clarity.
- Updated multiple Telegram tools to utilize these helpers for casting input entities, enhancing maintainability and consistency across the codebase.
- Modified `apiResultTypes.ts` to refine type definitions, ensuring better integration with the Telegram API.
These changes streamline type handling in Telegram MCP tools, facilitating improved development practices and reducing the risk of type-related errors.
- 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.
- Updated ApiPhoto interface in apiResultTypes.ts to require accessHash and fileReference properties, enhancing type safety.
- Modified getContactIds, getMediaInfo, getRecentActions, getUserPhotos, listTopics, and subscribePublicChannel tools to utilize type casting for better type handling and clarity.
- Ensured consistent handling of input entities across multiple tools by using 'unknown' type casting.
These changes strengthen the reliability and maintainability of the Telegram MCP tools, facilitating better integration with the Telegram API.
- Created CLAUDE.md to provide comprehensive guidance on the project, including architecture, commands, and environment variables.
- Introduced apiResultTypes.ts to define TypeScript interfaces for various API responses from the Telegram MTProto API, enhancing type safety and clarity in tool implementations.
- Updated multiple Telegram MCP tools to utilize the new type definitions, improving consistency and maintainability across the codebase.
These changes establish a solid foundation for documentation and type safety, facilitating better development practices and integration with the Telegram API.
- Removed MCPProvider from App.tsx to streamline the component hierarchy.
- Added cleanup functionality for the Telegram MCP server in SocketProvider to ensure proper resource management on socket disconnection.
- Introduced a new cleanup function in the Telegram MCP tools to enhance server management.
These changes enhance the overall structure of the application and improve resource handling within the Telegram MCP integration.
- Replaced instances of BigInt with the 'big-integer' library across multiple Telegram tools, ensuring uniformity in handling large integers.
- Updated type casting for input entities and user IDs to improve type safety and maintainability.
- Enhanced overall code clarity by standardizing import statements and ensuring consistent use of type casting practices.
These changes strengthen the reliability and consistency of the Telegram MCP tools, facilitating better integration with the Telegram API.
- Developed various tools for managing user interactions, including adding, deleting, and blocking contacts, as well as managing chat drafts and polls.
- Enhanced error handling and input validation across all tools, ensuring clear feedback for invalid inputs and operational errors.
- Improved logging and error formatting to streamline error management and enhance the reliability of user and chat operations.
These updates significantly enhance the Telegram MCP tools, providing comprehensive functionalities for user and chat management while ensuring a smooth user experience through improved error handling and validation.
- Replaced BrowserRouter with HashRouter in App.tsx for better routing management.
- Enhanced type safety in multiple Telegram tools by standardizing string and number checks.
- Updated return statements in various tools to ensure consistent formatting of response content.
- Improved overall code clarity by unifying import statements and ensuring consistent use of double quotes.
These changes enhance the maintainability and reliability of the Telegram MCP tools, facilitating better integration with the Telegram API.
- Updated multiple Telegram tools to cast input entities and chat IDs using 'unknown' for improved type safety.
- Replaced instances of BigInt with the 'big-integer' library for consistent handling of large integers across tools.
- Enhanced overall code clarity and maintainability by ensuring uniform type casting practices.
These changes strengthen the type safety and reliability of the Telegram MCP tools, facilitating better integration with the Telegram API.
- Developed various Telegram tools for managing chats, including archiving, unarchiving, muting, and unmuting chats, as well as inviting users to groups and managing chat photos.
- Enhanced user management capabilities with tools for banning, unbanning, promoting, and demoting users in groups and channels.
- Integrated robust error handling and input validation across all tools, ensuring clear feedback for invalid inputs and operational errors.
- Improved logging and error formatting to streamline error management and enhance the reliability of chat and user operations.
These updates significantly enhance the Telegram MCP tools, providing comprehensive functionalities for chat and user management while ensuring a smooth user experience through improved error handling and validation.
- Refactored multiple Telegram tools to replace the notImplemented function with actual implementations for deleting, editing, forwarding, pinning, unpinning, and marking messages as read.
- Added input validation for message IDs and chat IDs, ensuring robust error handling and user feedback for invalid inputs.
- Integrated logging and error formatting to enhance error management across all tools, improving the overall reliability of message operations.
- Implemented functionality to retrieve message history and context, providing users with better access to chat information.
These changes significantly enhance the Telegram MCP tools, enabling comprehensive message management capabilities while ensuring a smooth user experience through improved error handling and validation.
- Added MCPProvider to manage the initialization and updates of MCP servers within the SocketProvider context.
- Introduced utility functions for handling typed values from MCP tool arguments, improving input validation across various tools.
- Updated TelegramMCPServer to include enhanced logging and type safety for tool handling.
- Refactored multiple Telegram tools to utilize the new argument handling functions, ensuring consistent input processing and error management.
These changes enhance the overall structure and functionality of the Telegram MCP integration, providing a more robust framework for managing Telegram interactions.
- Introduced core components for Telegram MCP integration, including server management, API helpers, and tool action parsers.
- Implemented various tools for user and chat management, such as adding contacts, archiving chats, and sending messages.
- Created utility functions for handling Telegram-specific actions and responses, improving interaction with the Telegram API.
- Defined types and context for better type safety and clarity in tool implementations.
These changes establish a comprehensive framework for Telegram MCP interactions, enhancing the application's capabilities in managing Telegram functionalities.
- Introduced error handling utilities in errorHandler.ts, including a structured error logging mechanism and a function for generating error codes.
- Added a logger module in logger.ts for standardized logging with a [MCP] prefix.
- Implemented validation utilities in validation.ts to ensure proper input handling for MCP tools, including ID validation and error management.
- Created transport.ts to manage Socket.IO communication, facilitating interaction between frontend and backend MCP components.
- Defined shared types in types.ts to standardize data structures used across MCP modules.
- Updated index.ts to export new modules, ensuring a cohesive structure for MCP integration.
These changes lay the groundwork for a robust MCP framework, enhancing error management, logging, and communication capabilities within the application.
- 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.
- Reorganized Telegram-related Redux logic by moving the telegramSlice functionality into a dedicated directory structure, enhancing maintainability.
- Created separate files for reducers, thunks, and types, improving code organization and clarity.
- Implemented additional asynchronous actions for initializing and connecting to Telegram, along with robust error handling for authentication and message fetching.
- Updated imports across components to reflect the new structure, ensuring consistency and reducing potential import errors.
These changes streamline the Telegram integration within the application, making it easier to manage and extend in the future.
- Introduced TelegramProvider to manage the Telegram MTProto connection, handling initialization and connection status updates.
- Refactored TelegramConnectionModal to remove unused authStatus selector, streamlining the component.
- Enhanced MTProtoService with FLOOD_WAIT handling for connection checks and message sending, improving reliability during Telegram interactions.
- Updated telegramSlice to prevent concurrent authentication checks, optimizing performance during user authentication.
These changes enhance the application's ability to manage Telegram connections effectively, providing a smoother user experience during authentication and interaction.
- 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.
- Updated TelegramConnectionModal to handle authentication checks more robustly, allowing the QR code flow to continue even if the authentication status check fails.
- Improved error handling in checkAuthStatus to prevent failures from blocking the authentication process, ensuring a smoother user experience.
- Added logging for better visibility into authentication status and errors during the connection process.
These changes improve the reliability of the Telegram connection flow and enhance user feedback during authentication.
- Modified Vite configuration to include 'os' in node polyfills and added resolution aliases for better compatibility with browser environments.
- Enhanced TelegramConnectionModal by implementing a countdown timer for QR code expiration, improving user feedback during authentication.
- Refactored modal structure for better accessibility and responsiveness, ensuring a smoother user experience.
These changes improve the application's integration with Telegram and enhance the overall user interface during the authentication process.
- Introduced polyfills for Node.js globals (Buffer, process, util) to support Telegram package functionality in the browser.
- Updated Vite configuration to include node polyfills, ensuring compatibility with Node.js APIs.
- Enhanced TelegramConnectionModal to manage connection states, including loading and error handling, improving user experience during authentication.
- Implemented QR code generation and handling for Telegram login, with robust error management and user feedback.
These changes establish a solid foundation for Telegram integration, enhancing the application's ability to handle real-time communication and user authentication effectively.
- Integrated telegramReducer into the Redux store with a custom persist configuration to manage Telegram-related state.
- Created telegramSelectors for accessing various pieces of Telegram state, including connection status, authentication, chats, messages, and threads.
- Implemented selectors for filtering and ordering chats and messages, enhancing the application's ability to manage and display Telegram data effectively.
These changes establish a comprehensive framework for managing Telegram state within the application, improving user experience and data handling.
- Introduced MTProtoService for managing Telegram client initialization, connection, and message handling.
- Created telegramSlice for Redux state management, including connection and authentication states, user data, chats, messages, and threads.
- Implemented asynchronous actions for initializing the Telegram client, connecting, checking authentication status, and fetching chats and messages.
- Enhanced configuration utility to include Telegram API credentials for improved integration.
These changes establish a robust foundation for Telegram functionality within the application, enhancing user experience and state management.
- Updated SocketProvider to ensure the socket disconnects only when the app unmounts and no valid token exists, preventing unnecessary disconnections during re-renders.
- Enhanced logging for socket connection and disconnection events to provide better insights into socket state management.
- Refactored socket connection options in SocketService for improved reliability and security, including explicit handling of token in the handshake.
These changes enhance the application's real-time communication capabilities and improve the overall management of socket connections.
- Added console logs in SocketProvider for token connection and disconnection events, improving debugging visibility.
- Updated SocketService to include detailed logging for connection attempts, token changes, and error handling, enhancing traceability during socket operations.
- Refactored socket connection logic to ensure proper handling of existing connections and improved error messaging for authentication failures.
These changes improve the application's real-time communication capabilities and provide better insights into socket connection states.
- 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.
- Introduced UserProvider to automatically fetch user data when a JWT token is available, enhancing user experience by ensuring data is readily accessible.
- Created useUser hook for accessing user data and managing loading states, streamlining the process of fetching and utilizing user information.
- Implemented userSlice for managing user state in Redux, including actions for fetching and clearing user data, improving state management consistency.
- Added apiClient for handling API requests, including error handling and authentication, to facilitate communication with the backend.
These changes enhance the application's user data management and improve the overall architecture by integrating user state with Redux.
- Replaced direct route definitions in the App component with a new AppRoutes component for improved organization and maintainability.
- Introduced SocketProvider to manage socket connections based on JWT token, enhancing real-time communication capabilities.
- Updated the useSocket hook to rely on Redux state for connection status, streamlining socket management.
These changes enhance the application's architecture by separating concerns and improving the overall structure of routing and socket management.
- Updated the App component to utilize PublicRoute and ProtectedRoute components for managing access to different pages based on authentication and onboarding status.
- Introduced a new DefaultRedirect component to handle redirection logic based on user state, improving user experience by directing users to the appropriate page.
- Cleaned up route definitions for better clarity and maintainability.
These changes enhance the routing structure and improve the overall navigation flow within the application.
- 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.
- Introduced a utility function to check if the application is running in a Tauri desktop environment.
- Updated the deep link URL handling to use Tauri's invoke method for token exchange, with a fallback to the fetch API for browser environments.
- Added conditional setup for deep link listeners to ensure they are only active in Tauri, improving code clarity and functionality.
These changes improve the application's adaptability to different environments and streamline the authentication process for desktop users.
- Removed localStorage interactions for session tokens and user data in the TelegramLoginButton and authSlice, enhancing security and simplifying the codebase.
- Updated the desktop deep link listener to eliminate localStorage usage for user data, streamlining the authentication process.
- Adjusted the Redux store configuration to remove custom storage for backward compatibility, focusing on a cleaner state management approach.
These changes enhance the application's architecture by centralizing state management and improving maintainability.
- 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 a new Zustand store for managing socket connection status and socket ID, improving state management for real-time communication.
- Updated the ConnectionIndicator component to utilize the socket store for dynamic status updates, allowing for better integration with the socket connection state.
- Enhanced the SocketService class to update the socket connection status during various connection events, ensuring accurate status reporting.
- Refactored the TelegramLoginButton component to clarify JWT token handling in comments, improving code readability.
These changes enhance the application's real-time capabilities and provide a more robust user experience by accurately reflecting connection states.
- Introduced a new useSocket hook for managing Socket.IO connections in React components, providing methods for emitting and listening to events.
- Created a socketService class to handle the Socket.IO connection, including automatic reconnection and event management.
- Implemented token-based authentication for socket connections using the Zustand auth store, ensuring secure communication with the server.
- Added event handlers for connection status and error management to enhance reliability.
These changes enable real-time communication capabilities in the application, improving user interaction and responsiveness.
- 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.
Replace browser fetch() with Rust invoke() for token exchange to bypass
CORS restrictions. Fix deep link listener by removing premature __TAURI__
guard (not available at module load), using lazy dynamic import instead.
Add deepLinkHandled localStorage flag to prevent infinite reload loops
from getCurrent() re-delivering the same URL after navigation. Add
backend auth implementation guide and platform-specific deep link docs.
Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
