From 8945650b6219ecde6a91c32dfb7fa6e619d83fd6 Mon Sep 17 00:00:00 2001
From: karwosts <32912880+karwosts@users.noreply.github.com>
Date: Wed, 28 Jun 2023 05:01:21 -0700
Subject: [PATCH] Show card positions in edit dashboard mode (#17055)

---
 .../lovelace/components/hui-card-options.ts   | 26 +++++++++++++++++++
 src/translations/en.json                      |  1 +
 2 files changed, 27 insertions(+)

diff --git a/src/panels/lovelace/components/hui-card-options.ts b/src/panels/lovelace/components/hui-card-options.ts
index 6a39d8b590..6f87fb30f0 100644
--- a/src/panels/lovelace/components/hui-card-options.ts
+++ b/src/panels/lovelace/components/hui-card-options.ts
@@ -81,6 +81,18 @@ export class HuiCardOptions extends LitElement {
                 .length ===
               this.path![1] + 1}
             ></ha-icon-button>
+            <div class="position-badge">
+              ${this.path![1] + 1}
+              <simple-tooltip
+                >${this.hass!.localize(
+                  "ui.panel.lovelace.editor.edit_card.position",
+                  "position",
+                  `${this.path![1] + 1}`,
+                  "total",
+                  `${this.lovelace!.config.views[this.path![0]].cards!.length}`
+                )}</simple-tooltip
+              >
+            </div>
             <ha-icon-button
               .label=${this.hass!.localize(
                 "ui.panel.lovelace.editor.edit_card.move_up"
@@ -155,6 +167,20 @@ export class HuiCardOptions extends LitElement {
         align-items: center;
       }
 
+      .position-badge {
+        display: inline-block;
+        vertical-align: bottom;
+        width: 48px;
+        line-height: 48px;
+        box-sizing: border-box;
+        border-radius: 50%;
+        font-weight: 400;
+        font-size: 1.25em;
+        background-color: var(--divider-color);
+        text-align: center;
+        color: var(--text-accent-color, var(--text-primary-color));
+      }
+
       ha-icon-button {
         color: var(--primary-text-color);
       }
diff --git a/src/translations/en.json b/src/translations/en.json
index 7e081c3070..d6f4567648 100644
--- a/src/translations/en.json
+++ b/src/translations/en.json
@@ -4476,6 +4476,7 @@
             "move_down": "Move card down",
             "move_before": "Move card before",
             "move_after": "Move card after",
+            "position": "Card is in position {position} of {total}",
             "options": "More options",
             "search_cards": "Search cards"
           },