ui(server): fix file editor and file manager

resources/scripts/components/server/files/FileManagerBreadcrumbs.tsx

@@ -1,9 +1,10 @@
 import { Fragment, useEffect, useState } from 'react';
-import { ServerContext } from '@/state/server';
-import { NavLink, useLocation } from 'react-router-dom';
-import { encodePathSegments, hashToPath } from '@/helpers';
+import { NavLink, useParams } from 'react-router-dom';
 import tw from 'twin.macro';
 
+import { encodePathSegments } from '@/helpers';
+import { ServerContext } from '@/state/server';
+
 interface Props {
     renderLeft?: JSX.Element;
     withinFileEditor?: boolean;
@@ -11,22 +12,29 @@ interface Props {
 }
 
 export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
-    const [file, setFile] = useState<string | null>(null);
     const id = ServerContext.useStoreState(state => state.server.data!.id);
     const directory = ServerContext.useStoreState(state => state.files.directory);
-    const { hash } = useLocation();
+
+    const params = useParams<'*'>();
+
+    const [file, setFile] = useState<string>();
 
     useEffect(() => {
-        const path = hashToPath(hash);
-
-        if (withinFileEditor && !isNewFile) {
-            const name = path.split('/').pop() || null;
-            setFile(name);
+        if (!withinFileEditor || isNewFile) {
+            return;
         }
-    }, [withinFileEditor, isNewFile, hash]);
 
-    const breadcrumbs = (): { name: string; path?: string }[] =>
-        directory
+        if (withinFileEditor && params['*'] !== undefined && !isNewFile) {
+            setFile(decodeURIComponent(params['*']).split('/').pop());
+        }
+    }, [withinFileEditor, isNewFile]);
+
+    const breadcrumbs = (): { name: string; path?: string }[] => {
+        if (directory === '.') {
+            return [];
+        }
+
+        return directory
             .split('/')
             .filter(directory => !!directory)
             .map((directory, index, dirs) => {
@@ -36,6 +44,7 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
 
                 return { name: directory, path: `/${dirs.slice(0, index + 1).join('/')}` };
             });
+    };
 
     return (
         <div css={tw`flex flex-grow-0 items-center text-sm text-neutral-500 overflow-x-hidden`}>
@@ -50,6 +59,7 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
                         <NavLink
                             to={`/server/${id}/files#${encodePathSegments(crumb.path)}`}
                             css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
+                            end
                         >
                             {crumb.name}
                         </NavLink>