diff --git a/changelog.md b/changelog.md index b9c11ea..423d092 100644 --- a/changelog.md +++ b/changelog.md @@ -1,5 +1,12 @@ # Changelog +## 2026-03-19 - 2.9.0 - feat(app-store-view) +add app details action to store cards + +- adds a new "View Details" button alongside the existing deploy action +- dispatches a bubbling "view-app" event with the selected app payload for parent handlers +- updates card action layout and button styling to support multiple actions + ## 2026-03-18 - 2.8.0 - feat(elements) add app store view component for browsing and deploying app templates diff --git a/ts_web/00_commitinfo_data.ts b/ts_web/00_commitinfo_data.ts index c102b8d..470fe61 100644 --- a/ts_web/00_commitinfo_data.ts +++ b/ts_web/00_commitinfo_data.ts @@ -3,6 +3,6 @@ */ export const commitinfo = { name: '@serve.zone/catalog', - version: '2.8.0', + version: '2.9.0', description: 'UI component catalog for serve.zone' } diff --git a/ts_web/elements/sz-app-store-view.ts b/ts_web/elements/sz-app-store-view.ts index 345622e..3635377 100644 --- a/ts_web/elements/sz-app-store-view.ts +++ b/ts_web/elements/sz-app-store-view.ts @@ -396,6 +396,34 @@ export class SzAppStoreView extends DeesElement { height: 14px; } + .details-button { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 7px 12px; + border-radius: 6px; + font-size: 13px; + font-weight: 500; + cursor: pointer; + transition: all 200ms ease; + border: 1px solid ${cssManager.bdTheme('#e4e4e7', '#27272a')}; + background: transparent; + color: ${cssManager.bdTheme('#71717a', '#a1a1aa')}; + white-space: nowrap; + flex-shrink: 0; + } + + .details-button:hover { + border-color: ${cssManager.bdTheme('#d4d4d8', '#3f3f46')}; + color: ${cssManager.bdTheme('#18181b', '#fafafa')}; + } + + .card-actions { + display: flex; + align-items: center; + gap: 8px; + } + .empty-state { grid-column: 1 / -1; padding: 64px 24px; @@ -524,16 +552,21 @@ export class SzAppStoreView extends DeesElement {
${app.description}
`; @@ -556,6 +589,16 @@ export class SzAppStoreView extends DeesElement { return icons[name] || html`?`; } + private handleViewDetails(app: IAppTemplate) { + this.dispatchEvent( + new CustomEvent('view-app', { + detail: { app }, + bubbles: true, + composed: true, + }) + ); + } + private handleDeploy(app: IAppTemplate) { this.dispatchEvent( new CustomEvent('deploy-app', {