Add FAB to overview to help with confusion

src/dashboards/hacs-dashboard.ts

@@ -10,11 +10,12 @@ import {
   mdiGithub,
   mdiInformation,
   mdiNewBox,
+  mdiPlus,
 } from "@mdi/js";
 import "@polymer/app-layout/app-header/app-header";
 import "@polymer/app-layout/app-toolbar/app-toolbar";
 import type { CSSResultGroup, PropertyValues, TemplateResult } from "lit";
-import { LitElement, css, html } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators";
 import memoize from "memoize-one";
 import { relativeTime } from "../../homeassistant-frontend/src/common/datetime/relative_time";
@@ -30,6 +31,7 @@ import "../../homeassistant-frontend/src/layouts/hass-tabs-subpage-data-table";
 
 import "../../homeassistant-frontend/src/components/ha-button-menu";
 import "../../homeassistant-frontend/src/components/ha-check-list-item";
+import "../../homeassistant-frontend/src/components/ha-fab";
 import "../../homeassistant-frontend/src/components/ha-formfield";
 import "../../homeassistant-frontend/src/components/ha-markdown";
 import "../../homeassistant-frontend/src/components/ha-radio";
@@ -39,6 +41,7 @@ import { LocalizeFunc } from "../../homeassistant-frontend/src/common/translatio
 import "../../homeassistant-frontend/src/components/ha-icon-overflow-menu";
 import { IconOverflowMenuItem } from "../../homeassistant-frontend/src/components/ha-icon-overflow-menu";
 import "../../homeassistant-frontend/src/components/ha-svg-icon";
+import { showConfirmationDialog } from "../../homeassistant-frontend/src/dialogs/generic/show-dialog-box";
 import { haStyle } from "../../homeassistant-frontend/src/resources/styles";
 import type { HomeAssistant, Route } from "../../homeassistant-frontend/src/types";
 import { brandsUrl } from "../../homeassistant-frontend/src/util/brands-url";
@@ -55,6 +58,7 @@ import type { RepositoryBase, RepositoryCategory } from "../data/repository";
 import { repositoriesClearNew } from "../data/websocket";
 import { HacsStyles } from "../styles/hacs-common-style";
 import { categoryIcon } from "../tools/category-icon";
+import { documentationUrl } from "../tools/documentation";
 
 const tableColumnDefaults = {
   name: true,
@@ -100,6 +104,9 @@ export class HacsDashboard extends LitElement {
   @storage({ key: "hacs-table-scroll", state: true, subscribe: false })
   private _tableScroll?: number;
 
+  @storage({ key: "hacs-hide-browse-fab", state: true, subscribe: false })
+  private _hide_browse_fab?: boolean;
+
   @storage({ key: "hacs-table-active-columns", state: true, subscribe: false })
   private _tableColumns: Record<tableColumnDefaultsType, boolean> = tableColumnDefaults;
 
@@ -128,6 +135,11 @@ export class HacsDashboard extends LitElement {
   }
 
   protected render = (): TemplateResult | void => {
+    const showFab =
+      !this._hide_browse_fab &&
+      this.activeFilters !== undefined &&
+      this.activeFilters.length === 1 &&
+      this.activeFilters[0] === "downloaded";
     const repositories = this._filterRepositories(this.hacs.repositories, this.activeFilters);
     const repositoriesContainsNew =
       repositories.filter((repository) => repository.new).length !== 0;
@@ -162,6 +174,7 @@ export class HacsDashboard extends LitElement {
       @clear-filter=${this._handleClearFilter}
       @value-changed=${this._handleSearchFilterChanged}
       @sorting-changed=${this._handleSortingChanged}
+      .hasFab=${showFab}
     >
       <ha-icon-overflow-menu
         narrow
@@ -171,7 +184,12 @@ export class HacsDashboard extends LitElement {
           {
             path: mdiFileDocument,
             label: this.hacs.localize("menu.documentation"),
-            action: () => mainWindow.open(`https://hacs.xyz/`, "_blank", "noreferrer=true"),
+            action: () =>
+              mainWindow.open(
+                documentationUrl({ experimental: this.hacs.info.experimental }),
+                "_blank",
+                "noreferrer=true"
+              ),
           },
           {
             path: mdiGithub,
@@ -182,7 +200,14 @@ export class HacsDashboard extends LitElement {
             path: mdiAlertCircleOutline,
             label: this.hacs.localize("menu.open_issue"),
             action: () =>
-              mainWindow.open(`https://hacs.xyz/docs/issues`, "_blank", "noreferrer=true"),
+              mainWindow.open(
+                documentationUrl({
+                  experimental: this.hacs.info.experimental,
+                  path: "/docs/issues",
+                }),
+                "_blank",
+                "noreferrer=true"
+              ),
           },
           {
             path: mdiGit,
@@ -294,9 +319,45 @@ export class HacsDashboard extends LitElement {
               `
             )}
       </ha-button-menu>
+      ${showFab
+        ? html`
+            <ha-fab
+              slot="fab"
+              @click=${this._show_browse_dialog}
+              .label=${this.hacs.localize("dialog_browse.btn")}
+              extended
+            >
+              <ha-svg-icon slot="icon" .path=${mdiPlus}></ha-svg-icon>
+            </ha-fab>
+          `
+        : nothing}
     </hass-tabs-subpage-data-table>`;
   };
 
+  _show_browse_dialog = async () => {
+    showConfirmationDialog(this, {
+      title: this.hacs.localize("dialog_browse.title"),
+      text: this.hacs.localize("dialog_browse.content"),
+      confirmText: this.hacs.localize("common.close"),
+      confirm: () => {
+        this._hide_browse_fab = true;
+      },
+      dismissText: this.hacs.localize("menu.documentation"),
+      cancel: () => {
+        mainWindow.open(
+          documentationUrl({
+            experimental: this.hacs.info.experimental,
+            path: "/docs/basic/dashboard",
+          }),
+          "_blank",
+          "noreferrer=true"
+        );
+
+        this._show_browse_dialog();
+      },
+    });
+  };
+
   private _filterRepositories = memoize(
     (repositories: RepositoryBase[], activeFilters?: string[]): RepositoryBase[] =>
       repositories

src/data/about.ts

@@ -1,5 +1,6 @@
 import type { Hacs } from "./hacs";
 import { version } from "../version";
+import { documentationUrl } from "../tools/documentation";
 
 export const aboutHacsmarkdownContent = (hacs: Hacs) => `
 **${hacs.localize("dialog_about.integration_version")}:** | ${hacs.info.version}
@@ -12,9 +13,12 @@ export const aboutHacsmarkdownContent = (hacs: Hacs) => `
 
 **${hacs.localize("dialog_about.useful_links")}:**
 
-- [General documentation](https://hacs.xyz/)
-- [Configuration](https://hacs.xyz/docs/configuration/start)
-- [FAQ](https://hacs.xyz/docs/faq/what)
+- [General documentation](${documentationUrl({ experimental: hacs.info.experimental })})
+- [Configuration](${documentationUrl({
+  experimental: hacs.info.experimental,
+  path: "/docs/configuration/start",
+})})
+- [FAQ](${documentationUrl({ experimental: hacs.info.experimental, path: "/docs/faq/what" })})
 - [GitHub](https://github.com/hacs)
 - [Discord](https://discord.gg/apgchf8)
 - [Become a GitHub sponsor? ❤️](https://github.com/sponsors/ludeeus)

src/localize/languages/en.json

@@ -41,13 +41,13 @@
     "home_assistant_version_not_correct": "You are running Home Assistant version '{haversion}', but this repository requires minimum version '{minversion}' to be installed."
   },
   "my": {
-    "not_supported": "This redirect is not supported. Check the {link} for the supported redirects and the version they where introduced.",
+    "not_supported": "This redirect is not supported. Check the {link} for the supported redirects and the version they were introduced.",
     "documentation": "documentation",
     "faq_link": "My Home Assistant FAQ",
     "error": "An unknown error occurred",
     "repository_not_found": "Repository {repository} not found",
     "add_repository_title": "Add custom repository",
-    "add_repository_description": "This will add the custom repository '{repository}' to be tracked by HACS, do you want to add it?"
+    "add_repository_description": "This will add the custom repository '{repository}' to be tracked by HACS. Do you want to add it?"
   },
   "dialog_about": {
     "integration_version": "Integration version",
@@ -78,8 +78,8 @@
     "select_version": "Select version",
     "show_beta": "Show beta versions",
     "restart": "Remember that you need to restart Home Assistant before changes to integrations (custom_components) are applied.",
-    "note_downloaded": "When downloaded this will be located in {location}",
-    "lovelace_instruction": "After the download completes, since you are not using Lovelace in storage mode you need to manually add the resource with these settings:"
+    "note_downloaded": "When downloaded, this will be located in {location}",
+    "lovelace_instruction": "After the download completes, since you are not using Lovelace in storage mode, you need to add the resource with these settings manually:"
   },
   "dialog_info": {
     "version_installed": "Version downloaded",
@@ -100,6 +100,11 @@
     "message": "A new version of the {name} is available",
     "no_info": "The author has not provided any information for this release"
   },
+  "dialog_browse": {
+    "btn": "Browse repositories",
+    "title": "Browse dialog removed",
+    "content": "The old dialog to browse repositories has been removed. Instead you just search for what you want in the search bar or use the filters also located on the search bar."
+  },
   "repository_card": {
     "dismiss": "dismiss",
     "information": "Information",
@@ -135,7 +140,7 @@
     },
     "configured": {
       "title": "Integration is configured",
-      "message": "The {name} integration is configured or ignored, you need to delete the configuration for it before removing it from HACS",
+      "message": "The {name} integration is configured or ignored. You need to delete the configuration for it before removing it from HACS",
       "confirm": "Go to integrations"
     }
   }

src/tools/documentation.ts

@@ -0,0 +1,4 @@
+export const documentationUrl = (options?: { path?: string; experimental?: boolean }) => {
+  const domain = options?.experimental ? "experimental.hacs.xyz" : "www.hacs.xyz";
+  return `https://${domain}${options?.path || ""}`;
+};