Add support for copying files.

resources/scripts/api/server/files/copyFile.ts

@@ -0,0 +1,9 @@
+import http from '@/api/http';
+
+export default (uuid: string, location: string): Promise<void> => {
+    return new Promise((resolve, reject) => {
+        http.post(`/api/client/servers/${uuid}/files/copy`, { location })
+            .then(() => resolve())
+            .catch(reject);
+    });
+};

resources/scripts/components/elements/SpinnerOverlay.tsx

@@ -3,10 +3,13 @@ import classNames from 'classnames';
 import { CSSTransition } from 'react-transition-group';
 import Spinner from '@/components/elements/Spinner';
 
-export default ({ large, visible }: { visible: boolean; large?: boolean }) => (
+export default ({ large, fixed, visible }: { visible: boolean; fixed?: boolean; large?: boolean }) => (
     <CSSTransition timeout={150} classNames={'fade'} in={visible} unmountOnExit={true}>
         <div
-            className={classNames('absolute pin-t pin-l flex items-center justify-center w-full h-full rounded')}
+            className={classNames('z-50 pin-t pin-l flex items-center justify-center w-full h-full rounded', {
+                absolute: !fixed,
+                fixed: fixed,
+            })}
             style={{ background: 'rgba(0, 0, 0, 0.45)' }}
         >
             <Spinner large={large}/>

resources/scripts/components/server/files/CopyFileModal.tsx

@@ -0,0 +1,28 @@
+import React, { useEffect } from 'react';
+import { FileObject } from '@/api/server/files/loadDirectory';
+import SpinnerOverlay from '@/components/elements/SpinnerOverlay';
+import { ServerContext } from '@/state/server';
+import copyFile from '@/api/server/files/copyFile';
+import { join } from 'path';
+import { httpErrorToHuman } from '@/api/http';
+
+// This component copies the given file on mount, so only mount it when
+// you actually want to copy the file...
+export default ({ file, onCopyComplete }: { file: FileObject; onCopyComplete: () => void }) => {
+    const uuid = ServerContext.useStoreState(state => state.server.data!.uuid);
+    const directory = ServerContext.useStoreState(state => state.files.directory);
+    const getDirectoryContents = ServerContext.useStoreActions(actions => actions.files.getDirectoryContents);
+
+    useEffect(() => {
+        copyFile(uuid, join(directory, file.name))
+            .then(() => getDirectoryContents(directory))
+            .catch(error => {
+                console.error('Error while attempting to copy file.', error);
+                alert(httpErrorToHuman(error));
+            });
+    }, []);
+
+    return (
+        <SpinnerOverlay visible={true} large={true} fixed={true}/>
+    );
+};

resources/scripts/components/server/files/FileDropdownMenu.tsx

@@ -9,8 +9,9 @@ import { faCopy } from '@fortawesome/free-solid-svg-icons/faCopy';
 import { faLevelUpAlt } from '@fortawesome/free-solid-svg-icons/faLevelUpAlt';
 import RenameFileModal from '@/components/server/files/RenameFileModal';
 import { ServerContext } from '@/state/server';
+import CopyFileModal from '@/components/server/files/CopyFileModal';
 
-type ModalType = 'rename' | 'move';
+type ModalType = 'rename' | 'move' | 'copy' | 'download' | 'delete';
 
 export default ({ uuid }: { uuid: string }) => {
     const menu = createRef<HTMLDivElement>();
@@ -54,7 +55,7 @@ export default ({ uuid }: { uuid: string }) => {
     }, []);
 
     return (
-        <div>
+        <div key={`dropdown:${file.uuid}`}>
             <div
                 className={'p-3 hover:text-white'}
                 onClick={e => {
@@ -70,9 +71,10 @@ export default ({ uuid }: { uuid: string }) => {
                 <FontAwesomeIcon icon={faEllipsisH}/>
             </div>
             {visible &&
-                <React.Fragment>
+            <React.Fragment>
-                    <RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/>
+                <RenameFileModal file={file} visible={modal === 'rename'} onDismissed={() => setModal(null)}/>
-                </React.Fragment>
+                {modal === 'copy' && <CopyFileModal file={file} onCopyComplete={() => setModal(null)}/>}
+            </React.Fragment>
             }
             <CSSTransition timeout={250} in={visible} unmountOnExit={true} classNames={'fade'}>
                 <div
@@ -80,8 +82,8 @@ export default ({ uuid }: { uuid: string }) => {
                     ref={menu}
                 >
                     <div
-                        className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
                         onClick={() => setModal('rename')}
+                        className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
                     >
                         <FontAwesomeIcon icon={faPencilAlt} className={'text-xs'}/>
                         <span className={'ml-2'}>Rename</span>
@@ -90,7 +92,10 @@ export default ({ uuid }: { uuid: string }) => {
                         <FontAwesomeIcon icon={faLevelUpAlt} className={'text-xs'}/>
                         <span className={'ml-2'}>Move</span>
                     </div>
-                    <div className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}>
+                    <div
+                        onClick={() => setModal('copy')}
+                        className={'hover:text-neutral-700 p-2 flex items-center hover:bg-neutral-100 rounded'}
+                    >
                         <FontAwesomeIcon icon={faCopy} className={'text-xs'}/>
                         <span className={'ml-2'}>Copy</span>
                     </div>

resources/scripts/components/server/files/FileManagerContainer.tsx

@@ -84,7 +84,7 @@ export default () => {
                                 <div>
                                     {
                                         files.map(file => (
-                                            <FileObjectRow key={file.name} file={file}/>
+                                            <FileObjectRow key={file.uuid} file={file}/>
                                         ))
                                     }
                                 </div>