@@ -23,6 +23,8 @@ import {
2323 ModalOverlay ,
2424 ModalProps ,
2525 Stack ,
26+ Tag ,
27+ TagLabel ,
2628 useDisclosure ,
2729} from "@chakra-ui/react" ;
2830import { open } from "@tauri-apps/plugin-dialog" ;
@@ -33,6 +35,7 @@ import { useGlobalData } from "@/contexts/global-data";
3335import { useRoutingHistory } from "@/contexts/routing-history" ;
3436import { useToast } from "@/contexts/toast" ;
3537import { ConfigService } from "@/services/config" ;
38+ import { getGameDirName , isSpecialGameDir } from "@/utils/instance" ;
3639import { isPathSanitized } from "@/utils/string" ;
3740
3841interface ActionSelectDialogProps extends Omit < ModalProps , "children" > {
@@ -245,12 +248,14 @@ const EditGameDirectoryModal: React.FC<EditGameDirectoryModalProps> = ({
245248 if ( currentPath === _dirPath ) {
246249 // only update dir name, instance not changed
247250 replaceHistory (
248- `/instances/details/${ currentName } :` ,
249- `/instances/details/${ dirName } :`
251+ `/instances/details/${ encodeURIComponent ( ` ${ currentName } :` ) } ` ,
252+ `/instances/details/${ encodeURIComponent ( ` ${ dirName } :` ) } `
250253 ) ;
251254 } else {
252255 // update dir path, instance may change, remove all route history
253- removeHistory ( `/instances/details/${ currentName } :` ) ;
256+ removeHistory (
257+ `/instances/details/${ encodeURIComponent ( `${ currentName } :` ) } `
258+ ) ;
254259 }
255260 const encodedCurrentName = encodeURIComponent ( currentName ) ;
256261 const encodedDirName = encodeURIComponent ( dirName ) ;
@@ -308,30 +313,46 @@ const EditGameDirectoryModal: React.FC<EditGameDirectoryModalProps> = ({
308313 }
309314 >
310315 < FormLabel > { t ( "EditGameDirectoryModal.label.dirName" ) } </ FormLabel >
311- < Input
312- placeholder = { t ( "EditGameDirectoryModal.placeholder.dirName" ) }
313- value = { dirName }
314- onChange = { ( e ) => setDirName ( e . target . value ) }
315- onBlur = { ( ) => {
316- setIsDirNameEmpty ( dirName . length === 0 ) ;
317- setIsDirNameTooLong ( dirName . length > 20 ) ;
318- setIsDirNameExist (
319- config . localGameDirectories
320- . map ( ( dir ) => dir . name )
321- . includes ( dirName ) && dirName !== currentName
322- ) ;
323- setIsDirNameInvalid ( / [ \/ : \\ ? # & % ] / . test ( dirName ) ) ;
324- } }
325- onFocus = { ( ) => {
326- setIsDirNameEmpty ( false ) ;
327- setIsDirNameTooLong ( false ) ;
328- setIsDirNameExist ( false ) ;
329- setIsDirNameInvalid ( false ) ;
330- } }
331- required
332- ref = { initialRef }
333- focusBorderColor = { `${ primaryColor } .500` }
334- />
316+ < InputGroup >
317+ < Input
318+ placeholder = { t ( "EditGameDirectoryModal.placeholder.dirName" ) }
319+ value = { dirName }
320+ pr = {
321+ isSpecialGameDir ( dirName )
322+ ? `${ getGameDirName ( dirName ) . length } ch`
323+ : undefined
324+ }
325+ onChange = { ( e ) => setDirName ( e . target . value ) }
326+ onBlur = { ( ) => {
327+ setIsDirNameEmpty ( dirName . length === 0 ) ;
328+ setIsDirNameTooLong ( dirName . length > 20 ) ;
329+ setIsDirNameExist (
330+ config . localGameDirectories
331+ . map ( ( dir ) => dir . name )
332+ . includes ( dirName ) && dirName !== currentName
333+ ) ;
334+ setIsDirNameInvalid ( / [ \/ : \\ ? # & % ] / . test ( dirName ) ) ;
335+ } }
336+ onFocus = { ( ) => {
337+ setIsDirNameEmpty ( false ) ;
338+ setIsDirNameTooLong ( false ) ;
339+ setIsDirNameExist ( false ) ;
340+ setIsDirNameInvalid ( false ) ;
341+ } }
342+ required
343+ ref = { initialRef }
344+ focusBorderColor = { `${ primaryColor } .500` }
345+ />
346+ { isSpecialGameDir ( dirName ) && (
347+ < InputRightElement width = "auto" pr = { 2 } >
348+ < Tag title = { getGameDirName ( dirName ) } >
349+ < TagLabel overflow = "hidden" textOverflow = "ellipsis" >
350+ { getGameDirName ( dirName ) }
351+ </ TagLabel >
352+ </ Tag >
353+ </ InputRightElement >
354+ ) }
355+ </ InputGroup >
335356 { isDirNameTooLong && (
336357 < FormErrorMessage >
337358 { t ( "EditGameDirectoryModal.errorMessage.dirName.tooLong" ) }
0 commit comments