fix: container install flow, filebrowser auth, AppCard enrichment

- Fix .198-style fresh installs: systemd service ExecStartPre creates
  /run/user/1000, enable podman.socket, chmod 644 /etc/hosts
- Filebrowser: add /data volume for database (fixes read-only crash),
  secure auth with random password via backend RPC (no more admin/admin)
- AppCard: enrich installing state with marketplace metadata (icon,
  title, description, tier badge, author, version)
- Registry: btcpayserver 1.13.5 → 1.13.7, images mirrored
- ReadWritePaths: add home container paths for rootless podman

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-27 13:32:54 +00:00
co-authored by Claude Opus 4.6
parent ef2922d909
commit 121f17e44e
14 changed files with 215 additions and 54 deletions
+70 -29
View File
@@ -39,43 +39,51 @@
<div class="flex items-start gap-4">
<img
:src="pkg['static-files']?.icon || `/assets/img/app-icons/${id}.png`"
:alt="pkg.manifest?.title || String(id)"
class="w-16 h-16 rounded-lg object-cover bg-white/10"
:src="icon"
:alt="title"
class="w-14 h-14 rounded-lg object-cover bg-white/10"
@error="handleImageError"
/>
<div class="flex-1 min-w-0 overflow-hidden">
<h3 class="text-lg font-semibold text-white mb-1 truncate" :title="pkg.manifest.title">
{{ pkg.manifest.title }}
</h3>
<p class="text-sm text-white/70 mb-2 truncate">
{{ pkg.manifest?.description?.short || '' }}
</p>
<div class="flex items-center gap-2">
<div class="flex items-center gap-2 mb-0.5">
<h3 class="text-lg font-semibold text-white truncate" :title="title">
{{ title }}
</h3>
<span
class="inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium"
:class="getStatusClass(pkg.state, pkg.health)"
>
<svg
v-if="isTransitioning"
class="animate-spin h-3 w-3"
xmlns="http://www.w3.org/2000/svg"
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 v-if="pkg.state === 'running' && pkg.health === 'unhealthy'" class="w-1.5 h-1.5 rounded-full bg-orange-400 animate-pulse"></span>
{{ getStatusLabel(pkg.state, pkg.health) }}
</span>
<span class="text-xs text-white/50">
v{{ pkg.manifest.version }}
</span>
v-if="tier && tier !== 'optional'"
class="tier-badge"
:class="tier === 'core' ? 'tier-badge-core' : 'tier-badge-recommended'"
>{{ tier }}</span>
</div>
<p class="text-sm text-white/50">{{ version ? `v${version}` : '' }}</p>
<p v-if="author" class="text-xs text-white/40 mt-0.5">{{ author }}</p>
</div>
</div>
<p class="text-white/70 text-sm mt-3 mb-3 line-clamp-2">
{{ description }}
</p>
<div class="flex items-center gap-2">
<span
class="inline-flex items-center gap-1.5 px-2 py-1 rounded text-xs font-medium"
:class="getStatusClass(pkg.state, pkg.health)"
>
<svg
v-if="isTransitioning"
class="animate-spin h-3 w-3"
xmlns="http://www.w3.org/2000/svg"
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 v-if="pkg.state === 'running' && pkg.health === 'unhealthy'" class="w-1.5 h-1.5 rounded-full bg-orange-400 animate-pulse"></span>
{{ getStatusLabel(pkg.state, pkg.health) }}
</span>
</div>
<!-- Quick Actions -->
<div v-if="!isUninstalling" class="mt-4 flex gap-2">
<button
@@ -145,9 +153,13 @@ import {
isWebOnlyApp, opensInTab, canLaunch,
getStatusClass, getStatusLabel, handleImageError,
} from './appsConfig'
import { getCuratedAppList } from '../discover/curatedApps'
const { t } = useI18n()
// Build a lookup map for enriching sparse backend data during install
const curatedMap = new Map(getCuratedAppList().map(a => [a.id, a]))
const props = defineProps<{
id: string
pkg: PackageDataEntry
@@ -168,6 +180,35 @@ defineEmits<{
const isWebOnly = computed(() => isWebOnlyApp(props.id))
// Enrich from marketplace when backend data is sparse (e.g. during install)
const curated = computed(() => curatedMap.get(props.id))
const title = computed(() => {
const t = props.pkg.manifest?.title
return (t && t !== props.id) ? t : (curated.value?.title || t || props.id)
})
const description = computed(() => {
const d = props.pkg.manifest?.description?.short
return (d && d !== 'Installing...') ? d : (curated.value?.description || d || '')
})
const icon = computed(() => {
const i = props.pkg['static-files']?.icon
return i || curated.value?.icon || `/assets/img/app-icons/${props.id}.png`
})
const version = computed(() => {
const v = props.pkg.manifest?.version
return v || curated.value?.version || ''
})
const author = computed(() => props.pkg.manifest?.author || curated.value?.author || '')
const tier = computed(() => {
const t = props.pkg.manifest?.tier
if (t && t !== '') return t
const core = ['bitcoin-knots', 'bitcoin', 'lnd', 'mempool', 'btcpay-server', 'dwn', 'filebrowser']
const recommended = ['fedimint', 'thunderhub', 'vaultwarden', 'uptime-kuma', 'grafana', 'searxng', 'tailscale', 'portainer']
if (core.includes(props.id)) return 'core'
if (recommended.includes(props.id)) return 'recommended'
return 'optional'
})
const isTransitioning = computed(() => {
const s = props.pkg.state
const h = props.pkg.health