Internal: improve BaseIcon with badge and tooltip support

assets/vue/components/basecomponents/BaseIcon.vue

@@ -1,16 +1,46 @@
 <template>
-  <i
-    :class="iconClass"
-    aria-hidden="true"
-    class="cursor-pointer"
-    :title="title"
-  />
+  <span
+    class="relative inline-flex cursor-pointer"
+    :class="{ group: tooltip }"
+    v-bind="{ ...$attrs, class: undefined }"
+  >
+    <i
+      :class="[iconClass, $attrs.class]"
+      aria-hidden="true"
+    />
+
+    <!-- Optional badge: supports text or a chamilo icon -->
+    <span
+      v-if="badge || badgeIcon"
+      class="absolute text-base font-bold leading-none"
+      :class="[badgePositionClass, badgeClass]"
+    >
+      <i
+        v-if="badgeIconClass"
+        :class="badgeIconClass"
+        aria-hidden="true"
+      />
+      <template v-else>{{ badge }}</template>
+    </span>
+
+    <!-- Optional tooltip shown below on hover -->
+    <span
+      v-if="tooltip"
+      class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs text-white bg-gray-90 rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-10"
+    >
+      {{ tooltip }}
+    </span>
+  </span>
 </template>
 
 <script setup>
-import { computed } from "vue"
+import { computed, useAttrs } from "vue"
 import { chamiloIconToClass } from "./ChamiloIcons"
 
+defineOptions({ inheritAttrs: false })
+
+const attrs = useAttrs()
+
 const props = defineProps({
   icon: {
     type: String,
@@ -26,21 +56,58 @@ const props = defineProps({
     type: String,
     default: "",
   },
+  badge: {
+    type: String,
+    default: "",
+  },
+  badgeIcon: {
+    type: String,
+    default: "",
+    validator: (value) => value === "" || Object.keys(chamiloIconToClass).includes(value),
+  },
+  badgeClass: {
+    type: String,
+    default: "text-success text-base",
+  },
+  badgePosition: {
+    type: String,
+    default: "top-left",
+    validator: (value) => ["top-left", "top-right", "bottom-left", "bottom-right"].includes(value),
+  },
+  tooltip: {
+    type: String,
+    default: "",
+  },
 })
 
 const iconClass = computed(() => {
-  let iconClass = chamiloIconToClass[props.icon] + " "
+  let cls = chamiloIconToClass[props.icon] + " "
   switch (props.size) {
     case "big":
-      iconClass += "text-3xl/4 "
+      cls += "text-3xl/4 "
       break
     case "normal":
-      iconClass += "text-xl/4 "
+      cls += "text-xl/4 "
       break
     case "small":
-      iconClass += "text-base/4 "
+      cls += "text-base/4 "
       break
   }
-  return iconClass
+  return cls
+})
+
+const badgeIconClass = computed(() => {
+  if (!props.badgeIcon) return ""
+  return chamiloIconToClass[props.badgeIcon] || ""
+})
+
+const badgePositionClass = computed(() => {
+  const positions = {
+    "top-left": "-top-2 -left-4",
+    "top-right": "-top-2 -right-4",
+    "bottom-left": "-bottom-2 -left-4",
+    "bottom-right": "-bottom-2 -right-4",
+  }
+  return positions[props.badgePosition]
 })
 </script>

assets/vue/components/layout/TopbarLoggedIn.vue

@@ -7,20 +7,14 @@
       <BaseAppLink
         v-if="isTeacher && allowUsersToCreateCourses"
         :to="{ name: 'CourseCreate' }"
-        class="item-button item-button--create-course relative group"
-        :title="t('Create course')"
-        :aria-label="t('Create course')"
+        class="item-button"
       >
         <BaseIcon
-          class="item-button__icon text-success"
           icon="courses"
+          badge-icon="plus"
+          :tooltip="t('Create course')"
+          class="item-button__icon text-success"
         />
-        <span class="absolute -top-1 -left-1 text-success text-base font-bold leading-none">+</span>
-        <span
-          class="absolute top-full left-1/2 -translate-x-1/2 mt-1 px-2 py-1 text-xs text-white bg-gray-90 rounded whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none"
-        >
-          {{ t("Create course") }}
-        </span>
       </BaseAppLink>
       <BaseAppLink
         v-if="!isAnonymous && 'false' !== platformConfigStore.getSetting('ticket.show_link_ticket_notification')"
@@ -113,7 +107,7 @@ const messageRelUserStore = useMessageRelUserStore()
 const notification = useNotification()
 const cidReqStore = useCidReqStore()
 const securityStore = useSecurityStore()
-const { isTeacher } = storeToRefs(useSecurityStore())
+const { isTeacher } = storeToRefs(securityStore)
 
 const loginUrl = "/login"
 const elUserSubmenu = ref(null)