feat(ui): sidebar navigation redesign and global style polish

web/src/components/Card.jsx

@@ -1,4 +1,4 @@
-export default function Card({
+export function Section({
   xs,
   sm,
   md,
@@ -9,6 +9,7 @@ export default function Card({
   className = '',
   role,
   fullHeight = false,
+  surface = false,
 }) {
   const getGridClasses = () => {
     const breakpoints = [
@@ -27,19 +28,25 @@ export default function Card({
 
   const gridClasses = getGridClasses();
 
+  const bgClass = surface ? 'bg-base-200/40' : 'bg-base-100';
+
   return (
     <div
-      className={`card bg-base-100 min-h-0 min-w-0 shadow-xl ${gridClasses} ${fullHeight ? 'h-full' : ''} ${className}`}
+      className={`card ${bgClass} border border-base-content/10 min-h-0 min-w-0 ${gridClasses} ${fullHeight ? 'h-full' : ''} ${className}`}
       role={role}
     >
       {title && (
-        <div className='card-header hidden shrink-0 px-4 pt-4 lg:flex'>
-          <h2 className='card-title text-lg sm:text-xl'>{title}</h2>
+        <div className='card-header px-5 pt-5 shrink-0'>
+          <h2 className='card-title text-lg font-semibold text-base-content'>{title}</h2>
         </div>
       )}
-      <div className={`card-body flex min-h-0 flex-col gap-2 p-4 ${fullHeight ? 'flex-1' : ''}`}>
+      <div className={`card-body flex min-h-0 flex-col gap-2 p-5 ${fullHeight ? 'flex-1' : ''}`}>
         {children}
       </div>
     </div>
   );
 }
+
+export const Card = Section;
+export default Section;
+

web/src/components/Chart.jsx

@@ -103,6 +103,15 @@ export function ChartComponent({ data, className, chartClassName }) {
       window.visualViewport.addEventListener('resize', handleResize);
     }
 
+    // ResizeObserver: handles accordion open/close animations and any container resize
+    let resizeObserver;
+    if (ref.current && typeof ResizeObserver !== 'undefined') {
+      resizeObserver = new ResizeObserver(() => {
+        chart.resize();
+      });
+      resizeObserver.observe(ref.current);
+    }
+
     // Initial call to ensure correct sizing
     handleResize();
 
@@ -113,6 +122,9 @@ export function ChartComponent({ data, className, chartClassName }) {
       if (window.visualViewport) {
         window.visualViewport.removeEventListener('resize', handleResize);
       }
+      if (resizeObserver) {
+        resizeObserver.disconnect();
+      }
     };
   }, [chart]);
 

web/src/components/GmLogoIcon.jsx

@@ -0,0 +1,44 @@
+import { useId } from 'preact/hooks';
+
+export function GmLogoIcon({ width, height, className = '', style = {} }) {
+  const clipPathId = useId();
+
+  return (
+    <svg
+      viewBox='0 0 118 101'
+      width={width}
+      height={height}
+      className={className}
+      style={{ display: 'block', flexShrink: 0, ...style }}
+      aria-hidden='true'
+    >
+      <defs>
+        <clipPath id={clipPathId}>
+          <path d='M125.292 65.821L125.292 72.921L131.376 77.953L138.355 77.953L145.134 72.373L145.134 65.821L125.292 65.821Z' />
+        </clipPath>
+      </defs>
+
+      <g transform='matrix(4.16667,0,0,4.16667,-514.15,-242.59)'>
+        <g clipPath={`url(#${clipPathId})`}>
+          <g transform='matrix(1,0,0,1,0,-71.661)'>
+            <rect x='125.291' y='137.481' width='20.409' height='12.132' fill='#119246' />
+          </g>
+          <g transform='matrix(1,0,0,1,0,-71.661)'>
+            <rect x='132.094' y='137.481' width='13.606' height='12.132' fill='#ffffff' />
+          </g>
+          <g transform='matrix(1,0,0,1,0,-71.661)'>
+            <rect x='138.898' y='137.481' width='6.803' height='12.132' fill='#ce2c38' />
+          </g>
+        </g>
+      </g>
+
+      <g transform='matrix(4.16667,0,0,4.16667,98.2125,58.8708)'>
+        <path
+          d='M0 -4.037L-0.136 -4.037C0.451 -5.69 -0.639 -7.438 -2.569 -7.94C-2.883 -8.021 -3.208 -8.066 -3.536 -8.074L-20.035 -8.074C-26.459 -7.698 -22.392 0.657 -20.729 2.939C-19.214 4.904 -16.638 6.078 -13.888 6.055L-9.684 6.055C-6.98 6.076 -4.441 4.941 -2.917 3.027L0 3.027C5.673 2.934 6.787 -4.217 0 -4.037M-9.684 4.037L-13.888 4.037C-15.842 4.059 -17.675 3.231 -18.757 1.838C-19.398 1.312 -22.989 -6.055 -20.035 -6.055L-3.536 -6.055C-3.208 -6.056 -2.895 -5.937 -2.676 -5.727C-2.444 -5.508 -2.332 -5.214 -2.369 -4.92C-3.032 -0.622 -4.28 3.846 -9.684 4.037M0 1.009L-1.664 1.009C-1.18 0.032 -0.803 -0.982 -0.54 -2.019C0.885 -2.1 2.461 -1.801 2.357 -0.865C2.278 0.197 1.242 1.02 0 1.009M-12.935 -11.101L-12.935 -13.12C-12.935 -13.677 -12.407 -14.129 -11.756 -14.129C-11.105 -14.129 -10.577 -13.677 -10.577 -13.12L-10.577 -11.101C-10.577 -10.544 -11.105 -10.092 -11.756 -10.092C-12.407 -10.092 -12.935 -10.544 -12.935 -11.101M-8.22 -11.101L-8.22 -13.12C-8.22 -13.677 -7.693 -14.129 -7.042 -14.129C-6.391 -14.129 -5.863 -13.677 -5.863 -13.12L-5.863 -11.101C-5.863 -10.544 -6.391 -10.092 -7.042 -10.092C-7.693 -10.092 -8.22 -10.544 -8.22 -11.101M-17.649 -11.101L-17.649 -13.12C-17.649 -13.677 -17.121 -14.129 -16.47 -14.129C-15.819 -14.129 -15.292 -13.677 -15.292 -13.12L-15.292 -11.101C-15.292 -10.544 -15.82 -10.093 -16.471 -10.093C-17.121 -10.093 -17.648 -10.545 -17.649 -11.101M0 9.083C0 9.64 -0.528 10.092 -1.179 10.092L-22.392 10.092C-23.043 10.092 -23.571 9.64 -23.571 9.083C-23.571 8.525 -23.043 8.073 -22.392 8.073L-1.179 8.073C-0.528 8.073 0 8.525 0 9.083'
+          fill='currentColor'
+          fillRule='nonzero'
+        />
+      </g>
+    </svg>
+  );
+}