feat: input history

Author: Arman19941113

package.json

@@ -24,6 +24,7 @@
   },
   "dependencies": {
     "@nextui-org/button": "^2.0.34",
+    "@nextui-org/dropdown": "^2.1.26",
     "@nextui-org/input": "^2.2.2",
     "@nextui-org/modal": "^2.0.36",
     "@nextui-org/radio": "^2.1.2",

pnpm-lock.yaml

@@ -5,22 +5,18 @@ import FileView from '@/components/FileView.tsx'
 import OperationBar from '@/components/OperationBar.tsx'
 import Settings from '@/components/settings/Settings.tsx'
 import { useDragging, useFiles } from '@/hooks'
+import { useInputFormat } from '@/hooks/useInputFormat.ts'
 import { AnimatePresence } from 'framer-motion'
 import { Flip, ToastContainer } from 'react-toastify'
 
 import 'react-toastify/dist/ReactToastify.css'
 
 function App() {
-  const {
+  const { inputValue, setInputValue, format, setFormat, formatOptions, addFormatOption } = useInputFormat()
+  const { setSelectedKey, files, selectedFile, handleOpenFolder, handleDropFiles, handleClickRename } = useFiles({
     format,
-    setFormat,
-    setSelectedKey,
-    files,
-    selectedFile,
-    handleOpenFolder,
-    handleDropFiles,
-    handleClickRename,
-  } = useFiles()
+    onRenamed: () => addFormatOption(format),
+  })
   const hasFiles = files.length > 0
   const { isDragging } = useDragging({ onDrop: handleDropFiles })
   const showDropModal = hasFiles && isDragging
@@ -29,9 +25,12 @@ function App() {
     <div className="flex h-[100vh] p-4">
       <div className="flex w-full flex-col">
         <OperationBar
+          inputValue={inputValue}
           format={format}
-          onFormatChange={setFormat}
+          formatOptions={formatOptions}
           hasFiles={hasFiles}
+          onInputValueChange={setInputValue}
+          onFormatChange={setFormat}
           onClickOpen={handleOpenFolder}
           onClickRename={handleClickRename}
         />

src/App.tsx

@@ -1,19 +1,26 @@
-import { RiFolderOpenLine } from '@/components/icon'
+import { RiChatHistoryLine, RiFolderOpenLine } from '@/components/icon'
 import { Button } from '@nextui-org/button'
+import { Dropdown, DropdownItem, DropdownMenu, DropdownTrigger } from '@nextui-org/dropdown'
 import { Input } from '@nextui-org/input'
 import { clsx } from 'clsx'
-import { KeyboardEvent, useRef, useState } from 'react'
+import { KeyboardEvent, useRef } from 'react'
 import { useTranslation } from 'react-i18next'
 
 function OperationBar({
+  inputValue,
+  onInputValueChange,
   format,
+  formatOptions,
   onFormatChange,
   hasFiles,
   onClickOpen,
   onClickRename,
 }: {
+  inputValue: string
+  onInputValueChange: (value: string) => void
   format: string
   onFormatChange: (format: string) => void
+  formatOptions: string[]
   hasFiles: boolean
   onClickOpen: () => void
   onClickRename: () => void
@@ -22,17 +29,17 @@ function OperationBar({
 
   const inputRef = useRef<HTMLInputElement>(null)
   const compositionRef = useRef(false)
-  const [value, setValue] = useState(format)
+  const items = formatOptions.map(option => ({ key: option, value: option }))
 
   const handleCompositionStart = () => {
     compositionRef.current = true
   }
   const handleCompositionEnd = () => {
     compositionRef.current = false
-    onFormatChange(value.trim())
+    onFormatChange(inputValue.trim())
   }
   const handleValueChange = (val: string) => {
-    setValue(val)
+    onInputValueChange(val)
     if (!compositionRef.current) {
       onFormatChange(val.trim())
     }
@@ -43,8 +50,14 @@ function OperationBar({
     }
   }
   const handleBlur = () => {
-    const val = value.trim()
-    setValue(val)
+    const val = inputValue.trim()
+    onInputValueChange(val)
+    onFormatChange(val)
+  }
+
+  const handleSelect = (selection: any) => {
+    const [val] = [...selection]
+    onInputValueChange(val)
     onFormatChange(val)
   }
 
@@ -63,7 +76,7 @@ function OperationBar({
       <div className={clsx(hasFiles ? 'flex' : 'hidden', 'w-full items-center justify-end pl-20')}>
         <Input
           ref={inputRef}
-          value={value}
+          value={inputValue}
           className="max-w-80"
           variant="underlined"
           color="primary"
@@ -74,6 +87,24 @@ function OperationBar({
           onKeyDown={handleKeydown}
           onBlur={handleBlur}
         />
+        <Dropdown placement="bottom-end" offset={14}>
+          <DropdownTrigger>
+            <div>
+              <RiChatHistoryLine className="cursor-pointer text-large text-default-500" />
+            </div>
+          </DropdownTrigger>
+          <DropdownMenu
+            color="secondary"
+            variant="light"
+            disallowEmptySelection
+            selectionMode="single"
+            selectedKeys={[format]}
+            onSelectionChange={handleSelect}
+            items={items}
+          >
+            {item => <DropdownItem key={item.key}>{item.value}</DropdownItem>}
+          </DropdownMenu>
+        </Dropdown>
         <Button radius="sm" size="sm" className="btn--grad-pink ml-4 shrink-0" onClick={onClickRename}>
           {t('Rename')}
           <span>🚀</span>

src/components/OperationBar.tsx

@@ -112,3 +112,14 @@ export function RiInformationLine(props: SVGProps<SVGSVGElement>) {
     </svg>
   )
 }
+
+export function RiChatHistoryLine(props: SVGProps<SVGSVGElement>) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12 2c5.523 0 10 4.477 10 10s-4.477 10-10 10a9.96 9.96 0 0 1-4.708-1.175L2 22l1.176-5.29A9.96 9.96 0 0 1 2 12C2 6.477 6.477 2 12 2m0 2a8 8 0 0 0-8 8c0 1.335.326 2.618.94 3.766l.35.654l-.656 2.946l2.948-.654l.653.349A7.96 7.96 0 0 0 12 20a8 8 0 1 0 0-16m1 3v5h4v2h-6V7z"
+      />
+    </svg>
+  )
+}

src/components/icon/index.tsx

@@ -12,8 +12,8 @@ export const enum ExifStatus {
 
 export const enum StorageKey {
   LANGUAGE = 'LANGUAGE',
-  FORMAT = 'FORMAT',
   MODE_EXIF = 'MODE_EXIF',
+  INPUT_HISTORY = 'INPUT_HISTORY',
 }
 
 export const enum Language {
@@ -43,8 +43,3 @@ export const formatVars: FormatVar[] = [
   '{Current}',
   '{current}',
 ]
-
-export function getInitialFormat() {
-  const defaultVal = '{Make} {YYYY}.{MM}.{DD} {hh}.{mm}.{ss}'
-  return localStorage.getItem(StorageKey.FORMAT) || defaultVal
-}

src/const/index.ts

@@ -1,4 +1,4 @@
-import { ExifStatus, getInitialFormat, StorageKey, TauriCommand } from '@/const'
+import { ExifStatus, TauriCommand } from '@/const'
 import { useError } from '@/hooks'
 import { useConfigStore } from '@/store/useConfigStore.ts'
 import { transformIpcFiles } from '@/util'
@@ -8,11 +8,10 @@ import { useMemo, useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import { toast } from 'react-toastify'
 
-export function useFiles() {
+export function useFiles({ format, onRenamed }: { format: string; onRenamed: () => void }) {
   const exifMode = useConfigStore(state => state.mode.exif)
   const { t } = useTranslation()
   const { handleError } = useError()
-  const [format, setFormat] = useState(getInitialFormat())
   const [ipcFiles, setIpcFiles] = useState<IpcFiles>([])
   const files = useMemo(() => transformIpcFiles({ ipcFiles, exifMode, format, t }), [ipcFiles, exifMode, format, t])
   const [selectedKey, setSelectedKey] = useState<string | null>(null)
@@ -62,7 +61,6 @@ export function useFiles() {
       return
     }
 
-    localStorage.setItem(StorageKey.FORMAT, format)
     setIsRenaming(true)
     invoke<string[]>(TauriCommand.RENAME_FILES, { renamePathData })
       .then(res => {
@@ -76,14 +74,13 @@ export function useFiles() {
           .concat(res)
         handleDropFiles(pathnameList)
         toast.success(t('Rename Success!'))
+        onRenamed()
       })
       .catch(err => handleError({ err, title: t('Rename Files Error') }))
       .finally(() => setIsRenaming(false))
   }
 
   return {
-    format,
-    setFormat,
     setSelectedKey,
     files,
     selectedFile,

src/hooks/useFiles.ts

@@ -0,0 +1,40 @@
+import { StorageKey } from '@/const'
+import { useEffect, useState } from 'react'
+
+export function useInputFormat() {
+  const [format, setFormat] = useState('')
+  const [inputValue, setInputValue] = useState('')
+  const [formatOptions, setFormatOptions] = useState<string[]>([])
+
+  useEffect(() => {
+    let history = localStorage.getItem(StorageKey.INPUT_HISTORY) || ''
+    if (!history) {
+      const history = JSON.stringify(['{YYYY}{MM}{DD} {hh}.{mm}.{ss}'])
+      localStorage.setItem(StorageKey.INPUT_HISTORY, history)
+    }
+    try {
+      const newHistory = JSON.parse(history)
+      setInputValue(newHistory[0])
+      setFormat(newHistory[0])
+      setFormatOptions(newHistory)
+    } catch (e) {}
+  }, [])
+
+  function addFormatOption(val: string) {
+    const index = formatOptions.indexOf(val)
+    if (index !== -1) formatOptions.splice(index, 1)
+
+    const newHistory = [val, ...formatOptions].slice(0, 5)
+    setFormatOptions(newHistory)
+    localStorage.setItem(StorageKey.INPUT_HISTORY, JSON.stringify(newHistory))
+  }
+
+  return {
+    format,
+    setFormat,
+    inputValue,
+    setInputValue,
+    formatOptions,
+    addFormatOption,
+  }
+}

src/hooks/useInputFormat.ts

@@ -4,7 +4,7 @@ import type { Config } from 'tailwindcss'
 const config: Config = {
   content: [
     './src/**/*.{js,ts,jsx,tsx,mdx}',
-    './node_modules/@nextui-org/theme/dist/components/(button|input|modal|radio|scroll-shadow|snippet|toggle|table|tabs|popover|ripple|spinner|checkbox|spacer).js',
+    './node_modules/@nextui-org/theme/dist/components/(button|dropdown|input|modal|radio|scroll-shadow|snippet|toggle|table|tabs|popover|ripple|spinner|menu|divider|checkbox|spacer).js',
   ],
   theme: {
     extend: {