fix (filename): weird filenames

I've tried a lot of things to make the URL look nice but somehow there's
always a bug to handle all possible scenarios. Eg:

/test/test#test%20with a: space.txt

maybe one day, we can make the urls looks nicer but this would need a
significant revamp, until that happen, that will do.

tip: don't understimate the work it takes to do it nicely, I've tried to
do this 2 times quickly and everytime there's a edge case that make
things not working and breaking other odd stuff

Author: mickael-kerjean

public/assets/components/breadcrumb.js

@@ -119,7 +119,7 @@ class ComponentBreadcrumb extends HTMLElement {
             return `
                 <div class="component_path-element n${idx}" data-path="${pathChunks.slice(0, idx+1).join("/") + "/"}">
                     <div class="li component_path-element-wrapper">
-                        <a class="label" href="${forwardURLParams(toHref("/files") + link, ["share", "canary"])}" data-link>
+                        <a class="label" href="${forwardURLParams(toHref("/files" + encodeURIComponent(link).replaceAll("%2F", "/")), ["share", "canary"])}" data-link>
                             ${tmpl}
                         </a>
                         <div class="component_separator">

public/assets/components/sidebar.js

@@ -168,7 +168,7 @@ async function _createListOfFiles(path, currentName, fullpath) {
         const currpath = path + whats[i] + "/";
         const $li = createElement(`
             <li data-path="${currpath}" title="${currpath}" class="no-select">
-                <a data-link href="${forwardURLParams(toHref("/files" + currpath), ["share", "canary"])}" draggable="false">
+                <a data-link href="${forwardURLParams(toHref("/files" + encodeURIComponent(currpath).replaceAll("%2F", "/")), ["share", "canary"])}" draggable="false">
                     <img class="component_icon" src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgYXJpYS1oaWRkZW49InRydWUiCiAgIGZvY3VzYWJsZT0iZmFsc2UiCiAgIGNsYXNzPSJvY3RpY29uIG9jdGljb24tZmlsZS1kaXJlY3RvcnktZmlsbCIKICAgdmlld0JveD0iMCAwIDE2IDE2IgogICB3aWR0aD0iMTYiCiAgIGhlaWdodD0iMTYiCiAgIGZpbGw9ImN1cnJlbnRDb2xvciIKICAgc3R5bGU9ImRpc3BsYXk6IGlubGluZS1ibG9jazsgdXNlci1zZWxlY3Q6IG5vbmU7IHZlcnRpY2FsLWFsaWduOiB0ZXh0LWJvdHRvbTsgb3ZlcmZsb3c6IHZpc2libGU7IgogICB2ZXJzaW9uPSIxLjEiCiAgIGlkPSJzdmcxNTgiCiAgIHNvZGlwb2RpOmRvY25hbWU9ImdpdGh1YmZvbGRlci5zdmciCiAgIGlua3NjYXBlOnZlcnNpb249IjEuMi4yIChiMGE4NDg2NTQxLCAyMDIyLTEyLTAxKSIKICAgeG1sbnM6aW5rc2NhcGU9Imh0dHA6Ly93d3cuaW5rc2NhcGUub3JnL25hbWVzcGFjZXMvaW5rc2NhcGUiCiAgIHhtbG5zOnNvZGlwb2RpPSJodHRwOi8vc29kaXBvZGkuc291cmNlZm9yZ2UubmV0L0RURC9zb2RpcG9kaS0wLmR0ZCIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzdmc9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KICA8ZGVmcwogICAgIGlkPSJkZWZzMTYyIiAvPgogIDxzb2RpcG9kaTpuYW1lZHZpZXcKICAgICBpZD0ibmFtZWR2aWV3MTYwIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzAwMDAwMCIKICAgICBib3JkZXJvcGFjaXR5PSIwLjI1IgogICAgIGlua3NjYXBlOnNob3dwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnBhZ2VvcGFjaXR5PSIwLjAiCiAgICAgaW5rc2NhcGU6cGFnZWNoZWNrZXJib2FyZD0iMCIKICAgICBpbmtzY2FwZTpkZXNrY29sb3I9IiNkMWQxZDEiCiAgICAgc2hvd2dyaWQ9ImZhbHNlIgogICAgIGlua3NjYXBlOnpvb209IjcxLjYyNSIKICAgICBpbmtzY2FwZTpjeD0iNy44MTE1MTgzIgogICAgIGlua3NjYXBlOmN5PSI4IgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMjAzNiIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMzk3IgogICAgIGlua3NjYXBlOndpbmRvdy14PSI3IgogICAgIGlua3NjYXBlOndpbmRvdy15PSIzNCIKICAgICBpbmtzY2FwZTp3aW5kb3ctbWF4aW1pemVkPSIxIgogICAgIGlua3NjYXBlOmN1cnJlbnQtbGF5ZXI9InN2ZzE1OCIgLz4KICA8cGF0aAogICAgIGQ9Ik0xLjc1IDFBMS43NSAxLjc1IDAgMCAwIDAgMi43NXYxMC41QzAgMTQuMjE2Ljc4NCAxNSAxLjc1IDE1aDEyLjVBMS43NSAxLjc1IDAgMCAwIDE2IDEzLjI1di04LjVBMS43NSAxLjc1IDAgMCAwIDE0LjI1IDNINy41YS4yNS4yNSAwIDAgMS0uMi0uMWwtLjktMS4yQzYuMDcgMS4yNiA1LjU1IDEgNSAxSDEuNzVaIgogICAgIGlkPSJwYXRoMTU2IgogICAgIHN0eWxlPSJmaWxsOiM1NzU5NWE7ZmlsbC1vcGFjaXR5OjEiIC8+Cjwvc3ZnPgo=" alt="directory">
                     <div class="ellipsis">${whats[i]}</div>
                 </a>

public/assets/lib/path.js

@@ -7,7 +7,8 @@ export function extname(str) {
 }
 
 export function join(baseURL, segment) {
-    return new URL(segment, baseURL).pathname;
+    const url = new URL(segment, baseURL);
+    return decodeURIComponent(url.pathname + url.hash);
 }
 
 export function forwardURLParams(url, allowed = []) {

public/assets/pages/filespage/ctrl_filesystem.js

@@ -329,7 +329,7 @@ function createLink(file, currentPath) {
     let path = file.path;
     if (!path) path = currentPath + file.name + (file.type === "directory" ? "/" : "");
     let link = file.type === "directory" ? "files" + path : "view" + path;
-    link = link.replaceAll("#", "%23");
+    link = encodeURIComponent(link).replaceAll("%2F", "/");
     return {
         path,
         link,

public/assets/pages/filespage/modal_share.js

@@ -183,9 +183,10 @@ async function ctrlListShares(render, { load, remove, all, formLinks }) {
 }
 
 async function ctrlCreateShare(render, { save, formState }) {
+    const enc = (p) => encodeURIComponent(p).replaceAll("%2F", "/");
     if (formState.path) formState.path = join(
-        location.origin + currentPath(),
-        formState.path,
+        location.origin + enc(currentPath()),
+        enc(formState.path),
     );
     let id = formState.id || randomString(7);
     const $page = createElement(`