feat: debut d'un front vue.js + ajout de cursorrules

assets/vue/app/shared/components/ui/Toolbar.vue

@@ -0,0 +1,47 @@
+<template>
+  <div :class="['bg-white shadow-sm px-4 py-2', $attrs.class]">
+    <div class="container mx-auto flex justify-between items-center">
+      <!-- Left section -->
+      <div class="flex items-center space-x-2">
+        <button
+          v-for="(item, index) in config.leftSection"
+          :key="index"
+          @click="item.onClick"
+          :class="[
+            'p-2 rounded-lg transition-colors',
+            item.active 
+              ? 'bg-green-100 text-green-600' 
+              : 'hover:bg-gray-100'
+          ]"
+        >
+          <component :is="item.icon" class="h-5 w-5" />
+          <span v-if="item.label" class="ml-2">{{ item.label }}</span>
+        </button>
+      </div>
+
+      <!-- Right section -->
+      <div class="flex items-center space-x-2">
+        <button
+          v-for="(item, index) in config.rightSection"
+          :key="index"
+          @click="item.onClick"
+          class="p-2 rounded-lg hover:bg-gray-100 transition-colors"
+        >
+          <component :is="item.icon" class="h-5 w-5" />
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  config: {
+    type: Object,
+    required: true,
+    validator: (value) => {
+      return value.leftSection && value.rightSection;
+    }
+  }
+});
+</script>