Make add provider workflow a bit more friendly

FIXME: Refactor all this! Echo really starts to need a design system
sleepyfran · Sep 17, 2024 · e22987b · e22987b
1 parent 71be0c1
commit e22987b
Show file tree

Hide file tree

Showing 7 changed files with 256 additions and 65 deletions.
diff --git a/packages/components/add-provider/src/add-provider.ts b/packages/components/add-provider/src/add-provider.ts
@@ -61,10 +61,10 @@ export class AddProvider extends LitElement {
       Match.tag(
         "ProviderStarted",
         () =>
-          html`<h1>
-            Provider started! Check the status on the top bar for more
-            information
-          </h1>`,
+          html`<h5>
+            Provider started! Your tracks will now be scanned and added to your
+            library. Check the status on the top bar for the latest status.
+          </h5>`,
       ),
       Match.exhaustive,
     );

diff --git a/packages/components/add-provider/src/provider-loader.ts b/packages/components/add-provider/src/provider-loader.ts
@@ -5,7 +5,7 @@ import {
   type ProviderMetadata,
 } from "@echo/core-types";
 import { Match } from "effect";
-import { LitElement, html } from "lit";
+import { LitElement, css, html } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 /**
@@ -60,30 +60,66 @@ export class ProviderLoader extends LitElement {
     },
   );
 
+  static styles = css`
+    .available-provider-list {
+      display: flex;
+      justify-content: center;
+      gap: 1rem;
+    }
+
+    button {
+      margin-top: 10px;
+      padding: 5px 10px;
+      background-color: #fff;
+      color: #000;
+      border: 1px solid #000;
+      cursor: pointer;
+      font-size: 1em;
+      text-transform: uppercase;
+    }
+
+    button:hover {
+      background-color: #000;
+      color: #fff;
+    }
+  `;
+
   render() {
-    return Match.value(this._loaderStatus).pipe(
-      Match.tag("Initial", () =>
-        this.availableProviders.map(
-          (provider) => html`
-            <button @click=${() => this._loadProvider.run(provider)}>
-              ${provider.id}
+    return html`
+      <h1>Add provider</h1>
+      ${Match.value(this._loaderStatus).pipe(
+        Match.tag(
+          "Initial",
+          () => html`
+            <p>
+              These are all the currently supported providers that are available
+              to add. Select one to start:
+            </p>
+            <div class="available-provider-list">
+              ${this.availableProviders.map(
+                (provider) => html`
+                  <button @click=${() => this._loadProvider.run(provider)}>
+                    ${provider.id}
+                  </button>
+                `,
+              )}
+            </div>
+          `,
+        ),
+        Match.tag(
+          "WaitingToConnect",
+          ({ metadata }) => html`
+            <button @click=${() => this._connectToProvider.run({})}>
+              Connect to ${metadata.id}
             </button>
           `,
         ),
-      ),
-      Match.tag(
-        "WaitingToConnect",
-        ({ metadata }) => html`
-          <button @click=${() => this._connectToProvider.run({})}>
-            Connect to ${metadata.id}
-          </button>
-        `,
-      ),
-      Match.tag("LoadingProvider", () => html`<h1>Loading provider...</h1>`),
-      Match.tag("ConnectingToProvider", () => html`<h1>Connecting...</h1>`),
-      Match.tag("Connected", () => html`<h1>Connected!</h1>`),
-      Match.exhaustive,
-    );
+        Match.tag("LoadingProvider", () => html`<h5>Loading provider...</h5>`),
+        Match.tag("ConnectingToProvider", () => html`<h5>Connecting...</h5>`),
+        Match.tag("Connected", () => html`<h5>Connected!</h5>`),
+        Match.exhaustive,
+      )}
+    `;
   }
 }
 

diff --git a/packages/components/add-provider/src/select-root.ts b/packages/components/add-provider/src/select-root.ts
@@ -1,6 +1,6 @@
 import { EffectFn } from "@echo/components-shared-controllers/src/effect-fn.controller";
 import { AddProviderWorkflow, type FolderMetadata } from "@echo/core-types";
-import { LitElement, html, nothing } from "lit";
+import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 /**
@@ -30,18 +30,44 @@ export class SelectRoot extends LitElement {
     },
   );
 
+  static styles = css`
+    .available-folder-grid {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+      gap: 10;
+    }
+
+    button {
+      margin-top: 10px;
+      padding: 5px 10px;
+      background-color: #fff;
+      color: #000;
+      border: 1px solid #000;
+      cursor: pointer;
+      font-size: 1em;
+      text-transform: uppercase;
+    }
+
+    button:hover {
+      background-color: #000;
+      color: #fff;
+    }
+  `;
+
   render() {
     return this._selectRoot.render({
       initial: () => html`
         <h1>Select a root folder:</h1>
-        ${this.availableFolders.map(
-          (folder) =>
-            html`<button @click=${() => this._selectRoot.run(folder)}>
-              ${folder.name}
-            </button>`,
-        )}
+        <div class="available-folder-grid">
+          ${this.availableFolders.map(
+            (folder) =>
+              html`<button @click=${() => this._selectRoot.run(folder)}>
+                ${folder.name}
+              </button>`,
+          )}
+        </div>
       `,
-      pending: () => html`<h1>Connecting...</h1>`,
+      pending: () => html`<h5>Connecting...</h5>`,
       complete: () => nothing,
     });
   }

diff --git a/packages/components/provider-status/package.json b/packages/components/provider-status/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@echo/core-types": "^1.0.0",
+    "@echo/components-add-provider": "^1.0.0",
     "@echo/components-icons": "^1.0.0",
     "@echo/components-shared-controllers": "^1.0.0",
     "@echo/services-bootstrap-runtime": "^1.0.0",

diff --git a/packages/components/provider-status/src/provider-status.ts b/packages/components/provider-status/src/provider-status.ts
@@ -5,10 +5,11 @@ import {
 } from "@echo/core-types";
 import { StreamConsumer } from "@echo/components-shared-controllers";
 import { LitElement, css, html, nothing } from "lit";
-import { customElement } from "lit/decorators.js";
+import { customElement, query } from "lit/decorators.js";
 import { map } from "lit/directives/map.js";
 import { Match } from "effect";
 import "@echo/components-icons";
+import "@echo/components-add-provider";
 
 /**
  * Component that displays the status of all active providers.
@@ -20,6 +21,9 @@ export class AllProvidersStatusBar extends LitElement {
     MediaProviderStatus.observe,
   );
 
+  @query("#add-provider")
+  private _addProviderDialog!: HTMLDialogElement;
+
   static styles = css`
     .provider-container {
       display: flex;
@@ -41,6 +45,25 @@ export class AllProvidersStatusBar extends LitElement {
       animation: blinking 1s infinite;
     }
 
+    dialog[open] {
+      display: flex;
+      flex-direction: column;
+      height: 50%;
+      width: 50%;
+    }
+
+    dialog[open]::backdrop {
+      background-color: rgb(0 0 0 / 75%);
+    }
+
+    dialog .dismiss {
+      align-self: flex-end;
+      padding: 0.5rem;
+      font-size: 1.5rem;
+      background: none;
+      border: none;
+    }
+
     @keyframes blinking {
       0% {
         opacity: 1;
@@ -57,21 +80,24 @@ export class AllProvidersStatusBar extends LitElement {
   render() {
     return this._providerStatus.render({
       initial: () => nothing,
-      item: (status) =>
-        map(
-          status,
-          ([providerId, providerStatus]) => html`
-            <div class="provider-container">
+      item: (status) => html`
+        <div class="provider-container">
+          ${map(
+            status,
+            ([providerId, providerStatus]) => html`
               <div
                 class="provider-status"
                 title=${this._providerStatusTitle(providerId, providerStatus)}
               >
                 ${this._renderProviderIcon(providerId)}
                 ${this._renderProviderStatus(providerStatus)}
               </div>
-            </div>
-          `,
-        ),
+            `,
+          )}
+          <button @click=${this._onAddProviderClick}>+</button>
+        </div>
+        ${this._renderAddProviderModal()}
+      `,
       complete: () => nothing,
       error: () => nothing,
     });
@@ -116,6 +142,22 @@ export class AllProvidersStatusBar extends LitElement {
       Match.orElse(() => `Syncing ${providerId}`),
     );
   }
+
+  private _renderAddProviderModal() {
+    return html`
+      <dialog id="add-provider">
+        <button class="dismiss" @click=${() => this._addProviderDialog.close()}>
+          x
+        </button>
+        <add-provider></add-provider>
+      </dialog>
+    `;
+  }
+
+  // --- Event handlers ---
+  private _onAddProviderClick() {
+    this._addProviderDialog.showModal();
+  }
 }
 
 declare global {

diff --git a/packages/web/package.json b/packages/web/package.json
@@ -11,7 +11,6 @@
     "typecheck": "tsc --noEmit"
   },
   "dependencies": {
-    "@echo/components-add-provider": "^1.0.0",
     "@echo/components-library": "^1.0.0",
     "@echo/components-player": "^1.0.0",
     "@echo/components-provider-status": "^1.0.0",