onebox/ts_web/elements/ob-view-appstore.ts

import * as plugins from '../plugins.js';
import * as shared from './shared/index.js';
import * as appstate from '../appstate.js';
import * as interfaces from '../../ts_interfaces/index.js';
import {
  DeesElement,
  customElement,
  html,
  state,
  css,
  cssManager,
  type TemplateResult,
} from '@design.estate/dees-element';

// App template definitions — curated Docker apps
const appTemplates = [
  {
    id: 'nginx',
    name: 'Nginx',
    description: 'High-performance web server and reverse proxy. Lightweight, fast, and battle-tested.',
    category: 'Web Server',
    iconName: 'globe',
    image: 'nginx:alpine',
    port: 80,
  },
  {
    id: 'wordpress',
    name: 'WordPress',
    description: 'The world\'s most popular content management system. Powers over 40% of the web.',
    category: 'CMS',
    iconName: 'file-text',
    image: 'wordpress:latest',
    port: 80,
    enableMongoDB: false,
    envVars: [
      { key: 'WORDPRESS_DB_HOST', value: '', description: 'Database host', required: true },
      { key: 'WORDPRESS_DB_USER', value: 'wordpress', description: 'Database user' },
      { key: 'WORDPRESS_DB_PASSWORD', value: '', description: 'Database password', required: true },
      { key: 'WORDPRESS_DB_NAME', value: 'wordpress', description: 'Database name' },
    ],
  },
  {
    id: 'ghost',
    name: 'Ghost',
    description: 'Modern publishing platform for creating professional blogs and newsletters.',
    category: 'CMS',
    iconName: 'book-open',
    image: 'ghost:latest',
    port: 2368,
    envVars: [
      { key: 'url', value: 'http://localhost:2368', description: 'Public URL of the blog' },
    ],
  },
  {
    id: 'gitea',
    name: 'Gitea',
    description: 'Lightweight self-hosted Git service. Easy to install and maintain.',
    category: 'Dev Tools',
    iconName: 'git-branch',
    image: 'gitea/gitea:latest',
    port: 3000,
  },
  {
    id: 'nextcloud',
    name: 'Nextcloud',
    description: 'Self-hosted file sync and share platform. Your own private cloud.',
    category: 'Storage',
    iconName: 'package',
    image: 'nextcloud:latest',
    port: 80,
  },
  {
    id: 'grafana',
    name: 'Grafana',
    description: 'Open-source observability platform for metrics, logs, and traces visualization.',
    category: 'Monitoring',
    iconName: 'monitor',
    image: 'grafana/grafana:latest',
    port: 3000,
    envVars: [
      { key: 'GF_SECURITY_ADMIN_PASSWORD', value: 'admin', description: 'Admin password' },
    ],
  },
  {
    id: 'uptime-kuma',
    name: 'Uptime Kuma',
    description: 'Self-hosted monitoring tool. Beautiful UI for tracking uptime of services.',
    category: 'Monitoring',
    iconName: 'monitor',
    image: 'louislam/uptime-kuma:latest',
    port: 3001,
  },
  {
    id: 'plausible',
    name: 'Plausible Analytics',
    description: 'Privacy-friendly web analytics. No cookies, GDPR compliant by design.',
    category: 'Analytics',
    iconName: 'monitor',
    image: 'plausible/analytics:latest',
    port: 8000,
    enableClickHouse: true,
  },
  {
    id: 'vaultwarden',
    name: 'Vaultwarden',
    description: 'Lightweight Bitwarden-compatible password manager server.',
    category: 'Security',
    iconName: 'shield',
    image: 'vaultwarden/server:latest',
    port: 80,
  },
  {
    id: 'n8n',
    name: 'N8N',
    description: 'Workflow automation tool. Connect anything to everything with a visual editor.',
    category: 'Automation',
    iconName: 'server',
    image: 'n8nio/n8n:latest',
    port: 5678,
  },
  {
    id: 'mattermost',
    name: 'Mattermost',
    description: 'Open-source Slack alternative for team communication and collaboration.',
    category: 'Communication',
    iconName: 'mail',
    image: 'mattermost/mattermost-team-edition:latest',
    port: 8065,
  },
  {
    id: 'portainer',
    name: 'Portainer',
    description: 'Docker management UI. Monitor and manage containers from a web interface.',
    category: 'Dev Tools',
    iconName: 'package',
    image: 'portainer/portainer-ce:latest',
    port: 9000,
  },
  {
    id: 'redis',
    name: 'Redis',
    description: 'In-memory data store used as database, cache, and message broker.',
    category: 'Database',
    iconName: 'database',
    image: 'redis:alpine',
    port: 6379,
  },
  {
    id: 'postgres',
    name: 'PostgreSQL',
    description: 'Advanced open-source relational database. Reliable and feature-rich.',
    category: 'Database',
    iconName: 'database',
    image: 'postgres:16-alpine',
    port: 5432,
    envVars: [
      { key: 'POSTGRES_PASSWORD', value: '', description: 'Superuser password', required: true },
      { key: 'POSTGRES_USER', value: 'postgres', description: 'Superuser name' },
      { key: 'POSTGRES_DB', value: 'postgres', description: 'Default database name' },
    ],
  },
  {
    id: 'mariadb',
    name: 'MariaDB',
    description: 'Community-developed fork of MySQL. Drop-in replacement with enhanced features.',
    category: 'Database',
    iconName: 'database',
    image: 'mariadb:latest',
    port: 3306,
    envVars: [
      { key: 'MARIADB_ROOT_PASSWORD', value: '', description: 'Root password', required: true },
    ],
  },
  {
    id: 'adminer',
    name: 'Adminer',
    description: 'Database management tool in a single PHP file. Supports MySQL, PostgreSQL, SQLite.',
    category: 'Dev Tools',
    iconName: 'database',
    image: 'adminer:latest',
    port: 8080,
  },
];

@customElement('ob-view-appstore')
export class ObViewAppStore extends DeesElement {
  public static styles = [
    cssManager.defaultStyles,
    shared.viewHostCss,
    css``,
  ];

  async connectedCallback() {
    super.connectedCallback();
  }

  public render(): TemplateResult {
    return html`
      <ob-sectionheading>App Store</ob-sectionheading>
      <sz-app-store-view
        .apps=${appTemplates}
        @deploy-app=${(e: CustomEvent) => this.handleDeployApp(e)}
      ></sz-app-store-view>
    `;
  }

  private handleDeployApp(e: CustomEvent) {
    const app = e.detail?.app;
    if (!app) return;

    // Store the template in appstate so the services create view can pre-fill
    appstate.uiStatePart.setState({
      ...appstate.uiStatePart.getState(),
      pendingAppTemplate: app,
    });

    // Navigate to Services tab — the services view will detect the pending template
    appstate.uiStatePart.dispatchAction(appstate.setActiveViewAction, { view: 'services' });
  }
}