turbovault-app/app/views/users/settings.html.erb

<div class="max-w-4xl mx-auto">
  <h1 class="text-3xl font-bold mb-6">Settings</h1>
  
  <div class="bg-white p-6 rounded-lg shadow mb-6">
    <h2 class="text-xl font-bold mb-4">Profile Settings</h2>
    
    <%= form_with model: @user, url: user_path(@user), method: :patch, class: "space-y-4" do |f| %>
      <% if @user.errors.any? %>
        <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded">
          <ul>
            <% @user.errors.full_messages.each do |message| %>
              <li><%= message %></li>
            <% end %>
          </ul>
        </div>
      <% end %>
      
      <div>
        <%= f.label :username, class: "block text-sm font-medium text-gray-700" %>
        <%= f.text_field :username, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
      </div>
      
      <div>
        <%= f.label :email, class: "block text-sm font-medium text-gray-700" %>
        <%= f.email_field :email, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
      </div>
      
      <div>
        <%= f.label :bio, class: "block text-sm font-medium text-gray-700" %>
        <%= f.text_area :bio, rows: 4, class: "mt-1 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-500 focus:ring-indigo-500" %>
      </div>
      
      <div class="flex items-center">
        <%= f.check_box :profile_public, class: "rounded border-gray-300 text-indigo-600 focus:ring-indigo-500" %>
        <%= f.label :profile_public, "Make my profile public", class: "ml-2 text-sm text-gray-700" %>
      </div>

      <div class="border-t pt-4">
        <%= f.label :theme, "Theme", class: "block text-sm font-medium text-gray-700 mb-2" %>
        <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
          <% {
            "light" => { name: "Light", colors: "bg-white border-gray-300", icon: "☀️" },
            "dark" => { name: "Dark", colors: "bg-gray-900 text-white border-gray-600", icon: "🌙" },
            "midnight" => { name: "Midnight", colors: "bg-blue-950 text-blue-100 border-blue-800", icon: "🌃" },
            "retro" => { name: "Retro", colors: "bg-amber-950 text-amber-100 border-amber-700", icon: "🕹️" },
            "ocean" => { name: "Ocean", colors: "bg-cyan-950 text-cyan-100 border-cyan-700", icon: "🌊" }
          }.each do |value, theme_info| %>
            <label class="relative cursor-pointer">
              <%= f.radio_button :theme, value, class: "peer sr-only" %>
              <div class="<%= theme_info[:colors] %> border-2 peer-checked:border-indigo-600 peer-checked:ring-2 peer-checked:ring-indigo-600 rounded-lg p-4 text-center transition hover:scale-105">
                <div class="text-3xl mb-2"><%= theme_info[:icon] %></div>
                <div class="font-semibold text-sm"><%= theme_info[:name] %></div>
              </div>
            </label>
          <% end %>
        </div>
        <p class="mt-2 text-xs text-gray-500">Choose your preferred theme for TurboVault</p>
      </div>
      
      <div class="border-t pt-4">
        <div class="flex items-start">
          <%= f.check_box :igdb_sync_enabled, class: "rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 mt-1" %>
          <div class="ml-2">
            <%= f.label :igdb_sync_enabled, "Enable IGDB game matching", class: "text-sm font-medium text-gray-700" %>
            <p class="text-xs text-gray-500 mt-1">
              <strong>Enabled by default.</strong> Automatically match your games with IGDB for cover art, genres, and metadata.
              Sync runs every 30 minutes for unmatched games. You can review matches before they're linked.
            </p>
          </div>
        </div>
      </div>
      
      <div>
        <%= f.submit "Update Profile", class: "px-6 py-2 bg-indigo-600 text-white rounded-md hover:bg-indigo-700" %>
      </div>
    <% end %>
  </div>
  
  <div class="bg-white p-6 rounded-lg shadow">
    <div class="flex justify-between items-center mb-4">
      <h2 class="text-xl font-bold">API Tokens</h2>
      <%= link_to "Manage API Tokens", settings_api_tokens_path, class: "text-indigo-600 hover:text-indigo-800" %>
    </div>
    
    <% if @api_tokens.any? %>
      <div class="space-y-2">
        <% @api_tokens.first(3).each do |token| %>
          <div class="flex justify-between items-center py-2 border-b">
            <div>
              <div class="font-medium"><%= token.name || "Unnamed Token" %></div>
              <div class="text-sm text-gray-500">
                Created <%= time_ago_in_words(token.created_at) %> ago
                <% if token.last_used_at %>
                  · Last used <%= time_ago_in_words(token.last_used_at) %> ago
                <% end %>
              </div>
            </div>
          </div>
        <% end %>
      </div>
      <% if @api_tokens.count > 3 %>
        <div class="mt-4">
          <%= link_to "View all #{@api_tokens.count} tokens", settings_api_tokens_path, class: "text-indigo-600 hover:text-indigo-800" %>
        </div>
      <% end %>
    <% else %>
      <p class="text-gray-500">No API tokens yet. Create one to access the API.</p>
    <% end %>
  </div>
</div>