COMPOSANTS

Bascule de vue

Bascule tableau / grille

Composant join avec deux boutons icône. L'état actif est marqué par btn-active.

<div class="join">
  <button class="join-item btn btn-sm btn-ghost btn-active" title="Vue tableau" aria-label="Vue tableau">
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h18M3 6h18M3 14h18M3 18h18"/>
    </svg>
  </button>
  <button class="join-item btn btn-sm btn-ghost" title="Vue grille" aria-label="Vue grille">
    <svg class="w-4 h-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2V6z
               M14 6a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2V6z
               M4 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2H6a2 2 0 01-2-2v-2z
               M14 16a2 2 0 012-2h2a2 2 0 012 2v2a2 2 0 01-2 2h-2a2 2 0 01-2-2v-2z"/>
    </svg>
  </button>
</div>

Contexte dans une toolbar

Le toggle s'intègre dans la barre d'outils entre le compteur de résultats et le CTA principal. Il ne doit pas monopoliser l'attention.

284 produits

<div class="flex items-center justify-between mb-4">
  <div class="flex items-center gap-3">
    <span class="text-sm text-base-content/60">284 produits</span>
    <div class="join">
      <button class="join-item btn btn-sm btn-ghost btn-active" title="Vue tableau">
        <!-- icône lignes -->
      </button>
      <button class="join-item btn btn-sm btn-ghost" title="Vue grille">
        <!-- icône grille -->
      </button>
    </div>
  </div>
  <button class="btn btn-primary btn-sm">Ajouter un produit</button>
</div>

Persistance localStorage

La préférence de vue est mémorisée entre les sessions. Appliquer au chargement de la page, sauvegarder à chaque changement.

const viewPref = localStorage.getItem('catalog-view') || 'table';
// Apply on page load, save on toggle
document.querySelectorAll('[data-view]').forEach(btn => {
  btn.addEventListener('click', () => {
    const view = btn.dataset.view;
    localStorage.setItem('catalog-view', view);
    // Toggle btn-active, show/hide relevant section
  });
});

✓ Utiliser btn-active pour la vue sélectionnée.

✓ Stocker la préférence en localStorage (persistante entre les sessions).

✓ Toujours ajouter title et aria-label (icônes uniquement).

✗ Ne pas utiliser un dropdown pour basculer entre 2 vues — utiliser join + btn.