Refactoring search, navigation, canvas and others to fit the new data model

components/explorer/NavigationLink.vue

@@ -35,7 +35,9 @@ function hideLeftPanel(_: Event)
 <template>
     <div class="tree-item" v-if="project && !isNaN(project)">
         <template v-if="hasChildren">
-            <div class="tree-item-self" :class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }" data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed">
+            <div class="tree-item-self"
+                :class="{ 'is-collapsed': collapsed, 'mod-collapsible is-clickable': hasChildren }"
+                data-path="{{ props.link.title }}" @click="collapsed = hasChildren && !collapsed">
                 <div v-if="hasChildren" class="tree-item-icon collapse-icon">
                     <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
                         stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
@@ -46,10 +48,11 @@ function hideLeftPanel(_: Event)
                 <div class="tree-item-inner">{{ link.title }}</div>
             </div>
             <div v-if="!collapsed" class="tree-item-children">
-                <NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project"/>
+                <NavigationLink v-if="hasChildren" v-for="l of link.children" :link="l" :project="project" />
             </div>
         </template>
-        <NuxtLink @click="hideLeftPanel" v-else class="tree-item-self" :to="`/explorer/${project}${link.path}`" :active-class="'mod-active'" >
+        <NuxtLink @click="hideLeftPanel" v-else class="tree-item-self" :to="`/explorer/${project}${link.path}`"
+            :active-class="'mod-active'" :data-type="link.type === 'Canvas' ? 'graph' : undefined">
             <div class="tree-item-inner">{{ link.title }}</div>
         </NuxtLink>
     </div>

components/explorer/RightComponent.vue

@@ -1,11 +1,9 @@
 <script setup lang="ts">
-interface Props
-{
-    id: number;
-}
-const props = defineProps<Props>();
-
-const { data: comments } = await useFetch(`/api/project/1/file/${props.id}/comment`);
+const { data: comments } = await useFetch(`/api/project/1/comment`, {
+    query: {
+        path: unifySlug(useRoute().params.slug)
+    }
+});
 </script>
 
 <template>