web: a few minor bugfixes and lintfixes (#9044)

* web: fix esbuild issue with style sheets

Getting ESBuild, Lit, and Storybook to all agree on how to read and parse stylesheets is a serious
pain. This fix better identifies the value types (instances) being passed from various sources in
the repo to the three *different* kinds of style processors we're using (the native one, the
polyfill one, and whatever the heck Storybook does internally).

Falling back to using older CSS instantiating techniques one era at a time seems to do the trick.
It's ugly, but in the face of the aggressive styling we use to avoid Flashes of Unstyled Content
(FLoUC), it's the logic with which we're left.

In standard mode, the following warning appears on the console when running a Flow:

```
Autofocus processing was blocked because a document already has a focused element.
```

In compatibility mode, the following **error** appears on the console when running a Flow:

```
crawler-inject.js:1106 Uncaught TypeError: Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'.
    at initDomMutationObservers (crawler-inject.js:1106:18)
    at crawler-inject.js:1114:24
    at Array.forEach (<anonymous>)
    at initDomMutationObservers (crawler-inject.js:1114:10)
    at crawler-inject.js:1549:1
initDomMutationObservers @ crawler-inject.js:1106
(anonymous) @ crawler-inject.js:1114
initDomMutationObservers @ crawler-inject.js:1114
(anonymous) @ crawler-inject.js:1549
```

Despite this error, nothing seems to be broken and flows work as anticipated.

* web: just a few minor bugfixes and lintfixes

While investigating the viability of using ESLint 9, I found a few bugs.

The one major bug was found in the error handling code, where a comparison was
automatically invalid and would never realize "true."

A sequence used in our Storybook support code to generate unique IDs for
applications and providers had an annoying ambiguity:

```
new Array(length).fill(" ")
```

Lint states (and I agree):

> It's not clear whether the argument is meant to be the length of the array or
> the only element. If the argument is the array's length, consider using
> `Array.from({ length: n })`. If the argument is the only element, use
> `[element]`."

It's the former, and I intended as much.

Aside from those, a few over-wrought uses of the spread operator were removed.

* Fat-finger error. Thank gnu I double-check my PRs before I move them out of draft!

web/src/common/errors.ts

@@ -16,7 +16,7 @@ export async function parseAPIError(error: Error): Promise<APIErrorTypes> {
     if (!(error instanceof ResponseError)) {
         return error;
     }
-    if (error.response.status < 400 && error.response.status > 499) {
+    if (error.response.status < 400 || error.response.status > 499) {
         return error;
     }
     const body = await error.response.json();

web/src/common/helpers/plex.ts

@@ -55,9 +55,7 @@ export class PlexAPIClient {
     ): Promise<{ authUrl: string; pin: PlexPinResponse }> {
         const headers = {
             ...DEFAULT_HEADERS,
-            ...{
-                "X-Plex-Client-Identifier": clientIdentifier,
-            },
+            "X-Plex-Client-Identifier": clientIdentifier,
         };
         const pinResponse = await fetch("https://plex.tv/api/v2/pins.json?strong=true", {
             method: "POST",
@@ -75,9 +73,7 @@ export class PlexAPIClient {
     static async pinStatus(clientIdentifier: string, id: number): Promise<string | undefined> {
         const headers = {
             ...DEFAULT_HEADERS,
-            ...{
-                "X-Plex-Client-Identifier": clientIdentifier,
-            },
+            "X-Plex-Client-Identifier": clientIdentifier,
         };
         const pinResponse = await fetch(`https://plex.tv/api/v2/pins/${id}`, {
             headers: headers,

web/src/common/utils.ts

@@ -123,7 +123,7 @@ const isCSSResult = (v: unknown): v is CSSResult =>
 
 // prettier-ignore
 export const _adaptCSS = (sheet: AdaptableStylesheet): CSSStyleSheet =>
-    (typeof sheet === "string" ? css([sheet] as unknown as TemplateStringsArray, ...[]).styleSheet
+    (typeof sheet === "string" ? css([sheet] as unknown as TemplateStringsArray, []).styleSheet
         : isCSSResult(sheet) ? sheet.styleSheet
         : sheet) as CSSStyleSheet;
 

web/src/elements/buttons/TokenCopyButton/ak-token-copy-button.stories.ts

@@ -12,7 +12,7 @@ import AKTokenCopyButton from "./ak-token-copy-button";
 
 function makeid(length: number) {
     const sample = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
-    return new Array(length)
+    return Array.from({ length })
         .fill(" ")
         .map(() => sample.charAt(Math.floor(Math.random() * sample.length)))
         .join("");

web/src/elements/router/RouterOutlet.ts

@@ -91,7 +91,7 @@ export class RouterOutlet extends AKElement {
         let matchedRoute: RouteMatch | null = null;
         this.routes.some((route) => {
             const match = route.url.exec(activeUrl);
-            if (match != null) {
+            if (match !== null) {
                 matchedRoute = new RouteMatch(route);
                 matchedRoute.arguments = match.groups || {};
                 matchedRoute.fullUrl = activeUrl;