From f313147b644e14cec561a01ad9547d5d1bce705e Mon Sep 17 00:00:00 2001
From: Jiatong Yao <jiatong@ethereal.com>
Date: Wed, 26 Jun 2024 13:09:16 -0500
Subject: [PATCH 1/4] add tooltip to show fullname

---
 .../editor/panels/Files/browserGrid/index.tsx    | 16 +++++++++++++---
 1 file changed, 13 insertions(+), 3 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 94799894b4..93dbb17201 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
@@ -38,7 +38,7 @@ import { getMutableState, useHookstate, useMutableState } from '@etherealengine/
 import { useFind, useMutation } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { TransformComponent } from '@etherealengine/spatial/src/transform/components/TransformComponent'
 import { ContextMenu } from '@etherealengine/ui/src/components/editor/layout/ContextMenu'
-import React, { MouseEventHandler, MutableRefObject, useEffect } from 'react'
+import React, { MouseEventHandler, MutableRefObject, useEffect, useRef } from 'react'
 import { ConnectDragSource, ConnectDropTarget, useDrag, useDrop } from 'react-dnd'
 import { getEmptyImage } from 'react-dnd-html5-backend'
 import { useTranslation } from 'react-i18next'
@@ -47,6 +47,7 @@ import { VscBlank } from 'react-icons/vsc'
 import { twMerge } from 'tailwind-merge'
 import { Vector3 } from 'three'
 import Button from '../../../../../primitives/tailwind/Button'
+import Tooltip from '../../../../../primitives/tailwind/Tooltip'
 import { FileIcon } from '../icon'
 import DeleteFileModal from './DeleteFileModal'
 import RenameFileModal from './RenameFileModal'
@@ -160,6 +161,9 @@ export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
   const { projectName } = useMutableState(EditorState)
   const staticResource = useFind(staticResourcePath, { query: { key: props.item.key, project: projectName.value! } })
   const thumbnailURL = staticResource.data[0]?.thumbnailURL
+  const showTooltip = useHookstate(false)
+  const { t } = useTranslation()
+
   return (
     <div
       className={`flex h-32 w-28 cursor-pointer flex-col items-center text-center ${
@@ -183,7 +187,12 @@ export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
           color="text-[#375DAF]"
         />
       </div>
-      <div className="text-secondary mb-2 line-clamp-1 w-full text-wrap break-all text-sm">{props.item.fullName}</div>
+
+      <Tooltip title={t(props.item.fullName)} direction="bottom">
+        <div className="text-secondary relative mb-2 line-clamp-1 w-full text-wrap break-all text-sm ">
+          {props.item.fullName}
+        </div>
+      </Tooltip>
     </div>
   )
 }
@@ -227,7 +236,8 @@ export function FileBrowserItem({
   const [anchorEvent, setAnchorEvent] = React.useState<undefined | React.MouseEvent<HTMLDivElement>>(undefined)
 
   const fileService = useMutation(fileBrowserPath)
-
+  const tooltipPosition = useHookstate({ x: 0, y: 0 })
+  const itemRef = useRef<HTMLDivElement>(null)
   const handleContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault()
     event.stopPropagation()

From a38f717c0fb1b11b264a498111eb816e340570c6 Mon Sep 17 00:00:00 2001
From: Jiatong Yao <jiatong@ethereal.com>
Date: Wed, 26 Jun 2024 13:24:03 -0500
Subject: [PATCH 2/4] cleanup

---
 .../src/components/editor/panels/Files/browserGrid/index.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 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 93dbb17201..9d224b4bae 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
@@ -38,7 +38,7 @@ import { getMutableState, useHookstate, useMutableState } from '@etherealengine/
 import { useFind, useMutation } from '@etherealengine/spatial/src/common/functions/FeathersHooks'
 import { TransformComponent } from '@etherealengine/spatial/src/transform/components/TransformComponent'
 import { ContextMenu } from '@etherealengine/ui/src/components/editor/layout/ContextMenu'
-import React, { MouseEventHandler, MutableRefObject, useEffect, useRef } 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'
@@ -161,7 +161,6 @@ export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
   const { projectName } = useMutableState(EditorState)
   const staticResource = useFind(staticResourcePath, { query: { key: props.item.key, project: projectName.value! } })
   const thumbnailURL = staticResource.data[0]?.thumbnailURL
-  const showTooltip = useHookstate(false)
   const { t } = useTranslation()
 
   return (
@@ -236,8 +235,6 @@ export function FileBrowserItem({
   const [anchorEvent, setAnchorEvent] = React.useState<undefined | React.MouseEvent<HTMLDivElement>>(undefined)
 
   const fileService = useMutation(fileBrowserPath)
-  const tooltipPosition = useHookstate({ x: 0, y: 0 })
-  const itemRef = useRef<HTMLDivElement>(null)
   const handleContextMenu = (event: React.MouseEvent<HTMLDivElement>) => {
     event.preventDefault()
     event.stopPropagation()

From 503b94be45a30c0e77f89ed3839504941c4b8aa2 Mon Sep 17 00:00:00 2001
From: Jiatong Yao <jiatong@ethereal.com>
Date: Wed, 26 Jun 2024 13:40:44 -0500
Subject: [PATCH 3/4] add tooltip to show full name at asset panel

---
 .../src/components/editor/panels/Assets/container/index.tsx  | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/ui/src/components/editor/panels/Assets/container/index.tsx b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
index 5c3bebf2fb..954b2c9588 100644
--- a/packages/ui/src/components/editor/panels/Assets/container/index.tsx
+++ b/packages/ui/src/components/editor/panels/Assets/container/index.tsx
@@ -152,7 +152,10 @@ const ResourceFile = ({ resource }: { resource: StaticResourceType }) => {
       <span className="mb-[5px] h-[70px] w-[70px] text-[70px]">
         <FileIcon thumbnailURL={resource.thumbnailURL} type={assetType} />
       </span>
-      <span className="w-[100px] overflow-hidden overflow-ellipsis whitespace-nowrap text-sm text-white">{name}</span>
+
+      <Tooltip title={t(name)} direction="bottom">
+        <span className="w-[100px] overflow-hidden overflow-ellipsis whitespace-nowrap text-sm text-white">{name}</span>
+      </Tooltip>
 
       <ContextMenu
         anchorEvent={anchorEvent}

From 338bbc37b7bcb5bdb7d6c10ec6a83fd66eeea9a6 Mon Sep 17 00:00:00 2001
From: David Gordon <david@hyperconstruct.io>
Date: Thu, 27 Jun 2024 09:30:40 -0700
Subject: [PATCH 4/4] integrate

---
 .../src/components/editor/panels/Files/browserGrid/index.tsx  | 4 +---
 1 file changed, 1 insertion(+), 3 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 9d224b4bae..399b90118d 100644
--- a/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
+++ b/packages/ui/src/components/editor/panels/Files/browserGrid/index.tsx
@@ -188,9 +188,7 @@ export const FileGridItem: React.FC<FileGridItemProps> = (props) => {
       </div>
 
       <Tooltip title={t(props.item.fullName)} direction="bottom">
-        <div className="text-secondary relative mb-2 line-clamp-1 w-full text-wrap 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>
   )