refactor to UI components

src/components/ViewModes/Mindmap.vue

@@ -221,8 +221,11 @@ const mindmaps = computed<Mindmap[]>(() => {
   }, [] as string[][])
   return mindmaps
     .filter((mindmap) => mindmap.length > 1)
+    .sort((a, b) => b.length - a.length)
     .sort((a, b) => {
-      return a.includes(rootNote.value?.id || '') ? b.length - a.length : 1
+      return (
+        Number(b.includes(rootNote.value?.id || '')) - Number(a.includes(rootNote.value?.id || ''))
+      )
     })
     .slice(0, 5)
     .map((mindmap): Mindmap => {
@@ -270,18 +273,17 @@ const links = computed(() => {
 </script>
 <template>
   <div class="flex h-full flex-grow flex-col">
-    <div class="tabs">
-      <a
-        class="tab-bordered tab-lifted tab tab-md"
-        :class="mindmap.id === selectedMindmap?.id && 'tab-active !border-primary text-primary'"
+    <UITabs>
+      <UITab
         v-for="mindmap in mindmaps"
         :key="mindmap.id"
+        :active="mindmap.id === selectedMindmap?.id"
         @click="selectedMindmap = mindmap"
       >
         <i class="fas fa-fw fa-home root mr-1" v-if="mindmap.isRoot" />
         {{ mindmap.notes.length }} notes
-      </a>
-    </div>
+      </UITab>
+    </UITabs>
     <div id="mindmap" ref="mindmapElement" class="h-full"></div>
   </div>
 </template>