Skip to content

Feature/yew web UI#43

Open
chojuninengu wants to merge 172 commits intomainfrom
feature/yew-web-ui
Open

Feature/yew web UI#43
chojuninengu wants to merge 172 commits intomainfrom
feature/yew-web-ui

Conversation

@chojuninengu
Copy link
Collaborator

No description provided.

- Define package metadata including name, version, edition, and author
- Add essential dependencies for Yew framework and WebAssembly support
- Include serialization libraries serde and serde_json
- Add stylist for CSS-in-Rust with Yew integration
- Include chrono and uuid with wasm-bindgen features
- Add logging and panic hook crates for better debugging
- Specify web-sys features for browser APIs like WebSocket and DOM events
- Link local async-chat dependency via relative path reference
- Define build target as index.html for bundling
- Set build mode to non-release by default
- Specify output directory for build assets
- Configure watch paths to include src directory
- Set serve address to localhost and port to 8080
- Establish clean settings for output directory with optional cargo cleanup flag
- Add App component with state management using Yew hooks
- Integrate connection service for WebSocket and HTTP fallback
- Implement automatic connection attempt on mount with error logging
- Add Header, GroupSidebar, and ChatRoom child components
- Handle server messages to update chat state and group activity
- Manage connection status changes in the application state
- Include styling with global CSS and support theme switching
- Add callbacks for group selection, joining, and message sending
- Provide basic unit test for App component initialization
- Implement header component with styled layout and flexbox alignment
- Display current user with avatar showing initial letter
- Show connection status with color-coded indicator and text
- Add theme toggle button to switch between dark and light modes
- Apply CSS custom properties for colors, fonts, spacing, and transitions
- Include animated pulse effect for connecting status indicator
- Use yew framework and stylist for styled components and properties management
- Prevent tracking of .claude files in version control
- Update .gitignore with new entry for .claude directory or file
- Declare modules for app, chat_room, group_sidebar, header, message_list, and message_input
- Re-export all modules to simplify imports elsewhere in the project
…communication

- Implement WebSocketService for real-time messaging with connection lifecycle handling
- Add HttpService as a fallback option simulating server responses via HTTP
- Create ConnectionService to unify WebSocket and HTTP communication strategies
- Provide asynchronous connect and send methods with fallback logic
- Expose connection status updates and message callbacks through Yew callbacks
- Implement disconnect and connection state query methods
- Provide a Yew hook for easy integration of ConnectionService in components
- Create websocket module in services
- Export all websocket functionalities publicly
- Prepare for future websocket-related features
- Define color palette variables for dark and light themes
- Add typography, spacing, border radius, shadow, and transition variables
- Implement base styles for html and body with theme support
- Create flexbox utility classes for layout control
- Style scrollbars for better appearance
- Add button and input component styles with hover and focus effects
- Define text size and font weight utility classes
- Include keyframe animations and corresponding utility classes for fade, slide, and pulse effects
… features

- Implement GroupSidebar component displaying chat groups list
- Add styles for sidebar layout, group items and join form
- Support joining or creating groups via input form submission
- Highlight currently selected group and handle group selection events
- Show unread message count and member count badges for each group
- Display empty state message and icon when no groups are available
- Use stylist crate for scoped CSS styling integration with Yew framework
… validation

- Implement message input with textarea, send button, attachment and emoji buttons
- Add disabled state handling based on props and group selection
- Implement message send callback with enter key handling and form submission
- Add character count display with warning and error color coding for limits
- Create scoped CSS styles for input, buttons, and layout using stylist crate
- Support placeholder text dynamic to current group selection
- Prevent sending empty messages and limit message length to 2000 characters
- Create MessageList component displaying chat messages with proper styling
- Group messages by date and insert date dividers ("Today", "Yesterday", or formatted date)
- Format message timestamps relative to current time (e.g., "5m ago", "2h ago")
- Style own messages and others' messages differently with distinct bubble colors
- Add empty state UI when message list is empty with icon and instructions
- Implement typing indicator animation styles for future usage
- Implement ChatRoom component displaying current group and messages
- Add styled headers with group name and member count
- Include action buttons for search, settings, and info
- Render MessageList and MessageInput components within chat content
- Show welcome message when no group is selected
- Apply scoped CSS styles for layout and theming of chat room elements
- Create a new module for global styles
- Export the global styles for use in other parts of the app
- Initialize the styles module file with necessary declarations
- Generated Cargo.lock automatically by Cargo
- Added numerous Rust package versions and checksums
- Included dependencies for async, futures, gloo, and other crates
- Locked dependencies for wasm-bindgen and web-sys integration
- Ensured reproducible build environment for Rust web-ui component
- Deleted web-sys from Cargo.toml dependencies
- Cleaned up dependency list to reduce bloat
- Ensured build and functionality remain unaffected
- Add /web-ui/target to ignore build output
- Add /web-ui/node_modules to ignore dependencies folder
- Ignore /web-ui/.env and /web-ui/.env.local environment files
- Retain existing exclusions from previous .gitignore entries
- Added "serde" feature to chrono dependency in Cargo.toml
- Improved serialization and deserialization capabilities for date/time
- Enhanced compatibility with wasm-bindgen environment
- Changed component function name from Header to header
- Updated function signature to use lowercase naming
- Kept component functionality and styling intact
- Changed GroupSidebar function name to group_sidebar for consistency with Rust naming conventions
- Updated function definition to match standardized style
- Maintained component functionality and styling unchanged
- Changed function name from ChatRoom to chat_room
- Updated function signature accordingly
- Maintained existing functionality and styling references
- Changed function name from `MessageInput` to `message_input`
- Updated to follow Rust naming conventions for functions
- Ensured consistency in component declaration style
- Changed MessageList function name to message_list to follow Rust naming conventions
- Updated function declaration accordingly without changing functionality
- Ensured consistency with component naming style in the codebase
…sts, and update web-ui server configuration.
…uding replies, presence, and online user listings.
- Add online_users to chat state to manage user presence
- Introduce reply_to_message state for replying to specific messages
- Extend message struct initialization with reply_to field set to None
- Ensure all new messages default the reply_to field to None
- Prepare backend handling for reply-to functionality without UI changes yet
- Deleted redundant reply_to: None field in message struct initialization
- Cleaned up code to prevent potential confusion or errors
- Ensured only one reply_to field is set for new messages
- Add support for displaying reply messages with author and preview info
- Dispatch AddMessage action with reply metadata in chat state
- Update online users list upon receiving FromServer::OnlineUsers event
- Handle presence updates by dispatching UpdateUserPresence action
- Transform user status to string format for display purposes
- Display the count of online users prominently
- Show placeholder text when no users are online
- List online users with avatars and status indicators
- Use color-coded status dots for Online, Away, and other statuses
- Limit the user list height with a scrollable container
- Style the section with padding, margin, and border separation
- Display reply preview with author and truncated content for replied messages
- Style reply preview with background, border, and font adjustments based on sender
- Add reply button on each message to set reply target state
- Support reply preview for text, file, and voice message types
- Implement hover effect on reply button for better UX
- Deleted the reply button UI and related reply handling logic
- Removed callback and event handler for setting reply message state
- Cleaned up message preview generation for reply feature
- Simplified message component rendering by eliminating reply interaction elements
- Set viewport meta with no user scaling and add theme color
- Add meta tags for app description and Apple mobile web app settings
- Include favicon and Apple touch icon links
- Add PWA manifest link for progressive web app setup
- Include Google Fonts preconnect and stylesheet for Inter font
- Add trunk directives for Rust build asset management
- Implement full-screen loading screen with spinner and text
- Register service worker for offline caching and PWA functionality
- Handle loading screen hide and removal after app load
- Add listener for beforeinstallprompt event for PWA install prompts
- Introduce favorites state to manage list of favorite group names
- Add user presence updates on join and on incoming messages/files/voice
- Implement chat button to focus input and scroll chat to bottom
- Add view friends button to display left sidebar
- Add add to favorites button with alert notifications for add/remove actions
- Refactor author string handling to reduce redundant conversions and update presence accordingly
- Replace inline callbacks with named callbacks for chat, view friends, and favorites buttons
- Changed multiple eprintln! macros to use inline variable formatting with `{}` placeholders
- Reformatted imports grouping in async_std and async_tungstenite for consistency
- Improved readability of error and info log messages with concise string interpolation
- No change in functionality; purely stylistic and modernization of code syntax
- Implement play_notification_sound with smooth fade-in/out envelope
- Add play_click_sound for subtle UI click feedback
- Add play_send_sound with rising tone effect for message send
- Use Web Audio API Oscillator and Gain nodes for sound generation
- Handle errors gracefully, logging notification errors and silencing others
- Define message content types including text, file, and voice
- Implement ChatMessage structure with reactions and reply info
- Add OnlineUser struct to track user presence status
- Create ChatState with groups, messages, typing users, and online users
- Implement Reducible trait for ChatState with various chat actions
- Support adding messages, reactions, typing users, and online users
- Handle user presence updates and group switching with initialization
- Provide method to get current group's messages efficiently
- Added types module for component type definitions
- Added styles module for shared styling utilities
- Added audio module for audio related components and logic
- Created AppStyles struct to generate CSS classes dynamically
- Implemented color schemes based on dark mode state
- Added responsive grid layout for container with adjustable sidebars
- Styled chat interface elements: header, messages, footer, input wrapper
- Defined styles for avatars, search inputs, and contact items
- Added message bubble styles for self, others, and error states
- Designed send button, icon button, and connection status pill styles
- Included action grid and card styles with hover effects
- Added smooth transitions and animations for UI responsiveness
- Added AudioContext feature support
- Added AudioDestinationNode feature support
- Added AudioNode feature support
- Added AudioParam feature support
- Added GainNode feature support
- Added OscillatorNode feature support
- Added OscillatorType feature support
- Introduce group-based chat state storing messages and online users per group
- Add ChatAction::SwitchGroup to change active chat group
- Update reducer logic to handle group-specific messages, users, and reactions
- Modify UI to show active group with highlight and active badge
- Adjust message list, online users, and attachments to display current group's data
- Preserve message history and presence separately for each group
- Update user avatar and group listings to reflect active selection
- Initialize default chat state with support for multiple groups and current group tracking
- Added /web-ui/dist to .gitignore to exclude build output files
- Prevents committing generated distribution files to the repository
…cations

- Replaced direct use of HtmlAudioElement with custom audio::play_notification_sound()
- Removed inline base64 audio source and playback logic
- Encapsulated notification sound playback using Web Audio API for better control and performance
- Use Web Audio API for playing notification sounds
- Remove outdated HtmlAudioElement based sound playback
- Retain desktop notification display functionality
- Fix reaction update to use current_messages instead of messages for indexing
…onents

- Changed all style field types in AppStyles from String to StyleSource
- Removed unnecessary to_string() calls from css! macro invocations
- Updated imports to include StyleSource from stylist crate
- Simplified style generation by using StyleSource directly without string conversion
- Retained all existing style definitions and variable interpolations intact
- Deleted unused 'types' module import in mod.rs
- Removed unused 'styles' module import in mod.rs
- Extract style for selected state into a separate style string variable
- Apply selected style via inline style attribute instead of class
- Simplify conditional style construction for better readability
- Keep base contact item style as class unchanged for both selected and unselected states
- Improve maintainability by decoupling selection styling from class names
- Delete entire AppStyles struct and its associated style definitions
- Remove dark mode based color schemes and responsive layout styles
- Eliminate sidebar, chat, input, avatar, buttons, and action card styles
- Remove all CSS rules implemented with stylist crate in styles.rs
- Simplify codebase by cleaning up unused styling logic and declarations
- Deleted ChatState struct and its Reducible implementation
- Removed chat message enums and structs (ChatMessage, MessageContent, ReplyInfo)
- Removed OnlineUser struct and ChatAction enum
- Removed GroupMessages struct managing group-based messages
- Deleted all chat state management and associated utility methods
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant