Add folder icon option for the file input (#1536)

Author: Eirenliel

gui/src/components/commons/FileInput.tsx

@@ -12,6 +12,8 @@ import { FileIcon } from './icon/FileIcon';
 import { UploadFileIcon } from './icon/UploadFileIcon';
 import { Typography } from './Typography';
 import { CloseIcon } from './icon/CloseIcon';
+import { FolderIcon } from './icon/FolderIcon';
+import { UploadFolderIcon } from './icon/UploadFolderIcon';
 
 interface InputProps {
   variant?: 'primary' | 'secondary';
@@ -22,9 +24,11 @@ interface InputProps {
 export const FileInputContentBlank = ({
   isDragging,
   label,
+  directory = false,
 }: {
   isDragging: boolean;
   label: string;
+  directory?: boolean;
 }) => {
   return (
     <div
@@ -36,7 +40,11 @@ export const FileInputContentBlank = ({
       )}
     >
       <span className="flex items-center space-x-2 pointer-events-none">
-        <UploadFileIcon isDragging={isDragging} />
+        {directory ? (
+          <UploadFolderIcon isDragging={isDragging} />
+        ) : (
+          <UploadFileIcon isDragging={isDragging} />
+        )}
         <div>
           <Localized
             id={label}
@@ -57,10 +65,12 @@ export const FileInputContentBlank = ({
 
 export const FileInputContentFile = ({
   importedFileName,
+  directory = false,
   onClearPicker,
 }: {
   importedFileName: string;
   onClearPicker: () => any;
+  directory?: boolean;
 }) => {
   return (
     <div
@@ -72,7 +82,7 @@ export const FileInputContentFile = ({
     >
       <div className="flex items-center space-x-2">
         <div className="flex items-center space-x-2 px-4">
-          <FileIcon />
+          {directory ? <FolderIcon /> : <FileIcon />}
           <span>{importedFileName}</span>
         </div>
         <span className="flex-grow"></span>

gui/src/components/commons/TauriFileInput.tsx

@@ -24,10 +24,11 @@ export function InnerTauriFileInput({
     <div ref={ref} onClick={async () => onChange(await open({ directory }))}>
       {value !== null
         ? FileInputContentFile({
+            directory,
             importedFileName: value,
             onClearPicker: () => onChange(null),
           })
-        : FileInputContentBlank({ isDragging: false, label })}
+        : FileInputContentBlank({ isDragging: false, label, directory })}
     </div>
   );
 }

gui/src/components/commons/icon/FolderIcon.tsx

@@ -0,0 +1,12 @@
+export function FolderIcon({ width = 24 }: { width?: number }) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="currentColor"
+      width={width}
+    >
+      <path d="M19.5 21a3 3 0 0 0 3-3v-4.5a3 3 0 0 0-3-3h-15a3 3 0 0 0-3 3V18a3 3 0 0 0 3 3h15ZM1.5 10.146V6a3 3 0 0 1 3-3h5.379a2.25 2.25 0 0 1 1.59.659l2.122 2.121c.14.141.331.22.53.22H19.5a3 3 0 0 1 3 3v1.146A4.483 4.483 0 0 0 19.5 9h-15a4.483 4.483 0 0 0-3 1.146Z" />
+    </svg>
+  );
+}

gui/src/components/commons/icon/UploadFolderIcon.tsx

@@ -0,0 +1,25 @@
+import classNames from 'classnames';
+
+export function UploadFolderIcon({
+  width = 24,
+  isDragging = false,
+}: {
+  width?: number;
+  isDragging?: boolean;
+}) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 5.5499997 4.7600007"
+      width={width}
+      fill="currentColor"
+      className={classNames('transition-transform', isDragging && 'scale-150')}
+    >
+      <path
+        fill-rule="evenodd"
+        d="m 4.76,4.76 c 0.44,0 0.79,-0.36 0.79,-0.79 v -2.39 c 0,-0.44 -0.36,-0.79 -0.79,-0.79 H 3.34 c -0.05,0 -0.1,-0.02 -0.14,-0.06 L 2.64,0.17 C 2.53,0.06 2.38,0 2.22,0 H 0.79 C 0.35,0 0,0.36 0,0.79 V 3.97 C 0,4.41 0.36,4.76 0.79,4.76 Z M 2.58,3.71 c 0,0.26 0.4,0.26 0.4,0 V 2.6 L 3.44,3.06 C 3.63,3.23 3.89,2.97 3.72,2.78 L 2.93,1.99 c -0.08,-0.08 -0.2,-0.08 -0.28,0 L 1.86,2.78 C 1.65,2.97 1.95,3.26 2.14,3.06 L 2.6,2.6 Z"
+        clip-rule="evenodd"
+      />
+    </svg>
+  );
+}