update file manager

lama_cleaner/app/src/components/FileManager/FileManager.tsx

@@ -4,12 +4,13 @@ import React, {
   useMemo,
   useState,
   useCallback,
-  useRef,
 } from 'react'
+import { useRecoilState, useRecoilValue } from 'recoil'
 import PhotoAlbum, { RenderPhoto } from 'react-photo-album'
 import * as ScrollArea from '@radix-ui/react-scroll-area'
 import Modal from '../shared/Modal'
-import Button from '../shared/Button'
+import { toastState } from '../../store/Atoms'
+import { getMedias } from '../../adapters/inpainting'
 
 interface Photo {
   src: string
@@ -54,6 +55,7 @@ export default function FileManager(props: Props) {
   const [filenames, setFileNames] = useState<Filename[]>([])
   const [scrollTop, setScrollTop] = useState(0)
   const [closeScrollTop, setCloseScrollTop] = useState(0)
+  const [toastVal, setToastState] = useRecoilState(toastState)
 
   useEffect(() => {
     if (!show) {
@@ -81,15 +83,22 @@ export default function FileManager(props: Props) {
 
   useEffect(() => {
     const fetchData = async () => {
-      const res = await fetch('/medias')
-      if (res.ok) {
-        const newFilenames = await res.json()
+      try {
+        const newFilenames = await getMedias()
         setFileNames(newFilenames)
+      } catch (e: any) {
+        setToastState({
+          open: true,
+          desc: e.message ? e.message : e.toString(),
+          state: 'error',
+          duration: 2000,
+        })
       }
     }
-
-    fetchData()
-  }, [])
+    if (show) {
+      fetchData()
+    }
+  }, [show])
 
   const onScroll = (event: SyntheticEvent) => {
     setScrollTop(event.currentTarget.scrollTop)

lama_cleaner/app/src/components/Settings/Settings.scss

@@ -17,10 +17,6 @@
     margin-top: -11rem;
     animation: slideDown 0.2s ease-out;
   }
-
-  .modal-header {
-    padding-left: 8px;
-  }
 }
 
 /* reset */

lama_cleaner/app/src/components/Settings/SettingsModal.tsx

@@ -62,92 +62,10 @@ export default function SettingModal(props: SettingModalProps) {
       className="modal-setting"
       show={setting.show}
     >
-      <Tabs.Root
-        className="TabsRoot"
-        defaultValue="tab1"
-        orientation="vertical"
-      >
-        <Tabs.List className="TabsList">
-          <Tabs.Trigger className="TabsTrigger" value="tab1">
-            Model
-          </Tabs.Trigger>
-          <Tabs.Trigger className="TabsTrigger" value="tab2">
-            File
-          </Tabs.Trigger>
-        </Tabs.List>
-        <Tabs.Content className="TabsContent" value="tab1">
-          {isSD || isPaintByExample ? (
-            <></>
-          ) : (
-            <ManualRunInpaintingSettingBlock />
-          )}
-          <ModelSettingBlock />
-          {isSD ? <></> : <HDSettingBlock />}
-        </Tabs.Content>
-        <Tabs.Content className="TabsContent" value="tab2">
-          <DownloadMaskSettingBlock />
-          <SettingBlock
-            title="File Manager"
-            desc="Toggle File Manager"
-            input={
-              <Switch
-                checked={setting.enableFileManager}
-                onCheckedChange={checked => {
-                  setSettingState(old => {
-                    return { ...old, enableFileManager: checked }
-                  })
-                }}
-              >
-                <SwitchThumb />
-              </Switch>
-            }
-            optionDesc={
-              <div
-                style={{
-                  display: 'flex',
-                  flexDirection: 'column',
-                  gap: 16,
-                }}
-              >
-                <div className="folder-path-block">
-                  <span>Image directory</span>
-                  <TextInput
-                    disabled={!setting.enableFileManager}
-                    value={setting.imageDirectory}
-                    placeholder="Image directory"
-                    className="folder-path"
-                    onInput={(evt: FormEvent<HTMLInputElement>) => {
-                      evt.preventDefault()
-                      evt.stopPropagation()
-                      const target = evt.target as HTMLInputElement
-                      setSettingState(old => {
-                        return { ...old, imageDirectory: target.value }
-                      })
-                    }}
-                  />
-                </div>
-                <div className="folder-path-block">
-                  <span>Output directory</span>
-                  <TextInput
-                    disabled={!setting.enableFileManager}
-                    value={setting.outputDirectory}
-                    placeholder="Output directory"
-                    className="folder-path"
-                    onInput={(evt: FormEvent<HTMLInputElement>) => {
-                      evt.preventDefault()
-                      evt.stopPropagation()
-                      const target = evt.target as HTMLInputElement
-                      setSettingState(old => {
-                        return { ...old, outputDirectory: target.value }
-                      })
-                    }}
-                  />
-                </div>
-              </div>
-            }
-          />
-        </Tabs.Content>
-      </Tabs.Root>
+      <DownloadMaskSettingBlock />
+      {isSD || isPaintByExample ? <></> : <ManualRunInpaintingSettingBlock />}
+      <ModelSettingBlock />
+      {isSD ? <></> : <HDSettingBlock />}
     </Modal>
   )
 }