From f7dbd38c2e05f5dd36c5dc9d8204ab79ec66a3bb Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Tue, 24 Dec 2024 15:44:27 +0100
Subject: [PATCH] Sort addons in backup by name (#23442)

* Sort addons in backup by name

* Update ha-backup-addons-picker.ts
---
 .../backup/components/ha-backup-addons-picker.ts       | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/panels/config/backup/components/ha-backup-addons-picker.ts b/src/panels/config/backup/components/ha-backup-addons-picker.ts
index 938593de1d..d4ab56eab1 100644
--- a/src/panels/config/backup/components/ha-backup-addons-picker.ts
+++ b/src/panels/config/backup/components/ha-backup-addons-picker.ts
@@ -2,7 +2,9 @@ import { mdiPuzzle } from "@mdi/js";
 import type { CSSResultGroup } from "lit";
 import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators";
+import memoizeOne from "memoize-one";
 import { fireEvent } from "../../../../common/dom/fire_event";
+import { stringCompare } from "../../../../common/string/compare";
 import "../../../../components/ha-checkbox";
 import type { HaCheckbox } from "../../../../components/ha-checkbox";
 import "../../../../components/ha-formfield";
@@ -29,10 +31,16 @@ export class HaBackupAddonsPicker extends LitElement {
   @property({ attribute: "hide-version", type: Boolean })
   public hideVersion = false;
 
+  private _addons = memoizeOne((addons: BackupAddonItem[]) =>
+    addons.sort((a, b) =>
+      stringCompare(a.name, b.name, this.hass.locale.language)
+    )
+  );
+
   protected render() {
     return html`
       <div class="items">
-        ${this.addons.map(
+        ${this._addons(this.addons).map(
           (item) => html`
             <ha-formfield>
               <ha-backup-formfield-label