refactor: split Marketplace, Server, Home, AppDetails views; minor frontend quality fixes

- F29-F32: Split 4 views (Marketplace 1293→505, Server 1132→486, Home 1059→394, AppDetails 1036→386)
- F20: Add aria-current="page" to Dashboard nav links
- F21: Add 150ms search debounce in Marketplace and Apps views
- F22: Reduce backdrop-filter blur to 8px on mobile for GPU performance
- F23: Track and clear WebSocket connect check interval in all paths

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Dorian
2026-03-21 03:01:38 +00:00
parent ea1b1f826b
commit bfbaa36709
20 changed files with 2713 additions and 3206 deletions

View File

@@ -29,6 +29,7 @@ export class WebSocketClient {
private _state: ConnectionState = 'disconnected'
private isReconnecting = false
private parseErrorCount = 0
private connectCheckInterval: ReturnType<typeof setInterval> | null = null
constructor(url: string = '/ws/db') {
this.url = url
@@ -81,25 +82,26 @@ export class WebSocketClient {
// If connecting, wait for it
if (this.ws && this.ws.readyState === WebSocket.CONNECTING) {
if (import.meta.env.DEV) console.log('[WebSocket] Already connecting, waiting...')
const checkInterval = setInterval(() => {
this.clearConnectCheck()
this.connectCheckInterval = setInterval(() => {
if (this.ws) {
if (this.ws.readyState === WebSocket.OPEN) {
clearInterval(checkInterval)
this.clearConnectCheck()
resolve()
} else if (this.ws.readyState === WebSocket.CLOSED || this.ws.readyState === WebSocket.CLOSING) {
clearInterval(checkInterval)
this.clearConnectCheck()
// Connection failed or closing, will be handled by onclose
reject(new Error('Connection closed during connect'))
}
} else {
clearInterval(checkInterval)
this.clearConnectCheck()
reject(new Error('WebSocket was cleared'))
}
}, 100)
// Timeout after 5 seconds
setTimeout(() => {
clearInterval(checkInterval)
this.clearConnectCheck()
if (this.ws && this.ws.readyState !== WebSocket.OPEN) {
reject(new Error('Connection timeout'))
}
@@ -285,6 +287,13 @@ export class WebSocketClient {
this.connectionStateCallbacks.forEach((callback) => callback(state))
}
private clearConnectCheck(): void {
if (this.connectCheckInterval) {
clearInterval(this.connectCheckInterval)
this.connectCheckInterval = null
}
}
private startHeartbeat(): void {
this.stopHeartbeat()
@@ -334,7 +343,8 @@ export class WebSocketClient {
this.reconnectAttempts = 0
this.setConnectionState('disconnecting')
this.stopHeartbeat()
this.clearConnectCheck()
// Clear reconnect timer
if (this.reconnectTimer) {
clearTimeout(this.reconnectTimer)