@kennofizet/apphub-frontend 0.1.0

package/src/modules/app-store/components/AppHubDraftStoreApp.vue

@@ -0,0 +1,184 @@
+<template>
+  <div class="apphub-draft-store">
+    <header class="apphub-draft-store__hero">
+      <span class="apphub-draft-store__hero-icon" aria-hidden="true">🧪</span>
+      <div class="apphub-draft-store__hero-text">
+        <h2 class="apphub-draft-store__title">{{ labels.draft_store_title }}</h2>
+        <p class="apphub-draft-store__intro">{{ labels.draft_store_intro }}</p>
+      </div>
+    </header>
+
+    <div ref="scrollRoot" class="apphub-draft-store__body apphub-draft-store__body--scroll">
+      <input
+        v-model="catalog.search"
+        type="search"
+        class="apphub-draft-store__search"
+        :placeholder="labels.app_store_search"
+      />
+
+      <p v-if="catalog.loading && !catalog.items.length" class="apphub-draft-store__msg">
+        {{ labels.app_store_loading }}
+      </p>
+      <p v-else-if="catalog.error === 'permission_denied'" class="apphub-draft-store__msg apphub-draft-store__msg--error">
+        {{ labels.app_store_permission_denied }}
+      </p>
+      <p v-else-if="catalog.error === 'load_failed'" class="apphub-draft-store__msg apphub-draft-store__msg--error">
+        {{ labels.app_store_load_error }}
+      </p>
+      <p v-else-if="catalog.error === 'no_api'" class="apphub-draft-store__msg apphub-draft-store__msg--warn">
+        {{ labels.app_store_no_api }}
+      </p>
+
+      <div
+        v-else-if="!catalog.loading && !appStore.filteredTestingApps.length"
+        class="apphub-draft-store__empty"
+      >
+        <span class="apphub-draft-store__empty-icon" aria-hidden="true">📭</span>
+        <p>{{ labels.draft_store_empty }}</p>
+      </div>
+
+      <template v-else-if="appStore.filteredTestingApps.length">
+        <ul class="apphub-draft-store__list">
+          <li v-for="app in appStore.filteredTestingApps" :key="app.slug">
+            <AppHubDraftStoreCard
+              :app="app"
+              :labels="labels"
+              :root-app="rootApp"
+              :installed="appStore.isInstalled(app.slug)"
+              :can-install="appStore.canInstall(app)"
+              :pinging="pingingSlug === app.slug"
+              :ping-result="pingResults[app.slug] ?? null"
+              @install="onInstall"
+              @uninstall="onUninstall"
+              @ping="onPing"
+            />
+          </li>
+        </ul>
+        <p v-if="catalog.loadingMore" class="apphub-catalog-footer">{{ labels.app_store_loading_more }}</p>
+        <div ref="scrollSentinel" class="apphub-catalog-sentinel" aria-hidden="true" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed, getCurrentInstance, inject, onMounted, reactive, ref, watch } from 'vue'
+import {
+  getHostApiForApp,
+  isBackendReadyForApp,
+  resolveRootApp,
+} from '../../../composables/useAppHubHostApi.js'
+import { useAppHubZoneContext } from '../../../composables/useAppHubZoneContext.js'
+import { t } from '../../../i18n/index.js'
+import { resolveLang } from '../../../i18n/resolveLang.js'
+import { CATALOG_MODE_DRAFT } from '../constants/catalogModes.js'
+import { useCatalogInfiniteScroll } from '../composables/useCatalogInfiniteScroll.js'
+import { useAppStore } from '../composables/useAppStore.js'
+import AppHubDraftStoreCard from './AppHubDraftStoreCard.vue'
+
+const props = defineProps({
+  onInstalled: { type: Function, default: null },
+  onUninstalled: { type: Function, default: null },
+})
+
+const appStore = useAppStore()
+const catalog = appStore.catalogs.draft
+const rootApp = resolveRootApp(getCurrentInstance())
+const zone = useAppHubZoneContext()
+const moduleOptions = inject('apphubOptions', {})
+const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
+const pingingSlug = ref('')
+const pingResults = reactive({})
+
+const labels = computed(() => ({
+  draft_store_title: t('draft_store_title', lang.value),
+  draft_store_intro: t('draft_store_intro', lang.value),
+  draft_store_empty: t('draft_store_empty', lang.value),
+  app_store_search: t('app_store_search', lang.value),
+  app_store_install: t('app_store_install', lang.value),
+  app_store_loading: t('app_store_loading', lang.value),
+  app_store_loading_more: t('app_store_loading_more', lang.value),
+  app_store_load_error: t('app_store_load_error', lang.value),
+  app_store_permission_denied: t('app_store_permission_denied', lang.value),
+  app_store_no_api: t('app_store_no_api', lang.value),
+  app_store_unavailable: t('app_store_unavailable', lang.value),
+  app_store_status_draft: t('app_store_status_draft', lang.value),
+  app_store_installed: t('app_store_installed', lang.value),
+  app_store_uninstall: t('app_store_uninstall', lang.value),
+  draft_ping_btn: t('draft_ping_btn', lang.value),
+  draft_ping_pinging: t('draft_ping_pinging', lang.value),
+  draft_ping_ok: t('draft_ping_ok', lang.value),
+  draft_ping_fail: t('draft_ping_fail', lang.value),
+  dev_review_history_btn: t('dev_review_history_btn', lang.value),
+  dev_review_history_loading: t('dev_review_history_loading', lang.value),
+  dev_review_history_title: t('dev_review_history_title', lang.value),
+  dev_review_history_empty: t('dev_review_history_empty', lang.value),
+  dev_review_history_current: t('dev_review_history_current', lang.value),
+  dev_review_history_error: t('dev_review_history_error', lang.value),
+}))
+
+function hostApiOptions() {
+  return {
+    backendReady: isBackendReadyForApp(rootApp),
+    mode: CATALOG_MODE_DRAFT,
+  }
+}
+
+async function reloadCatalog() {
+  if (!rootApp) return
+  await appStore.loadCatalog(getHostApiForApp(rootApp), hostApiOptions())
+}
+
+async function loadMore() {
+  if (!rootApp) return
+  await appStore.loadMoreCatalog(getHostApiForApp(rootApp), CATALOG_MODE_DRAFT, hostApiOptions())
+}
+
+const { rootRef: scrollRoot, sentinelRef: scrollSentinel } = useCatalogInfiniteScroll({
+  canLoadMore: () => catalog.hasMore && !catalog.loading && !catalog.loadingMore,
+  onLoadMore: loadMore,
+})
+
+async function onInstall(app) {
+  if (!appStore.installApp(app.slug)) return
+  await props.onInstalled?.(app)
+}
+
+async function onUninstall(app) {
+  if (!appStore.uninstallApp(app.slug)) return
+  await props.onUninstalled?.(app)
+}
+
+async function onPing(app) {
+  const api = getHostApiForApp(rootApp)
+  if (!api?.ping || !app?.slug) return
+  pingingSlug.value = app.slug
+  delete pingResults[app.slug]
+  try {
+    const res = await api.ping(app.slug)
+    pingResults[app.slug] = res?.data?.data ?? { ok: false }
+  } catch {
+    pingResults[app.slug] = { ok: false }
+  } finally {
+    pingingSlug.value = ''
+  }
+}
+
+onMounted(() => {
+  if (!catalog.loaded) reloadCatalog()
+})
+
+watch(
+  () => moduleOptions?.hasToken,
+  (hasToken) => {
+    if (hasToken && !catalog.loaded) reloadCatalog()
+  },
+)
+
+watch(
+  () => [zone?.state?.selectedZoneId, zone?.state?.viewAllZones],
+  () => {
+    if (moduleOptions?.hasToken) reloadCatalog()
+  },
+)
+</script>

package/src/modules/app-store/components/AppHubDraftStoreCard.vue

@@ -0,0 +1,116 @@
+<template>
+  <article class="apphub-draft-card">
+    <div class="apphub-draft-card__main">
+      <div class="apphub-draft-card__icon" aria-hidden="true">{{ app.icon }}</div>
+      <div class="apphub-draft-card__body">
+        <h3 class="apphub-draft-card__name">{{ app.name }}</h3>
+        <p class="apphub-draft-card__slug">
+          {{ app.slug }}<span v-if="app.version"> · v{{ app.version }}</span>
+        </p>
+        <p v-if="app.description" class="apphub-draft-card__desc">{{ app.description }}</p>
+      </div>
+    </div>
+
+    <div class="apphub-draft-card__actions">
+      <button
+        v-if="!installed && canInstall"
+        type="button"
+        class="apphub-draft-card__btn apphub-draft-card__btn--primary"
+        @click="emit('install', app)"
+      >
+        {{ labels.app_store_install }}
+      </button>
+      <span
+        v-else-if="!canInstall"
+        class="apphub-draft-card__unavailable"
+      >
+        {{ labels.app_store_unavailable }}
+      </span>
+      <template v-else>
+        <span class="apphub-draft-card__installed" :title="labels.app_store_installed">
+          <span class="apphub-draft-card__installed-check" aria-hidden="true">✓</span>
+          {{ labels.app_store_installed }}
+        </span>
+        <button
+          type="button"
+          class="apphub-draft-card__btn apphub-draft-card__btn--secondary"
+          @click="emit('uninstall', app)"
+        >
+          {{ labels.app_store_uninstall }}
+        </button>
+      </template>
+
+      <button
+        v-if="app.runtime_type === 'hosted'"
+        type="button"
+        class="apphub-draft-card__btn apphub-draft-card__btn--secondary"
+        @click="historyOpen = !historyOpen"
+      >
+        {{ labels.dev_review_history_btn }}
+      </button>
+
+      <button
+        v-if="app.healthcheck_url"
+        type="button"
+        class="apphub-draft-card__btn apphub-draft-card__btn--secondary"
+        :disabled="pinging"
+        @click="emit('ping', app)"
+      >
+        {{ pinging ? labels.draft_ping_pinging : labels.draft_ping_btn }}
+      </button>
+    </div>
+
+    <AppHubAppVersionHistory
+      v-if="app.runtime_type === 'hosted'"
+      :slug="app.slug"
+      :root-app="rootApp"
+      :open="historyOpen"
+      :labels="historyLabels"
+    />
+
+    <p
+      v-if="pingResult"
+      class="apphub-draft-card__ping"
+      :class="pingResult.ok ? 'apphub-draft-card__ping--ok' : 'apphub-draft-card__ping--bad'"
+    >
+      {{ pingLabel }}
+    </p>
+  </article>
+</template>
+
+<script setup>
+import { computed, ref } from 'vue'
+import AppHubAppVersionHistory from './AppHubAppVersionHistory.vue'
+
+const props = defineProps({
+  app: { type: Object, required: true },
+  labels: { type: Object, required: true },
+  rootApp: { type: Object, default: null },
+  installed: { type: Boolean, default: false },
+  canInstall: { type: Boolean, default: true },
+  pinging: { type: Boolean, default: false },
+  pingResult: { type: Object, default: null },
+})
+
+const historyOpen = ref(false)
+
+const historyLabels = computed(() => ({
+  title: props.labels.dev_review_history_title,
+  loading: props.labels.dev_review_history_loading,
+  empty: props.labels.dev_review_history_empty,
+  current: props.labels.dev_review_history_current,
+  no_api: props.labels.app_store_no_api,
+  load_error: props.labels.dev_review_history_error,
+}))
+
+const emit = defineEmits(['install', 'uninstall', 'ping'])
+
+const pingLabel = computed(() => {
+  if (!props.pingResult) return ''
+  if (props.pingResult.ok) {
+    const ms = props.pingResult.latency_ms != null ? ` · ${props.pingResult.latency_ms} ms` : ''
+    return `${props.labels.draft_ping_ok}${ms}`
+  }
+  return props.labels.draft_ping_fail
+})
+</script>

package/src/modules/app-store/composables/useAppStore.js

@@ -0,0 +1,206 @@
+import { computed, inject, reactive } from 'vue'
+import { CATALOG_MODE_DRAFT, CATALOG_MODE_STORE } from '../constants/catalogModes.js'
+import { normalizeCatalogList } from '../utils/normalizeCatalogApp.js'
+
+const APP_STORE_KEY = 'apphubAppStore'
+
+function createCatalogBucket() {
+  return {
+    items: [],
+    search: '',
+    loading: false,
+    loadingMore: false,
+    error: '',
+    loaded: false,
+    nextCursor: null,
+    hasMore: false,
+  }
+}
+
+function filterItems(items, search) {
+  const q = search.trim().toLowerCase()
+  if (!q) return items
+  return items.filter(
+    (app) =>
+      app.name.toLowerCase().includes(q) ||
+      app.slug.toLowerCase().includes(q) ||
+      (app.description || '').toLowerCase().includes(q),
+  )
+}
+
+/**
+ * Independent App Store module — separate catalog buckets per mode (store / draft).
+ */
+export function createAppStoreState(options = {}) {
+  const catalogs = reactive({
+    store: createCatalogBucket(),
+    draft: createCatalogBucket(),
+  })
+
+  const state = reactive({
+    installedSlugs: options.installedSlugs ?? [],
+  })
+
+  const filteredStoreApps = computed(() =>
+    filterItems(catalogs.store.items, catalogs.store.search),
+  )
+
+  const filteredTestingApps = computed(() =>
+    filterItems(catalogs.draft.items, catalogs.draft.search),
+  )
+
+  function bucketFor(mode) {
+    return mode === CATALOG_MODE_DRAFT ? catalogs.draft : catalogs.store
+  }
+
+  function findCatalogItem(slug) {
+    return (
+      catalogs.store.items.find((a) => a.slug === slug)
+      ?? catalogs.draft.items.find((a) => a.slug === slug)
+      ?? null
+    )
+  }
+
+  function isInstalled(slug) {
+    return state.installedSlugs.includes(slug)
+  }
+
+  function canInstall(app) {
+    return app?.status !== 'disabled'
+  }
+
+  function installApp(slug) {
+    if (isInstalled(slug)) return false
+    const item = findCatalogItem(slug)
+    if (item && !canInstall(item)) return false
+    state.installedSlugs.push(slug)
+    if (item) item.installed = true
+    return true
+  }
+
+  function uninstallApp(slug) {
+    const normalized = String(slug ?? '').trim()
+    if (!normalized) return false
+    const idx = state.installedSlugs.indexOf(normalized)
+    if (idx === -1) return false
+    state.installedSlugs.splice(idx, 1)
+    syncInstalledFlags()
+    return true
+  }
+
+  function syncInstalledFlags() {
+    for (const bucket of Object.values(catalogs)) {
+      for (const app of bucket.items) {
+        app.installed = state.installedSlugs.includes(app.slug)
+      }
+    }
+  }
+
+  async function loadCatalog(hostApi, options = {}) {
+    const mode = options.mode === CATALOG_MODE_DRAFT ? CATALOG_MODE_DRAFT : CATALOG_MODE_STORE
+    const bucket = bucketFor(mode)
+    const append = options.append === true
+    const backendReady = options.backendReady !== false
+
+    if (!backendReady || !hostApi?.apps) {
+      if (!append) {
+        bucket.items = []
+        bucket.error = 'no_api'
+        bucket.loaded = false
+        bucket.nextCursor = null
+        bucket.hasMore = false
+      }
+      return
+    }
+
+    if (append) {
+      if (!bucket.hasMore || bucket.loadingMore || bucket.loading) return
+      bucket.loadingMore = true
+    } else {
+      bucket.loading = true
+      bucket.error = ''
+    }
+
+    try {
+      const params = {
+        mode,
+        per_page: options.perPage ?? 24,
+      }
+      if (append && bucket.nextCursor) {
+        params.cursor = bucket.nextCursor
+      }
+
+      const res = await hostApi.apps(params)
+      if (res === undefined || res === null) {
+        if (!append) {
+          bucket.items = []
+          bucket.error = 'no_api'
+          bucket.loaded = false
+        }
+        return
+      }
+
+      const rows = normalizeCatalogList(res?.data?.data ?? res?.data?.datas ?? [])
+      const meta = res?.data?.meta ?? {}
+
+      if (append) {
+        const existing = new Set(bucket.items.map((a) => a.slug))
+        bucket.items.push(...rows.filter((a) => !existing.has(a.slug)))
+      } else {
+        bucket.items = rows
+      }
+
+      bucket.nextCursor = meta.next_cursor ?? null
+      bucket.hasMore = meta.has_more === true
+      syncInstalledFlags()
+      bucket.loaded = true
+    } catch (err) {
+      if (!append) {
+        const status = err?.response?.status
+        bucket.items = []
+        bucket.error = status === 403 ? 'permission_denied' : 'load_failed'
+        bucket.loaded = true
+        bucket.nextCursor = null
+        bucket.hasMore = false
+      }
+    } finally {
+      if (append) {
+        bucket.loadingMore = false
+      } else {
+        bucket.loading = false
+      }
+    }
+  }
+
+  async function loadMoreCatalog(hostApi, mode, options = {}) {
+    const bucket = bucketFor(mode)
+    if (!bucket.hasMore || bucket.loadingMore || bucket.loading) return
+    await loadCatalog(hostApi, { ...options, mode, append: true })
+  }
+
+  return reactive({
+    state,
+    catalogs,
+    filteredStoreApps,
+    filteredTestingApps,
+    findCatalogItem,
+    isInstalled,
+    canInstall,
+    installApp,
+    uninstallApp,
+    loadCatalog,
+    loadMoreCatalog,
+  })
+}
+
+export function provideAppStore(app, store) {
+  app.provide(APP_STORE_KEY, store)
+}
+
+export function useAppStore() {
+  const store = inject(APP_STORE_KEY, null)
+  if (!store) {
+    throw new Error('useAppStore() requires provideAppStore()')
+  }
+  return store
+}

package/src/modules/app-store/composables/useCatalogInfiniteScroll.js

@@ -0,0 +1,47 @@
+import { onMounted, onUnmounted, ref, watch } from 'vue'
+
+/**
+ * Load next catalog page when the scroll root nears the bottom.
+ */
+export function useCatalogInfiniteScroll(options) {
+  const rootRef = ref(null)
+  const sentinelRef = ref(null)
+  let observer = null
+
+  function disconnect() {
+    observer?.disconnect()
+    observer = null
+  }
+
+  function connect() {
+    disconnect()
+    const root = rootRef.value
+    const sentinel = sentinelRef.value
+    if (!root || !sentinel || !options.canLoadMore?.()) return
+
+    observer = new IntersectionObserver(
+      (entries) => {
+        if (entries.some((e) => e.isIntersecting)) {
+          options.onLoadMore?.()
+        }
+      },
+      { root, rootMargin: '120px', threshold: 0 },
+    )
+    observer.observe(sentinel)
+  }
+
+  onMounted(() => {
+    connect()
+  })
+
+  onUnmounted(() => {
+    disconnect()
+  })
+
+  watch(
+    () => [options.canLoadMore?.(), rootRef.value, sentinelRef.value],
+    () => connect(),
+  )
+
+  return { rootRef, sentinelRef, reconnect: connect }
+}

package/src/modules/app-store/constants/catalogModes.js

@@ -0,0 +1,2 @@
+export const CATALOG_MODE_STORE = 'store'
+export const CATALOG_MODE_DRAFT = 'draft'

package/src/modules/app-store/data/defaultCatalog.js

@@ -0,0 +1,19 @@
+/**
+ * Legacy demo catalog — drop-install fallback only. App Store loads from GET /apps.
+ */
+export const defaultAppStoreCatalog = [
+  {
+    slug: 'demo-notes',
+    name: 'Notes',
+    description: 'Simple notes app (demo).',
+    icon: '📝',
+    installed: false,
+  },
+  {
+    slug: 'demo-gallery',
+    name: 'Gallery',
+    description: 'View images and video (demo).',
+    icon: '🖼️',
+    installed: false,
+  },
+]

package/src/modules/app-store/index.js

@@ -0,0 +1,9 @@
+export { defaultAppStoreCatalog } from './data/defaultCatalog.js'
+export { normalizeCatalogApp, normalizeCatalogList } from './utils/normalizeCatalogApp.js'
+export {
+  createAppStoreState,
+  provideAppStore,
+  useAppStore,
+} from './composables/useAppStore.js'
+export { default as AppHubAppStoreApp } from './components/AppHubAppStoreApp.vue'
+export { default as AppHubDraftStoreApp } from './components/AppHubDraftStoreApp.vue'

package/src/modules/app-store/utils/normalizeCatalogApp.js

@@ -0,0 +1,37 @@
+/**
+ * Map apphub-backend catalog row to App Store card shape.
+ * @param {unknown} row
+ * @returns {object|null}
+ */
+export function normalizeCatalogApp(row) {
+  if (!row || typeof row !== 'object') return null
+  const slug = typeof row.slug === 'string' ? row.slug.trim() : ''
+  if (!slug) return null
+
+  const entryUrl = typeof row.entry_url === 'string' ? row.entry_url.trim() : ''
+  const healthcheckUrl = typeof row.healthcheck_url === 'string' ? row.healthcheck_url.trim() : ''
+
+  return {
+    slug,
+    version: typeof row.version === 'string' && row.version.trim() ? row.version.trim() : null,
+    name: typeof row.name === 'string' && row.name.trim() ? row.name.trim() : slug,
+    description: typeof row.description === 'string' ? row.description : '',
+    icon: typeof row.icon === 'string' && row.icon ? row.icon : '📦',
+    status: typeof row.status === 'string' ? row.status : 'active',
+    runtime_type: typeof row.runtime_type === 'string' ? row.runtime_type : 'iframe',
+    entry_url: entryUrl || null,
+    healthcheck_url: healthcheckUrl || null,
+    bundle_hash: typeof row.bundle_hash === 'string' ? row.bundle_hash : null,
+    bundle_entry: typeof row.bundle_entry === 'string' ? row.bundle_entry : null,
+    bundle_file_count: Number.isFinite(Number(row.bundle_file_count))
+      ? Number(row.bundle_file_count)
+      : null,
+    installed: !!row.installed,
+  }
+}
+
+/** @param {unknown} payload */
+export function normalizeCatalogList(payload) {
+  const rows = Array.isArray(payload) ? payload : []
+  return rows.map(normalizeCatalogApp).filter(Boolean)
+}