feat(breadcrumbs): replace > with icon & improved displayed parents description

Author: TheGeniusOfEternity

src/presentation/components/breadcrumbs/BreadCrumbs.vue

@@ -3,9 +3,13 @@
     v-for="(parent, index) in displayedParents"
     :key="index"
     :to="{ path: parent.id ? `/note/${parent.id}` : '' }"
+    class="breadcrumb"
   >
     {{ parent.content ? getTitle(parent.content) : '...' }}
-    <span v-if="index < displayedParents.length - 1"> > </span>
+    <Icon
+      v-if="index < displayedParents.length - 1"
+      name="ChevronRight"
+    />
   </RouterLink>
 </template>
 
@@ -15,12 +19,14 @@ import { getTitle } from '@/infrastructure/utils/note.ts';
 import { RouterLink } from 'vue-router';
 import { computed } from 'vue';
 import { Note } from '@/domain/entities/Note.ts';
+import { Icon } from '@codexteam/ui/vue';
 
 const props = defineProps<{
   noteParents: Note[];
 }>();
 /**
- * Displayed parents
+ * Note's parents hierarchy
+ * If there are more than 3, only the closest & the furthest ones are shown
  */
 const displayedParents = computed(() => {
   if (props.noteParents.length > 3) {
@@ -37,5 +43,8 @@ const displayedParents = computed(() => {
 </script>
 
 <style scoped>
-
+.breadcrumb {
+  display: inline-flex;
+  align-items: center;
+}
 </style>