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.
- 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.
- Modified the Svelte component to include a comment explaining the use of native WebSocket connections for real-time traffic and memory metrics, emphasizing the importance of direct connections for immediate issue detection during upgrades.
- Updated the `mihomoWsUrl` function to handle cases where the gateway base URL may be undefined, ensuring robust WebSocket URL generation.
- Enhanced the Svelte component to read and process memory metrics more reliably by implementing a mechanism to capture multiple lines of data before concluding the read operation, improving data accuracy.
- Updated `GATEWAY_RUN.md` to clarify the use of native WebSocket connections for `/traffic` and `/memory`, detailing the authorization process and fallback HTTP GET requests.
- Modified the Svelte component to implement native WebSocket loops for real-time traffic and memory metrics, improving data retrieval and connection stability.
- Refactored the traffic and memory polling functions to integrate WebSocket handling, ensuring a more robust and responsive user experience.
- Added a new function `activeExact` to ensure only exact matches highlight the sidebar menu items, improving navigation clarity for root nodes.
- Updated the `Sidebar.MenuButton` to utilize the new exact matching function for the Dashboard link, enhancing user experience by preventing incorrect highlighting of nested pages.
- Replaced button-based navigation with a tab component for improved user experience and UI consistency.
- Updated state management for the active tab, enhancing the overall functionality of the Mihomo interface.
- Updated `GATEWAY_RUN.md` to clarify the use of HTTP GET requests for traffic and memory metrics, ensuring compatibility with upstream services.
- Added `testUrl` property to `MihomoProxyEntry` type for health check configuration.
- Refactored Svelte component to implement a delay query function, improving error handling and stability during data retrieval.
- Renamed functions for clarity and improved the polling mechanism for traffic and memory data, enhancing overall performance.
- Updated `GATEWAY_RUN.md` to clarify the use of streaming HTTP GET for traffic and memory metrics instead of WebSocket connections, addressing potential issues with WebSocket stability behind nginx.
- Modified the Svelte component to implement streaming GET requests for `/traffic` and `/memory`, improving data retrieval and reducing connection issues.
- Enhanced the `recordRates` function to handle totals from the streaming response, ensuring accurate metric tracking.
- Enhanced `GATEWAY_RUN.md` with detailed debugging steps for handling **400** errors in Mihomo routes, clarifying the configuration requirements and common pitfalls.
- Updated comments in `internal/proxy/mihomo.go` to reflect changes in error handling and proxy behavior, linking to the new debugging section in the documentation.
- Modified the Svelte component logic to ensure proper filtering of selectable groups, improving the user interface for managing Mihomo proxies.
- Revised comments in `config.example.yaml` to enhance understanding of Mihomo integration, including environment variable usage and Docker Compose setup.
- Updated `docker-compose.yml` comments to clarify the relationship between the gateway and Mihomo service.
- Enhanced `GATEWAY_RUN.md` to provide clearer instructions on configuring Mihomo parameters and their usage in the gateway.
- Added optional Mihomo configuration fields in `config.compose.yaml` and `config.example.yaml` for enhanced integration with the Mihomo external-controller.
- Updated the `Gateway` to handle Mihomo API requests, including proxying and error handling for Mihomo-specific endpoints.
- Enhanced the documentation in `GATEWAY_RUN.md` to guide users on configuring Mihomo integration.
- Introduced new utility functions in the web client for interacting with Mihomo API endpoints, improving the overall user experience.
- Updated the sidebar in the Svelte components to include a link to the Mihomo section, enhancing navigation.
- Replaced Card components with KpiStatCard and KpiPanelCard across various routes to enhance the visual presentation of key performance indicators and data summaries.
- Updated the structure of the dashboard and incident pages to streamline the display of critical information, improving user experience and readability.
- Enhanced loading states and skeleton displays for better feedback during data fetching processes.
- Updated the `IpServerPresence` component to improve the display of active and recent servers for IPs, enhancing code clarity.
- Added tooltips to the "Servers" column in various tables, providing users with additional context about the displayed server lists.
- Refactored server-related data handling to ensure consistency and better user experience across multiple routes.
- Added `IpServerPresence` component to streamline the display of active and recent servers for IPs, improving code readability and maintainability.
- Introduced tooltips for the "Servers" column in tables to provide additional context on active and recent server lists, enhancing user experience.
- Updated text descriptions for clarity and consistency across the IP and user pages, ensuring better understanding of the displayed data.
- Added `mode-watcher` and `svelte-sonner` as dependencies to enhance application functionality.
- Refactored state management in various Svelte components to use `$app/state` instead of `$app/stores`, improving consistency across the application.
- Updated UI components to utilize new features from the added dependencies, enhancing user experience and responsiveness.
- Improved loading states and error handling in data-fetching components, ensuring better feedback during asynchronous operations.
- Simplified the internal state management for alias selection, ensuring the selected value is consistent with available aliases.
- Updated the effect handling to directly modify the `value` prop based on alias availability, improving responsiveness.
- Streamlined the binding in the Select component to enhance the alias selection process.
- Added a new function `applyAliasIfChanged` to handle alias updates based on user selection, improving responsiveness and consistency in alias filtering.
- Updated the effect handling to ensure the alias filter reflects changes in the URL parameters across various pages, enhancing user experience.
- Removed the "Apply" button for alias changes, streamlining the interaction process by applying changes automatically.
Denozordec