- Changed connected services to show red "Disconnect" button instead of green "Connected" badge
- Provides clearer action-oriented interface for managing connections
- Green status dot already indicates connection status visually
- Maintains existing styling patterns with red disconnect theme
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Created 5 new settings panels with matching ConnectionsPanel structure
- Added MessagingPanel, PrivacyPanel, ProfilePanel, AdvancedPanel, BillingPanel
- All panels use SettingsHeader with back button and proper titles
- Implemented centered "Coming Soon" design with icons and descriptions
- Updated SettingsModal routing to use proper React components instead of inline divs
- Ensured consistent layout structure and styling across all settings modals
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Added slide-right animation with 300ms duration for smoother modal entry
- Updated SettingsLayout to use new slide-right animation instead of fade-up
- Enhanced animation timing with cubic-bezier easing for premium feel
- Updated useSettingsAnimation hooks for consistent 300ms panel transitions
- Applied animations to all settings modals and sub-panels consistently
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Updated SettingsHeader with back button support and custom titles
- Redesigned ConnectionsPanel to use consistent styling with SettingsHome
- Replaced glass morphism layout with standard settings modal structure
- Applied matching colors, fonts, borders, and spacing throughout
- Maintained all existing functionality while improving visual consistency
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Remove user profile icon, name, and username from settings header
- Add clean "Settings" title with proper typography
- Implement close button (X) in top-right corner with hover effects
- Maintain dark glass morphism theme and layout structure
- Preserve accessibility with proper aria-labels and modal title ID
- Update imports to use useSettingsNavigation hook for close functionality
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Split settings into main settings list and destructive actions list
- Add proper visual separation with spacing between the two lists
- Fix yellow border issue in dangerous menu items
- Use consistent border-stone-700 for all menu items
- Maintain amber text color for dangerous actions (Delete/Logout)
- Improve UI organization and safety by separating destructive actions
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- 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>
- Add stronger focus suppression to modal container with focus:ring-0
- Enhance SettingsMenuItem with focus:ring-0 and focus:border-inherit
- Update global CSS with border: inherit !important to prevent focus border changes
- Ensure no white borders or outlines appear on modal or menu item focus
- Complete focus styling elimination across settings system
🤖 Generated with [Claude Code](https://claude.ai/code)
Co-Authored-By: Claude <noreply@anthropic.com>
- Updated the message handler to only accept messages from Telegram OAuth, ensuring better security.
- Refactored the authentication process to handle Telegram's auth_result more effectively, including parsing the payload and managing session tokens.
- Improved error handling during the authentication process, providing clearer error messages for failed operations.
- Added a new allowed host in vite.config.ts for the frontend runner.
These changes streamline the authentication process with Telegram, enhancing security and user experience.
- 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>
ConnectionsPanel Styling:
- Apply dark glass morphism theme to match main settings modal
- Update SettingsPanelLayout to use glass container with 600px fixed height
- Convert SettingsBackButton to dark theme with proper stone colors
- Update all connection cards to use dark backgrounds and borders
- Apply consistent hover states and typography
Status Indicator Improvements:
- Replace "Connected" text badges with small green dots in top-right corner
- Use sage green color (bg-sage-500) with dark border for visibility
- Keep "Coming Soon" badges in original right-side position
- Maintain clean layout with subtle but clear status indicators
Layout Fixes:
- Restore "Coming Soon" tags to proper position on right side
- Add relative positioning for absolute green dot placement
- Improve visual hierarchy with consistent dark theme 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 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.
