From f5bece4ae6a9cf2c314dcb1d1c26398b47b11aa0 Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Wed, 5 Jun 2024 10:57:13 +0530
Subject: [PATCH 1/9] replace h2 with text

---
 .../panels/Properties/elementList/index.tsx   | 69 +++++++------------
 1 file changed, 24 insertions(+), 45 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx b/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
index 5fcf4d1377..f6f09b3588 100644
--- a/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
+++ b/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
@@ -28,16 +28,16 @@ import React, { useEffect, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 import { Component } from '@etherealengine/ecs/src/ComponentFunctions'
-import { getMutableState, getState, useHookstate } from '@etherealengine/hyperflux'
-
-import PlaceHolderIcon from '@mui/icons-material/GroupAddOutlined'
+import { getMutableState, getState, useHookstate, useMutableState } from '@etherealengine/hyperflux'
 
 import { ItemTypes } from '@etherealengine/editor/src/constants/AssetTypes'
 import { EditorControlFunctions } from '@etherealengine/editor/src/functions/EditorControlFunctions'
 import { ComponentEditorsState } from '@etherealengine/editor/src/services/ComponentEditors'
 import { ComponentShelfCategoriesState } from '@etherealengine/editor/src/services/ComponentShelfCategoriesState'
 import { SelectionState } from '@etherealengine/editor/src/services/SelectionServices'
+import { GrStatusPlaceholder } from 'react-icons/gr'
 import { IoIosArrowDown, IoIosArrowUp } from 'react-icons/io'
+import Text from '../../../../../primitives/tailwind/Text'
 import StringInput from '../../../input/String'
 import { usePopoverContextClose } from '../../../util/PopoverContext'
 
@@ -50,10 +50,12 @@ export type SceneElementType = {
 
 const ComponentListItem = ({ item }: { item: Component }) => {
   const { t } = useTranslation()
-  useHookstate(getMutableState(ComponentEditorsState).keys).value // ensure reactively updates new components
-  const Icon = getState(ComponentEditorsState)[item.name]?.iconComponent ?? PlaceHolderIcon
+  useMutableState(ComponentEditorsState).keys // ensure reactively updates new components
+  const Icon = getState(ComponentEditorsState)[item.name]?.iconComponent ?? GrStatusPlaceholder
   const handleClosePopover = usePopoverContextClose()
 
+  const jsonName = item.jsonID?.slice(3).replace('_', '-') || item.name
+
   return (
     <button
       className="flex w-full items-center bg-theme-primary p-4 text-white"
@@ -65,12 +67,12 @@ const ComponentListItem = ({ item }: { item: Component }) => {
     >
       <Icon className="h-6 w-6 text-white" />
       <div className="ml-4 w-full">
-        <h3 className="text-subtitle1 text-center text-white">
-          {startCase((item.jsonID || item.name).replace('-', ' ').toLowerCase())}
-        </h3>
-        <p className="text-caption text-center text-white">
-          {t(`editor:layout.assetGrid.component-detail.${item.jsonID}`)}
-        </p>
+        <Text className="text-subtitle1 text-center text-theme-primary">
+          {startCase(jsonName.replace('-', ' ').toLowerCase())}
+        </Text>
+        <Text component="p" className="text-caption text-center text-theme-secondary">
+          {t(`editor:layout.assetGrid.component-detail.${jsonName}`)}
+        </Text>
       </div>
     </button>
   )
@@ -95,7 +97,7 @@ const SceneElementListItem = ({
         <span>{categoryTitle}</span>
         {isCollapsed || open.value ? <IoIosArrowUp /> : <IoIosArrowDown />}
       </button>
-      <div className={`${isCollapsed || open.value ? '' : 'hidden'}`}>
+      <div className={isCollapsed || open.value ? '' : 'hidden'}>
         <ul className="w-full bg-theme-primary">
           {categoryItems.map((item) => (
             <ComponentListItem key={item.jsonID || item.name} item={item} />
@@ -145,16 +147,16 @@ export function ElementList() {
 
   return (
     <>
-      <div className="h-auto w-full overflow-x-hidden overflow-y-scroll bg-theme-primary">
-        <div className="p-2">
-          <h2 className="text-center uppercase text-white">{t('editor:layout.assetGrid.components')}</h2>
-          <StringInput
-            placeholder={t('editor:layout.assetGrid.components-search')}
-            value={search.local.value}
-            onChange={(val) => onSearch(val)}
-            inputRef={inputReference}
-          />
-        </div>
+      <div className="h-auto w-full overflow-x-hidden overflow-y-scroll bg-theme-primary p-2">
+        <Text className="mb-1.5 w-full text-center uppercase text-white">
+          {t('editor:layout.assetGrid.components')}
+        </Text>
+        <StringInput
+          placeholder={t('editor:layout.assetGrid.components-search')}
+          value={search.local.value}
+          onChange={(val) => onSearch(val)}
+          inputRef={inputReference}
+        />
       </div>
       {shelves.map(([category, items]) => (
         <SceneElementListItem
@@ -166,29 +168,6 @@ export function ElementList() {
       ))}
     </>
   )
-  {
-    /* <List
-      sx={{ width: 300, height: 600, bgcolor: 'var(--dockBackground)' }}
-      subheader={
-        <div style={{ padding: '0.5rem' }}>
-          <Typography style={{ color: 'var(--textColor)', textAlign: 'center', textTransform: 'uppercase' }}>
-            {t('editor:layout.assetGrid.components')}
-          </Typography>
-          <InputText
-            placeholder={t('editor:layout.assetGrid.components-search')}
-            value={search.local.value}
-            sx={{ mt: 1 }}
-            onChange={(e) => onSearch(e.target.value)}
-            inputRef={inputReference}
-          />
-        </div>
-      }
-    >
-      {shelves.map(([category, items]) => (
-       
-      ))}
-    </List>*/
-  }
 }
 
 export default ElementList

From 19f17d1d454771c68d41c74cccb7f17cd1dbf12f Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Wed, 5 Jun 2024 10:58:05 +0530
Subject: [PATCH 2/9] elementlist descriptions

---
 .../editor/panels/Properties/container/index.tsx           | 2 +-
 .../components/editor/panels/Viewport/tools/GridTool.tsx   | 2 +-
 .../src/components/editor/properties/light/spot/index.tsx  | 7 ++++++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/editor/panels/Properties/container/index.tsx b/packages/ui/src/components/editor/panels/Properties/container/index.tsx
index e8726f08ee..f505954c49 100644
--- a/packages/ui/src/components/editor/panels/Properties/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Properties/container/index.tsx
@@ -110,7 +110,7 @@ const EntityEditor = (props: { entityUUID: EntityUUID; multiEdit: boolean }) =>
         anchorPosition={anchorPosition}
         className="h-[60%] w-full min-w-[300px] overflow-y-auto"
       >
-        {<ElementList />}
+        <ElementList />
       </Popover>
       <TransformPropertyGroup entity={entity} />
       {components.map((c, i) => (
diff --git a/packages/ui/src/components/editor/panels/Viewport/tools/GridTool.tsx b/packages/ui/src/components/editor/panels/Viewport/tools/GridTool.tsx
index f47fd1f86b..3591b85fed 100644
--- a/packages/ui/src/components/editor/panels/Viewport/tools/GridTool.tsx
+++ b/packages/ui/src/components/editor/panels/Viewport/tools/GridTool.tsx
@@ -48,7 +48,7 @@ const GridTool = () => {
         startIcon={<MdBorderClear />}
         onClick={onToggleGridVisible}
         variant="transparent"
-        title={t('editor:toolbar.transformPivot.info-toggleGridVisibility')}
+        title={t('editor:toolbar.grid.info-toggleGridVisibility')}
         className="px-0"
       />
       <NumericInput
diff --git a/packages/ui/src/components/editor/properties/light/spot/index.tsx b/packages/ui/src/components/editor/properties/light/spot/index.tsx
index bb4094ec79..74d386be4b 100644
--- a/packages/ui/src/components/editor/properties/light/spot/index.tsx
+++ b/packages/ui/src/components/editor/properties/light/spot/index.tsx
@@ -50,7 +50,12 @@ export const SpotLightNodeEditor: EditorComponentType = (props) => {
   const lightComponent = useComponent(props.entity, SpotLightComponent).value
 
   return (
-    <NodeEditor {...props} description={t('editor:properties.spotLight.description')} icon={<LuCircleDot />}>
+    <NodeEditor
+      {...props}
+      name={t('editor:properties.spotLight.name')}
+      description={t('editor:properties.spotLight.description')}
+      icon={<LuCircleDot />}
+    >
       <InputGroup name="Color" label={t('editor:properties.spotLight.lbl-color')}>
         <ColorInput value={lightComponent.color} onChange={updateProperty(SpotLightComponent, 'color')} />
       </InputGroup>

From ca91a927461c75700afc442f4c2782637816a419 Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Wed, 5 Jun 2024 11:41:14 +0530
Subject: [PATCH 3/9] wrap euler input

---
 packages/ui/src/components/editor/input/Euler/index.tsx  | 2 +-
 .../ui/src/components/editor/input/Vector3/index.tsx     | 9 +++++++--
 2 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/packages/ui/src/components/editor/input/Euler/index.tsx b/packages/ui/src/components/editor/input/Euler/index.tsx
index 4295d7e350..03a0baeae9 100644
--- a/packages/ui/src/components/editor/input/Euler/index.tsx
+++ b/packages/ui/src/components/editor/input/Euler/index.tsx
@@ -64,7 +64,7 @@ export const EulerInput = (props: EulerInputProps) => {
   )
 
   return (
-    <div className="flex flex-row justify-start gap-1.5">
+    <div className="flex flex-wrap justify-start gap-1.5">
       <NumericInput
         value={euler.x.value * RAD2DEG}
         onChange={onSetEuler('x')}
diff --git a/packages/ui/src/components/editor/input/Vector3/index.tsx b/packages/ui/src/components/editor/input/Vector3/index.tsx
index 5521093852..411019f904 100644
--- a/packages/ui/src/components/editor/input/Vector3/index.tsx
+++ b/packages/ui/src/components/editor/input/Vector3/index.tsx
@@ -124,9 +124,14 @@ export const Vector3Input = ({
   const vz = value.z
 
   return (
-    <div className="flex flex-row flex-wrap justify-start gap-1.5">
+    <div className="flex flex-wrap justify-start gap-1.5">
       {uniformScaling && (
-        <Button startIcon={uniformEnabled.value ? <MdLink /> : <MdLinkOff />} onClick={onToggleUniform} />
+        <Button
+          title="Uniform Scaling"
+          variant="transparent"
+          startIcon={uniformEnabled.value ? <MdLink /> : <MdLinkOff />}
+          onClick={onToggleUniform}
+        />
       )}
       <NumericInput
         {...rest}

From 5e920cce5400c38f87123c97ceefba54cdf0d135 Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Wed, 5 Jun 2024 11:41:48 +0530
Subject: [PATCH 4/9] added attachment point and grid snap toggling

---
 packages/client-core/i18n/en/editor.json      |  1 +
 .../Viewport/tools/TransformSnapTool.tsx      | 20 ++++++++++---------
 .../editor/properties/transform/index.tsx     |  2 --
 3 files changed, 12 insertions(+), 11 deletions(-)

diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
index d15db7418f..56f27d3441 100755
--- a/packages/client-core/i18n/en/editor.json
+++ b/packages/client-core/i18n/en/editor.json
@@ -821,6 +821,7 @@
       "description": "Adds an interactable that opens links or navigates scene"
     },
     "spotLight": {
+      "name": "Spot Light",
       "description": "A light which emits along a direction, illuminating objects within a cone.",
       "lbl-color": "Color",
       "lbl-intensity": "Intensity",
diff --git a/packages/ui/src/components/editor/panels/Viewport/tools/TransformSnapTool.tsx b/packages/ui/src/components/editor/panels/Viewport/tools/TransformSnapTool.tsx
index 3600575fa1..b8af4fe35d 100644
--- a/packages/ui/src/components/editor/panels/Viewport/tools/TransformSnapTool.tsx
+++ b/packages/ui/src/components/editor/panels/Viewport/tools/TransformSnapTool.tsx
@@ -28,9 +28,11 @@ import React from 'react'
 import { SnapMode } from '@etherealengine/engine/src/scene/constants/transformConstants'
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 
+import { toggleSnapMode } from '@etherealengine/editor/src/functions/transformFunctions'
 import { EditorHelperState } from '@etherealengine/editor/src/services/EditorHelperState'
 import { ObjectGridSnapState } from '@etherealengine/editor/src/systems/ObjectGridSnapSystem'
 import { useTranslation } from 'react-i18next'
+import { LuUtilityPole } from 'react-icons/lu'
 import { MdOutlineCenterFocusWeak } from 'react-icons/md'
 import Button from '../../../../../primitives/tailwind/Button'
 import Select from '../../../../../primitives/tailwind/Select'
@@ -78,19 +80,19 @@ const TransformSnapTool = () => {
     objectSnapState.enabled.set(!objectSnapState.enabled.value)
   }
 
-  // const onChangeScaleSnap = (snapValue: number) => {
-  //   getMutableState(EditorHelperState).scaleSnap.set(snapValue)
-  //   if (editorHelperState.snapMode.value !== SnapMode.Grid) {
-  //     getMutableState(EditorHelperState).snapMode.set(SnapMode.Grid)
-  //   }
-  // }
-
   return (
     <div id="transform-snap" className="flex items-center bg-theme-surfaceInput">
       <Button
-        startIcon={<MdOutlineCenterFocusWeak />}
+        startIcon={<LuUtilityPole />}
         onClick={toggleAttachmentPointSnap}
-        variant="transparent"
+        variant={objectSnapState.enabled.value ? 'outline' : 'transparent'}
+        title={t('editor:toolbar.transformSnapTool.toggleBBoxSnap')}
+        className="px-0"
+      />
+      <Button
+        startIcon={<MdOutlineCenterFocusWeak />}
+        onClick={toggleSnapMode}
+        variant={editorHelperState.gridSnap.value === SnapMode.Grid ? 'outline' : 'transparent'}
         title={t('editor:toolbar.transformSnapTool.toggleSnapMode')}
         className="px-0"
       />
diff --git a/packages/ui/src/components/editor/properties/transform/index.tsx b/packages/ui/src/components/editor/properties/transform/index.tsx
index 7a0c69e1e1..b4b1140ed1 100644
--- a/packages/ui/src/components/editor/properties/transform/index.tsx
+++ b/packages/ui/src/components/editor/properties/transform/index.tsx
@@ -112,10 +112,8 @@ export const TransformPropertyGroup: EditorComponentType = (props) => {
         <BooleanInput value={hasComponent(props.entity, SceneDynamicLoadTagComponent)} onChange={onChangeDynamicLoad} />
         {hasComponent(props.entity, SceneDynamicLoadTagComponent) && (
           <NumericInput
-            //style={{ paddingLeft: `12px`, paddingRight: `3px` }}
             min={1}
             max={100}
-            //step={1}
             value={getComponent(props.entity, SceneDynamicLoadTagComponent).distance}
             onChange={updateProperty(SceneDynamicLoadTagComponent, 'distance')}
             onRelease={commitProperty(SceneDynamicLoadTagComponent, 'distance')}

From 36f12138f4c0929ae4c25acfe2becfcaf2fd1e4f Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Wed, 5 Jun 2024 11:45:40 +0530
Subject: [PATCH 5/9] make world transform select menu above gizmo tools

---
 packages/ui/src/primitives/tailwind/Select/index.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/ui/src/primitives/tailwind/Select/index.tsx b/packages/ui/src/primitives/tailwind/Select/index.tsx
index 63e6b4b89c..024e3993e6 100644
--- a/packages/ui/src/primitives/tailwind/Select/index.tsx
+++ b/packages/ui/src/primitives/tailwind/Select/index.tsx
@@ -150,7 +150,7 @@ const Select = <T extends OptionValueType>({
         }
       />
       <div
-        className={`absolute z-10 mt-2 w-full rounded border border-theme-primary bg-theme-surface-main ${
+        className={`absolute z-30 mt-2 w-full rounded border border-theme-primary bg-theme-surface-main ${
           showOptions.value ? 'visible' : 'hidden'
         }`}
       >

From 7a9fc7ea0d175a2be374ead0ea9e617500fadfd7 Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Wed, 5 Jun 2024 11:51:48 +0530
Subject: [PATCH 6/9] highlight grid visibility button

---
 .../src/components/editor/panels/Viewport/tools/GridTool.tsx   | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/editor/panels/Viewport/tools/GridTool.tsx b/packages/ui/src/components/editor/panels/Viewport/tools/GridTool.tsx
index 3591b85fed..5f0f4f67ea 100644
--- a/packages/ui/src/components/editor/panels/Viewport/tools/GridTool.tsx
+++ b/packages/ui/src/components/editor/panels/Viewport/tools/GridTool.tsx
@@ -47,7 +47,7 @@ const GridTool = () => {
       <Button
         startIcon={<MdBorderClear />}
         onClick={onToggleGridVisible}
-        variant="transparent"
+        variant={rendererState.gridVisibility.value ? 'outline' : 'transparent'}
         title={t('editor:toolbar.grid.info-toggleGridVisibility')}
         className="px-0"
       />
@@ -60,6 +60,7 @@ const GridTool = () => {
         smallStep={0.5}
         mediumStep={1}
         largeStep={5}
+        min={0.0}
         unit="m"
       />
     </div>

From 437d277673a00968730031a881ba55270ac1d8eb Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Wed, 5 Jun 2024 16:50:22 +0530
Subject: [PATCH 7/9] rename file using a separate modal

---
 packages/client-core/i18n/en/editor.json      |  1 +
 .../Files/browserGrid/RenameFileModal.tsx     | 63 +++++++++++++++
 .../editor/panels/Files/browserGrid/index.tsx | 78 ++++---------------
 .../editor/panels/Files/container/index.tsx   |  1 -
 4 files changed, 80 insertions(+), 63 deletions(-)
 create mode 100644 packages/ui/src/components/editor/panels/Files/browserGrid/RenameFileModal.tsx

diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
index 56f27d3441..214846ceeb 100755
--- a/packages/client-core/i18n/en/editor.json
+++ b/packages/client-core/i18n/en/editor.json
@@ -1132,6 +1132,7 @@
       "copyAsset": "Copy",
       "pasteAsset": "Paste",
       "renameAsset": "Rename",
+      "renameFile": "Rename File",
       "viewAssetProperties": "View Properties",
       "refresh": "Refresh",
       "back": "Back",
diff --git a/packages/ui/src/components/editor/panels/Files/browserGrid/RenameFileModal.tsx b/packages/ui/src/components/editor/panels/Files/browserGrid/RenameFileModal.tsx
new file mode 100644
index 0000000000..924c89c6ee
--- /dev/null
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/RenameFileModal.tsx
@@ -0,0 +1,63 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+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 React from 'react'
+import { useTranslation } from 'react-i18next'
+
+import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
+import { fileBrowserPath } from '@etherealengine/common/src/schema.type.module'
+import { FileDataType } from '@etherealengine/editor/src/components/assets/FileBrowser/FileDataType'
+import { useHookstate } from '@etherealengine/hyperflux'
+import { useMutation } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
+import Input from '../../../../../primitives/tailwind/Input'
+import Modal from '../../../../../primitives/tailwind/Modal'
+
+export default function RenameFileModal({ file }: { file: FileDataType }) {
+  const { t } = useTranslation()
+  const newFileName = useHookstate(file.name)
+  const fileService = useMutation(fileBrowserPath)
+
+  const handleSubmit = async () => {
+    fileService.update(null, {
+      oldName: file.fullName,
+      newName: file.isFolder ? newFileName.value : `${newFileName.value}.${file.type}`,
+      oldPath: file.path,
+      newPath: file.path,
+      isCopy: false
+    })
+    PopoverState.hidePopupover()
+  }
+
+  return (
+    <Modal
+      title={t('editor:layout.filebrowser.renameFile')}
+      className="w-[50vw] max-w-2xl"
+      onSubmit={handleSubmit}
+      onClose={PopoverState.hidePopupover}
+    >
+      <Input value={newFileName.value} onChange={(event) => newFileName.set(event.target.value)} />
+    </Modal>
+  )
+}
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 93553b17c9..a942ee7232 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
@@ -23,6 +23,7 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
+import { PopoverState } from '@etherealengine/client-core/src/common/services/PopoverState'
 import { fileBrowserPath, staticResourcePath } from '@etherealengine/common/src/schema.type.module'
 import {
   FilesViewModeSettings,
@@ -35,7 +36,7 @@ import { getSpawnPositionAtCenter } from '@etherealengine/editor/src/functions/s
 import { getMutableState, useHookstate } from '@etherealengine/hyperflux'
 import { useFind, useMutation } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { TransformComponent } from '@etherealengine/spatial/src/transform/components/TransformComponent'
-import React, { MouseEventHandler, MutableRefObject, useEffect, useState } from 'react'
+import React, { MouseEventHandler, MutableRefObject, useEffect } from 'react'
 import { ConnectDragSource, ConnectDropTarget, useDrag, useDrop } from 'react-dnd'
 import { getEmptyImage } from 'react-dnd-html5-backend'
 import { useTranslation } from 'react-i18next'
@@ -43,26 +44,9 @@ import { IoIosArrowForward } from 'react-icons/io'
 import { VscBlank } from 'react-icons/vsc'
 import { Vector3 } from 'three'
 import Button from '../../../../../primitives/tailwind/Button'
-import Input from '../../../../../primitives/tailwind/Input'
 import { ContextMenu } from '../../../layout/ContextMenu'
 import { FileIcon } from '../icon'
-
-const RenameInput = ({ fileName, onNameChanged }: { fileName: string; onNameChanged: (newName: string) => void }) => {
-  const newFileName = useHookstate(fileName)
-
-  return (
-    <Input
-      autoFocus={true}
-      value={newFileName.value}
-      onChange={(event) => newFileName.set(event.target.value)}
-      onKeyUp={async (e) => {
-        if (e.key == 'Enter') {
-          onNameChanged(newFileName.value)
-        }
-      }}
-    />
-  )
-}
+import RenameFileModal from './RenameFileModal'
 
 export const canDropItemOverFolder = (folderName: string) =>
   folderName.endsWith('/assets') ||
@@ -103,8 +87,6 @@ export const FileTableWrapper = ({ wrap, children }: { wrap: boolean; children:
 export const FileTableListBody = ({
   file,
   onContextMenu,
-  isRenaming,
-  onNameChanged,
   onClick,
   onDoubleClick,
   modifiedDate,
@@ -114,8 +96,6 @@ export const FileTableListBody = ({
 }: {
   file: FileDataType
   onContextMenu: React.MouseEventHandler
-  isRenaming: boolean
-  onNameChanged: (newName: string) => void
   onClick?: MouseEventHandler<HTMLDivElement>
   onDoubleClick?: MouseEventHandler<HTMLDivElement>
   modifiedDate?: string
@@ -136,7 +116,7 @@ export const FileTableListBody = ({
       <span className="flex max-h-7 flex-row items-center gap-2 text-[#e7e7e7]">
         {file.isFolder ? <IoIosArrowForward /> : <VscBlank />}
         <FileIcon thumbnailURL={null} type={file.type} isFolder={file.isFolder} />
-        {isRenaming ? <RenameInput fileName={file.name} onNameChanged={onNameChanged} /> : file.fullName}
+        {file.fullName}
       </span>
     ),
     type: file.type.toUpperCase(),
@@ -148,8 +128,8 @@ export const FileTableListBody = ({
       key={file.key}
       className={`h-[${fontSize * 3}px] text-[${fontSize}px] text-[#a3a3a3] hover:bg-theme-surfaceInput`}
       onContextMenu={onContextMenu}
-      onClick={isRenaming ? () => {} : onClick}
-      onDoubleClick={isRenaming ? () => {} : onDoubleClick}
+      onClick={onClick}
+      onDoubleClick={onDoubleClick}
       ref={(ref) => dragFn(dropFn(ref))}
     >
       {availableTableColumns
@@ -165,10 +145,8 @@ export const FileTableListBody = ({
 
 type FileGridItemProps = {
   item: FileDataType
-  isRenaming: boolean
   onDoubleClick?: MouseEventHandler<HTMLDivElement>
   onClick?: MouseEventHandler<HTMLDivElement>
-  onNameChanged: (newName: string) => void
 }
 
 export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
@@ -196,14 +174,9 @@ export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
           color="text-[#375DAF]"
         />
       </div>
-      {props.isRenaming ? (
-        <></>
-      ) : (
-        /*<RenameInput fileName={props.item.name} onNameChanged={props.onNameChanged} />*/
-        <div className="text-secondary mb-[8px] line-clamp-1 w-full text-wrap break-all text-[14px]">
-          {props.item.fullName}
-        </div>
-      )}
+      <div className="text-secondary mb-[8px] line-clamp-1 w-full text-wrap break-all text-[14px]">
+        {props.item.fullName}
+      </div>
     </div>
   )
 }
@@ -220,7 +193,6 @@ type FileBrowserItemType = {
   deleteContent: (contentPath: string, type: string) => void
   onClick: (params: FileDataType) => void
   dropItemsOnPanel: (data: any, dropOn?: FileDataType) => void
-  moveContent: (oldName: string, newName: string, oldPath: string, newPath: string, isCopy?: boolean) => Promise<void>
   addFolder: () => void
   isListView: boolean
   staticResourceModifiedDates: Record<string, string>
@@ -237,7 +209,6 @@ export function FileBrowserItem({
   deleteContent,
   onClick,
   dropItemsOnPanel,
-  moveContent,
   isFilesLoading,
   addFolder,
   isListView,
@@ -247,7 +218,6 @@ export function FileBrowserItem({
   const [anchorPosition, setAnchorPosition] = React.useState<any>(undefined)
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
   const open = Boolean(anchorEl)
-  const [renamingAsset, setRenamingAsset] = useState(false)
 
   const fileService = useMutation(fileBrowserPath)
 
@@ -339,17 +309,6 @@ export function FileBrowserItem({
     handleClose()
   }
 
-  const onNameChanged = async (fileName: string): Promise<void> => {
-    setRenamingAsset(false)
-
-    await moveContent(item.fullName, item.isFolder ? fileName : `${fileName}.${item.type}`, item.path, item.path, false)
-  }
-
-  const rename = () => {
-    setRenamingAsset(true)
-    handleClose()
-  }
-
   const [_dragProps, drag, preview] = disableDnD
     ? [undefined, undefined, undefined]
     : useDrag(() => ({
@@ -382,8 +341,6 @@ export function FileBrowserItem({
           onContextMenu={handleContextMenu}
           onClick={onClickItem}
           onDoubleClick={onClickItem}
-          isRenaming={renamingAsset}
-          onNameChanged={onNameChanged}
           modifiedDate={staticResourceModifiedDates[item.key]}
           drop={drop}
           isOver={isOver}
@@ -393,15 +350,7 @@ export function FileBrowserItem({
         <div ref={drop} style={{ border: isOver ? '3px solid #ccc' : '' }}>
           <div ref={drag}>
             <div onContextMenu={handleContextMenu}>
-              {
-                <FileGridItem
-                  item={item}
-                  onClick={onClickItem}
-                  onDoubleClick={onClickItem}
-                  isRenaming={renamingAsset}
-                  onNameChanged={onNameChanged}
-                />
-              }
+              {<FileGridItem item={item} onClick={onClickItem} onDoubleClick={onClickItem} />}
             </div>
           </div>
         </div>
@@ -445,7 +394,12 @@ export function FileBrowserItem({
         <Button variant="outline" size="small" fullWidth disabled={!currentContent.current} onClick={pasteContent}>
           {t('editor:layout.filebrowser.pasteAsset')}
         </Button>
-        <Button variant="outline" size="small" fullWidth onClick={rename}>
+        <Button
+          variant="outline"
+          size="small"
+          fullWidth
+          onClick={() => PopoverState.showPopupover(<RenameFileModal file={item} />)}
+        >
           {t('editor:layout.filebrowser.renameAsset')}
         </Button>
         <Button variant="outline" size="small" fullWidth onClick={deleteContentCallback}>
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 7f2e6507c2..5dc4b0e418 100644
--- a/packages/ui/src/components/editor/panels/Files/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/container/index.tsx
@@ -420,7 +420,6 @@ const FileBrowserContentPanel: React.FC<FileBrowserContentPanelProps> = (props)
                   item={file}
                   disableDnD={props.disableDnD}
                   onClick={onSelect}
-                  moveContent={moveContent}
                   deleteContent={handleConfirmDelete}
                   currentContent={currentContentRef}
                   setOpenPropertiesModal={openProperties.set}

From a77c44fa9bffa5b1458fba88ec36475278fc6ee6 Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Wed, 5 Jun 2024 17:00:31 +0530
Subject: [PATCH 8/9] IR-2429 IR-2430 IR-2436 IR-2437 link issues


From f44c807ec4dcf322cb6c28c3f137067ed4fdf7fc Mon Sep 17 00:00:00 2001
From: aditya-mitra <55396651+aditya-mitra@users.noreply.github.com>
Date: Fri, 7 Jun 2024 10:39:40 +0530
Subject: [PATCH 9/9] fallback translation strings and fix subtitle styling

---
 packages/client-core/i18n/en/editor.json                    | 2 +-
 .../editor/panels/Properties/elementList/index.tsx          | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/client-core/i18n/en/editor.json b/packages/client-core/i18n/en/editor.json
index a28903807c..629dc7b650 100755
--- a/packages/client-core/i18n/en/editor.json
+++ b/packages/client-core/i18n/en/editor.json
@@ -1091,7 +1091,7 @@
       "components": "Components",
       "components-search": "Search Components ...",
       "component-detail": {
-        "gltf-model": "Creates objects in the hierarchy. Drag a model from the assets folder into the URL box or drag assets directly from project files into the hierarchy.",
+        "model": "Creates objects in the hierarchy. Drag a model from the assets folder into the URL box or drag assets directly from project files into the hierarchy.",
         "volumetric": "Import volumetric files. Accepts DRCS, UVOL, or Manifest Files. Links to cloud hosting.",
         "video": "Imports a 2D plane that accepts .mp4, .mkv, .avi",
         "variant": "Add model variant for level of detail",
diff --git a/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx b/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
index f6f09b3588..b410b7c10a 100644
--- a/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
+++ b/packages/ui/src/components/editor/panels/Properties/elementList/index.tsx
@@ -67,11 +67,11 @@ const ComponentListItem = ({ item }: { item: Component }) => {
     >
       <Icon className="h-6 w-6 text-white" />
       <div className="ml-4 w-full">
-        <Text className="text-subtitle1 text-center text-theme-primary">
+        <Text className="text-subtitle1 block text-center text-theme-primary">
           {startCase(jsonName.replace('-', ' ').toLowerCase())}
         </Text>
-        <Text component="p" className="text-caption text-center text-theme-secondary">
-          {t(`editor:layout.assetGrid.component-detail.${jsonName}`)}
+        <Text component="p" className="text-caption block text-center text-theme-secondary">
+          {t(`editor:layout.assetGrid.component-detail.${jsonName}`, '')}
         </Text>
       </div>
     </button>