archy/neode-ui/src/views/AppDetails.vue

<template>
  <div class="app-details-container pb-16 md:pb-16">
    <BackButton :label="backButtonText" desktop-margin="mb-6" @click="goBack" />

    <div v-if="pkg">
      <AppHeroSection
        :pkg="pkg"
        :app-id="appId"
        :package-key="packageKey"
        :can-launch="canLaunch"
        :is-web-only="isWebOnly"
        :pending-action="pendingAction"
        @launch="launchApp"
        @start="startApp"
        @stop="stopApp"
        @restart="restartApp"
        @uninstall="uninstallApp"
        @update="updateApp"
        @channels="router.push('/dashboard/apps/lnd/channels')"
      />

      <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <AppContentSection
          :pkg="pkg"
          :features="features"
          :needs-bitcoin-sync="needsBitcoinSync"
          :bitcoin-synced="bitcoinSynced"
          :bitcoin-sync-percent="bitcoinSyncPercent"
          :bitcoin-block-height="bitcoinBlockHeight"
        />

        <AppSidebar
          :pkg="pkg"
          :package-key="packageKey"
          :is-web-only="isWebOnly"
          :gateway-state="gatewayState"
          :interface-addresses="interfaceAddresses"
          :lan-url="lanUrl"
          :tor-url="torUrl"
          :show-tor-address="showTorAddress"
          :credentials="credentials"
          :credentials-loading="credentialsLoading"
        />
      </div>
    </div>

    <!-- App Not Found -->
    <div v-else class="glass-card p-12 text-center">
      <svg class="w-24 h-24 text-white/20 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
      </svg>
      <h3 class="text-2xl font-semibold text-white mb-2">{{ t('appDetails.notFoundTitle') }}</h3>
      <p class="text-white/70">{{ t('appDetails.notFoundMessage') }}</p>
    </div>

    <AppsUninstallModal
      :show="uninstallModal.show"
      :app-title="uninstallModal.appTitle"
      :uninstalling="pendingAction === 'uninstall'"
      @close="closeUninstallModal"
      @confirm="confirmUninstall"
    />

    <!-- Action error toast -->
    <Transition name="fade">
      <div v-if="actionError" class="fixed bottom-20 left-1/2 -translate-x-1/2 z-50 max-w-md w-full px-4" role="alert" aria-live="assertive">
        <div class="alert-error backdrop-blur-sm rounded-lg px-4 py-3 text-sm flex items-center justify-between gap-3">
          <span>{{ actionError }}</span>
          <button @click="actionError = ''" :aria-label="t('apps.dismissError')" class="text-red-300 hover:text-white shrink-0">&times;</button>
        </div>
      </div>
    </Transition>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '../stores/app'
import { useAppLauncherStore } from '../stores/appLauncher'
import { dummyApps } from '../utils/dummyApps'
import { rpcClient } from '@/api/rpc-client'
import type { AppCredentialsResponse } from '@/types/api'
import BackButton from '@/components/BackButton.vue'
import AppHeroSection from './appDetails/AppHeroSection.vue'
import AppContentSection from './appDetails/AppContentSection.vue'
import AppSidebar from './appDetails/AppSidebar.vue'
import AppsUninstallModal from './apps/AppsUninstallModal.vue'
import { resolveAppUrl } from './appSession/appSessionConfig'
import { resolveAppCredentials } from './apps/appCredentials'
import { isWebsitePackage, resolveRuntimeLaunchUrl } from './apps/appsConfig'
import {
  WEB_ONLY_APP_URLS,
  PACKAGE_ALIASES,
  BITCOIN_DEPENDENT_APPS,
  resolvePackageKey,
  isRealOnionAddress,
} from './appDetails/appDetailsData'

const router = useRouter()
const route = useRoute()
const store = useAppStore()
const { t } = useI18n()

const appId = computed(() => {
  const id = route.params.id
  if (typeof id !== 'string' || !/^[a-z0-9][a-z0-9._-]*$/.test(id) || id.length > 64) {
    router.replace('/dashboard/apps')
    return ''
  }
  return id
})

const isWebOnly = computed(() => appId.value in WEB_ONLY_APP_URLS)

const pkg = computed(() => {
  const routeId = appId.value
  const pkgKey = resolvePackageKey(routeId)
  if (store.packages[pkgKey]) return store.packages[pkgKey]
  if (store.packages[routeId]) return store.packages[routeId]
  const aliases = PACKAGE_ALIASES[routeId]
  if (aliases) {
    for (const alias of aliases) {
      if (store.packages[alias]) return store.packages[alias]
    }
  }
  if (dummyApps[routeId]) return dummyApps[routeId]
  return null
})

const interfaceAddresses = computed(() => {
  const main = pkg.value?.installed?.['interface-addresses']?.main
  if (!main) return null
  if (!main['lan-address'] && !isRealOnionAddress(main['tor-address'])) return null
  return main
})

const lanUrl = computed(() => {
  const addr = interfaceAddresses.value?.['lan-address']
  if (!addr) return '#'
  if (addr.includes('localhost')) return addr.replace('localhost', window.location.hostname)
  return addr
})

const torUrl = computed(() => {
  const addr = interfaceAddresses.value?.['tor-address']
  if (!addr || !isRealOnionAddress(addr)) return ''
  return addr.startsWith('http') ? addr : `http://${addr}`
})

const showTorAddress = computed(() => isRealOnionAddress(interfaceAddresses.value?.['tor-address']))

const packageKey = computed(() => resolvePackageKey(appId.value))

const gatewayState = computed(() => {
  const gw = store.packages['fedimint-gateway']
  return gw ? gw.state : 'not installed'
})

const needsBitcoinSync = computed(() => BITCOIN_DEPENDENT_APPS.includes(packageKey.value))
const bitcoinSyncPercent = ref(0)
const bitcoinBlockHeight = ref(0)
const bitcoinSynced = computed(() => bitcoinSyncPercent.value >= 99.9)
const credentials = ref<AppCredentialsResponse | null>(null)
const credentialsLoading = ref(false)
const pendingAction = ref<'start' | 'stop' | 'restart' | 'update' | 'uninstall' | null>(null)

async function loadBitcoinSync() {
  if (!needsBitcoinSync.value) return
  try {
    const btc = await rpcClient.call<{ block_height: number; sync_progress: number }>({
      method: 'bitcoin.getinfo',
      timeout: 5000,
    })
    bitcoinSyncPercent.value = (btc.sync_progress ?? 0) * 100
    bitcoinBlockHeight.value = btc.block_height ?? 0
  } catch {
    bitcoinSyncPercent.value = 0
    bitcoinBlockHeight.value = 0
  }
}

async function loadCredentials() {
  if (!appId.value) return
  credentialsLoading.value = true
  try {
    const result = await rpcClient.call<AppCredentialsResponse>({
      method: 'package.credentials',
      params: { app_id: packageKey.value },
      timeout: 5000,
    })
    credentials.value = resolveAppCredentials(packageKey.value, result)
  } catch {
    credentials.value = resolveAppCredentials(packageKey.value, null)
  } finally {
    credentialsLoading.value = false
  }
}

onMounted(() => {
  loadBitcoinSync()
  loadCredentials()
})

const actionError = ref('')
let errorTimer: ReturnType<typeof setTimeout> | undefined

function showActionError(msg: string) {
  actionError.value = msg
  if (errorTimer) clearTimeout(errorTimer)
  errorTimer = setTimeout(() => { actionError.value = '' }, 5000)
}

const uninstallModal = ref({ show: false, appTitle: '' })

function closeUninstallModal() {
  uninstallModal.value.show = false
}

const backButtonText = computed(() => {
  if (route.query.from === 'discover') return 'Back to Discover'
  if (route.query.from === 'marketplace') return t('appDetails.backToStore')
  return t('appDetails.backToApps')
})

const canLaunch = computed(() => {
  if (!pkg.value) return false
  if (isWebOnly.value) return true
  const hasRuntimeAddress = !!pkg.value.installed?.['interface-addresses']?.main?.['lan-address']
  const hasKnownLaunchUrl = typeof window !== 'undefined' && !!resolveAppUrl(pkg.value.manifest.id)
  const hasUI = !!(pkg.value.manifest.interfaces?.main?.ui || hasRuntimeAddress || hasKnownLaunchUrl)
  return hasUI && pkg.value.state === 'running' && pkg.value.health !== 'starting' && pkg.value.health !== 'unhealthy'
})

const features = computed(() => [
  'Self-hosted and privacy-focused',
  'Easy installation and updates',
  'Automatic backups',
  'Secure by default'
])

function goBack() {
  if (route.query.from === 'discover') {
    router.push('/dashboard/discover').catch(() => {})
    return
  }
  if (route.query.from === 'marketplace') {
    router.push('/dashboard/marketplace').catch(() => {})
    return
  }
  router.push('/dashboard/apps').catch(() => {})
}

function launchApp() {
  if (!pkg.value) return
  const id = appId.value
  const isMobile = typeof window !== 'undefined' && window.innerWidth < 768

  const webOnlyUrl = WEB_ONLY_APP_URLS[id]
  if (webOnlyUrl) {
    useAppLauncherStore().open({ url: webOnlyUrl, title: pkg.value.manifest.title, openInNewTab: !isMobile })
    return
  }

  if (isWebsitePackage(id, pkg.value)) {
    const url = resolveRuntimeLaunchUrl(pkg.value)
    if (url) {
      useAppLauncherStore().open({ url, title: pkg.value.manifest.title, openInNewTab: !isMobile })
    }
    return
  }

  const runtimeUrl = resolveRuntimeLaunchUrl(pkg.value)
  if (runtimeUrl) {
    useAppLauncherStore().open({ url: runtimeUrl, title: pkg.value.manifest.title })
    return
  }

  // Container apps should launch through session routing so protocol/path
  // handling stays centralized in appSessionConfig.
  useAppLauncherStore().openSession(id)
}


async function startApp() {
  pendingAction.value = 'start'
  try {
    await store.startPackage(appId.value)
  } catch (err) {
    showActionError(`Failed to start: ${err instanceof Error ? err.message : 'Unknown error'}`)
  } finally {
    pendingAction.value = null
  }
}

async function stopApp() {
  pendingAction.value = 'stop'
  try {
    await store.stopPackage(appId.value)
  } catch (err) {
    showActionError(`Failed to stop: ${err instanceof Error ? err.message : 'Unknown error'}`)
  } finally {
    pendingAction.value = null
  }
}

async function restartApp() {
  pendingAction.value = 'restart'
  try {
    await store.restartPackage(appId.value)
  } catch (err) {
    showActionError(`Failed to restart: ${err instanceof Error ? err.message : 'Unknown error'}`)
  } finally {
    pendingAction.value = null
  }
}

async function updateApp() {
  pendingAction.value = 'update'
  try {
    await store.updatePackage(appId.value)
  } catch (err) {
    showActionError(`Failed to update: ${err instanceof Error ? err.message : 'Unknown error'}`)
  } finally {
    pendingAction.value = null
  }
}

function showUninstallModal() {
  if (!pkg.value) return
  uninstallModal.value = { show: true, appTitle: pkg.value.manifest.title }
}

async function confirmUninstall(deleteAppData: boolean) {
  uninstallModal.value.show = false
  pendingAction.value = 'uninstall'
  try {
    await store.uninstallPackage(appId.value, { preserveData: !deleteAppData })
    router.push('/dashboard/apps').catch(() => {})
  } catch (err) {
    showActionError(`Failed to uninstall: ${err instanceof Error ? err.message : 'Unknown error'}`)
  } finally {
    pendingAction.value = null
  }
}

function uninstallApp() {
  showUninstallModal()
}
</script>

<style scoped>
.modal-enter-active,
.modal-leave-active {
  transition: opacity 0.3s ease;
}

.modal-enter-active .glass-card,
.modal-leave-active .glass-card {
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal-enter-from,
.modal-leave-to {
  opacity: 0;
}

.modal-enter-from .glass-card,
.modal-leave-to .glass-card {
  transform: scale(0.95);
  opacity: 0;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>