notedeck

One damus client to rule them all
git clone git://jb55.com/notedeck
Log | Files | Refs | README | LICENSE

README.md (3204B)

      1 # NoteDeck UI
      2 
      3 UI component library for NoteDeck - a Nostr client built with EGUI.
      4 
      5 ## Overview
      6 
      7 The `notedeck_ui` crate provides a set of reusable UI components for building a Nostr client. It offers consistent styling, behavior, and rendering of Nostr-specific elements like notes, profiles, mentions, and media content.
      8 
      9 This library is built on top of [egui](https://github.com/emilk/egui), a simple, fast, and highly portable immediate mode GUI library for Rust.
     10 
     11 ## Features
     12 
     13 - 📝 Note display with rich content, media, and interactions
     14 - 👤 Profile components (display name, pictures, banners)
     15 - 🔗 Mention system with hover previews
     16 - 🖼️ Image handling with caching and lazy loading
     17 - 📺 GIF playback support
     18 - 💸 Zap interactions (Bitcoin Lightning tips)
     19 - 🎨 Theming and consistent styling
     20 
     21 ## Components
     22 
     23 ### Notes
     24 
     25 The `NoteView` widget is the core component for displaying Nostr notes:
     26 
     27 ```rust
     28 // Example: Render a note
     29 let mut note_view = NoteView::new(
     30     note_context,
     31     current_account,
     32     &note, 
     33     NoteOptions::default()
     34 );
     35 
     36 ui.add(&mut note_view);
     37 ```
     38 
     39 `NoteView` supports various display options:
     40 
     41 ```rust
     42 // Create a preview style note
     43 note_view
     44     .preview_style()       // Apply preview styling
     45     .textmode(true)        // Use text-only mode
     46     .actionbar(false)      // Hide action bar
     47     .small_pfp(true)       // Use small profile picture
     48     .note_previews(false)  // Disable nested note previews
     49     .show(ui);
     50 ```
     51 
     52 ### Profiles
     53 
     54 Profile components include profile pictures, banners, and display names:
     55 
     56 ```rust
     57 // Display a profile picture
     58 ui.add(ProfilePic::new(images_cache, profile_picture_url).size(48.0));
     59 
     60 // Display a profile preview
     61 ui.add(ProfilePreview::new(profile_record, images_cache));
     62 ```
     63 
     64 ### Mentions
     65 
     66 The mention component links to user profiles:
     67 
     68 ```rust
     69 // Display a mention with hover preview
     70 let mention_response = Mention::new(ndb, img_cache, txn, pubkey)
     71     .size(16.0)            // Set text size
     72     .selectable(true)      // Allow selection
     73     .show(ui);
     74 
     75 // Handle click actions
     76 if let Some(action) = mention_response.inner {
     77     // Handle profile navigation
     78 }
     79 ```
     80 
     81 ### Media
     82 
     83 Support for images, GIFs, and other media types:
     84 
     85 ```rust
     86 // Render an image
     87 render_images(
     88     ui,
     89     img_cache,
     90     image_url,
     91     ImageType::Content,
     92     cache_type,
     93     on_loading_callback,
     94     on_error_callback,
     95     on_success_callback
     96 );
     97 ```
     98 
     99 ## Styling
    100 
    101 The UI components adapt to the current theme (light/dark mode) and use consistent styling defined in the `colors.rs` module:
    102 
    103 ```rust
    104 // Color constants
    105 pub const ALMOST_WHITE: Color32 = Color32::from_rgb(0xFA, 0xFA, 0xFA);
    106 pub const MID_GRAY: Color32 = Color32::from_rgb(0xbd, 0xbd, 0xbd);
    107 pub const PINK: Color32 = Color32::from_rgb(0xE4, 0x5A, 0xC9);
    108 pub const TEAL: Color32 = Color32::from_rgb(0x77, 0xDC, 0xE1);
    109 ```
    110 
    111 ## Dependencies
    112 
    113 This crate depends on:
    114 - `egui` - Core UI library
    115 - `egui_extras` - Additional widgets and functionality
    116 - `ehttp` - HTTP client for fetching content
    117 - `nostrdb` - Nostr database and types
    118 - `enostr` - Nostr protocol implementation
    119 - `image` - Image processing library
    120 - `poll-promise` - Async promise handling
    121 - `tokio` - Async runtime