D (Contextual dashboards - areas, climate, lights, energy etc., not fully working)

src/common/util/media-progress.ts

@@ -1,19 +0,0 @@
-export const startMediaProgressInterval = (
-  interval: number | undefined,
-  callback: () => void,
-  intervalMs = 1000
-): number => {
-  if (interval) {
-    return interval;
-  }
-  return window.setInterval(callback, intervalMs);
-};
-
-export const stopMediaProgressInterval = (
-  interval: number | undefined
-): number | undefined => {
-  if (interval) {
-    clearInterval(interval);
-  }
-  return undefined;
-};

src/common/util/volume-slider.ts

@@ -1,186 +0,0 @@
-import type { HaSlider } from "../../components/ha-slider";
-
-interface VolumeSliderControllerOptions {
-  getSlider: () => HaSlider | undefined;
-  step: number;
-  onSetVolume: (value: number) => void;
-  onSetVolumeDebounced?: (value: number) => void;
-  onValueUpdated?: (value: number) => void;
-}
-
-export class VolumeSliderController {
-  private _touchStartX = 0;
-
-  private _touchStartY = 0;
-
-  private _touchStartValue = 0;
-
-  private _touchDragging = false;
-
-  private _touchScrolling = false;
-
-  private _dragging = false;
-
-  private _lastValue = 0;
-
-  private _options: VolumeSliderControllerOptions;
-
-  constructor(options: VolumeSliderControllerOptions) {
-    this._options = options;
-  }
-
-  public get isInteracting(): boolean {
-    return this._touchDragging || this._dragging;
-  }
-
-  public setStep(step: number): void {
-    this._options.step = step;
-  }
-
-  public handleInput = (ev: Event): void => {
-    ev.stopPropagation();
-    const value = Number((ev.target as HaSlider).value);
-    this._dragging = true;
-    this._updateValue(value);
-    this._options.onSetVolumeDebounced?.(value);
-  };
-
-  public handleChange = (ev: Event): void => {
-    ev.stopPropagation();
-    const value = Number((ev.target as HaSlider).value);
-    this._dragging = false;
-    this._updateValue(value);
-    this._options.onSetVolume(value);
-  };
-
-  public handleTouchStart = (ev: TouchEvent): void => {
-    ev.stopPropagation();
-    const touch = ev.touches[0];
-    this._touchStartX = touch.clientX;
-    this._touchStartY = touch.clientY;
-    this._touchStartValue = this._getSliderValue();
-    this._touchDragging = false;
-    this._touchScrolling = false;
-    this._showTooltip();
-  };
-
-  public handleTouchMove = (ev: TouchEvent): void => {
-    if (this._touchScrolling) {
-      return;
-    }
-    const touch = ev.touches[0];
-    const deltaX = touch.clientX - this._touchStartX;
-    const deltaY = touch.clientY - this._touchStartY;
-    const absDeltaX = Math.abs(deltaX);
-    const absDeltaY = Math.abs(deltaY);
-
-    if (!this._touchDragging) {
-      if (absDeltaY > 10 && absDeltaY > absDeltaX * 2) {
-        this._touchScrolling = true;
-        return;
-      }
-      if (absDeltaX > 8) {
-        this._touchDragging = true;
-      }
-    }
-
-    if (this._touchDragging) {
-      ev.preventDefault();
-      const newValue = this._getVolumeFromTouch(touch.clientX);
-      this._updateValue(newValue);
-    }
-  };
-
-  public handleTouchEnd = (ev: TouchEvent): void => {
-    if (this._touchScrolling) {
-      this._touchScrolling = false;
-      this._hideTooltip();
-      return;
-    }
-
-    const touch = ev.changedTouches[0];
-    if (!this._touchDragging) {
-      const tapValue = this._getVolumeFromTouch(touch.clientX);
-      const delta =
-        tapValue > this._touchStartValue
-          ? this._options.step
-          : -this._options.step;
-      const newValue = this._roundVolumeValue(this._touchStartValue + delta);
-      this._updateValue(newValue);
-      this._options.onSetVolume(newValue);
-    } else {
-      const finalValue = this._getVolumeFromTouch(touch.clientX);
-      this._updateValue(finalValue);
-      this._options.onSetVolume(finalValue);
-    }
-
-    this._touchDragging = false;
-    this._dragging = false;
-    this._hideTooltip();
-  };
-
-  public handleTouchCancel = (): void => {
-    this._touchDragging = false;
-    this._touchScrolling = false;
-    this._dragging = false;
-    this._updateValue(this._touchStartValue);
-    this._hideTooltip();
-  };
-
-  public handleWheel = (ev: WheelEvent): void => {
-    ev.preventDefault();
-    ev.stopPropagation();
-    const direction = ev.deltaY > 0 ? -1 : 1;
-    const currentValue = this._getSliderValue();
-    const newValue = this._roundVolumeValue(
-      currentValue + direction * this._options.step
-    );
-    this._updateValue(newValue);
-    this._options.onSetVolume(newValue);
-  };
-
-  private _getVolumeFromTouch(clientX: number): number {
-    const slider = this._options.getSlider();
-    if (!slider) {
-      return 0;
-    }
-    const rect = slider.getBoundingClientRect();
-    const x = Math.min(Math.max(clientX - rect.left, 0), rect.width);
-    const percentage = (x / rect.width) * 100;
-    return this._roundVolumeValue(percentage);
-  }
-
-  private _roundVolumeValue(value: number): number {
-    return Math.min(
-      Math.max(Math.round(value / this._options.step) * this._options.step, 0),
-      100
-    );
-  }
-
-  private _getSliderValue(): number {
-    const slider = this._options.getSlider();
-    if (slider) {
-      return Number(slider.value);
-    }
-    return this._lastValue;
-  }
-
-  private _updateValue(value: number): void {
-    this._lastValue = value;
-    this._options.onValueUpdated?.(value);
-    const slider = this._options.getSlider();
-    if (slider) {
-      slider.value = value;
-    }
-  }
-
-  private _showTooltip(): void {
-    const slider = this._options.getSlider() as any;
-    slider?.showTooltip?.();
-  }
-
-  private _hideTooltip(): void {
-    const slider = this._options.getSlider() as any;
-    slider?.hideTooltip?.();
-  }
-}

src/components/ha-picker-combo-box.ts

@@ -54,6 +54,7 @@ export interface PickerComboBoxItem {
   sorting_label?: string;
   icon_path?: string;
   icon?: string;
+  isRelated?: boolean;
 }
 
 export const NO_ITEMS_AVAILABLE_ID = "___no_items_available___";

src/data/media-player.ts

@@ -423,17 +423,12 @@ export const formatMediaTime = (seconds: number | undefined): string => {
     return "";
   }
 
-  const totalSeconds = Math.max(0, Math.floor(seconds));
-  const hours = Math.floor(totalSeconds / 3600);
-  const minutes = Math.floor((totalSeconds % 3600) / 60);
-  const secs = totalSeconds % 60;
-  const pad = (value: number) => value.toString().padStart(2, "0");
-
-  if (hours > 0) {
-    return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
-  }
-
-  return `${pad(minutes)}:${pad(secs)}`;
+  let secondsString = new Date(seconds * 1000).toISOString();
+  secondsString =
+    seconds > 3600
+      ? secondsString.substring(11, 16)
+      : secondsString.substring(14, 19);
+  return secondsString.replace(/^0+/, "").padStart(4, "0");
 };
 
 export const cleanupMediaTitle = (title?: string): string | undefined => {

src/dialogs/more-info/controls/more-info-media_player.ts

@@ -14,14 +14,9 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { ifDefined } from "lit/directives/if-defined";
+import { formatDurationDigital } from "../../../common/datetime/format_duration";
 import { stateActive } from "../../../common/entity/state_active";
 import { supportsFeature } from "../../../common/entity/supports-feature";
-import { debounce } from "../../../common/util/debounce";
-import {
-  startMediaProgressInterval,
-  stopMediaProgressInterval,
-} from "../../../common/util/media-progress";
-import { VolumeSliderController } from "../../../common/util/volume-slider";
 import "../../../components/chips/ha-assist-chip";
 import "../../../components/ha-button";
 import "../../../components/ha-icon-button";
@@ -43,7 +38,6 @@ import {
   cleanupMediaTitle,
   computeMediaControls,
   computeMediaDescription,
-  formatMediaTime,
   handleMediaControlClick,
   MediaPlayerEntityFeature,
   mediaPlayerPlayMedia,
@@ -60,34 +54,6 @@ class MoreInfoMediaPlayer extends LitElement {
   @query("#position-slider")
   private _positionSlider?: HaSlider;
 
-  @query(".volume-slider")
-  private _volumeSlider?: HaSlider;
-
-  private _progressInterval?: number;
-
-  private _volumeStep = 2;
-
-  private _debouncedVolumeSet = debounce((value: number) => {
-    this._setVolume(value);
-  }, 100);
-
-  private _volumeController = new VolumeSliderController({
-    getSlider: () => this._volumeSlider,
-    step: this._volumeStep,
-    onSetVolume: (value) => this._setVolume(value),
-    onSetVolumeDebounced: (value) => this._debouncedVolumeSet(value),
-  });
-
-  public connectedCallback(): void {
-    super.connectedCallback();
-    this._syncProgressInterval();
-  }
-
-  public disconnectedCallback(): void {
-    super.disconnectedCallback();
-    this._clearProgressInterval();
-  }
-
   protected firstUpdated(_changedProperties: PropertyValues) {
     if (this._positionSlider) {
       this._positionSlider.valueFormatter = (value: number) =>
@@ -96,7 +62,14 @@ class MoreInfoMediaPlayer extends LitElement {
   }
 
   private _formatDuration(duration: number) {
-    return formatMediaTime(duration);
+    const hours = Math.floor(duration / 3600);
+    const minutes = Math.floor((duration % 3600) / 60);
+    const seconds = Math.floor(duration % 60);
+    return formatDurationDigital(this.hass.locale, {
+      hours,
+      minutes,
+      seconds,
+    })!;
   }
 
   protected _renderVolumeControl() {
@@ -166,25 +139,13 @@ class MoreInfoMediaPlayer extends LitElement {
                   ${!supportsMute
                     ? html`<ha-svg-icon .path=${mdiVolumeHigh}></ha-svg-icon>`
                     : nothing}
-                  <div
-                    class="volume-slider-container"
-                    @touchstart=${this._volumeController.handleTouchStart}
-                    @touchmove=${this._volumeController.handleTouchMove}
-                    @touchend=${this._volumeController.handleTouchEnd}
-                    @touchcancel=${this._volumeController.handleTouchCancel}
-                    @wheel=${this._volumeController.handleWheel}
-                  >
-                    <ha-slider
-                      class="volume-slider"
-                      labeled
-                      id="input"
-                      .value=${Number(this.stateObj.attributes.volume_level) *
-                      100}
-                      .step=${this._volumeStep}
-                      @input=${this._volumeController.handleInput}
-                      @change=${this._volumeController.handleChange}
-                    ></ha-slider>
-                  </div>
+                  <ha-slider
+                    labeled
+                    id="input"
+                    .value=${Number(this.stateObj.attributes.volume_level) *
+                    100}
+                    @change=${this._selectedValueChanged}
+                  ></ha-slider>
                 `
               : nothing}
           </div>
@@ -300,17 +261,17 @@ class MoreInfoMediaPlayer extends LitElement {
 
     const stateObj = this.stateObj;
     const controls = computeMediaControls(stateObj, true);
-    const coverUrlRaw =
+    const coverUrl =
       stateObj.attributes.entity_picture_local ||
       stateObj.attributes.entity_picture ||
       "";
-    const coverUrl = coverUrlRaw ? this.hass.hassUrl(coverUrlRaw) : "";
     const playerObj = new HassMediaPlayerEntity(this.hass, this.stateObj);
 
     const position = Math.max(Math.floor(playerObj.currentProgress || 0), 0);
     const duration = Math.max(stateObj.attributes.media_duration || 0, 0);
+    const remaining = Math.max(duration - position, 0);
+    const remainingFormatted = this._formatDuration(remaining);
     const positionFormatted = this._formatDuration(position);
-    const durationFormatted = this._formatDuration(duration);
     const primaryTitle = cleanupMediaTitle(stateObj.attributes.media_title);
     const secondaryTitle = computeMediaDescription(stateObj);
     const turnOn = controls?.find((c) => c.action === "turn_on");
@@ -370,12 +331,8 @@ class MoreInfoMediaPlayer extends LitElement {
                 ?disabled=${!stateActive(stateObj) ||
                 !supportsFeature(stateObj, MediaPlayerEntityFeature.SEEK)}
               >
-                <span class="position-time" slot="reference"
-                  >${positionFormatted}</span
-                >
-                <span class="position-time" slot="reference"
-                  >${durationFormatted}</span
-                >
+                <span slot="reference">${positionFormatted}</span>
+                <span slot="reference">${remainingFormatted}</span>
               </ha-slider>
             </div>
           `
@@ -574,16 +531,6 @@ class MoreInfoMediaPlayer extends LitElement {
       margin-left: var(--ha-space-2);
     }
 
-    .volume-slider-container {
-      width: 100%;
-    }
-
-    @media (pointer: coarse) {
-      .volume-slider {
-        pointer-events: none;
-      }
-    }
-
     .volume ha-svg-icon {
       padding: var(--ha-space-1);
       height: 16px;
@@ -621,10 +568,6 @@ class MoreInfoMediaPlayer extends LitElement {
       color: var(--secondary-text-color);
     }
 
-    .position-time {
-      margin-top: var(--ha-space-2);
-    }
-
     .media-info-row {
       display: flex;
       flex-direction: column;
@@ -679,39 +622,6 @@ class MoreInfoMediaPlayer extends LitElement {
     );
   }
 
-  protected updated(changedProps: PropertyValues): void {
-    super.updated(changedProps);
-    if (changedProps.has("stateObj")) {
-      this._syncProgressInterval();
-    }
-  }
-
-  private _syncProgressInterval(): void {
-    if (this._shouldUpdateProgress()) {
-      this._progressInterval = startMediaProgressInterval(
-        this._progressInterval,
-        () => this.requestUpdate()
-      );
-      return;
-    }
-    this._clearProgressInterval();
-  }
-
-  private _clearProgressInterval(): void {
-    this._progressInterval = stopMediaProgressInterval(this._progressInterval);
-  }
-
-  private _shouldUpdateProgress(): boolean {
-    const stateObj = this.stateObj;
-    return (
-      !!stateObj &&
-      stateObj.state === "playing" &&
-      Number(stateObj.attributes.media_duration) > 0 &&
-      "media_position" in stateObj.attributes &&
-      "media_position_updated_at" in stateObj.attributes
-    );
-  }
-
   private _toggleMute() {
     this.hass!.callService("media_player", "volume_mute", {
       entity_id: this.stateObj!.entity_id,
@@ -719,10 +629,10 @@ class MoreInfoMediaPlayer extends LitElement {
     });
   }
 
-  private _setVolume(value: number) {
+  private _selectedValueChanged(e: Event): void {
     this.hass!.callService("media_player", "volume_set", {
       entity_id: this.stateObj!.entity_id,
-      volume_level: value / 100,
+      volume_level: (e.target as any).value / 100,
     });
   }
 

src/dialogs/more-info/ha-more-info-dialog.ts

@@ -148,6 +148,7 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     this._initialView = params.view || DEFAULT_VIEW;
     this._childView = undefined;
     this.large = false;
+    this._setQuickBarContext();
     this._loadEntityRegistryEntry();
   }
 
@@ -163,6 +164,8 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     } catch (_e) {
       this._entry = null;
     }
+
+    this._setQuickBarContext();
   }
 
   public closeDialog() {
@@ -215,6 +218,53 @@ export class MoreInfoDialog extends ScrollableFadeMixin(LitElement) {
     return !!this.hass.auth.external?.config.hasEntityAddTo;
   }
 
+  private _setQuickBarContext(): void {
+    if (!this._entityId) {
+      return;
+    }
+
+    const stateObj = this.hass.states[this._entityId] as HassEntity | undefined;
+    const context = stateObj
+      ? getEntityContext(
+          stateObj,
+          this.hass.entities,
+          this.hass.devices,
+          this.hass.areas,
+          this.hass.floors
+        )
+      : this._entry
+        ? getEntityEntryContext(
+            this._entry,
+            this.hass.entities,
+            this.hass.devices,
+            this.hass.areas,
+            this.hass.floors
+          )
+        : undefined;
+
+    const domain = computeDomain(this._entityId);
+    let itemType: ItemType = SearchableDomains.has(domain)
+      ? (domain as ItemType)
+      : "entity";
+    let itemId = this._entityId;
+
+    if (context?.device) {
+      itemType = "device";
+      itemId = context.device.id;
+    } else if (context?.area) {
+      itemType = "area";
+      itemId = context.area.area_id;
+    } else if (context?.floor) {
+      itemType = "floor";
+      itemId = context.floor.floor_id;
+    }
+
+    fireEvent(this, "hass-quick-bar-context", {
+      itemType,
+      itemId,
+    });
+  }
+
   private _getDeviceId(): string | null {
     const entity = this.hass.entities[this._entityId!] as
       | EntityRegistryEntry

src/dialogs/quick-bar/ha-quick-bar.ts

@@ -4,6 +4,7 @@ import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../common/config/is_component_loaded";
+import { computeDomain } from "../../common/entity/compute_domain";
 import { fireEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../common/string/compare";
@@ -44,6 +45,7 @@ import {
   type ActionCommandComboBoxItem,
   type NavigationComboBoxItem,
 } from "../../data/quick_bar";
+import type { RelatedResult } from "../../data/search";
 import {
   multiTermSortedSearch,
   type FuseWeightedKey,
@@ -52,7 +54,11 @@ import type { HomeAssistant } from "../../types";
 import { isIosApp } from "../../util/is_ios";
 import { showConfirmationDialog } from "../generic/show-dialog-box";
 import { showShortcutsDialog } from "../shortcuts/show-shortcuts-dialog";
-import type { QuickBarParams, QuickBarSection } from "./show-dialog-quick-bar";
+import type {
+  QuickBarContextItem,
+  QuickBarParams,
+  QuickBarSection,
+} from "./show-dialog-quick-bar";
 
 const SEPARATOR = "________";
 
@@ -70,6 +76,10 @@ export class QuickBar extends LitElement {
 
   @state() private _opened = false;
 
+  @state() private _relatedResult?: RelatedResult;
+
+  @state() private _contextItem?: QuickBarContextItem;
+
   @query("ha-picker-combo-box") private _comboBox?: HaPickerComboBox;
 
   private get _showEntityId() {
@@ -91,6 +101,15 @@ export class QuickBar extends LitElement {
     this._initialize();
     this._selectedSection = params.mode;
     this._hint = params.hint;
+
+    this._contextItem = params.contextItem;
+    this._relatedResult = params.related;
+
+    if (!params.contextItem) {
+      this._contextItem = undefined;
+      this._relatedResult = undefined;
+    }
+
     this._open = true;
   }
 
@@ -377,6 +396,8 @@ export class QuickBar extends LitElement {
     this._selectedSection = section as QuickBarSection | undefined;
     return this._getItemsMemoized(
       this._configEntryLookup,
+      this._contextItem,
+      this._relatedResult,
       searchString,
       this._selectedSection
     );
@@ -385,10 +406,13 @@ export class QuickBar extends LitElement {
   private _getItemsMemoized = memoizeOne(
     (
       configEntryLookup: Record<string, ConfigEntry>,
+      contextItem: QuickBarContextItem | undefined,
+      relatedResult: RelatedResult | undefined,
       filter?: string,
       section?: QuickBarSection
     ) => {
       const items: (string | PickerComboBoxItem)[] = [];
+      const relatedIdSets = this._getRelatedIdSets(contextItem, relatedResult);
 
       if (!section || section === "navigate") {
         let navigateItems = this._generateNavigationCommandsMemoized(
@@ -436,17 +460,29 @@ export class QuickBar extends LitElement {
       }
 
       if (!section || section === "entity") {
-        let entityItems = this._getEntitiesMemoized(this.hass).sort(
-          this._sortBySortingLabel
-        );
+        let entityItems = this._getEntitiesMemoized(this.hass);
+
+        // Mark related items
+        if (relatedIdSets.entities.size > 0) {
+          entityItems = entityItems.map((item) => ({
+            ...item,
+            isRelated: relatedIdSets.entities.has(
+              (item as EntityComboBoxItem).stateObj?.entity_id || ""
+            ),
+          }));
+        }
 
         if (filter) {
-          entityItems = this._filterGroup(
-            "entity",
-            entityItems,
-            filter,
-            entityComboBoxKeys
-          ) as EntityComboBoxItem[];
+          entityItems = this._sortRelatedFirst(
+            this._filterGroup(
+              "entity",
+              entityItems,
+              filter,
+              entityComboBoxKeys
+            ) as EntityComboBoxItem[]
+          );
+        } else {
+          entityItems = this._sortRelatedByLabel(entityItems);
         }
 
         if (!section && entityItems.length) {
@@ -463,15 +499,25 @@ export class QuickBar extends LitElement {
         let deviceItems = this._getDevicesMemoized(
           this.hass,
           configEntryLookup
-        ).sort(this._sortBySortingLabel);
+        );
+
+        // Mark related items
+        if (relatedIdSets.devices.size > 0) {
+          deviceItems = deviceItems.map((item) => {
+            const deviceId = item.id.split(SEPARATOR)[1];
+            return {
+              ...item,
+              isRelated: relatedIdSets.devices.has(deviceId || ""),
+            };
+          });
+        }
 
         if (filter) {
-          deviceItems = this._filterGroup(
-            "device",
-            deviceItems,
-            filter,
-            deviceComboBoxKeys
+          deviceItems = this._sortRelatedFirst(
+            this._filterGroup("device", deviceItems, filter, deviceComboBoxKeys)
           );
+        } else {
+          deviceItems = this._sortRelatedByLabel(deviceItems);
         }
 
         if (!section && deviceItems.length) {
@@ -487,13 +533,23 @@ export class QuickBar extends LitElement {
       if (this.hass.user?.is_admin && (!section || section === "area")) {
         let areaItems = this._getAreasMemoized(this.hass);
 
+        // Mark related items
+        if (relatedIdSets.areas.size > 0) {
+          areaItems = areaItems.map((item) => {
+            const areaId = item.id.split(SEPARATOR)[1];
+            return {
+              ...item,
+              isRelated: relatedIdSets.areas.has(areaId || ""),
+            };
+          });
+        }
+
         if (filter) {
-          areaItems = this._filterGroup(
-            "area",
-            areaItems,
-            filter,
-            areaComboBoxKeys
+          areaItems = this._sortRelatedFirst(
+            this._filterGroup("area", areaItems, filter, areaComboBoxKeys)
           );
+        } else {
+          areaItems = this._sortRelatedByLabel(areaItems);
         }
 
         if (!section && areaItems.length) {
@@ -510,6 +566,108 @@ export class QuickBar extends LitElement {
     }
   );
 
+  private _getRelatedIdSets = memoizeOne(
+    (contextItem?: QuickBarContextItem, related?: RelatedResult) => {
+      const entities = new Set(related?.entity || []);
+      const devices = new Set(related?.device || []);
+      const areas = new Set(related?.area || []);
+
+      if (contextItem) {
+        switch (contextItem.itemType) {
+          case "domain":
+            this._getDomainEntities(contextItem.itemId).forEach((entityId) =>
+              entities.add(entityId)
+            );
+            break;
+          case "entity":
+            entities.add(contextItem.itemId);
+            break;
+          case "device":
+            devices.add(contextItem.itemId);
+            break;
+          case "area":
+            areas.add(contextItem.itemId);
+            break;
+        }
+      }
+
+      return { entities, devices, areas };
+    }
+  );
+
+  private _getDomainEntities(domain: string): string[] {
+    const states = Object.values(this.hass.states);
+    if (domain === "energy") {
+      return states
+        .filter((stateObj) => {
+          if (computeDomain(stateObj.entity_id) !== "sensor") {
+            return false;
+          }
+          const deviceClass = stateObj.attributes.device_class;
+          return (
+            typeof deviceClass === "string" &&
+            ["energy", "power", "gas", "water"].includes(deviceClass)
+          );
+        })
+        .map((stateObj) => stateObj.entity_id);
+    }
+
+    if (domain === "security") {
+      const coverClasses = new Set(["door", "garage", "gate"]);
+      const binarySensorClasses = new Set([
+        "lock",
+        "door",
+        "window",
+        "garage_door",
+        "opening",
+        "carbon_monoxide",
+        "gas",
+        "moisture",
+        "safety",
+        "smoke",
+      ]);
+
+      return states
+        .filter((stateObj) => {
+          const stateDomain = computeDomain(stateObj.entity_id);
+          if (
+            stateDomain === "camera" ||
+            stateDomain === "alarm_control_panel" ||
+            stateDomain === "lock"
+          ) {
+            return true;
+          }
+
+          const deviceClass = stateObj.attributes.device_class;
+          if (stateDomain === "cover") {
+            return (
+              typeof deviceClass === "string" && coverClasses.has(deviceClass)
+            );
+          }
+
+          if (stateDomain === "binary_sensor") {
+            if (typeof deviceClass !== "string") {
+              return false;
+            }
+            if (binarySensorClasses.has(deviceClass)) {
+              return true;
+            }
+            return (
+              deviceClass === "tamper" &&
+              stateObj.attributes.entity_category === "diagnostic"
+            );
+          }
+
+          return false;
+        })
+        .map((stateObj) => stateObj.entity_id);
+    }
+
+    return states
+      .filter((stateObj) => computeDomain(stateObj.entity_id) === domain)
+      .map((stateObj) => stateObj.entity_id);
+  }
+
   private _getEntitiesMemoized = memoizeOne((hass: HomeAssistant) =>
     getEntities(
       hass,
@@ -609,6 +767,23 @@ export class QuickBar extends LitElement {
       this.hass.locale.language
     );
 
+  private _sortRelatedByLabel = (items: PickerComboBoxItem[]) =>
+    [...items].sort((a, b) => {
+      if (a.isRelated && !b.isRelated) return -1;
+      if (!a.isRelated && b.isRelated) return 1;
+      return this._sortBySortingLabel(a, b);
+    });
+
+  private _sortRelatedFirst = (items: PickerComboBoxItem[]) =>
+    [...items].sort((a, b) => {
+      const aRelated = Boolean(a.isRelated);
+      const bRelated = Boolean(b.isRelated);
+      if (aRelated === bRelated) {
+        return 0;
+      }
+      return aRelated ? -1 : 1;
+    });
+
   // #endregion data
 
   // #region interaction

src/dialogs/quick-bar/show-dialog-quick-bar.ts

@@ -1,4 +1,5 @@
 import { fireEvent } from "../../common/dom/fire_event";
+import type { ItemType, RelatedResult } from "../../data/search";
 
 export type QuickBarSection =
   | "entity"
@@ -7,10 +8,19 @@ export type QuickBarSection =
   | "navigate"
   | "command";
 
+export type QuickBarContextItemType = ItemType | "domain";
+
+export interface QuickBarContextItem {
+  itemType: QuickBarContextItemType;
+  itemId: string;
+}
+
 export interface QuickBarParams {
   entityFilter?: string;
   mode?: QuickBarSection;
   hint?: string;
+  contextItem?: QuickBarContextItem;
+  related?: RelatedResult;
 }
 
 export const loadQuickBar = () => import("./ha-quick-bar");

src/panels/climate/ha-panel-climate.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -45,6 +46,8 @@ class PanelClimate extends LitElement {
       return;
     }
 
+    this._setQuickBarContext();
+
     const oldHass = changedProps.get("hass") as this["hass"];
     if (oldHass && oldHass.localize !== this.hass.localize) {
       this._setLovelace();
@@ -76,6 +79,7 @@ class PanelClimate extends LitElement {
 
   private async _setup() {
     await this.hass.loadFragmentTranslation("lovelace");
+    this._setQuickBarContext();
     this._setLovelace();
   }
 
@@ -163,6 +167,13 @@ class PanelClimate extends LitElement {
     };
   }
 
+  private _setQuickBarContext() {
+    fireEvent(this, "hass-quick-bar-context", {
+      itemType: "domain",
+      itemId: "climate",
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/config/areas/dialog-area-registry-detail.ts

@@ -80,6 +80,12 @@ class DialogAreaDetail
   ): Promise<void> {
     this._params = params;
     this._error = undefined;
+    if (this._params.entry) {
+      fireEvent(this, "hass-quick-bar-context", {
+        itemType: "area",
+        itemId: this._params.entry.area_id,
+      });
+    }
     if (this._params.entry) {
       this._name = this._params.entry.name;
       this._aliases = this._params.entry.aliases;

src/panels/config/areas/dialog-floor-registry-detail.ts

@@ -55,6 +55,12 @@ class DialogFloorDetail extends LitElement {
   public showDialog(params: FloorRegistryDetailDialogParams): void {
     this._params = params;
     this._error = undefined;
+    if (this._params.entry) {
+      fireEvent(this, "hass-quick-bar-context", {
+        itemType: "floor",
+        itemId: this._params.entry.floor_id,
+      });
+    }
     this._name = this._params.entry
       ? this._params.entry.name
       : this._params.suggestedName || "";

src/panels/config/areas/ha-config-area-page.ts

@@ -10,6 +10,7 @@ import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeStateName } from "../../../common/entity/compute_state_name";
+import { fireEvent } from "../../../common/dom/fire_event";
 import { goBack } from "../../../common/navigate";
 import { caseInsensitiveStringCompare } from "../../../common/string/compare";
 import { slugify } from "../../../common/string/slugify";
@@ -137,6 +138,12 @@ class HaConfigAreaPage extends LitElement {
     super.updated(changedProps);
     if (changedProps.has("areaId")) {
       this._findRelated();
+      if (this.areaId) {
+        fireEvent(this, "hass-quick-bar-context", {
+          itemType: "area",
+          itemId: this.areaId,
+        });
+      }
     }
   }
 

src/panels/config/automation/ha-automation-editor.ts

@@ -682,6 +682,16 @@ export class HaAutomationEditor extends PreventUnsavedMixin(
         sub(this._config)
       );
     }
+
+    if (changedProps.has("_entityId") || changedProps.has("entityId")) {
+      const automationEntityId = this._entityId ?? this.entityId;
+      if (automationEntityId) {
+        fireEvent(this, "hass-quick-bar-context", {
+          itemType: "automation",
+          itemId: automationEntityId,
+        });
+      }
+    }
   }
 
   private _setEntityId() {

src/panels/config/devices/device-registry-detail/dialog-device-registry-detail.ts

@@ -41,6 +41,10 @@ class DialogDeviceRegistryDetail extends LitElement {
   ): Promise<void> {
     this._params = params;
     this._error = undefined;
+    fireEvent(this, "hass-quick-bar-context", {
+      itemType: "device",
+      itemId: this._params.device.id,
+    });
     this._nameByUser = this._params.device.name_by_user || "";
     this._areaId = this._params.device.area_id || "";
     this._labels = this._params.device.labels || [];

src/panels/config/devices/ha-config-device-page.ts

@@ -20,6 +20,7 @@ import { ifDefined } from "lit/directives/if-defined";
 import memoizeOne from "memoize-one";
 import { isComponentLoaded } from "../../../common/config/is_component_loaded";
 import { ASSIST_ENTITIES, SENSOR_ENTITIES } from "../../../common/const";
+import { fireEvent } from "../../../common/dom/fire_event";
 import { computeDeviceNameDisplay } from "../../../common/entity/compute_device_name";
 import { computeDomain } from "../../../common/entity/compute_domain";
 import { computeEntityEntryName } from "../../../common/entity/compute_entity_name";
@@ -302,6 +303,11 @@ export class HaConfigDevicePage extends LitElement {
     super.updated(changedProps);
     if (changedProps.has("deviceId")) {
       this._findRelated();
+      // Broadcast device context for quick bar
+      fireEvent(this, "hass-quick-bar-context", {
+        itemType: "device",
+        itemId: this.deviceId,
+      });
     }
   }
 

src/panels/config/integrations/dialog-add-integration.ts

@@ -105,19 +105,10 @@ class AddIntegrationDialog extends LitElement {
     const loadPromise = this._load();
 
     if (params?.domain) {
-      // If we get here we clicked the button to add an entry for a specific integration
-      // If there is discovery in process, show this dialog to select a new flow
-      // or continue an existing flow.
-      // If no flow in process, just open the config flow dialog directly
+      // Just open the config flow dialog, do not show this dialog
       await loadPromise;
-      const flowsInProgress = this._getFlowsInProgressForDomains([
-        params.domain,
-      ]);
-
-      if (!flowsInProgress.length) {
-        await this._createFlow(params.domain);
-        return;
-      }
+      await this._createFlow(params.domain);
+      return;
     }
 
     if (params?.brand === "_discovered") {
@@ -126,12 +117,10 @@ class AddIntegrationDialog extends LitElement {
       this._showDiscovered = true;
     }
 
-    // Only open the dialog if no domain is provided or we need to select a flow
+    // Only open the dialog if no domain is provided
     this._open = true;
     this._pickedBrand =
-      params?.brand === "_discovered"
-        ? undefined
-        : params?.domain || params?.brand;
+      params?.brand === "_discovered" ? undefined : params?.brand;
     this._initialFilter = params?.initialFilter;
     this._navigateToResult = params?.navigateToResult ?? false;
     this._narrow = matchMedia(

src/panels/config/labels/dialog-label-detail.ts

@@ -43,6 +43,12 @@ class DialogLabelDetail
   public showDialog(params: LabelDetailDialogParams): void {
     this._params = params;
     this._error = undefined;
+    if (this._params.entry) {
+      fireEvent(this, "hass-quick-bar-context", {
+        itemType: "label",
+        itemId: this._params.entry.label_id,
+      });
+    }
     if (this._params.entry) {
       this._name = this._params.entry.name || "";
       this._icon = this._params.entry.icon || "";

src/panels/config/scene/ha-scene-editor.ts

@@ -652,6 +652,13 @@ export class HaSceneEditor extends PreventUnsavedMixin(
         );
       }
     }
+
+    if (changedProps.has("_scene") && this._scene?.entity_id) {
+      fireEvent(this, "hass-quick-bar-context", {
+        itemType: "scene",
+        itemId: this._scene.entity_id,
+      });
+    }
   }
 
   private _handleMenuAction(ev: CustomEvent<{ item: HaDropdownItem }>) {

src/panels/config/script/ha-script-editor.ts

@@ -583,6 +583,13 @@ export class HaScriptEditor extends SubscribeMixin(
       this._dirty = false;
       this._readOnly = true;
     }
+
+    if (changedProps.has("_entityId") && this._entityId) {
+      fireEvent(this, "hass-quick-bar-context", {
+        itemType: "script",
+        itemId: this._entityId,
+      });
+    }
   }
 
   private async _checkValidation() {

src/panels/config/voice-assistants/expose/assistants-table-column.ts

@@ -22,7 +22,6 @@ export function getAssistantsTableColumn<T>(
     type: "flex",
     defaultHidden: !visible,
     sortable: true,
-    showNarrow: true,
     minWidth: "160px",
     maxWidth: "160px",
     valueColumn: "assistants_sortable_key",

src/panels/energy/ha-panel-energy.ts

@@ -3,6 +3,7 @@ import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
+import { fireEvent } from "../../common/dom/fire_event";
 import { navigate } from "../../common/navigate";
 import type { LocalizeKeys } from "../../common/translations/localize";
 import "../../components/ha-alert";
@@ -133,6 +134,7 @@ class PanelEnergy extends LitElement {
     // Initial setup
     if (!this.hasUpdated) {
       this.hass.loadFragmentTranslation("lovelace");
+      this._setQuickBarContext();
       this._loadConfig();
       return;
     }
@@ -141,6 +143,8 @@ class PanelEnergy extends LitElement {
       return;
     }
 
+    this._setQuickBarContext();
+
     const oldHass = changedProps.get("hass") as this["hass"];
     if (oldHass && oldHass.localize !== this.hass.localize) {
       this._setLovelace();
@@ -207,6 +211,13 @@ class PanelEnergy extends LitElement {
     };
   }
 
+  private _setQuickBarContext() {
+    fireEvent(this, "hass-quick-bar-context", {
+      itemType: "domain",
+      itemId: "energy",
+    });
+  }
+
   protected render() {
     if (this._error) {
       return html`

src/panels/home/ha-panel-home.ts

@@ -3,7 +3,6 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
-import { updateDeviceRegistryEntry } from "../../data/device/device_registry";
 import {
   fetchFrontendSystemData,
   saveFrontendSystemData,
@@ -15,7 +14,6 @@ import { showToast } from "../../util/toast";
 import "../lovelace/hui-root";
 import { expandLovelaceConfigStrategies } from "../lovelace/strategies/get-strategy";
 import type { Lovelace } from "../lovelace/types";
-import { showDeviceRegistryDetailDialog } from "../config/devices/device-registry-detail/show-dialog-device-registry-detail";
 import { showEditHomeDialog } from "./dialogs/show-dialog-edit-home";
 
 @customElement("ha-panel-home")
@@ -97,29 +95,6 @@ class PanelHome extends LitElement {
     this._setLovelace();
   };
 
-  private _handleLLCustomEvent = (ev: Event) => {
-    const detail = (ev as CustomEvent).detail;
-    if (detail.home_panel) {
-      const { type, device_id } = detail.home_panel;
-      if (type === "assign_area") {
-        this._showAssignAreaDialog(device_id);
-      }
-    }
-  };
-
-  private _showAssignAreaDialog(deviceId: string) {
-    const device = this.hass.devices[deviceId];
-    if (!device) {
-      return;
-    }
-    showDeviceRegistryDetailDialog(this, {
-      device,
-      updateEntry: async (updates) => {
-        await updateDeviceRegistryEntry(this.hass, deviceId, updates);
-      },
-    });
-  }
-
   protected render() {
     if (!this._lovelace) {
       return nothing;
@@ -132,7 +107,6 @@ class PanelHome extends LitElement {
         .lovelace=${this._lovelace}
         .route=${this.route}
         .panel=${this.panel}
-        @ll-custom=${this._handleLLCustomEvent}
       ></hui-root>
     `;
   }
@@ -142,7 +116,6 @@ class PanelHome extends LitElement {
       strategy: {
         type: "home",
         favorite_entities: this._config.favorite_entities,
-        home_panel: true,
       },
     };
 

src/panels/light/ha-panel-light.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -45,6 +46,8 @@ class PanelLight extends LitElement {
       return;
     }
 
+    this._setQuickBarContext();
+
     const oldHass = changedProps.get("hass") as this["hass"];
     if (oldHass && oldHass.localize !== this.hass.localize) {
       this._setLovelace();
@@ -76,6 +79,7 @@ class PanelLight extends LitElement {
 
   private async _setup() {
     await this.hass.loadFragmentTranslation("lovelace");
+    this._setQuickBarContext();
     this._setLovelace();
   }
 
@@ -163,6 +167,13 @@ class PanelLight extends LitElement {
     };
   }
 
+  private _setQuickBarContext() {
+    fireEvent(this, "hass-quick-bar-context", {
+      itemType: "domain",
+      itemId: "light",
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/panels/lovelace/editor/card-editor/hui-card-layout-editor.ts

@@ -1,3 +1,4 @@
+import type { ActionDetail } from "@material/mwc-list";
 import { mdiDotsVertical, mdiPlaylistEdit } from "@mdi/js";
 import type { PropertyValues } from "lit";
 import { css, html, LitElement } from "lit";
@@ -5,12 +6,13 @@ import { customElement, property, state } from "lit/decorators";
 import { styleMap } from "lit/directives/style-map";
 import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { preventDefault } from "../../../../common/dom/prevent_default";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dropdown";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
+import "../../../../components/ha-button-menu";
 import "../../../../components/ha-grid-size-picker";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-list-item";
 import "../../../../components/ha-settings-row";
 import "../../../../components/ha-slider";
 import "../../../../components/ha-svg-icon";
@@ -92,10 +94,14 @@ export class HuiCardLayoutEditor extends LitElement {
             "ui.panel.lovelace.editor.edit_card.layout.explanation"
           )}
         </p>
-        <ha-dropdown
+        <ha-button-menu
           slot="icons"
-          @wa-select=${this._handleAction}
-          placement="bottom-end"
+          @action=${this._handleAction}
+          @click=${preventDefault}
+          @closed=${stopPropagation}
+          fixed
+          .corner=${"BOTTOM_END"}
+          menu-corner="END"
         >
           <ha-icon-button
             slot="trigger"
@@ -104,13 +110,13 @@ export class HuiCardLayoutEditor extends LitElement {
           >
           </ha-icon-button>
 
-          <ha-dropdown-item value="toggle_yaml" .disabled=${!this._uiAvailable}>
+          <ha-list-item graphic="icon" .disabled=${!this._uiAvailable}>
             ${this.hass.localize(
               `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}`
             )}
-            <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
-          </ha-dropdown-item>
-        </ha-dropdown>
+            <ha-svg-icon slot="graphic" .path=${mdiPlaylistEdit}></ha-svg-icon>
+          </ha-list-item>
+        </ha-button-menu>
       </div>
       ${this._yamlMode
         ? html`
@@ -238,11 +244,11 @@ export class HuiCardLayoutEditor extends LitElement {
     }
   }
 
-  private async _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail.item.value;
-
-    if (action === "toggle_yaml") {
-      this._yamlMode = !this._yamlMode;
+  private async _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
+        this._yamlMode = !this._yamlMode;
+        break;
     }
   }
 
@@ -325,7 +331,7 @@ export class HuiCardLayoutEditor extends LitElement {
         margin: 0;
         color: var(--secondary-text-color);
       }
-      .header ha-dropdown {
+      .header ha-button-menu {
         --mdc-theme-text-primary-on-background: var(--primary-text-color);
         margin-top: -8px;
       }

src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts

@@ -1,4 +1,4 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
+import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiContentCopy,
   mdiContentCut,
@@ -16,15 +16,15 @@ import { classMap } from "lit/directives/class-map";
 import { storage } from "../../../../common/decorators/storage";
 import { dynamicElement } from "../../../../common/dom/dynamic-element-directive";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { preventDefault } from "../../../../common/dom/prevent_default";
 import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { handleStructError } from "../../../../common/structs/handle-errors";
 import "../../../../components/ha-alert";
+import "../../../../components/ha-button-menu";
 import "../../../../components/ha-card";
-import "../../../../components/ha-dropdown";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-expansion-panel";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-list-item";
 import "../../../../components/ha-svg-icon";
 import "../../../../components/ha-yaml-editor";
 import { showAlertDialog } from "../../../../dialogs/generic/show-dialog-box";
@@ -126,11 +126,14 @@ export class HaCardConditionEditor extends LitElement {
               `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
             ) || condition.condition}
           </h3>
-          <ha-dropdown
+          <ha-button-menu
             slot="icons"
-            @wa-select=${this._handleAction}
-            @click=${stopPropagation}
-            placement="bottom-end"
+            @action=${this._handleAction}
+            @click=${preventDefault}
+            @closed=${stopPropagation}
+            fixed
+            .corner=${"BOTTOM_END"}
+            menu-corner="END"
           >
             <ha-icon-button
               slot="trigger"
@@ -139,50 +142,54 @@ export class HaCardConditionEditor extends LitElement {
             >
             </ha-icon-button>
 
-            <ha-dropdown-item value="test">
+            <ha-list-item graphic="icon">
               ${this.hass.localize(
                 "ui.panel.lovelace.editor.condition-editor.test"
               )}
-              <ha-svg-icon slot="icon" .path=${mdiFlask}></ha-svg-icon>
-            </ha-dropdown-item>
+              <ha-svg-icon slot="graphic" .path=${mdiFlask}></ha-svg-icon>
+            </ha-list-item>
 
-            <ha-dropdown-item value="duplicate">
+            <ha-list-item graphic="icon">
               ${this.hass.localize(
                 "ui.panel.lovelace.editor.edit_card.duplicate"
               )}
               <ha-svg-icon
-                slot="icon"
+                slot="graphic"
                 .path=${mdiContentDuplicate}
               ></ha-svg-icon>
-            </ha-dropdown-item>
+            </ha-list-item>
 
-            <ha-dropdown-item value="copy">
+            <ha-list-item graphic="icon">
               ${this.hass.localize("ui.panel.lovelace.editor.edit_card.copy")}
-              <ha-svg-icon slot="icon" .path=${mdiContentCopy}></ha-svg-icon>
-            </ha-dropdown-item>
+              <ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon>
+            </ha-list-item>
 
-            <ha-dropdown-item value="cut">
+            <ha-list-item graphic="icon">
               ${this.hass.localize("ui.panel.lovelace.editor.edit_card.cut")}
-              <ha-svg-icon slot="icon" .path=${mdiContentCut}></ha-svg-icon>
-            </ha-dropdown-item>
+              <ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
+            </ha-list-item>
 
-            <ha-dropdown-item
-              value="toggle_yaml"
-              .disabled=${!this._uiAvailable}
-            >
+            <ha-list-item graphic="icon" .disabled=${!this._uiAvailable}>
               ${this.hass.localize(
                 `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}`
               )}
-              <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
-            </ha-dropdown-item>
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiPlaylistEdit}
+              ></ha-svg-icon>
+            </ha-list-item>
 
-            <wa-divider></wa-divider>
+            <li divider role="separator"></li>
 
-            <ha-dropdown-item variant="danger" value="delete">
+            <ha-list-item class="warning" graphic="icon">
               ${this.hass!.localize("ui.common.delete")}
-              <ha-svg-icon slot="icon" .path=${mdiDelete}></ha-svg-icon>
-            </ha-dropdown-item>
-          </ha-dropdown>
+              <ha-svg-icon
+                class="warning"
+                slot="graphic"
+                .path=${mdiDelete}
+              ></ha-svg-icon>
+            </ha-list-item>
+          </ha-button-menu>
           ${!this._uiAvailable
             ? html`
                 <ha-alert
@@ -245,31 +252,26 @@ export class HaCardConditionEditor extends LitElement {
     `;
   }
 
-  private async _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail.item.value;
-
-    if (action === undefined) {
-      return;
-    }
-
-    switch (action) {
-      case "test":
+  private async _handleAction(ev: CustomEvent<ActionDetail>) {
+    switch (ev.detail.index) {
+      case 0:
         await this._testCondition();
-        return;
-      case "duplicate":
+        break;
+      case 1:
         this._duplicateCondition();
-        return;
-      case "copy":
+        break;
+      case 2:
         this._copyCondition();
-        return;
-      case "cut":
+        break;
+      case 3:
         this._cutCondition();
-        return;
-      case "toggle_yaml":
+        break;
+      case 4:
         this._yamlMode = !this._yamlMode;
-        return;
-      case "delete":
+        break;
+      case 5:
         this._delete();
+        break;
     }
   }
 
@@ -319,9 +321,9 @@ export class HaCardConditionEditor extends LitElement {
     this._delete();
   }
 
-  private _delete = () => {
+  private _delete() {
     fireEvent(this, "value-changed", { value: null });
-  };
+  }
 
   private _onYamlChange(ev: CustomEvent) {
     ev.stopPropagation();
@@ -335,7 +337,7 @@ export class HaCardConditionEditor extends LitElement {
   static styles = [
     haStyle,
     css`
-      ha-dropdown {
+      ha-button-menu {
         --mdc-theme-text-primary-on-background: var(--primary-text-color);
       }
       ha-expansion-panel {

src/panels/lovelace/editor/conditions/ha-card-conditions-editor.ts

@@ -3,12 +3,11 @@ import deepClone from "deep-clone-simple";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
-import { storage } from "../../../../common/decorators/storage";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dropdown";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
+import "../../../../components/ha-list-item";
+import type { HaSelect } from "../../../../components/ha-select";
 import "../../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../../types";
 import { ICON_CONDITION } from "../../common/icon-condition";
@@ -28,6 +27,7 @@ import "./types/ha-card-condition-screen";
 import "./types/ha-card-condition-state";
 import "./types/ha-card-condition-time";
 import "./types/ha-card-condition-user";
+import { storage } from "../../../../common/decorators/storage";
 
 const UI_CONDITION = [
   "location",
@@ -41,6 +41,8 @@ const UI_CONDITION = [
   "or",
 ] as const satisfies readonly Condition["condition"][];
 
+export const PASTE_VALUE = "__paste__" as const;
+
 @customElement("ha-card-conditions-editor")
 export class HaCardConditionsEditor extends LitElement {
   @property({ attribute: false }) public hass!: HomeAssistant;
@@ -105,7 +107,11 @@ export class HaCardConditionsEditor extends LitElement {
           `
         )}
         <div>
-          <ha-dropdown @wa-select=${this._addCondition}>
+          <ha-button-menu
+            @action=${this._addCondition}
+            fixed
+            @closed=${stopPropagation}
+          >
             <ha-button slot="trigger" appearance="filled">
               <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
               ${this.hass.localize(
@@ -114,57 +120,59 @@ export class HaCardConditionsEditor extends LitElement {
             </ha-button>
             ${this._clipboard
               ? html`
-                  <ha-dropdown-item value="paste">
+                  <ha-list-item .value=${PASTE_VALUE} graphic="icon">
                     ${this.hass.localize(
                       "ui.panel.lovelace.editor.edit_card.paste_condition"
                     )}
                     <ha-svg-icon
-                      slot="icon"
+                      slot="graphic"
                       .path=${mdiContentPaste}
                     ></ha-svg-icon>
-                  </ha-dropdown-item>
+                  </ha-list-item>
                 `
               : nothing}
             ${UI_CONDITION.map(
               (condition) => html`
-                <ha-dropdown-item .value=${condition}>
+                <ha-list-item .value=${condition} graphic="icon">
                   ${this.hass!.localize(
                     `ui.panel.lovelace.editor.condition-editor.condition.${condition}.label`
                   ) || condition}
                   <ha-svg-icon
-                    slot="icon"
+                    slot="graphic"
                     .path=${ICON_CONDITION[condition]}
                   ></ha-svg-icon>
-                </ha-dropdown-item>
+                </ha-list-item>
               `
             )}
-          </ha-dropdown>
+          </ha-button-menu>
         </div>
       </div>
     `;
   }
 
-  private _addCondition(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const condition = ev.detail.item.value as "paste" | Condition["condition"];
+  private _addCondition(ev: CustomEvent): void {
     const conditions = [...this.conditions];
 
-    if (!condition || (condition === "paste" && !this._clipboard)) {
+    const item = (ev.currentTarget as HaSelect).items[ev.detail.index];
+
+    if (item.value === PASTE_VALUE && this._clipboard) {
+      const condition = deepClone(this._clipboard);
+      conditions.push(condition);
+      fireEvent(this, "value-changed", { value: conditions });
       return;
     }
 
-    if (condition === "paste") {
-      const newCondition = deepClone(this._clipboard);
-      conditions.push(newCondition);
-    } else {
-      const elClass = customElements.get(`ha-card-condition-${condition}`) as
-        | LovelaceConditionEditorConstructor
-        | undefined;
+    const condition = item.value as Condition["condition"];
 
-      conditions.push(
-        elClass?.defaultConfig ? { ...elClass.defaultConfig } : { condition }
-      );
-    }
+    const elClass = customElements.get(`ha-card-condition-${condition}`) as
+      | LovelaceConditionEditorConstructor
+      | undefined;
 
+    conditions.push(
+      elClass?.defaultConfig
+        ? { ...elClass.defaultConfig }
+        : { condition: condition }
+    );
     this._focusLastConditionOnChange = true;
     fireEvent(this, "value-changed", { value: conditions });
   }
@@ -202,9 +210,8 @@ export class HaCardConditionsEditor extends LitElement {
           margin-top: 12px;
           scroll-margin-top: 48px;
         }
-        ha-dropdown {
-          display: inline-block;
-          margin-top: var(--ha-space-3);
+        ha-button-menu {
+          margin-top: 12px;
         }
       `,
     ];

src/panels/lovelace/editor/config-elements/hui-card-features-editor.ts

@@ -1,4 +1,3 @@
-import "@home-assistant/webawesome/dist/components/divider/divider";
 import {
   mdiDelete,
   mdiDragHorizontalVariant,
@@ -9,11 +8,10 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import { repeat } from "lit/directives/repeat";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import "../../../../components/ha-button";
-import "../../../../components/ha-dropdown";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
 import "../../../../components/ha-icon-button";
+import "../../../../components/ha-list-item";
 import "../../../../components/ha-sortable";
 import "../../../../components/ha-svg-icon";
 import type { CustomCardFeatureEntry } from "../../../../data/lovelace_custom_cards";
@@ -26,7 +24,6 @@ import {
 import type { HomeAssistant } from "../../../../types";
 import { supportsAlarmModesCardFeature } from "../../card-features/hui-alarm-modes-card-feature";
 import { supportsAreaControlsCardFeature } from "../../card-features/hui-area-controls-card-feature";
-import { supportsBarGaugeCardFeature } from "../../card-features/hui-bar-gauge-card-feature";
 import { supportsButtonCardFeature } from "../../card-features/hui-button-card-feature";
 import { supportsClimateFanModesCardFeature } from "../../card-features/hui-climate-fan-modes-card-feature";
 import { supportsClimateHvacModesCardFeature } from "../../card-features/hui-climate-hvac-modes-card-feature";
@@ -55,14 +52,15 @@ import { supportsMediaPlayerVolumeButtonsCardFeature } from "../../card-features
 import { supportsMediaPlayerVolumeSliderCardFeature } from "../../card-features/hui-media-player-volume-slider-card-feature";
 import { supportsNumericInputCardFeature } from "../../card-features/hui-numeric-input-card-feature";
 import { supportsSelectOptionsCardFeature } from "../../card-features/hui-select-options-card-feature";
+import { supportsTrendGraphCardFeature } from "../../card-features/hui-trend-graph-card-feature";
 import { supportsTargetHumidityCardFeature } from "../../card-features/hui-target-humidity-card-feature";
 import { supportsTargetTemperatureCardFeature } from "../../card-features/hui-target-temperature-card-feature";
 import { supportsToggleCardFeature } from "../../card-features/hui-toggle-card-feature";
-import { supportsTrendGraphCardFeature } from "../../card-features/hui-trend-graph-card-feature";
 import { supportsUpdateActionsCardFeature } from "../../card-features/hui-update-actions-card-feature";
 import { supportsVacuumCommandsCardFeature } from "../../card-features/hui-vacuum-commands-card-feature";
 import { supportsValveOpenCloseCardFeature } from "../../card-features/hui-valve-open-close-card-feature";
 import { supportsValvePositionCardFeature } from "../../card-features/hui-valve-position-card-feature";
+import { supportsBarGaugeCardFeature } from "../../card-features/hui-bar-gauge-card-feature";
 import { supportsWaterHeaterOperationModesCardFeature } from "../../card-features/hui-water-heater-operation-modes-card-feature";
 import type {
   LovelaceCardFeatureConfig,
@@ -406,39 +404,45 @@ export class HuiCardFeaturesEditor extends LitElement {
       </ha-sortable>
       ${supportedFeaturesType.length > 0
         ? html`
-            <ha-dropdown @wa-select=${this._addFeature}>
+            <ha-button-menu
+              fixed
+              @action=${this._addFeature}
+              @closed=${stopPropagation}
+            >
               <ha-button slot="trigger" appearance="filled" size="small">
                 <ha-svg-icon .path=${mdiPlus} slot="start"></ha-svg-icon>
                 ${this.hass!.localize(`ui.panel.lovelace.editor.features.add`)}
               </ha-button>
               ${types.map(
                 (type) => html`
-                  <ha-dropdown-item .value=${type}>
+                  <ha-list-item .value=${type}>
                     ${this._getFeatureTypeLabel(type)}
-                  </ha-dropdown-item>
+                  </ha-list-item>
                 `
               )}
               ${types.length > 0 && customTypes.length > 0
-                ? html`<wa-divider></wa-divider>`
+                ? html`<li divider role="separator"></li>`
                 : nothing}
               ${customTypes.map(
                 (type) => html`
-                  <ha-dropdown-item .value=${type}>
+                  <ha-list-item .value=${type}>
                     ${this._getFeatureTypeLabel(type)}
-                  </ha-dropdown-item>
+                  </ha-list-item>
                 `
               )}
-            </ha-dropdown>
+            </ha-button-menu>
           `
         : nothing}
     `;
   }
 
-  private async _addFeature(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const value = ev.detail.item.value as FeatureType;
-    if (!value) {
-      return;
-    }
+  private async _addFeature(ev: CustomEvent): Promise<void> {
+    const index = ev.detail.index as number;
+
+    if (index == null) return;
+
+    const value = this._getSupportedFeaturesType()[index];
+    if (!value) return;
 
     const elClass = await getCardFeatureElementClass(value);
 
@@ -495,9 +499,7 @@ export class HuiCardFeaturesEditor extends LitElement {
       display: flex !important;
       flex-direction: column;
     }
-    ha-dropdown {
-      display: inline-block;
-      align-self: flex-start;
+    ha-button-menu {
       margin-top: var(--ha-space-2);
     }
     .feature {

src/panels/lovelace/editor/dashboard-strategy-editor/dialogs/dialog-dashboard-strategy-editor.ts

@@ -9,13 +9,13 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import type { HASSDomEvent } from "../../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../../common/dom/stop_propagation";
 import "../../../../../components/ha-button";
+import "../../../../../components/ha-button-menu";
 import "../../../../../components/ha-dialog";
 import "../../../../../components/ha-dialog-header";
-import "../../../../../components/ha-dropdown";
-import "../../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../../components/ha-dropdown-item";
 import "../../../../../components/ha-icon-button";
+import "../../../../../components/ha-list-item";
 import type { LovelaceStrategyConfig } from "../../../../../data/lovelace/config/strategy";
 import {
   haStyleDialog,
@@ -98,18 +98,13 @@ class DialogDashboardStrategyEditor extends LitElement {
     this.closeDialog();
   }
 
-  private _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail.item.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "toggle-mode":
+  private _handleAction(ev) {
+    ev.stopPropagation();
+    switch (ev.detail.index) {
+      case 0:
         this._toggleMode();
         break;
-      case "take-control":
+      case 1:
         this._takeControl();
         break;
     }
@@ -155,32 +150,41 @@ class DialogDashboardStrategyEditor extends LitElement {
           ${this._params.title
             ? html`<span slot="subtitle">${this._params.title}</span>`
             : nothing}
-          <ha-dropdown
-            placement="bottom-end"
+          <ha-button-menu
+            corner="BOTTOM_END"
+            menu-corner="END"
             slot="actionItems"
-            @wa-select=${this._handleAction}
+            @closed=${stopPropagation}
+            fixed
+            @action=${this._handleAction}
           >
             <ha-icon-button
               slot="trigger"
               .label=${this.hass.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <ha-dropdown-item
-              value="toggle-mode"
+            <ha-list-item
+              graphic="icon"
               .disabled=${!this._guiModeAvailable && !this._GUImode}
             >
               ${this.hass!.localize(
                 `ui.panel.lovelace.editor.edit_view.edit_${!this._GUImode ? "ui" : "yaml"}`
               )}
-              <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
-            </ha-dropdown-item>
-            <ha-dropdown-item value="take-control">
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiPlaylistEdit}
+              ></ha-svg-icon>
+            </ha-list-item>
+            <ha-list-item graphic="icon">
               ${this.hass.localize(
                 "ui.panel.lovelace.editor.strategy-editor.take_control"
               )}
-              <ha-svg-icon slot="icon" .path=${mdiAccountHardHat}></ha-svg-icon>
-            </ha-dropdown-item>
-          </ha-dropdown>
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiAccountHardHat}
+              ></ha-svg-icon>
+            </ha-list-item>
+          </ha-button-menu>
         </ha-dialog-header>
         <div class="content">
           <hui-dashboard-strategy-element-editor

src/panels/lovelace/editor/view-editor/hui-dialog-edit-view.ts

@@ -1,3 +1,4 @@
+import type { ActionDetail } from "@material/mwc-list";
 import {
   mdiClose,
   mdiDotsVertical,
@@ -10,15 +11,14 @@ import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import type { HASSDomEvent } from "../../../../common/dom/fire_event";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { navigate } from "../../../../common/navigate";
 import { deepEqual } from "../../../../common/util/deep-equal";
 import "../../../../components/ha-alert";
 import "../../../../components/ha-button";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
-import "../../../../components/ha-dropdown";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
+import "../../../../components/ha-list-item";
 import "../../../../components/ha-spinner";
 import "../../../../components/ha-tab-group";
 import "../../../../components/ha-tab-group-tab";
@@ -218,32 +218,38 @@ export class HuiDialogEditView extends LitElement {
             .path=${mdiClose}
           ></ha-icon-button>
           <h2 slot="title">${this._viewConfigTitle}</h2>
-          <ha-dropdown
+          <ha-button-menu
             slot="actionItems"
-            placement="bottom-end"
-            @wa-select=${this._handleAction}
+            fixed
+            corner="BOTTOM_END"
+            menu-corner="END"
+            @action=${this._handleAction}
+            @closed=${stopPropagation}
           >
             <ha-icon-button
               slot="trigger"
               .label=${this.hass!.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <ha-dropdown-item value="toggle-mode">
+            <ha-list-item graphic="icon">
               ${this.hass!.localize(
                 `ui.panel.lovelace.editor.edit_view.edit_${!this._yamlMode ? "yaml" : "ui"}`
               )}
-              <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
-            </ha-dropdown-item>
-            <ha-dropdown-item value="move-to-dashboard">
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiPlaylistEdit}
+              ></ha-svg-icon>
+            </ha-list-item>
+            <ha-list-item graphic="icon">
               ${this.hass!.localize(
                 "ui.panel.lovelace.editor.edit_view.move_to_dashboard"
               )}
               <ha-svg-icon
-                slot="icon"
+                slot="graphic"
                 .path=${mdiFileMoveOutline}
               ></ha-svg-icon>
-            </ha-dropdown-item>
-          </ha-dropdown>
+            </ha-list-item>
+          </ha-button-menu>
           ${convertToSection
             ? html`
                 <ha-alert alert-type="info">
@@ -324,18 +330,14 @@ export class HuiDialogEditView extends LitElement {
     `;
   }
 
-  private async _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail.item.value;
-
-    if (!action) {
-      return;
-    }
-
-    switch (action) {
-      case "toggle-mode":
+  private async _handleAction(ev: CustomEvent<ActionDetail>) {
+    ev.stopPropagation();
+    ev.preventDefault();
+    switch (ev.detail.index) {
+      case 0:
         this._yamlMode = !this._yamlMode;
         break;
-      case "move-to-dashboard":
+      case 1:
         this._openSelectDashboard();
         break;
     }

src/panels/lovelace/editor/view-header/hui-dialog-edit-view-header.ts

@@ -1,16 +1,16 @@
+import type { ActionDetail } from "@material/mwc-list";
 import { mdiClose, mdiDotsVertical, mdiPlaylistEdit } from "@mdi/js";
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stopPropagation } from "../../../../common/dom/stop_propagation";
 import { deepEqual } from "../../../../common/util/deep-equal";
 import "../../../../components/ha-button";
 import "../../../../components/ha-dialog";
 import "../../../../components/ha-dialog-header";
-import "../../../../components/ha-dropdown";
-import "../../../../components/ha-dropdown-item";
-import type { HaDropdownItem } from "../../../../components/ha-dropdown-item";
+import "../../../../components/ha-list-item";
 import "../../../../components/ha-spinner";
 import "../../../../components/ha-yaml-editor";
 import type { HaYamlEditor } from "../../../../components/ha-yaml-editor";
@@ -113,23 +113,29 @@ export class HuiDialogEditViewHeader extends LitElement {
             .path=${mdiClose}
           ></ha-icon-button>
           <h2 slot="title">${title}</h2>
-          <ha-dropdown
+          <ha-button-menu
             slot="actionItems"
-            placement="bottom-end"
-            @wa-select=${this._handleAction}
+            fixed
+            corner="BOTTOM_END"
+            menu-corner="END"
+            @action=${this._handleAction}
+            @closed=${stopPropagation}
           >
             <ha-icon-button
               slot="trigger"
               .label=${this.hass!.localize("ui.common.menu")}
               .path=${mdiDotsVertical}
             ></ha-icon-button>
-            <ha-dropdown-item value="toggle-mode">
+            <ha-list-item graphic="icon">
               ${this.hass!.localize(
                 `ui.panel.lovelace.editor.edit_view_header.edit_${!this._yamlMode ? "yaml" : "ui"}`
               )}
-              <ha-svg-icon slot="icon" .path=${mdiPlaylistEdit}></ha-svg-icon>
-            </ha-dropdown-item>
-          </ha-dropdown>
+              <ha-svg-icon
+                slot="graphic"
+                .path=${mdiPlaylistEdit}
+              ></ha-svg-icon>
+            </ha-list-item>
+          </ha-button-menu>
         </ha-dialog-header>
         ${content}
         <ha-button
@@ -144,11 +150,13 @@ export class HuiDialogEditViewHeader extends LitElement {
     `;
   }
 
-  private async _handleAction(ev: CustomEvent<{ item: HaDropdownItem }>) {
-    const action = ev.detail.item.value;
-
-    if (action === "toggle-mode") {
-      this._yamlMode = !this._yamlMode;
+  private async _handleAction(ev: CustomEvent<ActionDetail>) {
+    ev.stopPropagation();
+    ev.preventDefault();
+    switch (ev.detail.index) {
+      case 0:
+        this._yamlMode = !this._yamlMode;
+        break;
     }
   }
 

src/panels/lovelace/hui-root.ts

@@ -72,6 +72,7 @@ import {
 } from "../../dialogs/generic/show-dialog-box";
 import { showMoreInfoDialog } from "../../dialogs/more-info/show-ha-more-info-dialog";
 import { showQuickBar } from "../../dialogs/quick-bar/show-dialog-quick-bar";
+import type { QuickBarContextItem } from "../../dialogs/quick-bar/show-dialog-quick-bar";
 import { showShortcutsDialog } from "../../dialogs/shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import { haStyle } from "../../resources/styles";
@@ -841,6 +842,34 @@ class HUIRoot extends LitElement {
     fireEvent(this, "config-refresh");
   }
 
+  private _setQuickBarContext(viewConfig?: LovelaceViewConfig) {
+    if (!this.lovelace || !isStrategyDashboard(this.lovelace.rawConfig)) {
+      return;
+    }
+
+    if (this.lovelace.rawConfig.strategy.type !== "home") {
+      return;
+    }
+
+    let contextItem: QuickBarContextItem = {
+      itemType: "entity",
+      itemId: "zone.home",
+    };
+
+    const viewPath = viewConfig?.path;
+    if (viewPath?.startsWith("areas-")) {
+      const areaId = viewPath.slice("areas-".length);
+      if (areaId) {
+        contextItem = {
+          itemType: "area",
+          itemId: areaId,
+        };
+      }
+    }
+
+    fireEvent(this, "hass-quick-bar-context", contextItem);
+  }
+
   private _handleReloadResources(): void {
     this.hass.callService("lovelace", "reload_resources");
     showConfirmationDialog(this, {
@@ -1213,6 +1242,8 @@ class HUIRoot extends LitElement {
       return;
     }
 
+    this._setQuickBarContext(viewConfig);
+
     if (!force && this._viewCache![viewIndex]) {
       view = this._viewCache![viewIndex];
     } else {

src/panels/lovelace/strategies/home/home-dashboard-strategy.ts

@@ -10,13 +10,11 @@ import {
   HOME_SUMMARIES_ICONS,
 } from "./helpers/home-summaries";
 import type { HomeAreaViewStrategyConfig } from "./home-area-view-strategy";
-import type { HomeOtherDevicesViewStrategyConfig } from "./home-other-devices-view-strategy";
 import type { HomeOverviewViewStrategyConfig } from "./home-overview-view-strategy";
 
 export interface HomeDashboardStrategyConfig {
   type: "home";
   favorite_entities?: string[];
-  home_panel?: boolean;
 }
 
 @customElement("home-dashboard-strategy")
@@ -79,8 +77,7 @@ export class HomeDashboardStrategy extends ReactiveElement {
       subview: true,
       strategy: {
         type: "home-other-devices",
-        home_panel: config.home_panel,
-      } satisfies HomeOtherDevicesViewStrategyConfig,
+      },
       icon: "mdi:devices",
     } satisfies LovelaceViewRawConfig;
 

src/panels/lovelace/strategies/home/home-other-devices-view-strategy.ts

@@ -12,21 +12,17 @@ import type { LovelaceSectionRawConfig } from "../../../../data/lovelace/config/
 import type { LovelaceViewConfig } from "../../../../data/lovelace/config/view";
 import type { HomeAssistant } from "../../../../types";
 import { isHelperDomain } from "../../../config/helpers/const";
-import type {
-  EmptyStateCardConfig,
-  HeadingCardConfig,
-} from "../../cards/types";
+import type { HeadingCardConfig } from "../../cards/types";
 import { OTHER_DEVICES_FILTERS } from "./helpers/other-devices-filters";
 
 export interface HomeOtherDevicesViewStrategyConfig {
   type: "home-other-devices";
-  home_panel?: boolean;
 }
 
 @customElement("home-other-devices-view-strategy")
 export class HomeOtherDevicesViewStrategy extends ReactiveElement {
   static async generate(
-    config: HomeOtherDevicesViewStrategyConfig,
+    _config: HomeOtherDevicesViewStrategyConfig,
     hass: HomeAssistant
   ): Promise<LovelaceViewConfig> {
     const allEntities = Object.keys(hass.states);
@@ -136,24 +132,6 @@ export class HomeOtherDevicesViewStrategy extends ReactiveElement {
                   action: "more-info",
                 },
               })),
-              ...(config.home_panel && device && hass.user?.is_admin
-                ? [
-                    {
-                      type: "button",
-                      icon: "mdi:home-plus",
-                      text: hass.localize(
-                        "ui.panel.lovelace.strategy.other_devices.assign_area"
-                      ),
-                      tap_action: {
-                        action: "fire-dom-event",
-                        home_panel: {
-                          type: "assign_area",
-                          device_id: device.id,
-                        },
-                      },
-                    },
-                  ]
-                : []),
             ],
           } satisfies HeadingCardConfig,
           ...entities.map((e) => ({
@@ -208,26 +186,6 @@ export class HomeOtherDevicesViewStrategy extends ReactiveElement {
       });
     }
 
-    // No sections, show empty state
-    if (sections.length === 0) {
-      return {
-        type: "panel",
-        cards: [
-          {
-            type: "empty-state",
-            icon: "mdi:check-all",
-            content_only: true,
-            title: hass.localize(
-              "ui.panel.lovelace.strategy.other_devices.empty_state_title"
-            ),
-            content: hass.localize(
-              "ui.panel.lovelace.strategy.other_devices.empty_state_content"
-            ),
-          } as EmptyStateCardConfig,
-        ],
-      };
-    }
-
     // Take the full width if there is only one section to avoid narrow header on desktop
     if (sections.length === 1) {
       sections[0].column_span = 2;

src/panels/media-browser/ha-bar-media-player.ts

@@ -1,3 +1,5 @@
+import "@material/mwc-linear-progress/mwc-linear-progress";
+import type { LinearProgress } from "@material/mwc-linear-progress/mwc-linear-progress";
 import {
   mdiChevronDown,
   mdiMonitor,
@@ -18,16 +20,11 @@ import { computeStateDomain } from "../../common/entity/compute_state_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { supportsFeature } from "../../common/entity/supports-feature";
 import { debounce } from "../../common/util/debounce";
-import {
-  startMediaProgressInterval,
-  stopMediaProgressInterval,
-} from "../../common/util/media-progress";
-import { VolumeSliderController } from "../../common/util/volume-slider";
 import "../../components/ha-button";
+import "../../components/ha-button-menu";
 import "../../components/ha-domain-icon";
-import "../../components/ha-dropdown";
-import "../../components/ha-dropdown-item";
 import "../../components/ha-icon-button";
+import "../../components/ha-list-item";
 import "../../components/ha-slider";
 import "../../components/ha-spinner";
 import "../../components/ha-state-icon";
@@ -53,7 +50,6 @@ import type { ResolvedMediaSource } from "../../data/media_source";
 import { showAlertDialog } from "../../dialogs/generic/show-dialog-box";
 import { SubscribeMixin } from "../../mixins/subscribe-mixin";
 import type { HomeAssistant } from "../../types";
-import type { HaSlider } from "../../components/ha-slider";
 import "../lovelace/components/hui-marquee";
 import {
   BrowserMediaPlayer,
@@ -74,40 +70,20 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
 
   @property({ type: Boolean, reflect: true }) public narrow = false;
 
-  @query(".progress-slider") private _progressBar?: HaSlider;
+  @query("mwc-linear-progress") private _progressBar?: LinearProgress;
 
   @query("#CurrentProgress") private _currentProgress?: HTMLElement;
 
-  @query(".volume-slider") private _volumeSlider?: HaSlider;
-
   @state() private _marqueeActive = false;
 
   @state() private _newMediaExpected = false;
 
   @state() private _browserPlayer?: BrowserMediaPlayer;
 
-  private _volumeValue = 0;
-
   private _progressInterval?: number;
 
   private _browserPlayerVolume = 0.8;
 
-  private _volumeStep = 2;
-
-  private _debouncedVolumeSet = debounce((value: number) => {
-    this._setVolume(value);
-  }, 100);
-
-  private _volumeController = new VolumeSliderController({
-    getSlider: () => this._volumeSlider,
-    step: this._volumeStep,
-    onSetVolume: (value) => this._setVolume(value),
-    onSetVolumeDebounced: (value) => this._debouncedVolumeSet(value),
-    onValueUpdated: (value) => {
-      this._volumeValue = value;
-    },
-  });
-
   public connectedCallback(): void {
     super.connectedCallback();
 
@@ -118,20 +94,23 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
     }
 
     if (
+      !this._progressInterval &&
       this._showProgressBar &&
-      stateObj.state === "playing" &&
-      !this._progressInterval
+      stateObj.state === "playing"
     ) {
-      this._progressInterval = startMediaProgressInterval(
-        this._progressInterval,
-        () => this._updateProgressBar()
+      this._progressInterval = window.setInterval(
+        () => this._updateProgressBar(),
+        1000
       );
     }
   }
 
   public disconnectedCallback(): void {
     super.disconnectedCallback();
-    this._progressInterval = stopMediaProgressInterval(this._progressInterval);
+    if (this._progressInterval) {
+      clearInterval(this._progressInterval);
+      this._progressInterval = undefined;
+    }
     this._tearDownBrowserPlayer();
   }
 
@@ -195,7 +174,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
     const stateObj = this._stateObj;
 
     if (!stateObj) {
-      return this._renderChoosePlayer(stateObj, this._volumeValue);
+      return this._renderChoosePlayer(stateObj);
     }
 
     const controls: ControlButton[] | undefined = !this.narrow
@@ -235,6 +214,7 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
     const mediaArt =
       stateObj.attributes.entity_picture_local ||
       stateObj.attributes.entity_picture;
+
     return html`
       <div
         class=${classMap({
@@ -291,55 +271,21 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
               ${stateObj.attributes.media_duration === Infinity
                 ? nothing
                 : this.narrow
-                  ? html`<ha-slider
-                      class="progress-slider"
-                      min="0"
-                      max=${stateObj.attributes.media_duration || 0}
-                      step="1"
-                      .value=${getCurrentProgress(stateObj)}
-                      .withTooltip=${false}
-                      size="small"
-                      aria-label=${this.hass.localize(
-                        "ui.card.media_player.track_position"
-                      )}
-                      ?disabled=${isBrowser ||
-                      !supportsFeature(stateObj, MediaPlayerEntityFeature.SEEK)}
-                      @change=${this._handleMediaSeekChanged}
-                    ></ha-slider>`
+                  ? html`<mwc-linear-progress></mwc-linear-progress>`
                   : html`
                       <div class="progress">
                         <div id="CurrentProgress"></div>
-                        <ha-slider
-                          class="progress-slider"
-                          min="0"
-                          max=${stateObj.attributes.media_duration || 0}
-                          step="1"
-                          .value=${getCurrentProgress(stateObj)}
-                          .withTooltip=${false}
-                          size="small"
-                          aria-label=${this.hass.localize(
-                            "ui.card.media_player.track_position"
-                          )}
-                          ?disabled=${isBrowser ||
-                          !supportsFeature(
-                            stateObj,
-                            MediaPlayerEntityFeature.SEEK
-                          )}
-                          @change=${this._handleMediaSeekChanged}
-                        ></ha-slider>
+                        <mwc-linear-progress wide></mwc-linear-progress>
                         <div>${mediaDuration}</div>
                       </div>
                     `}
             `}
       </div>
-      ${this._renderChoosePlayer(stateObj, this._volumeValue)}
+      ${this._renderChoosePlayer(stateObj)}
     `;
   }
 
-  private _renderChoosePlayer(
-    stateObj: MediaPlayerEntity | undefined,
-    volumeValue: number
-  ) {
+  private _renderChoosePlayer(stateObj: MediaPlayerEntity | undefined) {
     const isBrowser = this.entityId === BROWSER_PLAYER;
     return html`
     <div class="choose-player ${isBrowser ? "browser" : ""}">
@@ -348,42 +294,26 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
         stateObj &&
         supportsFeature(stateObj, MediaPlayerEntityFeature.VOLUME_SET)
           ? html`
-              <ha-dropdown class="volume-menu" placement="top" .distance=${8}>
+              <ha-button-menu y="0" x="76">
                 <ha-icon-button
                   slot="trigger"
                   .path=${mdiVolumeHigh}
                 ></ha-icon-button>
-                <div
-                  class="volume-slider-container"
-                  @touchstart=${this._volumeController.handleTouchStart}
-                  @touchmove=${this._volumeController.handleTouchMove}
-                  @touchend=${this._volumeController.handleTouchEnd}
-                  @touchcancel=${this._volumeController.handleTouchCancel}
-                  @wheel=${this._volumeController.handleWheel}
+                <ha-slider
+                  labeled
+                  min="0"
+                  max="100"
+                  step="1"
+                  .value=${stateObj.attributes.volume_level! * 100}
+                  @change=${this._handleVolumeChange}
                 >
-                  <ha-slider
-                    class="volume-slider"
-                    labeled
-                    min="0"
-                    max="100"
-                    .step=${this._volumeStep}
-                    .value=${volumeValue}
-                    @input=${this._volumeController.handleInput}
-                    @change=${this._volumeController.handleChange}
-                  >
-                  </ha-slider>
-                </div>
-              </ha-dropdown>
+                </ha-slider>
+              </ha-button-menu>
             `
           : ""
       }
 
-          <ha-dropdown
-            class="player-menu"
-            placement="top-end"
-            .distance=${8}
-            @wa-select=${this._handlePlayerSelect}
-          >
+          <ha-button-menu>
             ${
               this.narrow
                 ? html`
@@ -412,24 +342,26 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
                     </ha-button>
                   `
             }
-            <ha-dropdown-item
-              class=${isBrowser ? "selected" : ""}
-              .value=${BROWSER_PLAYER}
+            <ha-list-item
+              .player=${BROWSER_PLAYER}
+              ?selected=${isBrowser}
+              @click=${this._selectPlayer}
             >
               ${this.hass.localize("ui.components.media-browser.web-browser")}
-            </ha-dropdown-item>
+            </ha-list-item>
             ${this._mediaPlayerEntities.map(
               (source) => html`
-                <ha-dropdown-item
-                  class=${source.entity_id === this.entityId ? "selected" : ""}
+                <ha-list-item
+                  ?selected=${source.entity_id === this.entityId}
                   .disabled=${source.state === UNAVAILABLE}
-                  .value=${source.entity_id}
+                  .player=${source.entity_id}
+                  @click=${this._selectPlayer}
                 >
                   ${computeStateName(source)}
-                </ha-dropdown-item>
+                </ha-list-item>
               `
             )}
-          </ha-dropdown>
+          </ha-button-menu>
         </div>
       </div>
 
@@ -469,9 +401,6 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
     ) {
       this._newMediaExpected = false;
     }
-    if (changedProps.has("hass")) {
-      this._updateVolumeValueFromState(this._stateObj);
-    }
   }
 
   protected updated(changedProps: PropertyValues) {
@@ -490,25 +419,23 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
 
     const stateObj = this._stateObj;
 
-    if (this.entityId === BROWSER_PLAYER) {
-      this._updateVolumeValueFromState(stateObj);
-    }
-
     this._updateProgressBar();
-    this._syncVolumeSlider();
 
-    if (this._showProgressBar && stateObj?.state === "playing") {
-      this._progressInterval = startMediaProgressInterval(
-        this._progressInterval,
-        () => this._updateProgressBar()
+    if (
+      !this._progressInterval &&
+      this._showProgressBar &&
+      stateObj?.state === "playing"
+    ) {
+      this._progressInterval = window.setInterval(
+        () => this._updateProgressBar(),
+        1000
       );
     } else if (
       this._progressInterval &&
       (!this._showProgressBar || stateObj?.state !== "playing")
     ) {
-      this._progressInterval = stopMediaProgressInterval(
-        this._progressInterval
-      );
+      clearInterval(this._progressInterval);
+      this._progressInterval = undefined;
     }
   }
 
@@ -562,45 +489,25 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
   private _updateProgressBar(): void {
     const stateObj = this._stateObj;
 
-    if (!this._progressBar || !stateObj) {
+    if (!this._progressBar || !this._currentProgress || !stateObj) {
       return;
     }
 
     if (!stateObj.attributes.media_duration) {
-      this._progressBar.value = 0;
-      if (this._currentProgress) {
-        this._currentProgress.innerHTML = "";
-      }
+      this._progressBar.progress = 0;
+      this._currentProgress.innerHTML = "";
       return;
     }
 
     const currentProgress = getCurrentProgress(stateObj);
-    this._progressBar.max = stateObj.attributes.media_duration;
-    this._progressBar.value = currentProgress;
+    this._progressBar.progress =
+      currentProgress / stateObj.attributes.media_duration;
 
     if (this._currentProgress) {
       this._currentProgress.innerHTML = formatMediaTime(currentProgress);
     }
   }
 
-  private _updateVolumeValueFromState(stateObj?: MediaPlayerEntity): void {
-    if (!stateObj) {
-      return;
-    }
-    const volumeLevel = stateObj.attributes.volume_level;
-    if (typeof volumeLevel !== "number" || !Number.isFinite(volumeLevel)) {
-      return;
-    }
-    this._volumeValue = Math.round(volumeLevel * 100);
-  }
-
-  private _syncVolumeSlider(): void {
-    if (!this._volumeSlider || this._volumeController.isInteracting) {
-      return;
-    }
-    this._volumeSlider.value = this._volumeValue;
-  }
-
   private _handleControlClick(e: MouseEvent): void {
     const action = (e.currentTarget! as HTMLElement).getAttribute("action")!;
 
@@ -619,18 +526,6 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handleMediaSeekChanged(e: Event): void {
-    if (this.entityId === BROWSER_PLAYER || !this._stateObj) {
-      return;
-    }
-
-    const newValue = (e.target as HaSlider).value;
-    this.hass.callService("media_player", "media_seek", {
-      entity_id: this._stateObj.entity_id,
-      seek_position: newValue,
-    });
-  }
-
   private _marqueeMouseOver(): void {
     if (!this._marqueeActive) {
       this._marqueeActive = true;
@@ -643,19 +538,20 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
     }
   }
 
-  private _handlePlayerSelect(ev: CustomEvent): void {
-    const entityId = (ev.detail.item as any).value;
+  private _selectPlayer(ev: CustomEvent): void {
+    const entityId = (ev.currentTarget as any).player;
     fireEvent(this, "player-picked", { entityId });
   }
 
-  private _setVolume(value: number) {
-    const volume = value / 100;
+  private async _handleVolumeChange(ev) {
+    ev.stopPropagation();
+    const value = Number(ev.target.value) / 100;
     if (this._browserPlayer) {
-      this._browserPlayerVolume = volume;
-      this._browserPlayer.setVolume(volume);
-      return;
+      this._browserPlayerVolume = value;
+      this._browserPlayer.setVolume(value);
+    } else {
+      await setMediaPlayerVolume(this.hass, this.entityId, value);
     }
-    setMediaPlayerVolume(this.hass, this.entityId, volume);
   }
 
   static styles = css`
@@ -674,11 +570,10 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
       margin-left: var(--safe-area-inset-left);
     }
 
-    ha-slider {
+    mwc-linear-progress {
       width: 100%;
-      min-width: 100%;
-      --ha-slider-thumb-color: var(--primary-color);
-      --ha-slider-indicator-color: var(--primary-color);
+      padding: 0 4px;
+      --mdc-theme-primary: var(--secondary-text-color);
     }
 
     ha-button-menu ha-button[slot="trigger"] {
@@ -716,7 +611,6 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
       justify-content: flex-end;
       align-items: center;
       padding: 16px;
-      gap: var(--ha-space-2);
     }
 
     .controls {
@@ -739,35 +633,10 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
       align-items: center;
     }
 
-    .progress > div:first-child {
-      margin-right: var(--ha-space-2);
-    }
-
-    .progress > div:last-child {
-      margin-left: var(--ha-space-2);
-    }
-
-    .progress ha-slider {
+    mwc-linear-progress[wide] {
       margin: 0 4px;
     }
 
-    ha-dropdown.volume-menu::part(menu) {
-      width: 220px;
-      max-width: 220px;
-      overflow: visible;
-      padding: 15px 15px;
-    }
-
-    .volume-slider-container {
-      width: 100%;
-    }
-
-    @media (pointer: coarse) {
-      .volume-slider {
-        pointer-events: none;
-      }
-    }
-
     .media-info {
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -831,14 +700,14 @@ export class BarMediaPlayer extends SubscribeMixin(LitElement) {
       justify-content: flex-end;
     }
 
-    :host([narrow]) ha-slider {
+    :host([narrow]) mwc-linear-progress {
+      padding: 0;
       position: absolute;
-      top: -6px;
+      top: -4px;
       left: 0;
-      right: 0;
     }
 
-    ha-dropdown-item.selected {
+    ha-list-item[selected] {
       font-weight: var(--ha-font-weight-bold);
     }
   `;

src/panels/security/ha-panel-security.ts

@@ -1,6 +1,7 @@
 import type { CSSResultGroup, PropertyValues } from "lit";
 import { LitElement, css, html, nothing } from "lit";
 import { customElement, property, state } from "lit/decorators";
+import { fireEvent } from "../../common/dom/fire_event";
 import { goBack } from "../../common/navigate";
 import { debounce } from "../../common/util/debounce";
 import { deepEqual } from "../../common/util/deep-equal";
@@ -45,6 +46,8 @@ class PanelSecurity extends LitElement {
       return;
     }
 
+    this._setQuickBarContext();
+
     const oldHass = changedProps.get("hass") as this["hass"];
     if (oldHass && oldHass.localize !== this.hass.localize) {
       this._setLovelace();
@@ -76,6 +79,7 @@ class PanelSecurity extends LitElement {
 
   private async _setup() {
     await this.hass.loadFragmentTranslation("lovelace");
+    this._setQuickBarContext();
     this._setLovelace();
   }
 
@@ -163,6 +167,13 @@ class PanelSecurity extends LitElement {
     };
   }
 
+  private _setQuickBarContext() {
+    fireEvent(this, "hass-quick-bar-context", {
+      itemType: "domain",
+      itemId: "security",
+    });
+  }
+
   static get styles(): CSSResultGroup {
     return [
       haStyle,

src/state/quick-bar-mixin.ts

@@ -6,10 +6,12 @@ import { mainWindow } from "../common/dom/get_main_window";
 import { ShortcutManager } from "../common/keyboard/shortcuts";
 import { extractSearchParamsObject } from "../common/url/search-params";
 import type {
+  QuickBarContextItem,
   QuickBarParams,
   QuickBarSection,
 } from "../dialogs/quick-bar/show-dialog-quick-bar";
 import { showQuickBar } from "../dialogs/quick-bar/show-dialog-quick-bar";
+import { findRelated, type ItemType, type RelatedResult } from "../data/search";
 import { showShortcutsDialog } from "../dialogs/shortcuts/show-shortcuts-dialog";
 import { showVoiceCommandDialog } from "../dialogs/voice-command-dialog/show-ha-voice-command-dialog";
 import type { Redirects } from "../panels/my/ha-panel-my";
@@ -23,11 +25,55 @@ declare global {
     "hass-quick-bar": QuickBarParams;
     "hass-quick-bar-trigger": KeyboardEvent;
     "hass-enable-shortcuts": HomeAssistant["enableShortcuts"];
+    "hass-quick-bar-context": QuickBarContextItem | undefined;
   }
 }
 
 export default <T extends Constructor<HassElement>>(superClass: T) =>
   class extends superClass {
+    private _quickBarContext?: QuickBarContextItem;
+
+    private _quickBarContextRelated?: RelatedResult;
+
+    private _fetchRelatedMemoized = memoizeOne(
+      (itemType: ItemType, itemId: string) =>
+        findRelated(this.hass!, itemType, itemId)
+    );
+
+    private _clearQuickBarContext = () => {
+      this._quickBarContext = undefined;
+      this._quickBarContextRelated = undefined;
+    };
+
+    private _contextMatches = (context?: QuickBarContextItem) =>
+      context?.itemType === this._quickBarContext?.itemType &&
+      context?.itemId === this._quickBarContext?.itemId;
+
+    private _prefetchQuickBarContext = async (
+      context?: QuickBarContextItem
+    ) => {
+      this._quickBarContextRelated = undefined;
+
+      if (!context || context.itemType === "domain") {
+        return;
+      }
+
+      try {
+        const related = await this._fetchRelatedMemoized(
+          context.itemType,
+          context.itemId
+        );
+
+        if (this._contextMatches(context)) {
+          this._quickBarContextRelated = related;
+        }
+      } catch {
+        if (this._contextMatches(context)) {
+          this._quickBarContextRelated = undefined;
+        }
+      }
+    };
+
     protected firstUpdated(changedProps: PropertyValues) {
       super.firstUpdated(changedProps);
 
@@ -36,6 +82,20 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
         storeState(this.hass!);
       });
 
+      this.addEventListener("hass-quick-bar-context", (ev) => {
+        this._quickBarContext =
+          ev.detail && "itemType" in ev.detail && "itemId" in ev.detail
+            ? ev.detail
+            : undefined;
+        this._prefetchQuickBarContext(this._quickBarContext);
+      });
+
+      mainWindow.addEventListener(
+        "location-changed",
+        this._clearQuickBarContext
+      );
+      mainWindow.addEventListener("popstate", this._clearQuickBarContext);
+
       mainWindow.addEventListener("hass-quick-bar-trigger", (ev) => {
         switch (ev.detail.key) {
           case "e":
@@ -61,6 +121,15 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       this._registerShortcut();
     }
 
+    public disconnectedCallback() {
+      super.disconnectedCallback();
+      mainWindow.removeEventListener(
+        "location-changed",
+        this._clearQuickBarContext
+      );
+      mainWindow.removeEventListener("popstate", this._clearQuickBarContext);
+    }
+
     private _registerShortcut() {
       const shortcutManager = new ShortcutManager();
       shortcutManager.add({
@@ -114,7 +183,11 @@ export default <T extends Constructor<HassElement>>(superClass: T) =>
       }
       e.preventDefault();
 
-      showQuickBar(this, { mode });
+      showQuickBar(this, {
+        mode,
+        contextItem: this._quickBarContext,
+        related: this._quickBarContextRelated,
+      });
     }
 
     private _showShortcutDialog(e: KeyboardEvent) {

src/translations/en.json

@@ -7582,10 +7582,7 @@
           },
           "other_devices": {
             "helpers": "Helpers",
-            "entities": "Entities",
-            "assign_area": "Assign area",
-            "empty_state_title": "All devices are organized",
-            "empty_state_content": "There are no unassigned devices left. All devices are organized into areas."
+            "entities": "Entities"
           }
         },
         "cards": {