Migrate theme and styles to Vaadin 25.0 approach (#11)

* removed deprecated @theme annotation, moved css to resources folder

* Fix logo and lumo utility styles

* simplify styles and fix footer position

* use tabs for menu items, aligning with starters and simplifying css

* better styles for navbar

* Apply suggestion from @Copilot

* fix css for footer and contain

* simpler css

* show correctly the full stacktrace exception in the view

---------

Co-authored-by: Copilot <[email protected]>

Author: manolo

src/main/frontend/index.html

@@ -8,7 +8,7 @@
   <meta charset="UTF-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <style>
-    body, #outlet {
+    html, body, #outlet {
       height: 100vh;
       width: 100%;
       margin: 0;

src/main/frontend/themes/petclinic/main-content-layout.css

@@ -1,5 +1,4 @@
 import { ViewConfig } from '@vaadin/hilla-file-router/types.js';
-import { useSignal } from '@vaadin/hilla-react-signals';
 import {VerticalLayout} from "@vaadin/react-components";
 import {key, translate} from "@vaadin/hilla-react-i18n";
 
@@ -9,15 +8,11 @@ export const config: ViewConfig = {
 };
 
 export default function HomeView() {
-  const name = useSignal('');
-
   return (
-      <>
-          <VerticalLayout theme="padding spacing"
-                          className="w-full items-center justify-center">
-              <h2>{translate(key`welcome`)}</h2>
-              <img src="./images/pets.png" alt="Pets" />
-          </VerticalLayout>
-      </>
+      <VerticalLayout theme="padding spacing"
+                      className="w-full items-center justify-center home">
+          <h2>{translate(key`welcome`)}</h2>
+          <img src="./images/pets.png" alt="Pets" />
+      </VerticalLayout>
   );
 }

src/main/frontend/themes/petclinic/main-layout.css

@@ -2,72 +2,83 @@ import { Button } from '@vaadin/react-components/Button';
 import { createMenuItems, useViewConfig } from '@vaadin/hilla-file-router/runtime.js';
 import {
     AppLayout,
-    DrawerToggle,
     Icon,
-    SideNav,
-    SideNavItem,
-    VerticalLayout
+    Tabs,
+    Tab
 } from '@vaadin/react-components';
-import { Suspense, useEffect } from 'react';
-import { Outlet, useLocation, useNavigate } from 'react-router';
+import { Suspense, useEffect, useRef } from 'react';
+import { Outlet, useLocation, NavLink } from 'react-router';
 import {HorizontalLayout} from "@vaadin/react-components/HorizontalLayout.js";
 import '@vaadin/icons';
 import {key, translate, i18n} from "@vaadin/hilla-react-i18n";
 
+
 import { ErrorBoundary } from "react-error-boundary";
 
 const defaultTitle = document.title;
 
 // @ts-ignore
 function Fallback({ error, resetErrorBoundary }) {
     return (
-        <VerticalLayout role="alert" className="w-full items-center justify-between my-l">
+        <div role="alert" className="error-fallback">
             <h1>Something went wrong</h1>
             <p style={{ color: "red" }}>{error.message}</p>
-            <Button theme="primary" onClick={(e) => {
-             resetErrorBoundary();
-            }}>Retry</Button>
-        </VerticalLayout>
+            {error.type && <p><strong>Type:</strong> {error.type}</p>}
+            {error.detail && (
+                <pre>
+                    {typeof error.detail === 'string' ? error.detail : JSON.stringify(error.detail, null, 2)}
+                </pre>
+            )}
+            <Button theme="primary" onClick={() => resetErrorBoundary()}>Retry</Button>
+        </div>
     );
 }
 
 export default function MainLayout() {
   const currentTitle = (useViewConfig()?.title) ? (i18n.translateDynamic(useViewConfig()?.title) + " — Spring PetClinic"):  defaultTitle;
-  const navigate = useNavigate();
   const location = useLocation();
 
+  const menuItems = createMenuItems();
+  const tabsRef = useRef<any>(null);
+
+  useEffect(() => {
+      // On page load/reload, sync selected tab with the active NavLink
+      tabsRef.current.selected = [...tabsRef.current?.querySelectorAll('vaadin-tab')]
+        .findIndex((tab: Element) => tab.querySelector('a.active'));
+  }, []);
+
   useEffect(() => {
     document.title = currentTitle;
   }, [currentTitle]);
 
   return (
       <AppLayout>
-          <header>
-              <HorizontalLayout slot="navbar" theme="dark padding" id="header" className="w-full items-center justify-between">
-                  <a href="/" className="navbar-brand"><span>{translate(key`home`)}</span></a>
-                  <SideNav className="side-nav-top" onNavigate={({path}) => navigate(path!)}
-                           location={location}>
-                      {createMenuItems().map(({to, title, icon}) => (
-                          <SideNavItem path={to} key={to}>
-                              {icon ?
-                                  <Icon icon={icon} slot="prefix"></Icon> : <></>}
+          <HorizontalLayout slot="navbar" theme="dark padding" id="header" className="w-full items-center justify-between">
+              <a href="/" className="navbar-brand"><span>{translate(key`home`)}</span></a>
+              <Tabs ref={tabsRef}>
+                  {menuItems.map(({to, title, icon}) => (
+                      <Tab key={to}>
+                          <NavLink to={to}>
+                              {icon ? <Icon icon={icon} slot="prefix"></Icon> : <></>}
                               {i18n.translateDynamic(title)}
-                          </SideNavItem>
-                      ))}
-                  </SideNav>
-              </HorizontalLayout>
-          </header>
-          <main>
-              <ErrorBoundary FallbackComponent={Fallback} key={location.pathname}>
-                  <Suspense>
-                      <div style={{display: 'contents'}}><Outlet/></div>
-                  </Suspense>
-              </ErrorBoundary>
-          </main>
-          <footer className="footer">
-              <img src="./images/vaadin.png" alt="Vaadin"/>
-              <img src="./images/spring-logo.svg" alt="Spring"/>
-          </footer>
+                          </NavLink>
+                      </Tab>
+                  ))}
+              </Tabs>
+          </HorizontalLayout>
+          <div className="content-wrapper">
+              <main>
+                  <ErrorBoundary FallbackComponent={Fallback} key={location.pathname}>
+                      <Suspense>
+                          <Outlet />
+                      </Suspense>
+                  </ErrorBoundary>
+              </main>
+              <footer className="footer">
+                  <img src="./images/vaadin.png" alt="Vaadin" />
+                  <img src="./images/spring-logo.svg" alt="Spring" />
+              </footer>
+          </div>
       </AppLayout>
   );
 }

src/main/frontend/themes/petclinic/navigation.css

@@ -40,7 +40,7 @@ export default function ViewOwnerView() {
     return (
         <>
             <VerticalLayout theme="padding spacing"
-                            className="w-full justify-center">
+                            className="w-full">
                 <FormLayout
                     responsiveSteps={[{minWidth: '0', columns: 1},
                         {minWidth: '600px', columns: 1}]
@@ -81,7 +81,7 @@ export default function ViewOwnerView() {
                             }}>{translate(key`addNewPet`)}</Button>
                         </HorizontalLayout>
                     </FormItem>
-                    <VerticalLayout theme="spacing" className="pet-container">
+                    <VerticalLayout theme="spacing">
                         <h2>{translate(key`petsAndVisits`)}</h2>
 
                         {

src/main/frontend/themes/petclinic/theme-editor.css

@@ -80,7 +80,7 @@ export default function EditOwnerView() {
                         <TextField {...field(model.telephone)}></TextField>
                     </FormItem>
                     <FormItem>
-                        <Button  onClick={submitWithErrors} className="edit-button">{translate(key`updateOwner`)}</Button>
+                        <Button onClick={submitWithErrors}>{translate(key`updateOwner`)}</Button>
                     </FormItem>
                 </FormLayout>
             </VerticalLayout>