Revert "Keyboard accessible panel sorting" (#25331)

src/components/ha-sidebar.ts

@@ -52,7 +52,6 @@ import "./user/ha-user-badge";
 import "./ha-md-list";
 import "./ha-md-list-item";
 import type { HaMdListItem } from "./ha-md-list-item";
-import { showPromptDialog } from "../dialogs/generic/show-dialog-box";
 
 const SHOW_AFTER_SPACER = ["config", "developer-tools"];
 
@@ -425,12 +424,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     `;
   }
 
-  private _renderPanels(
-    panels: PanelInfo[],
-    selectedPanel: string,
-    orderable = false
-  ) {
-    return panels.map((panel, idx) =>
+  private _renderPanels(panels: PanelInfo[], selectedPanel: string) {
+    return panels.map((panel) =>
       this._renderPanel(
         panel.url_path,
         panel.url_path === this.hass.defaultPanel
@@ -442,8 +437,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           : panel.url_path in PANEL_ICONS
             ? PANEL_ICONS[panel.url_path]
             : undefined,
-        selectedPanel,
-        orderable ? idx : null
+        selectedPanel
       )
     );
   }
@@ -453,8 +447,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     title: string | null,
     icon: string | null | undefined,
     iconPath: string | null | undefined,
-    selectedPanel: string,
-    index: number | null
+    selectedPanel: string
   ) {
     return urlPath === "config"
       ? this._renderConfiguration(title, selectedPanel)
@@ -470,20 +463,8 @@ class HaSidebar extends SubscribeMixin(LitElement) {
               ? html`<ha-svg-icon slot="start" .path=${iconPath}></ha-svg-icon>`
               : html`<ha-icon slot="start" .icon=${icon}></ha-icon>`}
             <span class="item-text" slot="headline">${title}</span>
-            ${index != null
-              ? html`<ha-icon-button
-                  @click=${this._changePosition}
-                  .label=${this.hass!.localize("ui.sidebar.change_position")}
-                  class="hide-panel"
-                  slot="end"
-                  .index=${index}
-                  .title=${title}
-                >
-                  <div class="position-badge">${index + 1}</div>
-                </ha-icon-button>`
-              : nothing}
             ${this.editMode
-              ? html` <ha-icon-button
+              ? html`<ha-icon-button
                   .label=${this.hass.localize("ui.sidebar.hide_panel")}
                   .path=${mdiClose}
                   class="hide-panel"
@@ -499,10 +480,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   private _panelMoved(ev: CustomEvent) {
     ev.stopPropagation();
     const { oldIndex, newIndex } = ev.detail;
-    this._panelMove(oldIndex, newIndex);
-  }
 
-  private _panelMove(oldIndex: number, newIndex: number) {
     const [beforeSpacer] = computePanels(
       this.hass.panels,
       this.hass.defaultPanel,
@@ -521,7 +499,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
   private _renderPanelsEdit(beforeSpacer: PanelInfo[], selectedPanel: string) {
     return html`
       <ha-sortable .disabled=${!this.editMode} @item-moved=${this._panelMoved}
-        ><div>${this._renderPanels(beforeSpacer, selectedPanel, true)}</div>
+        ><div>${this._renderPanels(beforeSpacer, selectedPanel)}</div>
       </ha-sortable>
       ${this._renderSpacer()}${this._renderHiddenPanels()}
     `;
@@ -712,28 +690,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
     fireEvent(this, "hass-edit-sidebar", { editMode: false });
   }
 
-  private async _changePosition(ev): Promise<void> {
-    ev.preventDefault();
-    const oldIndex = (ev.currentTarget as any).index as number;
-    const name = ((ev.currentTarget as any).title as string) || "";
-
-    const positionString = await showPromptDialog(this, {
-      title: this.hass!.localize("ui.sidebar.change_position"),
-      text: this.hass!.localize("ui.sidebar.change_position_dialog_text", {
-        name,
-      }),
-      inputType: "number",
-      inputMin: "1",
-      placeholder: String(oldIndex + 1),
-    });
-
-    if (!positionString) return;
-    const position = parseInt(positionString);
-    if (isNaN(position)) return;
-    const newIndex = Math.max(0, position - 1);
-    this._panelMove(oldIndex, newIndex);
-  }
-
   private async _hidePanel(ev: Event) {
     ev.preventDefault();
     const panel = (ev.currentTarget as any).panel;
@@ -984,7 +940,7 @@ class HaSidebar extends SubscribeMixin(LitElement) {
 
         ha-md-list-item .item-text {
           display: none;
-          max-width: 100%;
+          max-width: calc(100% - 56px);
           font-weight: 500;
           font-size: 14px;
         }
@@ -1015,19 +971,6 @@ class HaSidebar extends SubscribeMixin(LitElement) {
           color: var(--text-accent-color, var(--text-primary-color));
         }
 
-        .position-badge {
-          display: block;
-          width: 24px;
-          line-height: 24px;
-          box-sizing: border-box;
-          border-radius: 50%;
-          font-weight: 500;
-          text-align: center;
-          font-size: 14px;
-          background-color: var(--app-header-edit-background-color, #455a64);
-          color: var(--app-header-edit-text-color, white);
-        }
-
         ha-svg-icon + .badge {
           position: absolute;
           top: 4px;

src/resources/ha-sidebar-edit-style.ts

@@ -58,7 +58,7 @@ export const sidebarEditStyle = css`
   }
 
   :host([expanded]) .hide-panel {
-    display: inline-block;
+    display: block;
   }
 
   :host([expanded]) .show-panel {

src/translations/en.json

@@ -2018,9 +2018,7 @@
       "sidebar_toggle": "Sidebar toggle",
       "done": "Done",
       "hide_panel": "Hide panel",
-      "show_panel": "Show panel",
-      "change_position": "Change panel position",
-      "change_position_dialog_text": "What position do you want to move your ''{name}'' panel to?"
+      "show_panel": "Show panel"
     },
     "panel": {
       "my": {