fix: add GridStackLayout showcase view (#7)

Adds a /gridstack route demonstrating GridStackLayout: four default
widgets (line/bar/pie chart cards plus a usage hint), buttons to add and
remove widgets at runtime, a reset-layout button and a layout-change
status line. Layout is persisted per browser via the existing
localStorage support. The view gets its own SideNavItem in MainLayout
and full de/en/es translations.

Fixes an infinite recursion in GridStackLayout.add(Component): a
single-argument add(item) resolves to that overload rather than the
varargs one, so its delegation to add(item) called itself. It now
appends through the element API and passes a GridStackItem through
unwrapped.

Adds the first test sources (browserless UI tests) covering the view's
widget count and the add/remove buttons.

Closes #7

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01PYAcKoXKPN3rJ7nBroKZkc

src/main/resources/META-INF/resources/styles.css

@@ -123,6 +123,13 @@ vaadin-app-layout::part(content) {
   margin: 0 0 12px 0;
 }
 
+/* Secondary text (e.g. the layout status line in GridStackView). */
+.dialect-muted {
+  color: var(--dialect-ink);
+  opacity: 0.65;
+  font-size: 0.9rem;
+}
+
 /* GridStackLayout (components/GridStackLayout.java): extend the same alias
    layer used by .dialect-card rather than hardcoding new colors. */
 .grid-stack-item-content {

src/main/resources/vaadin-i18n/translations.properties

@@ -10,16 +10,28 @@ lang.es=Español
 nav.dashboard=Dashboard
 nav.form=Formular
 nav.table=Tabelle
+nav.gridstack=Raster
 
 page.dashboard=Dashboard
 page.form=Formular
 page.table=Tabelle
+page.gridstack=Raster-Layout
 
 card.revenueTrend=Umsatz-Entwicklung
 card.revenueByMonth=Umsatz nach Monat
 card.revenueByRegion=Umsatz nach Region
 card.registration=Registrierung
 card.employees=Mitarbeiter
+card.gridstackHint=Bedienung
+
+gridstack.hint=Karten am Titel greifen und verschieben, an der unteren rechten Ecke die Größe ändern. Das Layout wird im Browser gespeichert und beim nächsten Besuch wiederhergestellt.
+gridstack.addWidget=Widget hinzufügen
+gridstack.removeWidget=Letztes entfernen
+gridstack.reset=Layout zurücksetzen
+gridstack.status=Layout geändert – {0} Widgets
+gridstack.statusInitial=Layout unverändert
+gridstack.widget=Widget {0}
+gridstack.widgetText=Frei platzierbare Karte.
 
 chart.revenueSeries=Umsatz 2026
 chart.pointClick=Serie {0}, Punkt {1}

src/main/resources/vaadin-i18n/translations_en.properties

@@ -10,16 +10,28 @@ lang.es=Español
 nav.dashboard=Dashboard
 nav.form=Form
 nav.table=Table
+nav.gridstack=Grid
 
 page.dashboard=Dashboard
 page.form=Form
 page.table=Table
+page.gridstack=Grid layout
 
 card.revenueTrend=Revenue Trend
 card.revenueByMonth=Revenue by Month
 card.revenueByRegion=Revenue by Region
 card.registration=Registration
 card.employees=Employees
+card.gridstackHint=How it works
+
+gridstack.hint=Drag cards by their header to move them, resize them from the bottom right corner. The layout is stored in your browser and restored on your next visit.
+gridstack.addWidget=Add widget
+gridstack.removeWidget=Remove last
+gridstack.reset=Reset layout
+gridstack.status=Layout changed – {0} widgets
+gridstack.statusInitial=Layout unchanged
+gridstack.widget=Widget {0}
+gridstack.widgetText=Freely placeable card.
 
 chart.revenueSeries=Revenue 2026
 chart.pointClick=Series {0}, point {1}

src/main/resources/vaadin-i18n/translations_es.properties

@@ -10,16 +10,28 @@ lang.es=Español
 nav.dashboard=Panel
 nav.form=Formulario
 nav.table=Tabla
+nav.gridstack=Cuadrícula
 
 page.dashboard=Panel
 page.form=Formulario
 page.table=Tabla
+page.gridstack=Diseño de cuadrícula
 
 card.revenueTrend=Evolución de ingresos
 card.revenueByMonth=Ingresos por mes
 card.revenueByRegion=Ingresos por región
 card.registration=Registro
 card.employees=Empleados
+card.gridstackHint=Cómo funciona
+
+gridstack.hint=Arrastra las tarjetas por su título para moverlas y cambia su tamaño desde la esquina inferior derecha. El diseño se guarda en el navegador y se restaura en la próxima visita.
+gridstack.addWidget=Añadir widget
+gridstack.removeWidget=Quitar el último
+gridstack.reset=Restablecer diseño
+gridstack.status=Diseño modificado – {0} widgets
+gridstack.statusInitial=Diseño sin cambios
+gridstack.widget=Widget {0}
+gridstack.widgetText=Tarjeta de colocación libre.
 
 chart.revenueSeries=Ingresos 2026
 chart.pointClick=Serie {0}, punto {1}