Update networking widgets so they show a Raspberry Pi icon and arrows pointing towards/out of it.

[Williangalvani]

Also adds a wifi option as a bonus

(I bet sourcery will complain of the v-html)

[sourcery-ai]

Reviewer's Guide by Sourcery

The pull request updates the networking widgets to display a Raspberry Pi icon and directional arrows, introduces a new WifiNetworking widget, and refactors bandwidth formatting into a utility function.

Updated class diagram for Networking and WifiNetworking widgets

classDiagram
    class ETh0Widget {
        +int timer
        +OneMoreTime check_backend_status_task
        +String image
        +int upload()
        +int download()
        +void mounted()
        +void beforeDestroy()
        +String formatBandwidth(int bytesPerSecond)
        +void loadImage()
    }
    class Wifi0Widget {
        +int timer
        +OneMoreTime check_backend_status_task
        +String image
        +int upload()
        +int download()
        +void mounted()
        +void beforeDestroy()
        +String formatBandwidth(int bytesPerSecond)
        +void loadImage()
    }
    class Networking {
        +ETh0Widget component
        +String name
    }
    class WifiNetworking {
        +Wifi0Widget component
        +String name
    }
    class formatBandwidth {
        +String formatBandwidth(int bytesPerSecond)
    }
    ETh0Widget --> formatBandwidth
    Wifi0Widget --> formatBandwidth
    Networking --> ETh0Widget
    WifiNetworking --> Wifi0Widget

Loading

File-Level Changes

Change	Details	Files
Updated the Networking widget to display a Raspberry Pi icon and directional arrows.	Replaced the existing arrow icons with new left and right arrows for download and upload speeds. Added a Raspberry Pi icon using an SVG image loaded via axios. Changed the widget name from 'CpuWidget' to 'ETh0Widget'. Modified the layout to include vertical text for 'eth0'.	core/frontend/src/widgets/Networking.vue
Introduced a new WifiNetworking widget.	Created a new component similar to the updated Networking widget but for WiFi. Displays a Raspberry Pi icon and directional arrows for WiFi data. Includes vertical text for 'Wifi'.	core/frontend/src/widgets/WifiNetworking.vue
Refactored bandwidth formatting into a utility function.	Moved the formatBandwidth function to a new utility file. Updated the Networking and WifiNetworking components to use the new utility function.	core/frontend/src/utils/networking.ts core/frontend/src/widgets/Networking.vue core/frontend/src/widgets/WifiNetworking.vue
Updated the App component to include the new WifiNetworking widget.	Added WifiNetworking to the list of components in the App component. Renamed the existing Networking component entry to 'Eth0 Networking'.	core/frontend/src/App.vue
Fixed a minor syntax issue in WifiTrayMenu component.	Corrected the syntax for splitting environment variables.	core/frontend/src/components/wifi/WifiTrayMenu.vue
Added a new SVG icon for the Raspberry Pi.	Included a new SVG file for the Raspberry Pi icon.	core/frontend/src/assets/img/icons/pi.svg

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it. You can also reply to a
  review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time. You can also comment
  @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time exactly where you
  want it. You can also comment @sourcery-ai summary on the pull request to
  (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull
  request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the
  pull request to resolve all Sourcery comments. Useful if you've already
  addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull
  request to dismiss all existing Sourcery reviews. Especially useful if you
  want to start fresh with a new review - don't forget to comment
  @sourcery-ai review to trigger a new review!
• Generate a plan of action for an issue: Comment @sourcery-ai plan on
  an issue to generate a plan of action for it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @Williangalvani - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider renaming the 'ETh0Widget' to 'Eth0Widget' for consistent casing in the component name.
• The 'loadImage' method is duplicated in both 'Networking.vue' and 'WifiNetworking.vue'; consider refactoring it into a shared utility function to avoid code duplication.

Here's what I looked at during the review

• 🟡 General issues: 2 issues found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}

[Williangalvani]

latest iteration

[ES-Alexander]

Did you forget to push? The new RX/TX arrows aren't included yet.

Also, could we add a widget for USB0 as well? And possibly UAP0 (if it's not included in the Wifi one)?

[Williangalvani]

Did you forget to push? The new RX/TX arrows aren't included yet.

Also, could we add a widget for USB0 as well? And possibly UAP0 (if it's not included in the Wifi one)?

yep. oops.
just pushed!

[ES-Alexander]

Arrow colours don't seem to be working properly in dark mode:

Screen.Recording.2025-02-27.at.5.58.26.pm.mov

The failsafe icon outlines look fine though, so not sure what's going on.

---

Also, were you intending to add those extra widgets, or save that for a different PR?