Skip to content

refactor(ui): Icon audit and node list item refactor#4313

Merged
jamesarich merged 9 commits into
mainfrom
feat/node-item-iconography
Jan 25, 2026
Merged

refactor(ui): Icon audit and node list item refactor#4313
jamesarich merged 9 commits into
mainfrom
feat/node-item-iconography

Conversation

@jamesarich

Copy link
Copy Markdown
Collaborator

feat(ui): Introduce IconInfo component and MeshtasticIcons API

This commit introduces a reusable IconInfo composable to standardize the display of an icon followed by text. It also establishes a centralized MeshtasticIcons API to provide a consistent set of Material Rounded icons for use across the application, replacing direct calls to Icons.Default and Icons.Filled.

New specialized Info components (DistanceInfo, ElevationInfo, HopsInfo, LastHeardInfo, SatelliteCountInfo, ChannelInfo, and various TelemetryInfo variants) have been created using IconInfo to display specific node metrics. These new components are now used in the NodeItem to present a richer, more organized view of node data.

Key Changes:

  • IconInfo Composable:

    • Added a new generic component IconInfo that renders an icon and an optional text label with consistent styling.
    • Introduced OverlayIconInfo for icons that require a smaller icon overlaid (e.g., SoilTemperatureInfo).
  • MeshtasticIcons API:

    • Created a new MeshtasticIcons object to serve as a centralized provider for all app icons.
    • Organized icons into semantic categories like Actions, Device, Hardware, Security, Signal, Status, and Telemetry.
    • Replaced most usages of Icons.Default.* and Icons.Filled.* with Icons.Rounded.* via the new MeshtasticIcons API for a consistent visual style.
    • Added new Counter icons (0-8) as drawable resources.
  • New Metric Components:

    • Created several new composables built on IconInfo for displaying specific metrics:
      • DistanceInfo, ElevationInfo, SatelliteCountInfo
      • LastHeardInfo, HopsInfo, ChannelInfo
      • TemperatureInfo, HumidityInfo, PressureInfo, PaxcountInfo, AirQualityInfo, UptimeInfo, HardwareInfo, RoleInfo, NodeIdInfo, SoilTemperatureInfo, SoilMoistureInfo.
  • NodeItem Refactor:

    • The NodeItem composable has been significantly refactored to use the new Info components.
    • Node data is now presented in a structured layout using FlowRow, which improves readability and organization of metrics like battery, position, signal quality, and environmental data.
  • Icon Standardization:

    • Updated numerous files across different features (:app, :feature:node, :feature:settings, etc.) to use the new MeshtasticIcons API, ensuring a consistent icon set.
    • Switched from Filled to Rounded Material icons in most places.

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>
@github-actions github-actions Bot added the enhancement New feature or request label Jan 25, 2026
@codecov

codecov Bot commented Jan 25, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 0.00%. Comparing base (140264d) to head (3bfc532).
⚠️ Report is 5 commits behind head on main.
✅ All tests successful. No failed tests found.

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.
📢 Have feedback on the report? Share it here.

Signed-off-by: James Rich <2199651+jamesarich@users.noreply.github.com>
@jamesarich jamesarich enabled auto-merge January 25, 2026 22:38
@jamesarich jamesarich added this pull request to the merge queue Jan 25, 2026
Merged via the queue into main with commit a28aa4d Jan 25, 2026
9 checks passed
@jamesarich jamesarich deleted the feat/node-item-iconography branch January 25, 2026 23:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant