feat: persistent app install state across navigation (#9)

Move installingApps from local refs in Marketplace/Discover to the
global server store. Install progress now persists when navigating
between views. My Apps shows installing overlay with progress bar
for apps being installed from the Marketplace.

Changes:
- server.ts: add installingApps Map + helpers to store
- Marketplace.vue: use store's installingApps instead of local ref
- Discover.vue: same
- Apps.vue: pass isInstalling + installProgress to AppCard
- AppCard.vue: add amber installing overlay with progress bar

522 tests pass, vue-tsc clean.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-29 00:13:39 +00:00
co-authored by Claude Opus 4.6
parent e9903e7b4b
commit 2b7e564a14
5 changed files with 108 additions and 52 deletions
+19
View File
@@ -10,6 +10,23 @@
@click="$emit('goToApp', id)"
@keydown.enter="$emit('goToApp', id)"
>
<!-- Installing overlay -->
<div
v-if="isInstalling"
class="absolute inset-0 z-20 flex flex-col items-center justify-center bg-black/70 backdrop-blur-sm rounded-xl gap-2"
>
<div class="flex items-center gap-3 text-amber-400">
<svg class="animate-spin h-5 w-5" 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>
<span class="text-sm font-medium">{{ installProgress?.message || t('common.installing') }}...</span>
</div>
<div v-if="installProgress" class="w-3/4 h-1 bg-white/10 rounded-full overflow-hidden">
<div class="h-full bg-amber-500 rounded-full transition-all" :style="{ width: `${installProgress.progress}%` }"></div>
</div>
</div>
<!-- Uninstalling overlay -->
<div
v-if="isUninstalling"
@@ -166,6 +183,8 @@ const props = defineProps<{
index: number
showStagger: boolean
isLoading: boolean
isInstalling?: boolean
installProgress?: { status: string; progress: number; message: string }
isUninstalling: boolean
}>()