Add details

Author: stvncode

bun.lock

@@ -7,8 +7,8 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "format": "bunx prettier --write src/**/*",
-    "format:check": "bunx prettier --check src/**/*",
+    "format": "npx prettier --write src/**/*",
+    "format:check": "npx prettier --check src/**/*",
     "lint": "eslint src --ext .ts",
     "lint:fix": "eslint src --ext .ts --fix"
   },

package.json

@@ -1,3 +1,4 @@
+import '@awesome.me/webawesome/dist/components/icon/icon.js';
 import { LitElement, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 

src/components/app-header.ts

@@ -1,20 +1,15 @@
+import '@awesome.me/webawesome/dist/components/button/button.js';
 import { LitElement, css, html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 
-interface CardLink {
-  text: string;
-  url: string;
-  primary?: boolean;
-}
-
 @customElement('tool-card')
 export class ToolCard extends LitElement {
   @property({ type: String }) title = '';
   @property({ type: String }) description = '';
   @property({ type: String }) image = '';
   @property({ type: String }) url = '';
+  @property({ type: String }) text = '';
   @property({ type: String }) category = '';
-  @property({ type: Array }) links: CardLink[] = [];
 
   static styles = css`
     :host {
@@ -77,7 +72,7 @@ export class ToolCard extends LitElement {
     .card-description {
       color: #666;
       line-height: 1.5;
-      margin: 0 0 20px 0;
+      margin: 0 0 40px 0;
       flex: 1;
     }
 
@@ -88,38 +83,6 @@ export class ToolCard extends LitElement {
       margin-top: auto;
     }
 
-    .card-link {
-      display: inline-flex;
-      align-items: center;
-      justify-content: center;
-      padding: 10px 16px;
-      text-decoration: none;
-      border-radius: 8px;
-      font-weight: 500;
-      transition: all 0.2s ease;
-      border: 1px solid transparent;
-      font-size: 0.9rem;
-    }
-
-    .card-link.primary {
-      background: #03a9f4;
-      color: white;
-    }
-
-    .card-link.primary:hover {
-      background: #0288d1;
-    }
-
-    .card-link.secondary {
-      background: transparent;
-      color: #03a9f4;
-      border-color: #03a9f4;
-    }
-
-    .card-link.secondary:hover {
-      background: #e3f2fd;
-    }
-
     .external-icon {
       width: 14px;
       height: 14px;
@@ -147,34 +110,18 @@ export class ToolCard extends LitElement {
     return url.startsWith('http') && !url.includes('#');
   }
 
-  private _handleCardClick() {
+  private _handleButtonClick(event: Event) {
+    event.stopPropagation();
+
     if (this.url && this.url !== '#') {
       const isExternal = this._isExternalLink(this.url);
       if (isExternal) {
         window.open(this.url, '_blank', 'noopener,noreferrer');
-      } else {
-        this.dispatchEvent(
-          new CustomEvent('card-action', {
-            detail: { url: this.url },
-            bubbles: true,
-            composed: true,
-          })
-        );
-      }
-    }
-  }
-
-  private _handleLinkClick(link: CardLink, event: Event) {
-    event.stopPropagation();
-
-    if (link.url && link.url !== '#') {
-      const isExternal = this._isExternalLink(link.url);
-      if (isExternal) {
-        window.open(link.url, '_blank', 'noopener,noreferrer');
+        return;
       } else {
         this.dispatchEvent(
           new CustomEvent('tool-action', {
-            detail: { url: link.url, text: link.text },
+            detail: { url: this.url, text: this.text },
             bubbles: true,
             composed: true,
           })
@@ -185,7 +132,7 @@ export class ToolCard extends LitElement {
 
   render() {
     return html`
-      <div class="card" @click="${this._handleCardClick}">
+      <div class="card">
         <img src="${this.image}" alt="${this.title}" class="card-image" />
 
         <div class="card-content">
@@ -197,26 +144,12 @@ export class ToolCard extends LitElement {
           </div>
 
           <p class="card-description">${this.description}</p>
-
-          <div class="card-actions">
-            ${this.links.map(
-              link => html`
-                <a
-                  href="${link.url || '#'}"
-                  class="card-link ${link.primary ? 'primary' : 'secondary'}"
-                  target="${this._isExternalLink(link.url)
-                    ? '_blank'
-                    : '_self'}"
-                  rel="${this._isExternalLink(link.url)
-                    ? 'noopener noreferrer'
-                    : ''}"
-                  @click="${(e: Event) => this._handleLinkClick(link, e)}"
-                >
-                  ${link.text}
-                </a>
-              `
-            )}
-          </div>
+          <wa-button
+            href="${!this._isExternalLink(this.url) ? this.url : '#'}"
+            variant="brand"
+            @click="${(e: Event) => this._handleButtonClick(e)}"
+            >${this.text}</wa-button
+          >
         </div>
       </div>
     `;

src/components/tool-card.ts

@@ -4,8 +4,14 @@ import { match } from 'ts-pattern';
 
 import './components/app-header.js';
 
+import './pages/bluetooth-proxy-details';
+import './pages/empty-esphome-details';
+import './pages/esphome-details';
 import './pages/home-page.js';
+import './pages/improv-details';
+import './pages/media-player-details';
 import './pages/vpe-details';
+import './pages/zbt1-details';
 import './pages/zwa2-details';
 
 import { router } from './utils/router';
@@ -25,10 +31,6 @@ export class MainApp extends LitElement {
   connectedCallback() {
     super.connectedCallback();
 
-    router.addRoute('/', 'home-page');
-    router.addRoute('/vpe', 'vpe-details');
-    router.addRoute('/zwa2', 'zwa2-details');
-
     window.addEventListener('route-changed', this._handleRouteChange);
     this.currentRoute = router.getCurrentRoute();
   }
@@ -47,6 +49,21 @@ export class MainApp extends LitElement {
     return match(this.currentRoute)
       .with('/vpe', () => html`<vpe-details></vpe-details>`)
       .with('/zwa2', () => html`<zwa2-details></zwa2-details>`)
+      .with('/zbt1', () => html`<zbt1-details></zbt1-details>`)
+      .with('/esphome', () => html`<esphome-details></esphome-details>`)
+      .with(
+        '/media-player',
+        () => html`<media-player-details></media-player-details>`
+      )
+      .with('/improv', () => html`<improv-details></improv-details>`)
+      .with(
+        '/empty-esphome',
+        () => html`<empty-esphome-details></empty-esphome-details>`
+      )
+      .with(
+        '/bluetooth-proxy',
+        () => html`<bluetooth-proxy-details></bluetooth-proxy-details>`
+      )
       .otherwise(() => html`<home-page></home-page>`);
   }
 

src/main-app.ts

@@ -0,0 +1,14 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import '../components/details.js';
+import { detailsByKey } from '../utils/details.js';
+
+@customElement('bluetooth-proxy-details')
+export class BluetoothProxyDetails extends LitElement {
+  render() {
+    return html`<details-page
+      .config=${detailsByKey.bluetooth}
+    ></details-page>`;
+  }
+}

src/pages/bluetooth-proxy-details.ts

@@ -0,0 +1,12 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import '../components/details.js';
+import { detailsByKey } from '../utils/details.js';
+
+@customElement('empty-esphome-details')
+export class EmptyESPHomeDetails extends LitElement {
+  render() {
+    return html`<details-page .config=${detailsByKey.empty}></details-page>`;
+  }
+}

src/pages/empty-esphome-details.ts

@@ -0,0 +1,12 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import '../components/details.js';
+import { detailsByKey } from '../utils/details.js';
+
+@customElement('esphome-details')
+export class ESPHomeDetails extends LitElement {
+  render() {
+    return html`<details-page .config=${detailsByKey.esphome}></details-page>`;
+  }
+}

src/pages/esphome-details.ts

@@ -2,7 +2,7 @@ import { LitElement, css, html } from 'lit';
 import { customElement } from 'lit/decorators.js';
 
 import '../components/tool-card.js';
-import tools from '../utils/tools.js';
+import { tools } from '../utils/tools.js';
 
 @customElement('home-page')
 export class HomePage extends LitElement {
@@ -81,8 +81,8 @@ export class HomePage extends LitElement {
               description="${tool.description}"
               image="${tool.image}"
               url="${tool.url}"
+              text="${tool.text}"
               category="${tool.category ?? ''}"
-              .links=${tool.links}
             ></tool-card>
           `
         )}

src/pages/home-page.ts

@@ -0,0 +1,12 @@
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+
+import '../components/details.js';
+import { detailsByKey } from '../utils/details.js';
+
+@customElement('improv-details')
+export class ImprovDetails extends LitElement {
+  render() {
+    return html`<details-page .config=${detailsByKey.improv}></details-page>`;
+  }
+}