update file manager

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

@@ -120,7 +120,7 @@ function HDSettingBlock() {
   return (
     <SettingBlock
       className="hd-setting-block"
-      title="High Resolution Strategy"
+      title="Strategy"
       input={
         <Selector
           width={80}

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

@@ -15,6 +15,10 @@
     .sub-setting-block {
       color: var(--text-color);
     }
+
+    svg {
+      color: var(--text-color-gray);
+    }
   }
 }
 

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

@@ -4,11 +4,11 @@
 @import './ModelSettingBlock.scss';
 
 .modal-setting {
-  grid-area: main-content;
   background-color: var(--modal-bg);
   color: var(--modal-text-color);
   box-shadow: 0px 0px 20px rgb(0, 0, 40, 0.2);
-  width: 600px;
+  width: 680px;
+  min-height: 420px;
 
   @include mobile {
     display: grid;
@@ -17,4 +17,93 @@
     margin-top: -11rem;
     animation: slideDown 0.2s ease-out;
   }
+
+  .modal-header {
+    padding-left: 8px;
+  }
+}
+
+/* reset */
+button,
+fieldset,
+input {
+  all: unset;
+}
+
+.TabsRoot {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  width: 100%;
+  background-color: var(--page-bg);
+  flex-grow: 1;
+}
+
+.TabsList {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  justify-content: flex-start;
+  border-right: 1px solid var(--border-color);
+  background-color: var(--page-bg);
+  padding-right: 20px;
+}
+
+.TabsTrigger {
+  font-family: inherit;
+  background-color: white;
+  padding-top: 8px;
+  padding-bottom: 8px;
+  padding-right: 40px;
+  padding-left: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  font-size: 15px;
+  line-height: 1;
+  color: var(--modal-text-color);
+  user-select: none;
+  background-color: var(--page-bg);
+  border-radius: 8px;
+}
+.TabsTrigger:hover {
+  background-color: var(--tabs-active-color);
+}
+.TabsTrigger[data-state='active'] {
+  background-color: var(--tabs-active-color);
+}
+.TabsTrigger:focus {
+  position: relative;
+}
+
+.TabsContent {
+  background-color: white;
+  outline: none;
+  background-color: var(--page-bg);
+  width: 100%;
+}
+
+.TabsContent[data-state='active'] {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.folder-path-block {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.folder-path {
+  width: 95%;
+  border-width: 0;
+  border-radius: 6px;
+  padding: 0.3rem 0.5rem;
+  outline: 1px solid var(--border-color);
+
+  &:focus-visible {
+    border-width: 0;
+    outline: 1px solid var(--yellow-accent);
+  }
 }

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

@@ -1,6 +1,8 @@
-import React from 'react'
+import React, { FormEvent } from 'react'
 
 import { useRecoilState, useRecoilValue } from 'recoil'
+import { FolderOpenIcon } from '@heroicons/react/24/outline'
+import * as Tabs from '@radix-ui/react-tabs'
 import {
   isPaintByExampleState,
   isSDState,
@@ -12,10 +14,23 @@ import HDSettingBlock from './HDSettingBlock'
 import ModelSettingBlock from './ModelSettingBlock'
 import DownloadMaskSettingBlock from './DownloadMaskSettingBlock'
 import useHotKey from '../../hooks/useHotkey'
+import SettingBlock from './SettingBlock'
+import { Switch, SwitchThumb } from '../shared/Switch'
+import Button from '../shared/Button'
+import TextInput from '../shared/Input'
+
+declare module 'react' {
+  interface InputHTMLAttributes<T> extends HTMLAttributes<T> {
+    // extends React's HTMLAttributes
+    directory?: string
+    webkitdirectory?: string
+  }
+}
 
 interface SettingModalProps {
   onClose: () => void
 }
+
 export default function SettingModal(props: SettingModalProps) {
   const { onClose } = props
   const [setting, setSettingState] = useRecoilState(settingState)
@@ -47,12 +62,92 @@ export default function SettingModal(props: SettingModalProps) {
       className="modal-setting"
       show={setting.show}
     >
-      {isSD || isPaintByExample ? <></> : <ManualRunInpaintingSettingBlock />}
-
-      {/* <GraduallyInpaintingSettingBlock /> */}
-      <DownloadMaskSettingBlock />
-      <ModelSettingBlock />
-      {isSD ? <></> : <HDSettingBlock />}
+      <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>
     </Modal>
   )
 }