Add view header

src/data/lovelace/config/view.ts

@@ -25,6 +25,13 @@ export interface LovelaceViewBackgroundConfig {
   attachment?: "scroll" | "fixed";
 }
 
+export interface LovelaceViewHeaderConfig {
+  card?: LovelaceCardConfig;
+  layout?: "start" | "center" | "responsive";
+  badges_position?: "bottom" | "top";
+  extra_space?: boolean;
+}
+
 export interface LovelaceBaseViewConfig {
   index?: number;
   title?: string;
@@ -46,6 +53,7 @@ export interface LovelaceViewConfig extends LovelaceBaseViewConfig {
   badges?: (string | Partial<LovelaceBadgeConfig>)[]; // Badge can be just an entity_id or without type
   cards?: LovelaceCardConfig[];
   sections?: LovelaceSectionRawConfig[];
+  header?: LovelaceViewHeaderConfig;
 }
 
 export interface LovelaceStrategyViewConfig extends LovelaceBaseViewConfig {

src/panels/lovelace/badges/hui-view-badges.ts

@@ -12,6 +12,7 @@ import "../../../components/ha-svg-icon";
 import type { HomeAssistant } from "../../../types";
 import "../components/hui-badge-edit-mode";
 import { moveBadge } from "../editor/config-util";
+import type { LovelaceCardPath } from "../editor/lovelace-path";
 import type { Lovelace } from "../types";
 import type { HuiBadge } from "./hui-badge";
 
@@ -89,6 +90,20 @@ export class HuiViewBadges extends LitElement {
     this.lovelace!.saveConfig(newConfig);
   }
 
+  private _badgeAdded(ev) {
+    ev.stopPropagation();
+    const { index, data } = ev.detail;
+    const oldPath = data as LovelaceCardPath;
+    const newPath = [this.viewIndex!, index] as LovelaceCardPath;
+    const newConfig = moveBadge(this.lovelace!.config, oldPath, newPath);
+    this.lovelace!.saveConfig(newConfig);
+  }
+
+  private _badgeRemoved(ev) {
+    ev.stopPropagation();
+    // Do nothing, it's handle by the "item-added" event from the new parent.
+  }
+
   private _dragStart() {
     this._dragging = true;
   }
@@ -114,6 +129,8 @@ export class HuiViewBadges extends LitElement {
             <ha-sortable
               .disabled=${!editMode}
               @item-moved=${this._badgeMoved}
+              @item-added=${this._badgeAdded}
+              @item-removed=${this._badgeRemoved}
               @drag-start=${this._dragStart}
               @drag-end=${this._dragEnd}
               group="badge"
@@ -126,21 +143,25 @@ export class HuiViewBadges extends LitElement {
                 ${repeat(
                   badges,
                   (badge) => this._getBadgeKey(badge),
-                  (badge, idx) => html`
-                    ${editMode
-                      ? html`
-                          <hui-badge-edit-mode
-                            data-sortable
-                            .hass=${this.hass}
-                            .lovelace=${this.lovelace}
-                            .path=${[this.viewIndex, idx]}
-                            .hiddenOverlay=${this._dragging}
-                          >
-                            ${badge}
-                          </hui-badge-edit-mode>
-                        `
-                      : badge}
-                  `
+                  (badge, idx) => {
+                    const badgePath = [this.viewIndex, idx] as LovelaceCardPath;
+                    return html`
+                      ${editMode
+                        ? html`
+                            <hui-badge-edit-mode
+                              data-sortable
+                              .hass=${this.hass}
+                              .lovelace=${this.lovelace}
+                              .path=${[this.viewIndex, idx]}
+                              .hiddenOverlay=${this._dragging}
+                              .sortableData=${badgePath}
+                            >
+                              ${badge}
+                            </hui-badge-edit-mode>
+                          `
+                        : badge}
+                    `;
+                  }
                 )}
                 ${editMode
                   ? html`
@@ -179,8 +200,8 @@ export class HuiViewBadges extends LitElement {
     .badges {
       display: flex;
       align-items: flex-start;
-      flex-wrap: wrap;
-      justify-content: center;
+      flex-wrap: var(--badges-wrap, wrap);
+      justify-content: var(--badges-aligmnent, center);
       gap: 8px;
       margin: 0;
     }
@@ -197,6 +218,7 @@ export class HuiViewBadges extends LitElement {
       display: flex;
       flex-direction: row;
       align-items: center;
+      outline: none;
       gap: 8px;
       height: 36px;
       padding: 6px 20px 6px 20px;

src/panels/lovelace/components/hui-card-edit-mode.ts

@@ -50,6 +50,9 @@ export class HuiCardEditMode extends LitElement {
   @property({ type: Boolean, attribute: "no-duplicate" })
   public noDuplicate = false;
 
+  @property({ type: Boolean, attribute: "no-move" })
+  public noMove = false;
+
   @state()
   public _menuOpened = false;
 
@@ -179,23 +182,39 @@ export class HuiCardEditMode extends LitElement {
                   )}
                 </ha-list-item>
               `}
-          <ha-list-item
-            graphic="icon"
-            @click=${this._handleAction}
-            .action=${"copy"}
-          >
-            <ha-svg-icon slot="graphic" .path=${mdiContentCopy}></ha-svg-icon>
-            ${this.hass.localize("ui.panel.lovelace.editor.edit_card.copy")}
-          </ha-list-item>
-          <ha-list-item
-            graphic="icon"
-            @click=${this._handleAction}
-            .action=${"cut"}
-          >
-            <ha-svg-icon slot="graphic" .path=${mdiContentCut}></ha-svg-icon>
-            ${this.hass.localize("ui.panel.lovelace.editor.edit_card.cut")}
-          </ha-list-item>
-          <li divider role="separator"></li>
+          ${this.noMove
+            ? nothing
+            : html`
+                <ha-list-item
+                  graphic="icon"
+                  @click=${this._handleAction}
+                  .action=${"copy"}
+                >
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiContentCopy}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.lovelace.editor.edit_card.copy"
+                  )}
+                </ha-list-item>
+                <ha-list-item
+                  graphic="icon"
+                  @click=${this._handleAction}
+                  .action=${"cut"}
+                >
+                  <ha-svg-icon
+                    slot="graphic"
+                    .path=${mdiContentCut}
+                  ></ha-svg-icon>
+                  ${this.hass.localize(
+                    "ui.panel.lovelace.editor.edit_card.cut"
+                  )}
+                </ha-list-item>
+              `}
+          ${this.noDuplicate && this.noEdit && this.noMove
+            ? nothing
+            : html`<li divider role="separator"></li>`}
           <ha-list-item
             graphic="icon"
             class="warning"