diff --git a/CHAT_INTEGRATION.md b/CHAT_INTEGRATION.md index 34e1dc1..12d5e1e 100644 --- a/CHAT_INTEGRATION.md +++ b/CHAT_INTEGRATION.md @@ -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 diff --git a/src/components/layout/Navbar.vue b/src/components/layout/Navbar.vue index 91d2fd9..f16ce3d 100644 --- a/src/components/layout/Navbar.vue +++ b/src/components/layout/Navbar.vue @@ -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(() => [ { 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 }"> + + {{ item.name }}
{ :class="{ 'text-foreground': $route.path === item.href }" @click="isOpen = false"> + + {{ item.name }}