244 lines
8.4 KiB
Vue
244 lines
8.4 KiB
Vue
<template>
|
|
<div class="app-icon-grid-wrap">
|
|
<!-- Swipeable pages -->
|
|
<div
|
|
ref="scrollContainer"
|
|
class="app-icon-pages"
|
|
@scroll="onScroll"
|
|
>
|
|
<div
|
|
v-for="(page, pageIndex) in pages"
|
|
:key="pageIndex"
|
|
class="app-icon-page"
|
|
>
|
|
<div
|
|
v-for="([id, pkg]) in page"
|
|
:key="id"
|
|
class="app-icon-item"
|
|
role="button"
|
|
:tabindex="0"
|
|
:aria-label="getTitle(id, pkg)"
|
|
@click="handleTap(id, pkg)"
|
|
@keydown.enter="handleTap(id, pkg)"
|
|
>
|
|
<!-- Icon with status indicator -->
|
|
<div class="app-icon-frame">
|
|
<img
|
|
:src="getIcon(id, pkg)"
|
|
:alt="getTitle(id, pkg)"
|
|
class="app-icon-img"
|
|
@error="handleImageError"
|
|
/>
|
|
<!-- Status dot -->
|
|
<span
|
|
v-if="pkg.state === 'running'"
|
|
class="app-icon-status app-icon-status-running"
|
|
></span>
|
|
<span
|
|
v-else-if="pkg.state === 'exited'"
|
|
class="app-icon-status app-icon-status-error"
|
|
></span>
|
|
<span
|
|
v-else-if="pkg.state === 'starting' || pkg.state === 'stopping' || pkg.state === 'installing'"
|
|
class="app-icon-status app-icon-status-transition"
|
|
></span>
|
|
<!-- Installing overlay -->
|
|
<div
|
|
v-if="serverStore.isInstalling(id)"
|
|
class="app-icon-installing"
|
|
>
|
|
<svg class="animate-spin h-5 w-5 text-white" fill="none" viewBox="0 0 24 24">
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<!-- Label -->
|
|
<span class="app-icon-label">{{ getTitle(id, pkg) }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Page dots -->
|
|
<div v-if="pages.length > 1" class="app-icon-dots">
|
|
<button
|
|
v-for="(_, i) in pages"
|
|
:key="i"
|
|
class="app-icon-dot"
|
|
:class="{ 'app-icon-dot-active': i === activePage }"
|
|
:aria-label="`Page ${i + 1}`"
|
|
@click="scrollToPage(i)"
|
|
></button>
|
|
</div>
|
|
|
|
<Transition name="fade">
|
|
<div v-if="credentialModal.show" class="fixed inset-0 z-[2700] flex items-end justify-center bg-black/60 backdrop-blur-md p-0 md:items-center md:p-6" @click.self="closeCredentialModal">
|
|
<div class="sideload-modal">
|
|
<div class="flex items-start justify-between gap-4 mb-5">
|
|
<div>
|
|
<h2 class="text-lg font-semibold text-white">{{ credentialModal.title }}</h2>
|
|
<p class="text-sm text-white/55 mt-1">{{ credentialModal.description }}</p>
|
|
</div>
|
|
<button type="button" class="sideload-close-btn" aria-label="Close" @click="closeCredentialModal">×</button>
|
|
</div>
|
|
<div class="space-y-3">
|
|
<div v-for="cred in credentialModal.credentials" :key="cred.label" class="rounded-lg border border-white/10 bg-white/[0.04] p-3">
|
|
<div class="flex items-center justify-between gap-3 mb-1">
|
|
<span class="text-white/60 text-xs uppercase tracking-wide">{{ cred.label }}</span>
|
|
<button type="button" class="text-xs text-blue-300 hover:text-blue-200" @click="copyModalCredential(cred.label, cred.value)">{{ credentialModal.copied === cred.label ? 'Copied' : 'Copy' }}</button>
|
|
</div>
|
|
<p class="font-mono text-sm text-white break-all">{{ cred.value }}</p>
|
|
</div>
|
|
</div>
|
|
<div class="mt-5 flex gap-3">
|
|
<button type="button" class="flex-1 glass-button px-4 py-3 rounded-lg" @click="closeCredentialModal">Cancel</button>
|
|
<button type="button" class="flex-1 glass-button px-4 py-3 rounded-lg font-semibold" @click="continueCredentialLaunch">Continue to app</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Transition>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, ref } from 'vue'
|
|
import { useServerStore } from '@/stores/server'
|
|
import { useAppLauncherStore } from '@/stores/appLauncher'
|
|
import type { AppCredential, AppCredentialsResponse, PackageDataEntry } from '@/types/api'
|
|
import { rpcClient } from '@/api/rpc-client'
|
|
import { resolveAppUrl } from '@/views/appSession/appSessionConfig'
|
|
import { canLaunch, handleImageError, isWebsitePackage, opensInTab, resolveAppIcon, resolveRuntimeLaunchUrl, WEB_ONLY_APP_URLS } from './appsConfig'
|
|
import { getCuratedAppList } from '../discover/curatedApps'
|
|
|
|
const ITEMS_PER_PAGE = 16 // 4 columns x 4 rows
|
|
|
|
const serverStore = useServerStore()
|
|
const appLauncher = useAppLauncherStore()
|
|
|
|
const curatedMap = new Map(getCuratedAppList().map(a => [a.id, a]))
|
|
const credentialModal = ref({
|
|
show: false,
|
|
appId: '',
|
|
title: '',
|
|
description: '',
|
|
credentials: [] as AppCredential[],
|
|
copied: '',
|
|
})
|
|
|
|
const props = defineProps<{
|
|
apps: [string, PackageDataEntry][]
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
goToApp: [id: string]
|
|
}>()
|
|
|
|
const scrollContainer = ref<HTMLElement | null>(null)
|
|
const activePage = ref(0)
|
|
|
|
const pages = computed(() => {
|
|
const result: [string, PackageDataEntry][][] = []
|
|
for (let i = 0; i < props.apps.length; i += ITEMS_PER_PAGE) {
|
|
result.push(props.apps.slice(i, i + ITEMS_PER_PAGE))
|
|
}
|
|
return result.length ? result : [[]]
|
|
})
|
|
|
|
function getTitle(id: string, pkg: PackageDataEntry): string {
|
|
const t = pkg.manifest?.title
|
|
if (t && t !== id) return t
|
|
return curatedMap.get(id)?.title || t || id
|
|
}
|
|
|
|
function getIcon(id: string, pkg: PackageDataEntry): string {
|
|
return resolveAppIcon(id, pkg, curatedMap.get(id)?.icon)
|
|
}
|
|
|
|
async function handleTap(id: string, pkg: PackageDataEntry) {
|
|
if (canLaunch(pkg)) {
|
|
const shown = await maybeShowCredentialsBeforeLaunch(id, pkg)
|
|
if (shown) return
|
|
launchNow(id, pkg)
|
|
} else {
|
|
emit('goToApp', id)
|
|
}
|
|
}
|
|
|
|
function launchNow(id: string, pkg: PackageDataEntry) {
|
|
const isMobile = typeof window !== 'undefined' && window.innerWidth < 768
|
|
const webOnlyUrl = WEB_ONLY_APP_URLS[id]
|
|
if (webOnlyUrl) {
|
|
appLauncher.open({ url: webOnlyUrl, title: getTitle(id, pkg), openInNewTab: !isMobile })
|
|
return
|
|
}
|
|
if (isWebsitePackage(id, pkg)) {
|
|
const url = resolveRuntimeLaunchUrl(pkg)
|
|
if (url) {
|
|
appLauncher.open({ url, title: getTitle(id, pkg), openInNewTab: !isMobile })
|
|
return
|
|
}
|
|
}
|
|
if (!isMobile && opensInTab(id)) {
|
|
const appUrl = resolveRuntimeLaunchUrl(pkg) || resolveAppUrl(id)
|
|
if (appUrl) {
|
|
window.open(appUrl, '_blank', 'noopener,noreferrer')
|
|
return
|
|
}
|
|
}
|
|
appLauncher.openSession(id)
|
|
}
|
|
|
|
async function maybeShowCredentialsBeforeLaunch(id: string, pkg: PackageDataEntry): Promise<boolean> {
|
|
try {
|
|
const result = await rpcClient.call<AppCredentialsResponse>({ method: 'package.credentials', params: { app_id: id }, timeout: 5000 })
|
|
if (!result.credentials?.length) return false
|
|
credentialModal.value = {
|
|
show: true,
|
|
appId: id,
|
|
title: result.title || `${getTitle(id, pkg)} credentials`,
|
|
description: result.description || 'Use these credentials when the app asks you to sign in.',
|
|
credentials: result.credentials,
|
|
copied: '',
|
|
}
|
|
return true
|
|
} catch {
|
|
return false
|
|
}
|
|
}
|
|
|
|
function closeCredentialModal() { credentialModal.value.show = false }
|
|
|
|
function continueCredentialLaunch() {
|
|
const id = credentialModal.value.appId
|
|
const entry = props.apps.find(([appId]) => appId === id)
|
|
closeCredentialModal()
|
|
if (entry) launchNow(entry[0], entry[1])
|
|
}
|
|
|
|
async function copyModalCredential(label: string, value: string) {
|
|
try { await navigator.clipboard.writeText(value) } catch {
|
|
const textarea = document.createElement('textarea')
|
|
textarea.value = value
|
|
document.body.appendChild(textarea)
|
|
textarea.select()
|
|
document.execCommand('copy')
|
|
document.body.removeChild(textarea)
|
|
}
|
|
credentialModal.value.copied = label
|
|
}
|
|
|
|
function onScroll() {
|
|
const el = scrollContainer.value
|
|
if (!el) return
|
|
const pageWidth = el.clientWidth
|
|
if (pageWidth === 0) return
|
|
activePage.value = Math.round(el.scrollLeft / pageWidth)
|
|
}
|
|
|
|
function scrollToPage(index: number) {
|
|
const el = scrollContainer.value
|
|
if (!el) return
|
|
el.scrollTo({ left: index * el.clientWidth, behavior: 'smooth' })
|
|
}
|
|
</script>
|