notebook/app/views/data/uploads.html.erb

<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
  <!-- Header with back button and title -->
  <div class="flex items-center mb-8">
    <%= link_to data_vault_path, class: 'text-gray-500 hover:text-gray-700 mr-3', title: "Back to your Data Vault" do %>
      <i class="material-icons">arrow_back</i>
    <% end %>
    <h1 class="text-3xl font-bold text-gray-700">Image Uploads</h1>
  </div>

  <!-- Introduction section explaining the page -->
  <div class="bg-white rounded-lg shadow-md mb-8 overflow-hidden">
    <div class="border-b border-gray-200 bg-gray-50 px-6 py-4">
      <h2 class="text-xl font-semibold text-gray-800">Storage Overview</h2>
    </div>
    <div class="p-6">
      <p class="text-gray-600 mb-6">
        This page shows all images you've uploaded to your notebook pages. You can view, download, or delete any image from here.
      </p>
      
      <!-- Storage usage stats -->
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
        <div class="bg-gray-50 rounded-lg p-4">
          <span class="text-gray-500 uppercase text-sm font-medium">Storage Used</span>
          <div class="text-4xl font-bold text-gray-800 mt-1">
            <%= Filesize.from("#{@used_kb}KB").pretty %>
          </div>
        </div>
        <div class="bg-gray-50 rounded-lg p-4">
          <span class="text-gray-500 uppercase text-sm font-medium">Storage Remaining</span>
          <div class="text-4xl font-bold text-gray-800 mt-1">
            <%= (current_user.upload_bandwidth_kb) > 0 ? Filesize.from("#{@remaining_kb}KB").pretty : '-' + Filesize.from("#{@remaining_kb}KB").pretty %>
          </div>
        </div>
      </div>

      <!-- Progress bar -->
      <div class="relative pt-1 mb-6">
        <div class="flex mb-2 items-center justify-between">
          <div>
            <span class="text-xs font-semibold inline-block py-1 px-2 uppercase rounded-full text-blue-600 bg-blue-200">
              Storage Usage
            </span>
          </div>
          <div class="text-right">
            <span class="text-xs font-semibold inline-block text-blue-600">
              <%= @percent_used %>%
            </span>
          </div>
        </div>
        <div class="overflow-hidden h-2 mb-4 text-xs flex rounded bg-blue-200">
          <div style="width:<%= @percent_used %>%" class="shadow-none flex flex-col text-center whitespace-nowrap text-white justify-center bg-blue-600 transition-all duration-500"></div>
        </div>
      </div>

      <!-- Premium info card -->
      <div class="bg-gradient-to-r from-blue-600 to-blue-700 text-white rounded-lg p-5 shadow-lg">
        <div class="flex items-center">
          <div class="hidden sm:block mr-4">
            <i class="material-icons text-4xl text-yellow-300">star</i>
          </div>
          <div class="flex-1">
            <h3 class="font-bold text-lg mb-1">Need more storage?</h3>
            <p class="mb-2">
              Premium users get an extra 10GB of storage space, but you can earn even more storage space by referring friends to Notebook.ai.
            </p>
            <div class="mt-3">
              <%= link_to referrals_path, class: 'inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-blue-700 bg-yellow-300 hover:bg-yellow-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-400 transition-colors' do %>
                <i class="material-icons mr-1">people</i> Refer Friends
              <% end %>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

  <!-- Image gallery section -->
  <div class="bg-white rounded-lg shadow-md mb-8 overflow-hidden">
    <div class="border-b border-gray-200 bg-gray-50 px-6 py-4 flex justify-between items-center">
      <h2 class="text-xl font-semibold text-gray-800">Your Images</h2>
      <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">
        <%= pluralize(@uploads.count, 'image') %>
      </span>
    </div>
    
    <% if @uploads.empty? %>
      <div class="p-12 text-center">
        <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-blue-100 text-blue-600 mb-4">
          <i class="material-icons text-3xl">image</i>
        </div>
        <h3 class="text-lg font-medium text-gray-900 mb-2">No images yet</h3>
        <p class="text-gray-600 max-w-md mx-auto">
          Whenever you upload any images to your notebook pages, you'll be able to view them all
          in a single place from here.
        </p>
      </div>
    <% else %>
      <div class="p-6">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-6">
          <% @uploads.each do |upload| %>
            <% next unless upload.content.present? %>
            <div class="bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300">
              <div class="relative">
                <%= image_tag upload.src(:medium), class: 'w-full h-60 object-cover', loading: 'lazy' %>
                <div class="absolute inset-0 bg-gradient-to-t from-black/70 to-transparent"></div>
                <div class="absolute bottom-0 left-0 p-4 text-white font-medium truncate max-w-[80%]">
                  <%= upload.content.name %>
                </div>
                <div class="absolute top-0 right-0 mt-3 mr-3">
                  <button class="bg-white/90 backdrop-blur-sm rounded-full p-2 shadow-md hover:bg-white transition-colors"
                          type="button"
                          title="View details"
                          onclick="document.getElementById('modal-<%= upload.id %>').classList.remove('hidden')">
                    <i class="material-icons text-gray-700">info</i>
                  </button>
                </div>
                <div class="absolute bottom-0 right-0 mb-3 mr-3">
                  <%= link_to upload.content, class: "bg-#{upload.content.class.color} rounded-full p-2 shadow-md hover:opacity-90 transition-opacity", title: "View #{upload.content.name}" do %>
                    <i class="material-icons text-white"><%= upload.content.class.icon %></i>
                  <% end %>
                </div>
              </div>
              
              <div class="p-4 border-t border-gray-200">
                <div class="flex items-center justify-between mb-2">
                  <div class="text-sm text-gray-600 truncate">
                    <i class="material-icons text-gray-400 text-xs align-middle">calendar_today</i>
                    <%= upload.created_at.strftime("%b %d, %Y") %>
                  </div>
                  <div class="text-sm font-medium text-gray-700">
                    <%= time_ago_in_words upload.created_at %> ago
                  </div>
                </div>
                <div class="flex items-center text-sm text-gray-600">
                  <i class="material-icons text-gray-400 text-xs align-middle mr-1">sd_storage</i>
                  <% if upload.src_file_size.present? %>
                    <%= Filesize.from("#{upload.src_file_size / 1000}KB").pretty %>
                  <% else %>
                    Size unknown
                  <% end %>
                </div>
              </div>
              
              <div class="flex border-t border-gray-200 divide-x divide-gray-200">
                <%= link_to upload.src(:original), class: 'flex-1 py-3 text-center text-blue-600 hover:bg-blue-50 transition-colors text-sm font-medium flex items-center justify-center', target: '_blank', title: "View original image" do %>
                  <i class="material-icons text-sm mr-1">open_in_new</i> View
                <% end %>
                <%= link_to image_deletion_path(upload.id), class: 'flex-1 py-3 text-center text-red-600 hover:bg-red-50 transition-colors text-sm font-medium flex items-center justify-center', method: 'delete', data: { confirm: "Are you sure you want to delete this image? This cannot be undone." } do %>
                  <i class="material-icons text-sm mr-1">delete</i> Delete
                <% end %>
              </div>
              
              <!-- Modal -->
              <div id="modal-<%= upload.id %>" class="fixed inset-0 z-50 overflow-auto bg-black bg-opacity-50 flex items-center justify-center hidden backdrop-blur-sm"
                   onclick="this.classList.add('hidden')">
                <div class="bg-white rounded-lg max-w-md w-full mx-4 shadow-xl" onclick="event.stopPropagation()">
                  <div class="flex justify-between items-center border-b border-gray-200 px-6 py-4">
                    <h3 class="text-lg font-medium text-gray-900">Image Details</h3>
                    <button type="button" class="text-gray-400 hover:text-gray-500"
                            onclick="document.getElementById('modal-<%= upload.id %>').classList.add('hidden')">
                      <i class="material-icons">close</i>
                    </button>
                  </div>
                  
                  <div class="px-6 py-4">
                    <div class="mb-4 border rounded-lg overflow-hidden">
                      <%= image_tag upload.src(:medium), class: 'w-full object-contain', style: 'max-height: 200px;' %>
                    </div>
                    
                    <dl class="space-y-4">
                      <div>
                        <dt class="text-xs font-medium text-gray-500 uppercase">Original filename</dt>
                        <dd class="mt-1 text-gray-900 break-all"><%= upload.src_file_name %></dd>
                      </div>
                      <div>
                        <dt class="text-xs font-medium text-gray-500 uppercase">Image type</dt>
                        <dd class="mt-1 text-gray-900"><%= upload.src_content_type %></dd>
                      </div>
                      <div>
                        <dt class="text-xs font-medium text-gray-500 uppercase">Image size</dt>
                        <dd class="mt-1 text-gray-900">
                          <% if upload.src_file_size.present? %>
                            <%= Filesize.from("#{upload.src_file_size / 1000}KB").pretty %> (<%= number_with_delimiter(upload.src_file_size) %> bytes)
                          <% else %>
                            Size unknown
                          <% end %>
                        </dd>
                      </div>
                      <div>
                        <dt class="text-xs font-medium text-gray-500 uppercase">Uploaded</dt>
                        <dd class="mt-1 text-gray-900"><%= upload.created_at.strftime("%B %d, %Y at %I:%M %p") %> (<%= time_ago_in_words upload.created_at %> ago)</dd>
                      </div>
                      <div>
                        <dt class="text-xs font-medium text-gray-500 uppercase">Attached to</dt>
                        <dd class="mt-1">
                          <%= link_to upload.content, class: "inline-flex items-center text-blue-600 hover:text-blue-800" do %>
                            <span class="inline-flex items-center justify-center w-6 h-6 mr-2 rounded-full bg-<%= upload.content.class.color %> text-white">
                              <i class="material-icons text-xs"><%= upload.content.class.icon %></i>
                            </span>
                            <span class="hover:underline"><%= upload.content.name %></span>
                          <% end %>
                        </dd>
                      </div>
                    </dl>
                  </div>
                  
                  <div class="bg-gray-50 px-6 py-4 flex justify-between">
                    <%= link_to upload.src(:original), class: 'px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors', target: '_blank' do %>
                      <i class="material-icons text-sm align-text-bottom mr-1">file_download</i> Download Original
                    <% end %>
                    <button type="button" class="px-4 py-2 bg-gray-100 text-gray-700 rounded-md hover:bg-gray-200 transition-colors"
                            onclick="document.getElementById('modal-<%= upload.id %>').classList.add('hidden')">
                      Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
          <% end %>
        </div>
      </div>
    <% end %>
  </div>
</div>