moved svg classnames up

src/assets/breadcrum.svg

@@ -1,5 +1,4 @@
 <svg
-    class="h-5 w-auto text-gray-400"
     fill="currentColor"
     viewBox="0 0 20 20"
 >

src/assets/spinner.svg

@@ -1,4 +1,4 @@
-<svg class="animate-spin h-6 w-6 dark:text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
     <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
     <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
 </svg>

src/components/Breadcrum.tsx

@@ -22,7 +22,7 @@ const Breadcrum: React.FC<Props> = (props) => {
 			{parts.map((e,i,arr)=>{
 				const last = i == arr.length - 1
 				return <div key={e} className="inline-flex items-center cursor-pointer">
-					<BreadcrumImage />
+					<BreadcrumImage className="h-5 w-auto text-gray-400" />
 					<li>
 						<a 
 							className={`${last?"text-blue-500":""}`}

src/components/FileBrowser.tsx

@@ -15,10 +15,15 @@ import FileOpen from "./FileOpen"
 import FileUploadButton from "./FileUploadButton"
 import { ReactComponent as Spinner } from "./../assets/spinner.svg"
 import FileBrowserList from "./FileBrowserList"
+import pathRename from "../functions/pathRename"
 
 function uriToPath(pathname:string) {
 	// strip the "/f" from e.g. "/f/dir1/dir2"
-	return pathname.substr(2)
+	const path = pathname.substr(2)
+	if (!path.endsWith("/")){
+		return path + "/"
+	}
+	return path
 }
 
 function pathToUri(path:string) {
@@ -163,18 +168,22 @@ const FileBrowser: React.FC<RouteComponentProps> = (props) => {
 						editId={editID}
 						editEnable={editEnable}
 
-						onRenameDone={(id,changed,newName)=>{
+						onRenameDone={async (id,changed,newName)=>{
 							setEditEnable(false)
 							if (changed){
-								console.debug("Changed: ",newName)
+								// TODO: maybe change the name on client so it seems more smooth rather then haveing it refetch
-							}else{
+								// TODO: input check & error handling
-								console.debug("Not changed")
+								await moveMutation({variables:{
+									src:id,
+									dest: pathRename(id,newName)
+								}})
+								refetchDir()
 							}
 						}}
 					/>
 					{loading && 
 						<div className="flex justify-center mt-4">
-							<Spinner />
+							<Spinner className="animate-spin h-6 w-6 dark:text-white"  />
 						</div>
 					}
 				</div>

src/functions/pathRename.ts

@@ -0,0 +1,11 @@
+function pathRename(id:string, newFilename: string): string {
+	const isDir = id.endsWith("/")
+	const parts = id.split("/")
+	if (!parts.length)
+		throw new Error("Maleformed id")
+	parts[parts.length - (isDir?2:1)] = newFilename
+
+	return parts.join("/")
+}
+
+export default pathRename

src/functions/sizeToReadable.ts

@@ -1,4 +1,6 @@
 function sizeToReadable(size: number): string {
+	if (size == 0)
+		return "0 B"
 	const i = Math.floor(Math.log(size) / Math.log(1024))
 	const num = (size / Math.pow(1024, i))
 	return (num.toFixed(1).endsWith("0")?num.toFixed(0):num.toFixed(1)) + " " + ["B", "kB", "MB", "GB", "TB"][i]