From 34e9cdcf38a820b4f416f377692bfdb6b324e098 Mon Sep 17 00:00:00 2001
From: tsgoff <tobias.sgoff@sgoff.com>
Date: Mon, 22 Dec 2025 11:09:04 +0100
Subject: [PATCH 1/2] Implement status filter for device visibility

Added status filter functionality for devices list.
---
 src/devices/devices-list.ts | 75 +++++++++++++++++++++++++++++++++++++
 1 file changed, 75 insertions(+)

diff --git a/src/devices/devices-list.ts b/src/devices/devices-list.ts
index 06aaa72d..4ae7cd5e 100644
--- a/src/devices/devices-list.ts
+++ b/src/devices/devices-list.ts
@@ -19,12 +19,15 @@ import { MetadataRefresher } from "./device-metadata-refresher";
 import { ESPHomeSearch } from "../components/esphome-search";
 import { fireEvent } from "../util/fire-event";
 
+type StatusFilter = "all" | "online" | "offline";
+
 @customElement("esphome-devices-list")
 class ESPHomeDevicesList extends LitElement {
   @property() public showDiscoveredDevices = false;
 
   @state() private _devices?: Array<ImportableDevice | ConfiguredDevice>;
   @state() private _onlineStatus: Record<string, boolean> = {};
+  @state() private _statusFilter: StatusFilter = "all";
 
   @query("esphome-search") private _search!: ESPHomeSearch;
 
@@ -103,6 +106,24 @@ class ESPHomeDevicesList extends LitElement {
 
     return html`
       <esphome-search @input=${() => this.requestUpdate()}></esphome-search>
+      <div class="filter-bar">
+        <span class="filter-label">Status:</span>
+        <mwc-button
+          class="filter-button ${this._statusFilter === "all" ? "active" : ""}"
+          label="Alle"
+          @click=${() => this._handleStatusFilterChange("all")}
+        ></mwc-button>
+        <mwc-button
+          class="filter-button ${this._statusFilter === "online" ? "active" : ""}"
+          label="Online"
+          @click=${() => this._handleStatusFilterChange("online")}
+        ></mwc-button>
+        <mwc-button
+          class="filter-button ${this._statusFilter === "offline" ? "active" : ""}"
+          label="Offline"
+          @click=${() => this._handleStatusFilterChange("offline")}
+        ></mwc-button>
+      </div>
       ${!this.showDiscoveredDevices && discoveredCount > 0
         ? html`
             <div class="show-discovered-bar">
@@ -126,6 +147,17 @@ class ESPHomeDevicesList extends LitElement {
       return false;
     }
 
+    // Status filter for configured devices only
+    if (!this._isImportable(item) && this._statusFilter !== "all") {
+      const isOnline = this._onlineStatus[item.configuration] || false;
+      if (this._statusFilter === "online" && !isOnline) {
+        return false;
+      }
+      if (this._statusFilter === "offline" && isOnline) {
+        return false;
+      }
+    }
+
     if (this._search?.value) {
       const searchValue = this._search!.value.toLowerCase();
       if (item.name!.toLowerCase().indexOf(searchValue) >= 0) {
@@ -165,6 +197,17 @@ class ESPHomeDevicesList extends LitElement {
     openWizardDialog();
   }
 
+  private _handleStatusFilterChange(filter: StatusFilter) {
+    this._statusFilter = filter;
+    // Save to localStorage for persistence
+    try {
+      localStorage.setItem("esphome-status-filter", filter);
+    } catch (e) {
+      // Ignore localStorage errors
+    }
+    this.requestUpdate();
+  }
+
   static styles = css`
     .grid {
       display: grid;
@@ -219,6 +262,28 @@ class ESPHomeDevicesList extends LitElement {
       border-top: 1px solid var(--divider-color);
       color: var(--mdc-theme-on-primary);
     }
+    .filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 16px;
+      background-color: var(--primary-bg-color);
+      border-bottom: 1px solid var(--divider-color);
+    }
+    .filter-label {
+      font-weight: 500;
+      color: var(--primary-text-color);
+      margin-right: 8px;
+    }
+    .filter-button {
+      --mdc-theme-primary: var(--primary-text-color);
+      --mdc-button-outline-color: var(--divider-color);
+    }
+    .filter-button.active {
+      --mdc-theme-primary: var(--primary-color);
+      background-color: var(--primary-color);
+      color: white;
+    }
   `;
 
   private async _updateDevices() {
@@ -237,6 +302,16 @@ class ESPHomeDevicesList extends LitElement {
   public connectedCallback() {
     super.connectedCallback();
 
+    // Load saved filter from localStorage
+    try {
+      const savedFilter = localStorage.getItem("esphome-status-filter");
+      if (savedFilter === "online" || savedFilter === "offline" || savedFilter === "all") {
+        this._statusFilter = savedFilter;
+      }
+    } catch (e) {
+      // Ignore localStorage errors
+    }
+
     this._devicesUnsub = subscribeDevices(async (devices) => {
       if (!devices) return;
       let newName: string | undefined;

From 854602249f4fb76126e307d76eff80f3da59a874 Mon Sep 17 00:00:00 2001
From: tsgoff <tobias.sgoff@sgoff.com>
Date: Mon, 22 Dec 2025 11:19:34 +0100
Subject: [PATCH 2/2] prettier

prettier
---
 src/devices/devices-list.ts | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/devices/devices-list.ts b/src/devices/devices-list.ts
index 4ae7cd5e..bfd3ea90 100644
--- a/src/devices/devices-list.ts
+++ b/src/devices/devices-list.ts
@@ -114,12 +114,16 @@ class ESPHomeDevicesList extends LitElement {
           @click=${() => this._handleStatusFilterChange("all")}
         ></mwc-button>
         <mwc-button
-          class="filter-button ${this._statusFilter === "online" ? "active" : ""}"
+          class="filter-button ${this._statusFilter === "online"
+            ? "active"
+            : ""}"
           label="Online"
           @click=${() => this._handleStatusFilterChange("online")}
         ></mwc-button>
         <mwc-button
-          class="filter-button ${this._statusFilter === "offline" ? "active" : ""}"
+          class="filter-button ${this._statusFilter === "offline"
+            ? "active"
+            : ""}"
           label="Offline"
           @click=${() => this._handleStatusFilterChange("offline")}
         ></mwc-button>
@@ -305,7 +309,11 @@ class ESPHomeDevicesList extends LitElement {
     // Load saved filter from localStorage
     try {
       const savedFilter = localStorage.getItem("esphome-status-filter");
-      if (savedFilter === "online" || savedFilter === "offline" || savedFilter === "all") {
+      if (
+        savedFilter === "online" ||
+        savedFilter === "offline" ||
+        savedFilter === "all"
+      ) {
         this._statusFilter = savedFilter;
       }
     } catch (e) {