Move reorder areas and floors to floor overflow (#28335)

src/panels/config/areas/dialog-areas-floors-order.ts

@@ -81,8 +81,11 @@ class DialogAreasFloorsOrder extends LitElement {
       return nothing;
     }
 
+    const hasFloors = this._hierarchy.floors.length > 0;
     const dialogTitle = this.hass.localize(
-      "ui.panel.config.areas.dialog.reorder_title"
+      hasFloors
+        ? "ui.panel.config.areas.dialog.reorder_floors_areas_title"
+        : "ui.panel.config.areas.dialog.reorder_areas_title"
     );
 
     return html`
@@ -418,7 +421,6 @@ class DialogAreasFloorsOrder extends LitElement {
         }
 
         .floor.unassigned {
-          border-style: dashed;
           margin-top: 16px;
         }
 

src/panels/config/areas/ha-config-areas-dashboard.ts

@@ -175,21 +175,12 @@ export class HaConfigAreasDashboard extends LitElement {
         .route=${this.route}
         has-fab
       >
-        <ha-button-menu slot="toolbar-icon">
         <ha-icon-button
-            slot="trigger"
+          slot="toolbar-icon"
-            .label=${this.hass.localize("ui.common.menu")}
+          .label=${this.hass.localize("ui.common.help")}
-            .path=${mdiDotsVertical}
+          .path=${mdiHelpCircle}
+          @click=${this._showHelp}
         ></ha-icon-button>
-          <ha-list-item graphic="icon" @click=${this._showReorderDialog}>
-            <ha-svg-icon .path=${mdiSort} slot="graphic"></ha-svg-icon>
-            ${this.hass.localize("ui.panel.config.areas.picker.reorder")}
-          </ha-list-item>
-          <ha-list-item graphic="icon" @click=${this._showHelp}>
-            <ha-svg-icon .path=${mdiHelpCircle} slot="graphic"></ha-svg-icon>
-            ${this.hass.localize("ui.common.help")}
-          </ha-list-item>
-        </ha-button-menu>
         <div class="container">
           <div class="floors">
             ${this._hierarchy.floors.map(({ areas, id }) => {
@@ -213,6 +204,16 @@ export class HaConfigAreasDashboard extends LitElement {
                           slot="trigger"
                           .path=${mdiDotsVertical}
                         ></ha-icon-button>
+                        <ha-list-item graphic="icon"
+                          ><ha-svg-icon
+                            .path=${mdiSort}
+                            slot="graphic"
+                          ></ha-svg-icon
+                          >${this.hass.localize(
+                            "ui.panel.config.areas.picker.reorder"
+                          )}</ha-list-item
+                        >
+                        <li divider role="separator"></li>
                         <ha-list-item graphic="icon"
                           ><ha-svg-icon
                             .path=${mdiPencil}
@@ -266,9 +267,30 @@ export class HaConfigAreasDashboard extends LitElement {
                   <div class="header">
                     <h2>
                       ${this.hass.localize(
-                        "ui.panel.config.areas.picker.other_areas"
+                        this._hierarchy.floors.length
+                          ? "ui.panel.config.areas.picker.other_areas"
+                          : "ui.panel.config.areas.picker.header"
                       )}
                     </h2>
+                    <div class="actions">
+                      <ha-button-menu
+                        @action=${this._handleUnassignedAreasAction}
+                      >
+                        <ha-icon-button
+                          slot="trigger"
+                          .path=${mdiDotsVertical}
+                        ></ha-icon-button>
+                        <ha-list-item graphic="icon"
+                          ><ha-svg-icon
+                            .path=${mdiSort}
+                            slot="graphic"
+                          ></ha-svg-icon
+                          >${this.hass.localize(
+                            "ui.panel.config.areas.picker.reorder"
+                          )}</ha-list-item
+                        >
+                      </ha-button-menu>
+                    </div>
                   </div>
                   <ha-sortable
                     handle-selector="a"
@@ -515,14 +537,23 @@ export class HaConfigAreasDashboard extends LitElement {
     const floor = (ev.currentTarget as any).floor;
     switch (ev.detail.index) {
       case 0:
-        this._editFloor(floor);
+        this._showReorderDialog();
         break;
       case 1:
+        this._editFloor(floor);
+        break;
+      case 2:
         this._deleteFloor(floor);
         break;
     }
   }
 
+  private _handleUnassignedAreasAction(ev: CustomEvent<ActionDetail>) {
+    if (ev.detail.index === 0) {
+      this._showReorderDialog();
+    }
+  }
+
   private _createFloor() {
     this._openFloorDialog();
   }

src/translations/en.json

@@ -2475,10 +2475,11 @@
             "area_reorder_failed": "Failed to reorder areas",
             "area_move_failed": "Failed to move area",
             "floor_reorder_failed": "Failed to reorder floors",
-            "reorder": "Reorder floors and areas"
+            "reorder": "Reorder"
           },
           "dialog": {
-            "reorder_title": "Reorder floors and areas",
+            "reorder_areas_title": "Reorder areas",
+            "reorder_floors_areas_title": "Reorder floors and areas",
             "other_areas": "Other areas",
             "reorder_failed": "Failed to save order",
             "empty_floor": "No areas on this floor",