Merge branch 'v4' into v4

src/components/pages/upload/UploadOptionsButton.tsx

@@ -32,7 +32,7 @@ import {
 } from '@tabler/icons-react';
 import ms from 'ms';
 import Link from 'next/link';
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import useSWR from 'swr';
 import { useShallow } from 'zustand/shallow';
 
@@ -56,6 +56,7 @@ export default function UploadOptionsButton({ numFiles }: { numFiles: number })
   const clearSettings = () => {
     clearEphemeral();
     clearOptions();
+    setFolderSearch('');
   };
 
   const { data: folders } = useSWR<Extract<Response['/api/user/folders'], Folder[]>>(
@@ -64,6 +65,15 @@ export default function UploadOptionsButton({ numFiles }: { numFiles: number })
   const combobox = useCombobox();
   const [folderSearch, setFolderSearch] = useState('');
 
+  useEffect(
+    () =>
+      useUploadOptionsStore.subscribe(
+        (state) => state.ephemeral,
+        (current) => (current.folderId === null ? setFolderSearch('') : null),
+      ),
+    [],
+  );
+
   return (
     <>
       <Modal centered opened={opened} onClose={() => setOpen(false)} title='Upload Options'>
@@ -224,6 +234,7 @@ export default function UploadOptionsButton({ numFiles }: { numFiles: number })
             onOptionSubmit={(value) => {
               setFolderSearch(folders?.find((f) => f.id === value)?.name || '');
               setEphemeral('folderId', value === 'no folder' || value === '' ? null : value);
+              combobox.closeDropdown();
             }}
           >
             <Combobox.Target>
@@ -251,6 +262,10 @@ export default function UploadOptionsButton({ numFiles }: { numFiles: number })
 
             <Combobox.Dropdown>
               <Combobox.Options>
+                <Combobox.Option defaultChecked={true} value='no folder'>
+                  No Folder
+                </Combobox.Option>
+
                 {folders
                   ?.filter((f) => f.name.toLowerCase().includes(folderSearch.toLowerCase().trim()))
                   .map((f) => (
@@ -258,10 +273,6 @@ export default function UploadOptionsButton({ numFiles }: { numFiles: number })
                       {f.name}
                     </Combobox.Option>
                   ))}
-
-                <Combobox.Option defaultChecked={true} value='no folder'>
-                  No Folder
-                </Combobox.Option>
               </Combobox.Options>
             </Combobox.Dropdown>
           </Combobox>
@@ -332,7 +343,7 @@ export default function UploadOptionsButton({ numFiles }: { numFiles: number })
               </>
             }
             description={
-              'Add the original file name, so that the file can be downloaded with the original name. This will still use the "Name Format" option for it\'s file name.'
+              'Add the original file name, so that the file can be downloaded with the original name. This will still use the "Name Format" option for its file name.'
             }
             checked={options.addOriginalName ?? false}
             onChange={(event) => setOption('addOriginalName', event.currentTarget.checked ?? false)}

src/lib/store/uploadOptions.ts

@@ -1,5 +1,5 @@
 import { create } from 'zustand';
-import { persist } from 'zustand/middleware';
+import { persist, subscribeWithSelector } from 'zustand/middleware';
 import type { Config } from '../config/validate';
 
 export const defaultUploadOptions: UploadOptionsStore['options'] = {
@@ -50,52 +50,54 @@ export type UploadOptionsStore = {
 };
 
 export const useUploadOptionsStore = create<UploadOptionsStore>()(
-  persist(
-    (set, get) => ({
-      options: defaultUploadOptions,
-      ephemeral: defaultEphemeralOptions,
+  subscribeWithSelector(
+    persist(
+      (set, get) => ({
+        options: defaultUploadOptions,
+        ephemeral: defaultEphemeralOptions,
 
-      setOption: (key, value) =>
-        set((state) => ({
-          ...state,
-          options: {
-            ...state.options,
-            [key]: value,
-          },
-        })),
+        setOption: (key, value) =>
+          set((state) => ({
+            ...state,
+            options: {
+              ...state.options,
+              [key]: value,
+            },
+          })),
 
-      setEphemeral: (key, value) =>
-        set((state) => ({
-          ...state,
-          ephemeral: {
-            ...state.ephemeral,
-            [key]: value,
-          },
-        })),
+        setEphemeral: (key, value) =>
+          set((state) => ({
+            ...state,
+            ephemeral: {
+              ...state.ephemeral,
+              [key]: value,
+            },
+          })),
 
-      clearEphemeral: () =>
-        set((state) => ({
-          ...state,
-          ephemeral: defaultEphemeralOptions,
-        })),
+        clearEphemeral: () =>
+          set((state) => ({
+            ...state,
+            ephemeral: defaultEphemeralOptions,
+          })),
 
-      clearOptions: () =>
-        set((state) => ({
-          ...state,
-          options: defaultUploadOptions,
-        })),
+        clearOptions: () =>
+          set((state) => ({
+            ...state,
+            options: defaultUploadOptions,
+          })),
 
-      changes: () => {
-        const { options, ephemeral } = get();
-        return (
-          // @ts-ignore
-          Object.keys(options).filter((v) => options[v] !== defaultUploadOptions[v]).length +
-          Object.values(ephemeral).filter((v) => v !== null).length
-        );
+        changes: () => {
+          const { options, ephemeral } = get();
+          return (
+            // @ts-ignore
+            Object.keys(options).filter((v) => options[v] !== defaultUploadOptions[v]).length +
+            Object.values(ephemeral).filter((v) => v !== null).length
+          );
+        },
+      }),
+      {
+        name: 'zipline-upload-options',
       },
-    }),
-    {
-      name: 'zipline-upload-options',
-    },
+    ),
   ),
 );