Show top level dir (#4165)

* Reload FileTree and File when changed externally

* Added tests

* Show project root in files pane

* Cut off titles that are too long

* Fix tests

src/components/FileTree.tsx

@@ -538,3 +538,19 @@ export const FileTreeInner = ({
     </div>
   )
 }
+
+export const FileTreeRoot = () => {
+  const loaderData = useRouteLoaderData(PATHS.FILE) as IndexLoaderData
+  const { project } = loaderData
+
+  // project.path should never be empty here but I guess during initial loading
+  // it can be.
+  return (
+    <div
+      className="max-w-xs text-ellipsis overflow-hidden cursor-pointer"
+      title={project?.path ?? ''}
+    >
+      {project?.name ?? ''}
+    </div>
+  )
+}