No description
Find a file
padreug c8860dc937 feat: extract and consolidate common UI patterns across market module
## Component Extraction
  - Create MarketSearchBar component with dual-mode support (enhanced/simple)
    - Enhanced mode: suggestions, keyboard shortcuts, category filters
    - Simple mode: basic search functionality
    - Dynamic imports for performance optimization
  - Extract LoadingErrorState component for consistent loading/error handling
    - Configurable compact/full modes with custom messages
    - Built-in retry functionality
    - Standardized spinner and error displays
  - Consolidate CartButton component (already extracted in previous commit)

  ## UI Standardization
  - Replace inline category badges in StallView with CategoryFilterBar component
  - Add missing state management for category filtering (filterMode, setFilterMode)
  - Ensure consistent filtering UI between MarketPage and StallView
  - Standardize loading states across MarketPage, ProductGrid, and MerchantStore

  ## Code Organization
  - MarketPage: Uses enhanced MarketSearchBar with full feature set
  - StallView: Uses simple MarketSearchBar for cleaner stall-specific search
  - Both views now share CategoryFilterBar, CartButton, and ProductGrid
  - LoadingErrorState provides unified loading/error UX patterns

  ## Technical Improvements
  - Eliminate code duplication following DRY principles
  - Improve maintainability with single source of truth for UI patterns
  - Optimize performance with conditional feature loading
  - Enhance accessibility with consistent keyboard shortcuts and ARIA labels
  - Ensure mobile-responsive designs with unified behavior

  BREAKING CHANGE: MarketFuzzySearch component replaced by MarketSearchBar
2025-09-27 09:45:33 +02:00
.vscode initial post-installation commit 2025-01-30 13:26:56 +01:00
docs Enhance README and wallet module documentation with new payment features 2025-09-20 10:31:12 +02:00
electron chore: Set up Electron configuration and update dependencies 2025-03-20 17:26:15 +01:00
public Update index.html and vite.config.ts for dynamic app name and manifest adjustments 2025-09-06 19:16:24 +02:00
src feat: extract and consolidate common UI patterns across market module 2025-09-27 09:45:33 +02:00
.cursorrules update cursor rules to follow semantic/theme aware color patterns 2025-08-14 15:19:13 +02:00
.env.example update .env.example 2025-08-10 10:49:49 +02:00
.gitignore add .obsidian 2025-09-14 17:16:52 +02:00
CLAUDE.md Add Vue Reactivity Best Practices section to CLAUDE.md 2025-09-18 23:01:01 +02:00
components.json update shadcn/tailwind config 2025-03-09 15:40:32 +01:00
forge.config.js chore: Set up Electron configuration and update dependencies 2025-03-20 17:26:15 +01:00
index.html Update index.html and vite.config.ts for dynamic app name and manifest adjustments 2025-09-06 19:16:24 +02:00
nginx.conf.example add nginx.conf example 2025-07-12 19:06:09 +02:00
package-lock.json Add QR code scanning functionality with new QRScanner component 2025-09-20 10:31:12 +02:00
package.json Add QR code scanning functionality with new QRScanner component 2025-09-20 10:31:12 +02:00
README.md Enhance README and wallet module documentation with new payment features 2025-09-20 10:31:12 +02:00
tailwind.config.js refactor: Update color definitions in Tailwind configuration to use oklch color space 2025-08-03 11:20:57 +02:00
test-formatting.html feat: Enhance RelayHub component with subscription count details (still not working) 2025-08-10 18:19:18 +02:00
tsconfig.app.json update shadcn/tailwind config 2025-03-09 15:40:32 +01:00
tsconfig.json initial post-installation commit 2025-01-30 13:26:56 +01:00
tsconfig.node.json initial post-installation commit 2025-01-30 13:26:56 +01:00
vite.config.ts Update index.html and vite.config.ts for dynamic app name and manifest adjustments 2025-09-06 19:16:24 +02:00

Ario Web App

A modular Vue 3 + TypeScript application with Nostr protocol integration and Lightning Network wallet functionality.

Features

  • Modular Architecture: Plugin-based system with dependency injection
  • Nostr Integration: Decentralized social networking and messaging
  • Lightning Wallet: Real-time balance updates with LNbits WebSocket integration
  • Event Ticketing: Lightning-powered event tickets and marketplace
  • PWA Support: Progressive Web App with offline capabilities
  • Desktop App: Electron-based desktop application

Real-Time Wallet Features

The application provides seamless Lightning Network wallet integration:

  • Lightning Invoice Creation: Create BOLT11 invoices for receiving payments with QR codes
  • Smart Payment Scanning: QR code scanner for Lightning invoices, LNURL, and Lightning addresses
  • Universal Payment Support: Send to Lightning invoices, Lightning addresses (user@domain.com), and LNURL
  • Smart Amount Fields: Amount input only appears when needed (LNURL, Lightning addresses, or zero-amount invoices)
  • Instant Balance Updates: WebSocket connection provides real-time balance updates when payments are sent or received
  • Live Notifications: Toast notifications for incoming payments
  • Connection Management: Automatic reconnection with exponential backoff
  • Battery Optimization: Pauses WebSocket when app is not visible to save battery
  • Multi-Wallet Support: Manages multiple Lightning wallets with the first wallet as default

WebSocket Configuration

Configure WebSocket behavior in src/app.config.ts:

modules: {
  wallet: {
    enabled: true,
    config: {
      websocket: {
        enabled: true,           // Enable/disable real-time updates
        reconnectDelay: 1000,    // Initial reconnection delay (ms)
        maxReconnectAttempts: 5  // Maximum reconnection attempts
      }
    }
  }
}

Development

# Install dependencies
npm install

# Start development server with hot reload
npm run dev

# Build for production
npm run build

# Run Electron desktop app
npm run electron:dev

Environment Setup

Required environment variables:

# LNbits server URL for Lightning wallet functionality
VITE_LNBITS_BASE_URL=http://localhost:5000

# Nostr relay configuration (JSON array)
VITE_NOSTR_RELAYS='["wss://relay1.example.com","wss://relay2.example.com"]'

Architecture

The application follows a modular architecture with the following core modules:

  • Base Module: Authentication, Nostr client, PWA functionality
  • Wallet Module: Lightning payments, WebSocket balance updates, transaction management
  • Events Module: Event ticketing with Lightning payment integration
  • Market Module: Nostr marketplace functionality
  • Chat Module: Encrypted messaging via Nostr

For detailed development guidelines, see CLAUDE.md.