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
@@ -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'
|
||||
|
||||
Reference in New Issue
Block a user