vault171/app/views/items/_list.html.erb

<div class="bg-white border border-gray-200 rounded-xl shadow-sm overflow-hidden">
<!-- ========================================================================= -->
<!-- 1. MOBIL-ANSICHT: OPTIMIERT MIT REINEM CODESYMBOL & ZUSTANDS-BADGES       -->
<!-- ========================================================================= -->
<div class="block md:hidden divide-y divide-gray-200 bg-white">
  <% items.each do |item| %>
    <div class="p-4 hover:bg-gray-50/50 transition flex items-center justify-between gap-4">
      
      <!-- LINKER BEREICH: TEXTE BÜNDIG ZUM ARTIKELNAMEN FLUCHTEND -->
      <div class="flex-1 min-w-0 flex items-start gap-3">
        
        <!-- Das ID-Badge steht als sauberer, fester Anker ganz links -->
        <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "shrink-0 transition hover:scale-105 active:scale-95 block mt-0.5" do %>
          <span class="inline-flex items-center font-mono font-black text-xs text-white bg-blue-600 px-2.5 py-0.5 rounded shadow-sm tracking-widest">
            #<%= item.sticker_id %>
          </span>
        <% end %>
        
        <!-- TEXT-CONTAINER: ALLES FLUCHTET PERFEKT LINKSBÜNDIG UNTER DEM NAMEN -->
        <div class="flex-1 min-w-0 space-y-2">
          
          <!-- Zeile 1: Fetter Artikelname -->
          <div class="min-w-0">
            <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "font-black text-gray-900 hover:text-blue-600 text-base leading-tight block truncate" do %>
              <%= item.name %>
            <% end %>
          </div>

          <!-- Zeile 2: Kategorie, SKU & Seriennummer (SN) als kompakte Kette -->
          <div class="flex items-center flex-wrap gap-x-2 gap-y-0.5 text-xs font-medium text-gray-500 font-mono">
            <span class="font-sans font-bold text-gray-400"><%= item.category.name %></span>
            <span class="text-gray-300">•</span>
            <span>SKU: <span class="text-gray-700 font-bold"><%= item.sku.presence || "—" %></span></span>
            <span class="text-gray-300">•</span>
            <span>SN: <span class="text-gray-700 font-bold"><%= item.serial_number.presence || "—" %></span></span>
          </div>

          <!-- Zeile 3: Das ultimativ schlanke, automatisierte Badge-Duo im Mobil-Layout -->
          <div class="flex items-center flex-wrap gap-2 pt-0.5">
            
            <!-- A: Standort-Badge (Label wird manuell übergeben, da dynamischer Personen-/Raumname) -->
            <%= render "layouts/badge", type: item.location_badge_type, label: item.location_badge_label(short_room: true) %>

            <!-- B: Zustands-Badge (Vollautomatisch! Text und Icon kommen direkt aus dem Typen) -->
            <%= render "layouts/badge", type: item.condition_badge_type %>

          </div>


        </div>
      </div>

      <!-- RECHTER BEREICH: VERTIKAL GESTAPELTE QUICK-ACTIONS -->
      <div class="flex flex-col gap-2 shrink-0">
        <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center", title: "Details" do %>
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
        <% end %>
        <%= link_to edit_item_path(item), data: { turbo_frame: "_top" }, class: "p-2 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center", title: "Bearbeiten" do %>
          <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
        <% end %>
      </div>

    </div>
  <% end %>
</div>


<!-- ========================================================================= -->
<!-- 2. DESKTOP-ANSICHT: STICKY-TABELLE (Ab md:)                               -->
<!-- ========================================================================= -->
<div class="hidden md:block overflow-x-auto max-h-[calc(100vh-12rem)]">
  <table class="min-w-full divide-y divide-gray-200 text-sm">
    <thead class="bg-gray-50 sticky top-0 z-20 shadow-[0_1px_0_0_rgba(229,231,235,1)]">
      <tr>
        <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider w-24">Sticker-ID</th>
        <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Artikeldetails</th>
        <th scope="col" class="px-6 py-3 text-start font-semibold text-gray-500 uppercase tracking-wider">Aktueller Standort</th>
        <th scope="col" class="px-6 py-3 text-center font-semibold text-gray-500 uppercase tracking-wider w-36">Zustand</th>
        <th scope="col" class="px-6 py-3 text-end font-semibold text-gray-500 uppercase tracking-wider w-24">Aktionen</th>
      </tr>
    </thead>
    <tbody class="divide-y divide-gray-200 bg-white">
      <% items.each do |item| %>
        <tr class="hover:bg-gray-50/50 transition">
          
          <!-- Spalte 1: Verlinktes Sticker-ID-Badge -->
          <td class="px-6 py-4 whitespace-nowrap">
            <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "inline-block transition hover:scale-105" do %>
              <span class="inline-flex items-center font-mono font-black text-xs text-white bg-blue-600 px-2.5 py-1 rounded-md shadow-sm tracking-widest">
                #<%= item.sticker_id %>
              </span>
            <% end %>
          </td>

          <!-- Spalte 2: Artikelname, Kategorie, SKU & SN direkt darunter im Block -->
          <td class="px-6 py-4 max-w-[280px] sm:max-w-[350px]">
            <div class="min-w-0 whitespace-normal break-words leading-tight space-y-1">
              <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "font-bold text-gray-900 hover:text-blue-600 hover:underline inline" do %>
                <%= item.name %>
              <% end %>
              <span class="block text-[10px] text-gray-400 font-medium"><%= item.category.name %></span>
              
              <div class="flex items-center gap-2 text-[10px] font-mono text-gray-500 pt-0.5">
                <span>SKU: <span class="text-gray-700 font-semibold"><%= item.sku.presence || "—" %></span></span>
                <span class="text-gray-300">•</span>
                <span>SN: <span class="text-gray-700 font-semibold"><%= item.serial_number.presence || "—" %></span></span>
              </div>
            </div>
          </td>

          <!-- Spalte 3: Aktueller Standort (Desktop Tabelle - Voller Name übergeben) -->
          <td class="px-6 py-4 whitespace-nowrap">
            <%= render "layouts/badge", type: item.location_badge_type, label: item.location_badge_label(short_room: false) %>
          </td>

          <!-- Spalte 4: Zustand (Desktop Tabelle - VOLLAUTOMATISCH!) -->
          <td class="px-6 py-4 whitespace-nowrap text-center">
            <%= render "layouts/badge", type: item.condition_badge_type %>
          </td>

          <!-- Spalte 5: Aktionen -->
          <td class="px-6 py-4 whitespace-nowrap text-end font-medium text-xs w-24 shrink-0">
            <div class="flex items-center justify-end gap-2">
              <%= link_to item_path(item), data: { turbo_frame: "_top" }, class: "p-2 text-gray-500 hover:text-blue-600 hover:bg-blue-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition" do %>
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M2.036 12.322a1.012 1.012 0 0 1 0-.639C3.423 7.51 7.36 4.5 12 4.5c4.638 0 8.573 3.007 9.963 7.178.07.207.07.431 0 .639C20.577 16.49 16.64 19.5 12 19.5c-4.638 0-8.573-3.007-9.963-7.178Z" /><path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" /></svg>
              <% end %>
              <%= link_to edit_item_path(item), data: { turbo_frame: "_top" }, class: "p-2 text-gray-500 hover:text-amber-600 hover:bg-amber-50 rounded-lg border border-gray-200 bg-white shadow-sm flex items-center justify-center transition" do %>
                <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m16.862 4.487 1.687-1.688a1.875 1.875 0 1 1 2.652 2.652L10.582 16.07a4.5 4.5 0 0 1-1.897 1.13L6 18l.8-2.685a4.5 4.5 0 0 1 1.13-1.897l8.932-8.931Zm0 0L19.5 7.125M18 14v4.75A2.25 2.25 0 0 1 15.75 21H5.25A2.25 2.25 0 0 1 3 18.75V8.25A2.25 2.25 0 0 1 5.25 6H10" /></svg>
              <% end %>
            </div>
          </td>

        </tr>
      <% end %>
    </tbody>
  </table>
</div>