feat: file manager improvements + tree db model

server/graph/resolvers/tree.js

@@ -12,6 +12,9 @@ const reTitle = /^[^<>"]+$/
 
 module.exports = {
   Query: {
+    /**
+     * FETCH TREE
+     */
     async tree (obj, args, context, info) {
       // Offset
       const offset = args.offset || 0
@@ -20,8 +23,8 @@ module.exports = {
       }
 
       // Limit
-      const limit = args.limit || 100
-      if (limit < 1 || limit > 100) {
+      const limit = args.limit || 1000
+      if (limit < 1 || limit > 1000) {
         throw new Error('Invalid Limit')
       }
 
@@ -53,17 +56,27 @@ module.exports = {
         .select(WIKI.db.knex.raw('tree.*, nlevel(tree."folderPath") AS depth'))
         .where(builder => {
           builder.where('folderPath', '~', folderPathCondition)
+          // -> Include ancestors
           if (args.includeAncestors) {
             const parentPathParts = parentPath.split('.')
             for (let i = 1; i <= parentPathParts.length; i++) {
               builder.orWhere({
                 folderPath: _.dropRight(parentPathParts, i).join('.'),
-                fileName: _.nth(parentPathParts, i * -1)
+                fileName: _.nth(parentPathParts, i * -1),
+                type: 'folder'
               })
             }
           }
+          // -> Include root items
+          if (args.includeRootItems) {
+            builder.orWhere({
+              folderPath: '',
+              type: 'folder'
+            })
+          }
         })
         .andWhere(builder => {
+          // -> Limit to specific types
           if (args.types && args.types.length > 0) {
             builder.whereIn('type', args.types)
           }
@@ -85,20 +98,52 @@ module.exports = {
         createdAt: item.createdAt,
         updatedAt: item.updatedAt,
         ...(item.type === 'folder') && {
-          childrenCount: 0
+          childrenCount: item.meta?.children || 0
         }
       }))
     },
+    /**
+     * FETCH SINGLE FOLDER BY ID
+     */
     async folderById (obj, args, context) {
       const folder = await WIKI.db.knex('tree')
         .select(WIKI.db.knex.raw('tree.*, nlevel(tree."folderPath") AS depth'))
         .where('id', args.id)
         .first()
 
+      if (!folder) {
+        throw new Error('ERR_FOLDER_NOT_EXIST')
+      }
+
       return {
         ...folder,
         folderPath: folder.folderPath.replaceAll('.', '/').replaceAll('_', '-'),
-        childrenCount: 0
+        childrenCount: folder.meta?.children || 0
+      }
+    },
+    /**
+     * FETCH SINGLE FOLDER BY PATH
+     */
+    async folderByPath (obj, args, context) {
+      const parentPathParts = args.path.replaceAll('/', '.').replaceAll('-', '_').split('.')
+      const folder = await WIKI.db.knex('tree')
+        .select(WIKI.db.knex.raw('tree.*, nlevel(tree."folderPath") AS depth'))
+        .where({
+          siteId: args.siteId,
+          localeCode: args.locale,
+          folderPath: _.dropRight(parentPathParts).join('.'),
+          fileName: _.last(parentPathParts)
+        })
+        .first()
+
+      if (!folder) {
+        throw new Error('ERR_FOLDER_NOT_EXIST')
+      }
+
+      return {
+        ...folder,
+        folderPath: folder.folderPath.replaceAll('.', '/').replaceAll('_', '-'),
+        childrenCount: folder.meta?.children || 0
       }
     }
   },
@@ -108,48 +153,8 @@ module.exports = {
      */
     async createFolder (obj, args, context) {
       try {
-        WIKI.logger.debug(`Creating new folder ${args.pathName}...`)
-
-        // Get parent path
-        let parentPath = ''
-        if (args.parentId) {
-          const parent = await WIKI.db.knex('tree').where('id', args.parentId).first()
-          parentPath = parent ? `${parent.folderPath}.${parent.fileName}` : ''
-          if (parent) {
-            parentPath = parent.folderPath ? `${parent.folderPath}.${parent.fileName}` : parent.fileName
-          }
-          parentPath = parentPath.replaceAll('-', '_')
-        }
-
-        // Validate path name
-        if (!rePathName.test(args.pathName)) {
-          throw new Error('ERR_INVALID_PATH_NAME')
-        }
+        await WIKI.db.tree.createFolder(args)
 
-        // Validate title
-        if (!reTitle.test(args.title)) {
-          throw new Error('ERR_INVALID_TITLE')
-        }
-
-        // Check for collision
-        const existingFolder = await WIKI.db.knex('tree').where({
-          siteId: args.siteId,
-          folderPath: parentPath,
-          fileName: args.pathName
-        }).first()
-        if (existingFolder) {
-          throw new Error('ERR_FOLDER_ALREADY_EXISTS')
-        }
-
-        // Create folder
-        WIKI.logger.debug(`Creating new folder ${args.pathName} at path /${parentPath}...`)
-        await WIKI.db.knex('tree').insert({
-          folderPath: parentPath,
-          fileName: args.pathName,
-          type: 'folder',
-          title: args.title,
-          siteId: args.siteId
-        })
         return {
           operation: graphHelper.generateSuccess('Folder created successfully')
         }
@@ -163,59 +168,7 @@ module.exports = {
      */
     async renameFolder (obj, args, context) {
       try {
-        // Get folder
-        const folder = await WIKI.db.knex('tree').where('id', args.folderId).first()
-        WIKI.logger.debug(`Renaming folder ${folder.id} path to ${args.pathName}...`)
-
-        // Validate path name
-        if (!rePathName.test(args.pathName)) {
-          throw new Error('ERR_INVALID_PATH_NAME')
-        }
-
-        // Validate title
-        if (!reTitle.test(args.title)) {
-          throw new Error('ERR_INVALID_TITLE')
-        }
-
-        if (args.pathName !== folder.fileName) {
-          // Check for collision
-          const existingFolder = await WIKI.db.knex('tree')
-            .whereNot('id', folder.id)
-            .andWhere({
-              siteId: folder.siteId,
-              folderPath: folder.folderPath,
-              fileName: args.pathName
-            }).first()
-          if (existingFolder) {
-            throw new Error('ERR_FOLDER_ALREADY_EXISTS')
-          }
-
-          // Build new paths
-          const oldFolderPath = (folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName).replaceAll('-', '_')
-          const newFolderPath = (folder.folderPath ? `${folder.folderPath}.${args.pathName}` : args.pathName).replaceAll('-', '_')
-
-          // Update children nodes
-          WIKI.logger.debug(`Updating parent path of children nodes from ${oldFolderPath} to ${newFolderPath} ...`)
-          await WIKI.db.knex('tree').where('siteId', folder.siteId).andWhere('folderPath', oldFolderPath).update({
-            folderPath: newFolderPath
-          })
-          await WIKI.db.knex('tree').where('siteId', folder.siteId).andWhere('folderPath', '<@', oldFolderPath).update({
-            folderPath: WIKI.db.knex.raw(`'${newFolderPath}' || subpath(tree."folderPath", nlevel('${newFolderPath}'))`)
-          })
-
-          // Rename the folder itself
-          await WIKI.db.knex('tree').where('id', folder.id).update({
-            fileName: args.pathName,
-            title: args.title
-          })
-        } else {
-          // Update the folder title only
-          await WIKI.db.knex('tree').where('id', folder.id).update({
-            title: args.title
-          })
-        }
-
-        WIKI.logger.debug(`Renamed folder ${folder.id} successfully.`)
+        await WIKI.db.tree.renameFolder(args)
 
         return {
           operation: graphHelper.generateSuccess('Folder renamed successfully')
@@ -230,39 +183,7 @@ module.exports = {
      */
     async deleteFolder (obj, args, context) {
       try {
-        // Get folder
-        const folder = await WIKI.db.knex('tree').where('id', args.folderId).first()
-        const folderPath = folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName
-        WIKI.logger.debug(`Deleting folder ${folder.id} at path ${folderPath}...`)
-
-        // Delete all children
-        const deletedNodes = await WIKI.db.knex('tree').where('folderPath', '<@', folderPath).del().returning(['id', 'type'])
-
-        // Delete folders
-        const deletedFolders = deletedNodes.filter(n => n.type === 'folder').map(n => n.id)
-        if (deletedFolders.length > 0) {
-          WIKI.logger.debug(`Deleted ${deletedFolders.length} children folders.`)
-        }
-
-        // Delete pages
-        const deletedPages = deletedNodes.filter(n => n.type === 'page').map(n => n.id)
-        if (deletedPages.length > 0) {
-          WIKI.logger.debug(`Deleting ${deletedPages.length} children pages...`)
-
-          // TODO: Delete page
-        }
-
-        // Delete assets
-        const deletedAssets = deletedNodes.filter(n => n.type === 'asset').map(n => n.id)
-        if (deletedAssets.length > 0) {
-          WIKI.logger.debug(`Deleting ${deletedPages.length} children assets...`)
-
-          // TODO: Delete asset
-        }
-
-        // Delete the folder itself
-        await WIKI.db.knex('tree').where('id', folder.id).del()
-        WIKI.logger.debug(`Deleted folder ${folder.id} successfully.`)
+        await WIKI.db.tree.deleteFolder(args.folderId)
 
         return {
           operation: graphHelper.generateSuccess('Folder deleted successfully')

server/graph/schemas/tree.graphql

@@ -14,16 +14,24 @@ extend type Query {
     orderByDirection: OrderByDirection
     depth: Int
     includeAncestors: Boolean
+    includeRootItems: Boolean
     ): [TreeItem]
   folderById(
     id: UUID!
   ): TreeItemFolder
+  folderByPath(
+    siteId: UUID!
+    locale: String!
+    path: String!
+  ): TreeItemFolder
 }
 
 extend type Mutation {
   createFolder(
     siteId: UUID!
+    locale: String!
     parentId: UUID
+    parentPath: String
     pathName: String!
     title: String!
   ): DefaultResponse

server/models/tree.js

+const Model = require('objection').Model
+const _ = require('lodash')
+
+const rePathName = /^[a-z0-9-]+$/
+const reTitle = /^[^<>"]+$/
+
+/**
+ * Tree model
+ */
+module.exports = class Tree extends Model {
+  static get tableName() { return 'tree' }
+
+  static get jsonSchema () {
+    return {
+      type: 'object',
+      required: ['fileName'],
+
+      properties: {
+        id: {type: 'string'},
+        folderPath: {type: 'string'},
+        fileName: {type: 'string'},
+        type: {type: 'string'},
+        title: {type: 'string'},
+        createdAt: {type: 'string'},
+        updatedAt: {type: 'string'}
+      }
+    }
+  }
+
+  static get jsonAttributes() {
+    return ['meta']
+  }
+
+  static get relationMappings() {
+    return {
+      locale: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: require('./locales'),
+        join: {
+          from: 'tree.localeCode',
+          to: 'locales.code'
+        }
+      },
+      site: {
+        relation: Model.BelongsToOneRelation,
+        modelClass: require('./sites'),
+        join: {
+          from: 'tree.siteId',
+          to: 'sites.id'
+        }
+      }
+    }
+  }
+
+  $beforeUpdate() {
+    this.updatedAt = new Date().toISOString()
+  }
+  $beforeInsert() {
+    this.createdAt = new Date().toISOString()
+    this.updatedAt = new Date().toISOString()
+  }
+
+  /**
+   * Create New Folder
+   *
+   * @param {Object} args - New Folder Properties
+   * @param {string} [args.parentId] - UUID of the parent folder
+   * @param {string} [args.parentPath] - Path of the parent folder
+   * @param {string} args.pathName - Path name of the folder to create
+   * @param {string} args.title - Title of the folder to create
+   * @param {string} args.locale - Locale code of the folder to create
+   * @param {string} args.siteId - UUID of the site in which the folder will be created
+   */
+  static async createFolder ({ parentId, parentPath, pathName, title, locale, siteId }) {
+    // Validate path name
+    if (!rePathName.test(pathName)) {
+      throw new Error('ERR_INVALID_PATH_NAME')
+    }
+
+    // Validate title
+    if (!reTitle.test(title)) {
+      throw new Error('ERR_INVALID_TITLE')
+    }
+
+    WIKI.logger.debug(`Creating new folder ${pathName}...`)
+    parentPath = parentPath?.replaceAll('/', '.')?.replaceAll('-', '_') || ''
+    const parentPathParts = parentPath.split('.')
+    const parentFilter = {
+      folderPath: _.dropRight(parentPathParts).join('.'),
+      fileName: _.last(parentPathParts)
+    }
+
+    // Get parent path
+    let parent = null
+    if (parentId) {
+      parent = await WIKI.db.knex('tree').where('id', parentId).first()
+      if (!parent) {
+        throw new Error('ERR_NONEXISTING_PARENT_ID')
+      }
+      parentPath = parent.folderPath ? `${parent.folderPath}.${parent.fileName}` : parent.fileName
+    } else if (parentPath) {
+      parent = await WIKI.db.knex('tree').where(parentFilter).first()
+    } else {
+      parentPath = ''
+    }
+
+    // Check for collision
+    const existingFolder = await WIKI.db.knex('tree').where({
+      siteId: siteId,
+      localeCode: locale,
+      folderPath: parentPath,
+      fileName: pathName
+    }).first()
+    if (existingFolder) {
+      throw new Error('ERR_FOLDER_ALREADY_EXISTS')
+    }
+
+    // Ensure all ancestors exist
+    if (parentPath) {
+      const expectedAncestors = []
+      const existingAncestors = await WIKI.db.knex('tree').select('folderPath', 'fileName').where(builder => {
+        const parentPathParts = parentPath.split('.')
+        for (let i = 1; i <= parentPathParts.length; i++) {
+          const ancestor = {
+            folderPath: _.dropRight(parentPathParts, i).join('.'),
+            fileName: _.nth(parentPathParts, i * -1)
+          }
+          expectedAncestors.push(ancestor)
+          builder.orWhere({
+            ...ancestor,
+            type: 'folder'
+          })
+        }
+      })
+      for (const ancestor of _.differenceWith(expectedAncestors, existingAncestors, (expAnc, exsAnc) => expAnc.folderPath === exsAnc.folderPath && expAnc.fileName === exsAnc.fileName)) {
+        WIKI.logger.debug(`Creating missing parent folder ${ancestor.fileName} at path /${ancestor.folderPath}...`)
+        const newAncestor = await WIKI.db.knex('tree').insert({
+          ...ancestor,
+          type: 'folder',
+          title: ancestor.fileName,
+          localeCode: locale,
+          siteId: siteId,
+          meta: {
+            children: 1
+          }
+        }).returning('*')
+
+        // Parent didn't exist until now, assign it
+        if (!parent && ancestor.folderPath === parentFilter.folderPath && ancestor.fileName === parentFilter.fileName) {
+          parent = newAncestor
+        }
+      }
+    }
+
+    // Create folder
+    WIKI.logger.debug(`Creating new folder ${pathName} at path /${parentPath}...`)
+    await WIKI.db.knex('tree').insert({
+      folderPath: parentPath,
+      fileName: pathName,
+      type: 'folder',
+      title: title,
+      localeCode: locale,
+      siteId: siteId,
+      meta: {
+        children: 0
+      }
+    })
+
+    // Update parent ancestor count
+    if (parent) {
+      await WIKI.db.knex('tree').where('id', parent.id).update({
+        meta: {
+          ...(parent.meta ?? {}),
+          children: (parent.meta?.children || 0) + 1
+        }
+      })
+    }
+  }
+
+  /**
+   * Rename a folder
+   *
+   * @param {Object} args - Rename Folder Properties
+   * @param {string} args.folderId - UUID of the folder to rename
+   * @param {string} args.pathName - New path name of the folder
+   * @param {string} args.title - New title of the folder
+   */
+  static async renameFolder ({ folderId, pathName, title }) {
+    // Get folder
+    const folder = await WIKI.db.knex('tree').where('id', folderId).first()
+    if (!folder) {
+      throw new Error('ERR_NONEXISTING_FOLDER_ID')
+    }
+
+    // Validate path name
+    if (!rePathName.test(pathName)) {
+      throw new Error('ERR_INVALID_PATH_NAME')
+    }
+
+    // Validate title
+    if (!reTitle.test(title)) {
+      throw new Error('ERR_INVALID_TITLE')
+    }
+
+    WIKI.logger.debug(`Renaming folder ${folder.id} path to ${pathName}...`)
+
+    if (pathName !== folder.fileName) {
+      // Check for collision
+      const existingFolder = await WIKI.db.knex('tree')
+        .whereNot('id', folder.id)
+        .andWhere({
+          siteId: folder.siteId,
+          folderPath: folder.folderPath,
+          fileName: pathName
+        }).first()
+      if (existingFolder) {
+        throw new Error('ERR_FOLDER_ALREADY_EXISTS')
+      }
+
+      // Build new paths
+      const oldFolderPath = (folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName).replaceAll('-', '_')
+      const newFolderPath = (folder.folderPath ? `${folder.folderPath}.${pathName}` : pathName).replaceAll('-', '_')
+
+      // Update children nodes
+      WIKI.logger.debug(`Updating parent path of children nodes from ${oldFolderPath} to ${newFolderPath} ...`)
+      await WIKI.db.knex('tree').where('siteId', folder.siteId).andWhere('folderPath', oldFolderPath).update({
+        folderPath: newFolderPath
+      })
+      await WIKI.db.knex('tree').where('siteId', folder.siteId).andWhere('folderPath', '<@', oldFolderPath).update({
+        folderPath: WIKI.db.knex.raw(`'${newFolderPath}' || subpath(tree."folderPath", nlevel('${newFolderPath}'))`)
+      })
+
+      // Rename the folder itself
+      await WIKI.db.knex('tree').where('id', folder.id).update({
+        fileName: pathName,
+        title: title
+      })
+    } else {
+      // Update the folder title only
+      await WIKI.db.knex('tree').where('id', folder.id).update({
+        title: title
+      })
+    }
+
+    WIKI.logger.debug(`Renamed folder ${folder.id} successfully.`)
+  }
+
+  /**
+   * Delete a folder
+   *
+   * @param {String} folderId Folder ID
+   */
+  static async deleteFolder (folderId) {
+    // Get folder
+    const folder = await WIKI.db.knex('tree').where('id', folderId).first()
+    if (!folder) {
+      throw new Error('ERR_NONEXISTING_FOLDER_ID')
+    }
+    const folderPath = folder.folderPath ? `${folder.folderPath}.${folder.fileName}` : folder.fileName
+    WIKI.logger.debug(`Deleting folder ${folder.id} at path ${folderPath}...`)
+
+    // Delete all children
+    const deletedNodes = await WIKI.db.knex('tree').where('folderPath', '<@', folderPath).del().returning(['id', 'type'])
+
+    // Delete folders
+    const deletedFolders = deletedNodes.filter(n => n.type === 'folder').map(n => n.id)
+    if (deletedFolders.length > 0) {
+      WIKI.logger.debug(`Deleted ${deletedFolders.length} children folders.`)
+    }
+
+    // Delete pages
+    const deletedPages = deletedNodes.filter(n => n.type === 'page').map(n => n.id)
+    if (deletedPages.length > 0) {
+      WIKI.logger.debug(`Deleting ${deletedPages.length} children pages...`)
+
+      // TODO: Delete page
+    }
+
+    // Delete assets
+    const deletedAssets = deletedNodes.filter(n => n.type === 'asset').map(n => n.id)
+    if (deletedAssets.length > 0) {
+      WIKI.logger.debug(`Deleting ${deletedPages.length} children assets...`)
+
+      // TODO: Delete asset
+    }
+
+    // Delete the folder itself
+    await WIKI.db.knex('tree').where('id', folder.id).del()
+
+    // Update parent children count
+    if (folder.folderPath) {
+      const parentPathParts = folder.folderPath.split('.')
+      const parent = await WIKI.db.knex('tree').where({
+        folderPath: _.dropRight(parentPathParts).join('.'),
+        fileName: _.last(parentPathParts)
+      }).first()
+      await WIKI.db.knex('tree').where('id', parent.id).update({
+        meta: {
+          ...(parent.meta ?? {}),
+          children: (parent.meta?.children || 1) - 1
+        }
+      })
+    }
+
+    WIKI.logger.debug(`Deleted folder ${folder.id} successfully.`)
+  }
+}

ux/public/_assets/icons/carbon-copy-empty-box.svg

+<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 100 100" width="100px" height="100px"><path d="M 18 27 A 1.0001 1.0001 0 0 0 17 28 L 17 75 C 17 80.511334 21.488666 85 27 85 L 72 85 C 77.511334 85 82 80.511334 82 75 L 82 28 A 1.0001 1.0001 0 0 0 81 27 L 18 27 z M 19 29 L 49 29 L 49 36 L 39.5 36 C 38.125015 36 37 37.125015 37 38.5 L 37 40.5 C 37 41.874985 38.125015 43 39.5 43 L 49 43 L 49 78 L 30.5 78 C 26.904219 78 24 75.095781 24 71.5 L 24 32.5 A 0.50005 0.50005 0 0 0 23.492188 31.992188 A 0.50005 0.50005 0 0 0 23 32.5 L 23 71.5 C 23 75.636219 26.363781 79 30.5 79 L 49.419922 79 A 0.50005 0.50005 0 0 0 49.582031 79 L 68.5 79 C 72.636219 79 76 75.636219 76 71.5 L 76 43.5 A 0.50005 0.50005 0 1 0 75 43.5 L 75 71.5 C 75 75.095781 72.095781 78 68.5 78 L 50 78 L 50 43 L 59.5 43 C 60.874985 43 62 41.874985 62 40.5 L 62 38.5 C 62 37.125015 60.874985 36 59.5 36 L 50 36 L 50 29 L 80 29 L 80 75 C 80 79.430666 76.430666 83 72 83 L 27 83 C 22.569334 83 19 79.430666 19 75 L 19 29 z M 75.492188 31.992188 A 0.50005 0.50005 0 0 0 75 32.5 L 75 38.5 A 0.50005 0.50005 0 1 0 76 38.5 L 76 32.5 A 0.50005 0.50005 0 0 0 75.492188 31.992188 z M 39.5 37 L 59.5 37 C 60.335015 37 61 37.664985 61 38.5 L 61 40.5 C 61 41.335015 60.335015 42 59.5 42 L 49.580078 42 A 0.50005 0.50005 0 0 0 49.417969 42 L 39.5 42 C 38.664985 42 38 41.335015 38 40.5 L 38 38.5 C 38 37.664985 38.664985 37 39.5 37 z M 31.492188 60.992188 A 0.50005 0.50005 0 0 0 31.097656 61.195312 L 29.146484 63.146484 A 0.50005 0.50005 0 1 0 29.853516 63.853516 L 31 62.707031 L 31 68.5 A 0.50005 0.50005 0 1 0 32 68.5 L 32 62.707031 L 33.146484 63.853516 A 0.50005 0.50005 0 1 0 33.853516 63.146484 L 31.898438 61.191406 A 0.50005 0.50005 0 0 0 31.492188 60.992188 z M 38.492188 60.992188 A 0.50005 0.50005 0 0 0 38.097656 61.195312 L 36.146484 63.146484 A 0.50005 0.50005 0 1 0 36.853516 63.853516 L 38 62.707031 L 38 68.5 A 0.50005 0.50005 0 1 0 39 68.5 L 39 62.707031 L 40.146484 63.853516 A 0.50005 0.50005 0 1 0 40.853516 63.146484 L 38.898438 61.191406 A 0.50005 0.50005 0 0 0 38.492188 60.992188 z M 28.5 70 A 0.50005 0.50005 0 1 0 28.5 71 L 41.5 71 A 0.50005 0.50005 0 1 0 41.5 70 L 28.5 70 z"/></svg>
\ No newline at end of file

ux/public/_assets/icons/fluent-bot-animated.svg

+<svg
+	xmlns="http://www.w3.org/2000/svg"
+	xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 48 48" width="96px" height="96px">
+	<defs>
+		<linearGradient id="p0leOTPLvuNkjL_fSa~qVa" x1="24" x2="24" y1="9.109" y2="13.568" data-name="Безымянный градиент 6" gradientUnits="userSpaceOnUse">
+			<stop offset="0" stop-color="#0077d2"/>
+			<stop offset="1" stop-color="#0b59a2"/>
+		</linearGradient>
+		<linearGradient id="p0leOTPLvuNkjL_fSa~qVb" x1="4.5" x2="4.5" y1="26.717" y2="41.786" xlink:href="#p0leOTPLvuNkjL_fSa~qVa"/>
+		<linearGradient id="p0leOTPLvuNkjL_fSa~qVc" x1="43.5" x2="43.5" y1="26.717" y2="41.786" xlink:href="#p0leOTPLvuNkjL_fSa~qVa"/>
+		<linearGradient id="p0leOTPLvuNkjL_fSa~qVd" x1="16" x2="16" y1="25.054" y2="43.495" xlink:href="#p0leOTPLvuNkjL_fSa~qVa"/>
+		<linearGradient id="p0leOTPLvuNkjL_fSa~qVe" x1="32" x2="32" y1="25.054" y2="43.495" xlink:href="#p0leOTPLvuNkjL_fSa~qVa"/>
+	</defs>
+	<rect width="2" height="6" x="23" y="8" fill="url(#p0leOTPLvuNkjL_fSa~qVa)"/>
+	<path fill="url(#p0leOTPLvuNkjL_fSa~qVb)" d="M6,27H8a0,0,0,0,1,0,0V37a0,0,0,0,1,0,0H6a5,5,0,0,1-5-5v0A5,5,0,0,1,6,27Z"/>
+	<path fill="url(#p0leOTPLvuNkjL_fSa~qVc)" d="M40,27h2a5,5,0,0,1,5,5v0a5,5,0,0,1-5,5H40a0,0,0,0,1,0,0V27A0,0,0,0,1,40,27Z"/>
+	<path fill="#199be2" d="M24,13h0A18,18,0,0,1,42,31v8a2,2,0,0,1-2,2H8a2,2,0,0,1-2-2V31A18,18,0,0,1,24,13Z"/>
+	<circle cx="16" cy="31" r="6" fill="url(#p0leOTPLvuNkjL_fSa~qVd)"/>
+	<circle cx="32" cy="31" r="6" fill="url(#p0leOTPLvuNkjL_fSa~qVe)"/>
+	<circle cx="32" cy="31" r="4" fill="#50e6ff"/>
+	<circle cx="32" cy="31" r="2" fill="url(#p0leOTPLvuNkjL_fSa~qVe)"/>
+	<circle cx="16" cy="31" r="4" fill="#50e6ff"/>
+	<circle cx="16" cy="31" r="2" fill="url(#p0leOTPLvuNkjL_fSa~qVd)"/>
+	<circle cx="24" cy="8" r="2" fill="#199be2"/>
+  <circle cx="24" cy="8" r="3" fill="#02C39A">
+    <animate attributeName="opacity" dur="1.5s" values="0;1;0;0" repeatCount="indefinite" begin="0.1" />
+  </circle>
+  <circle cx="24" cy="8" r="3" fill="#f99d4d">
+    <animate attributeName="opacity" dur="1.5s" values="0;0;1;0" repeatCount="indefinite" begin="0.1" />
+  </circle>
+</svg>

ux/public/_assets/illustrations/undraw_walking_outside.svg

+<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="888" height="677.20705" viewBox="0 0 888 677.20705" xmlns:xlink="http://www.w3.org/1999/xlink"><polygon points="307.693 659.535 316.417 662.148 330.648 629.74 317.772 625.884 307.693 659.535" fill="#ffb8b8"/><path d="M462.32048,767.41626l17.18156,5.1462.00069.00021a11.43063,11.43063,0,0,1,7.66935,14.22912l-.10659.35581-28.13113-8.4259Z" transform="translate(-156 -111.39648)" fill="#2f2e41"/><polygon points="390.602 666.663 399.153 663.528 391.13 629.055 378.51 633.682 390.602 666.663" fill="#ffb8b8"/><path d="M543.39769,776.06729l16.83948-6.17423.00068-.00025a11.43063,11.43063,0,0,1,14.6658,6.79715l.12785.34873L547.46038,787.1476Z" transform="translate(-156 -111.39648)" fill="#2f2e41"/><polygon points="322.321 600.868 307.464 649.897 325.292 655.097 342.378 609.782 322.321 600.868" fill="#2f2e41"/><polygon points="369.121 612.011 382.493 658.068 401.064 649.154 387.693 606.068 369.121 612.011" fill="#2f2e41"/><path d="M518.16217,731.71429a203.9796,203.9796,0,0,1-35.45752-3.27034l-.298-.06021v-11.3301l-6.78986-.75447,5.29979-18.92774c-2.47016-29.16024,1.03993-66.08934,2.17563-76.71865.26025-2.49265.43146-3.89132.43146-3.89132l5.95867-50.64955,9.97024-9.20308,4.52936,2.94751,8.40181,8.40145c9.766,24.0342,17.51548,46.661,17.56426,48.11483l32.75141,104.95321-.2209.156C551.10618,729.50964,533.77044,731.71429,518.16217,731.71429Z" transform="translate(-156 -111.39648)" fill="#3f3d56"/><polygon points="337.708 477.181 335.418 491.475 350.921 497.87 337.708 477.181" opacity="0.2"/><path d="M524.12819,556.834H488.28426a2.78413,2.78413,0,0,1-2.781-2.781v-15.45a20.703,20.703,0,0,1,41.40592,0v15.45A2.78412,2.78412,0,0,1,524.12819,556.834Z" transform="translate(-156 -111.39648)" fill="#2f2e41"/><circle cx="354.16363" cy="429.32816" r="15.17868" fill="#ffb8b8"/><path d="M531.807,540.148H509.88932l-.22481-3.14673-1.12374,3.14673h-3.37485l-.4454-6.23672-2.22727,6.23672h-6.53018v-.309a16.39537,16.39537,0,0,1,16.37682-16.377H515.43a16.39549,16.39549,0,0,1,16.377,16.377Z" transform="translate(-156 -111.39648)" fill="#2f2e41"/><path d="M509.70994,559.718a2.84058,2.84058,0,0,1-.49216-.04345l-16.04911-2.83169V530.31841h17.667l-.4374.51c-6.08554,7.09733-1.50079,18.60574,1.77373,24.834a2.73982,2.73982,0,0,1-.21772,2.90894A2.76982,2.76982,0,0,1,509.70994,559.718Z" transform="translate(-156 -111.39648)" fill="#2f2e41"/><path d="M538.02851,623.82967h-8.79718a1.1313,1.1313,0,0,1-1.13-1.02492l-1.7609-18.04893h14.579l-1.7609,18.04871A1.13131,1.13131,0,0,1,538.02851,623.82967Z" transform="translate(-156 -111.39648)" fill="#1976d2"/><path d="M540.89615,607.02652H526.36369a1.13668,1.13668,0,0,1-1.13534-1.13535v-2.72484a1.13668,1.13668,0,0,1,1.13534-1.13534h14.53246a1.13668,1.13668,0,0,1,1.13535,1.13534v2.72484A1.13669,1.13669,0,0,1,540.89615,607.02652Z" transform="translate(-156 -111.39648)" fill="#2f2e41"/><path d="M483.8924,616.06358l0,0a27.88129,27.88129,0,0,0,33.46807,6.76478l3.30359-1.635Z" transform="translate(-156 -111.39648)" opacity="0.2"/><path d="M536.71057,612.5695a6.96579,6.96579,0,0,0-10.67635.32242l-15.32558-4.30242-4.88606,8.67563,21.728,5.77187a7.00355,7.00355,0,0,0,9.16-10.4675Z" transform="translate(-156 -111.39648)" fill="#ffb8b8"/><path d="M500.13852,622.19727c-7.28644.00072-17.14532-4.27146-28.84884-12.546a5.73089,5.73089,0,0,1-2.4134-3.92759c-.86328-5.46918,4.4715-12.863,4.99455-13.57174l5.60811-15.40061c.06456-.25028,1.87184-6.91355,6.409-9.28432a7.43841,7.43841,0,0,1,6.21386-.26479c8.6423,3.147,1.894,27.44817.96757,30.63508l11.45016,5.38938,7.27119,4.6349,9.95773,1.04175-2.70358,12.51186-15.12275.34024A15.43364,15.43364,0,0,1,500.13852,622.19727Z" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M1043.67468,508.05561A98.57951,98.57951,0,1,0,854.454,546.865c-.09637-.10718-.196-.21149-.29193-.31909a98.66626,98.66626,0,0,0,17.95428,27.78283c.0224.02466.04541.04871.06788.07337.60559.66,1.21466,1.31659,1.83782,1.9599a98.28006,98.28006,0,0,0,69.52936,30.25354l-3.33105,180.9292h10.29126l-2.08283-119.41541,14.88678-7.83758-2.27093-4.31354-12.711,6.692-.97791-56.06378A98.57812,98.57812,0,0,0,1043.67468,508.05561Z" transform="translate(-156 -111.39648)" fill="#e6e6e6"/><path d="M751.0871,460.00819a115.52648,115.52648,0,1,0-221.74982,45.4812c-.113-.12561-.22968-.24784-.3421-.37393a115.62807,115.62807,0,0,0,21.04083,32.559c.02625.02893.05322.05706.07959.086.70972.7735,1.42346,1.543,2.15375,2.29682a115.17561,115.17561,0,0,0,81.48224,35.45447l-3.90375,212.033h12.06042l-2.44091-139.94428,17.446-9.185-2.66138-5.05505-14.89618,7.84247-1.146-65.70178A115.52494,115.52494,0,0,0,751.0871,460.00819Z" transform="translate(-156 -111.39648)" fill="#e6e6e6"/><path d="M419.25891,414.8147A131.46683,131.46683,0,1,0,166.912,466.57142c-.12855-.14295-.26138-.282-.38931-.42551a131.58166,131.58166,0,0,0,23.944,37.05149c.02989.03289.06059.065.09055.09787.80763.88021,1.61988,1.75582,2.45091,2.61373a131.0676,131.0676,0,0,0,92.72516,40.3465L281.291,787.54475h13.72454L292.23788,628.291,312.091,617.83869l-3.02856-5.75256-16.95154,8.92456-1.30411-74.76727A131.465,131.465,0,0,0,419.25891,414.8147Z" transform="translate(-156 -111.39648)" fill="#e6e6e6"/><circle cx="756.68549" cy="85.97574" r="85.97575" fill="#ff6584"/><circle cx="245.55884" cy="187.61628" r="172.3117" fill="#1976d2"/><path d="M274.32944,183.92207A172.32513,172.32513,0,0,0,561.45166,366.29173,172.32654,172.32654,0,1,1,274.32944,183.92207Z" transform="translate(-156 -111.39648)" opacity="0.2" style="isolation:isolate"/><polygon points="246.032 187.616 246.506 187.616 255.027 676.148 237.038 676.148 246.032 187.616" fill="#3f3d56"/><rect x="401.08538" y="564.58106" width="32.19013" height="8.5209" transform="translate(-372.96557 148.44822) rotate(-27.76587)" fill="#3f3d56"/><path d="M665.11523,782.975s.62171-13.02673,13.3664-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><circle cx="505.51413" cy="652.80328" r="6.37865" fill="#1976d2"/><rect x="504.47623" y="663.54456" width="1.80054" height="12.60376" fill="#3f3d56"/><path d="M223.08289,781.17445s.62168-13.02674,13.36641-11.51258" transform="translate(-156 -111.39648)" fill="#3f3d56"/><circle cx="63.48181" cy="651.00275" r="6.37865" fill="#1976d2"/><rect x="62.44391" y="661.74402" width="1.80054" height="12.60376" fill="#3f3d56"/><path d="M327.51416,782.07471s.6217-13.02673,13.36642-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><circle cx="167.91309" cy="651.90302" r="6.37865" fill="#1976d2"/><rect x="166.87518" y="662.64429" width="1.80054" height="12.60376" fill="#3f3d56"/><path d="M605.24329,194.695l12.79486-10.23341c-9.93976-1.09662-14.02381,4.3243-15.69525,8.615-7.76532-3.22446-16.21882,1.00135-16.21882,1.00135l25.6001,9.29375A19.37211,19.37211,0,0,0,605.24329,194.695Z" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M799.827,298.93629l12.7948-10.23343c-9.93976-1.09662-14.02381,4.32431-15.69526,8.615-7.76532-3.22446-16.21881,1.00134-16.21881,1.00134l25.6001,9.29376A19.37241,19.37241,0,0,0,799.827,298.93629Z" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M589.95459,387.88883l12.7948-10.23343c-9.93976-1.09662-14.0238,4.32431-15.69525,8.615-7.76532-3.22445-16.21881,1.00138-16.21881,1.00138l25.60009,9.29373A19.37244,19.37244,0,0,0,589.95459,387.88883Z" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M839.65527,787.70325s.62171-13.02673,13.3664-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M719.91943,787.70325s.62171-13.02673,13.3664-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M283.2887,787.70325s.6217-13.02673,13.36642-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M893.67145,787.70325s.6217-13.02673,13.36639-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M868.46387,787.70325s.6217-13.02673,13.36639-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M816.465,787.70325s-.62171-13.02673-13.3664-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M609.40308,787.70325s-.62171-13.02673-13.3664-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M437.4516,787.70325s-.6217-13.02673-13.36643-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M254.69688,787.70325s-.6217-13.02673-13.36641-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M947.90442,787.70325s-.62171-13.02673-13.3664-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><path d="M870.4812,788.60352s-.6217-13.02673-13.36639-11.51257" transform="translate(-156 -111.39648)" fill="#3f3d56"/><rect y="674.60352" width="888" height="2" fill="#3f3d56"/></svg>
\ No newline at end of file

ux/src/components/FileManager.vue

@@ -5,6 +5,12 @@ q-layout.fileman(view='hHh lpR lFr', container)
       q-icon(name='img:/_assets/icons/fluent-folder.svg', left, size='md')
       span {{t(`fileman.title`)}}
     q-toolbar(dark)
+      q-btn.q-mr-sm.acrylic-btn(
+        flat
+        color='white'
+        label='EN'
+        style='height: 40px;'
+        )
       q-input(
         dark
         v-model='state.search'
@@ -200,13 +206,12 @@ q-layout.fileman(view='hHh lpR lFr', container)
             :bar-style='barStyle'
             style='height: 100%;'
             )
-            .fileman-emptylist(v-if='files.length < 1')
-              template(v-if='state.fileListLoading')
-                q-spinner.q-mr-sm(color='primary', size='xs', :thickness='3')
-                span.text-primary Loading...
-              template(v-else)
-                q-icon.q-mr-sm(name='las la-folder-open', size='sm')
-                span This folder is empty.
+            .fileman-loadinglist(v-if='state.fileListLoading')
+              q-spinner.q-mr-sm(color='primary', size='64px', :thickness='1')
+              span.text-primary Fetching folder contents...
+            .fileman-emptylist(v-else-if='files.length < 1')
+              img(src='/_assets/icons/carbon-copy-empty-box.svg')
+              span This folder is empty.
             q-list.fileman-filelist(
               v-else
               :class='state.isCompact && `is-compact`'
@@ -394,8 +399,9 @@ const files = computed(() => {
   }).map(f => {
     switch (f.type) {
       case 'folder': {
+        console.info(f.children)
         f.icon = fileTypes.folder.icon
-        f.caption = t('fileman.folderChildrenCount', f.children, { count: f.children })
+        f.caption = t('fileman.folderChildrenCount', { count: f.children }, f.children)
         break
       }
       case 'page': {
@@ -475,7 +481,7 @@ const currentFileDetails = computed(() => {
 // WATCHERS
 
 watch(() => state.currentFolderId, async (newValue) => {
-  await loadTree(newValue)
+  await loadTree({ parentId: newValue })
 })
 
 // METHODS
@@ -485,11 +491,11 @@ function close () {
 }
 
 async function treeLazyLoad (nodeId, { done, fail }) {
-  await loadTree(nodeId, ['folder'])
+  await loadTree({ parentId: nodeId, types: ['folder'] })
   done()
 }
 
-async function loadTree (parentId, types) {
+async function loadTree ({ parentId = null, parentPath = null, types, initLoad = false }) {
   if (state.isFetching) { return }
   state.isFetching = true
   if (!parentId) {
@@ -579,7 +585,7 @@ async function loadTree (parentId, types) {
                 type: 'folder',
                 title: item.title,
                 fileName: item.fileName,
-                children: 0
+                children: item.childrenCount || 0
               })
             }
             break
@@ -664,7 +670,7 @@ function newFolder (parentId) {
       parentId
     }
   }).onOk(() => {
-    loadTree(parentId)
+    loadTree({ parentId })
   })
 }
 
@@ -676,7 +682,7 @@ function renameFolder (folderId) {
     }
   }).onOk(() => {
     treeComp.value.resetLoaded()
-    loadTree(folderId)
+    loadTree({ parentId: folderId })
   })
 }
 
@@ -698,13 +704,13 @@ function delFolder (folderId, mustReload = false) {
       state.treeRoots = state.treeRoots.filter(n => n !== folderId)
     }
     if (mustReload) {
-      loadTree(state.currentFolderId, null)
+      loadTree({ parentId: state.currentFolderId })
     }
   })
 }
 
 function reloadFolder (folderId) {
-  loadTree(folderId, null)
+  loadTree({ parentId: folderId })
   treeComp.value.resetLoaded()
 }
 
@@ -899,7 +905,7 @@ function delItem (item) {
 // MOUNTED
 
 onMounted(() => {
-  loadTree()
+  loadTree({})
 })
 
 </script>
@@ -956,17 +962,43 @@ onMounted(() => {
     height: 100%;
   }
 
+  &-loadinglist {
+    padding: 16px;
+    font-style: italic;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+
+    > span {
+      margin-top: 16px;
+    }
+  }
+
   &-emptylist {
     padding: 16px;
     font-style: italic;
+    font-size: 1.5em;
+    font-weight: 300;
     display: flex;
+    flex-direction: column;
+    justify-content: center;
     align-items: center;
 
+    > img {
+      opacity: .25;
+      width: 200px;
+    }
+
     @at-root .body--light & {
       color: $grey-6;
     }
     @at-root .body--dark & {
-      color: $dark-4;
+      color: $grey-7;
+
+      > img {
+        filter: invert(1);
+      }
     }
   }
 

ux/src/components/FolderCreateDialog.vue

@@ -143,12 +143,14 @@ async function create () {
       mutation: gql`
         mutation createFolder (
           $siteId: UUID!
+          $locale: String!
           $parentId: UUID
           $pathName: String!
           $title: String!
           ) {
           createFolder (
             siteId: $siteId
+            locale: $locale
             parentId: $parentId
             pathName: $pathName
             title: $title
@@ -162,6 +164,7 @@ async function create () {
       `,
       variables: {
         siteId: siteStore.id,
+        locale: 'en',
         parentId: props.parentId,
         pathName: state.path,
         title: state.title

ux/src/components/PageSaveDialog.vue → ux/src/components/TreeBrowserDialog.vue

@@ -81,7 +81,7 @@ q-dialog(ref='dialogRef', @hide='onDialogHide')
                     :color='state.displayMode === `path` ? `positive` : `grey`'
                     size='xs'
                     )
-                q-item-section.q-pr-sm Browse Using Paths
+                q-item-section.q-pr-sm {{ t('pageSaveDialog.displayModePath') }}
               q-item(clickable, @click='state.displayMode = `title`')
                 q-item-section(side)
                   q-icon(
@@ -89,7 +89,7 @@ q-dialog(ref='dialogRef', @hide='onDialogHide')
                     :color='state.displayMode === `title` ? `positive` : `grey`'
                     size='xs'
                     )
-                q-item-section.q-pr-sm Browse Using Titles
+                q-item-section.q-pr-sm {{ t('pageSaveDialog.displayModeTitle') }}
       q-space
       q-btn.acrylic-btn(
         icon='las la-times'
@@ -131,18 +131,24 @@ const props = defineProps({
   mode: {
     type: String,
     required: false,
-    default: 'save'
+    default: 'pageSave'
   },
-  pageId: {
+  itemId: {
     type: String,
-    required: true
+    required: false,
+    default: ''
   },
-  pageName: {
+  folderPath: {
     type: String,
     required: false,
     default: ''
   },
-  pagePath: {
+  itemTitle: {
+    type: String,
+    required: false,
+    default: ''
+  },
+  itemFileName: {
     type: String,
     required: false,
     default: ''
@@ -177,33 +183,12 @@ const state = reactive({
   currentFileId: '',
   treeNodes: {},
   treeRoots: [],
-  fileList: [
-    {
-      id: '1',
-      type: 'folder',
-      title: 'Beep Boop'
-    },
-    {
-      id: '2',
-      type: 'folder',
-      title: 'Second Folder'
-    },
-    {
-      id: '3',
-      type: 'page',
-      title: 'Some Page',
-      pageType: 'markdown'
-    }
-  ],
+  fileList: [],
   title: '',
-  path: ''
+  path: '',
+  typesToFetch: []
 })
 
-const displayModes = [
-  { value: 'title', label: t('pageSaveDialog.displayModeTitle') },
-  { value: 'path', label: t('pageSaveDialog.displayModePath') }
-]
-
 const thumbStyle = {
   right: '1px',
   borderRadius: '5px',
@@ -249,23 +234,32 @@ async function save () {
 }
 
 async function treeLazyLoad (nodeId, { done, fail }) {
-  await loadTree(nodeId, ['folder', 'page'])
+  await loadTree({
+    parentId: nodeId,
+    types: ['folder', 'page']
+  })
   done()
 }
 
-async function loadTree (parentId, types) {
+async function loadTree ({ parentId = null, parentPath = null, types, initLoad = false }) {
   try {
     const resp = await APOLLO_CLIENT.query({
       query: gql`
         query loadTree (
           $siteId: UUID!
           $parentId: UUID
+          $parentPath: String
           $types: [TreeItemType]
+          $includeAncestors: Boolean
+          $includeRootItems: Boolean
         ) {
           tree (
             siteId: $siteId
             parentId: $parentId
+            parentPath: $parentPath
             types: $types
+            includeAncestors: $includeAncestors
+            includeRootItems: $includeRootItems
           ) {
             __typename
             ... on TreeItemFolder {
@@ -290,7 +284,10 @@ async function loadTree (parentId, types) {
       variables: {
         siteId: siteStore.id,
         parentId,
-        types
+        parentPath,
+        types,
+        includeAncestors: initLoad,
+        includeRootItems: initLoad
       },
       fetchPolicy: 'network-only'
     })
@@ -344,16 +341,26 @@ function newFolder (parentId) {
       parentId
     }
   }).onOk(() => {
-    loadTree(parentId)
+    loadTree({ parentId })
   })
 }
 
 // MOUNTED
 
 onMounted(() => {
-  loadTree()
-  state.title = props.pageName || ''
-  state.path = props.pagePath || ''
+  switch (props.mode) {
+    case 'pageSave': {
+      state.typesToFetch = ['folder', 'page']
+      break
+    }
+  }
+  loadTree({
+    parentPath: props.folderPath,
+    types: state.typesToFetch,
+    initLoad: true
+  })
+  state.title = props.itemTitle || ''
+  state.path = props.itemFileName || ''
 })
 
 </script>

ux/src/i18n/locales/en.json

@@ -1600,8 +1600,8 @@
   "common.actions.newFolder": "New Folder",
   "common.actions.duplicate": "Duplicate",
   "common.actions.moveTo": "Move To",
-  "pageSaveDialog.displayModeTitle": "Title",
-  "pageSaveDialog.displayModePath": "Path",
+  "pageSaveDialog.displayModeTitle": "Browse Using Titles",
+  "pageSaveDialog.displayModePath": "Browse Using Paths",
   "folderDeleteDialog.title": "Confirm Delete Folder",
   "folderDeleteDialog.confirm": "Are you sure you want to delete folder {name} and all its content?",
   "folderDeleteDialog.folderId": "Folder ID {id}",

ux/src/pages/AdminScheduler.vue

@@ -2,7 +2,7 @@
 q-page.admin-terminal
   .row.q-pa-md.items-center
     .col-auto
-      img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-bot.svg')
+      img.admin-icon.animated.fadeInLeft(src='/_assets/icons/fluent-bot-animated.svg')
     .col.q-pl-md
       .text-h5.text-primary.animated.fadeInLeft {{ t('admin.scheduler.title') }}
       .text-subtitle1.text-grey.animated.fadeInLeft.wait-p2s {{ t('admin.scheduler.subtitle') }}

ux/src/pages/Index.vue

@@ -466,12 +466,13 @@ function togglePageData () {
 
 function duplicatePage () {
   $q.dialog({
-    component: defineAsyncComponent(() => import('../components/PageSaveDialog.vue')),
+    component: defineAsyncComponent(() => import('../components/TreeBrowserDialog.vue')),
     componentProps: {
-      mode: 'duplicate',
-      pageId: pageStore.id,
-      pageName: pageStore.title,
-      pagePath: pageStore.path
+      mode: 'duplicatePage',
+      folderPath: '',
+      itemId: pageStore.id,
+      itemTitle: pageStore.title,
+      itemFileName: pageStore.path
     }
   }).onOk(() => {
     // TODO: change route to new location
@@ -480,12 +481,13 @@ function duplicatePage () {
 
 function renamePage () {
   $q.dialog({
-    component: defineAsyncComponent(() => import('../components/PageSaveDialog.vue')),
+    component: defineAsyncComponent(() => import('../components/TreeBrowserDialog.vue')),
     componentProps: {
-      mode: 'rename',
-      pageId: pageStore.id,
-      pageName: pageStore.title,
-      pagePath: pageStore.path
+      mode: 'renamePage',
+      folderPath: '',
+      itemId: pageStore.id,
+      itemTitle: pageStore.title,
+      itemFileName: pageStore.path
     }
   }).onOk(() => {
     // TODO: change route to new location

ux/src/stores/page.js

 import { defineStore } from 'pinia'
 import gql from 'graphql-tag'
-import { cloneDeep, last, pick, transform } from 'lodash-es'
+import { cloneDeep, initial, last, pick, transform } from 'lodash-es'
 import { DateTime } from 'luxon'
 
 import { useSiteStore } from './site'
@@ -131,6 +131,9 @@ export const usePageStore = defineStore('page', {
           path: (last(result)?.path || pathPrefix) + `/${value}`
         })
       }, [])
+    },
+    folderPath: (state) => {
+      return initial(state.path.split('/')).join('/')
     }
   },
   actions: {