Example App - aguspe/turbo_desktop GitHub Wiki

Example App — Task Manager

The turbo_desktop_example_app is a complete Rails Task Manager that demonstrates all the key Turbo Desktop features.

Features Demonstrated

Feature How It's Used
Turbo Drive All navigation happens through Turbo Drive in the native window
Modal windows New/edit task forms open in native modal overlays
Native notifications Completing a task triggers an OS notification
Desktop detection Different UI for desktop vs web browser users
Bridge components Notification bridge connects web buttons to native alerts
Path configuration JSON rules route /new$ and /edit$ URLs to modals

App Structure

Dashboard

The dashboard shows task statistics and recent tasks. It includes desktop-only and web-only banners that demonstrate the turbo_desktop_only and turbo_web_only helpers:

<%%= turbo_desktop_only do %>
  <div class="desktop-features-banner">
    <h3>Desktop Features Active</h3>
    <p>Native notifications, modal windows, and keyboard shortcuts are available.</p>
  </div>
<%% end %>

<%%= turbo_web_only do %>
  <div class="web-banner">
    <h3>Try the Desktop App</h3>
    <p>Get native notifications, modal windows, and more!</p>
  </div>
<%% end %>

Task List

The task list page shows all tasks with status indicators, priority badges, and action buttons. The "New Task" button links to /tasks/new, which the path configuration routes to a modal window.

The "Complete" button uses bridge data attributes to trigger a native notification:

<%%= button_to "Complete", task_path(task),
      method: :patch,
      params: { task: { completed: true } },
      data: {
        **turbo_desktop_bridge("notification",
          title: "Task Completed!",
          body: task.title
        )
      } %>

Modal Forms

When you click "New Task" or "Edit", the desktop shell intercepts the navigation and opens the page in a native modal window instead of navigating the main window. This is configured entirely through path configuration — no changes to your Rails views needed:

# config/initializers/turbo_desktop.rb
TurboDesktop.configure do |config|
  config.path_configuration = {
    rules: [
      { patterns: ["/"], properties: { presentation: "default" } },
      { patterns: ["/new$", "/edit$"], properties: { presentation: "modal" } },
    ]
  }
end

Running the Example

git clone https://github.com/aguspe/turbo_desktop_example_app.git
cd turbo_desktop_example_app
bundle install
rails db:create db:migrate db:seed

# Terminal 1
bin/rails server

# Terminal 2
cd desktop
npm install
cargo tauri dev

Key Files

File Purpose
config/initializers/turbo_desktop.rb Path configuration rules
config/routes.rb Routes + TurboDesktop engine mount
app/controllers/tasks_controller.rb Standard CRUD controller
app/views/tasks/index.html.erb Task list with bridge components
app/views/tasks/new.html.erb Form that opens in a modal
app/views/layouts/application.html.erb Layout with desktop detection
app/javascript/controllers/notification_controller.js Notification bridge
desktop/turbo-desktop.config.json Desktop shell configuration
⚠️ **GitHub.com Fallback** ⚠️