fix path encoding issue (at UI level)

Author: devalbo

src/App.tsx

@@ -109,10 +109,17 @@ function getBreadcrumbs(baseUrl: string, displayBaseUrl: string, currentUrl: str
     for (let i = 0; i < parts.length; i++) {
       const isLast = i === parts.length - 1;
       const seg = parts[i]!;
+      const label = (() => {
+        try {
+          return decodeURIComponent(seg);
+        } catch {
+          return seg;
+        }
+      })();
       // Containers always end in '/', files do not. We don't know which intermediate segments are containers,
       // but for this virtual pod UI, path segments are navigable as containers.
       const nextUrl = acc + seg + (isLast ? (isContainer ? '/' : '') : '/');
-      crumbs.push({ label: seg, url: nextUrl, isCurrent: isLast });
+      crumbs.push({ label, url: nextUrl, isCurrent: isLast });
       acc = acc + seg + '/';
     }
 
@@ -199,6 +206,19 @@ function DropdownMenu(props: {
   );
 }
 
+function ensureTrailingSlash(url: string): string {
+  return url.endsWith('/') ? url : `${url}/`;
+}
+
+function makeChildUrl(parentContainerUrl: string, rawName: string, isContainer: boolean): string | null {
+  const name = rawName.trim();
+  if (!name) return null;
+  if (name.includes('/')) return null;
+  const encoded = encodeURIComponent(name);
+  const base = ensureTrailingSlash(parentContainerUrl);
+  return base + encoded + (isContainer ? '/' : '');
+}
+
 // Metadata for the Schemas view: descriptions and Solid doc links
 const SCHEMA_META: Array<{ file: string; name: string; description: string; fields: string[]; solidHref?: string }> = [
   { file: 'iri.json', name: 'IRI', description: 'Internationalized Resource Identifier (URI). Used for @id, URLs, and vocabulary terms.', fields: [], solidHref: 'https://solidproject.org/TR/protocol' },
@@ -366,7 +386,15 @@ interface FileItemProps {
 const FileItem: React.FC<FileItemProps> = ({ url, onNavigate }) => {
   const row = useRow('resources', url) as ResourceRow;
   const isDir = row?.type === 'Container';
-  const name = url.split('/').filter(Boolean).pop();
+  const rawName = url.split('/').filter(Boolean).pop();
+  const name = (() => {
+    if (!rawName) return rawName;
+    try {
+      return decodeURIComponent(rawName);
+    } catch {
+      return rawName;
+    }
+  })();
 
   return (
     <div
@@ -577,6 +605,8 @@ export default function App() {
   const [newFileOpen, setNewFileOpen] = useState(false);
   const [newFileName, setNewFileName] = useState('');
   const [newFileContent, setNewFileContent] = useState('');
+  const [newFolderOpen, setNewFolderOpen] = useState(false);
+  const [newFolderName, setNewFolderName] = useState('');
   const uploadImageInputRef = useRef<HTMLInputElement>(null);
   const importFileInputRef = useRef<HTMLInputElement>(null);
   const [copyStatus, setCopyStatus] = useState<'success' | 'error' | null>(null);
@@ -609,6 +639,7 @@ export default function App() {
   const row = useRow('resources', currentUrl, store ?? undefined) as ResourceRow | undefined;
   const isContainer = row?.type === 'Container';
   const parentUrl = row?.parentId;
+  const currentContainerUrl = isContainer ? currentUrl : (parentUrl ?? BASE_URL);
 
   // Persisted preference (via TinyBase LocalStorage persister).
   // Keep this in React state so the agent hint bar can be hidden "permanently".
@@ -631,24 +662,59 @@ export default function App() {
     setNewFileContent('');
   };
 
+  const openNewFolderDialog = () => {
+    setNewFolderName('');
+    setNewFolderOpen(true);
+  };
+
+  const closeNewFolderDialog = () => {
+    setNewFolderOpen(false);
+    setNewFolderName('');
+  };
+
   const submitNewFile = () => {
     const name = newFileName.trim();
     if (!name || !pod) return;
-    pod.handleRequest(`${currentUrl}${name}`, {
+    const url = makeChildUrl(currentContainerUrl, name, false);
+    if (!url) {
+      alert('Invalid filename. Use a name without "/" characters.');
+      return;
+    }
+    pod.handleRequest(url, {
       method: 'PUT',
       body: newFileContent || '',
       headers: { 'Content-Type': 'text/plain' }
     });
     closeNewFileDialog();
   };
 
+  const submitNewFolder = () => {
+    const name = newFolderName.trim();
+    if (!name || !pod) return;
+    const url = makeChildUrl(currentContainerUrl, name, true);
+    if (!url) {
+      alert('Invalid folder name. Use a name without "/" characters.');
+      return;
+    }
+    pod.handleRequest(url, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'text/turtle' },
+    });
+    closeNewFolderDialog();
+  };
+
   const onUploadImageSelect = async (e: React.ChangeEvent<HTMLInputElement>) => {
     const file = e.target.files?.[0];
     if (!file || !file.type.startsWith('image/') || !pod) return;
     try {
       const base64 = await readFileAsBase64(file);
       const name = file.name;
-      pod.handleRequest(`${currentUrl}${name}`, {
+      const url = makeChildUrl(currentContainerUrl, name, false);
+      if (!url) {
+        alert('Invalid filename.');
+        return;
+      }
+      pod.handleRequest(url, {
         method: 'PUT',
         body: base64,
         headers: { 'Content-Type': file.type }
@@ -698,15 +764,7 @@ export default function App() {
     return <div style={styles.loading}>Loading…</div>;
   }
 
-  const createFolder = () => {
-    const name = prompt("Folder Name (e.g., notes):");
-    if (name) {
-      pod.handleRequest(`${currentUrl}${name}/`, {
-        method: 'PUT',
-        headers: { 'Content-Type': 'text/turtle' }
-      });
-    }
-  };
+  const createFolder = () => openNewFolderDialog();
 
   return (
     <Provider store={store} indexes={indexes}>
@@ -900,6 +958,34 @@ export default function App() {
               </div>
             )}
 
+            {/* New Folder dialog */}
+            {newFolderOpen && (
+              <div style={styles.dialogOverlay} onClick={closeNewFolderDialog}>
+                <div style={styles.dialog} onClick={e => e.stopPropagation()}>
+                  <h3 style={styles.dialogTitle}>New Folder</h3>
+                  <label style={styles.dialogLabel}>Folder name</label>
+                  <input
+                    type="text"
+                    placeholder="e.g. notes"
+                    value={newFolderName}
+                    onChange={e => setNewFolderName(e.target.value)}
+                    style={styles.dialogInput}
+                    autoFocus
+                  />
+                  <div style={styles.dialogActions}>
+                    <button style={styles.dialogBtnCancel} onClick={closeNewFolderDialog}>Cancel</button>
+                    <button
+                      style={{ ...styles.dialogBtnSubmit, ...(!newFolderName.trim() ? styles.dialogBtnSubmitDisabled : {}) }}
+                      onClick={submitNewFolder}
+                      disabled={!newFolderName.trim()}
+                    >
+                      Create
+                    </button>
+                  </div>
+                </div>
+              </div>
+            )}
+
             <div style={styles.dataHeader}>
               {/* Align breadcrumbs with explorer (not the controls column). */}
               <div style={styles.breadcrumbSpacer} aria-hidden />