padreug/web-app
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Refactor ChatComponent and ChatPage for improved readability and maintainability

Browse source 
- Update Badge components in ChatComponent.vue to use new variant props for better styling consistency.
- Simplify ChatPage.vue by removing debug information and authentication checks, directly rendering ChatComponent for a cleaner layout.
This commit is contained in:
padreug 2025-09-05 00:37:06 +02:00
parent 284636dd55
commit 90ef85f4e8
2 changed files with 7 additions and 55 deletions
Download patch file Download diff file Expand all files Collapse all files

52
src/modules/chat/views/ChatPage.vue
View file

@ -1,57 +1,9 @@
<template>
<div class="h-full w-full p-8">
<div class="text-center">
<h1 class="text-2xl font-bold mb-4">Chat Module</h1>
<p class="text-muted-foreground mb-4">Status: {{ debugInfo.status }}</p>
<div v-if="!debugInfo.isAuthenticated" class="bg-yellow-100 border border-yellow-400 text-yellow-700 px-4 py-3 rounded mb-4">
<p><strong>Authentication Required:</strong> Please log in to use chat</p>
</div>
<div v-else-if="!debugInfo.hasNostrKeys" class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded mb-4">
<p><strong>Nostr Keys Missing:</strong> Your account needs Nostr keys configured</p>
<p class="text-sm mt-2">Key status: {{ debugInfo.keyStatus.message }}</p>
</div>
<div v-else-if="!debugInfo.isConnected" class="bg-blue-100 border border-blue-400 text-blue-700 px-4 py-3 rounded mb-4">
<p><strong>Connecting to Nostr relays...</strong></p>
</div>
<div v-else class="bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded mb-4">
<p><strong>Ready!</strong> Chat should work now</p>
<ChatComponent />
</div>
<details class="mt-8 text-left">
<summary class="cursor-pointer font-semibold">Debug Info</summary>
<pre class="mt-4 p-4 bg-gray-100 rounded text-xs overflow-auto">{{ JSON.stringify(debugInfo, null, 2) }}</pre>
</details>
</div>
<div class="h-[calc(100vh-3.5rem)] lg:h-[calc(100vh-4rem)] xl:h-[calc(100vh-5rem)] w-full">
<ChatComponent />
</div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import ChatComponent from '../components/ChatComponent.vue'
import { nostrChat } from '@/composables/useNostrChat'
import { useAuth } from '@/composables/useAuth'
const auth = useAuth()
const debugInfo = computed(() => {
const keyStatus = nostrChat.getNostrKeyStatus()
return {
status: nostrChat.isConnected.value ? 'Connected' : 'Disconnected',
isAuthenticated: auth.isAuthenticated.value,
hasNostrKeys: nostrChat.hasNostrKeys.value,
isConnected: nostrChat.isConnected.value,
keyStatus,
peerCount: nostrChat.peers.value.length,
totalUnread: nostrChat.totalUnreadCount.value,
currentUser: nostrChat.currentUser.value?.pubkey ? {
pubkey: nostrChat.currentUser.value.pubkey.slice(0, 16) + '...'
} : null
}
})
</script>