lfg2025/archy
1
0
Fork 0
Code Issues 27 Pull Requests 5 Actions Packages Projects Releases 6 Wiki Activity

feat: add vue-i18n infrastructure and externalize all UI strings (A11Y-03)

Browse Source 
Set up vue-i18n with English locale file containing 500+ keys organized
by view namespace. All 15 views converted to use t() calls instead of
hardcoded strings. Infrastructure ready for community translations.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-11 13:45:59 +00:00
co-authored by Claude Opus 4.6
parent c1131251f9
commit d15e90c26d
21 changed files with 2491 additions and 640 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/views/MarketplaceAppDetails.vue
+45 -43
View File
@@ -5,11 +5,11 @@
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
Back to App Store
{{ t('marketplaceDetails.backToStore') }}
</button>
<!-- Mobile Full-Width Back Button -->
<button
<button
@click="goBack"
class="md:hidden fixed left-4 right-4 z-40 glass-button px-6 py-3 rounded-lg font-medium shadow-2xl flex items-center justify-center gap-2"
:style="{
@@ -20,7 +20,7 @@
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
</svg>
<span>Back to App Store</span>
<span>{{ t('marketplaceDetails.backToStore') }}</span>
</button>
<Transition name="content-fade" mode="out-in">
@@ -30,7 +30,7 @@
<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>
<p class="text-white/70">Loading app details...</p>
<p class="text-white/70">{{ t('marketplaceDetails.loadingDetails') }}</p>
</div>
<!-- App Details -->
@@ -63,12 +63,12 @@
class="inline-flex items-center px-2.5 py-1 rounded-lg text-xs font-medium bg-green-500/20 text-green-200 border border-green-500/30"
>
<span class="w-1.5 h-1.5 rounded-full bg-green-400 mr-1.5"></span>
Installed
{{ t('marketplaceDetails.installed') }}
</span>
<span class="text-white/50 text-xs">{{ app.version ? `v${app.version}` : 'latest' }}</span>
</div>
</div>
<!-- Action Buttons -->
<div class="flex items-center gap-2 flex-shrink-0">
<button
@@ -79,7 +79,7 @@
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
Open
{{ t('marketplaceDetails.open') }}
</button>
<button
v-else
@@ -94,7 +94,7 @@
<svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
{{ installing ? 'Installing...' : 'Install' }}
{{ installing ? t('common.installing') : t('common.install') }}
</button>
</div>
</div>
@@ -127,7 +127,7 @@
class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-500/20 text-green-200 border border-green-500/30"
>
<span class="w-1.5 h-1.5 rounded-full bg-green-400 mr-1"></span>
Installed
{{ t('marketplaceDetails.installed') }}
</span>
<span class="text-white/50 text-xs">{{ app.version ? `v${app.version}` : 'latest' }}</span>
</div>
@@ -144,7 +144,7 @@
<svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14" />
</svg>
Open
{{ t('marketplaceDetails.open') }}
</button>
<button
v-else
@@ -159,7 +159,7 @@
<svg v-else class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4" />
</svg>
{{ installing ? 'Installing...' : 'Install' }}
{{ installing ? t('common.installing') : t('common.install') }}
</button>
</div>
@@ -170,7 +170,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="flex-1">
<p class="text-red-200 font-medium text-sm">Installation Failed</p>
<p class="text-red-200 font-medium text-sm">{{ t('marketplaceDetails.installFailed') }}</p>
<p class="text-red-300 text-xs mt-1">{{ installError }}</p>
</div>
</div>
@@ -184,7 +184,7 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
</svg>
<div class="flex-1">
<p class="text-red-200 font-medium">Installation Failed</p>
<p class="text-red-200 font-medium">{{ t('marketplaceDetails.installFailed') }}</p>
<p class="text-red-300 text-sm mt-1">{{ installError }}</p>
</div>
</div>
@@ -196,7 +196,7 @@
<div class="lg:col-span-2 space-y-6">
<!-- Screenshots Gallery -->
<div class="glass-card p-6">
<h2 class="text-2xl font-bold text-white mb-4">Screenshots</h2>
<h2 class="text-2xl font-bold text-white mb-4">{{ t('marketplaceDetails.screenshots') }}</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div
v-for="i in 4"
@@ -208,12 +208,12 @@
</svg>
</div>
</div>
<p class="text-white/60 text-sm mt-3 text-center">Screenshot placeholders - images coming soon</p>
<p class="text-white/60 text-sm mt-3 text-center">{{ t('marketplaceDetails.screenshotPlaceholder') }}</p>
</div>
<!-- Description -->
<div class="glass-card p-6">
<h2 class="text-2xl font-bold text-white mb-4">About {{ app.title }}</h2>
<h2 class="text-2xl font-bold text-white mb-4">{{ t('marketplaceDetails.about', { name: app.title }) }}</h2>
<p class="text-white/80 leading-relaxed whitespace-pre-line">
{{ longDescription }}
</p>
@@ -221,7 +221,7 @@
<!-- Features -->
<div class="glass-card p-6">
<h2 class="text-2xl font-bold text-white mb-4">Features</h2>
<h2 class="text-2xl font-bold text-white mb-4">{{ t('marketplaceDetails.features') }}</h2>
<ul class="space-y-3">
<li
v-for="(feature, index) in features"
@@ -241,22 +241,22 @@
<div class="space-y-6">
<!-- App Info Card -->
<div class="glass-card p-6">
<h3 class="text-lg font-bold text-white mb-4">Information</h3>
<h3 class="text-lg font-bold text-white mb-4">{{ t('marketplaceDetails.information') }}</h3>
<div class="space-y-3">
<div class="flex items-center justify-between py-2 border-b border-white/10">
<span class="text-white/60 text-sm">Version</span>
<span class="text-white/60 text-sm">{{ t('common.version') }}</span>
<span class="text-white font-medium">{{ app.version || 'latest' }}</span>
</div>
<div v-if="app.author" class="flex items-center justify-between py-2 border-b border-white/10">
<span class="text-white/60 text-sm">Developer</span>
<span class="text-white/60 text-sm">{{ t('common.developer') }}</span>
<span class="text-white font-medium">{{ app.author }}</span>
</div>
<div class="flex items-center justify-between py-2 border-b border-white/10">
<span class="text-white/60 text-sm">Status</span>
<span class="text-white font-medium">{{ isInstalled ? 'Installed' : 'Not Installed' }}</span>
<span class="text-white/60 text-sm">{{ t('common.status') }}</span>
<span class="text-white font-medium">{{ isInstalled ? t('marketplaceDetails.installed') : t('marketplaceDetails.notInstalled') }}</span>
</div>
<div class="flex items-center justify-between py-2 border-b border-white/10">
<span class="text-white/60 text-sm">Category</span>
<span class="text-white/60 text-sm">{{ t('common.category') }}</span>
<span class="text-white font-medium capitalize">{{ app.category || 'App' }}</span>
</div>
<div v-if="app.manifestUrl" class="flex items-center justify-between py-2">
@@ -268,7 +268,7 @@
<!-- Requirements Card -->
<div class="glass-card p-6">
<h3 class="text-lg font-bold text-white mb-4">Requirements</h3>
<h3 class="text-lg font-bold text-white mb-4">{{ t('marketplaceDetails.requirements') }}</h3>
<div class="space-y-3">
<!-- App Dependencies -->
<div v-if="dependencies.length > 0" class="space-y-2 mb-4">
@@ -290,7 +290,7 @@
<div class="flex-1">
<p class="text-white/80 font-medium text-sm">{{ dep.title }}</p>
<p class="text-white/50 text-xs">
{{ dep.status === 'running' ? 'Running' : dep.status === 'stopped' ? 'Installed but stopped' : 'Not installed' }}
{{ dep.status === 'running' ? t('marketplaceDetails.depRunning') : dep.status === 'stopped' ? t('marketplaceDetails.depStopped') : t('marketplaceDetails.depNotInstalled') }}
</p>
</div>
</div>
@@ -305,19 +305,19 @@
<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>
{{ installingDeps ? 'Installing...' : 'Install Requirements' }}
{{ installingDeps ? t('common.installing') : t('marketplaceDetails.installRequirements') }}
</button>
</div>
<div v-else class="py-2 border-b border-white/10">
<p class="text-white/60 text-sm">No additional dependencies required</p>
<p class="text-white/60 text-sm">{{ t('marketplaceDetails.noRequirements') }}</p>
</div>
<div class="flex items-start gap-3">
<svg class="w-5 h-5 text-blue-400 flex-shrink-0 mt-0.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 3v2m6-2v2M9 19v2m6-2v2M5 9H3m2 6H3m18-6h-2m2 6h-2M7 19h10a2 2 0 002-2V7a2 2 0 00-2-2H7a2 2 0 00-2 2v10a2 2 0 002 2zM9 9h6v6H9V9z" />
</svg>
<div class="flex-1">
<p class="text-white/80 font-medium">RAM</p>
<p class="text-white/60 text-sm">Minimum 512MB</p>
<p class="text-white/80 font-medium">{{ t('appDetails.ram') }}</p>
<p class="text-white/60 text-sm">{{ t('appDetails.ramDesc') }}</p>
</div>
</div>
<div class="flex items-start gap-3">
@@ -325,8 +325,8 @@
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4" />
</svg>
<div class="flex-1">
<p class="text-white/80 font-medium">Storage</p>
<p class="text-white/60 text-sm">~100MB</p>
<p class="text-white/80 font-medium">{{ t('appDetails.storage') }}</p>
<p class="text-white/60 text-sm">{{ t('appDetails.storageDesc') }}</p>
</div>
</div>
</div>
@@ -334,7 +334,7 @@
<!-- Links Card (no GitHub - repo link removed per product) -->
<div v-if="app.manifestUrl" class="glass-card p-6">
<h3 class="text-lg font-bold text-white mb-4">Links</h3>
<h3 class="text-lg font-bold text-white mb-4">{{ t('marketplaceDetails.links') }}</h3>
<div class="space-y-2">
<a
:href="app.manifestUrl"
@@ -345,7 +345,7 @@
<svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
</svg>
Download Package
{{ t('marketplaceDetails.downloadPackage') }}
</a>
</div>
</div>
@@ -358,8 +358,8 @@
<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">App Not Found</h3>
<p class="text-white/70">The requested application could not be found in the marketplace</p>
<h3 class="text-2xl font-semibold text-white mb-2">{{ t('marketplaceDetails.notFoundTitle') }}</h3>
<p class="text-white/70">{{ t('marketplaceDetails.notFoundMessage') }}</p>
</div>
</Transition>
@@ -369,11 +369,13 @@
<script setup lang="ts">
import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useAppStore } from '../stores/app'
import { rpcClient } from '../api/rpc-client'
import { useMarketplaceApp, type MarketplaceAppInfo } from '../composables/useMarketplaceApp'
import { useMobileBackButton } from '../composables/useMobileBackButton'
const { t } = useI18n()
const { bottomPosition } = useMobileBackButton()
const router = useRouter()
@@ -404,7 +406,7 @@ const shortDescription = computed(() => {
}
return desc || ''
} catch (e) {
console.error('[MarketplaceAppDetails] Error in shortDescription:', e)
if (import.meta.env.DEV) console.error('[MarketplaceAppDetails] Error in shortDescription:', e)
return ''
}
})
@@ -418,7 +420,7 @@ const longDescription = computed(() => {
}
return desc || ''
} catch (e) {
console.error('[MarketplaceAppDetails] Error in longDescription:', e)
if (import.meta.env.DEV) console.error('[MarketplaceAppDetails] Error in longDescription:', e)
return ''
}
})
@@ -479,7 +481,7 @@ onMounted(() => {
}, 500)
}
} catch (e) {
console.error('[MarketplaceAppDetails] Error loading app data:', e)
if (import.meta.env.DEV) console.error('[MarketplaceAppDetails] Error loading app data:', e)
loading.value = false
pendingRedirect = setTimeout(() => {
router.push('/dashboard/marketplace').catch(() => {})
@@ -530,8 +532,8 @@ async function installDependencies() {
await new Promise(resolve => setTimeout(resolve, 2000))
}
} catch (err: unknown) {
installError.value = err instanceof Error ? err.message : 'Failed to install dependencies.'
console.error('[MarketplaceAppDetails] Failed to install dependencies:', err)
installError.value = err instanceof Error ? err.message : t('marketplaceDetails.installFailed')
if (import.meta.env.DEV) console.error('[MarketplaceAppDetails] Failed to install dependencies:', err)
} finally {
installingDeps.value = false
}
@@ -540,7 +542,7 @@ async function installDependencies() {
async function installApp() {
if (installing.value || !app.value) return
if (!app.value.manifestUrl && !app.value.dockerImage) {
console.warn('[MarketplaceAppDetails] Cannot install - no manifestUrl or dockerImage:', app.value)
if (import.meta.env.DEV) console.warn('[MarketplaceAppDetails] Cannot install - no manifestUrl or dockerImage:', app.value)
return
}
@@ -577,8 +579,8 @@ async function installApp() {
router.push(`/dashboard/apps/${appId.value}`).catch(() => {})
} catch (err: unknown) {
installError.value = err instanceof Error ? err.message : 'Installation failed. Please try again.'
console.error('[MarketplaceAppDetails] Failed to install app:', err)
installError.value = err instanceof Error ? err.message : t('marketplaceDetails.installFailed')
if (import.meta.env.DEV) console.error('[MarketplaceAppDetails] Failed to install app:', err)
} finally {
installing.value = false
}