frontend: wifi: add refresh wifi list button

[nicoschmdt]

fix #1863

Refresh:
https://github.com/user-attachments/assets/93d98ccc-7d2c-4e47-8589-a8b09eafcc67

Summary by Sourcery

Add a manual refresh button to the WifiManager component and wire it up in the WifiTrayMenu to reload available networks on demand

New Features:

• Add a refresh icon button to the WifiManager toolbar that emits a refresh-request event
• Handle the refresh-request in WifiTrayMenu by calling fetchAvailableNetworks on the wifi-updater component

[sourcery-ai]

Reviewer's Guide

Adds a refresh button to the WifiManager toolbar that emits a refresh-request event, and wires it up in the WifiTrayMenu to invoke fetchAvailableNetworks on the wifi-updater component.

Sequence diagram for the WiFi list refresh interaction

sequenceDiagram
    actor User
    participant WifiManager
    participant WifiTrayMenu
    participant WifiUpdater
    User->>WifiManager: Clicks refresh button
    WifiManager->>WifiTrayMenu: emit refresh-request
    WifiTrayMenu->>WifiUpdater: fetchAvailableNetworks()
    WifiUpdater-->>WifiTrayMenu: (updates WiFi list)
    WifiTrayMenu-->>User: Updated WiFi list displayed

Loading

File-Level Changes

Change	Details	Files
Add refresh button and event emission in WifiManager	Insert a toolbar button with mdi-refresh icon and click handler Emit 'refresh-request' event on button click	core/frontend/src/components/wifi/WifiManager.vue
Handle refresh-request in WifiTrayMenu	Add ref 'wifiUpdater' to wifi-updater component Bind @refresh-request on wifi-manager to onRefreshRequest Implement onRefreshRequest method calling fetchAvailableNetworks via ref	core/frontend/src/components/wifi/WifiTrayMenu.vue

Assessment against linked issues

Issue	Objective	Addressed	Explanation
#1863	Add a 'Refresh WiFi list' button to the WiFi management UI.	✅
#1863	Ensure that clicking the 'Refresh WiFi list' button triggers a refresh of the available WiFi networks.	✅

---

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!

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 @nicoschmdt - I've reviewed your changes - here's some feedback:

• Interacting with the WifiUpdater via $refs can be brittle—consider having WifiUpdater listen for a shared event or use a Vuex action instead of directly calling its method.
• The hide-details prop is not applicable to v-btn and can be removed to clean up the button configuration.
• Avoid hardcoding color="gray" on the refresh button—use a theme variable (e.g. primary or default) to keep styling consistent.

Prompt for AI Agents

Please address the comments from this code review:
## Overall Comments
- Interacting with the WifiUpdater via $refs can be brittle—consider having WifiUpdater listen for a shared event or use a Vuex action instead of directly calling its method.
- The hide-details prop is not applicable to v-btn and can be removed to clean up the button configuration.
- Avoid hardcoding color="gray" on the refresh button—use a theme variable (e.g. primary or default) to keep styling consistent.

## Individual Comments

### Comment 1
<location> `core/frontend/src/components/wifi/WifiManager.vue:13` </location>
<code_context>
     >
       <v-toolbar-title>Wifi</v-toolbar-title>
       <v-spacer />
+      <v-btn
+        v-tooltip="'Refresh'"
+        icon
+        color="gray"
+        hide-details="auto"
+        @click="$emit('refresh-request')"
+      >
+        <v-icon>mdi-refresh</v-icon>
+      </v-btn>
       <v-btn
</code_context>

<issue_to_address>
Button color 'gray' may not match Vuetify theme.

Consider using a standard Vuetify theme color or ensure 'gray' is defined in your theme to maintain consistent styling.
</issue_to_address>

<suggested_fix>
<<<<<<< SEARCH
      <v-btn
        v-tooltip="'Refresh'"
        icon
        color="gray"
        hide-details="auto"
        @click="$emit('refresh-request')"
      >
        <v-icon>mdi-refresh</v-icon>
      </v-btn>
=======
      <v-btn
        v-tooltip="'Refresh'"
        icon
        color="primary"
        hide-details="auto"
        @click="$emit('refresh-request')"
      >
        <v-icon>mdi-refresh</v-icon>
      </v-btn>
>>>>>>> REPLACE

</suggested_fix>

---

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.}

[nicoschmdt]

I have attached a video of the current refresh behaviour on the description. I'm not too sure if I like having the message "No wifi networks available" when rescanning but it is a minor nitpick

[nicoschmdt]

@ES-Alexander and @Williangalvani what do you guys think?

[ES-Alexander]

Generally looks good to me - nice work!

A small suggestion on the tooltip wording, just to make it clearer that the refresh button is not a restart button for the current connection :-)