lfg2025/archy
1
0
Fork 0
Code Issues 7 Pull Requests Actions Packages Projects Releases 33 Wiki Activity

Enhance user interaction and audio feedback in CLI and login components

Browse Source 
- Updated keydown event handling in App.vue to improve keyboard navigation.
- Enhanced AppSwitcher.vue with a status indicator for online presence.
- Integrated new sci-fi typing sound effect in useLoginSounds.ts for a more engaging user experience during login.
- Modified login handling functions in Login.vue to include sound feedback on setup and login actions.
- Added CLI store integration to play navigation sounds when opening and closing the CLI.
This commit is contained in:
Dorian
2026-02-18 10:35:04 +00:00
parent 59210a7927
commit c9f6e6b8ae
8 changed files with 101 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
neode-ui/src/views/Home.vue
View File

@@ -1,28 +1,14 @@
<template>
<div>
<div class="mb-8 flex items-start justify-between">
<div>
<div class="min-h-[4.5rem]">
<h1 class="text-3xl font-bold text-white mb-2 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]">
{{ line1Text }}<span v-if="showCaretLine1" class="typing-caret"></span>
</h1>
<p class="text-white/80">
{{ line2Text }}<span v-if="showCaretLine2" class="typing-caret"></span>
</p>
</div>
<div class="mb-8">
<div class="min-h-[4.5rem]">
<h1 class="text-3xl font-bold text-white mb-2 drop-shadow-[0_2px_8px_rgba(0,0,0,0.6)]">
{{ line1Text }}<span v-if="showCaretLine1" class="typing-caret"></span>
</h1>
<p class="text-white/80">
{{ line2Text }}<span v-if="showCaretLine2" class="typing-caret"></span>
</p>
</div>
<!-- Compact Status Indicator - click to trigger screensaver (dev) -->
<button
type="button"
class="flex items-center gap-2 px-4 py-2 glass-card rounded-lg cursor-pointer hover:bg-white/5 transition-colors"
@click="screensaverStore.activate()"
>
<div class="relative">
<div class="w-2 h-2 rounded-full bg-green-400"></div>
<div class="absolute inset-0 w-2 h-2 rounded-full bg-green-400 animate-ping opacity-75"></div>
</div>
<span class="text-sm font-medium text-white">Online</span>
</button>
</div>
<!-- Section Overviews - 2advanced staggered animation (hidden until typing starts, then animate with typing) -->
@@ -277,13 +263,11 @@
import { computed, ref, watch, onBeforeUnmount } from 'vue'
import { RouterLink } from 'vue-router'
import { useAppStore } from '../stores/app'
import { useScreensaverStore } from '../stores/screensaver'
import { useLoginTransitionStore } from '../stores/loginTransition'
import { PackageState } from '../types/api'
import { playTypingSound } from '@/composables/useLoginSounds'
const store = useAppStore()
const screensaverStore = useScreensaverStore()
const loginTransition = useLoginTransitionStore()
const LINE1 = "Welcome Noderunner"