Your App's Inbox

Learn how to build a messaging system that lets users communicate with your app through an intuitive inbox interface. This tutorial will show you how to create, manage, and display messages in your Rhyme app.

What You’ll Build

In this tutorial, you’ll create:

An inbox that displays messages
A way for users to send messages to your app
Message management features (read, delete, reply)
Real-time message updates

Prerequisites

Before starting this tutorial, you should understand:

Basic Rhyme syntax
Variables and data management
Simple UI components

Step 1: Understanding the Inbox System

Your app can have its own inbox where users send messages. This is perfect for:

Contact forms
Support requests
User feedback
In-app communication

The inbox system in Rhyme provides built-in actions to manage messages seamlessly.

Step 2: Setting Up the Basic Inbox

Let’s start by creating a simple inbox view:

start inbox-demo

# Display inbox header
.header
  .title "My App Inbox"
  .divider

# List inbox messages
list-inbox => messages
  if messages.length = 0
    .text "No messages yet" -muted
  else
    foreach messages => msg
      .inbox-message msg
    end
  end

Step 3: Creating a Message Input

Now let’s add a way for users to send messages:

# Message input form
.card
  .title "Send a Message"
  
  # Subject line
  .text-field => subject
    -label: "Subject"
    -required
  
  # Message body
  .textarea => body
    -label: "Your Message"
    -rows: 5
    -required
  
  # Send button
  .button "Send Message" => 
    if subject and body
      send-to-inbox -subject:subject -body:body
      notify "Message sent!"
      clear subject
      clear body
    else
      notify "Please fill in all fields" -error
    end

Step 4: Displaying Individual Messages

Let’s create a better message display component:

block inbox-message msg
  .card -clickable => 
    # Mark as read when clicked
    if not msg.read
      # Update read status logic here
    end
    
    # Message header
    .row
      .column
        .text msg.subject -bold
        .text msg.from -small -muted
      .column -right
        .text msg.timestamp -small
    end
    
    # Message preview
    .text msg.body -truncate:100
    
    # Action buttons
    .row -end
      .button "Reply" -text => 
        # Reply logic
      .button "Delete" -text -danger => 
        delete-inbox-message msg.id
        notify "Message deleted"

Step 5: Adding Search and Filter

Make your inbox more powerful with search:

# Search bar
.search => query
  -placeholder: "Search messages..."

# Filter buttons
.row
  .chip "All" -active:filter="all" => set filter to "all"
  .chip "Unread" -active:filter="unread" => set filter to "unread"
  .chip "Starred" -active:filter="starred" => set filter to "starred"

# Filtered message list
list-inbox => messages
  # Apply filters
  if query
    filter messages where subject contains query or body contains query
  end
  
  if filter = "unread"
    filter messages where not read
  elif filter = "starred"
    filter messages where starred
  end
  
  # Display filtered results
  foreach messages => msg
    .inbox-message msg
  end

Step 6: Real-time Updates

Keep your inbox fresh with automatic updates:

# Poll for new messages every 30 seconds
schedule every 30 seconds
  list-inbox => new-messages
  if new-messages.length > $message-count
    notify "You have new messages!"
    set $message-count to new-messages.length
  end
end

# Initial message count
list-inbox => messages
set $message-count to messages.length

Step 7: Advanced Features

Message Actions

block message-actions msg
  .row
    .icon-button !reply => 
      set $replying-to to msg
      show reply-dialog
    
    .icon-button !star => 
      toggle msg.starred
      save-inbox-update msg
    
    .icon-button !archive => 
      archive-message msg
      notify "Message archived"
    
    .icon-button !trash => 
      confirm "Delete this message?" => confirmed
        if confirmed
          delete-inbox-message msg.id
          notify "Message deleted"
        end

Reply Dialog

block reply-dialog
  .dialog
    .title "Reply to: " + $replying-to.subject
    
    .textarea => reply-body
      -label: "Your reply"
      -rows: 5
      -autofocus
    
    .row -end
      .button "Cancel" -text => 
        hide reply-dialog
        clear $replying-to
      
      .button "Send Reply" -primary => 
        send-to-inbox 
          -subject: "Re: " + $replying-to.subject
          -body: reply-body
          -replyTo: $replying-to.id
        notify "Reply sent!"
        hide reply-dialog
        clear $replying-to

Complete Example

Here’s a full inbox implementation:

start app-inbox

# State management
set $filter to "all"
set $search-query to ""

# Main inbox view
.container
  .header
    .row
      .title "Inbox"
      .spacer
      .button "Compose" -primary => show compose-dialog
    end
  
  # Search and filters
  .row
    .search => $search-query
      -placeholder: "Search messages..."
      -flex: 1
    
    .chip "All" -active:$filter="all" => set $filter to "all"
    .chip "Unread" -active:$filter="unread" => set $filter to "unread"
  end
  
  # Message list
  .divider
  
  list-inbox => messages
    # Apply search filter
    if $search-query
      filter messages where 
        subject contains $search-query or 
        body contains $search-query
    end
    
    # Apply status filter
    if $filter = "unread"
      filter messages where not read
    end
    
    # Display messages
    if messages.length = 0
      .empty-state
        .icon !inbox -size:3 -muted
        .text "No messages found" -muted
    else
      foreach messages => msg
        .message-item msg
      end
    end
  end

# Message item component
block message-item msg
  .card -hover => 
    show-message msg
    
    .row
      .column -flex:1
        .row
          .text msg.subject -bold
          if not msg.read
            .badge "New" -primary -small
          end
        end
        .text msg.from -small -muted
        .text msg.preview -small -truncate:80
      
      .column -right
        .text msg.date -small -muted
        .row
          .icon-button !star -small
          .icon-button !trash -small -danger => 
            delete-inbox-message msg.id
            notify "Message deleted"
        end
    end
  end

# Compose dialog
block compose-dialog
  .dialog -large
    .title "New Message"
    
    .text-field => subject
      -label: "Subject"
      -required
    
    .textarea => body
      -label: "Message"
      -rows: 10
      -required
    
    .row -end
      .button "Cancel" -text => hide compose-dialog
      .button "Send" -primary => 
        if subject and body
          send-to-inbox -subject:subject -body:body
          notify "Message sent successfully!"
          hide compose-dialog
        else
          notify "Please fill in all fields" -error
        end
    end
  end

Best Practices

Message Organization: Use filters and search to help users find messages quickly
Visual Feedback: Show unread indicators and use colors to highlight important messages
Confirmation: Always confirm destructive actions like delete
Auto-refresh: Keep the inbox updated without requiring manual refresh
Responsive Design: Ensure your inbox works well on all screen sizes

Next Steps

Now that you’ve built a basic inbox, try adding:

Message categories or labels
Bulk actions (select multiple messages)
Attachment support
Export messages feature
Custom notification settings

Summary

You’ve learned how to:

Set up an inbox interface
Send and receive messages
Implement search and filtering
Add real-time updates
Create a complete messaging system

The inbox system in Rhyme provides a powerful way to enable communication within your app. Use these patterns as a foundation for building more sophisticated messaging features!