@kennofizet/apphub-frontend 0.1.0

package/src/modules/desktop/utils/startMenuPins.js

@@ -0,0 +1,90 @@
+import { safeParseJson } from '../../../utils/safeStorage.js'
+import {
+  BUILTIN_APP_STORE_ID,
+  BUILTIN_GUIDE_ID,
+  BUILTIN_SETTINGS_ID,
+} from '../data/builtinApps.js'
+
+const STORAGE_KEY = 'apphub-start-menu-pins'
+const MAX_PINS = 64
+
+const DEFAULT_BUILTIN_PIN_IDS = [
+  BUILTIN_APP_STORE_ID,
+  BUILTIN_GUIDE_ID,
+  BUILTIN_SETTINGS_ID,
+]
+
+function defaultPins() {
+  const pins = {}
+  for (const id of DEFAULT_BUILTIN_PIN_IDS) {
+    pins[id] = { visible: true }
+  }
+  return pins
+}
+
+function sanitizePins(parsed) {
+  if (!parsed || typeof parsed !== 'object' || Array.isArray(parsed)) return null
+  const raw = parsed.pins ?? parsed
+  if (!raw || typeof raw !== 'object' || Array.isArray(raw)) return null
+
+  const pins = {}
+  let count = 0
+  for (const [key, value] of Object.entries(raw)) {
+    if (count >= MAX_PINS) break
+    const id = typeof key === 'string' ? key.slice(0, 80) : ''
+    if (!id) continue
+    pins[id] = {
+      visible: value && typeof value === 'object' && value.visible === false ? false : true,
+    }
+    count += 1
+  }
+  return pins
+}
+
+export function loadStartMenuPins() {
+  try {
+    const raw = localStorage.getItem(STORAGE_KEY)
+    const parsed = safeParseJson(raw, 16 * 1024)
+    const pins = sanitizePins(parsed)
+    if (pins && Object.keys(pins).length) return pins
+  } catch {
+    /* ignore */
+  }
+  return defaultPins()
+}
+
+export function saveStartMenuPins(pins) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify({ pins }))
+  } catch {
+    /* ignore */
+  }
+}
+
+export function isAppPinned(pins, appId) {
+  return !!(appId && pins && Object.prototype.hasOwnProperty.call(pins, appId))
+}
+
+export function isAppVisibleInStart(pins, appId) {
+  if (!isAppPinned(pins, appId)) return false
+  return pins[appId].visible !== false
+}
+
+export function pinApp(pins, appId) {
+  if (!appId) return
+  pins[appId] = { visible: true }
+}
+
+export function unpinApp(pins, appId) {
+  if (!appId || !pins) return
+  delete pins[appId]
+}
+
+export function setPinVisible(pins, appId, visible) {
+  if (!isAppPinned(pins, appId)) return
+  pins[appId].visible = !!visible
+}
+
+export function listPinnedAppIds(pins) {
+  return Object.keys(pins ?? {})
+}

package/src/modules/notifications/components/AppHubDesktopNotifications.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="apphub-notifications"
+    role="region"
+    :aria-label="labels.region"
+    aria-live="polite"
+    aria-relevant="additions"
+  >
+    <TransitionGroup name="apphub-notifications__item">
+      <article
+        v-for="item in items"
+        :key="item.id"
+        class="apphub-notifications__toast"
+        :class="`apphub-notifications__toast--${item.type}`"
+      >
+        <div class="apphub-notifications__accent" aria-hidden="true" />
+        <div class="apphub-notifications__body">
+          <header v-if="item.title" class="apphub-notifications__title">{{ item.title }}</header>
+          <p class="apphub-notifications__message">{{ item.message || item.title }}</p>
+        </div>
+        <button
+          type="button"
+          class="apphub-notifications__close"
+          :aria-label="labels.close"
+          @click="dismiss(item.id)"
+        >
+          ×
+        </button>
+      </article>
+    </TransitionGroup>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+import { DESKTOP_NOTIFICATIONS_KEY } from '../composables/createDesktopNotifications.js'
+import { t } from '../../../i18n/index.js'
+import { resolveLang } from '../../../i18n/resolveLang.js'
+
+const notifications = inject(DESKTOP_NOTIFICATIONS_KEY, null)
+const moduleOptions = inject('apphubOptions', {})
+const lang = computed(() => resolveLang(moduleOptions?.language, 'vi'))
+
+const labels = computed(() => ({
+  region: t('notif_region', lang.value),
+  close: t('notif_close', lang.value),
+}))
+
+const items = computed(() => notifications?.state?.items ?? [])
+
+function dismiss(id) {
+  notifications?.dismiss?.(id)
+}
+</script>

package/src/modules/notifications/composables/createDesktopNotifications.js

@@ -0,0 +1,86 @@
+import { inject, reactive } from 'vue'
+
+export const DESKTOP_NOTIFICATIONS_KEY = Symbol('apphubDesktopNotifications')
+
+/**
+ * OS-style toast stack for the Hub desktop (reusable by shell, drop install, bridge later).
+ */
+export function createDesktopNotificationsState() {
+  const state = reactive({
+    items: [],
+  })
+
+  let seq = 0
+
+  function dismiss(id) {
+    const idx = state.items.findIndex((item) => item.id === id)
+    if (idx !== -1) state.items.splice(idx, 1)
+  }
+
+  /**
+   * @param {{
+   *   title?: string,
+   *   message: string,
+   *   type?: 'info' | 'success' | 'error' | 'warning',
+   *   duration?: number,
+   * }} payload
+   */
+  function push(payload) {
+    const message = String(payload?.message ?? '').trim()
+    const title = String(payload?.title ?? '').trim()
+    if (!message && !title) return null
+
+    const type = payload?.type === 'success'
+      || payload?.type === 'error'
+      || payload?.type === 'warning'
+      ? payload.type
+      : 'info'
+
+    const id = `notif-${++seq}`
+    const item = {
+      id,
+      title,
+      message,
+      type,
+      duration: typeof payload?.duration === 'number' ? payload.duration : 6000,
+    }
+
+    state.items.push(item)
+
+    if (item.duration > 0) {
+      setTimeout(() => dismiss(id), item.duration)
+    }
+
+    return id
+  }
+
+  function success(message, title = '') {
+    return push({ type: 'success', title, message })
+  }
+
+  function error(message, title = '') {
+    return push({ type: 'error', title, message })
+  }
+
+  function info(message, title = '') {
+    return push({ type: 'info', title, message })
+  }
+
+  function warning(message, title = '') {
+    return push({ type: 'warning', title, message })
+  }
+
+  return {
+    state,
+    push,
+    dismiss,
+    success,
+    error,
+    info,
+    warning,
+  }
+}
+
+export function useDesktopNotifications() {
+  return inject(DESKTOP_NOTIFICATIONS_KEY, null)
+}

package/src/modules/notifications/index.js

@@ -0,0 +1,9 @@
+import './styles/notifications.css'
+
+export {
+  createDesktopNotificationsState,
+  useDesktopNotifications,
+  DESKTOP_NOTIFICATIONS_KEY,
+} from './composables/createDesktopNotifications.js'
+export { default as AppHubDesktopNotifications } from './components/AppHubDesktopNotifications.vue'
+export { parseApiError } from './utils/parseApiError.js'

package/src/modules/notifications/styles/notifications.css

@@ -0,0 +1,118 @@
+.apphub-notifications {
+  position: absolute;
+  right: 12px;
+  bottom: 52px;
+  z-index: 10050;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: min(360px, calc(100vw - 24px));
+  pointer-events: none;
+}
+
+.apphub-notifications__toast {
+  display: flex;
+  align-items: stretch;
+  gap: 0;
+  min-height: 64px;
+  border-radius: 8px;
+  background: #1e293b;
+  border: 1px solid #334155;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
+  overflow: hidden;
+  pointer-events: auto;
+}
+
+.apphub-notifications__accent {
+  width: 4px;
+  flex-shrink: 0;
+  background: #64748b;
+}
+
+.apphub-notifications__toast--info .apphub-notifications__accent {
+  background: #3b82f6;
+}
+
+.apphub-notifications__toast--success .apphub-notifications__accent {
+  background: #22c55e;
+}
+
+.apphub-notifications__toast--warning .apphub-notifications__accent {
+  background: #f59e0b;
+}
+
+.apphub-notifications__toast--error .apphub-notifications__accent {
+  background: #ef4444;
+}
+
+.apphub-notifications__body {
+  flex: 1;
+  min-width: 0;
+  padding: 10px 8px 10px 12px;
+}
+
+.apphub-notifications__title {
+  margin: 0 0 2px;
+  font-size: 0.8rem;
+  font-weight: 700;
+  color: #f1f5f9;
+}
+
+.apphub-notifications__message {
+  margin: 0;
+  font-size: 0.78rem;
+  line-height: 1.4;
+  color: #cbd5e1;
+  word-break: break-word;
+}
+
+.apphub-notifications__close {
+  flex-shrink: 0;
+  width: 36px;
+  border: none;
+  background: transparent;
+  color: #94a3b8;
+  font-size: 1.25rem;
+  line-height: 1;
+  cursor: pointer;
+  align-self: stretch;
+}
+
+.apphub-notifications__close:hover {
+  color: #f1f5f9;
+  background: rgba(255, 255, 255, 0.06);
+}
+
+.apphub-notifications__item-enter-active,
+.apphub-notifications__item-leave-active {
+  transition: all 0.28s ease;
+}
+
+.apphub-notifications__item-enter-from,
+.apphub-notifications__item-leave-to {
+  opacity: 0;
+  transform: translateX(24px);
+}
+
+.apphub-desktop--light .apphub-notifications__toast {
+  background: #fff;
+  border-color: #e2e8f0;
+  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
+}
+
+.apphub-desktop--light .apphub-notifications__title {
+  color: #0f172a;
+}
+
+.apphub-desktop--light .apphub-notifications__message {
+  color: #475569;
+}
+
+.apphub-desktop--light .apphub-notifications__close {
+  color: #64748b;
+}
+
+.apphub-desktop--light .apphub-notifications__close:hover {
+  color: #0f172a;
+  background: rgba(15, 23, 42, 0.06);
+}

package/src/modules/notifications/utils/parseApiError.js

@@ -0,0 +1,29 @@
+/**
+ * Extract a user-facing message from an API or client error.
+ * @param {unknown} err
+ * @param {string} [fallback]
+ */
+export function parseApiError(err, fallback = '') {
+  if (err && typeof err === 'object' && err.code === 'no_api') {
+    return fallback
+  }
+
+  if (err && typeof err === 'object' && err.message === 'no_api') {
+    return fallback
+  }
+
+  const data = err?.response?.data
+  if (data && typeof data.error === 'string' && data.error.trim()) {
+    return data.error.trim()
+  }
+
+  if (data && typeof data.message === 'string' && data.message.trim()) {
+    return data.message.trim()
+  }
+
+  if (typeof err?.message === 'string' && err.message.trim() && err.message !== 'no_api') {
+    return err.message.trim()
+  }
+
+  return fallback
+}

package/src/modules/runner/components/AppHubRunner.vue

@@ -0,0 +1,292 @@
+<template>
+  <div class="apphub-runner">
+    <div v-if="showPreflight" class="apphub-runner__preflight">
+      <header class="apphub-runner__preflight-head">
+        <span class="apphub-runner__preflight-icon" aria-hidden="true">{{ icon }}</span>
+        <div>
+          <h3 class="apphub-runner__preflight-title">{{ slug }}</h3>
+          <span class="apphub-runner__preflight-badge">{{ labels.draft_badge }}</span>
+          <span v-if="isHosted" class="apphub-runner__preflight-badge apphub-runner__preflight-badge--hosted">
+            {{ labels.hosted_badge }}
+          </span>
+        </div>
+      </header>
+
+      <dl class="apphub-runner__preflight-dl">
+        <div class="apphub-runner__preflight-row">
+          <dt>{{ isHosted ? labels.hosted_bundle : labels.entry_url }}</dt>
+          <dd>{{ preflightTargetLabel }}</dd>
+        </div>
+        <div v-if="!isHosted" class="apphub-runner__preflight-row">
+          <dt>{{ labels.health_url }}</dt>
+          <dd>{{ healthcheckUrl || labels.not_configured }}</dd>
+        </div>
+      </dl>
+
+      <div class="apphub-runner__preflight-actions">
+        <button
+          v-if="!isHosted && healthcheckUrl"
+          type="button"
+          class="apphub-runner__btn apphub-runner__btn--secondary"
+          :disabled="pinging"
+          @click="onPing"
+        >
+          {{ pinging ? labels.ping_pinging : labels.ping_btn }}
+        </button>
+        <button
+          v-if="!isHosted && entryUrl"
+          type="button"
+          class="apphub-runner__btn apphub-runner__btn--secondary"
+          @click="onCheckSafe"
+        >
+          {{ labels.safe_check }}
+        </button>
+        <button
+          type="button"
+          class="apphub-runner__btn apphub-runner__btn--primary"
+          :disabled="launching"
+          @click="onLaunchClick"
+        >
+          {{ launching ? labels.loading : labels.launch_btn }}
+        </button>
+      </div>
+
+      <p
+        v-if="pingResult"
+        class="apphub-runner__preflight-msg"
+        :class="pingResult.ok ? 'apphub-runner__preflight-msg--ok' : 'apphub-runner__preflight-msg--bad'"
+      >
+        {{ pingLabel }}
+      </p>
+      <p
+        v-if="safeResult !== null"
+        class="apphub-runner__preflight-msg"
+        :class="safeResult ? 'apphub-runner__preflight-msg--ok' : 'apphub-runner__preflight-msg--bad'"
+      >
+        {{ safeResult ? labels.safe_ok : labels.safe_fail }}
+      </p>
+      <p v-if="preflightError" class="apphub-runner__preflight-msg apphub-runner__preflight-msg--bad">
+        {{ preflightError }}
+      </p>
+    </div>
+
+    <template v-else>
+      <p v-if="loading" class="apphub-runner__msg">{{ labels.loading }}</p>
+      <p v-else-if="error" class="apphub-runner__error">{{ error }}</p>
+      <iframe
+        v-else-if="launchUrl"
+        :src="launchUrl"
+        class="apphub-runner__frame"
+        :title="slug"
+        :sandbox="iframeSandbox"
+        referrerpolicy="strict-origin-when-cross-origin"
+      />
+    </template>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject, ref, watch } from 'vue'
+import { getAppHubStore } from '../../../moduleStore.js'
+import { useAppHubHostApi } from '../../../composables/useAppHubHostApi.js'
+import { t } from '../../../i18n/index.js'
+import { resolveLang } from '../../../i18n/resolveLang.js'
+import {
+  RUNTIME_HOSTED,
+  iframeSandboxAttrs,
+  isAllowedLaunchUrl,
+  isEntryUrlAllowed,
+  resolveLaunchUrl,
+} from '../../../utils/launchUrl.js'
+
+const props = defineProps({
+  slug: { type: String, required: true },
+  installedVersion: { type: String, default: null },
+  status: { type: String, default: 'active' },
+  runtimeType: { type: String, default: 'iframe' },
+  entryUrl: { type: String, default: null },
+  healthcheckUrl: { type: String, default: null },
+  language: { type: String, default: 'vi' },
+  icon: { type: String, default: '📦' },
+})
+
+const api = useAppHubHostApi()
+const moduleOptions = inject('apphubOptions', {})
+const allowedOrigins = computed(() => moduleOptions?.allowedRuntimeOrigins ?? [])
+
+const backendUrl = computed(() => {
+  const fromOptions = moduleOptions?.backendUrl
+  if (fromOptions) return fromOptions
+  return getAppHubStore()?.credentials?.backendUrl ?? ''
+})
+
+const lang = computed(() => resolveLang(moduleOptions?.language, props.language))
+
+const isHosted = computed(() => props.runtimeType === RUNTIME_HOSTED || props.runtimeType === 'hosted')
+
+const labels = computed(() => ({
+  loading: t('runner_loading', lang.value),
+  launch_btn: t('runner_launch_btn', lang.value),
+  draft_badge: t('app_store_status_draft', lang.value),
+  hosted_badge: t('runner_hosted_badge', lang.value),
+  hosted_bundle: t('runner_hosted_bundle', lang.value),
+  entry_url: t('draft_ping_entry_url', lang.value),
+  health_url: t('draft_ping_health_url', lang.value),
+  not_configured: t('draft_ping_no_health_url', lang.value),
+  ping_btn: t('draft_ping_btn', lang.value),
+  ping_pinging: t('draft_ping_pinging', lang.value),
+  ping_ok: t('draft_ping_ok', lang.value),
+  ping_fail: t('draft_ping_fail', lang.value),
+  safe_check: t('draft_ping_safe_check', lang.value),
+  safe_ok: t('draft_ping_safe_ok', lang.value),
+  safe_fail: t('draft_ping_safe_fail', lang.value),
+  err_no_entry: t('runner_no_entry_url', lang.value),
+  err_no_bundle: t('runner_no_bundle', lang.value),
+  err_generic: t('error_generic', lang.value),
+}))
+
+const preflightTargetLabel = computed(() => {
+  if (isHosted.value) return props.slug
+  return props.entryUrl || labels.value.not_configured
+})
+
+const isDraft = computed(() => props.status === 'draft')
+const showPreflight = computed(() => isDraft.value && !launched.value)
+
+const iframeSandbox = computed(() =>
+  iframeSandboxAttrs(isHosted.value ? RUNTIME_HOSTED : props.runtimeType, {
+    hostedSandboxSameOrigin: moduleOptions?.hostedSandboxSameOrigin === true,
+  }),
+)
+
+const loading = ref(false)
+const launching = ref(false)
+const launched = ref(false)
+const error = ref('')
+const preflightError = ref('')
+const launchUrl = ref('')
+const launchRuntimeType = ref(props.runtimeType)
+const pinging = ref(false)
+const pingResult = ref(null)
+const safeResult = ref(null)
+
+const pingLabel = computed(() => {
+  if (!pingResult.value) return ''
+  if (pingResult.value.ok) {
+    const ms = pingResult.value.latency_ms != null ? ` · ${pingResult.value.latency_ms} ms` : ''
+    return `${labels.value.ping_ok}${ms}`
+  }
+  return labels.value.ping_fail
+})
+
+function launchOptions() {
+  return {
+    backendUrl: backendUrl.value,
+    runtimePublicUrl: moduleOptions?.runtimePublicUrl ?? '',
+    runtimeType: launchRuntimeType.value,
+  }
+}
+
+async function onPing() {
+  if (!api?.ping || !props.slug) return
+  pinging.value = true
+  pingResult.value = null
+  preflightError.value = ''
+  try {
+    const res = await api.ping(props.slug)
+    pingResult.value = res?.data?.data ?? { ok: false }
+  } catch {
+    pingResult.value = { ok: false }
+  } finally {
+    pinging.value = false
+  }
+}
+
+function onCheckSafe() {
+  safeResult.value = null
+  preflightError.value = ''
+  if (!props.entryUrl) {
+    safeResult.value = false
+    return
+  }
+  safeResult.value = isEntryUrlAllowed(props.entryUrl, allowedOrigins.value)
+}
+
+function isBackendReady() {
+  return Boolean(moduleOptions?.hasToken && moduleOptions?.backendUrl)
+}
+
+async function doLaunch() {
+  if (!props.slug) {
+    error.value = labels.value.err_generic
+    return
+  }
+
+  if (!isBackendReady()) {
+    loading.value = true
+    return
+  }
+
+  if (!api?.launch) {
+    error.value = labels.value.err_generic
+    return
+  }
+
+  loading.value = true
+  launching.value = true
+  error.value = ''
+  preflightError.value = ''
+
+  try {
+    const launchBody = props.installedVersion ? { version: props.installedVersion } : {}
+    const res = await api.launch(props.slug, launchBody)
+    if (!res?.data) {
+      error.value = labels.value.err_generic
+      return
+    }
+
+    const data = res?.data?.data ?? res?.data ?? {}
+    launchRuntimeType.value = data.runtime_type ?? props.runtimeType
+    const candidate = resolveLaunchUrl(res?.data)
+    const hostedRuntime = launchRuntimeType.value === RUNTIME_HOSTED || launchRuntimeType.value === 'hosted'
+    if (!candidate) {
+      error.value = hostedRuntime ? labels.value.err_no_bundle : labels.value.err_no_entry
+      return
+    }
+    if (!isAllowedLaunchUrl(candidate, allowedOrigins.value, launchOptions())) {
+      error.value = labels.value.safe_fail
+      return
+    }
+    launchUrl.value = candidate
+    launched.value = true
+  } catch {
+    error.value = labels.value.err_generic
+  } finally {
+    loading.value = false
+    launching.value = false
+  }
+}
+
+function onLaunchClick() {
+  if (!isHosted.value && props.entryUrl && !isEntryUrlAllowed(props.entryUrl, allowedOrigins.value)) {
+    safeResult.value = false
+    preflightError.value = labels.value.safe_fail
+    return
+  }
+  doLaunch()
+}
+
+watch(
+  () => isBackendReady(),
+  (ready) => {
+    if (isDraft.value || launchUrl.value || error.value) return
+    if (!ready) {
+      if (!isDraft.value) loading.value = true
+      return
+    }
+    launched.value = true
+    doLaunch()
+  },
+  { immediate: true },
+)
+</script>

package/src/modules/runner/index.js

@@ -0,0 +1 @@
+export { default as AppHubRunner } from './components/AppHubRunner.vue'