Pass one at unfucking the stupid file encoding issues

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>