@kennofizet/apphub-frontend 0.1.0

package/src/modules/desktop/components/settings/AppHubSettingsStartMenuPanel.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="apphub-settings-panel">
+    <h3 class="apphub-settings-panel__title">{{ labels.page_title }}</h3>
+    <p class="apphub-settings-panel__hint">{{ labels.page_hint }}</p>
+
+    <p class="apphub-settings-panel__section-label">{{ labels.pins_section }}</p>
+    <p v-if="!pinnedRows.length" class="apphub-settings-panel__msg">{{ labels.pins_empty }}</p>
+
+    <ul v-else class="apphub-settings-panel__pin-list">
+      <li v-for="row in pinnedRows" :key="`pin-${row.id}`" class="apphub-settings-panel__pin-item">
+        <span class="apphub-settings-panel__pin-icon" aria-hidden="true">{{ row.icon }}</span>
+        <span class="apphub-settings-panel__pin-name">{{ row.name }}</span>
+        <label class="apphub-settings-panel__pin-toggle">
+          <input
+            type="checkbox"
+            :checked="row.visible"
+            @change="onPinVisibleChange(row.id, $event.target.checked)"
+          />
+          <span>{{ labels.pins_show }}</span>
+        </label>
+      </li>
+    </ul>
+
+    <p class="apphub-settings-panel__section-label apphub-settings-panel__section-label--spaced">{{ labels.favorites_section }}</p>
+    <p v-if="!favoriteRows.length" class="apphub-settings-panel__msg">{{ labels.favorites_empty }}</p>
+
+    <ul v-else class="apphub-settings-panel__pin-list">
+      <li v-for="row in favoriteRows" :key="`fav-${row.id}`" class="apphub-settings-panel__pin-item">
+        <span class="apphub-settings-panel__pin-icon" aria-hidden="true">{{ row.icon }}</span>
+        <span class="apphub-settings-panel__pin-name">{{ row.name }}</span>
+        <label class="apphub-settings-panel__pin-toggle">
+          <input
+            type="checkbox"
+            :checked="row.visible"
+            @change="onFavoriteVisibleChange(row.id, $event.target.checked)"
+          />
+          <span>{{ labels.favorites_show }}</span>
+        </label>
+      </li>
+    </ul>
+
+    <p class="apphub-settings-panel__note">{{ labels.page_note }}</p>
+  </div>
+</template>
+
+<script setup>
+import { computed, inject } from 'vue'
+import { t } from '../../../../i18n/index.js'
+import { resolveLang } from '../../../../i18n/resolveLang.js'
+import {
+  useDesktopHubSettings,
+  useHubFavoriteRows,
+  useHubPinnedRows,
+} from '../../composables/useDesktopHubSettings.js'
+
+const hub = useDesktopHubSettings()
+const pinnedRows = useHubPinnedRows(hub)
+const favoriteRows = useHubFavoriteRows(hub)
+const lang = computed(() => resolveLang(inject('apphubOptions', {})?.language, 'vi'))
+
+const labels = computed(() => ({
+  page_title: t('hub_settings_pin_favorite_title', lang.value),
+  page_hint: t('hub_settings_pin_favorite_hint', lang.value),
+  pins_section: t('hub_settings_pins_section', lang.value),
+  pins_empty: t('hub_settings_start_empty', lang.value),
+  pins_show: t('hub_settings_start_show', lang.value),
+  favorites_section: t('start_menu_favorites', lang.value),
+  favorites_empty: t('hub_settings_start_favorites_empty', lang.value),
+  favorites_show: t('hub_settings_start_favorites_show', lang.value),
+  page_note: t('hub_settings_pin_favorite_note', lang.value),
+}))
+
+function onPinVisibleChange(appId, visible) {
+  hub.setPinVisible?.(appId, visible)
+}
+
+function onFavoriteVisibleChange(appId, visible) {
+  hub.setFavoriteVisible?.(appId, visible)
+}
+</script>
+
+<style scoped>
+.apphub-settings-panel__section-label {
+  margin: 20px 0 10px;
+  font-size: 0.7rem;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--ah-text-muted, rgba(255, 255, 255, 0.38));
+}
+
+.apphub-settings-panel__section-label--spaced {
+  margin-top: 28px;
+}
+</style>

package/src/modules/desktop/composables/simulateInstallProgress.js

@@ -0,0 +1,15 @@
+export function simulateInstallProgress(job, onTick) {
+  const steps = job.method === 'appstore' ? 28 : 22
+  const delay = job.method === 'appstore' ? 45 : 55
+  return new Promise((resolve) => {
+    let step = 0
+    const timer = setInterval(() => {
+      step += 1
+      onTick(Math.min(100, Math.round((step / steps) * 100)))
+      if (step >= steps) {
+        clearInterval(timer)
+        resolve()
+      }
+    }, delay)
+  })
+}

package/src/modules/desktop/composables/useDesktopDropInstall.js

@@ -0,0 +1,272 @@
+import { reactive } from 'vue'
+import { defaultAppStoreCatalog } from '../../app-store/data/defaultCatalog.js'
+import { normalizeCatalogApp } from '../../app-store/utils/normalizeCatalogApp.js'
+import { parseApiError } from '../../notifications/utils/parseApiError.js'
+import { parseDropFiles } from '../utils/dropPackageParser.js'
+import { simulateInstallProgress } from './simulateInstallProgress.js'
+
+let jobSeq = 0
+
+/**
+ * Desktop drag-drop — local install, app store slug, or hosted publish (zip → draft API).
+ */
+export function createDesktopDropInstall(options = {}) {
+  const onInstalled = options.onInstalled ?? (() => {})
+  const onPersist = options.onPersist ?? (() => {})
+  const onNotify = options.onNotify ?? (() => {})
+  const getLabels = options.getLabels ?? (() => ({}))
+  const getAppStore = options.getAppStore ?? (() => null)
+  const getHostApi = options.getHostApi ?? (() => null)
+
+  const state = reactive({
+    dragActive: false,
+    dragDepth: 0,
+    jobs: [],
+  })
+
+  function label(key, fallback = '') {
+    const labels = getLabels()
+    return labels[key] ?? fallback
+  }
+
+  function notify(payload) {
+    onNotify(payload)
+  }
+
+  function failJob(job, err) {
+    const message = parseApiError(err, label('errorGeneric', 'Something went wrong.'))
+    job.status = 'error'
+    job.errorMessage = message
+    notify({
+      type: 'error',
+      title: job.name || label('errorTitle', 'App Hub'),
+      message,
+    })
+    setTimeout(() => {
+      const idx = state.jobs.findIndex((j) => j.id === job.id)
+      if (idx !== -1) state.jobs.splice(idx, 1)
+    }, 2000)
+  }
+
+  function canAcceptDrop(hasOpenWindows) {
+    return !hasOpenWindows
+  }
+
+  function onDragEnter(event, hasOpenWindows) {
+    if (!canAcceptDrop(hasOpenWindows) || !hasFiles(event)) return
+    event.preventDefault()
+    state.dragDepth += 1
+    state.dragActive = true
+  }
+
+  function onDragLeave(event, hasOpenWindows) {
+    if (!canAcceptDrop(hasOpenWindows)) return
+    const root = event.currentTarget
+    if (event.relatedTarget && root?.contains?.(event.relatedTarget)) return
+    state.dragDepth = Math.max(0, state.dragDepth - 1)
+    if (state.dragDepth === 0) state.dragActive = false
+  }
+
+  function resetDrag() {
+    state.dragDepth = 0
+    state.dragActive = false
+  }
+
+  function onDragOver(event, hasOpenWindows) {
+    if (!canAcceptDrop(hasOpenWindows) || !hasFiles(event)) return
+    event.preventDefault()
+    if (event.dataTransfer) event.dataTransfer.dropEffect = 'copy'
+    state.dragActive = true
+  }
+
+  async function onDrop(event, hasOpenWindows, pointer) {
+    state.dragDepth = 0
+    state.dragActive = false
+    if (!canAcceptDrop(hasOpenWindows)) return
+    event.preventDefault()
+
+    const intent = await parseDropFiles(event.dataTransfer)
+    if (!intent) return
+
+    const job = {
+      id: `drop-${++jobSeq}`,
+      x: pointer.x,
+      y: pointer.y,
+      progress: 0,
+      status: 'installing',
+      icon: intent.icon,
+      name: intent.name,
+      method: intent.method,
+      intent,
+    }
+    state.jobs.push(job)
+    await runInstall(job)
+  }
+
+  async function submitHostedPublish(job) {
+    const api = getHostApi()
+    if (!api?.registerApp) {
+      const err = new Error('no_api')
+      err.code = 'no_api'
+      throw err
+    }
+
+    const body = new FormData()
+    body.append('bundle', job.intent.zipFile)
+
+    const res = await api.registerApp(body)
+    return res?.data?.data ?? null
+  }
+
+  async function runInstall(job) {
+    const appStore = getAppStore()
+    try {
+      if (job.method === 'publish') {
+        await simulateInstallProgress(job, (value) => {
+          job.progress = value
+        })
+
+        const registered = await submitHostedPublish(job)
+        const catalogApp = normalizeCatalogApp(registered) ?? {
+          slug: registered?.slug ?? job.intent.slug,
+          name: registered?.name ?? job.intent.name,
+          icon: registered?.icon ?? job.intent.icon,
+          description: job.intent.description ?? '',
+          status: registered?.status ?? 'draft',
+          runtime_type: registered?.runtime_type ?? 'hosted',
+          entry_url: null,
+          healthcheck_url: null,
+        }
+
+        appStore?.installApp?.(catalogApp.slug)
+
+        const result = await onInstalled(
+          {
+            slug: catalogApp.slug,
+            name: catalogApp.name,
+            icon: catalogApp.icon,
+            description: catalogApp.description,
+            status: catalogApp.status,
+            runtime_type: catalogApp.runtime_type,
+            version: catalogApp.version,
+            entry_url: catalogApp.entry_url,
+            healthcheck_url: catalogApp.healthcheck_url,
+          },
+          { x: job.x, y: job.y, method: 'publish' },
+        )
+
+        if (result === 'cancelled') {
+          const message = label('installCancelled', 'Install cancelled.')
+          job.status = 'error'
+          job.errorMessage = message
+          notify({
+            type: 'warning',
+            title: catalogApp.name,
+            message,
+          })
+          setTimeout(() => {
+            const idx = state.jobs.findIndex((j) => j.id === job.id)
+            if (idx !== -1) state.jobs.splice(idx, 1)
+          }, 800)
+          return
+        }
+
+        job.status = 'done'
+        job.progress = 100
+        job.name = catalogApp.name
+        job.icon = catalogApp.icon
+        job.publishSubmitted = true
+
+        notify({
+          type: 'success',
+          title: catalogApp.name,
+          message: result === 'updated'
+            ? label('publishUpgradeSuccess', 'New version submitted. Update from App Store when you want to run it.')
+            : label('publishSuccess', 'Draft submitted and installed on your desktop.'),
+        })
+
+        setTimeout(() => {
+          const idx = state.jobs.findIndex((j) => j.id === job.id)
+          if (idx !== -1) state.jobs.splice(idx, 1)
+          onPersist()
+        }, 2200)
+        return
+      }
+
+      await simulateInstallProgress(job, (value) => {
+        job.progress = value
+      })
+
+      let app
+      if (job.method === 'appstore') {
+        const catalogItem = defaultAppStoreCatalog.find((a) => a.slug === job.intent.slug)
+          ?? appStore?.findCatalogItem?.(job.intent.slug)
+        if (catalogItem) {
+          appStore?.installApp?.(catalogItem.slug)
+          app = catalogItem
+        } else {
+          app = {
+            slug: job.intent.slug,
+            name: job.intent.name,
+            icon: job.intent.icon,
+            description: job.intent.description ?? '',
+          }
+        }
+      } else {
+        app = {
+          slug: job.intent.slug,
+          name: job.intent.name,
+          icon: job.intent.icon,
+          description: job.intent.description ?? '',
+          local: true,
+        }
+      }
+
+      job.status = 'done'
+      job.progress = 100
+      job.name = app.name
+      job.icon = app.icon
+
+      const result = await onInstalled(app, { x: job.x, y: job.y, method: job.method })
+      if (result === 'cancelled') {
+        const message = label('installCancelled', 'Install cancelled.')
+        job.status = 'error'
+        job.errorMessage = message
+        notify({
+          type: 'warning',
+          title: app.name,
+          message,
+        })
+        setTimeout(() => {
+          const idx = state.jobs.findIndex((j) => j.id === job.id)
+          if (idx !== -1) state.jobs.splice(idx, 1)
+        }, 800)
+        return
+      }
+
+      setTimeout(() => {
+        const idx = state.jobs.findIndex((j) => j.id === job.id)
+        if (idx !== -1) state.jobs.splice(idx, 1)
+        onPersist()
+      }, 1200)
+    } catch (err) {
+      failJob(job, err)
+    }
+  }
+
+  return {
+    state,
+    onDragEnter,
+    onDragLeave,
+    onDragOver,
+    onDrop,
+    canAcceptDrop,
+    resetDrag,
+  }
+}
+
+function hasFiles(event) {
+  if (!event.dataTransfer) return false
+  const types = [...event.dataTransfer.types]
+  return types.includes('Files') || types.includes('application/x-moz-file')
+}

package/src/modules/desktop/composables/useDesktopHubSettings.js

@@ -0,0 +1,51 @@
+import { computed, inject, toValue } from 'vue'
+
+export const DESKTOP_HUB_SETTINGS_KEY = 'apphubDesktopHubSettings'
+
+export function useDesktopHubSettings() {
+  const hub = inject(DESKTOP_HUB_SETTINGS_KEY, null)
+  if (!hub) {
+    throw new Error('useDesktopHubSettings() must be used inside AppHubDesktop')
+  }
+  return hub
+}
+
+/** Catalog apps — reactive across install, rename, and session restore. */
+export function useHubCatalogApps(hub = null) {
+  const ctx = hub ?? useDesktopHubSettings()
+  return computed(() => {
+    const apps = toValue(ctx.desktopApps)
+    if (Array.isArray(apps)) return apps
+    return ctx.getDesktopApps?.() ?? []
+  })
+}
+
+function buildPinFavoriteRows(catalog, store, visibleKey = 'visible') {
+  const byId = new Map(catalog.map((app) => [app.id, app]))
+  return Object.keys(store)
+    .map((id) => {
+      const app = byId.get(id)
+      if (!app) return null
+      return {
+        id: app.id,
+        name: app.name,
+        icon: app.icon ?? '📦',
+        visible: store[id]?.[visibleKey] !== false,
+      }
+    })
+    .filter(Boolean)
+}
+
+/** Pinned apps for settings — tracks add/remove and visibility toggles live. */
+export function useHubPinnedRows(hub = null) {
+  const ctx = hub ?? useDesktopHubSettings()
+  const catalog = useHubCatalogApps(ctx)
+  return computed(() => buildPinFavoriteRows(catalog.value, ctx.startMenuPins ?? {}))
+}
+
+/** Favorite apps for settings — tracks add/remove and visibility toggles live. */
+export function useHubFavoriteRows(hub = null) {
+  const ctx = hub ?? useDesktopHubSettings()
+  const catalog = useHubCatalogApps(ctx)
+  return computed(() => buildPinFavoriteRows(catalog.value, ctx.startMenuFavorites ?? {}))
+}

package/src/modules/desktop/composables/useDesktopIconDrag.js

@@ -0,0 +1,207 @@
+import { ref } from 'vue'
+import { clampPointToLayer, snapPoint } from '../utils/desktopGrid.js'
+import { findAppsAtCell, moveAppsToCell, previewGroupAtCell } from '../utils/desktopIconGroups.js'
+
+const DRAG_THRESHOLD = 4
+const HOLD_MS = 380
+
+/**
+ * Pointer drag for desktop app icons with iPhone-style grouping.
+ * Single icons drag immediately; group icons need a brief hold (tap opens folder).
+ */
+export function useDesktopIconDrag(options) {
+  const drag = ref(null)
+  const dropTarget = ref(null)
+  const lastWasDrag = ref(false)
+
+  let holdTimer = null
+
+  function getLayerRect() {
+    return options.getLayerEl()?.getBoundingClientRect() ?? null
+  }
+
+  function resolvePosition(x, y) {
+    const layer = options.getLayerEl()
+    if (!layer) return { x, y }
+    const clamped = clampPointToLayer(x, y, layer.clientWidth, layer.clientHeight)
+    return snapPoint(clamped.x, clamped.y, options.getSnapToGrid())
+  }
+
+  function getApps(ids) {
+    return ids.map((id) => options.findApp(id)).filter(Boolean)
+  }
+
+  function ensurePlaced(app, event) {
+    if (app.desktopX != null && app.desktopY != null) return
+    const layerRect = getLayerRect()
+    const el = event.currentTarget
+    if (!layerRect || !el) return
+    const rect = el.getBoundingClientRect()
+    const pos = resolvePosition(rect.left - layerRect.left, rect.top - layerRect.top)
+    app.desktopX = pos.x
+    app.desktopY = pos.y
+  }
+
+  function clearHoldTimer() {
+    if (holdTimer) {
+      clearTimeout(holdTimer)
+      holdTimer = null
+    }
+  }
+
+  function removeListeners() {
+    window.removeEventListener('mousemove', onPointerMove)
+    window.removeEventListener('mouseup', onPointerUp)
+  }
+
+  function updateDropTarget(pos, draggedApps) {
+    if (!drag.value?.moved) {
+      dropTarget.value = null
+      return
+    }
+
+    const allApps = options.getDesktopApps?.() ?? []
+    const draggedIds = draggedApps.map((a) => a.id)
+    const atCell = findAppsAtCell(allApps, pos.x, pos.y, draggedIds)
+
+    if (atCell.length > 0) {
+      const preview = previewGroupAtCell(allApps, draggedApps, pos.x, pos.y)
+      dropTarget.value = { x: pos.x, y: pos.y, apps: preview, merging: true }
+      return
+    }
+
+    if (draggedApps.length >= 2) {
+      dropTarget.value = { x: pos.x, y: pos.y, apps: draggedApps }
+      return
+    }
+
+    dropTarget.value = null
+  }
+
+  /**
+   * @param {object|object[]} appOrApps - single app or all apps in a group
+   * @param {object} meta - { mode: 'single'|'group'|'folder', onTap?: fn }
+   */
+  function onPointerDown(appOrApps, event, meta = {}) {
+    const apps = Array.isArray(appOrApps) ? appOrApps : [appOrApps]
+    const primary = apps[0]
+    if (!primary || event.button !== 0) return
+
+    for (const app of apps) ensurePlaced(app, event)
+
+    const ids = apps.map((a) => a.id)
+    const mode = meta.mode ?? 'single'
+    const requiresHold = mode === 'group'
+
+    drag.value = {
+      ids,
+      mode,
+      requiresHold,
+      startX: event.clientX,
+      startY: event.clientY,
+      anchorX: primary.desktopX ?? 0,
+      anchorY: primary.desktopY ?? 0,
+      moved: false,
+      ready: !requiresHold,
+      onTap: meta.onTap ?? null,
+    }
+
+    if (requiresHold) {
+      holdTimer = setTimeout(() => {
+        if (drag.value) drag.value.ready = true
+      }, HOLD_MS)
+    }
+
+    window.addEventListener('mousemove', onPointerMove)
+    window.addEventListener('mouseup', onPointerUp)
+  }
+
+  function onPointerMove(event) {
+    if (!drag.value?.ready) return
+
+    const dx = event.clientX - drag.value.startX
+    const dy = event.clientY - drag.value.startY
+    const dist = Math.abs(dx) + Math.abs(dy)
+
+    if (!drag.value.moved && dist < DRAG_THRESHOLD) return
+
+    drag.value.moved = true
+    const layerRect = getLayerRect()
+    if (!layerRect) return
+
+    const rawX = drag.value.anchorX + dx
+    const rawY = drag.value.anchorY + dy
+    const pos = resolvePosition(rawX, rawY)
+    const draggedApps = getApps(drag.value.ids)
+
+    for (const app of draggedApps) {
+      app.desktopX = pos.x
+      app.desktopY = pos.y
+    }
+
+    updateDropTarget(pos, draggedApps)
+  }
+
+  function finalizeDrop() {
+    if (!drag.value?.moved) return
+
+    const draggedApps = getApps(drag.value.ids)
+    if (!draggedApps.length) return
+
+    const primary = draggedApps[0]
+    const pos = resolvePosition(primary.desktopX ?? 0, primary.desktopY ?? 0)
+    moveAppsToCell(draggedApps, pos.x, pos.y)
+  }
+
+  function onPointerUp() {
+    clearHoldTimer()
+    removeListeners()
+
+    const session = drag.value
+    const wasDrag = session?.moved
+    lastWasDrag.value = !!wasDrag
+
+    if (wasDrag) {
+      finalizeDrop()
+      const draggedApps = getApps(session.ids)
+      const primary = draggedApps[0]
+      options.onMoved?.({
+        fromCell: { x: session.anchorX, y: session.anchorY },
+        toCell: primary
+          ? { x: primary.desktopX, y: primary.desktopY }
+          : null,
+      })
+    } else if (session?.onTap) {
+      session.onTap()
+    }
+
+    drag.value = null
+    dropTarget.value = null
+  }
+
+  function isDragging(appId) {
+    return drag.value?.ids?.includes(appId) && drag.value.moved
+  }
+
+  function isHolding(appId) {
+    return drag.value?.ids?.includes(appId) && drag.value.requiresHold && drag.value.ready && !drag.value.moved
+  }
+
+  function cleanup() {
+    clearHoldTimer()
+    removeListeners()
+    drag.value = null
+    dropTarget.value = null
+  }
+
+  return {
+    drag,
+    dropTarget,
+    lastWasDrag,
+    onPointerDown,
+    isDragging,
+    isHolding,
+    cleanup,
+    resolvePosition,
+  }
+}