web: Detangling some circular dependencies in Admin and User (#6852)

* Web: Detangling some circular dependencies in Admin and User

Admin, User, and Flow should not dependend upon each other, at least
not in a circular way.  If Admin and User depend on Flow, that's
fine, but Flow should not correspondingly depend upon elements of
either; if they have something in common, let's put them in
`@goauthentik/common` or find some other smart place to store them.

This commit refactors the intentToLabel and actionToLabel functions
into `@goauthentik/common/labels` and converts them to static tables
for maintenance purposes.

* web: "Consistency is the hobgoblin of small minds" - Ralph Waldo Emerson

* web: I found these confusing to look at, so I added comments.

* web: remove admin-to-user component reference(s) (#6856)

There was only one: AppIcon.  This has been moved to `components`.

Touching the LibraryApplications page triggered a cyclomatic
complexity check.  Extracting the expansion block and streamlining
the class and style declarations with lit directives helped.

web/src/components/ak-app-icon.ts

@@ -0,0 +1,85 @@
+import { AKElement } from "@goauthentik/app/elements/Base";
+import { PFSize } from "@goauthentik/app/elements/Spinner";
+
+import { msg } from "@lit/localize";
+import { CSSResult, TemplateResult, css, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+
+import PFFAIcons from "@patternfly/patternfly/base/patternfly-fa-icons.css";
+import PFAvatar from "@patternfly/patternfly/components/Avatar/avatar.css";
+
+import { Application } from "@goauthentik/api";
+
+@customElement("ak-app-icon")
+export class AppIcon extends AKElement {
+    @property({ attribute: false })
+    app?: Application;
+
+    @property()
+    size?: PFSize;
+
+    static get styles(): CSSResult[] {
+        return [
+            PFFAIcons,
+            PFAvatar,
+            css`
+                :host {
+                    max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
+                }
+                :host([size="pf-m-lg"]) {
+                    --icon-height: 4rem;
+                    --icon-border: 0.25rem;
+                }
+                :host([size="pf-m-md"]) {
+                    --icon-height: 2rem;
+                    --icon-border: 0.125rem;
+                }
+                :host([size="pf-m-sm"]) {
+                    --icon-height: 1rem;
+                    --icon-border: 0.125rem;
+                }
+                .pf-c-avatar {
+                    --pf-c-avatar--BorderRadius: 0;
+                    --pf-c-avatar--Height: calc(
+                        var(--icon-height) + var(--icon-border) + var(--icon-border)
+                    );
+                    --pf-c-avatar--Width: calc(
+                        var(--icon-height) + var(--icon-border) + var(--icon-border)
+                    );
+                }
+                .icon {
+                    font-size: var(--icon-height);
+                    color: var(--ak-global--Color--100);
+                    padding: var(--icon-border);
+                    max-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
+                    line-height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
+                    filter: drop-shadow(5px 5px 5px rgba(128, 128, 128, 0.25));
+                }
+                div {
+                    height: calc(var(--icon-height) + var(--icon-border) + var(--icon-border));
+                }
+            `,
+        ];
+    }
+
+    render(): TemplateResult {
+        if (!this.app) {
+            return html`<div><i class="icon fas fa-question-circle"></i></div>`;
+        }
+        if (this.app?.metaIcon) {
+            if (this.app.metaIcon.startsWith("fa://")) {
+                const icon = this.app.metaIcon.replaceAll("fa://", "");
+                return html`<div><i class="icon fas ${icon}"></i></div>`;
+            }
+            return html`<img
+                class="icon pf-c-avatar"
+                src="${ifDefined(this.app.metaIcon)}"
+                alt="${msg("Application Icon")}"
+            />`;
+        }
+        return html`<span class="icon">${this.app?.name.charAt(0).toUpperCase()}</span>`;
+    }
+}
+
+export default AppIcon;