fix: import schedule file upload button (#515)

* fix: add active scale style and accept file prop

* chore: improve type safety using MIMEType

* fix: update FileUpload component to support multiple MIME types in accept prop

* chore: run lint

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/shared/types/MIMEType.ts

@@ -17,4 +17,9 @@ const MIMEType = {
  */
 export type MIMETypeKey = keyof typeof MIMEType;
 
+/**
+ * Represents a value of the MIMEType object
+ */
+export type MIMETypeValue = (typeof MIMEType)[MIMETypeKey];
+
 export default MIMEType;

src/views/components/common/FileUpload.tsx

@@ -1,4 +1,5 @@
 import type { Icon, IconProps } from '@phosphor-icons/react';
+import type { MIMETypeValue } from '@shared/types/MIMEType';
 import type { ThemeColor } from '@shared/types/ThemeColors';
 import { getThemeColorHexByName, getThemeColorRgbByName } from '@shared/util/themeColors';
 import Text from '@views/components/common/Text/Text';
@@ -16,6 +17,7 @@ interface Props {
     disabled?: boolean;
     title?: string;
     color: ThemeColor;
+    accept?: MIMETypeValue | MIMETypeValue[];
 }
 
 /**
@@ -34,6 +36,7 @@ export default function FileUpload({
     disabled,
     title,
     color,
+    accept,
     children,
 }: React.PropsWithChildren<Props>): JSX.Element {
     const Icon = icon;
@@ -41,6 +44,9 @@ export default function FileUpload({
     const colorHex = getThemeColorHexByName(color);
     const colorRgb = getThemeColorRgbByName(color)?.join(' ');
 
+    // Convert accept to a comma-separated string if it's an array
+    const acceptValue = Array.isArray(accept) ? accept.join(',') : accept;
+
     return (
         <label
             style={
@@ -51,7 +57,7 @@ export default function FileUpload({
                 } satisfies React.CSSProperties
             }
             className={clsx(
-                'btn',
+                'btn has-enabled:active:scale-96',
                 {
                     'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
                         variant === 'filled',
@@ -78,7 +84,13 @@ export default function FileUpload({
                     {children}
                 </Text>
             )}
-            <input type='file' className='hidden' disabled={disabled} onChange={disabled ? undefined : onChange} />
+            <input
+                type='file'
+                {...(accept ? { accept: acceptValue } : {})}
+                className='hidden'
+                disabled={disabled}
+                onChange={disabled ? undefined : onChange}
+            />
         </label>
     );
 }

src/views/components/settings/Settings.tsx

@@ -7,6 +7,7 @@ import { CalendarDots, Trash } from '@phosphor-icons/react';
 import { background } from '@shared/messages';
 import { initSettings, OptionsStore } from '@shared/storage/OptionsStore';
 import { UserScheduleStore } from '@shared/storage/UserScheduleStore';
+import MIMEType from '@shared/types/MIMEType';
 import { downloadBlob } from '@shared/util/downloadBlob';
 // import { addCourseByUrl } from '@shared/util/courseUtils';
 // import { getCourseColors } from '@shared/util/colors';
@@ -397,7 +398,12 @@ export default function Settings(): JSX.Element {
                                         </Text>
                                         <p className='text-sm text-gray-600'>Import from a schedule file</p>
                                     </div>
-                                    <FileUpload variant='filled' color='ut-burntorange' onChange={handleImportClick}>
+                                    <FileUpload
+                                        variant='filled'
+                                        color='ut-burntorange'
+                                        onChange={handleImportClick}
+                                        accept={MIMEType.JSON}
+                                    >
                                         Import Schedule
                                     </FileUpload>
                                 </div>