Fix long file names, case-insensitive sort, more.

- FileList now wraps long file names and adds a text hover title.
- FileList now sorts files case-insensitively.
- Editor now saves files in the correct location.
- ZIP files are now decompressed in the correct location.

imports/dashboard/files/editor.tsx

@@ -25,8 +25,9 @@ const Editor = (props: {
     setSaving(true)
     // Save the file.
     const formData = new FormData()
-    formData.append('upload', new Blob([content]), `${props.path}${name}`)
-    const r = await props.ky.post(`server/${props.server}/file`, { body: formData })
+    formData.append('upload', new Blob([content]), name)
+    const path = encodeURIComponent(props.path)
+    const r = await props.ky.post(`server/${props.server}/file?path=${path}`, { body: formData })
     if (r.status !== 200) props.setMessage((await r.json<{ error: string }>()).error)
     else props.setMessage('Saved successfully!')
     setSaving(false)

imports/dashboard/files/fileList.tsx

@@ -41,7 +41,7 @@ const FileListItem = ({ file, style, disabled, filesSelected, onItemClick, onChe
 }) => (
   <a href={url} onClick={e => e.preventDefault()} style={{ textDecoration: 'none', color: 'inherit', ...style }}>
     <ListItem
-      key={file.name} disablePadding secondaryAction={
+      key={file.name} title={file.name} disablePadding secondaryAction={
         <div>
           <IconButton
             disabled={disabled} onClick={e => openMenu(file.name, e.currentTarget)} size='large'
@@ -65,6 +65,7 @@ const FileListItem = ({ file, style, disabled, filesSelected, onItemClick, onChe
           primary={file.name}
           secondary={`Last modified ${tsts(file.lastModified)} | Size: ${bytesToGb(file.size)}`}
           secondaryTypographyProps={{/* variant: 'caption' */}}
+          primaryTypographyProps={{ noWrap: true }}
         />
       </ListItemButton>
     </ListItem>
@@ -122,9 +123,11 @@ const FileList = (props: FileItemData) => {
     )
   )
   const sortedList = props.files.sort((a, b) => {
+    const aName = a.name.toLowerCase()
+    const bName = b.name.toLowerCase()
     if (a.folder && !b.folder) return -1
     else if (!a.folder && b.folder) return 1
-    else return a.name === b.name ? 0 : (a.name > b.name ? 1 : -1)
+    else return aName === bName ? 0 : (aName > bName ? 1 : -1)
   })
   return (
     <div style={{ flex: 1, listStyle: 'none', paddingTop: 8, paddingBottom: 8 }}>

imports/dashboard/files/fileManager.tsx

@@ -233,7 +233,9 @@ const FileManager = (props: {
   const handleDecompressMenuButton = async () => {
     setMenuOpen('')
     setFetching(true)
-    const a = await ky.post(`server/${server}/decompress?path=${euc(path + menuOpen)}`)
+    const a = await ky.post(`server/${server}/decompress?path=${euc(path + menuOpen)}`, {
+      body: path + menuOpen.split('.').slice(0, -1).join('.')
+    })
       .json<{ error: string }>()
     if (a.error) setMessage(a.error)
     setFetching(false)