feat: Ajout de React pour le front, début de refonte du front

assets/react/app/presentation/components/Toolbar/Toolbar.jsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { ToolbarButton } from './ToolbarButton';
+
+export function Toolbar({ 
+  leftSection = [], 
+  centerSection = [], 
+  rightSection = [],
+  className = ''
+}) {
+  const renderSection = (items) => (
+    <div className="flex items-center gap-2">
+      {items.map((item, index) => (
+        <ToolbarButton key={index} {...item} />
+      ))}
+    </div>
+  );
+
+  return (
+    <div className={`bg-gray-800 shadow-sm border-b border-gray-700 ${className}`}>
+      <div className="container mx-auto px-4">
+        <div className="h-14 flex items-center justify-between">
+          {renderSection(leftSection)}
+          {renderSection(centerSection)}
+          {renderSection(rightSection)}
+        </div>
+      </div>
+    </div>
+  );
+}

assets/react/app/presentation/components/Toolbar/ToolbarButton.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export function ToolbarButton({ icon, label, onClick, active = false }) {
+  return (
+    <button
+      onClick={onClick}
+      className={`
+        flex items-center gap-2 px-4 py-2 rounded-lg transition-colors
+        ${active 
+          ? 'bg-green-600 text-white' 
+          : 'text-gray-300 hover:text-green-600'
+        }
+      `}
+    >
+      <FontAwesomeIcon icon={icon} />
+      {label && <span>{label}</span>}
+    </button>
+  );
+}