- iconManager MaterialIconManager.js zijn nu 'unified' in 1 component, en samen met translation utilities omgezet naar een meer moderne Vue composable

- De sidebar is nu eveneens omgezet naar een Vue component.

eveai_chat_client/static/assets/vue-components/SideBarLogo.vue

@@ -0,0 +1,73 @@
+<!-- SideBarLogo.vue -->
+<template>
+  <div class="sidebar-logo">
+    <img 
+      v-if="logoUrl" 
+      :src="logoUrl" 
+      :alt="altText"
+      @error="handleImageError"
+      class="logo-image"
+    >
+    <div v-else class="logo-placeholder">
+      {{ makeNameInitials }}
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  logoUrl: {
+    type: String,
+    default: ''
+  },
+  makeName: {
+    type: String,
+    default: 'Logo'
+  }
+});
+
+const altText = computed(() => props.makeName || 'Logo');
+const makeNameInitials = computed(() => {
+  return props.makeName
+    .split(' ')
+    .map(word => word.charAt(0))
+    .join('')
+    .toUpperCase()
+    .slice(0, 2);
+});
+
+const handleImageError = () => {
+  console.warn('Logo image failed to load:', props.logoUrl);
+};
+</script>
+
+<style scoped>
+.sidebar-logo {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 20px 15px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+.logo-image {
+  max-width: 100%;
+  max-height: 60px;
+  object-fit: contain;
+}
+
+.logo-placeholder {
+  width: 50px;
+  height: 50px;
+  background: var(--primary-color);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: bold;
+  font-size: 1.2rem;
+}
+</style>