feat: Integrate chat feature into main navigation
- Add a "Chat" link to the main navigation for both desktop and mobile views. - Include a message icon for visual identification and support for multiple languages (English, Spanish, French). - Update documentation to reflect navigation integration and usage instructions for the chat feature.
This commit is contained in:
parent
0b62418310
commit
37642ca48c
6 changed files with 32 additions and 2 deletions
|
|
@ -6,6 +6,13 @@ This document describes the Nostr chat integration that allows LNBits users to c
|
|||
|
||||
The chat system integrates with the LNBits user system and Nostr relays to provide encrypted messaging between users. Each user has a Nostr keypair (stored in `pubkey` and `prvkey` fields) that enables secure communication.
|
||||
|
||||
## Navigation Integration
|
||||
|
||||
The chat feature is accessible through the main navigation menu:
|
||||
- **Desktop**: Chat link appears in the top navigation bar with a message icon
|
||||
- **Mobile**: Chat link appears in the mobile menu with a message icon
|
||||
- **Route**: `/chat` - Accessible to authenticated users only
|
||||
|
||||
## Components
|
||||
|
||||
### 1. ChatComponent.vue
|
||||
|
|
@ -31,6 +38,14 @@ A composable that handles:
|
|||
|
||||
A page that integrates the chat component into the web-app.
|
||||
|
||||
### 4. Navigation Integration
|
||||
**Location**: `src/components/layout/Navbar.vue`
|
||||
|
||||
The chat link has been added to the main navigation with:
|
||||
- Message icon for visual identification
|
||||
- Internationalization support (English, Spanish, French)
|
||||
- Responsive design for desktop and mobile
|
||||
|
||||
## API Endpoints
|
||||
|
||||
### Get Current User
|
||||
|
|
@ -84,6 +99,12 @@ Response:
|
|||
- Message timestamps
|
||||
- Auto-scroll to latest messages
|
||||
|
||||
### 4. Navigation Features
|
||||
- Integrated into main navigation menu
|
||||
- Message icon for easy identification
|
||||
- Multi-language support
|
||||
- Responsive design for all devices
|
||||
|
||||
## Security
|
||||
|
||||
1. **Encryption**: All messages are encrypted using NIP-04 (Nostr encrypted direct messages)
|
||||
|
|
@ -100,7 +121,7 @@ Response:
|
|||
|
||||
## Usage
|
||||
|
||||
1. Navigate to `/chat` in the web-app
|
||||
1. Navigate to `/chat` in the web-app (or click "Chat" in the navigation)
|
||||
2. The system will automatically load peers from LNBits
|
||||
3. Select a peer to start chatting
|
||||
4. Messages are encrypted and sent via Nostr relays
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ import { useTheme } from '@/components/theme-provider'
|
|||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'
|
||||
import { Sun, Moon, Menu, X, User, LogOut, Ticket, Wallet } from 'lucide-vue-next'
|
||||
import { Sun, Moon, Menu, X, User, LogOut, Ticket, Wallet, MessageSquare } from 'lucide-vue-next'
|
||||
import LanguageSwitcher from '@/components/LanguageSwitcher.vue'
|
||||
import LoginDialog from '@/components/auth/LoginDialog.vue'
|
||||
import ProfileDialog from '@/components/auth/ProfileDialog.vue'
|
||||
|
|
@ -31,6 +31,7 @@ const navigation = computed<NavigationItem[]>(() => [
|
|||
{ name: t('nav.home'), href: '/' },
|
||||
{ name: t('nav.events'), href: '/events' },
|
||||
{ name: t('nav.market'), href: '/market' },
|
||||
{ name: t('nav.chat'), href: '/chat' },
|
||||
])
|
||||
|
||||
// Compute total wallet balance
|
||||
|
|
@ -90,6 +91,8 @@ const handleLogout = async () => {
|
|||
:class="{
|
||||
'text-foreground': $route.path === item.href
|
||||
}">
|
||||
<!-- Chat icon -->
|
||||
<MessageSquare v-if="item.href === '/chat'" class="h-4 w-4" />
|
||||
{{ item.name }}
|
||||
<!-- Market preloading indicator -->
|
||||
<div v-if="item.href === '/market' && marketPreloader.isPreloading"
|
||||
|
|
@ -227,6 +230,8 @@ const handleLogout = async () => {
|
|||
:class="{
|
||||
'text-foreground': $route.path === item.href
|
||||
}" @click="isOpen = false">
|
||||
<!-- Chat icon -->
|
||||
<MessageSquare v-if="item.href === '/chat'" class="h-4 w-4" />
|
||||
{{ item.name }}
|
||||
<!-- Market preloading indicator -->
|
||||
<div v-if="item.href === '/market' && marketPreloader.isPreloading"
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const messages: LocaleMessages = {
|
|||
faq: 'FAQ',
|
||||
events: 'Events',
|
||||
market: 'Market',
|
||||
chat: 'Chat',
|
||||
login: 'Login',
|
||||
logout: 'Logout'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const messages: LocaleMessages = {
|
|||
faq: 'Preguntas Frecuentes',
|
||||
events: 'Eventos',
|
||||
market: 'Mercado',
|
||||
chat: 'Chat',
|
||||
login: 'Iniciar Sesión',
|
||||
logout: 'Cerrar Sesión'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,6 +8,7 @@ const messages: LocaleMessages = {
|
|||
faq: 'FAQ',
|
||||
events: 'Événements',
|
||||
market: 'Marché',
|
||||
chat: 'Chat',
|
||||
login: 'Connexion',
|
||||
logout: 'Déconnexion'
|
||||
},
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ export interface LocaleMessages {
|
|||
faq: string
|
||||
events: string
|
||||
market: string
|
||||
chat: string
|
||||
login: string
|
||||
logout: string
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue