Added Upload Action Button

Author: pSpitzner

frontend/src/api/config.ts

@@ -88,6 +88,7 @@ type ActionOptionMap = {
     undo: {
         delete_files: boolean;
     };
+    upload: undefined;
     import_best: undefined;
     import_bootleg: undefined;
     import_terminal: undefined;
@@ -125,7 +126,6 @@ export interface InboxFolderFrontendConfig {
 export const ACTIONS: Record<string, Action> = {
     retag: {
         name: 'retag',
-        label: 'Retag',
         options: {
             group_albums: false,
             autotag: true,
@@ -137,6 +137,9 @@ export const ACTIONS: Record<string, Action> = {
             delete_files: true,
         },
     },
+    upload: {
+        name: 'upload',
+    },
     import_best: {
         name: 'import_best',
     },
@@ -178,7 +181,7 @@ export const DEFAULT_INBOX_FOLDER_FRONTEND_CONFIG: InboxFolderFrontendConfig = {
         },
         extra: {
             variant: 'text',
-            actions: [ACTIONS.delete_imported_folders],
+            actions: [ACTIONS.delete_imported_folders, ACTIONS.upload],
         },
     },
 };

frontend/src/components/common/hooks/useDrag.ts

@@ -10,7 +10,7 @@ type Entries<T> = {
  *
  */
 export function useDragAndDrop(
-    elementRef: React.RefObject<HTMLDivElement> | null,
+    elementRef: React.RefObject<HTMLDivElement | null> | null,
     options?: {
         onDrop?: (event: DragEvent) => void;
         onDragOver?: (event: DragEvent) => void;

frontend/src/components/inbox/actions/buttons.tsx

@@ -10,6 +10,7 @@ import {
     TerminalIcon,
     Trash2Icon,
     UngroupIcon,
+    UploadIcon,
 } from 'lucide-react';
 import { useState } from 'react';
 import {
@@ -231,6 +232,8 @@ export function ActionIcon({ action }: { action: Action | Action['name'] }) {
             return <TagIcon size={size} />;
         case 'undo':
             return <HistoryIcon size={size} />;
+        case 'upload':
+            return <UploadIcon size={size} />;
         case 'import_bootleg':
             return <BootlegIcon size={size} />;
         case 'import_best':

frontend/src/components/inbox/actions/descriptions.tsx

@@ -8,6 +8,8 @@ export function getActionDescription(action: Action | Action['name']): string {
             return 'Retag the selected album(s) this includes fetching candidates from your configured metadata sources.';
         case 'undo':
             return 'Allows you to undo imports, this will remove the imported album(s) from your library.';
+        case 'upload':
+            return 'Open an overlay to select files for upload into the current inbox.';
         case 'import_bootleg':
             return 'Import album without using a candidate, this is useful where online metadata is not available, such as bootlegs or dubs.';
         case 'import_best':

frontend/src/components/inbox/actions/mutations.tsx

@@ -16,6 +16,10 @@ import {
 import { EnqueueKind } from '@/pythonTypes';
 
 import { InboxCardContext, useInboxCardContext } from '../cards/inboxCard';
+import {
+    FileUploadContextType,
+    useFileUploadContext,
+} from '../fileUpload/context';
 import {
     FolderSelectionContext,
     useFolderSelectionContext,
@@ -26,13 +30,15 @@ export function useActionMutation(action: Action) {
     const selectionContext = useFolderSelectionContext();
     const inboxContext = useInboxCardContext();
     const terminalContext = useTerminalContext();
+    const uploadContext = useFileUploadContext();
     const navigate = useNavigate();
 
     const [options, mutationArgs] = actionMutationOptionsAndArgs(
         action,
         socket,
         selectionContext,
         inboxContext,
+        uploadContext,
         terminalContext,
         navigate
     );
@@ -56,6 +62,7 @@ function actionMutationOptionsAndArgs<T = unknown>(
     socket: StatusSocket | null,
     selectionContext: FolderSelectionContext,
     inboxContext: InboxCardContext,
+    uploadContext: FileUploadContextType,
     terminalContext: TerminalContextI,
     navigate: UseNavigateResult<string>
 ): [UseMutationOptions<unknown, APIError, T>, T] {
@@ -157,6 +164,15 @@ function actionMutationOptionsAndArgs<T = unknown>(
                     escape: options?.escape ?? true, // default to escaping paths
                 } as T,
             ];
+        case 'upload':
+            return [
+                uploadDialogMutationOptions as UseMutationOptions<
+                    unknown,
+                    APIError,
+                    T
+                >,
+                { ...uploadContext, inboxFolder: inboxContext.folder } as T,
+            ];
         case 'import_terminal':
             return [
                 importTerminalMutationOptions as UseMutationOptions<
@@ -211,6 +227,22 @@ const copyPathMutationOptions: UseMutationOptions<
     },
 };
 
+const uploadDialogMutationOptions: UseMutationOptions<
+    unknown,
+    APIError,
+    FileUploadContextType & { inboxFolder: InboxCardContext['folder'] }
+> = {
+    // eslint-disable-next-line @typescript-eslint/require-await
+    mutationFn: async ({ setUploadTargetDir, setOpenDialog, inboxFolder }) => {
+        // keep the suggested name consistent with the one used in dropzone
+        setUploadTargetDir(
+            inboxFolder.full_path +
+                `/upload_${formatDate(new Date(), '%Y%m%d_%H%M%S')}`
+        );
+        setOpenDialog(true);
+    },
+};
+
 function _escapePathForBash(path: string) {
     // escaping path is fishy, but this seems to be the best compromise
     // https://stackoverflow.com/questions/1779858/how-do-i-escape-a-string-for-a-shell-command-in-node

frontend/src/components/inbox/fileUpload/context.tsx

@@ -8,12 +8,17 @@ import { useDragAndDrop } from '@/components/common/hooks/useDrag';
 
 import { UploadDialog } from './dialog';
 
-type FileUploadContextType = Omit<FileUploadState, 'mutate' | 'mutateAsync'> & {
+export type FileUploadContextType = Omit<
+    FileUploadState,
+    'mutate' | 'mutateAsync'
+> & {
     fileList: Array<File>;
     setFileList: React.Dispatch<React.SetStateAction<Array<File>>>;
     uploadFiles: () => Promise<{ status: string }>;
     uploadTargetDir: string | null;
     setUploadTargetDir: React.Dispatch<React.SetStateAction<string | null>>;
+    openDialog: boolean;
+    setOpenDialog: React.Dispatch<React.SetStateAction<boolean>>;
     reset: () => void;
 
     // drag drop
@@ -31,6 +36,7 @@ export function FileUploadProvider({
 }) {
     const [fileList, setFileList] = useState<Array<File>>([]);
     const [uploadTargetDir, setUploadTargetDir] = useState<string | null>(null);
+    const [openDialog, setOpenDialog] = useState(false);
 
     const isOverWindow = useDragAndDrop(null, {
         preventDefault: true,
@@ -56,6 +62,8 @@ export function FileUploadProvider({
                 },
                 uploadTargetDir,
                 setUploadTargetDir,
+                openDialog,
+                setOpenDialog,
                 isOverWindow,
             }}
         >

frontend/src/components/inbox/fileUpload/dialog.tsx

@@ -4,8 +4,8 @@
  * ...
  */
 
-import { CheckIcon, FileMusicIcon, Upload, XIcon } from 'lucide-react';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { CheckIcon, FileMusicIcon, UploadIcon, XIcon } from 'lucide-react';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
 import {
     alpha,
     Box,
@@ -32,15 +32,15 @@ import { useFileUploadContext } from './context';
 
 export function UploadDialog() {
     const cancelButtonRef = useRef<CancelButtonRef>(null);
-    const [open, setOpen] = useState(false);
-    const { fileList, reset } = useFileUploadContext();
+    const { fileList, reset, openDialog, setOpenDialog } =
+        useFileUploadContext();
 
     const resetDialog = useCallback(
         (close: boolean = true) => {
-            if (close) setOpen(false);
+            if (close) setOpenDialog(false);
             reset();
         },
-        [reset]
+        [reset, setOpenDialog]
     );
 
     // SM@PS: Try to not use 'useEffect' for derived state. Kinda an antipattern
@@ -53,13 +53,13 @@ export function UploadDialog() {
     // Open dialog when files are added
     useEffect(() => {
         if (fileList.length > 0) {
-            setOpen(true);
+            setOpenDialog(true);
         }
-    }, [fileList.length]);
+    }, [fileList.length, setOpenDialog]);
 
     return (
         <Dialog
-            open={open}
+            open={openDialog}
             title={title}
             onClose={(_event, reason) => {
                 if (reason !== 'backdropClick') resetDialog();
@@ -326,7 +326,7 @@ function UploadButton({ onUpload }: { onUpload: () => void }) {
     return (
         <Button
             variant="contained"
-            startIcon={<Upload />}
+            startIcon={<UploadIcon />}
             onClick={() => {
                 if (isSuccess) {
                     reset();
@@ -479,8 +479,8 @@ function UploadFinished() {
         <Box
             sx={(theme) => ({
                 border: '2px solid',
-                borderColor: theme.palette.secondary.main,
-                color: theme.palette.secondary.main,
+                borderColor: theme.palette.primary.main,
+                color: theme.palette.primary.main,
                 paddingInline: 4,
                 paddingBlock: 2,
                 textAlign: 'center',