From b405752d728b2d81069a201703782be4341a401e Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Tue, 18 Jun 2024 17:12:56 -0700
Subject: [PATCH 01/10] Changing FileType to just be an alias of FileDataType,
 which is imported now from Files/container/index.tsx

---
 .../FileBrowser/FileBrowserContentPanel.tsx      | 11 +----------
 .../assets/FileBrowser/FilePropertiesPanel.tsx   |  2 +-
 .../components/assets/ImageCompressionPanel.tsx  |  2 +-
 .../src/components/assets/ImageConvertPanel.tsx  |  2 +-
 .../components/assets/ModelCompressionPanel.tsx  |  2 +-
 .../editor/panels/Files/container/index.tsx      | 16 +++++-----------
 6 files changed, 10 insertions(+), 25 deletions(-)

diff --git a/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx b/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx
index 3a87646bd7..1dc6fd887a 100644
--- a/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx
+++ b/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx
@@ -97,16 +97,7 @@ type DnDFileType = {
 
 export const FILES_PAGE_LIMIT = 100
 
-export type FileType = {
-  fullName: string
-  isFolder: boolean
-  key: string
-  name: string
-  path: string
-  size: string
-  type: string
-  url: string
-}
+type FileType = FileDataType
 
 const fileConsistsOfContentType = function (file: FileType, contentType: string): boolean {
   if (file.isFolder) {
diff --git a/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx b/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx
index e05c407e3b..3bfaa377f8 100644
--- a/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx
+++ b/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx
@@ -34,10 +34,10 @@ import { Engine } from '@etherealengine/ecs/src/Engine'
 import { getMutableState, NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
 import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 
+import { FileType } from '@etherealengine/ui/src/components/editor/panels/Files/container'
 import { EditorState } from '../../../services/EditorServices'
 import { Button } from '../../inputs/Button'
 import styles from '../styles.module.scss'
-import { FileType } from './FileBrowserContentPanel'
 
 export const FilePropertiesPanel = (props: {
   openProperties: State<boolean>
diff --git a/packages/editor/src/components/assets/ImageCompressionPanel.tsx b/packages/editor/src/components/assets/ImageCompressionPanel.tsx
index 5c51db9273..06b165fbfa 100644
--- a/packages/editor/src/components/assets/ImageCompressionPanel.tsx
+++ b/packages/editor/src/components/assets/ImageCompressionPanel.tsx
@@ -47,7 +47,7 @@ import Slider from '@etherealengine/ui/src/primitives/tailwind/Slider'
 import Text from '@etherealengine/ui/src/primitives/tailwind/Text'
 import { useTranslation } from 'react-i18next'
 import { MdClose } from 'react-icons/md'
-import { FileType } from './FileBrowser/FileBrowserContentPanel'
+import { FileType } from '@etherealengine/ui/src/components/editor/panels/Files/container'
 
 const UASTCFlagOptions = [
   { label: 'Fastest', value: 0 },
diff --git a/packages/editor/src/components/assets/ImageConvertPanel.tsx b/packages/editor/src/components/assets/ImageConvertPanel.tsx
index 0129bcc6a3..096366af13 100644
--- a/packages/editor/src/components/assets/ImageConvertPanel.tsx
+++ b/packages/editor/src/components/assets/ImageConvertPanel.tsx
@@ -31,11 +31,11 @@ import { State } from '@etherealengine/hyperflux'
 
 import { imageConvertPath } from '@etherealengine/common/src/schema.type.module'
 import { Engine } from '@etherealengine/ecs'
+import { FileType } from '@etherealengine/ui/src/components/editor/panels/Files/container'
 import BooleanInput from '../inputs/BooleanInput'
 import { Button } from '../inputs/Button'
 import NumericInput from '../inputs/NumericInput'
 import SelectInput from '../inputs/SelectInput'
-import { FileType } from './FileBrowser/FileBrowserContentPanel'
 import styles from './styles.module.scss'
 
 export default function ImageConvertPanel({
diff --git a/packages/editor/src/components/assets/ModelCompressionPanel.tsx b/packages/editor/src/components/assets/ModelCompressionPanel.tsx
index 7112b30a7c..eab54e9d75 100644
--- a/packages/editor/src/components/assets/ModelCompressionPanel.tsx
+++ b/packages/editor/src/components/assets/ModelCompressionPanel.tsx
@@ -52,11 +52,11 @@ import {
 } from '@etherealengine/spatial/src/transform/components/EntityTree'
 
 import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
+import { FileType } from '@etherealengine/ui/src/components/editor/panels/Files/container'
 import { useTranslation } from 'react-i18next'
 import { defaultLODs, LODList, LODVariantDescriptor } from '../../constants/GLTFPresets'
 import exportGLTF from '../../functions/exportGLTF'
 import { EditorState } from '../../services/EditorServices'
-import { FileType } from './FileBrowser/FileBrowserContentPanel'
 
 import ConfirmDialog from '@etherealengine/ui/src/components/tailwind/ConfirmDialog'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
diff --git a/packages/ui/src/components/editor/panels/Files/container/index.tsx b/packages/ui/src/components/editor/panels/Files/container/index.tsx
index ac95266dbd..aee739e1cc 100644
--- a/packages/ui/src/components/editor/panels/Files/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/container/index.tsx
@@ -92,16 +92,7 @@ export type DnDFileType = {
 
 export const FILES_PAGE_LIMIT = 100
 
-export type FileType = {
-  fullName: string
-  isFolder: boolean
-  key: string
-  name: string
-  path: string
-  size: string
-  type: string
-  url: string
-}
+export type FileType = FileDataType
 
 function fileConsistsOfContentType(file: FileDataType, contentType: string): boolean {
   if (file.isFolder) {
@@ -168,6 +159,10 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
   const projectName = useValidProjectForFileBrowser(selectedDirectory.value)
   const orgName = projectName.includes('/') ? projectName.split('/')[0] : ''
 
+  const fileProperties = useHookstate<FileType | null>(null)
+  const selectedFileKeys = useHookstate<string[]>([])
+  const anchorEl = useHookstate<HTMLButtonElement | null>(null)
+
   const filesViewMode = useMutableState(FilesViewModeState).viewMode
 
   const page = useHookstate(0)
@@ -435,7 +430,6 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
       drop: (dropItem) => dropItemsOnPanel(dropItem as any),
       collect: (monitor) => ({ isFileDropOver: monitor.canDrop() && monitor.isOver() })
     })
-    const selectedFileKeys = useHookstate<string[]>([])
 
     const isListView = filesViewMode.value === 'list'
     const staticResourceData = useFind(staticResourcePath, {

From 1b461c82597f27ed84db4f8fafd53a61cd7fd92b Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 26 Jun 2024 14:21:41 -0700
Subject: [PATCH 02/10] ImageCompressionPanel, ModelCompressionPanel and
 FilePropertiesPanel now accept a FileType[] instead of a FileType, which is
 the files selected in the file browser.

---
 packages/client-core/i18n/en/editor.json      |   6 +-
 .../FileBrowser/FilePropertiesPanel.tsx       | 189 ++++++++------
 .../assets/ImageCompressionPanel.tsx          |  39 +--
 .../assets/ModelCompressionPanel.tsx          |  50 +++-
 .../Files/browserGrid/FilePropertiesModal.tsx | 235 ++++++++++--------
 .../editor/panels/Files/browserGrid/index.tsx |  44 +++-
 .../editor/panels/Files/container/index.tsx   | 135 ++++++++--
 7 files changed, 468 insertions(+), 230 deletions(-)

diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
index a0acdeb2b1..427b4054fc 100755
--- a/packages/client-core/i18n/en/editor.json
+++ b/packages/client-core/i18n/en/editor.json
@@ -1199,7 +1199,8 @@
       "file": "File",
       "directory": "Directory",
       "fileProperties": {
-        "header": "{{fileName}} Info",
+        "header": "Info for {{fileName}}",
+        "header-plural": "Info for {{itemCount}} Items",
         "name": "Name",
         "type": "Type",
         "size": "Size",
@@ -1211,7 +1212,8 @@
         "addTag": "Add New Tag",
         "add": "Add",
         "save-changes": "Save Changes",
-        "discard": "Discard"
+        "discard": "Discard",
+        "mixed-values": "Mixed"
       },
       "view-mode": {
         "icons": "View: Icons",
diff --git a/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx b/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx
index 3bfaa377f8..0794fef465 100644
--- a/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx
+++ b/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx
@@ -23,84 +23,106 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { Dialog, DialogTitle, Grid, Typography } from '@mui/material'
+import { debounce, Dialog, DialogTitle, Grid, Typography } from '@mui/material'
 import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import InputText from '@etherealengine/client-core/src/common/components/InputText'
-import { logger } from '@etherealengine/client-core/src/user/services/AuthService'
 import { staticResourcePath, StaticResourceType } from '@etherealengine/common/src/schema.type.module'
 import { Engine } from '@etherealengine/ecs/src/Engine'
-import { getMutableState, NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
-import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
+import { NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
 
-import { FileType } from '@etherealengine/ui/src/components/editor/panels/Files/container'
-import { EditorState } from '../../../services/EditorServices'
+import {
+  createFileDigest,
+  createStaticResourceDigest,
+  FileType
+} from '@etherealengine/ui/src/components/editor/panels/Files/container'
 import { Button } from '../../inputs/Button'
 import styles from '../styles.module.scss'
 
-export const FilePropertiesPanel = (props: {
-  openProperties: State<boolean>
-  fileProperties: State<FileType | null>
-}) => {
+export const FilePropertiesPanel = (props: { openProperties: State<boolean>; fileProperties: State<FileType[]> }) => {
   const { openProperties, fileProperties } = props
-  const { t } = useTranslation()
   if (!fileProperties.value) return null
 
-  const modifiableProperties: State<FileType> = useHookstate(
-    JSON.parse(JSON.stringify(fileProperties.get(NO_PROXY))) as FileType
-  )
-
-  const isModified = useHookstate(false)
+  const { t } = useTranslation()
 
-  const onChange = useCallback((state: State<any>) => {
-    isModified.set(true)
+  const fileStaticResources = useHookstate<StaticResourceType[]>([])
+  const fileDigest = createFileDigest(fileProperties.value)
+  const resourceDigest = useHookstate<StaticResourceType>(createStaticResourceDigest([]))
+  const sharedFields = useHookstate<string[]>([])
+  const modifiedFields = useHookstate<string[]>([])
+  const sharedTags = useHookstate<string[]>([])
+
+  let title: string
+  let filename: string
+  if (fileProperties.value.length === 1) {
+    const firstFile = fileProperties.value[0]
+    filename = firstFile.name
+    title = `${filename} ${firstFile.type == 'folder' ? 'folder' : 'file'} Properties`
+  } else {
+    filename = ''
+    title = `Properties of ${fileProperties.value.length} Items`
+  }
+
+  const onChange = (fieldName: string, state: State<any>) => {
     return (e) => {
+      if (!modifiedFields.value.includes(fieldName)) {
+        modifiedFields.set([...modifiedFields.value, fieldName])
+      }
       state.set(e.target.value)
     }
-  }, [])
+  }
 
   const onSaveChanges = useCallback(async () => {
-    if (isModified.value && resourceProperties.value.id) {
-      const key = fileProperties.value!.key
-      await Engine.instance.api.service(staticResourcePath).patch(resourceProperties.id.value, {
-        key,
-        tags: resourceProperties.tags.value as string[],
-        licensing: resourceProperties.licensing.value,
-        attribution: resourceProperties.attribution.value
-      })
-      isModified.set(false)
+    if (modifiedFields.value.length > 0) {
+      const addedTags: string[] = resourceDigest.tags.value!.filter((tag) => !sharedTags.value.includes(tag))
+      const removedTags: string[] = sharedTags.value!.filter((tag) => !resourceDigest.tags.value!.includes(tag))
+      for (const resource of fileStaticResources.value) {
+        const oldTags = resource.tags ?? []
+        const newTags = Array.from(new Set([...addedTags, ...oldTags.filter((tag) => !removedTags.includes(tag))]))
+        await Engine.instance.api.service(staticResourcePath).patch(resource.id, {
+          key: resource.key,
+          tags: newTags,
+          licensing: resourceDigest.licensing.value,
+          attribution: resourceDigest.attribution.value
+        })
+      }
+      modifiedFields.set([])
       openProperties.set(false)
     }
   }, [])
 
-  const staticResource = useFind(staticResourcePath, {
-    query: {
-      key: fileProperties.value!.key,
-      project: getMutableState(EditorState).projectName.value!
-    }
-  })
-
-  const resourceProperties = useHookstate({
-    tags: [] as string[],
-    id: '',
-    project: '',
-    attribution: '',
-    licensing: ''
-  })
   useEffect(() => {
-    if (staticResource.data.length > 0) {
-      if (staticResource.data.length > 1) logger.warn('Multiple resources with same key found')
-      const resources = JSON.parse(JSON.stringify(staticResource.data[0])) as StaticResourceType
-      if (resources) {
-        resourceProperties.tags.set(resources.tags ?? [])
-        resourceProperties.id.set(resources.id)
-        resourceProperties.attribution.set(resources.attribution ?? '')
-        resourceProperties.licensing.set(resources.licensing ?? '')
-        resourceProperties.project.set(resources.project ?? '')
+    const staticResourcesFindApi = () => {
+      const query = {
+        key: {
+          $like: undefined,
+          $or: fileProperties.value.map(({ key }) => ({
+            key
+          }))
+        },
+        $limit: 10000
       }
+
+      Engine.instance.api
+        .service(staticResourcePath)
+        .find({ query })
+        .then((resources) => {
+          fileStaticResources.set(resources.data)
+          const digest = createStaticResourceDigest(resources.data)
+          resourceDigest.set(digest)
+          sharedFields.set(
+            Object.keys(resourceDigest).filter((key) => {
+              const value = resourceDigest[key]
+              return value.length !== ''
+            })
+          )
+          sharedTags.set(resourceDigest.tags.get(NO_PROXY)!.slice() as string[])
+        })
     }
-  }, [staticResource.data])
+    const debouncedQuery = debounce(staticResourcesFindApi, 500)
+    debouncedQuery()
+  }, [fileProperties])
 
   return (
     <Dialog
@@ -108,63 +130,80 @@ export const FilePropertiesPanel = (props: {
       onClose={() => openProperties.set(false)}
       classes={{ paper: styles.paperDialog }}
     >
-      <DialogTitle style={{ padding: '0', textTransform: 'capitalize' }}>
-        {`${fileProperties.value.name} ${fileProperties.value.type == 'folder' ? 'folder' : 'file'} Properties`}
-      </DialogTitle>
+      <DialogTitle style={{ padding: '0', textTransform: 'capitalize' }}>{title}</DialogTitle>
       <form style={{ marginTop: '15px' }}>
-        <InputText
-          name="name"
-          label={t('editor:layout.filebrowser.fileProperties.name')}
-          onChange={onChange(modifiableProperties.name)}
-          value={modifiableProperties.name.value}
-          disabled={true}
-        />
+        {fileProperties.value.length === 1 && (
+          <InputText
+            name="name"
+            label={t('editor:layout.filebrowser.fileProperties.name')}
+            value={filename}
+            disabled={true}
+          />
+        )}
         <Grid container spacing={5}>
           <Grid item xs={6}>
             <Typography className={styles.primaryText}>{t('editor:layout.filebrowser.fileProperties.type')}</Typography>
             <Typography className={styles.primaryText}>{t('editor:layout.filebrowser.fileProperties.size')}</Typography>
           </Grid>
           <Grid item xs={6}>
-            <Typography className={styles.secondaryText}>{modifiableProperties.type.value}</Typography>
-            <Typography className={styles.secondaryText}>{modifiableProperties.size.value}</Typography>
+            <Typography className={styles.secondaryText}>{fileDigest.type}</Typography>
+            <Typography className={styles.secondaryText}>
+              {fileProperties.value
+                .map((file) => file.size)
+                .reduce((total, value) => total + parseInt(value ?? '0'), 0)}
+            </Typography>
           </Grid>
         </Grid>
-        {resourceProperties.id.value && (
+        {fileStaticResources.value.length > 0 && (
           <>
             <hr style={{ margin: '16px' }} />
             <InputText
               name="attribution"
               label={t('editor:layout.filebrowser.fileProperties.attribution')}
-              onChange={onChange(resourceProperties.attribution)}
-              value={resourceProperties.attribution.value}
+              onChange={onChange('attribution', resourceDigest.attribution)}
+              value={
+                fileProperties.value?.length > 1 && !sharedFields.value.includes('attribution')
+                  ? ' - '
+                  : resourceDigest.attribution.value
+              }
             />
             <InputText
               name="licensing"
               label={t('editor:layout.filebrowser.fileProperties.licensing')}
-              onChange={onChange(resourceProperties.licensing)}
-              value={resourceProperties.licensing.value}
+              onChange={onChange('licensing', resourceDigest.licensing)}
+              value={
+                fileProperties.value?.length > 1 && !sharedFields.value.includes('licensing')
+                  ? ' - '
+                  : resourceDigest.licensing.value
+              }
             />
             <Button
               onClick={() => {
-                resourceProperties.tags.set([...(resourceProperties.tags.value ?? []), ''])
+                if (!modifiedFields.value.includes('tags')) {
+                  modifiedFields.set([...modifiedFields.value, 'tags'])
+                }
+                resourceDigest.tags.set([...(resourceDigest.tags.value ?? []), ''])
               }}
             >
               {t('editor:layout.filebrowser.fileProperties.addTag')}
             </Button>
             <div style={{ marginTop: '16px' }}>
-              {(resourceProperties.tags.value ?? []).map((tag, index) => (
+              {(resourceDigest.tags.value ?? []).map((_, index) => (
                 <div style={{ display: 'flex', flexDirection: 'row', margin: '0, 16px 0 0' }}>
                   <InputText
                     key={index}
                     name={`tag${index}`}
                     label={t('editor:layout.filebrowser.fileProperties.tag')}
-                    onChange={onChange(resourceProperties.tags[index])}
-                    value={resourceProperties.tags[index].value}
+                    onChange={onChange('tags', resourceDigest.tags[index])}
+                    value={resourceDigest.tags[index].value}
                     sx={{ width: '100%', marginRight: '32px' }}
                   />
                   <Button
                     onClick={() => {
-                      resourceProperties.tags.set(resourceProperties.tags.value.filter((_, i) => i !== index))
+                      if (!modifiedFields.value.includes('tags')) {
+                        modifiedFields.set([...modifiedFields.value, 'tags'])
+                      }
+                      resourceDigest.tags.set(resourceDigest.tags.value!.filter((_, i) => i !== index))
                     }}
                     style={{ width: '16px', height: '16px', margin: '8px 0 0 10px' }}
                   >
@@ -174,7 +213,7 @@ export const FilePropertiesPanel = (props: {
                 </div>
               ))}
             </div>
-            {isModified.value && (
+            {modifiedFields.value.length > 0 && (
               <Button onClick={onSaveChanges} style={{ marginTop: '15px' }}>
                 {t('editor:layout.filebrowser.fileProperties.save-changes')}
               </Button>
diff --git a/packages/editor/src/components/assets/ImageCompressionPanel.tsx b/packages/editor/src/components/assets/ImageCompressionPanel.tsx
index 06b165fbfa..9ec48b3bdb 100644
--- a/packages/editor/src/components/assets/ImageCompressionPanel.tsx
+++ b/packages/editor/src/components/assets/ImageCompressionPanel.tsx
@@ -32,7 +32,7 @@ import {
   KTX2EncodeArguments,
   KTX2EncodeDefaultArguments
 } from '@etherealengine/engine/src/assets/constants/CompressionParms'
-import { useHookstate } from '@etherealengine/hyperflux'
+import { ImmutableArray, useHookstate } from '@etherealengine/hyperflux'
 import { KTX2Encoder } from '@etherealengine/xrui/core/textures/KTX2Encoder'
 
 import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
@@ -47,7 +47,9 @@ import Slider from '@etherealengine/ui/src/primitives/tailwind/Slider'
 import Text from '@etherealengine/ui/src/primitives/tailwind/Text'
 import { useTranslation } from 'react-i18next'
 import { MdClose } from 'react-icons/md'
-import { FileType } from '@etherealengine/ui/src/components/editor/panels/Files/container'
+import { FileType, createFileDigest } from '@etherealengine/ui/src/components/editor/panels/Files/container'
+import CompoundNumericInput from '../inputs/CompoundNumericInput'
+import styles from './styles.module.scss'
 
 const UASTCFlagOptions = [
   { label: 'Fastest', value: 0 },
@@ -64,31 +66,33 @@ const UASTCFlagOptions = [
 ]
 
 export default function ImageCompressionPanel({
-  selectedFile,
+  selectedFiles,
   refreshDirectory
 }: {
-  selectedFile: FileType
+  selectedFiles: ImmutableArray<FileType>
   refreshDirectory: () => Promise<void>
 }) {
   const { t } = useTranslation()
+  const digest = createFileDigest(selectedFiles)
+
   const compressProperties = useHookstate<KTX2EncodeArguments>(KTX2EncodeDefaultArguments)
   const compressionLoading = useHookstate(false)
 
   const compressContentInBrowser = async () => {
     compressionLoading.set(true)
 
-    compressProperties.src.set(
-      selectedFile.type === 'folder' ? `${selectedFile.url}/${selectedFile.key}` : selectedFile.url
-    )
-
-    await compressImage()
+    for (const file of selectedFiles) {
+      await compressImage(file)
+    }
     await refreshDirectory()
 
     compressionLoading.set(false)
     PopoverState.hidePopupover()
   }
 
-  const compressImage = async () => {
+  const compressImage = async (props: FileType) => {
+    compressProperties.src.set(props.type === 'folder' ? `${props.url}/${props.key}` : props.url)
+
     const ktx2Encoder = new KTX2Encoder()
 
     const img = await new Promise<HTMLImageElement>((resolve) => {
@@ -118,9 +122,9 @@ export default function ImageCompressionPanel({
       uastcZstandard: compressProperties.uastcZstandard.value
     })
 
-    const newFileName = selectedFile.key.replace(/.*\/(.*)\..*/, '$1') + '.ktx2'
-    const path = selectedFile.key.replace(/(.*\/).*/, '$1')
-    const projectName = selectedFile.key.split('/')[1] // TODO: support projects with / in the name
+    const newFileName = props.key.replace(/.*\/(.*)\..*/, '$1') + '.ktx2'
+    const path = props.key.replace(/(.*\/).*/, '$1')
+    const projectName = props.key.split('/')[1] // TODO: support projects with / in the name
     const relativePath = path.replace('projects/' + projectName + '/', '')
 
     const file = new File([data], newFileName, { type: 'image/ktx2' })
@@ -140,6 +144,13 @@ export default function ImageCompressionPanel({
     }
   }
 
+  let title: string
+  if (selectedFiles.length === 1) {
+    title = selectedFiles[0].name
+  } else {
+    title = selectedFiles.length + ' Items'
+  }
+
   return (
     <div className="max-h-[80vh] w-[680px] overflow-y-auto rounded-xl bg-[#0E0F11]">
       <div className="relative mb-3 flex items-center justify-center px-8 py-3">
@@ -159,7 +170,7 @@ export default function ImageCompressionPanel({
           name="mode"
           label={t('editor:properties.model.transform.dst')}
         >
-          <Input className="border-[#42454D] bg-[#141619] px-2 py-1.5" value={selectedFile.name} disabled />
+          <Input className="border-[#42454D] bg-[#141619] px-2 py-1.5" value={title} disabled />
         </InputGroup>
         <div className="w-full border border-[#2B2C30]" />
         <InputGroup
diff --git a/packages/editor/src/components/assets/ModelCompressionPanel.tsx b/packages/editor/src/components/assets/ModelCompressionPanel.tsx
index eab54e9d75..99c3741767 100644
--- a/packages/editor/src/components/assets/ModelCompressionPanel.tsx
+++ b/packages/editor/src/components/assets/ModelCompressionPanel.tsx
@@ -40,7 +40,7 @@ import { ModelComponent } from '@etherealengine/engine/src/scene/components/Mode
 import { SourceComponent } from '@etherealengine/engine/src/scene/components/SourceComponent'
 import { Heuristic, VariantComponent } from '@etherealengine/engine/src/scene/components/VariantComponent'
 import { proxifyParentChildRelationships } from '@etherealengine/engine/src/scene/functions/loadGLTFModel'
-import { getState, NO_PROXY, none, useHookstate } from '@etherealengine/hyperflux'
+import { getState, ImmutableArray, NO_PROXY, none, useHookstate } from '@etherealengine/hyperflux'
 import { TransformComponent } from '@etherealengine/spatial'
 import { NameComponent } from '@etherealengine/spatial/src/common/NameComponent'
 import { addObjectToGroup } from '@etherealengine/spatial/src/renderer/components/GroupComponent'
@@ -140,10 +140,10 @@ export const createLODVariants = async (
 }
 
 export default function ModelCompressionPanel({
-  selectedFile,
+  selectedFiles,
   refreshDirectory
 }: {
-  selectedFile: FileType
+  selectedFiles: ImmutableArray<FileType>
   refreshDirectory: () => Promise<void>
 }) {
   const { t } = useTranslation()
@@ -163,7 +163,9 @@ export default function ModelCompressionPanel({
 
   const compressContentInBrowser = async () => {
     compressionLoading.set(true)
-    await compressModel()
+    for (const file of selectedFiles) {
+      await compressModel(file)
+    }
     await refreshDirectory()
     compressionLoading.set(false)
   }
@@ -196,12 +198,28 @@ export default function ModelCompressionPanel({
     localStorage.setItem('presets', JSON.stringify(presetList.value))
   }
 
-  const compressModel = async () => {
+  const compressModel = async (file: FileType) => {
     const clientside = true
     const exportCombined = true
 
+    let fileLODs = lods.value as LODVariantDescriptor[]
+
+    if (selectedFiles.length > 1) {
+      fileLODs = fileLODs.map((lod) => {
+        const src = file.url
+        const fileName = src.split('/').pop()!.split('.').shift()!
+        const dst = fileName + lod.suffix
+        return {
+          ...lod,
+          src,
+          dst,
+          modelFormat: src.endsWith('.gltf') ? 'gltf' : src.endsWith('.vrm') ? 'vrm' : 'glb'
+        }
+      })
+    }
+
     const heuristic = Heuristic.BUDGET
-    await createLODVariants(lods.value as LODVariantDescriptor[], clientside, heuristic, exportCombined)
+    await createLODVariants(fileLODs, clientside, heuristic, exportCombined)
   }
 
   const deletePreset = (event: React.MouseEvent, idx: number) => {
@@ -219,7 +237,12 @@ export default function ModelCompressionPanel({
   }
 
   useEffect(() => {
-    const fullSrc = selectedFile.url
+    const firstFile = selectedFiles[0]
+    if (firstFile == null) {
+      return
+    }
+
+    const fullSrc = firstFile.url
     const fileName = fullSrc.split('/').pop()!.split('.').shift()!
 
     const defaults = defaultLODs.map((defaultLOD) => {
@@ -232,7 +255,7 @@ export default function ModelCompressionPanel({
     })
 
     lods.set(defaults)
-  }, [selectedFile.url])
+  }, [selectedFiles])
 
   const handleAddLOD = () => {
     const params = JSON.parse(JSON.stringify(lods[selectedLODIndex.value].params.value)) as ModelTransformParameters
@@ -248,6 +271,17 @@ export default function ModelCompressionPanel({
     selectedLODIndex.set(lods.length - 1)
   }
 
+  let title: string
+  let fileTypeText: string
+  if (selectedFiles.length === 1) {
+    const file = selectedFiles[0]
+    title = file.name
+    fileTypeText = file.isFolder ? 'Directory' : 'File'
+  } else {
+    title = selectedFiles.length + ' Items'
+    fileTypeText = 'Multiple Selection'
+  }
+
   return (
     <div className="max-h-[80vh] w-[60vw] overflow-y-auto rounded-xl bg-[#0E0F11]">
       <div className="relative flex items-center justify-center px-8 py-3">
diff --git a/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx b/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
index 75417298c2..2319886798 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
@@ -23,7 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React, { useEffect } from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
@@ -36,7 +36,7 @@ import {
 import { Engine } from '@etherealengine/ecs'
 import { FileDataType } from '@etherealengine/editor/src/components/assets/FileBrowser/FileDataType'
 import { EditorState } from '@etherealengine/editor/src/services/EditorServices'
-import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
+import { getMutableState, ImmutableArray, NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
 import { useFind, useMutation } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { HiPencil, HiPlus, HiXMark } from 'react-icons/hi2'
 import { RiSave2Line } from 'react-icons/ri'
@@ -44,95 +44,120 @@ import Button from '../../../../../primitives/tailwind/Button'
 import Input from '../../../../../primitives/tailwind/Input'
 import Modal from '../../../../../primitives/tailwind/Modal'
 import Text from '../../../../../primitives/tailwind/Text'
+import { createFileDigest, createStaticResourceDigest, FileType } from '../container'
+import { debounce } from '@mui/material'
 
-export default function FilePropertiesModal({ projectName, file }: { projectName: string; file: FileDataType }) {
+export default function FilePropertiesModal({ projectName, files }: { projectName: string; files: ImmutableArray<FileType> }) {
+  const itemCount = files.length
+  if (itemCount === 0) return null
   const { t } = useTranslation()
-  const newFileName = useHookstate(file.name)
-  const fileService = useMutation(fileBrowserPath)
 
-  const handleSubmit = async () => {
-    fileService.update(null, {
-      oldProject: projectName,
-      newProject: projectName,
-      oldName: file.fullName,
-      newName: file.isFolder ? newFileName.value : `${newFileName.value}.${file.type}`,
-      oldPath: file.path,
-      newPath: file.path,
-      isCopy: false
-    })
-    PopoverState.hidePopupover()
+  const fileStaticResources = useHookstate<StaticResourceType[]>([])
+  const fileDigest = createFileDigest(files)
+  const resourceDigest = useHookstate<StaticResourceType>(createStaticResourceDigest([]))
+  const sharedFields = useHookstate<string[]>([])
+  const modifiedFields = useHookstate<string[]>([])
+  const editedField = useHookstate<string|null>(null)
+  const tagInput = useHookstate<string>('')
+  const sharedTags = useHookstate<string[]>([])
+
+  let title: string
+  let filename: string
+  if (itemCount === 1) {
+    const firstFile = files[0]
+    filename = firstFile.name
+    title = t('editor:layout.filebrowser.fileProperties.header', { fileName: filename.toUpperCase() })
+  } else {
+    filename = ''
+    title = t('editor:layout.filebrowser.fileProperties.header', { itemCount })
   }
 
-  const staticResource = useFind(staticResourcePath, {
-    query: {
-      key: file.key,
-      project: getMutableState(EditorState).projectName.value!
+  const onChange = (fieldName: string, state: State<any>) => {
+    return (e) => {
+      if (!modifiedFields.value.includes(fieldName)) {
+        modifiedFields.set([...modifiedFields.value, fieldName])
+      }
+      state.set(e.target.value)
     }
-  })
+  }
 
-  const staticResourceMutation = useMutation(staticResourcePath)
+  const handleSubmit = async () => {
+    if (modifiedFields.value.length > 0) {
+      const addedTags: string[] = resourceDigest.tags.value!.filter((tag) => !sharedTags.value.includes(tag))
+      const removedTags: string[] = sharedTags.value!.filter((tag) => !resourceDigest.tags.value!.includes(tag))
+      for (const resource of fileStaticResources.value) {
+        const oldTags = resource.tags ?? []
+        const newTags = Array.from(new Set([...addedTags, ...oldTags.filter((tag) => !removedTags.includes(tag))]))
+        await Engine.instance.api.service(staticResourcePath).patch(resource.id, {
+          key: resource.key,
+          tags: newTags,
+          licensing: resourceDigest.licensing.value,
+          attribution: resourceDigest.attribution.value
+        })
+      }
+      modifiedFields.set([])
+      PopoverState.hidePopupover()
+    }
+  }
 
-  const resourceProperties = useHookstate({
-    id: '',
-    project: '',
-    author: null as UserType | null,
-    tags: {
-      input: '',
-      all: [] as string[]
-    },
-    attribution: {
-      editing: false,
-      input: ''
-    },
-    licensing: {
-      editing: false,
-      input: ''
+  const staticResourcesFindApi = () => {
+    const query = {
+      key: {
+        $like: undefined,
+        $or: files.map(({ key }) => ({
+          key
+        }))
+      },
+      $limit: 10000
     }
-  })
 
-  useEffect(() => {
-    if (staticResource.data.length > 0) {
-      if (staticResource.data.length > 1) console.info('Multiple resources with same key found')
-      const resources = JSON.parse(JSON.stringify(staticResource.data[0])) as StaticResourceType
-      if (resources) {
+    Engine.instance.api
+      .service(staticResourcePath)
+      .find({ query })
+      .then((resources) => {
+
         Engine.instance.api
           .service('user')
-          .get(resources.userId)
-          .then((user) => resourceProperties.author.set(user))
-        resourceProperties.id.set(resources.id)
-        resourceProperties.project.set(resources.project ?? '')
-        resourceProperties.tags.all.set(resources.tags ?? [])
-        resourceProperties.attribution.input.set(resources.attribution ?? '')
-        resourceProperties.licensing.input.set(resources.licensing ?? '')
-      }
-    }
-  }, [staticResource.data])
+          .get(resources.data[0].userId)
+          .then((user) => author.set(user))
 
-  const handleAddTag = () => {
-    if (
-      resourceProperties.tags.input.value &&
-      !resourceProperties.tags.all.value.find((tag) => tag === resourceProperties.tags.input.value)
-    ) {
-      const newTags = [...resourceProperties.tags.all.value, resourceProperties.tags.input.value]
-      staticResourceMutation.patch(resourceProperties.id.value, {
-        tags: newTags
+        fileStaticResources.set(resources.data)
+        const digest = createStaticResourceDigest(resources.data)
+        resourceDigest.set(digest)
+        sharedFields.set(
+          Object.keys(resourceDigest).filter((key) => {
+            const value = resourceDigest[key]
+            return value.length !== ''
+          })
+        )
+        sharedTags.set(resourceDigest.tags.get(NO_PROXY)!.slice() as string[])
       })
-      resourceProperties.tags.all.set(newTags)
+  }
+  const debouncedQuery = debounce(staticResourcesFindApi, 500)
+  debouncedQuery()
+
+  const author = useHookstate<UserType|null>(null)
+
+  const handleAddTag = () => {
+    if (tagInput.value != '' && resourceDigest.tags.value!.includes(tagInput.value)) {
+      if (!modifiedFields.value.includes('tags')) {
+        modifiedFields.set([...modifiedFields.value, 'tags'])
+      }
+      resourceDigest.tags.set([...resourceDigest.tags.value!, tagInput.value])
     }
-    resourceProperties.tags.input.set('')
+    tagInput.set('')
   }
 
-  const handleRemoveTag = (removedTag: string) => {
-    const currentTags = resourceProperties.tags.all.value.filter((tag) => tag !== removedTag)
-    staticResourceMutation.patch(resourceProperties.id.value, {
-      tags: currentTags
-    })
-    resourceProperties.tags.all.set(currentTags)
+  const handleRemoveTag = (index: number) => {
+    if (!modifiedFields.value.includes('tags')) {
+      modifiedFields.set([...modifiedFields.value, 'tags'])
+    }
+    resourceDigest.tags.set(resourceDigest.tags.value!.filter((_, i) => i !== index))
   }
 
   return (
     <Modal
-      title={t('editor:layout.filebrowser.fileProperties.header', { fileName: file.name.toUpperCase() })}
+      title={title}
       className="w-96"
       onSubmit={handleSubmit}
       onClose={PopoverState.hidePopupover}
@@ -142,55 +167,58 @@ export default function FilePropertiesModal({ projectName, file }: { projectName
       <div className="flex flex-col items-center gap-2">
         <div className="grid grid-cols-2 gap-2">
           <Text className="text-end">{t('editor:layout.filebrowser.fileProperties.name')}</Text>
-          <Text className="text-[#9CA0AA]">{file.name}</Text>
+          <Text className="text-[#9CA0AA]">{filename}</Text>
         </div>
         <div className="grid grid-cols-2 gap-2">
           <Text className="text-end">{t('editor:layout.filebrowser.fileProperties.type')}</Text>
-          <Text className="text-[#9CA0AA]">{file.type.toUpperCase()}</Text>
+          <Text className="text-[#9CA0AA]">{fileDigest.type.toUpperCase()}</Text>
         </div>
         <div className="grid grid-cols-2 gap-2">
           <Text className="text-end">{t('editor:layout.filebrowser.fileProperties.size')}</Text>
-          <Text className="text-[#9CA0AA]">{file.size}</Text>
+          <Text className="text-[#9CA0AA]">{
+              files
+                .map((file) => file.size)
+                .reduce((total, value) => total + parseInt(value ?? '0'), 0)
+          }</Text>
         </div>
-        {resourceProperties.id.value && (
+        {fileStaticResources.length > 0 && (
           <>
             <div className="grid grid-cols-2 gap-2">
               <Text className="text-end">{t('editor:layout.filebrowser.fileProperties.author')}</Text>
-              <Text className="text-[#9CA0AA]">{resourceProperties.author.value?.name}</Text>
+              <Text className="text-[#9CA0AA]">{author.value?.name}</Text>
             </div>
             <div className="grid grid-cols-2 items-center gap-2">
               <Text className="text-end">{t('editor:layout.filebrowser.fileProperties.attribution')}</Text>
               <span className="flex items-center">
-                {resourceProperties.attribution.editing.value ? (
+                {editedField.value === "attribution" ? (
                   <>
                     <Input
-                      value={resourceProperties.attribution.input.value}
-                      onChange={(event) => resourceProperties.attribution.input.set(event.target.value)}
+                      value={
+                        files.length > 1 && !sharedFields.value.includes('attribution')
+                          ? t('editor:layout.filebrowser.fileProperties.mixed-values')
+                          : resourceDigest.attribution.value!
+                      }
+                      onChange={onChange('attribution', resourceDigest.attribution)}
                     />
                     <Button
                       title={t('common:components.save')}
                       variant="transparent"
                       size="small"
                       startIcon={<RiSave2Line />}
-                      onClick={() => resourceProperties.attribution.editing.set(false)}
+                      onClick={() => editedField.set(null)}
                     />
                   </>
                 ) : (
                   <>
                     <Text className="text-[#9CA0AA]">
-                      {resourceProperties.attribution.input.value || <em>{t('common:components.none')}</em>}
+                      {resourceDigest.attribution.value || <em>{t('common:components.none')}</em>}
                     </Text>
                     <Button
                       title={t('common:components.edit')}
                       variant="transparent"
                       size="small"
                       startIcon={<HiPencil />}
-                      onClick={() => {
-                        resourceProperties.attribution.editing.set(true)
-                        staticResourceMutation.patch(resourceProperties.id.value, {
-                          attribution: resourceProperties.attribution.input.value
-                        })
-                      }}
+                      onClick={() => editedField.set("attribution")}
                     />
                   </>
                 )}
@@ -199,36 +227,35 @@ export default function FilePropertiesModal({ projectName, file }: { projectName
             <div className="grid grid-cols-2 items-center gap-2">
               <Text className="text-end">{t('editor:layout.filebrowser.fileProperties.licensing')}</Text>
               <span className="flex items-center">
-                {resourceProperties.licensing.editing.value ? (
+                {editedField.value === "licensing" ? (
                   <>
                     <Input
-                      value={resourceProperties.licensing.input.value}
-                      onChange={(event) => resourceProperties.licensing.input.set(event.target.value)}
+                      value={
+                        files.length > 1 && !sharedFields.value.includes('licensing')
+                          ? t('editor:layout.filebrowser.fileProperties.mixed-values')
+                          : resourceDigest.licensing.value!
+                      }
+                      onChange={onChange('licensing', resourceDigest.licensing)}
                     />
                     <Button
                       title={t('common:components.save')}
                       variant="transparent"
                       size="small"
                       startIcon={<RiSave2Line />}
-                      onClick={() => resourceProperties.licensing.editing.set(false)}
+                      onClick={() => editedField.set(null)}
                     />
                   </>
                 ) : (
                   <>
                     <Text className="text-[#9CA0AA]">
-                      {resourceProperties.licensing.input.value || <em>{t('common:components.none')}</em>}
+                      {resourceDigest.licensing.value || <em>{t('common:components.none')}</em>}
                     </Text>
                     <Button
                       title={t('common:components.edit')}
                       variant="transparent"
                       size="small"
                       startIcon={<HiPencil />}
-                      onClick={() => {
-                        resourceProperties.licensing.editing.set(true)
-                        staticResourceMutation.patch(resourceProperties.id.value, {
-                          licensing: resourceProperties.licensing.input.value
-                        })
-                      }}
+                      onClick={() => editedField.set("licensing")}
                     />
                   </>
                 )}
@@ -240,9 +267,13 @@ export default function FilePropertiesModal({ projectName, file }: { projectName
               </Text>
               <div className="flex items-center gap-2">
                 <Input
-                  value={resourceProperties.tags.input.value}
-                  onChange={(event) => resourceProperties.tags.input.set(event.target.value)}
-                  onKeyUp={(event) => event.key === 'Enter' && handleAddTag()}
+                  value={tagInput.value}
+                  onChange={(event) => tagInput.set(event.target.value)}
+                  onKeyUp={(event) => {
+                    if (event.key === 'Enter') {
+                      handleAddTag()
+                    }
+                  }}
                 />
                 <Button
                   startIcon={<HiPlus />}
@@ -251,9 +282,9 @@ export default function FilePropertiesModal({ projectName, file }: { projectName
                 />
               </div>
               <div className="flex h-24 flex-wrap gap-2 overflow-y-auto bg-theme-surfaceInput p-2">
-                {resourceProperties.tags.all.value.map((tag, idx) => (
+                {resourceDigest.tags.value!.map((tag, idx) => (
                   <span key={idx} className="flex h-fit w-fit items-center rounded bg-[#2F3137] px-2 py-0.5">
-                    {tag} <HiXMark className="ml-1 cursor-pointer" onClick={() => handleRemoveTag(tag)} />
+                    {tag} <HiXMark className="ml-1 cursor-pointer" onClick={() => handleRemoveTag(idx)} />
                   </span>
                 ))}
               </div>
diff --git a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
index b5f1b5b5ea..a8664a6f2e 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
@@ -31,8 +31,6 @@ import {
   availableTableColumns
 } from '@etherealengine/editor/src/components/assets/FileBrowser/FileBrowserState'
 import { FileDataType } from '@etherealengine/editor/src/components/assets/FileBrowser/FileDataType'
-import ImageCompressionPanel from '@etherealengine/editor/src/components/assets/ImageCompressionPanel'
-import ModelCompressionPanel from '@etherealengine/editor/src/components/assets/ModelCompressionPanel'
 import { SupportedFileTypes } from '@etherealengine/editor/src/constants/AssetTypes'
 import { addMediaNode } from '@etherealengine/editor/src/functions/addMediaNode'
 import { getSpawnPositionAtCenter } from '@etherealengine/editor/src/functions/screenSpaceFunctions'
@@ -53,7 +51,6 @@ import { ContextMenu } from '../../../../tailwind/ContextMenu'
 import { FileType } from '../container'
 import { FileIcon } from '../icon'
 import DeleteFileModal from './DeleteFileModal'
-import FilePropertiesModal from './FilePropertiesModal'
 import ImageConvertModal from './ImageConvertModal'
 import RenameFileModal from './RenameFileModal'
 
@@ -201,6 +198,9 @@ type FileBrowserItemType = {
   item: FileDataType
   disableDnD?: boolean
   currentContent: MutableRefObject<{ item: FileDataType; isCopy: boolean }>
+  openModelCompress: () => void
+  openImageCompress: () => void
+  openFileProperties: () => void
   isFilesLoading: boolean
   projectName: string
   onClick: (event: React.MouseEvent, currentFile: FileDataType) => void
@@ -228,6 +228,9 @@ export function FileBrowserItem({
   projectName,
   onClick,
   handleDropItemsOnPanel,
+  openModelCompress,
+  openImageCompress,
+  openFileProperties,
   isFilesLoading,
   addFolder,
   isListView,
@@ -413,12 +416,13 @@ export function FileBrowserItem({
             size="small"
             fullWidth
             onClick={() => {
-              PopoverState.showPopupover(<FilePropertiesModal projectName={projectName} file={item} />)
+              openFileProperties()
               handleClose()
             }}
           >
             {t('editor:layout.filebrowser.viewAssetProperties')}
           </Button>
+          {/*
           <Button
             variant="outline"
             size="small"
@@ -439,6 +443,38 @@ export function FileBrowserItem({
           >
             {t('editor:layout.filebrowser.compress')}
           </Button>
+          */}
+
+          {fileConsistsOfContentType(item, 'model') && (
+            <Button
+              variant="outline"
+              size="small"
+              fullWidth
+              // disabled={!fileConsistsOfContentType(item, 'model') && !fileConsistsOfContentType(item, 'image')}
+              onClick={() => {
+                openModelCompress()
+                handleClose()
+              }}
+            >
+              {t('editor:layout.filebrowser.compress')}
+            </Button>
+          )}
+
+          {fileConsistsOfContentType(item, 'image') && (
+            <Button
+              variant="outline"
+              size="small"
+              fullWidth
+              // disabled={!fileConsistsOfContentType(item, 'model') && !fileConsistsOfContentType(item, 'image')}
+              onClick={() => {
+                openImageCompress()
+                handleClose()
+              }}
+            >
+              {t('editor:layout.filebrowser.compress')}
+            </Button>
+          )}
+
           <Button
             variant="outline"
             size="small"
diff --git a/packages/ui/src/components/editor/panels/Files/container/index.tsx b/packages/ui/src/components/editor/panels/Files/container/index.tsx
index aee739e1cc..e3d4b3c1b5 100644
--- a/packages/ui/src/components/editor/panels/Files/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/container/index.tsx
@@ -22,13 +22,15 @@ Original Code is the Ethereal Engine team.
 All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
 Ethereal Engine. All Rights Reserved.
 */
-
 import { FileThumbnailJobState } from '@etherealengine/client-core/src/common/services/FileThumbnailJobState'
 import { NotificationService } from '@etherealengine/client-core/src/common/services/NotificationService'
+import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
 import { uploadToFeathersService } from '@etherealengine/client-core/src/util/upload'
 import config from '@etherealengine/common/src/config'
 import {
   FileBrowserContentType,
+  StaticResourceType,
+  UserID,
   archiverPath,
   fileBrowserPath,
   fileBrowserUploadPath,
@@ -45,6 +47,9 @@ import {
   availableTableColumns
 } from '@etherealengine/editor/src/components/assets/FileBrowser/FileBrowserState'
 import { FileDataType } from '@etherealengine/editor/src/components/assets/FileBrowser/FileDataType'
+import FilePropertiesModal from '../browserGrid/FilePropertiesModal'
+import ImageCompressionPanel from '@etherealengine/editor/src/components/assets/ImageCompressionPanel'
+import ModelCompressionPanel from '@etherealengine/editor/src/components/assets/ModelCompressionPanel'
 import { DndWrapper } from '@etherealengine/editor/src/components/dnd/DndWrapper'
 import { SupportedFileTypes } from '@etherealengine/editor/src/constants/AssetTypes'
 import { downloadBlobAsZip, inputFileWithAddToScene } from '@etherealengine/editor/src/functions/assetFunctions'
@@ -53,7 +58,14 @@ import { EditorHelperState, PlacementMode } from '@etherealengine/editor/src/ser
 import { EditorState } from '@etherealengine/editor/src/services/EditorServices'
 import { ClickPlacementState } from '@etherealengine/editor/src/systems/ClickPlacementSystem'
 import { AssetLoader } from '@etherealengine/engine/src/assets/classes/AssetLoader'
-import { NO_PROXY, getMutableState, getState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
+import {
+  ImmutableArray,
+  NO_PROXY,
+  getMutableState,
+  getState,
+  useHookstate,
+  useMutableState
+} from '@etherealengine/hyperflux'
 import { useFind, useMutation, useSearch } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import React, { Fragment, useEffect, useRef } from 'react'
 import { useDrop } from 'react-dnd'
@@ -94,13 +106,60 @@ export const FILES_PAGE_LIMIT = 100
 
 export type FileType = FileDataType
 
-function fileConsistsOfContentType(file: FileDataType, contentType: string): boolean {
-  if (file.isFolder) {
-    return contentType.startsWith('image')
-  } else {
-    const guessedType: string = CommonKnownContentTypes[file.type]
-    return guessedType?.startsWith(contentType)
+export const createFileDigest = (files: ImmutableArray<FileType>): FileType => {
+  const digest: FileType = {
+    key: '',
+    path: '',
+    name: '',
+    fullName: '',
+    url: '',
+    type: '',
+    isFolder: false
+  }
+  for (const key in digest) {
+    const allValues = new Set(files.map((file) => file[key]))
+    if (allValues.size === 1) {
+      digest[key] = Array.from(allValues).pop()
+    }
+  }
+  return digest
+}
+
+export const createStaticResourceDigest = (staticResources: ImmutableArray<StaticResourceType>): StaticResourceType => {
+  const digest: StaticResourceType = {
+    type: '',
+    key: '',
+    id: '',
+    url: '',
+    mimeType: '',
+    userId: '' as UserID,
+    hash: '',
+    createdAt: '',
+    updatedAt: ''
+  }
+  for (const key in digest) {
+    const allValues = new Set(staticResources.map((resource) => resource[key]))
+    if (allValues.size === 1) {
+      digest[key] = Array.from(allValues).pop()
+    }
   }
+  const allTags: string[] = Array.from(new Set(staticResources.flatMap((resource) => resource.tags))).filter(
+    (tag) => tag != null
+  ) as string[]
+  const commonTags = allTags.filter((tag) => staticResources.every((resource) => resource.tags?.includes(tag)))
+  digest.tags = commonTags
+  return digest
+}
+
+const filesConsistOfContentType = function (files: ImmutableArray<FileType>, contentType: string): boolean {
+  return files.every((file) => {
+    if (file.isFolder) {
+      return contentType.startsWith('image')
+    } else {
+      const guessedType: string = CommonKnownContentTypes[file.type]
+      return guessedType?.startsWith(contentType)
+    }
+  })
 }
 
 export function isFileDataType(value: any): value is FileDataType {
@@ -159,8 +218,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
   const projectName = useValidProjectForFileBrowser(selectedDirectory.value)
   const orgName = projectName.includes('/') ? projectName.split('/')[0] : ''
 
-  const fileProperties = useHookstate<FileType | null>(null)
-  const selectedFileKeys = useHookstate<string[]>([])
+  const fileProperties = useHookstate<FileType[]>([])
   const anchorEl = useHookstate<HTMLButtonElement | null>(null)
 
   const filesViewMode = useMutableState(FilesViewModeState).viewMode
@@ -456,23 +514,24 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
     const handleFileBrowserItemClick = (e: React.MouseEvent, currentFile: FileDataType) => {
       e.stopPropagation()
       if (e.ctrlKey || e.metaKey) {
-        selectedFileKeys.set((prevSelectedKeys) =>
-          prevSelectedKeys.includes(currentFile.key)
-            ? prevSelectedKeys.filter((selectedKey) => selectedKey !== currentFile.key)
-            : [...prevSelectedKeys, currentFile.key]
+        fileProperties.set((prevFileProperties) =>
+          prevFileProperties.some((file) => file.key === currentFile.key)
+            ? prevFileProperties.filter((file) => file.key !== currentFile.key)
+            : [...prevFileProperties, currentFile]
         )
       } else if (e.shiftKey) {
-        const lastIndex = files.findIndex((file) => file.key === selectedFileKeys.value.at(-1))
+        const lastIndex = files.findIndex((file) => file.key === fileProperties.value.at(-1)?.key)
         const clickedIndex = files.findIndex((file) => file.key === currentFile.key)
-        const newSelectedKeys = files
-          .slice(Math.min(lastIndex, clickedIndex), Math.max(lastIndex, clickedIndex) + 1)
-          .map((file) => file.key)
-        selectedFileKeys.set((prevSelectedKeys) => Array.from(new Set([...prevSelectedKeys, ...newSelectedKeys])))
+        const newSelectedFiles = files.slice(Math.min(lastIndex, clickedIndex), Math.max(lastIndex, clickedIndex) + 1)
+        fileProperties.set((prevFileProperties) => [
+          ...prevFileProperties,
+          ...newSelectedFiles.filter((newFile) => !prevFileProperties.some((file) => newFile.key === file.key))
+        ])
       } else {
-        if (selectedFileKeys.value.includes(currentFile.key)) {
-          selectedFileKeys.set([])
+        if (fileProperties.value.some((file) => file.key === currentFile.key)) {
+          fileProperties.set([])
         } else {
-          selectedFileKeys.set([currentFile.key])
+          fileProperties.set([currentFile])
         }
       }
     }
@@ -487,7 +546,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         )}
         onClick={(event) => {
           event.stopPropagation()
-          selectedFileKeys.set([])
+          fileProperties.set([])
         }}
       >
         <div className={twMerge(!isListView && 'flex flex-wrap')}>
@@ -505,13 +564,39 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
                   }}
                   currentContent={currentContentRef}
                   handleDropItemsOnPanel={(data, dropOn) =>
-                    dropItemsOnPanel(data, dropOn, selectedFileKeys.value as string[])
+                    dropItemsOnPanel(data, dropOn, fileProperties.value.map(file => file.key))
                   }
+                  openFileProperties={() => {
+                    PopoverState.showPopupover(<FilePropertiesModal 
+                      projectName={projectName} 
+                      files={fileProperties.value} 
+                    />)
+                  }}
+                  openImageCompress={() => {
+                    if (filesConsistOfContentType(fileProperties.value, 'image')) {
+                      PopoverState.showPopupover(
+                        <ImageCompressionPanel 
+                          selectedFiles={fileProperties.value}
+                          refreshDirectory={refreshDirectory}
+                        />
+                      )
+                    }
+                  }}
+                  openModelCompress={() => {
+                    if (filesConsistOfContentType(fileProperties.value, 'model')) {
+                      PopoverState.showPopupover(
+                        <ModelCompressionPanel
+                          selectedFiles={fileProperties.value}
+                          refreshDirectory={refreshDirectory}
+                        />
+                      )
+                    }
+                  }}
                   isFilesLoading={isLoading}
                   addFolder={createNewFolder}
                   isListView={isListView}
                   staticResourceModifiedDates={staticResourceModifiedDates.value}
-                  isSelected={selectedFileKeys.value.includes(file.key)}
+                  isSelected={fileProperties.value.some(({ key }) => key === file.key)}
                   refreshDirectory={refreshDirectory}
                 />
               ))}

From bb51a1e68f6e6de9799f781d213f2d0b97e32cb5 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Tue, 2 Jul 2024 21:37:56 -0700
Subject: [PATCH 03/10] Fixing some compiler and lint exceptions that avoided
 detection.

---
 .../FileBrowser/FileBrowserContentPanel.tsx   | 33 +++++++++----------
 .../assets/ModelCompressionPanel.tsx          | 11 -------
 .../editor/panels/Files/container/index.tsx   |  2 +-
 3 files changed, 16 insertions(+), 30 deletions(-)

diff --git a/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx b/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx
index 1dc6fd887a..a595da288b 100644
--- a/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx
+++ b/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx
@@ -36,7 +36,6 @@ import {
   fileBrowserUploadPath,
   staticResourcePath
 } from '@etherealengine/common/src/schema.type.module'
-import { CommonKnownContentTypes } from '@etherealengine/common/src/utils/CommonKnownContentTypes'
 import { processFileName } from '@etherealengine/common/src/utils/processFileName'
 import { Engine } from '@etherealengine/ecs/src/Engine'
 import { DndWrapper } from '@etherealengine/editor/src/components/dnd/DndWrapper'
@@ -45,9 +44,16 @@ import {
   ImageConvertDefaultParms,
   ImageConvertParms
 } from '@etherealengine/engine/src/assets/constants/ImageConvertParms'
-import { NO_PROXY, getMutableState, getState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
+import {
+  ImmutableArray,
+  NO_PROXY,
+  getMutableState,
+  getState,
+  useHookstate,
+  useMutableState
+} from '@etherealengine/hyperflux'
 import { useFind, useMutation, useSearch } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
-import { useValidProjectForFileBrowser } from '@etherealengine/ui/src/components/editor/panels/Files/container'
+import { filesConsistOfContentType, useValidProjectForFileBrowser } from '@etherealengine/ui/src/components/editor/panels/Files/container'
 import Button from '@etherealengine/ui/src/primitives/mui/Button'
 import Checkbox from '@etherealengine/ui/src/primitives/mui/Checkbox'
 import FormControlLabel from '@etherealengine/ui/src/primitives/mui/FormControlLabel'
@@ -73,13 +79,13 @@ import InputGroup from '../../inputs/InputGroup'
 import StringInput from '../../inputs/StringInput'
 import { ToolButton } from '../../toolbar/ToolButton'
 import { AssetSelectionChangePropsType } from '../AssetsPreviewPanel'
-import ImageCompressionPanel from '../ImageCompressionPanel'
 import ImageConvertPanel from '../ImageConvertPanel'
 import styles from '../styles.module.scss'
 import { FileBrowserItem, FileTableWrapper, canDropItemOverFolder } from './FileBrowserGrid'
 import { FilesViewModeSettings, FilesViewModeState, availableTableColumns } from './FileBrowserState'
 import { FileDataType } from './FileDataType'
 import { FilePropertiesPanel } from './FilePropertiesPanel'
+import ImageCompressionPanel from '../ImageCompressionPanel'
 
 type FileBrowserContentPanelProps = {
   onSelectionChanged: (assetSelectionChange: AssetSelectionChangePropsType) => void
@@ -99,15 +105,6 @@ export const FILES_PAGE_LIMIT = 100
 
 type FileType = FileDataType
 
-const fileConsistsOfContentType = function (file: FileType, contentType: string): boolean {
-  if (file.isFolder) {
-    return contentType.startsWith('image')
-  } else {
-    const guessedType: string = CommonKnownContentTypes[file.type]
-    return guessedType?.startsWith(contentType)
-  }
-}
-
 export function isFileDataType(value: any): value is FileDataType {
   return value && value.key
 }
@@ -123,7 +120,7 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
   const selectedDirectory = useHookstate(originalPath)
   const projectName = useValidProjectForFileBrowser(selectedDirectory.value)
   const nestingDirectory = useHookstate('projects')
-  const fileProperties = useHookstate<FileType | null>(null)
+  const fileProperties = useHookstate<FileType[]>([])
 
   const openProperties = useHookstate(false)
   const openCompress = useHookstate(false)
@@ -673,17 +670,17 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
         </DndWrapper>
       </div>
 
-      {openConvert.value && fileProperties.value && (
+      {openConvert.value && fileProperties.value.length > 0 && (
         <ImageConvertPanel
           openConvert={openConvert}
-          fileProperties={fileProperties.value}
+          fileProperties={fileProperties.value?.[0]}
           convertProperties={convertProperties}
           onRefreshDirectory={refreshDirectory}
         />
       )}
 
-      {openCompress.value && fileProperties.value && fileConsistsOfContentType(fileProperties.value, 'image') && (
-        <ImageCompressionPanel selectedFile={fileProperties.value} refreshDirectory={refreshDirectory} />
+      {openCompress.value && fileProperties.value && filesConsistOfContentType(fileProperties.value, 'image') && (
+        <ImageCompressionPanel selectedFiles={fileProperties.value} refreshDirectory={refreshDirectory} />
       )}
 
       {openProperties.value && fileProperties.value && (
diff --git a/packages/editor/src/components/assets/ModelCompressionPanel.tsx b/packages/editor/src/components/assets/ModelCompressionPanel.tsx
index 99c3741767..97fc63cabd 100644
--- a/packages/editor/src/components/assets/ModelCompressionPanel.tsx
+++ b/packages/editor/src/components/assets/ModelCompressionPanel.tsx
@@ -271,17 +271,6 @@ export default function ModelCompressionPanel({
     selectedLODIndex.set(lods.length - 1)
   }
 
-  let title: string
-  let fileTypeText: string
-  if (selectedFiles.length === 1) {
-    const file = selectedFiles[0]
-    title = file.name
-    fileTypeText = file.isFolder ? 'Directory' : 'File'
-  } else {
-    title = selectedFiles.length + ' Items'
-    fileTypeText = 'Multiple Selection'
-  }
-
   return (
     <div className="max-h-[80vh] w-[60vw] overflow-y-auto rounded-xl bg-[#0E0F11]">
       <div className="relative flex items-center justify-center px-8 py-3">
diff --git a/packages/ui/src/components/editor/panels/Files/container/index.tsx b/packages/ui/src/components/editor/panels/Files/container/index.tsx
index e3d4b3c1b5..f3e57bdd77 100644
--- a/packages/ui/src/components/editor/panels/Files/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/container/index.tsx
@@ -151,7 +151,7 @@ export const createStaticResourceDigest = (staticResources: ImmutableArray<Stati
   return digest
 }
 
-const filesConsistOfContentType = function (files: ImmutableArray<FileType>, contentType: string): boolean {
+export const filesConsistOfContentType = function (files: ImmutableArray<FileType>, contentType: string): boolean {
   return files.every((file) => {
     if (file.isFolder) {
       return contentType.startsWith('image')

From 92a973c56a030289800da17a5a1ec0e99817fe9c Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Mon, 8 Jul 2024 11:51:01 -0700
Subject: [PATCH 04/10] Adding changes to file properties and model compression
 panels prescribed by UI/UX.

---
 .../FileBrowser/FilePropertiesPanel.tsx       |   4 +-
 .../assets/ModelCompressionPanel.tsx          |   5 +-
 .../properties/GLTFTransformProperties.tsx    | 105 +++++++++++-------
 .../editor/panels/Files/browserGrid/index.tsx |   4 +-
 4 files changed, 74 insertions(+), 44 deletions(-)

diff --git a/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx b/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx
index 0794fef465..d1f185f905 100644
--- a/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx
+++ b/packages/editor/src/components/assets/FileBrowser/FilePropertiesPanel.tsx
@@ -163,7 +163,7 @@ export const FilePropertiesPanel = (props: { openProperties: State<boolean>; fil
               onChange={onChange('attribution', resourceDigest.attribution)}
               value={
                 fileProperties.value?.length > 1 && !sharedFields.value.includes('attribution')
-                  ? ' - '
+                  ? ' Mixed '
                   : resourceDigest.attribution.value
               }
             />
@@ -173,7 +173,7 @@ export const FilePropertiesPanel = (props: { openProperties: State<boolean>; fil
               onChange={onChange('licensing', resourceDigest.licensing)}
               value={
                 fileProperties.value?.length > 1 && !sharedFields.value.includes('licensing')
-                  ? ' - '
+                  ? ' Mixed '
                   : resourceDigest.licensing.value
               }
             />
diff --git a/packages/editor/src/components/assets/ModelCompressionPanel.tsx b/packages/editor/src/components/assets/ModelCompressionPanel.tsx
index 97fc63cabd..562d22432a 100644
--- a/packages/editor/src/components/assets/ModelCompressionPanel.tsx
+++ b/packages/editor/src/components/assets/ModelCompressionPanel.tsx
@@ -342,7 +342,10 @@ export default function ModelCompressionPanel({
         </div>
 
         <div className="ml-[16.66%] w-4/6">
-          <GLTFTransformProperties transformParms={lods[selectedLODIndex.value].params} />
+          <GLTFTransformProperties
+            transformParms={lods[selectedLODIndex.value].params}
+            itemCount={selectedFiles.length}
+          />
         </div>
 
         <div className="flex justify-end px-8">
diff --git a/packages/editor/src/components/properties/GLTFTransformProperties.tsx b/packages/editor/src/components/properties/GLTFTransformProperties.tsx
index 4771003c43..e5ba78d8ac 100644
--- a/packages/editor/src/components/properties/GLTFTransformProperties.tsx
+++ b/packages/editor/src/components/properties/GLTFTransformProperties.tsx
@@ -86,55 +86,82 @@ function TextParam({
 }
 
 export default function GLTFTransformProperties({
-  transformParms
+  transformParms,
+  itemCount = 1
 }: {
   transformParms: State<ModelTransformParameters>
+  itemCount: number
 }) {
   const { t } = useTranslation()
 
   return (
     transformParms && (
       <>
-        <div className="mb-6 grid grid-cols-4 gap-2 border-b border-theme-primary pb-6">
-          <div className="col-span-1 flex flex-col justify-around gap-y-2">
-            <Text
-              fontSize="xs"
-              fontWeight="medium"
-              className="block px-2 py-0.5 text-right leading-[1.125rem] text-[#D3D5D9]"
-              style={{
-                textWrap: 'nowrap' // tailwind class is not working
-              }}
-            >
-              {t('editor:properties.model.transform.dst')}
-            </Text>
-            <Text
-              fontSize="xs"
-              fontWeight="medium"
-              className="px-2 py-0.5 text-right leading-[1.125rem] text-[#D3D5D9]"
-              style={{
-                textWrap: 'nowrap' // tailwind class is not working
-              }}
-            >
-              {t('editor:properties.model.transform.resourceUri')}
-            </Text>
+        {itemCount === 1 && (
+          <div className="mb-6 grid grid-cols-4 gap-2 border-b border-theme-primary pb-6">
+            <div className="col-span-1 flex flex-col justify-around gap-y-2">
+              <Text
+                fontSize="xs"
+                fontWeight="medium"
+                className="block px-2 py-0.5 text-right leading-[1.125rem] text-[#D3D5D9]"
+                style={{
+                  textWrap: 'nowrap' // tailwind class is not working
+                }}
+              >
+                {t('editor:properties.model.transform.dst')}
+              </Text>
+              <Text
+                fontSize="xs"
+                fontWeight="medium"
+                className="px-2 py-0.5 text-right leading-[1.125rem] text-[#D3D5D9]"
+                style={{
+                  textWrap: 'nowrap' // tailwind class is not working
+                }}
+              >
+                {t('editor:properties.model.transform.resourceUri')}
+              </Text>
+            </div>
+            <div className="col-span-3 flex flex-col justify-around gap-y-2">
+              <Input
+                value={transformParms.dst.value}
+                onChange={(e) => {
+                  transformParms.dst.set(e.target.value)
+                }}
+                className="px-2 py-0.5 text-sm text-[#9CA0AA]"
+              />
+              <Input
+                value={transformParms.resourceUri.value}
+                onChange={(e) => {
+                  transformParms.resourceUri.set(e.target.value)
+                }}
+                className="px-2 py-0.5 text-sm text-[#9CA0AA]"
+              />
+            </div>
           </div>
-          <div className="col-span-3 flex flex-col justify-around gap-y-2">
-            <Input
-              value={transformParms.dst.value}
-              onChange={(e) => {
-                transformParms.dst.set(e.target.value)
-              }}
-              className="px-2 py-0.5 text-sm text-[#9CA0AA]"
-            />
-            <Input
-              value={transformParms.resourceUri.value}
-              onChange={(e) => {
-                transformParms.resourceUri.set(e.target.value)
-              }}
-              className="px-2 py-0.5 text-sm text-[#9CA0AA]"
-            />
+        )}
+        {itemCount > 1 && (
+          <div className="mb-6 grid grid-cols-4 gap-2 border-b border-theme-primary pb-6">
+            <div className="col-span-1 flex flex-col justify-around gap-y-2">
+              <Text
+                fontSize="xs"
+                fontWeight="medium"
+                className="block px-2 py-0.5 text-right leading-[1.125rem] text-[#D3D5D9]"
+                style={{
+                  textWrap: 'nowrap' // tailwind class is not working
+                }}
+              >
+                {t('editor:properties.model.transform.dst')}
+              </Text>
+            </div>
+            <div className="col-span-3 flex flex-col justify-around gap-y-2">
+              <Input
+                value={`${itemCount} Items`}
+                disabled={true}
+                className="px-2 py-0.5 font-['Figtree'] text-sm text-[#9CA0AA]"
+              />
+            </div>
           </div>
-        </div>
+        )}
 
         <Accordion
           title="Materials"
diff --git a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
index a8664a6f2e..78f9651e7a 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
@@ -450,7 +450,7 @@ export function FileBrowserItem({
               variant="outline"
               size="small"
               fullWidth
-              // disabled={!fileConsistsOfContentType(item, 'model') && !fileConsistsOfContentType(item, 'image')}
+              // disabled={!fileConsistsOfContentType(item, 'model') && !fileConsistsOfContentType(item, 'image')} // TODO: move context menu to its own component, with a State<Filetype[]> -JS
               onClick={() => {
                 openModelCompress()
                 handleClose()
@@ -465,7 +465,7 @@ export function FileBrowserItem({
               variant="outline"
               size="small"
               fullWidth
-              // disabled={!fileConsistsOfContentType(item, 'model') && !fileConsistsOfContentType(item, 'image')}
+              // disabled={!fileConsistsOfContentType(item, 'model') && !fileConsistsOfContentType(item, 'image')} // TODO: move context menu to its own component, with a State<Filetype[]> -JS
               onClick={() => {
                 openImageCompress()
                 handleClose()

From a90767eb16fe165a6744634f13436b786669fd54 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 10 Jul 2024 08:26:41 -0700
Subject: [PATCH 05/10] Additional file properties bug fixes

---
 packages/client-core/i18n/en/editor.json      |  2 +-
 .../Files/browserGrid/FilePropertiesModal.tsx | 53 +++++++++----------
 2 files changed, 25 insertions(+), 30 deletions(-)

diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
index 427b4054fc..73e20ef5da 100755
--- a/packages/client-core/i18n/en/editor.json
+++ b/packages/client-core/i18n/en/editor.json
@@ -1213,7 +1213,7 @@
         "add": "Add",
         "save-changes": "Save Changes",
         "discard": "Discard",
-        "mixed-values": "Mixed"
+        "mixedValues": "Mixed"
       },
       "view-mode": {
         "icons": "View: Icons",
diff --git a/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx b/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
index 2319886798..b2ff49cf51 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
@@ -23,31 +23,29 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React, { useCallback, useEffect } from 'react'
+import React from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
-import {
-  StaticResourceType,
-  UserType,
-  fileBrowserPath,
-  staticResourcePath
-} from '@etherealengine/common/src/schema.type.module'
+import { StaticResourceType, UserType, staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import { Engine } from '@etherealengine/ecs'
-import { FileDataType } from '@etherealengine/editor/src/components/assets/FileBrowser/FileDataType'
-import { EditorState } from '@etherealengine/editor/src/services/EditorServices'
-import { getMutableState, ImmutableArray, NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
-import { useFind, useMutation } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
+import { ImmutableArray, NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
+import { debounce } from '@mui/material'
 import { HiPencil, HiPlus, HiXMark } from 'react-icons/hi2'
 import { RiSave2Line } from 'react-icons/ri'
 import Button from '../../../../../primitives/tailwind/Button'
 import Input from '../../../../../primitives/tailwind/Input'
 import Modal from '../../../../../primitives/tailwind/Modal'
 import Text from '../../../../../primitives/tailwind/Text'
-import { createFileDigest, createStaticResourceDigest, FileType } from '../container'
-import { debounce } from '@mui/material'
+import { FileType, createFileDigest, createStaticResourceDigest } from '../container'
 
-export default function FilePropertiesModal({ projectName, files }: { projectName: string; files: ImmutableArray<FileType> }) {
+export default function FilePropertiesModal({
+  projectName,
+  files
+}: {
+  projectName: string
+  files: ImmutableArray<FileType>
+}) {
   const itemCount = files.length
   if (itemCount === 0) return null
   const { t } = useTranslation()
@@ -57,7 +55,7 @@ export default function FilePropertiesModal({ projectName, files }: { projectNam
   const resourceDigest = useHookstate<StaticResourceType>(createStaticResourceDigest([]))
   const sharedFields = useHookstate<string[]>([])
   const modifiedFields = useHookstate<string[]>([])
-  const editedField = useHookstate<string|null>(null)
+  const editedField = useHookstate<string | null>(null)
   const tagInput = useHookstate<string>('')
   const sharedTags = useHookstate<string[]>([])
 
@@ -69,7 +67,7 @@ export default function FilePropertiesModal({ projectName, files }: { projectNam
     title = t('editor:layout.filebrowser.fileProperties.header', { fileName: filename.toUpperCase() })
   } else {
     filename = ''
-    title = t('editor:layout.filebrowser.fileProperties.header', { itemCount })
+    title = t('editor:layout.filebrowser.fileProperties.header-plural', { itemCount })
   }
 
   const onChange = (fieldName: string, state: State<any>) => {
@@ -115,7 +113,6 @@ export default function FilePropertiesModal({ projectName, files }: { projectNam
       .service(staticResourcePath)
       .find({ query })
       .then((resources) => {
-
         Engine.instance.api
           .service('user')
           .get(resources.data[0].userId)
@@ -136,7 +133,7 @@ export default function FilePropertiesModal({ projectName, files }: { projectNam
   const debouncedQuery = debounce(staticResourcesFindApi, 500)
   debouncedQuery()
 
-  const author = useHookstate<UserType|null>(null)
+  const author = useHookstate<UserType | null>(null)
 
   const handleAddTag = () => {
     if (tagInput.value != '' && resourceDigest.tags.value!.includes(tagInput.value)) {
@@ -175,11 +172,9 @@ export default function FilePropertiesModal({ projectName, files }: { projectNam
         </div>
         <div className="grid grid-cols-2 gap-2">
           <Text className="text-end">{t('editor:layout.filebrowser.fileProperties.size')}</Text>
-          <Text className="text-[#9CA0AA]">{
-              files
-                .map((file) => file.size)
-                .reduce((total, value) => total + parseInt(value ?? '0'), 0)
-          }</Text>
+          <Text className="text-[#9CA0AA]">
+            {files.map((file) => file.size).reduce((total, value) => total + parseInt(value ?? '0'), 0)}
+          </Text>
         </div>
         {fileStaticResources.length > 0 && (
           <>
@@ -190,12 +185,12 @@ export default function FilePropertiesModal({ projectName, files }: { projectNam
             <div className="grid grid-cols-2 items-center gap-2">
               <Text className="text-end">{t('editor:layout.filebrowser.fileProperties.attribution')}</Text>
               <span className="flex items-center">
-                {editedField.value === "attribution" ? (
+                {editedField.value === 'attribution' ? (
                   <>
                     <Input
                       value={
                         files.length > 1 && !sharedFields.value.includes('attribution')
-                          ? t('editor:layout.filebrowser.fileProperties.mixed-values')
+                          ? t('editor:layout.filebrowser.fileProperties.mixedValues')
                           : resourceDigest.attribution.value!
                       }
                       onChange={onChange('attribution', resourceDigest.attribution)}
@@ -218,7 +213,7 @@ export default function FilePropertiesModal({ projectName, files }: { projectNam
                       variant="transparent"
                       size="small"
                       startIcon={<HiPencil />}
-                      onClick={() => editedField.set("attribution")}
+                      onClick={() => editedField.set('attribution')}
                     />
                   </>
                 )}
@@ -227,12 +222,12 @@ export default function FilePropertiesModal({ projectName, files }: { projectNam
             <div className="grid grid-cols-2 items-center gap-2">
               <Text className="text-end">{t('editor:layout.filebrowser.fileProperties.licensing')}</Text>
               <span className="flex items-center">
-                {editedField.value === "licensing" ? (
+                {editedField.value === 'licensing' ? (
                   <>
                     <Input
                       value={
                         files.length > 1 && !sharedFields.value.includes('licensing')
-                          ? t('editor:layout.filebrowser.fileProperties.mixed-values')
+                          ? t('editor:layout.filebrowser.fileProperties.mixedValues')
                           : resourceDigest.licensing.value!
                       }
                       onChange={onChange('licensing', resourceDigest.licensing)}
@@ -255,7 +250,7 @@ export default function FilePropertiesModal({ projectName, files }: { projectNam
                       variant="transparent"
                       size="small"
                       startIcon={<HiPencil />}
-                      onClick={() => editedField.set("licensing")}
+                      onClick={() => editedField.set('licensing')}
                     />
                   </>
                 )}

From 59f2b501281fc24ccbe5d0af4b1ff7e7c1913399 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 10 Jul 2024 10:26:47 -0700
Subject: [PATCH 06/10] Additional file properties bug fixes (mixed string
 wasn't appearing)

---
 .../Files/browserGrid/FilePropertiesModal.tsx | 22 ++++++++-----------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx b/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
index b2ff49cf51..d8bd72666a 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
@@ -66,7 +66,7 @@ export default function FilePropertiesModal({
     filename = firstFile.name
     title = t('editor:layout.filebrowser.fileProperties.header', { fileName: filename.toUpperCase() })
   } else {
-    filename = ''
+    filename = t('editor:layout.filebrowser.fileProperties.mixedValues')
     title = t('editor:layout.filebrowser.fileProperties.header-plural', { itemCount })
   }
 
@@ -188,11 +188,7 @@ export default function FilePropertiesModal({
                 {editedField.value === 'attribution' ? (
                   <>
                     <Input
-                      value={
-                        files.length > 1 && !sharedFields.value.includes('attribution')
-                          ? t('editor:layout.filebrowser.fileProperties.mixedValues')
-                          : resourceDigest.attribution.value!
-                      }
+                      value={resourceDigest.attribution.value ?? ''}
                       onChange={onChange('attribution', resourceDigest.attribution)}
                     />
                     <Button
@@ -206,7 +202,9 @@ export default function FilePropertiesModal({
                 ) : (
                   <>
                     <Text className="text-[#9CA0AA]">
-                      {resourceDigest.attribution.value || <em>{t('common:components.none')}</em>}
+                      {files.length > 1 && !sharedFields.value.includes('attribution')
+                        ? t('editor:layout.filebrowser.fileProperties.mixedValues')
+                        : resourceDigest.attribution.value || <em>{t('common:components.none')}</em>}
                     </Text>
                     <Button
                       title={t('common:components.edit')}
@@ -225,11 +223,7 @@ export default function FilePropertiesModal({
                 {editedField.value === 'licensing' ? (
                   <>
                     <Input
-                      value={
-                        files.length > 1 && !sharedFields.value.includes('licensing')
-                          ? t('editor:layout.filebrowser.fileProperties.mixedValues')
-                          : resourceDigest.licensing.value!
-                      }
+                      value={resourceDigest.licensing.value ?? ''}
                       onChange={onChange('licensing', resourceDigest.licensing)}
                     />
                     <Button
@@ -243,7 +237,9 @@ export default function FilePropertiesModal({
                 ) : (
                   <>
                     <Text className="text-[#9CA0AA]">
-                      {resourceDigest.licensing.value || <em>{t('common:components.none')}</em>}
+                      {files.length > 1 && !sharedFields.value.includes('licensing')
+                        ? t('editor:layout.filebrowser.fileProperties.mixedValues')
+                        : resourceDigest.licensing.value || <em>{t('common:components.none')}</em>}
                     </Text>
                     <Button
                       title={t('common:components.edit')}

From 38828595e9f6615cb35394953960e6fb1787af56 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 10 Jul 2024 12:47:13 -0700
Subject: [PATCH 07/10] Fixing a compiler error, missing itemCount property in
 model transform UI

---
 .../src/components/editor/properties/model/transform/index.tsx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/components/editor/properties/model/transform/index.tsx b/packages/ui/src/components/editor/properties/model/transform/index.tsx
index 57c480243b..463c4ce4af 100644
--- a/packages/ui/src/components/editor/properties/model/transform/index.tsx
+++ b/packages/ui/src/components/editor/properties/model/transform/index.tsx
@@ -208,7 +208,7 @@ export default function ModelTransformProperties({ entity, onChangeModel }: { en
     <Accordion className="p-0" title="Model Transform Properties" expandIcon={undefined} shrinkIcon={undefined}>
       <div className="TransformContainer">
         <Accordion className="p-0" title="glTF-Transform" expandIcon={undefined} shrinkIcon={undefined}>
-          <GLTFTransformProperties transformParms={transformParms} />
+          <GLTFTransformProperties transformParms={transformParms} itemCount={1} />
         </Accordion>
         {!transforming.value && (
           <>

From 90f6c4deb92ad4b8d735b13ae67a5e68556630e2 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 10 Jul 2024 13:57:30 -0700
Subject: [PATCH 08/10] Appeasing the linter and fixing another compiler error

---
 .../FileBrowser/FileBrowserContentPanel.tsx     | 16 ++++++----------
 .../components/assets/ImageCompressionPanel.tsx |  4 +---
 .../properties/ModelTransformProperties.tsx     |  2 +-
 .../editor/panels/Files/browserGrid/index.tsx   |  5 ++---
 .../editor/panels/Files/container/index.tsx     | 17 ++++++++++-------
 5 files changed, 20 insertions(+), 24 deletions(-)

diff --git a/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx b/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx
index a595da288b..d3dd8241b3 100644
--- a/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx
+++ b/packages/editor/src/components/assets/FileBrowser/FileBrowserContentPanel.tsx
@@ -44,16 +44,12 @@ import {
   ImageConvertDefaultParms,
   ImageConvertParms
 } from '@etherealengine/engine/src/assets/constants/ImageConvertParms'
-import {
-  ImmutableArray,
-  NO_PROXY,
-  getMutableState,
-  getState,
-  useHookstate,
-  useMutableState
-} from '@etherealengine/hyperflux'
+import { NO_PROXY, getMutableState, getState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
 import { useFind, useMutation, useSearch } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
-import { filesConsistOfContentType, useValidProjectForFileBrowser } from '@etherealengine/ui/src/components/editor/panels/Files/container'
+import {
+  filesConsistOfContentType,
+  useValidProjectForFileBrowser
+} from '@etherealengine/ui/src/components/editor/panels/Files/container'
 import Button from '@etherealengine/ui/src/primitives/mui/Button'
 import Checkbox from '@etherealengine/ui/src/primitives/mui/Checkbox'
 import FormControlLabel from '@etherealengine/ui/src/primitives/mui/FormControlLabel'
@@ -79,13 +75,13 @@ import InputGroup from '../../inputs/InputGroup'
 import StringInput from '../../inputs/StringInput'
 import { ToolButton } from '../../toolbar/ToolButton'
 import { AssetSelectionChangePropsType } from '../AssetsPreviewPanel'
+import ImageCompressionPanel from '../ImageCompressionPanel'
 import ImageConvertPanel from '../ImageConvertPanel'
 import styles from '../styles.module.scss'
 import { FileBrowserItem, FileTableWrapper, canDropItemOverFolder } from './FileBrowserGrid'
 import { FilesViewModeSettings, FilesViewModeState, availableTableColumns } from './FileBrowserState'
 import { FileDataType } from './FileDataType'
 import { FilePropertiesPanel } from './FilePropertiesPanel'
-import ImageCompressionPanel from '../ImageCompressionPanel'
 
 type FileBrowserContentPanelProps = {
   onSelectionChanged: (assetSelectionChange: AssetSelectionChangePropsType) => void
diff --git a/packages/editor/src/components/assets/ImageCompressionPanel.tsx b/packages/editor/src/components/assets/ImageCompressionPanel.tsx
index 9ec48b3bdb..855ded9be0 100644
--- a/packages/editor/src/components/assets/ImageCompressionPanel.tsx
+++ b/packages/editor/src/components/assets/ImageCompressionPanel.tsx
@@ -39,6 +39,7 @@ import { PopoverState } from '@etherealengine/client-core/src/common/services/Po
 import BooleanInput from '@etherealengine/ui/src/components/editor/input/Boolean'
 import InputGroup from '@etherealengine/ui/src/components/editor/input/Group'
 import SelectInput from '@etherealengine/ui/src/components/editor/input/Select'
+import { FileType, createFileDigest } from '@etherealengine/ui/src/components/editor/panels/Files/container'
 import Button from '@etherealengine/ui/src/primitives/tailwind/Button'
 import Input from '@etherealengine/ui/src/primitives/tailwind/Input'
 import LoadingView from '@etherealengine/ui/src/primitives/tailwind/LoadingView'
@@ -47,9 +48,6 @@ import Slider from '@etherealengine/ui/src/primitives/tailwind/Slider'
 import Text from '@etherealengine/ui/src/primitives/tailwind/Text'
 import { useTranslation } from 'react-i18next'
 import { MdClose } from 'react-icons/md'
-import { FileType, createFileDigest } from '@etherealengine/ui/src/components/editor/panels/Files/container'
-import CompoundNumericInput from '../inputs/CompoundNumericInput'
-import styles from './styles.module.scss'
 
 const UASTCFlagOptions = [
   { label: 'Fastest', value: 0 },
diff --git a/packages/editor/src/components/properties/ModelTransformProperties.tsx b/packages/editor/src/components/properties/ModelTransformProperties.tsx
index 94b6b5b024..1f5a0fcc42 100644
--- a/packages/editor/src/components/properties/ModelTransformProperties.tsx
+++ b/packages/editor/src/components/properties/ModelTransformProperties.tsx
@@ -211,7 +211,7 @@ export default function ModelTransformProperties({ entity, onChangeModel }: { en
     <CollapsibleBlock label="Model Transform Properties">
       <div className="TransformContainer">
         <CollapsibleBlock label="glTF-Transform">
-          <GLTFTransformProperties transformParms={transformParms} />
+          <GLTFTransformProperties transformParms={transformParms} itemCount={1} />
         </CollapsibleBlock>
         {!transforming.value && (
           <>
diff --git a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
index 78f9651e7a..646516bc84 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
@@ -48,7 +48,6 @@ import { Vector3 } from 'three'
 import Button from '../../../../../primitives/tailwind/Button'
 import Tooltip from '../../../../../primitives/tailwind/Tooltip'
 import { ContextMenu } from '../../../../tailwind/ContextMenu'
-import { FileType } from '../container'
 import { FileIcon } from '../icon'
 import DeleteFileModal from './DeleteFileModal'
 import ImageConvertModal from './ImageConvertModal'
@@ -188,7 +187,7 @@ export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
       </div>
 
       <Tooltip title={t(props.item.fullName)}>
-        <div className="text-secondary line-clamp-1 w-full text-wrap break-all text-sm">{props.item.fullName}</div>
+        <div className="text-secondary text-wrap line-clamp-1 w-full break-all text-sm">{props.item.fullName}</div>
       </Tooltip>
     </div>
   )
@@ -358,7 +357,7 @@ export function FileBrowserItem({
       )}
 
       <ContextMenu anchorEvent={anchorEvent} onClose={() => setAnchorEvent(undefined)}>
-        <div className="flex w-fit min-w-44 flex-col gap-1 truncate rounded-lg bg-neutral-900 shadow-lg">
+        <div className="min-w-44 flex w-fit flex-col gap-1 truncate rounded-lg bg-neutral-900 shadow-lg">
           <Button variant="outline" size="small" fullWidth onClick={addFolder}>
             {t('editor:layout.filebrowser.addNewFolder')}
           </Button>
diff --git a/packages/ui/src/components/editor/panels/Files/container/index.tsx b/packages/ui/src/components/editor/panels/Files/container/index.tsx
index f3e57bdd77..3f369e61d3 100644
--- a/packages/ui/src/components/editor/panels/Files/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/container/index.tsx
@@ -47,7 +47,6 @@ import {
   availableTableColumns
 } from '@etherealengine/editor/src/components/assets/FileBrowser/FileBrowserState'
 import { FileDataType } from '@etherealengine/editor/src/components/assets/FileBrowser/FileDataType'
-import FilePropertiesModal from '../browserGrid/FilePropertiesModal'
 import ImageCompressionPanel from '@etherealengine/editor/src/components/assets/ImageCompressionPanel'
 import ModelCompressionPanel from '@etherealengine/editor/src/components/assets/ModelCompressionPanel'
 import { DndWrapper } from '@etherealengine/editor/src/components/dnd/DndWrapper'
@@ -86,6 +85,7 @@ import { Popup } from '../../../../tailwind/Popup'
 import BooleanInput from '../../../input/Boolean'
 import InputGroup from '../../../input/Group'
 import { FileBrowserItem, FileTableWrapper, canDropItemOverFolder } from '../browserGrid'
+import FilePropertiesModal from '../browserGrid/FilePropertiesModal'
 
 type FileBrowserContentPanelProps = {
   projectName?: string
@@ -564,18 +564,21 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
                   }}
                   currentContent={currentContentRef}
                   handleDropItemsOnPanel={(data, dropOn) =>
-                    dropItemsOnPanel(data, dropOn, fileProperties.value.map(file => file.key))
+                    dropItemsOnPanel(
+                      data,
+                      dropOn,
+                      fileProperties.value.map((file) => file.key)
+                    )
                   }
                   openFileProperties={() => {
-                    PopoverState.showPopupover(<FilePropertiesModal 
-                      projectName={projectName} 
-                      files={fileProperties.value} 
-                    />)
+                    PopoverState.showPopupover(
+                      <FilePropertiesModal projectName={projectName} files={fileProperties.value} />
+                    )
                   }}
                   openImageCompress={() => {
                     if (filesConsistOfContentType(fileProperties.value, 'image')) {
                       PopoverState.showPopupover(
-                        <ImageCompressionPanel 
+                        <ImageCompressionPanel
                           selectedFiles={fileProperties.value}
                           refreshDirectory={refreshDirectory}
                         />

From 2d1d1678822ca160e61d0f765ffd3e4266234048 Mon Sep 17 00:00:00 2001
From: Rezmason <jeremysachs@rezmason.net>
Date: Wed, 10 Jul 2024 14:52:29 -0700
Subject: [PATCH 09/10] Fixing bugs in file properties modal's feathers call
 and the static resource digest

---
 .../Files/browserGrid/FilePropertiesModal.tsx | 61 +++++++++----------
 .../editor/panels/Files/container/index.tsx   | 19 ++++--
 2 files changed, 42 insertions(+), 38 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx b/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
index d8bd72666a..0b5d93bcfe 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/FilePropertiesModal.tsx
@@ -23,14 +23,14 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import React from 'react'
+import React, { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
 import { StaticResourceType, UserType, staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import { Engine } from '@etherealengine/ecs'
 import { ImmutableArray, NO_PROXY, State, useHookstate } from '@etherealengine/hyperflux'
-import { debounce } from '@mui/material'
+import { useFind } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { HiPencil, HiPlus, HiXMark } from 'react-icons/hi2'
 import { RiSave2Line } from 'react-icons/ri'
 import Button from '../../../../../primitives/tailwind/Button'
@@ -98,45 +98,40 @@ export default function FilePropertiesModal({
     }
   }
 
-  const staticResourcesFindApi = () => {
-    const query = {
-      key: {
-        $like: undefined,
-        $or: files.map(({ key }) => ({
-          key
-        }))
-      },
-      $limit: 10000
-    }
+  const query = {
+    key: {
+      $like: undefined,
+      $or: files.map(({ key }) => ({
+        key
+      }))
+    },
+    $limit: 10000
+  }
 
+  const resources = useFind(staticResourcePath, { query })
+  useEffect(() => {
+    if (resources.data.length === 0) return
     Engine.instance.api
-      .service(staticResourcePath)
-      .find({ query })
-      .then((resources) => {
-        Engine.instance.api
-          .service('user')
-          .get(resources.data[0].userId)
-          .then((user) => author.set(user))
+      .service('user')
+      .get(resources.data[0].userId)
+      .then((user) => author.set(user))
 
-        fileStaticResources.set(resources.data)
-        const digest = createStaticResourceDigest(resources.data)
-        resourceDigest.set(digest)
-        sharedFields.set(
-          Object.keys(resourceDigest).filter((key) => {
-            const value = resourceDigest[key]
-            return value.length !== ''
-          })
-        )
-        sharedTags.set(resourceDigest.tags.get(NO_PROXY)!.slice() as string[])
+    fileStaticResources.set(resources.data)
+    const digest = createStaticResourceDigest(resources.data)
+    resourceDigest.set(digest)
+    sharedFields.set(
+      Object.keys(resourceDigest).filter((key) => {
+        const value = resourceDigest[key]
+        return value.length !== ''
       })
-  }
-  const debouncedQuery = debounce(staticResourcesFindApi, 500)
-  debouncedQuery()
+    )
+    sharedTags.set(resourceDigest.tags.get(NO_PROXY)!.slice() as string[])
+  }, [resources.data.length])
 
   const author = useHookstate<UserType | null>(null)
 
   const handleAddTag = () => {
-    if (tagInput.value != '' && resourceDigest.tags.value!.includes(tagInput.value)) {
+    if (tagInput.value != '' && !resourceDigest.tags.value!.includes(tagInput.value)) {
       if (!modifiedFields.value.includes('tags')) {
         modifiedFields.set([...modifiedFields.value, 'tags'])
       }
diff --git a/packages/ui/src/components/editor/panels/Files/container/index.tsx b/packages/ui/src/components/editor/panels/Files/container/index.tsx
index 3f369e61d3..f440d57150 100644
--- a/packages/ui/src/components/editor/panels/Files/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/container/index.tsx
@@ -127,15 +127,24 @@ export const createFileDigest = (files: ImmutableArray<FileType>): FileType => {
 
 export const createStaticResourceDigest = (staticResources: ImmutableArray<StaticResourceType>): StaticResourceType => {
   const digest: StaticResourceType = {
-    type: '',
-    key: '',
     id: '',
-    url: '',
+    key: '',
     mimeType: '',
-    userId: '' as UserID,
     hash: '',
+    type: '',
+    project: '',
+    // dependencies: '',
+    attribution: '',
+    licensing: '',
+    description: '',
+    // stats: '',
+    thumbnailKey: '',
+    thumbnailMode: '',
     createdAt: '',
-    updatedAt: ''
+    updatedAt: '',
+
+    url: '',
+    userId: '' as UserID
   }
   for (const key in digest) {
     const allValues = new Set(staticResources.map((resource) => resource[key]))

From bcf1611de61dd64e8c84c8179486bdad1190cfee Mon Sep 17 00:00:00 2001
From: David Gordon <david@hyperconstruct.io>
Date: Wed, 10 Jul 2024 15:10:11 -0700
Subject: [PATCH 10/10] prettier

---
 .../src/components/editor/panels/Files/browserGrid/index.tsx  | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
index 646516bc84..081ff21785 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
@@ -187,7 +187,7 @@ export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
       </div>
 
       <Tooltip title={t(props.item.fullName)}>
-        <div className="text-secondary text-wrap line-clamp-1 w-full break-all text-sm">{props.item.fullName}</div>
+        <div className="text-secondary line-clamp-1 w-full text-wrap break-all text-sm">{props.item.fullName}</div>
       </Tooltip>
     </div>
   )
@@ -357,7 +357,7 @@ export function FileBrowserItem({
       )}
 
       <ContextMenu anchorEvent={anchorEvent} onClose={() => setAnchorEvent(undefined)}>
-        <div className="min-w-44 flex w-fit flex-col gap-1 truncate rounded-lg bg-neutral-900 shadow-lg">
+        <div className="flex w-fit min-w-44 flex-col gap-1 truncate rounded-lg bg-neutral-900 shadow-lg">
           <Button variant="outline" size="small" fullWidth onClick={addFolder}>
             {t('editor:layout.filebrowser.addNewFolder')}
           </Button>