feat: search+create for folder select (#283)

* feat?: Search for the folder to add.
Also you can create a folder right from the file, rather than being redirected.

* woops wrong import

src/components/File.tsx

@@ -40,11 +40,6 @@ import {
 import MutedText from './MutedText';
 import Type from './Type';
 
-const CREATE_FOLDER_OPTION = {
-  label: 'Create new folder',
-  value: 'create',
-};
-
 export function FileMeta({ Icon, title, subtitle, ...other }) {
   return other.tooltip ? (
     <Group>
@@ -171,9 +166,6 @@ export default function File({ image, disableMediaPreview, exifEnabled, refreshI
   };
 
   const addToFolder = async (t) => {
-    if (t === CREATE_FOLDER_OPTION.value) {
-      router.push('/dashboard/folders?create=' + image.id);
-    } else {
     const res = await useFetch('/api/user/folders/' + t, 'POST', {
       file: Number(image.id),
     });
@@ -195,7 +187,32 @@ export default function File({ image, disableMediaPreview, exifEnabled, refreshI
         icon: <CrossIcon />,
       });
     }
+  };
+
+  const createFolder = (t) => {
+    useFetch('/api/user/folders', 'POST', {
+      name: t,
+      add: [Number(image.id)],
+    }).then((res) => {
+      refresh();
+
+      if (!res.error) {
+        showNotification({
+          title: 'Created & added to folder',
+          message: res.name,
+          color: 'green',
+          icon: <FolderPlusIcon />,
+        });
+      } else {
+        showNotification({
+          title: 'Failed to create folder',
+          message: res.error,
+          color: 'red',
+          icon: <CrossIcon />,
+        });
       }
+    });
+    return { value: t, label: t };
   };
 
   return (
@@ -290,8 +307,11 @@ export default function File({ image, disableMediaPreview, exifEnabled, refreshI
                       value: String(folder.id),
                       label: `${folder.id}: ${folder.name}`,
                     })),
-                    CREATE_FOLDER_OPTION,
                   ]}
+                  searchable
+                  creatable
+                  getCreateLabel={(query) => `Create folder "${query}"`}
+                  onCreate={createFolder}
                 />
               </Tooltip>
             )}