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

Update UI styles and enhance controller navigation functionality

Browse Source 
- Replaced cyan color with yellow in various UI components for a cohesive visual theme.
- Improved focus styles for controller navigation, adding subtle grow and glow effects to sidebar items and containers.
- Enhanced controller navigation logic to support direct focus on app containers in the Marketplace and My Apps sections.
- Introduced wheel scrolling support for better navigation experience within scrollable areas.
- Removed unused audio tone function from useLoginSounds.ts to streamline code.
This commit is contained in:
Dorian
2026-02-17 20:40:26 +00:00
parent c72b97e940
commit 5a04875dcc
12 changed files with 109 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
neode-ui/src/views/Apps.vue
+2
View File
@@ -27,6 +27,8 @@
<div
v-for="[id, pkg] in sortedPackageEntries"
:key="id"
data-controller-container
tabindex="0"
class="glass-card p-6 transition-all hover:-translate-y-1 cursor-pointer relative min-w-0 overflow-hidden"
@click="goToApp(id as string)"
>
neode-ui/src/views/Cloud.vue
+2
View File
@@ -23,6 +23,8 @@
<div
v-for="folder in folders"
:key="folder.id"
data-controller-container
tabindex="0"
class="glass-card p-6 cursor-pointer transition-all hover:-translate-y-1 hover:bg-white/10"
@click="openFolder(folder.id)"
>
neode-ui/src/views/ContainerApps.vue
+4
View File
@@ -26,6 +26,8 @@
<div
v-for="app in bundledApps"
:key="app.id"
data-controller-container
tabindex="0"
class="glass-card p-6 hover:bg-white/5 transition-colors"
>
<div class="flex items-start justify-between mb-4">
@@ -148,6 +150,8 @@
<div
v-for="container in otherContainers"
:key="container.id"
data-controller-container
tabindex="0"
class="glass-card p-6 hover:bg-white/5 transition-colors"
>
<div class="flex items-start justify-between mb-4">
neode-ui/src/views/Home.vue
+1 -1
View File
@@ -355,7 +355,7 @@ const runningCount = computed(() =>
display: inline-block;
width: 3px;
height: 1.1em;
background: #00ffff;
background: #fbbf24;
margin-left: 2px;
vertical-align: text-bottom;
animation: caret-blink 0.7s step-end infinite;
neode-ui/src/views/Marketplace.vue
+4
View File
@@ -134,6 +134,9 @@
<div
v-for="app in filteredApps"
:key="app.id"
data-controller-container
:data-controller-install="!(isInstalled(app.id) || installingApps.has(app.id)) && (app.source === 'local' || !!app.dockerImage) ? '1' : undefined"
tabindex="0"
class="glass-card p-6 hover:bg-white/10 transition-all cursor-pointer flex flex-col"
@click="viewAppDetails(app)"
>
@@ -171,6 +174,7 @@
</button>
<button
v-else-if="app.source === 'local' || app.dockerImage"
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"
neode-ui/src/views/Server.vue
+6 -6
View File
@@ -10,7 +10,7 @@
<div class="glass-card p-6 mb-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
<!-- Service Status -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="servicesRunning ? 'bg-green-400' : 'bg-red-400'"></div>
@@ -31,7 +31,7 @@
</div>
<!-- Connectivity Status -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="connectivityStatus === 'connected' ? 'bg-green-400' : connectivityStatus === 'checking' ? 'bg-yellow-400' : 'bg-red-400'"></div>
@@ -52,7 +52,7 @@
</div>
<!-- Auto-Sync Toggle -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<svg class="w-5 h-5 text-white/60 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
@@ -75,7 +75,7 @@
</div>
<!-- Logs & Diagnostics -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<svg class="w-5 h-5 text-white/60 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 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" />
@@ -98,7 +98,7 @@
<!-- Overview Cards -->
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6 mb-8">
<!-- Local Network Card -->
<div class="glass-card p-6 flex flex-col h-full min-h-0">
<div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
<div class="flex items-start gap-4 mb-4 shrink-0">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -159,7 +159,7 @@
</div>
<!-- Web3 Card -->
<div class="glass-card p-6 flex flex-col h-full min-h-0">
<div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
<div class="flex items-start gap-4 mb-4 shrink-0">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
neode-ui/src/views/Web5.vue
+9 -9
View File
@@ -10,7 +10,7 @@
<div class="glass-card p-6 mb-6">
<div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
<!-- Networking Profits -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<span class="text-2xl text-orange-500 font-bold">₿</span>
@@ -23,7 +23,7 @@
</div>
<!-- DID Status -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="didStatus === 'active' ? 'bg-green-400' : 'bg-yellow-400'"></div>
@@ -44,7 +44,7 @@
</div>
<!-- Wallet Connection -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="walletConnected ? 'bg-green-400' : 'bg-red-400'"></div>
@@ -65,7 +65,7 @@
</div>
<!-- Nostr Relay Status -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="nostrRelaysConnected > 0 ? 'bg-green-400' : 'bg-red-400'"></div>
@@ -85,7 +85,7 @@
</div>
<!-- Connected Nodes -->
<div class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div data-controller-container tabindex="0" class="flex flex-col gap-3 p-4 bg-white/5 rounded-lg min-w-0">
<div class="flex items-center gap-3 min-w-0">
<div class="relative shrink-0">
<div class="w-3 h-3 rounded-full" :class="connectedNodesCount > 0 ? 'bg-green-400' : 'bg-amber-400'"></div>
@@ -159,7 +159,7 @@
<!-- Core Services Overview Cards -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-8">
<!-- Bitcoin Domain Name Portfolio -->
<div class="glass-card p-6 flex flex-col h-full min-h-0">
<div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
<div class="flex items-start gap-4 mb-4 shrink-0">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -210,7 +210,7 @@
</div>
<!-- Web5 Wallet -->
<div class="glass-card p-6 flex flex-col h-full min-h-0">
<div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
<div class="flex items-start gap-4 mb-4 shrink-0">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -259,7 +259,7 @@
</div>
<!-- Nostr Relays -->
<div class="glass-card p-6 flex flex-col h-full min-h-0">
<div data-controller-container tabindex="0" class="glass-card p-6 flex flex-col h-full min-h-0">
<div class="flex items-start gap-4 mb-4 shrink-0">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -310,7 +310,7 @@
</div>
<!-- Connected Nodes (P2P over Tor) -->
<div ref="nodesContainerRef" class="glass-card p-6 lg:col-span-3 scroll-mt-24">
<div ref="nodesContainerRef" data-controller-container tabindex="0" class="glass-card p-6 lg:col-span-3 scroll-mt-24">
<div class="flex items-start gap-4 mb-4">
<div class="flex-shrink-0 w-12 h-12 rounded-lg bg-white/10 flex items-center justify-center">
<svg class="w-6 h-6 text-white/80" fill="none" stroke="currentColor" viewBox="0 0 24 24">