notebook/app/views/documents/show.html.erb

<% set_meta_tags title: @document.title, description: truncate(@document.body) %>

<div class="min-h-screen bg-gradient-to-b from-gray-50 to-white">
  <!-- Subtle top decoration -->
  <div class="absolute top-0 inset-x-0 h-1 bg-gradient-to-r from-blue-500 to-teal-400"></div>
  
  <!-- Minimal navigation bar -->
  <div class="sticky top-0 z-10">
    <div class="max-w-5xl mx-auto px-4 sm:px-6 lg:px-8 py-3">
      <div class="flex items-center">
        <% if @document.folder.present? %>
          <div class="flex items-center text-sm text-gray-500">
            <i class="material-icons text-gray-400 text-xs mr-1">folder</i>
            <%= link_to @document.folder.title, folder_path(@document.folder), class: "hover:text-blue-600" %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
  
  <!-- Floating action buttons -->
  <div class="fixed bottom-8 right-8 z-20 flex flex-col space-y-3" x-data="{ showButtons: false }">
    <!-- Share button with dropdown -->
    <div class="relative" x-data="{ open: false }" @click.away="open = false">
      <button @click="open = !open"
              class="flex items-center justify-center w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm shadow-lg text-gray-600 hover:text-blue-600 hover:bg-white transition-all duration-200 border border-gray-200"
              title="Share">
        <i class="material-icons">share</i>
      </button>
      <div x-show="open"
           x-transition:enter="transition ease-out duration-100"
           x-transition:enter-start="transform opacity-0 scale-95"
           x-transition:enter-end="transform opacity-100 scale-100"
           x-transition:leave="transition ease-in duration-75"
           x-transition:leave-start="transform opacity-100 scale-100"
           x-transition:leave-end="transform opacity-0 scale-95"
           class="origin-bottom-right absolute right-0 bottom-16 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none z-10"
           role="menu"
           aria-orientation="vertical"
           style="display: none;">
        <div class="py-1" role="none">
          <a href="#" class="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <i class="material-icons text-gray-400 mr-2 text-sm">link</i>
            Copy link
          </a>
          <a href="#" class="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <i class="material-icons text-blue-400 mr-2 text-sm">facebook</i>
            Share on Facebook
          </a>
          <a href="#" class="flex px-4 py-2 text-sm text-gray-700 hover:bg-gray-100" role="menuitem">
            <i class="material-icons text-blue-400 mr-2 text-sm">twitter</i>
            Share on Twitter
          </a>
        </div>
      </div>
    </div>
    
    <!-- Edit button (only for document owner) -->
    <% if user_signed_in? && current_user.id == @document.user_id %>
      <%= link_to edit_document_path(@document),
                  class: "flex items-center justify-center w-12 h-12 rounded-full bg-white/80 backdrop-blur-sm shadow-lg text-gray-600 hover:text-blue-600 hover:bg-white transition-all duration-200 border border-gray-200",
                  title: "Edit document" do %>
        <i class="material-icons">edit</i>
      <% end %>
    <% end %>
  </div>

  <!-- Reading progress indicator -->
  <div class="fixed top-0 left-0 h-1 bg-blue-500 z-30 transition-all duration-300" style="width: 0%" id="reading-progress"></div>
  
  <!-- Main content -->
  <article class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-0 py-16">
    <!-- Document header -->
    <header class="mb-12">
      <h1 class="text-3xl sm:text-4xl md:text-5xl font-bold text-gray-900 leading-tight tracking-tight">
        <%= @document.title %>
      </h1>
      
      <div class="mt-6 flex flex-wrap items-center text-sm text-gray-500 gap-x-4 gap-y-2">
        <div class="flex items-center">
          <div class="flex-shrink-0">
            <img class="h-10 w-10 rounded-full" src="<%= @document.user.image_url(80) %>" alt="<%= @document.user.display_name %>">
          </div>
          <div class="ml-2">
            <%= link_to @document.user.display_name, @document.user, class: "font-medium text-gray-900 hover:underline" %>
          </div>
        </div>
        
        <% if @document.updated_at.present? %>
          <div class="flex items-center">
            <i class="material-icons text-gray-400 text-sm mr-1">calendar_today</i>
            <time datetime="<%= @document.updated_at.strftime('%Y-%m-%d') %>">
              <%= @document.updated_at.strftime('%B %d, %Y') %>
            </time>
          </div>
        <% end %>
        
        <% if @document.cached_word_count? %>
          <div class="flex items-center">
            <i class="material-icons text-gray-400 text-sm mr-1">text_fields</i>
            <span><%= number_with_delimiter @document.cached_word_count %> <%= 'word'.pluralize @document.cached_word_count %></span>
          </div>
        <% end %>
      </div>
    </header>

    <!-- Document content -->
    <div class="prose prose-lg md:prose-xl max-w-none prose-blue prose-headings:text-gray-900 prose-a:text-blue-600 prose-a:no-underline hover:prose-a:underline prose-p:leading-relaxed prose-headings:tracking-tight prose-headings:font-bold prose-img:rounded-lg prose-img:shadow-md">
      <%= ContentFormatterService.substitute_content_links(clean_links(@document.body.try(:html_safe)) || "", current_user).html_safe %>
    </div>
    
    <!-- Author bio -->
    <div class="mt-20 pt-8 border-t border-gray-100">
      <div class="flex items-center">
        <div class="flex-shrink-0">
          <img class="h-12 w-12 rounded-full" src="<%= @document.user.image_url(120) %>" alt="<%= @document.user.display_name %>">
        </div>
        <div class="ml-4">
          <h3 class="text-lg font-medium text-gray-900">
            <%= link_to @document.user.display_name, @document.user, class: "hover:underline" %>
          </h3>
          <p class="text-sm text-gray-500">
            Writer
          </p>
        </div>
      </div>
    </div>
  </article>
  
  <!-- Reading progress script -->
  <script>
    document.addEventListener('DOMContentLoaded', function() {
      const progressBar = document.getElementById('reading-progress');
      const article = document.querySelector('article');
      
      function updateReadingProgress() {
        const scrollTop = window.scrollY;
        const scrollHeight = document.documentElement.scrollHeight - window.innerHeight;
        const progress = (scrollTop / scrollHeight) * 100;
        progressBar.style.width = progress + '%';
      }
      
      window.addEventListener('scroll', updateReadingProgress);
      updateReadingProgress(); // Initialize on load
    });
  </script>
  
  <!-- Minimal Footer -->
  <footer class="mt-16 border-t border-gray-100 bg-white">
    <div class="max-w-3xl mx-auto px-4 sm:px-6 lg:px-0 py-6">
      <div class="text-center text-xs text-gray-400">
        <p>Published with <a href="/" class="text-gray-500 hover:text-blue-600">Notebook.ai</a></p>
      </div>
    </div>
  </footer>
</div>