web/user: optimise load, fix unread status for notifications

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>

web/src/interfaces/UserInterface.ts

@@ -154,8 +154,8 @@ export class UserInterface extends LitElement {
                                         <span
                                             class="pf-c-notification-badge ${this
                                                 .notificationsCount > 0
-                                                ? html`pf-m-unread`
+                                                ? "pf-m-unread"
-                                                : html``}"
+                                                : ""}"
                                         >
                                             <i class="pf-icon-bell" aria-hidden="true"></i>
                                             <span class="pf-c-notification-badge__count"

web/src/user/LibraryApplication.ts

@@ -0,0 +1,115 @@
+import { t } from "@lingui/macro";
+import {
+    css,
+    CSSResult,
+    customElement,
+    html,
+    LitElement,
+    property,
+    TemplateResult,
+} from "lit-element";
+import { ifDefined } from "lit-html/directives/if-defined";
+import { until } from "lit-html/directives/until";
+import { Application } from "@goauthentik/api";
+import { me } from "../api/Users";
+import { truncate } from "../utils";
+import AKGlobal from "../authentik.css";
+import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
+import PFBase from "@patternfly/patternfly/patternfly-base.css";
+import PFButton from "@patternfly/patternfly/components/Button/button.css";
+import PFCard from "@patternfly/patternfly/components/Card/card.css";
+import { uiConfig } from "./config";
+
+@customElement("ak-library-app")
+export class LibraryApplication extends LitElement {
+    @property({ attribute: false })
+    application?: Application;
+
+    @property({ type: Boolean })
+    selected = false;
+
+    static get styles(): CSSResult[] {
+        return [
+            PFBase,
+            PFCard,
+            PFButton,
+            PFAvatar,
+            AKGlobal,
+            css`
+                .pf-c-card {
+                    height: 100%;
+                }
+                i.pf-icon {
+                    height: 36px;
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                }
+                .pf-c-avatar {
+                    --pf-c-avatar--BorderRadius: 0;
+                }
+                .pf-c-card__header {
+                    min-height: 60px;
+                    justify-content: space-between;
+                }
+                .pf-c-card__header a {
+                    display: flex;
+                    flex-direction: column;
+                    justify-content: center;
+                    margin-right: 0.25em;
+                }
+            `,
+        ];
+    }
+
+    render(): TemplateResult {
+        if (!this.application) {
+            return html`<ak-spinner></ak-spinner>`;
+        }
+        return html` <div
+            class="pf-c-card pf-m-hoverable pf-m-compact ${this.selected
+                ? "pf-m-selectable pf-m-selected"
+                : ""}"
+        >
+            <div class="pf-c-card__header">
+                ${this.application.metaIcon
+                    ? html`<a href="${ifDefined(this.application.launchUrl ?? "")}"
+                          ><img
+                              class="app-icon pf-c-avatar"
+                              src="${ifDefined(this.application.metaIcon)}"
+                              alt="${t`Application Icon`}"
+                      /></a>`
+                    : html`<i class="fas fas fa-share-square"></i>`}
+                ${until(
+                    uiConfig().then((config) => {
+                        if (!config.enabledFeatures.applicationEdit) {
+                            return html``;
+                        }
+                        return me().then((u) => {
+                            if (!u.user.isSuperuser) return html``;
+                            return html`
+                                <a
+                                    class="pf-c-button pf-m-control pf-m-small"
+                                    href="#/core/applications/${this.application?.slug}"
+                                >
+                                    <i class="fas fa-pencil-alt"></i>
+                                </a>
+                            `;
+                        });
+                    }),
+                )}
+            </div>
+            <div class="pf-c-card__title">
+                <p>
+                    <a href="${ifDefined(this.application.launchUrl ?? "")}"
+                        >${this.application.name}</a
+                    >
+                </p>
+                <div class="pf-c-content">
+                    <small>${this.application.metaPublisher}</small>
+                </div>
+            </div>
+            <div class="pf-c-card__body">${truncate(this.application.metaDescription, 35)}</div>
+        </div>`;
+    }
+}

web/src/user/LibraryPage.ts

@@ -8,116 +8,30 @@ import {
     property,
     TemplateResult,
 } from "lit-element";
-import { ifDefined } from "lit-html/directives/if-defined";
-import { until } from "lit-html/directives/until";
 import { Application, CoreApi } from "@goauthentik/api";
 import { AKResponse } from "../api/Client";
 import { DEFAULT_CONFIG } from "../api/Config";
-import { me } from "../api/Users";
+import { loading } from "../utils";
-import { loading, truncate } from "../utils";
 import AKGlobal from "../authentik.css";
-import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
 import PFBase from "@patternfly/patternfly/patternfly-base.css";
-import PFButton from "@patternfly/patternfly/components/Button/button.css";
-import PFCard from "@patternfly/patternfly/components/Card/card.css";
 import PFContent from "@patternfly/patternfly/components/Content/content.css";
 import PFEmptyState from "@patternfly/patternfly/components/EmptyState/empty-state.css";
 import PFGallery from "@patternfly/patternfly/layouts/Gallery/gallery.css";
 import PFPage from "@patternfly/patternfly/components/Page/page.css";
-import { uiConfig } from "./config";
+import "./LibraryApplication";
-
-@customElement("ak-library-app")
-export class LibraryApplication extends LitElement {
-    @property({ attribute: false })
-    application?: Application;
-
-    static get styles(): CSSResult[] {
-        return [
-            PFBase,
-            PFCard,
-            PFButton,
-            PFAvatar,
-            AKGlobal,
-            css`
-                .pf-c-card {
-                    height: 100%;
-                }
-                i.pf-icon {
-                    height: 36px;
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                }
-                .pf-c-avatar {
-                    --pf-c-avatar--BorderRadius: 0;
-                }
-                .pf-c-card__header {
-                    min-height: 60px;
-                    justify-content: space-between;
-                }
-                .pf-c-card__header a {
-                    display: flex;
-                    flex-direction: column;
-                    justify-content: center;
-                    margin-right: 0.25em;
-                }
-            `,
-        ];
-    }
-
-    render(): TemplateResult {
-        if (!this.application) {
-            return html`<ak-spinner></ak-spinner>`;
-        }
-        return html` <div class="pf-c-card pf-m-hoverable pf-m-compact">
-            <div class="pf-c-card__header">
-                ${this.application.metaIcon
-                    ? html`<a href="${ifDefined(this.application.launchUrl ?? "")}"
-                          ><img
-                              class="app-icon pf-c-avatar"
-                              src="${ifDefined(this.application.metaIcon)}"
-                              alt="Application Icon"
-                      /></a>`
-                    : html`<i class="fas fas fa-share-square"></i>`}
-                ${until(
-                    uiConfig().then((config) => {
-                        if (!config.enabledFeatures.applicationEdit) {
-                            return html``;
-                        }
-                        return me().then((u) => {
-                            if (!u.user.isSuperuser) return html``;
-                            return html`
-                                <a
-                                    class="pf-c-button pf-m-control pf-m-small"
-                                    href="#/core/applications/${this.application?.slug}"
-                                >
-                                    <i class="fas fa-pencil-alt"></i>
-                                </a>
-                            `;
-                        });
-                    }),
-                )}
-            </div>
-            <div class="pf-c-card__title">
-                <p id="card-1-check-label">
-                    <a href="${ifDefined(this.application.launchUrl ?? "")}"
-                        >${this.application.name}</a
-                    >
-                </p>
-                <div class="pf-c-content">
-                    <small>${this.application.metaPublisher}</small>
-                </div>
-            </div>
-            <div class="pf-c-card__body">${truncate(this.application.metaDescription, 35)}</div>
-        </div>`;
-    }
-}
 
 @customElement("ak-library")
 export class LibraryPage extends LitElement {
     @property({ attribute: false })
     apps?: AKResponse<Application>;
 
+    constructor() {
+        super();
+        new CoreApi(DEFAULT_CONFIG).coreApplicationsList({}).then((apps) => {
+            this.apps = apps;
+        });
+    }
+
     pageTitle(): string {
         return t`My Applications`;
     }
@@ -132,12 +46,6 @@ export class LibraryPage extends LitElement {
         `);
     }
 
-    firstUpdated(): void {
-        new CoreApi(DEFAULT_CONFIG).coreApplicationsList({}).then((apps) => {
-            this.apps = apps;
-        });
-    }
-
     renderEmptyState(): TemplateResult {
         return html` <div class="pf-c-empty-state pf-m-full-height">
             <div class="pf-c-empty-state__content">