Use the data table settings controller on the tags page

src/panels/config/tags/ha-config-tags.ts

@@ -9,7 +9,7 @@ import type { PropertyValues } from "lit";
 import { html, LitElement } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import memoizeOne from "memoize-one";
-import { storage } from "../../../common/decorators/storage";
+import { DataTableSettingsController } from "../../../common/controllers/data-table-settings-controller";
 import type { HASSDomEvent } from "../../../common/dom/fire_event";
 import type { LocalizeFunc } from "../../../common/translations/localize";
 import { hasRejectedItems } from "../../../common/util/promise-all-settled-results";
@@ -76,14 +76,9 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
     return this.hass.auth.external?.config.canWriteTag;
   }
 
-  @state()
-  @storage({
-    storage: "sessionStorage",
-    key: "tags-table-search",
-    state: true,
-    subscribe: false,
-  })
-  private _filter = "";
+  private _tableSettings = new DataTableSettingsController(this, {
+    search: "tags-table-search",
+  });
 
   private _columns = memoizeOne((localize: LocalizeFunc) => {
     const columns: DataTableColumnContainer<TagRowData> = {
@@ -99,6 +94,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
         title: localize("ui.panel.config.tag.headers.name"),
         main: true,
         sortable: true,
+        urlName: "name",
         filterable: true,
         flex: 2,
       },
@@ -111,6 +107,7 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
       last_scanned_datetime: {
         title: localize("ui.panel.config.tag.headers.last_scanned"),
         sortable: true,
+        urlName: "last_scanned",
         direction: "desc",
         template: (tag) => html`
           ${
@@ -218,8 +215,9 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
             : undefined
         }
         @retry-load=${this._retryFetchTags}
-        .filter=${this._filter}
-        @search-changed=${this._handleSearchChange}
+        .filter=${this._tableSettings.search}
+        @search-changed=${this._tableSettings.searchChanged}
+        sync-url
         selectable
         .selected=${this._selected.length}
         @selection-changed=${this._handleSelectionChanged}
@@ -417,10 +415,6 @@ export class HaConfigTags extends SubscribeMixin(LitElement) {
       }
     });
   };
-
-  private _handleSearchChange(ev: CustomEvent) {
-    this._filter = ev.detail.value;
-  }
 }
 
 declare global {

src/panels/my/ha-panel-my.ts

@@ -54,6 +54,13 @@ const helpersTableParams = {
   assistants: "string?",
 } satisfies Redirect["params"];
 
+// The tags table reads these from the link
+const tagsTableParams = {
+  search: "string?",
+  sort: "string?",
+  direction: "string?",
+} satisfies Redirect["params"];
+
 export const getMyRedirects = (): Redirects => ({
   application_credentials: {
     redirect: "/config/application_credentials",
@@ -294,6 +301,7 @@ export const getMyRedirects = (): Redirects => ({
   tags: {
     component: "tag",
     redirect: "/config/tags",
+    params: tagsTableParams,
   },
   voice_assistants: {
     redirect: "/config/voice-assistants",