- Added accent and icon properties to the DataTableCard component for improved visual distinction and context.
- Updated multiple pages to utilize the new accent feature, enhancing the user interface with color-coded cards.
- Incorporated icons in DataTableCard instances across various routes for better representation of content.
- Adjusted the layout of several Svelte components to ensure consistent spacing and alignment, specifically changing `gap-3` to `gap-4` in multiple instances.
- Replaced Card components with DataTableCard in the Mihomo page for improved data presentation.
- Enhanced text formatting for better readability across various pages, ensuring consistent use of class attributes.
- Added a check to prevent unnecessary updates when the selected alias remains the same, enhancing performance.
- Updated the alias filter select component to utilize the `untrack` function for more efficient value change handling.
- Streamlined the alias filter change logic across main and users pages to ensure consistent behavior.
- Consolidated alias filter change logic into a single function to streamline updates and reduce redundancy.
- Removed the previous `applyAliasIfChanged` function, simplifying the alias filter handling process.
- Ensured immediate data reload upon alias filter change to maintain up-to-date information display.
- Added a check to prevent alias filter changes from triggering updates if the selected alias remains the same.
- Introduced a reactive effect to apply alias changes only when the component is rendered in the browser, improving performance and clarity in data handling.
- Eliminated the `$effect` that applied alias changes in both the main and users pages, improving performance and reducing unnecessary checks.
- This change enhances the clarity of the alias filter logic and maintains the focus on essential data updates.
- Updated the alias filter logic to prevent selected aliases from disappearing during partial or empty responses.
- Refactored the alias filter change handling to a dedicated function for better readability and maintainability.
- Removed redundant alias filter validation in the users page to streamline the alias selection process.
- Updated the alias filter select component to include an `onValueChange` handler for improved value management.
- Implemented immediate data reload upon filter change to ensure the displayed information is current.
- Removed redundant alias filter check in the users page to streamline the alias change process.
- Removed the `onValueChange` prop from the select component to simplify its interface.
- Updated the alias filter select component to ensure the selected value defaults to "all" if not present in available aliases, enhancing user experience.
- Replaced the custom select component with a native HTML select element for improved performance and accessibility.
- Simplified value change handling by directly binding the select's value and updating the onChange event.
- Ensured the selected value defaults to "all" if not present in available aliases, enhancing user experience.
- Added an `onValueChange` callback to the alias filter select component for improved event handling.
- Updated the component's logic to normalize the selected value and trigger the callback on changes.
- Implemented the alias filter change handling in the IPs and users pages to apply changes effectively.
- Introduced a button for creating users, which prompts the user to select a specific node before proceeding.
- Enhanced data loading logic to handle scenarios where the URL changes without immediate data refresh, ensuring up-to-date information is displayed.
- Added Russian translations for new UI elements to maintain localization consistency.
Switch server overview KPI block to KpiStatCard with accent icons, align header copy/layout, and sync skeleton grid density with the Mihomo pattern.
Made-with: Cursor
Extract shared header, query-state, and JSON panel components, then apply them across server runtime/security/upstreams/update/config views for consistent Telemt panel UX.
Made-with: Cursor
- Updated the alias filter select component to bind the selected value directly, simplifying the value change logic.
- Enhanced the select component to support an optional `onValueChange` callback, improving flexibility in handling value changes.
- Updated the alias filter select component to ensure the selected value is correctly set on value change, defaulting to "all" only when no value is provided.
- Enhanced the component's logic for better state management during user interactions.
- Updated logic in the alias filter select component to avoid resetting the selected alias to "all" during loading when the available aliases may be temporarily empty.
- Ensured that the selected value defaults to "all" only if no value is provided.
- Updated background and hover colors for doughnut and bar charts in both fleet and mihomo components to use defined color variables for better maintainability.
- Added hover background and border colors for data points in line charts to enhance user interaction.
- Improved overall visual consistency across chart components by standardizing color usage.
- Adjusted the ScrollArea and surrounding div structure to enhance layout consistency.
- Updated class properties for better visual alignment and responsiveness in the IPs table component.
- Standardized Card component classes across multiple files by removing unnecessary padding and gaps, enhancing visual alignment and creating a more cohesive appearance throughout the application.
- Updated Card component styles across multiple files to introduce a `density` prop, allowing for compact layouts and improved visual consistency.
- Removed unnecessary padding from card components to enhance alignment and create a more cohesive appearance throughout the application.
- Updated Card component styles across multiple files to standardize padding and gap settings, improving visual alignment and creating a cohesive appearance throughout the application.
- Adjusted padding and gap settings in the Card component for a more cohesive appearance.
- Enhanced the DataTableCard component by refining its class properties to ensure better alignment and visual consistency.
- Adjusted padding and gap settings in the card component for a cleaner appearance.
- Updated the user page layout to enhance the ScrollArea and table styling, ensuring better alignment and visual consistency.
- Improved the overall structure of the user page for a more cohesive user experience.
- Removed unnecessary background color from the data table toolbar for a cleaner look.
- Updated text color in sortable table headers to enhance readability and maintain a cohesive theme.
- Adjusted padding and border styles in user page components for better alignment and visual consistency.
- Made the `title` prop optional in `DataTableCard`, allowing for more flexible usage without a title.
- Updated the rendering logic in `DataTableCard` to conditionally display the title and description.
- Enhanced the styling of table headers across various pages for a more consistent appearance, removing unnecessary backdrop blur effects.
- Replaced button elements with native button tags in `SortableTh` for better accessibility and semantic HTML.
- Introduced `chartColorWithAlpha` function to manage color transparency, improving visual consistency in charts.
- Updated chart configurations in fleet and Mihomo components to utilize dynamic theming for background and border colors, enhancing user experience.
- Implemented `chartLineAreaFillCallback` for better area fill effects in line charts, providing a more polished visual representation.
- Refactored chart initialization logic to ensure proper handling of color and gradient settings, improving performance and responsiveness.
- Integrated dynamic theming for chart colors using a centralized theme file, enhancing visual consistency across charts.
- Refactored chart initialization logic to ensure proper destruction and recreation of charts on data updates, improving performance and responsiveness.
- Updated chart options to utilize theme colors for grid, ticks, and legends, providing a more cohesive user experience.
- Utilized `untrack` from Svelte to avoid infinite rendering loops during asynchronous operations.
- Improved loading state management by ensuring notifications are handled correctly without causing UI flickering.
- Enhanced data fetching logic for proxy groups, ensuring stable access to test URLs and reducing potential delays in updates.
- Simplified the layout of compact mode in the MihomoProxyGroups component by removing unnecessary styling elements.
- Enhanced the accessibility of group elements by maintaining essential ARIA attributes while streamlining the overall structure.
- Improved readability and user experience through cleaner code and layout adjustments.
- Added new props for managing delay checks across all groups, improving user control over delay monitoring.
- Implemented a loading state for delay checks to provide feedback during asynchronous operations.
- Updated UI elements to conditionally display delay buttons, enhancing the overall user experience and interaction with proxy groups.
- Introduced `untrack` from Svelte to prevent infinite rendering loops during loading state changes.
- Enhanced loading state handling by ensuring that loading notifications are managed correctly without causing UI flickering.
- Improved overall data fetching logic for better user experience during proxy updates.
- Added new props to the MihomoProxyGroups component for better control over loading states and toolbar visibility.
- Implemented a refresh button in the Mihomo page to manually trigger proxy updates, enhancing user interaction.
- Updated the layout and styling of proxy groups for improved readability and user experience.
- Enhanced loading indicators to provide clearer feedback during data fetching operations.
- Adjusted grid classes in the Mihomo page to enhance layout flexibility, transitioning from a fixed column setup to a more responsive design.
- Improved the display of proxy groups by allowing for a greater number of columns on larger screens, optimizing user experience across devices.
- Introduced a stable order for selectable proxy groups to minimize DOM changes during JSON updates.
- Added a refresh icon to the update button for better user feedback during loading states.
- Enhanced error handling to prevent UI flickering when fetching proxy data.
- Updated layout in the Mihomo page to utilize a grid system for better responsiveness and organization.
- Replaced the lazy loading mechanism with a compact mode for better user experience and performance.
- Enhanced the layout of proxy groups to support a more flexible display, accommodating both compact and standard views.
- Updated button styles and descriptions for clarity, ensuring a more intuitive interaction with proxy nodes.
- Adjusted the overall structure of the Mihomo page to streamline the presentation of proxy data and improve accessibility.
- Removed the Tabs component and associated state variable to simplify the Mihomo page structure.
- Updated the card descriptions for clarity and improved user guidance on proxy settings.
- Enhanced the layout for displaying proxies by introducing a new section with clearer instructions and a more organized presentation of nodes.
- Introduced a new menu item for Mihomo in the app sidebar for easier navigation.
- Refactored the Mihomo page component by removing unused imports and state variables, streamlining the code for better performance and readability.
- Enhanced the overall structure of the Mihomo page to improve maintainability and user experience.
- Added `expose_upstream_errors` option to the configuration, allowing detailed error messages in JSON responses for 502 errors.
- Implemented `writeBadGatewayJSON` function to streamline JSON error responses, including upstream error details when enabled.
- Updated documentation to reflect changes in configuration and error handling behavior for improved diagnostics.
- Replaced Card components with KpiPanelCard and KpiStatCard for a more consistent and visually appealing layout.
- Updated chart and statistics sections to include descriptive footers and icons, enhancing user experience and clarity.
- Improved grid layout for better responsiveness and spacing in the overview section.
- Updated memory variable names and comments to reflect usage in KiB instead of KB for clarity.
- Introduced a function to convert memory values from bytes to KiB, ensuring consistent data representation across components.
- Adjusted chart data to display memory in KiB, enhancing accuracy in visualizations.
- Added support for WebSocket connections to the `/connections` endpoint, allowing for improved handling of WebSocket requests.
- Updated the `useMihomoWebSocketTunnel` function to accept `Sec-WebSocket-Key` for `/connections`, enhancing compatibility with various proxies.
- Introduced new test cases in `mihomo_test.go` to validate WebSocket tunnel behavior for connections, ensuring comprehensive coverage.
- Enhanced the `applyMihomoWSDialAuth` function to manage token handling for WebSocket connections, improving security and functionality.
- Updated Svelte components to implement native WebSocket loops for connections, providing real-time data updates and improved user experience.
- Added support for the Gorilla WebSocket library to improve WebSocket handling in Mihomo.
- Refactored the WebSocket upgrade detection logic to utilize `websocket.IsWebSocketUpgrade`, enhancing reliability.
- Updated the `NewMihomoForward` function to streamline request handling and improve path normalization.
- Introduced new test cases for WebSocket tunnel scenarios, ensuring comprehensive coverage for traffic and memory endpoints.
- Improved error handling and connection management for WebSocket upgrades, ensuring robust communication.
Denozordec