Pass one at unfucking the stupid file encoding issues

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

@@ -61,7 +61,7 @@ export default () => {
         setLoading(true);
         clearFlashes('files:view');
         fetchFileContent()
-            .then(content => saveFileContents(uuid, name || hash.replace(/^#/, ''), content))
+            .then(content => saveFileContents(uuid, name || decodeURI(hash.replace(/^#/, '')), content))
             .then(() => {
                 if (name) {
                     history.push(`/server/${id}/files/edit#/${name}`);

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

@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import { ServerContext } from '@/state/server';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useLocation } from 'react-router-dom';
 import { cleanDirectoryPath } from '@/helpers';
 import tw from 'twin.macro';
 
@@ -14,14 +14,28 @@ 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();
 
     useEffect(() => {
-        const parts = cleanDirectoryPath(window.location.hash).split('/');
+        let pathHash = cleanDirectoryPath(hash);
+        try {
+            pathHash = decodeURI(pathHash);
+        } catch (e) {
+            console.warn('Error decoding URL parts in hash:', e);
+        }
 
         if (withinFileEditor && !isNewFile) {
-            setFile(parts.pop() || null);
+            let name = pathHash.split('/').pop() || null;
+            if (name) {
+                try {
+                    name = decodeURIComponent(name);
+                } catch (e) {
+                    console.warn('Error decoding filename:', e);
+                }
+            }
+            setFile(name);
         }
-    }, [ withinFileEditor, isNewFile ]);
+    }, [ withinFileEditor, isNewFile, hash ]);
 
     const breadcrumbs = (): { name: string; path?: string }[] => directory.split('/')
         .filter(directory => !!directory)
@@ -51,16 +65,16 @@ export default ({ renderLeft, withinFileEditor, isNewFile }: Props) => {
                                 to={`/server/${id}/files#${crumb.path}`}
                                 css={tw`px-1 text-neutral-200 no-underline hover:text-neutral-100`}
                             >
-                                {crumb.name}
+                                {decodeURIComponent(crumb.name)}
                             </NavLink>/
                         </React.Fragment>
                         :
-                        <span key={index} css={tw`px-1 text-neutral-300`}>{crumb.name}</span>
+                        <span key={index} css={tw`px-1 text-neutral-300`}>{decodeURIComponent(crumb.name)}</span>
                 ))
             }
             {file &&
             <React.Fragment>
-                <span css={tw`px-1 text-neutral-300`}>{decodeURI(file)}</span>
+                <span css={tw`px-1 text-neutral-300`}>{file}</span>
             </React.Fragment>
             }
         </div>

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

@@ -39,7 +39,7 @@ export default () => {
     useEffect(() => {
         clearFlashes('files');
         setSelectedFiles([]);
-        setDirectory(hash.length > 0 ? decodeURI(hash) : '/');
+        setDirectory(hash.length > 0 ? hash : '/');
     }, [ hash ]);
 
     useEffect(() => {

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

@@ -24,7 +24,7 @@ const Clickable: React.FC<{ file: FileObject }> = memo(({ file, children }) => {
     const history = useHistory();
     const match = useRouteMatch();
 
-    const destination = cleanDirectoryPath(`${directory}/${file.name}`).split('/').map(v => encodeURI(v)).join('/');
+    const destination = cleanDirectoryPath(`${directory}/${file.name}`).split('/').join('/');
 
     const onRowClick = (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
         // Don't rely on the onClick to work with the generated URL. Because of the way this
@@ -72,7 +72,7 @@ const FileObjectRow = ({ file }: { file: FileObject }) => (
                 }
             </div>
             <div css={tw`flex-1 truncate`}>
-                {file.name}
+                {decodeURIComponent(file.name)}
             </div>
             {file.isFile &&
             <div css={tw`w-1/6 text-right mr-4 hidden sm:block`}>