feat(tree): compute tree based on fsPath

package.json

@@ -36,7 +36,7 @@
     "dev:prepare": "nuxt-module-build build --stub src/module && nuxt-module-build prepare src/module && nuxi prepare playground/docus",
     "release": "pnpm run lint && pnpm run test && pnpm run prepack && changelogen --release && npm publish && git push --follow-tags",
     "lint": "eslint .",
-    "typecheck": "nuxt typecheck",
+    "typecheck": "nuxt typecheck && vue-tsc -p src/app/tsconfig.app.json",
     "verify": "pnpm run lint && pnpm run typecheck && pnpm run test",
     "test": "vitest run",
     "test:watch": "vitest watch",

src/app/src/app.vue

@@ -33,13 +33,13 @@ function detectActiveDocuments() {
 }
 
 async function editContentFile(id: string) {
-  await context.activeTree.value.selectItemById(id)
+  await context.activeTree.value.selectItemByFsPath(id)
   ui.open()
 }
 
 async function open() {
   await router.push(`/${location.value.feature}`)
-  await context.activeTree.value.selectItemById(location.value.itemId)
+  await context.activeTree.value.selectItemByFsPath(location.value.fsPath)
   ui.open()
 }
 

src/app/src/components/AppFooter.vue

@@ -7,12 +7,12 @@ const { ui, host, git } = useStudio()
 const { preferences, updatePreference, unsetActiveLocation } = useStudioState()
 const user = host.user.get()
 
-const showTechnicalMode = computed({
-  get: () => preferences.value.showTechnicalMode,
-  set: (value) => {
-    updatePreference('showTechnicalMode', value)
-  },
-})
+// const showTechnicalMode = computed({
+//   get: () => preferences.value.showTechnicalMode,
+//   set: (value) => {
+//     updatePreference('showTechnicalMode', value)
+//   },
+// })
 
 const repositoryUrl = computed(() => git.getBranchUrl())
 const userMenuItems = computed(() => [
@@ -55,7 +55,7 @@ function closeStudio() {
       :items="userMenuItems"
       :ui="{ content: 'w-full' }"
     >
-      <template #view-mode>
+      <!-- <template #view-mode>
         <div
           class="w-full"
           @click.stop
@@ -67,7 +67,7 @@ function closeStudio() {
             :ui="{ root: 'w-full flex-row-reverse justify-between', wrapper: 'ms-0' }"
           />
         </div>
-      </template>
+      </template> -->
       <UButton
         color="neutral"
         variant="ghost"

src/app/src/components/content/ContentCard.vue

@@ -21,6 +21,8 @@ const props = defineProps({
 })
 
 const itemExtensionIcon = computed(() => getFileIcon(props.item.fsPath))
+const collectionName = computed(() => props.item.collections[0])
+const isDirectory = computed(() => props.item.type === 'directory')
 </script>
 
 <template>
@@ -42,5 +44,13 @@ const itemExtensionIcon = computed(() => getFileIcon(props.item.fsPath))
         />
       </div>
     </template>
+    <template #bottom-right>
+      <UBadge
+        v-if="!isDirectory"
+        :label="collectionName"
+        size="xs"
+        variant="soft"
+      />
+    </template>
   </ItemCard>
 </template>

src/app/src/components/header/HeaderMain.vue

@@ -29,7 +29,7 @@ const current = computed({
     await router.push({ name })
 
     const currentItem = context.activeTree.value.currentItem.value
-    setLocation(name, currentItem?.id)
+    setLocation(name, currentItem.fsPath)
 
     // Ensure root item status is up to date when navigating by selecting computed
     if (currentItem.type === 'root') {

src/app/src/components/header/HeaderReview.vue

@@ -78,7 +78,7 @@ async function publishChanges() {
 
 async function backToEditor() {
   router.push(`/${location.value.feature}`)
-  await context.activeTree.value.selectItemById(location.value.itemId)
+  await context.activeTree.value.selectItemByFsPath(location.value.fsPath)
 }
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

src/app/src/components/media/MediaImageEditor.vue

@@ -117,7 +117,7 @@ const githubPath = computed(() => {
 
     <div class="p-3 rounded-lg bg-default border border-muted relative">
       <div class="absolute top-3 right-3">
-        <CopyButton :content="mediaItem.path" />
+        <CopyButton :content="mediaItem.path!" />
       </div>
       <div class="flex items-center gap-1 text-xs text-muted mb-2">
         <UIcon

src/app/src/components/shared/item/ItemActionsDropdown.vue

@@ -72,7 +72,7 @@ const actions = computed<DropdownMenuItem[]>(() => {
         if (!isOneStepAction) {
           if (props.item.type === 'directory' && [StudioItemActionId.CreateDocument, StudioItemActionId.CreateDocumentFolder, StudioItemActionId.CreateMediaFolder].includes(action.id)) {
             // Navigate into folder before adding form creation
-            context.activeTree.value.selectItemById(props.item.id)
+            context.activeTree.value.selectItemByFsPath(props.item.fsPath)
           }
 
           action.handler!(props.item)

src/app/src/components/shared/item/ItemActionsToolbar.vue

@@ -84,7 +84,7 @@ const actionHandler = (action: StudioAction<StudioItemActionId> & { isPending?:
   if (!action.isOneStepAction) {
     if (action.id === StudioItemActionId.RenameItem) {
       // Navigate to parent since rename form is displayed in the parent tree
-      context.activeTree.value.selectParentById(targetItem.id)
+      context.activeTree.value.selectParentByFsPath(targetItem.fsPath)
     }
 
     action.handler!(targetItem)
@@ -138,8 +138,8 @@ onUnmounted(() => {
         :icon="action.icon"
         :disabled="action.disabled"
         size="sm"
-        :color="action.color"
-        :variant="action.variant"
+        :color="action.color as never"
+        :variant="action.variant as never"
         :loading="action.isLoading"
         @click="actionHandler(action, $event)"
       />

src/app/src/components/shared/item/ItemBadge.vue

@@ -13,7 +13,7 @@ defineProps({
 
 <template>
   <UBadge
-    :color="COLOR_UI_STATUS_MAP[status]"
+    :color="COLOR_UI_STATUS_MAP[status] as never"
     :label="status"
     variant="soft"
     size="sm"

src/app/src/components/shared/item/ItemBreadcrumb.vue

@@ -4,7 +4,7 @@ import type { DropdownMenuItem } from '@nuxt/ui/components/DropdownMenu.vue.d.ts
 import { computed, unref } from 'vue'
 import { type TreeItem, TreeStatus } from '../../../types'
 import { useStudio } from '../../../composables/useStudio'
-import { findParentFromId } from '../../../utils/tree'
+import { findParentFromFsPath } from '../../../utils/tree'
 
 const { context } = useStudio()
 
@@ -21,7 +21,7 @@ const items = computed<BreadcrumbItem[]>(() => {
     },
   }
 
-  if (currentItem.value.id === rootTreeItem.id) {
+  if (currentItem.value.fsPath === rootTreeItem.fsPath) {
     return [rootBreadcrumbItem]
   }
 
@@ -37,7 +37,7 @@ const items = computed<BreadcrumbItem[]>(() => {
       },
     })
 
-    currentTreeItem = findParentFromId(tree.value, currentTreeItem.id)
+    currentTreeItem = findParentFromFsPath(tree.value, currentTreeItem.fsPath)
   }
 
   const allItems = [rootBreadcrumbItem, ...breadcrumbItems]
@@ -75,7 +75,7 @@ const items = computed<BreadcrumbItem[]>(() => {
       color="neutral"
       :ui="{ link: 'text-sm', list: 'gap-0.5', separatorIcon: 'size-3', linkLeadingIcon: 'size-4' }"
     >
-      <template #ellipsis="{ item }">
+      <template #ellipsis="{ item }: { item: DropdownMenuItem }">
         <UDropdownMenu :items="item.children">
           <UButton
             :icon="item.icon"

src/app/src/components/shared/item/ItemCard.vue

@@ -21,8 +21,9 @@ const statusRingColor = computed(() => props.item.status && props.item.status !=
 
 const displayInfo = computed(() => {
   if (isDirectory.value) {
-    const count = props.item.children?.filter(child => !child.hide).length || 0
-    return `${count} ${count === 1 ? 'item' : 'items'}`
+    const itemcount = props.item.children?.filter(child => !child.hide).length || 0
+    const collectionCount = props.item.collections.length
+    return `${itemcount} ${itemcount === 1 ? 'item' : 'items'} from ${collectionCount} ${collectionCount === 1 ? 'collection' : 'collections'}`
   }
   return props.item.routePath || props.item.fsPath
 })
@@ -31,6 +32,7 @@ const displayInfo = computed(() => {
 <template>
   <UPageCard
     reverse
+    variant="subtle"
     class="cursor-pointer hover:bg-muted relative w-full min-w-0 overflow-hidden"
     :class="statusRingColor"
     :ui="{ container: 'overflow-hidden' }"
@@ -40,7 +42,7 @@ const displayInfo = computed(() => {
         <div class="flex items-start gap-3">
           <div
             v-if="!isDirectory"
-            class="relative flex-shrink-0 w-12 h-12"
+            class="relative shrink-0 w-12 h-12"
           >
             <div class="w-full h-full bg-size-[24px_24px] bg-position-[0_0,0_12px,12px_-12px,-12px_0] rounded-lg overflow-hidden bg-elevated">
               <slot name="thumbnail" />
@@ -79,7 +81,10 @@ const displayInfo = computed(() => {
             </div>
           </div>
 
-          <ItemActionsDropdown :item="item" />
+          <div class="flex flex-col items-end justify-between self-stretch">
+            <ItemActionsDropdown :item="item" />
+            <slot name="bottom-right" />
+          </div>
         </div>
       </UTooltip>
     </template>

src/app/src/components/shared/item/ItemCardForm.vue

@@ -72,7 +72,7 @@ const schema = computed(() => z.object({
 
   const isDuplicate = siblings.some((sibling) => {
     const siblingBaseName = sibling.fsPath.split('/').pop()
-    if (props.renamedItem && sibling.id === props.renamedItem.id) {
+    if (props.renamedItem && sibling.fsPath === props.renamedItem.fsPath) {
       return false
     }
     return siblingBaseName === fullName.value
@@ -204,7 +204,7 @@ async function onSubmit() {
     case StudioItemActionId.RenameItem:
       params = {
         newFsPath: newFsPath,
-        id: props.renamedItem.id,
+        item: props.renamedItem,
       }
       break
     case StudioItemActionId.CreateDocumentFolder:
@@ -307,7 +307,7 @@ async function onSubmit() {
                       <span />
                     </template>
                     <USelect
-                      v-model="state.extension"
+                      v-model="state.extension as string"
                       :items="config.allowed"
                       :disabled="!config.editable || isLoading"
                       variant="soft"
@@ -324,7 +324,7 @@ async function onSubmit() {
                 </UTooltip>
               </div>
 
-              <div class="flex-shrink-0 flex gap-1">
+              <div class="shrink-0 flex gap-1">
                 <UButton
                   color="neutral"
                   variant="ghost"

src/app/src/components/shared/item/ItemTree.vue

@@ -40,7 +40,7 @@ const cardComponent = computed(() => {
 const isItemBeingRenamed = (item: TreeItem) => {
   if (context.actionInProgress.value?.id !== StudioItemActionId.RenameItem) return false
 
-  return context.actionInProgress.value?.item?.id === item.id
+  return context.actionInProgress.value?.item?.fsPath === item.fsPath
 }
 
 const formComponent = computed(() => {
@@ -64,7 +64,7 @@ const formComponent = computed(() => {
       </li>
       <li
         v-for="(item, index) in visibleTree"
-        :key="`${item.id}-${index}`"
+        :key="`${item.fsPath}-${index}`"
       >
         <component
           :is="cardComponent"