optional readonly and fix clear buttons

src-tauri/lang/en.json

@@ -14,7 +14,8 @@
     "grasscutter_jar": "Set Grasscutter Jar",
     "java_path": "Set Custom Java Path",
     "grasscutter_with_game": "Automatically launch Grasscutter with game",
-    "language": "Select Language (requires restart)"
+    "language": "Select Language (requires restart)",
+    "background": "Set Custom Background (link or image file)"
   },
   "downloads": {
     "grasscutter_stable_data": "Download Grasscutter Stable Data",

src/ui/components/common/DirInput.tsx

@@ -10,6 +10,7 @@ interface IProps {
   value?: string
   onChange?: (value: string) => void
   extensions?: string[]
+  readonly?: boolean
 }
 
 interface IState {
@@ -23,10 +24,12 @@ export default class DirInput extends React.Component<IProps, IState> {
 
     this.state = {
       value: props.value || '',
-      placeholder: 'Select file or folder...'
+      placeholder: 'Select file or folder...',
     }
 
     this.handleIconClick = this.handleIconClick.bind(this)
+
+    console.log(this.props)
   }
 
   static getDerivedStateFromProps(props: IProps, state: IState) {
@@ -66,7 +69,7 @@ export default class DirInput extends React.Component<IProps, IState> {
           value={this.state.value}
           placeholder={this.state.placeholder}
           clearable={true}
-          readOnly={true} onChange={(text: string) => {
+          readOnly={this.props.readonly !== undefined ? this.props.readonly : true } onChange={(text: string) => {
             this.setState({ value: text })
 
             if (this.props.onChange) this.props.onChange(text)

src/ui/components/common/TextInput.tsx

@@ -48,6 +48,8 @@ export default class TextInput extends React.Component<IProps, IState> {
               this.setState({ value: '' })
     
               if (this.props.onChange) this.props.onChange('')
+
+              this.forceUpdate()
             }}>
               <img src={Close} className="TextInputClear" />
             </div> : null

src/ui/components/menu/Options.tsx

@@ -19,6 +19,7 @@ interface IState {
   grasscutter_with_game: boolean
   language_options: { [key: string]: string }[],
   current_language: string
+  bg_url_or_path: string
 }
 
 export default class Options extends React.Component<IProps, IState> {
@@ -31,7 +32,8 @@ export default class Options extends React.Component<IProps, IState> {
       java_path: '',
       grasscutter_with_game: false,
       language_options: [],
-      current_language: 'en'
+      current_language: 'en',
+      bg_url_or_path: ''
     }
   }
 
@@ -45,7 +47,8 @@ export default class Options extends React.Component<IProps, IState> {
       java_path: config.java_path || '',
       grasscutter_with_game: config.grasscutter_with_game || false,
       language_options: languages,
-      current_language: config.language || 'en'
+      current_language: config.language || 'en',
+      bg_url_or_path: config.customBackground || ''
     })
 
     this.forceUpdate()
@@ -71,6 +74,10 @@ export default class Options extends React.Component<IProps, IState> {
     setConfigOption('grasscutter_with_game', !(await getConfigOption('grasscutter_with_game')))
   }
 
+  setCustomBackground() {
+    setConfigOption('customBackground', this.state.bg_url_or_path)
+  }
+
   render() {
     return (
       <Menu closeFn={this.props.closeFn} className="Options" heading="Options">
@@ -113,6 +120,15 @@ export default class Options extends React.Component<IProps, IState> {
           </div>
         </div>
 
+        <div className='OptionSection'>
+          <div className='OptionLabel'>
+            <Tr text="options.background" />
+          </div>
+          <div className='OptionValue'>
+            <DirInput onChange={this.setCustomBackground} readonly={false} value={this.state?.bg_url_or_path} extensions={['exe']} />
+          </div>
+        </div>
+
         <div className='OptionSection'>
           <div className='OptionLabel'>
             <Tr text="options.language" />

src/utils/configuration.ts

@@ -16,6 +16,7 @@ let defaultConfig: Configuration
     last_ip: '',
     last_port: '',
     language: 'en',
+    customBackground: '',
   }
 })()
 
@@ -33,6 +34,7 @@ export interface Configuration {
   last_ip: string
   last_port: string
   language: string
+  customBackground: string
 }
 
 export async function setConfigOption(key: string, value: any): Promise<void> {