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

10
src/modules/chat/components/ChatComponent.vue
View file

@ -13,7 +13,7 @@
Disconnected
</Badge>
<!-- Total unread count -->
<Badge v-if="totalUnreadCount > 0" class="bg-blue-500 text-white text-xs">
<Badge v-if="totalUnreadCount > 0" variant="secondary" class="text-xs">
{{ totalUnreadCount }} unread
</Badge>
</div>
@ -91,7 +91,7 @@
</div>
<!-- Unread message indicator -->
<div v-if="getUnreadCount(peer.pubkey) > 0" class="flex-shrink-0">
<Badge class="bg-blue-500 text-white h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
<Badge variant="default" class="h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
{{ getUnreadCount(peer.pubkey) > 99 ? '99+' : getUnreadCount(peer.pubkey) }}
</Badge>
</div>
@ -133,7 +133,7 @@
Disconnected
</Badge>
<!-- Unread count for current peer -->
<Badge v-if="selectedPeer && getUnreadCount(selectedPeer.pubkey) > 0" class="bg-blue-500 text-white text-xs">
<Badge v-if="selectedPeer && getUnreadCount(selectedPeer.pubkey) > 0" variant="secondary" class="text-xs">
{{ getUnreadCount(selectedPeer.pubkey) }} unread
</Badge>
</div>
@ -198,7 +198,7 @@
Disconnected
</Badge>
<!-- Total unread count -->
<Badge v-if="totalUnreadCount > 0" class="bg-blue-500 text-white text-xs">
<Badge v-if="totalUnreadCount > 0" variant="secondary" class="text-xs">
{{ totalUnreadCount }} unread
</Badge>
</div>
@ -278,7 +278,7 @@
</div>
<!-- Unread message indicator -->
<div v-if="getUnreadCount(peer.pubkey) > 0" class="flex-shrink-0">
<Badge class="bg-blue-500 text-white h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
<Badge variant="default" class="h-6 w-6 rounded-full p-0 flex items-center justify-center text-xs font-bold">
{{ getUnreadCount(peer.pubkey) > 99 ? '99+' : getUnreadCount(peer.pubkey) }}
</Badge>
</div>

50
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>
<div class="h-[calc(100vh-3.5rem)] lg:h-[calc(100vh-4rem)] xl:h-[calc(100vh-5rem)] w-full">
<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>
</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>