feat: complete Phase 1 foundation hardening + three-mode UI design doc
Phase 1a — Gradient Removal: - Replaced all gradient-button/gradient-card with glass-button/path-option-card - Removed banned gradient CSS classes Phase 1b — Security Hardening: - SecretsManager: AES-256-GCM encryption (core/security) - electrs_status: credentials from env vars instead of hardcoded - port_manager: RwLock proper error handling (no unwrap) - Pinned all 11 :latest manifest images to specific versions - parmanode converter: pinned inferred image versions Phase 1c — Code Quality: - Split rpc.rs (1795 lines) into 6 handler modules (auth, node, container, package, peers) - Removed sideload code (UI, store, RPC client, 3 doc files) - Fixed body background flash on logout/refresh - Replaced 30 TypeScript `any` types with proper types - Deleted HelloWorld.vue, removed TODO comments - Added set -euo pipefail to all shell scripts - Made deploy script verbose with timestamps and elapsed time Also adds: - CLAUDE.md project guide - docs/three-mode-ui-design.md — design spec for Easy/Pro/Chat UI modes - OnlineStatusPill component Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Dorian
co-authored by
Claude Opus 4.6
Claude Opus 4.6
parent
62d6c13764
commit
486fc39249
@@ -57,7 +57,7 @@
|
||||
<button
|
||||
v-if="canLaunch"
|
||||
@click="launchApp"
|
||||
class="gradient-button px-6 py-2.5 rounded-lg text-sm font-semibold flex items-center gap-2"
|
||||
class="glass-button glass-button-sm px-6 py-2.5 rounded-lg text-sm font-semibold flex items-center gap-2"
|
||||
>
|
||||
<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" />
|
||||
@@ -151,7 +151,7 @@
|
||||
<button
|
||||
v-if="canLaunch"
|
||||
@click="launchApp"
|
||||
class="gradient-button px-4 py-2.5 rounded-lg text-sm font-semibold flex items-center justify-center gap-2"
|
||||
class="glass-button glass-button-sm px-4 py-2.5 rounded-lg text-sm font-semibold flex items-center justify-center gap-2"
|
||||
>
|
||||
<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" />
|
||||
|
||||
@@ -78,7 +78,7 @@
|
||||
v-if="canLaunch(pkg)"
|
||||
data-controller-launch-btn
|
||||
@click.stop="launchApp(id as string)"
|
||||
class="flex-1 px-4 py-2 gradient-button rounded-lg text-sm font-medium"
|
||||
class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium"
|
||||
>
|
||||
Launch
|
||||
</button>
|
||||
|
||||
@@ -73,8 +73,8 @@
|
||||
:class="{ 'sidebar-animate': showZoomIn }"
|
||||
>
|
||||
<div class="sidebar-shell">
|
||||
<div class="sidebar-inner">
|
||||
<div class="sidebar-logo flex items-center gap-3 mb-8 p-6 pb-0">
|
||||
<div class="sidebar-inner flex flex-col min-h-full">
|
||||
<div class="sidebar-logo flex items-center gap-3 mb-8 p-6 pb-0 shrink-0">
|
||||
<AnimatedLogo />
|
||||
<div class="min-w-0 flex-1">
|
||||
<h2 class="text-lg font-semibold text-white truncate">{{ serverName }}</h2>
|
||||
@@ -82,7 +82,7 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<nav class="sidebar-nav space-y-2 p-6 pt-4">
|
||||
<nav class="sidebar-nav flex-1 min-h-0 space-y-2 p-6 pt-4">
|
||||
<RouterLink
|
||||
v-for="(item, idx) in desktopNavItems"
|
||||
:key="item.path"
|
||||
@@ -105,11 +105,11 @@
|
||||
</RouterLink>
|
||||
</nav>
|
||||
|
||||
<div class="sidebar-controller px-6 pb-2">
|
||||
<div class="sidebar-controller px-6 pb-2 shrink-0">
|
||||
<ControllerIndicator />
|
||||
</div>
|
||||
|
||||
<div class="sidebar-logout p-6">
|
||||
<div class="sidebar-logout p-6 shrink-0">
|
||||
<button
|
||||
@click="handleLogout"
|
||||
class="sidebar-logout-btn w-full flex items-center gap-3 px-4 py-3 rounded-lg text-white/80 hover:bg-white/10 hover:text-white transition-colors"
|
||||
@@ -120,6 +120,11 @@
|
||||
<span>Logout</span>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Online status pill - bottom of sidebar (desktop only; sidebar is hidden on mobile) -->
|
||||
<div class="px-6 pb-6 shrink-0">
|
||||
<OnlineStatusPill />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
@@ -130,9 +135,8 @@
|
||||
class="flex-1 overflow-hidden relative pb-20 md:pb-0 glass-piece z-10"
|
||||
:class="{ 'glass-throw-main': showZoomIn }"
|
||||
>
|
||||
<!-- App Switcher - top right, compact (Right arrow from sidebar goes here first) -->
|
||||
<div data-controller-main-entry class="absolute top-4 right-4 md:top-6 md:right-8 z-20">
|
||||
<AppSwitcher />
|
||||
<!-- Controller zone entry point - no switcher -->
|
||||
</div>
|
||||
|
||||
<!-- Connection Status Banner -->
|
||||
@@ -309,7 +313,7 @@ import { RouterLink, RouterView, useRouter, useRoute } from 'vue-router'
|
||||
import { useAppStore } from '../stores/app'
|
||||
import { useLoginTransitionStore } from '../stores/loginTransition'
|
||||
import AnimatedLogo from '@/components/AnimatedLogo.vue'
|
||||
import AppSwitcher from '@/components/AppSwitcher.vue'
|
||||
import OnlineStatusPill from '@/components/OnlineStatusPill.vue'
|
||||
import ControllerIndicator from '@/components/ControllerIndicator.vue'
|
||||
import { playDashboardLoadOomph } from '@/composables/useLoginSounds'
|
||||
|
||||
|
||||
@@ -79,16 +79,6 @@
|
||||
<p class="hidden md:block text-white/70">Discover and install apps for your new sovereign life</p>
|
||||
</div>
|
||||
|
||||
<!-- Sideload Button -->
|
||||
<button
|
||||
@click="showSideloadModal = true"
|
||||
class="hidden md:flex px-6 py-3 gradient-button rounded-lg font-medium items-center gap-2"
|
||||
>
|
||||
<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="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12" />
|
||||
</svg>
|
||||
Sideload
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Category Tabs + Search (Desktop only) -->
|
||||
@@ -177,7 +167,7 @@
|
||||
data-controller-install-btn
|
||||
@click.stop="app.source === 'local' ? installApp(app) : installCommunityApp(app)"
|
||||
:disabled="installingApps.has(app.id)"
|
||||
class="flex-1 px-4 py-2 gradient-button rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
class="flex-1 px-4 py-2 glass-button glass-button-sm rounded-lg text-sm font-medium disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<span v-if="installingApps.has(app.id)" class="flex items-center justify-center gap-2">
|
||||
<svg class="animate-spin h-4 w-4" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
|
||||
@@ -213,63 +203,6 @@
|
||||
</div>
|
||||
<!-- End Scrollable Apps Section -->
|
||||
|
||||
<!-- Sideload Modal -->
|
||||
<Transition name="modal">
|
||||
<div
|
||||
v-if="showSideloadModal"
|
||||
class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/60 backdrop-blur-sm"
|
||||
@click.self="closeSideloadModal()"
|
||||
>
|
||||
<div ref="sideloadModalRef" class="glass-card p-8 max-w-2xl w-full relative">
|
||||
<!-- Close Button -->
|
||||
<button
|
||||
@click="closeSideloadModal()"
|
||||
class="absolute top-4 right-4 text-white/60 hover:text-white transition-colors"
|
||||
>
|
||||
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||||
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<h2 class="text-2xl font-bold text-white mb-2">Sideload Package</h2>
|
||||
<p class="text-white/70 mb-6">Install a package from an s9pk file URL or local path</p>
|
||||
|
||||
<div class="flex flex-col gap-4">
|
||||
<input
|
||||
v-model="sideloadUrl"
|
||||
type="text"
|
||||
placeholder="https://example.com/package.s9pk or /packages/package.s9pk"
|
||||
class="w-full px-4 py-3 bg-white/10 border border-white/20 rounded-lg text-white placeholder-white/40 focus:outline-none focus:border-white/40"
|
||||
@keyup.enter="sideloadPackage"
|
||||
/>
|
||||
<button
|
||||
@click="sideloadPackage"
|
||||
:disabled="!sideloadUrl || sideloading"
|
||||
class="px-8 py-3 gradient-button rounded-lg font-medium disabled:opacity-50 flex items-center justify-center gap-2"
|
||||
>
|
||||
<svg v-if="sideloading" class="animate-spin h-5 w-5" 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>
|
||||
{{ sideloading ? 'Installing...' : 'Install Package' }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="sideloadError" class="mt-4 text-red-400 text-sm">{{ sideloadError }}</p>
|
||||
<p v-if="sideloadSuccess" class="mt-4 text-green-400 text-sm">{{ sideloadSuccess }}</p>
|
||||
|
||||
<!-- Examples -->
|
||||
<div class="mt-6 p-4 bg-white/5 rounded-lg">
|
||||
<p class="text-white/80 text-sm font-medium mb-2">Examples:</p>
|
||||
<ul class="text-white/60 text-sm space-y-1">
|
||||
<li>• <code class="text-blue-400">https://github.com/.../releases/download/v1.0.0/app.s9pk</code></li>
|
||||
<li>• <code class="text-blue-400">/packages/myapp.s9pk</code> (local file)</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
|
||||
<!-- Floating Filter Button (Mobile only) -->
|
||||
<button
|
||||
@click="showFilterModal = true"
|
||||
@@ -407,20 +340,6 @@ interface InstallProgress {
|
||||
const installingApps = ref<Map<string, InstallProgress>>(new Map())
|
||||
const maxAttempts = ref(60)
|
||||
|
||||
// Sideload modal state
|
||||
const showSideloadModal = ref(false)
|
||||
const sideloadModalRef = ref<HTMLElement | null>(null)
|
||||
const sideloadRestoreFocusRef = ref<HTMLElement | null>(null)
|
||||
function closeSideloadModal() {
|
||||
sideloadRestoreFocusRef.value?.focus?.()
|
||||
showSideloadModal.value = false
|
||||
}
|
||||
useModalKeyboard(sideloadModalRef, showSideloadModal, closeSideloadModal, { restoreFocusRef: sideloadRestoreFocusRef })
|
||||
const sideloadUrl = ref('')
|
||||
const sideloading = ref(false)
|
||||
const sideloadError = ref('')
|
||||
const sideloadSuccess = ref('')
|
||||
|
||||
// Filter modal state (for mobile)
|
||||
const showFilterModal = ref(false)
|
||||
const filterModalRef = ref<HTMLElement | null>(null)
|
||||
@@ -438,7 +357,6 @@ const communityApps = ref<any[]>([])
|
||||
const searchQuery = ref('')
|
||||
|
||||
// Available apps in marketplace
|
||||
// Note: s9pk packages disabled until sideload functionality is implemented
|
||||
// const availableApps = ref([
|
||||
// {
|
||||
// id: 'atob',
|
||||
@@ -1000,31 +918,6 @@ async function installCommunityApp(app: any) {
|
||||
}
|
||||
}
|
||||
|
||||
async function sideloadPackage() {
|
||||
if (!sideloadUrl.value || sideloading.value) return
|
||||
|
||||
sideloading.value = true
|
||||
sideloadError.value = ''
|
||||
sideloadSuccess.value = ''
|
||||
|
||||
try {
|
||||
await rpcClient.call({ method: 'package.sideload', params: { url: sideloadUrl.value } })
|
||||
|
||||
sideloadSuccess.value = 'Package installed successfully!'
|
||||
sideloadUrl.value = ''
|
||||
|
||||
trackTimeout(() => {
|
||||
showSideloadModal.value = false
|
||||
router.push('/dashboard/apps').catch(() => {})
|
||||
}, 1500)
|
||||
} catch (err: any) {
|
||||
console.error('Sideload failed:', err)
|
||||
sideloadError.value = err.message || 'Failed to install package'
|
||||
} finally {
|
||||
sideloading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function handleImageError(event: Event) {
|
||||
const img = event.target as HTMLImageElement
|
||||
img.src = '/assets/img/logo-archipelago.svg'
|
||||
|
||||
@@ -73,7 +73,7 @@
|
||||
<button
|
||||
v-if="isInstalled"
|
||||
@click="goToInstalledApp"
|
||||
class="gradient-button px-6 py-2.5 rounded-lg text-sm font-semibold flex items-center gap-2"
|
||||
class="glass-button glass-button-sm px-6 py-2.5 rounded-lg text-sm font-semibold flex items-center gap-2"
|
||||
>
|
||||
<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" />
|
||||
@@ -84,7 +84,7 @@
|
||||
v-else
|
||||
@click="installApp"
|
||||
:disabled="installing || !app.manifestUrl"
|
||||
class="gradient-button px-6 py-2.5 rounded-lg text-sm font-semibold flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
class="glass-button glass-button-sm px-6 py-2.5 rounded-lg text-sm font-semibold flex items-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
|
||||
>
|
||||
<svg v-if="installing" class="animate-spin h-4 w-4" 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>
|
||||
@@ -138,7 +138,7 @@
|
||||
<button
|
||||
v-if="isInstalled"
|
||||
@click="goToInstalledApp"
|
||||
class="gradient-button px-4 py-2.5 rounded-lg text-sm font-semibold flex items-center justify-center gap-2"
|
||||
class="glass-button glass-button-sm px-4 py-2.5 rounded-lg text-sm font-semibold flex items-center justify-center gap-2"
|
||||
>
|
||||
<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" />
|
||||
@@ -149,7 +149,7 @@
|
||||
v-else
|
||||
@click="installApp"
|
||||
:disabled="installing || !app.manifestUrl"
|
||||
class="gradient-button px-4 py-2.5 rounded-lg text-sm font-semibold flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed col-span-2"
|
||||
class="glass-button glass-button-sm px-4 py-2.5 rounded-lg text-sm font-semibold flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed col-span-2"
|
||||
>
|
||||
<svg v-if="installing" class="animate-spin h-4 w-4" 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>
|
||||
@@ -330,7 +330,7 @@ import { ref, computed, onMounted, onBeforeUnmount } from 'vue'
|
||||
import { useRouter, useRoute } from 'vue-router'
|
||||
import { useAppStore } from '../stores/app'
|
||||
import { rpcClient } from '../api/rpc-client'
|
||||
import { useMarketplaceApp } from '../composables/useMarketplaceApp'
|
||||
import { useMarketplaceApp, type MarketplaceAppInfo } from '../composables/useMarketplaceApp'
|
||||
import { useMobileBackButton } from '../composables/useMobileBackButton'
|
||||
|
||||
const { bottomPosition } = useMobileBackButton()
|
||||
@@ -340,7 +340,7 @@ const route = useRoute()
|
||||
const store = useAppStore()
|
||||
const { getCurrentApp } = useMarketplaceApp()
|
||||
|
||||
const app = ref<any>(null)
|
||||
const app = ref<MarketplaceAppInfo | null>(null)
|
||||
const installing = ref(false)
|
||||
const installError = ref<string | null>(null)
|
||||
const loading = ref(true)
|
||||
@@ -481,8 +481,8 @@ async function installApp() {
|
||||
await new Promise(resolve => setTimeout(resolve, 1000))
|
||||
|
||||
router.push(`/dashboard/apps/${appId.value}`).catch(() => {})
|
||||
} catch (err: any) {
|
||||
installError.value = err.message || 'Installation failed. Please try again.'
|
||||
} catch (err: unknown) {
|
||||
installError.value = err instanceof Error ? err.message : 'Installation failed. Please try again.'
|
||||
console.error('[MarketplaceAppDetails] Failed to install app:', err)
|
||||
} finally {
|
||||
installing.value = false
|
||||
|
||||
@@ -224,6 +224,7 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { rpcClient } from '@/api/rpc-client'
|
||||
|
||||
// Connected nodes
|
||||
const connectedNodes = ref(12)
|
||||
@@ -242,37 +243,38 @@ const autoSyncEnabled = ref(true)
|
||||
// Logs
|
||||
const logCount = ref(3)
|
||||
|
||||
function restartServices() {
|
||||
async function restartServices() {
|
||||
restarting.value = true
|
||||
servicesRunning.value = false
|
||||
// TODO: Implement restart services API call
|
||||
console.log('Restarting services...')
|
||||
try {
|
||||
await rpcClient.restartServer()
|
||||
} catch {
|
||||
if (import.meta.env.DEV) console.warn('Restart RPC unavailable, using mock')
|
||||
}
|
||||
setTimeout(() => {
|
||||
restarting.value = false
|
||||
servicesRunning.value = true
|
||||
}, 2000)
|
||||
}
|
||||
|
||||
function checkConnectivity() {
|
||||
async function checkConnectivity() {
|
||||
checkingConnectivity.value = true
|
||||
connectivityStatus.value = 'checking'
|
||||
// TODO: Implement connectivity check API call
|
||||
console.log('Checking connectivity...')
|
||||
setTimeout(() => {
|
||||
checkingConnectivity.value = false
|
||||
try {
|
||||
await rpcClient.call({ method: 'server.health', params: {} })
|
||||
connectivityStatus.value = 'connected'
|
||||
}, 2000)
|
||||
} catch {
|
||||
connectivityStatus.value = 'disconnected'
|
||||
} finally {
|
||||
checkingConnectivity.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function toggleAutoSync() {
|
||||
autoSyncEnabled.value = !autoSyncEnabled.value
|
||||
// TODO: Implement auto-sync toggle API call
|
||||
console.log('Auto-sync:', autoSyncEnabled.value ? 'enabled' : 'disabled')
|
||||
}
|
||||
|
||||
function viewLogs() {
|
||||
// TODO: Navigate to logs view or open logs modal
|
||||
console.log('Viewing logs...')
|
||||
logCount.value = 0
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user