refactor(ui): Icon audit and node list item refactor#4313
Merged
Conversation
This commit introduces a generic `IconInfo` composable to standardize the display of an icon next to a piece of text. This new component is used to refactor the `NodeItem` and other UI elements to present telemetry and node data more consistently.
Several specialized `...Info` composables (`TemperatureInfo`, `HumidityInfo`, `HopsInfo`, etc.) are created based on `IconInfo`, each with a dedicated icon. This improves code readability and reusability.
Additionally, new icons for various metrics (telemetry, signal, device) have been added to `MeshtasticIcons` to support this refactoring.
### Key Changes:
- **`IconInfo` Composable:**
- A new generic `IconInfo(icon, text, ...)` composable has been created in `core/ui` to display an icon-label pair.
- **`NodeItem` Refactoring:**
- The layout of `NodeItem` has been significantly refactored to use the new `...Info` components for displaying telemetry data like temperature, humidity, power, and PAX count.
- Plain `Text` elements for hardware model, role, and node ID have been replaced with `HardwareInfo`, `RoleInfo`, and `NodeIdInfo` components.
- The display of signal information, channel, and hops is now handled by dedicated `...Info` composables.
- **New `...Info` Components:**
- Added a suite of specific info composables built on `IconInfo` for:
- **Telemetry:** `TemperatureInfo`, `HumidityInfo`, `SoilTemperatureInfo`, `SoilMoistureInfo`, `PaxcountInfo`, `AirQualityInfo`, `PowerInfo`.
- **Node Details:** `HardwareInfo`, `RoleInfo`, `NodeIdInfo`, `HopsInfo`, `ChannelInfo`, `LastHeardInfo`, `DistanceInfo`, `ElevationInfo`, `SatelliteCountInfo`.
- **Iconography:**
- Created `MeshtasticIcons.kt` entries for telemetry, device, and signal-related icons (`Temperature`, `Humidity`, `Hops`, `Paxcount`, `Role`, `HardwareModel`, `Channel`, etc.).
- Replaced `Icons.Default.Route` with `MeshtasticIcons.Hops` in `TracerouteMapScreen` and `TracerouteLog`.
- **Other UI Updates:**
- `MessageItem` and `Reaction` now use `MeshtasticIcons.Hops` to display the hop count.
- `NodeDetailsSection` now uses `MeshtasticIcons.Role` and `MeshtasticIcons.Hops`.
- Updated `LogsType` to use new icons for `TRACEROUTE` and `PAX` logs.
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit updates the icon used for `MeshtasticIcons.Channel` from `Tsunami` to `Radio` for better semantic representation. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit centralizes all Material icons used throughout the app into a `MeshtasticIcons` object. This change improves maintainability and consistency by providing a single source of truth for icons, making it easier to manage and update them across the entire codebase.
Instead of calling `Icons.Default.SomeIcon` directly in composables, the code now uses `MeshtasticIcons.SomeIcon`. This abstraction decouples the UI from the specific Material Icons implementation.
### Key Changes:
- **`MeshtasticIcons` API:**
- A `MeshtasticIcons` singleton object has been created in `core/ui/icon/`.
- Icons are organized into semantic categories using extension files (e.g., `Actions.kt`, `Hardware.kt`, `Security.kt`, `Status.kt`).
- **Code Refactoring:**
- All direct usages of `androidx.compose.material.icons` have been replaced with calls to the new `MeshtasticIcons` API.
- This refactoring spans multiple features, including `node`, `messaging`, `firmware`, and `contacts`.
- **Cleanup:**
- Removed redundant icon imports from all modified files.
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit introduces a set of numbered icons for channels 0 through 8 and refactors various UI components for better code consistency and readability. ### Key Changes: - **New Channel Counter Icons:** - Added new drawable resources for icons representing numbers 0 through 8 (`counter_0_24px` to `counter_8_24px`). - Created a new `Counter.kt` file to expose these icons through the `MeshtasticIcons` API. - The `ChannelInfo` composable now uses these specific "counter" icons for channels 0-8, providing a more intuitive visual representation of the channel number. For other channels, it falls back to the generic `Channel` icon. - **Traceroute Icon Change:** - Replaced the `Hops` icon (`CrueltyFree`) with a more appropriate `Route` icon (`Route`) across all traceroute-related screens (`TracerouteLog`, `TracerouteMapScreen`). - **Code Style and Cleanup:** - Updated copyright year to 2026 across all modified files. - Removed redundant empty lines after package declarations. - Standardized the formatting of `Icon` and `Row` composables for better readability. - Explicitly defined getters for all `MeshtasticIcons` properties, improving code consistency. - Corrected a typo in an encryption error string. - Unified the icon for the "Environment" telemetric feature to `Temperature`. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit refactors the `NodeItem` composable to improve its layout, readability, and visual consistency. The layout has been reorganized to use `Arrangement.SpaceBetween` for better alignment and distribution of information.
Key changes include truncating long node names to prevent UI overflow and simplifying the display of various node metrics.
### Key Changes:
- **UI Layout:**
- Replaced `Spacer(modifier = Modifier.weight(1f))` and nested `Row`s with `Arrangement.SpaceBetween` in parent `Row` containers for cleaner alignment of telemetry data (battery, distance, elevation, etc.).
- Removed several `Spacer` components, resulting in a more compact and organized layout.
- **Node Name Truncation:**
- User `longName` is now truncated to 20 characters followed by an ellipsis (`…`) if it exceeds the limit, preventing layout issues with overly long names.
- **Styling & Components:**
- The `contentColor` is now passed to `NodeStatusIcons` to ensure icons correctly match the card's theme.
- `NodeStatusIcon` was simplified by removing the `IconButton` wrapper around the `Icon`, as it was not interactive.
- Code formatting has been cleaned up for better readability.
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit refactors the `NodeItem` composable by breaking it down into smaller, more focused subcomponents. The main `Column` layout has been organized into distinct sections, each handled by a new private composable. This change improves readability and maintainability by isolating the logic for different parts of the UI, such as the header, metrics, environment data, and footer. ### Key Changes: - **`NodeItemHeader`**: Encapsulates the top row, which includes the node chip, name, key status, last-heard time, and status icons. - **`NodeItemMetrics`**: Groups metrics like battery level, voltage, distance, elevation, and satellite count. - **`NodeItemEnvironment`**: Handles the display of all environmental sensor data, including PAX counter, temperature, humidity, and air quality. - **`NodeItemFooter`**: Contains the bottom row with hardware model, role, and node ID. - **`NodeItem`**: The parent composable is now simplified to a `Column` that arranges these new components with spacers. Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit refactors the UI to standardize on the `rounded` theme for all Material Icons, providing a softer and more consistent visual style across the application. It also introduces several layout and information display improvements to the `NodeItem` and `NodeDetailsSection` components.
### Key Changes:
- **Icon Theming:**
- All Material Icon imports have been updated from `Icons.Default` or `Icons.Filled` to `Icons.Rounded` across all icon sets (`Actions`, `Device`, `Person`, `Security`, `Signal`, `Status`, `Telemetry`). This ensures a unified, modern look for all icons.
- **NodeItem UI/UX Enhancements:**
- **Layout:** Replaced `Row` and `Spacer` combinations with `FlowRow` for the environmental metrics section. This allows metrics to wrap gracefully on smaller screens or when many are present, preventing overflow and improving readability.
- **Metrics Display:**
- Added `PressureInfo` to display barometric pressure.
- The `Uptime` metric has been moved from `NodeDetailsSection` to the `NodeItem` footer for directly connected nodes, providing at-a-glance status.
- The `Paxcount` display is now more concise (e.g., "B:1 W:2") for better space utilization.
- A spacer is now added to balance the layout when battery info is unavailable.
- **Signal Quality:** Signal quality information (SNR, RSSI, and quality text/icon) is now presented more compactly using `IconInfo`.
- **New Components & Component Updates:**
- **`OverlayIconInfo`:** A new composable for displaying an icon with a smaller icon overlaid on top (e.g., `Soil` with `Temperature` or `Humidity`), allowing for more intuitive composite metrics.
- **`PressureInfo` & `UptimeInfo`:** New `IconInfo` composables for displaying their respective metrics.
- **Icon Change:** Replaced the `CheckCircle` icon for uptime with `ArrowCircleUp` for better semantic clarity.
- The `NodeItem` preview data has been updated to include new telemetry values like pressure and soil metrics.
Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
This commit updates the application's UI to use the "Rounded" theme for Material Design icons, replacing the "Default" (filled) versions. This change provides a softer and more modern aesthetic across the entire user interface. The update is purely cosmetic and affects icons in various features, including: - Messaging (chat actions, overflow menus, reactions) - Node details (metrics, status indicators, actions) - Settings screens (debugging, configuration, radio management) - Map views (controls, waypoints) - Core UI components (signal indicators, list items) Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #4313 +/- ##
=====================================
Coverage 0.00% 0.00%
=====================================
Files 3 3
Lines 28 28
Branches 8 8
=====================================
Misses 28 28 ☔ View full report in Codecov by Sentry. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
feat(ui): Introduce
IconInfocomponent andMeshtasticIconsAPIThis commit introduces a reusable
IconInfocomposable to standardize the display of an icon followed by text. It also establishes a centralizedMeshtasticIconsAPI to provide a consistent set of Material Rounded icons for use across the application, replacing direct calls toIcons.DefaultandIcons.Filled.New specialized
Infocomponents (DistanceInfo,ElevationInfo,HopsInfo,LastHeardInfo,SatelliteCountInfo,ChannelInfo, and variousTelemetryInfovariants) have been created usingIconInfoto display specific node metrics. These new components are now used in theNodeItemto present a richer, more organized view of node data.Key Changes:
IconInfoComposable:IconInfothat renders an icon and an optional text label with consistent styling.OverlayIconInfofor icons that require a smaller icon overlaid (e.g.,SoilTemperatureInfo).MeshtasticIconsAPI:MeshtasticIconsobject to serve as a centralized provider for all app icons.Actions,Device,Hardware,Security,Signal,Status, andTelemetry.Icons.Default.*andIcons.Filled.*withIcons.Rounded.*via the newMeshtasticIconsAPI for a consistent visual style.Countericons (0-8) as drawable resources.New Metric Components:
IconInfofor displaying specific metrics:DistanceInfo,ElevationInfo,SatelliteCountInfoLastHeardInfo,HopsInfo,ChannelInfoTemperatureInfo,HumidityInfo,PressureInfo,PaxcountInfo,AirQualityInfo,UptimeInfo,HardwareInfo,RoleInfo,NodeIdInfo,SoilTemperatureInfo,SoilMoistureInfo.NodeItemRefactor:NodeItemcomposable has been significantly refactored to use the newInfocomponents.FlowRow, which improves readability and organization of metrics like battery, position, signal quality, and environmental data.Icon Standardization:
:app,:feature:node,:feature:settings, etc.) to use the newMeshtasticIconsAPI, ensuring a consistent icon set.