Add last activated column to scenes data table (#13622)

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

@@ -42,6 +42,8 @@ import { HomeAssistant, Route } from "../../../types";
 import { documentationUrl } from "../../../util/documentation-url";
 import { showToast } from "../../../util/toast";
 import { configSections } from "../ha-panel-config";
+import { formatDateTime } from "../../../common/datetime/format_date_time";
+import { UNAVAILABLE_STATES } from "../../../data/entity";
 
 @customElement("ha-scene-dashboard")
 class HaSceneDashboard extends LitElement {
@@ -77,24 +79,45 @@ class HaSceneDashboard extends LitElement {
     }
   );
 
-  private _columns = memoizeOne((_language): DataTableColumnContainer => {
+  private _columns = memoizeOne(
+    (_language, narrow): DataTableColumnContainer => {
       const columns: DataTableColumnContainer = {
         icon: {
           title: "",
-        label: this.hass.localize("ui.panel.config.scene.picker.headers.state"),
+          label: this.hass.localize(
+            "ui.panel.config.scene.picker.headers.state"
+          ),
           type: "icon",
           template: (_, scene) =>
             html` <ha-state-icon .state=${scene}></ha-state-icon> `,
         },
         name: {
-        title: this.hass.localize("ui.panel.config.scene.picker.headers.name"),
+          title: this.hass.localize(
+            "ui.panel.config.scene.picker.headers.name"
+          ),
           sortable: true,
           filterable: true,
           direction: "asc",
           grows: true,
         },
-      only_editable: {
+      };
+      if (!narrow) {
+        columns.state = {
+          title: this.hass.localize(
+            "ui.panel.config.scene.picker.headers.last_activated"
+          ),
+          sortable: true,
+          width: "30%",
+          template: (last_activated) => html`
+            ${last_activated && !UNAVAILABLE_STATES.includes(last_activated)
+              ? formatDateTime(new Date(last_activated), this.hass.locale)
+              : this.hass.localize("ui.components.relative_time.never")}
+          `,
+        };
+      }
+      columns.only_editable = {
         title: "",
+        width: "56px",
         template: (_info, scene: any) =>
           !scene.attributes.id
             ? html`
@@ -109,11 +132,10 @@ class HaSceneDashboard extends LitElement {
                 ></ha-svg-icon>
               `
             : "",
-      },
       };
-
       columns.actions = {
         title: "",
+        width: "72px",
         type: "overflow-menu",
         template: (_: string, scene: any) =>
           html`
@@ -159,7 +181,8 @@ class HaSceneDashboard extends LitElement {
       };
 
       return columns;
-  });
+    }
+  );
 
   protected render(): TemplateResult {
     return html`
@@ -169,7 +192,7 @@ class HaSceneDashboard extends LitElement {
         back-path="/config"
         .route=${this.route}
         .tabs=${configSections.automations}
-        .columns=${this._columns(this.hass.language)}
+        .columns=${this._columns(this.hass.locale, this.narrow)}
         id="entity_id"
         .data=${this._scenes(this.scenes, this._filteredScenes)}
         .activeFilters=${this._activeFilters}

src/translations/en.json

@@ -2332,11 +2332,8 @@
             "duplicate_scene": "Duplicate scene",
             "duplicate": "[%key:ui::common::duplicate%]",
             "headers": {
-              "activate": "Activate",
-              "state": "State",
               "name": "Name",
-              "show_info": "Show information",
+              "last_activated": "Last activated"
-              "edit": "Edit"
             }
           },
           "editor": {