turbovault-app/app/views/collections/index.html.erb

<div>
  <div class="flex justify-between items-center mb-6">
    <h1 class="text-3xl font-bold">My Collections</h1>
    <%= link_to "New Collection", new_collection_path, class: "px-4 py-2 bg-indigo-600 text-white rounded hover:bg-indigo-700" %>
  </div>
  
  <% if @root_collections.any? %>
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
      <% @root_collections.each do |collection| %>
        <div class="bg-white p-6 rounded-lg shadow">
          <h2 class="text-xl font-bold mb-2">
            <%= link_to collection.name, collection, class: "text-indigo-600 hover:text-indigo-800" %>
          </h2>
          
          <% if collection.description.present? %>
            <p class="text-gray-600 mb-4"><%= truncate(collection.description, length: 100) %></p>
          <% end %>
          
          <div class="text-sm text-gray-500 mb-4">
            <%= pluralize(collection.game_count, "game") %>
          </div>
          
          <% if collection.subcollections.any? %>
            <div class="mb-4">
              <p class="text-sm font-medium text-gray-700 mb-2">Subcollections:</p>
              <div class="space-y-1">
                <% collection.subcollections.each do |subcollection| %>
                  <div class="text-sm">
                    <%= link_to subcollection.name, subcollection, class: "text-indigo-600 hover:text-indigo-800" %>
                    (<%= pluralize(subcollection.game_count, "game") %>)
                  </div>
                <% end %>
              </div>
            </div>
          <% end %>
          
          <div class="flex space-x-2 mt-4">
            <%= link_to "View", collection, class: "text-indigo-600 hover:text-indigo-800 text-sm" %>
            <%= link_to "Edit", edit_collection_path(collection), class: "text-blue-600 hover:text-blue-800 text-sm" %>
            <%= button_to "Delete", collection, method: :delete, data: { turbo_confirm: "Are you sure you want to delete the collection '#{collection.name}'? Games in this collection will not be deleted." }, class: "text-red-600 hover:text-red-800 text-sm" %>
          </div>
        </div>
      <% end %>
    </div>
  <% else %>
    <div class="bg-white p-8 rounded-lg shadow text-center">
      <p class="text-gray-500 mb-4">You haven't created any collections yet.</p>
      <%= link_to "Create Your First Collection", new_collection_path, class: "text-indigo-600 hover:text-indigo-800" %>
    </div>
  <% end %>
</div>