commander rename
This commit is contained in:
FTCHD
@@ -0,0 +1,445 @@
|
|||||||
|
import {
|
||||||
|
Button,
|
||||||
|
Drawer,
|
||||||
|
DrawerBody,
|
||||||
|
DrawerContent,
|
||||||
|
DrawerFooter,
|
||||||
|
DrawerHeader,
|
||||||
|
Input,
|
||||||
|
Radio,
|
||||||
|
RadioGroup,
|
||||||
|
ScrollShadow,
|
||||||
|
Switch,
|
||||||
|
cn,
|
||||||
|
} from '@heroui/react'
|
||||||
|
import { useMutation } from '@tanstack/react-query'
|
||||||
|
import { AlertCircleIcon, ArrowRightIcon, XIcon } from 'lucide-react'
|
||||||
|
import { useEffect, useMemo, useState } from 'react'
|
||||||
|
import { getFsInfo } from '../../../lib/format.ts'
|
||||||
|
import FileIcon from './FileIcon'
|
||||||
|
import type { Entry, SelectItem } from './types'
|
||||||
|
import { renamePath } from './utils'
|
||||||
|
|
||||||
|
type CaseMode = 'none' | 'lower' | 'upper' | 'title'
|
||||||
|
|
||||||
|
type RenameForm = {
|
||||||
|
find: string
|
||||||
|
replace: string
|
||||||
|
regex: boolean
|
||||||
|
caseInsensitive: boolean
|
||||||
|
caseMode: CaseMode
|
||||||
|
prefix: string
|
||||||
|
suffix: string
|
||||||
|
numberEnabled: boolean
|
||||||
|
numberStart: number
|
||||||
|
numberPadding: number
|
||||||
|
numberSeparator: string
|
||||||
|
includeExtension: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const INITIAL_FORM: RenameForm = {
|
||||||
|
find: '',
|
||||||
|
replace: '',
|
||||||
|
regex: false,
|
||||||
|
caseInsensitive: false,
|
||||||
|
caseMode: 'none',
|
||||||
|
prefix: '',
|
||||||
|
suffix: '',
|
||||||
|
numberEnabled: false,
|
||||||
|
numberStart: 1,
|
||||||
|
numberPadding: 0,
|
||||||
|
numberSeparator: '',
|
||||||
|
includeExtension: false,
|
||||||
|
}
|
||||||
|
|
||||||
|
const RE_REGEXP_META = /[.*+?^${}()|[\]\\]/g
|
||||||
|
const RE_WORD = /\w\S*/g
|
||||||
|
|
||||||
|
const APPLY_CASE: Record<CaseMode, (value: string) => string> = {
|
||||||
|
none: (value) => value,
|
||||||
|
lower: (value) => value.toLowerCase(),
|
||||||
|
upper: (value) => value.toUpperCase(),
|
||||||
|
title: (value) =>
|
||||||
|
value.replace(
|
||||||
|
RE_WORD,
|
||||||
|
(word) => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()
|
||||||
|
),
|
||||||
|
}
|
||||||
|
|
||||||
|
// The find/replace pattern, compiled once per plan; `error` when the user's regex doesn't parse.
|
||||||
|
function compileFind(form: RenameForm): { find?: RegExp; error?: string } {
|
||||||
|
if (!form.find) return {}
|
||||||
|
try {
|
||||||
|
const source = form.regex ? form.find : form.find.replace(RE_REGEXP_META, '\\$&')
|
||||||
|
return { find: new RegExp(source, form.caseInsensitive ? 'gi' : 'g') }
|
||||||
|
} catch {
|
||||||
|
return { error: 'Invalid regular expression' }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// prefix + (find/replace → case) + suffix + number, with the extension re-attached last.
|
||||||
|
function computeNewName(
|
||||||
|
oldName: string,
|
||||||
|
isDir: boolean,
|
||||||
|
index: number,
|
||||||
|
form: RenameForm,
|
||||||
|
find?: RegExp
|
||||||
|
): string {
|
||||||
|
// Folders never have an extension; for files, split on the last dot unless the user opted to
|
||||||
|
// include it. `dot > 0` keeps dotfiles (".env") whole.
|
||||||
|
const dot = isDir || form.includeExtension ? -1 : oldName.lastIndexOf('.')
|
||||||
|
const ext = dot > 0 ? oldName.slice(dot) : ''
|
||||||
|
let base = dot > 0 ? oldName.slice(0, dot) : oldName
|
||||||
|
|
||||||
|
if (find) base = base.replace(find, form.replace)
|
||||||
|
base = APPLY_CASE[form.caseMode](base)
|
||||||
|
|
||||||
|
const number = form.numberEnabled
|
||||||
|
? `${form.numberSeparator}${String(form.numberStart + index).padStart(form.numberPadding, '0')}`
|
||||||
|
: ''
|
||||||
|
return `${form.prefix}${base}${form.suffix}${number}${ext}`
|
||||||
|
}
|
||||||
|
|
||||||
|
type PlanRow = {
|
||||||
|
item: SelectItem
|
||||||
|
entry: Entry // for FileIcon
|
||||||
|
oldName: string
|
||||||
|
newName: string
|
||||||
|
target: string // full path after the rename; collisions are checked per folder
|
||||||
|
error?: string
|
||||||
|
}
|
||||||
|
|
||||||
|
// Maps the selection to old→new rows and flags anything that would make a sequential rename unsafe:
|
||||||
|
// empty names, two items renamed to the same target, or a target that is another selected item's
|
||||||
|
// current name. With an invalid regex every name is left unchanged and the banner blocks Apply.
|
||||||
|
function buildPlan(
|
||||||
|
items: SelectItem[],
|
||||||
|
form: RenameForm
|
||||||
|
): { rows: PlanRow[]; regexError?: string } {
|
||||||
|
const { find, error: regexError } = compileFind(form)
|
||||||
|
|
||||||
|
const rows = items.map((item, index) => {
|
||||||
|
const oldName = getFsInfo(item.path).name
|
||||||
|
const isDir = item.type === 'folder'
|
||||||
|
const dir = item.path.slice(0, item.path.lastIndexOf(oldName))
|
||||||
|
const newName = regexError ? oldName : computeNewName(oldName, isDir, index, form, find)
|
||||||
|
return {
|
||||||
|
item,
|
||||||
|
entry: { key: item.path, name: oldName, isDir, fullPath: item.path },
|
||||||
|
oldName,
|
||||||
|
newName,
|
||||||
|
target: dir + newName,
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
const targetCounts = new Map<string, number>()
|
||||||
|
for (const row of rows) targetCounts.set(row.target, (targetCounts.get(row.target) ?? 0) + 1)
|
||||||
|
const currentPaths = new Set(rows.map((row) => row.item.path))
|
||||||
|
|
||||||
|
const errorFor = (row: Omit<PlanRow, 'error'>) => {
|
||||||
|
if (!row.newName) return 'Name cannot be empty'
|
||||||
|
if ((targetCounts.get(row.target) ?? 0) > 1) return 'Duplicate name'
|
||||||
|
if (row.newName !== row.oldName && currentPaths.has(row.target)) {
|
||||||
|
return 'Would collide with another selected item'
|
||||||
|
}
|
||||||
|
return undefined
|
||||||
|
}
|
||||||
|
|
||||||
|
return { regexError, rows: rows.map((row) => ({ ...row, error: errorFor(row) })) }
|
||||||
|
}
|
||||||
|
|
||||||
|
// Free-text fields (names, patterns) must not be autocorrected by the webview.
|
||||||
|
const PLAIN_TEXT = {
|
||||||
|
autoCapitalize: 'off',
|
||||||
|
autoComplete: 'off',
|
||||||
|
autoCorrect: 'off',
|
||||||
|
spellCheck: 'false',
|
||||||
|
} as const
|
||||||
|
|
||||||
|
export default function BatchRenameDrawer({
|
||||||
|
isOpen,
|
||||||
|
onClose,
|
||||||
|
items,
|
||||||
|
onDone,
|
||||||
|
}: {
|
||||||
|
isOpen: boolean
|
||||||
|
onClose: () => void
|
||||||
|
items: SelectItem[]
|
||||||
|
onDone: () => void
|
||||||
|
}) {
|
||||||
|
const [form, setForm] = useState<RenameForm>(INITIAL_FORM)
|
||||||
|
const [failures, setFailures] = useState<{ name: string; error: string }[]>([])
|
||||||
|
|
||||||
|
// Fresh form each time the drawer opens.
|
||||||
|
useEffect(() => {
|
||||||
|
if (isOpen) {
|
||||||
|
setForm(INITIAL_FORM)
|
||||||
|
setFailures([])
|
||||||
|
}
|
||||||
|
}, [isOpen])
|
||||||
|
|
||||||
|
const patch = (partial: Partial<RenameForm>) => setForm((prev) => ({ ...prev, ...partial }))
|
||||||
|
|
||||||
|
const { rows, regexError } = useMemo(() => buildPlan(items, form), [items, form])
|
||||||
|
const pending = rows.filter((row) => !row.error && row.newName !== row.oldName)
|
||||||
|
const applyDisabled = !!regexError || rows.some((row) => row.error) || pending.length === 0
|
||||||
|
|
||||||
|
const applyMutation = useMutation({
|
||||||
|
// Sequential on purpose: the plan's collision checks assume renames happen one at a time.
|
||||||
|
mutationFn: async () => {
|
||||||
|
const failed: { name: string; error: string }[] = []
|
||||||
|
for (const row of pending) {
|
||||||
|
try {
|
||||||
|
await renamePath(row.item.path, row.item.type === 'folder', row.newName)
|
||||||
|
} catch (error) {
|
||||||
|
failed.push({
|
||||||
|
name: row.oldName,
|
||||||
|
error: error instanceof Error ? error.message : 'Rename failed',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return failed
|
||||||
|
},
|
||||||
|
onSuccess: (failed) => {
|
||||||
|
onDone()
|
||||||
|
if (failed.length === 0) onClose()
|
||||||
|
else setFailures(failed)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<Drawer
|
||||||
|
isOpen={isOpen}
|
||||||
|
placement="bottom"
|
||||||
|
size="full"
|
||||||
|
onClose={onClose}
|
||||||
|
hideCloseButton={true}
|
||||||
|
>
|
||||||
|
<DrawerContent className="bg-content1/80 backdrop-blur-md dark:bg-content1/90">
|
||||||
|
{() => (
|
||||||
|
<>
|
||||||
|
<DrawerHeader className="flex items-center justify-between border-b border-divider">
|
||||||
|
<span className="text-base font-semibold">
|
||||||
|
Batch Rename
|
||||||
|
<span className="ml-2 font-normal text-default-400">
|
||||||
|
{items.length} items
|
||||||
|
</span>
|
||||||
|
</span>
|
||||||
|
<Button isIconOnly={true} size="sm" variant="light" onPress={onClose}>
|
||||||
|
<XIcon className="size-4" />
|
||||||
|
</Button>
|
||||||
|
</DrawerHeader>
|
||||||
|
|
||||||
|
<DrawerBody className="flex flex-col gap-5 overflow-hidden">
|
||||||
|
<div className="flex flex-col gap-5">
|
||||||
|
<section className="flex flex-col gap-2">
|
||||||
|
<div className="grid grid-cols-2 gap-3">
|
||||||
|
<Input
|
||||||
|
label="Find"
|
||||||
|
labelPlacement="outside"
|
||||||
|
placeholder="Text to find"
|
||||||
|
value={form.find}
|
||||||
|
onValueChange={(v) => patch({ find: v })}
|
||||||
|
{...PLAIN_TEXT}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Replace with"
|
||||||
|
labelPlacement="outside"
|
||||||
|
placeholder="Replacement"
|
||||||
|
value={form.replace}
|
||||||
|
onValueChange={(v) => patch({ replace: v })}
|
||||||
|
{...PLAIN_TEXT}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-6">
|
||||||
|
<Switch
|
||||||
|
size="sm"
|
||||||
|
isSelected={form.regex}
|
||||||
|
onValueChange={(v) => patch({ regex: v })}
|
||||||
|
>
|
||||||
|
Regex
|
||||||
|
</Switch>
|
||||||
|
<Switch
|
||||||
|
size="sm"
|
||||||
|
isSelected={form.caseInsensitive}
|
||||||
|
onValueChange={(v) => patch({ caseInsensitive: v })}
|
||||||
|
>
|
||||||
|
Case-insensitive
|
||||||
|
</Switch>
|
||||||
|
</div>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="grid grid-cols-2 gap-3">
|
||||||
|
<Input
|
||||||
|
label="Prefix"
|
||||||
|
labelPlacement="outside"
|
||||||
|
placeholder="Added to the start"
|
||||||
|
value={form.prefix}
|
||||||
|
onValueChange={(v) => patch({ prefix: v })}
|
||||||
|
{...PLAIN_TEXT}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Suffix"
|
||||||
|
labelPlacement="outside"
|
||||||
|
placeholder="Added before the extension"
|
||||||
|
value={form.suffix}
|
||||||
|
onValueChange={(v) => patch({ suffix: v })}
|
||||||
|
{...PLAIN_TEXT}
|
||||||
|
/>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="flex flex-col gap-2">
|
||||||
|
<Switch
|
||||||
|
size="sm"
|
||||||
|
isSelected={form.numberEnabled}
|
||||||
|
onValueChange={(v) => patch({ numberEnabled: v })}
|
||||||
|
>
|
||||||
|
Add sequential number
|
||||||
|
</Switch>
|
||||||
|
{form.numberEnabled && (
|
||||||
|
<div className="grid grid-cols-3 gap-3">
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
label="Start at"
|
||||||
|
labelPlacement="outside"
|
||||||
|
value={String(form.numberStart)}
|
||||||
|
onValueChange={(v) =>
|
||||||
|
patch({
|
||||||
|
numberStart: Number.parseInt(v, 10) || 0,
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
type="number"
|
||||||
|
label="Min digits"
|
||||||
|
labelPlacement="outside"
|
||||||
|
value={String(form.numberPadding)}
|
||||||
|
onValueChange={(v) =>
|
||||||
|
patch({
|
||||||
|
numberPadding: Math.max(
|
||||||
|
0,
|
||||||
|
Number.parseInt(v, 10) || 0
|
||||||
|
),
|
||||||
|
})
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
label="Separator"
|
||||||
|
labelPlacement="outside"
|
||||||
|
placeholder="e.g. - or _"
|
||||||
|
value={form.numberSeparator}
|
||||||
|
onValueChange={(v) => patch({ numberSeparator: v })}
|
||||||
|
{...PLAIN_TEXT}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</section>
|
||||||
|
|
||||||
|
<section className="flex flex-wrap items-center justify-between gap-4">
|
||||||
|
<RadioGroup
|
||||||
|
label="Case"
|
||||||
|
orientation="horizontal"
|
||||||
|
value={form.caseMode}
|
||||||
|
onValueChange={(v) => patch({ caseMode: v as CaseMode })}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
<Radio value="none">Original</Radio>
|
||||||
|
<Radio value="lower">lower</Radio>
|
||||||
|
<Radio value="upper">UPPER</Radio>
|
||||||
|
<Radio value="title">Title</Radio>
|
||||||
|
</RadioGroup>
|
||||||
|
<Switch
|
||||||
|
size="sm"
|
||||||
|
isSelected={form.includeExtension}
|
||||||
|
onValueChange={(v) => patch({ includeExtension: v })}
|
||||||
|
>
|
||||||
|
Include extension
|
||||||
|
</Switch>
|
||||||
|
</section>
|
||||||
|
|
||||||
|
{regexError && (
|
||||||
|
<div className="flex items-center gap-2 text-sm text-danger">
|
||||||
|
<AlertCircleIcon className="size-4" />
|
||||||
|
{regexError}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{failures.length > 0 && (
|
||||||
|
<div className="flex flex-col gap-1 text-sm text-danger">
|
||||||
|
<span className="font-medium">
|
||||||
|
{failures.length} rename(s) failed:
|
||||||
|
</span>
|
||||||
|
{failures.map((f) => (
|
||||||
|
<span key={f.name} className="text-xs">
|
||||||
|
{f.name}: {f.error}
|
||||||
|
</span>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex flex-col flex-1 min-h-0">
|
||||||
|
<span className="mb-1 text-xs font-medium text-default-400">
|
||||||
|
Preview
|
||||||
|
</span>
|
||||||
|
<ScrollShadow className="flex-1 border rounded-lg border-divider">
|
||||||
|
{rows.map((row) => (
|
||||||
|
<div
|
||||||
|
key={row.item.path}
|
||||||
|
className="grid grid-cols-[1fr_auto_1fr] items-center gap-3 px-3 py-2 border-b border-divider last:border-b-0"
|
||||||
|
>
|
||||||
|
<div className="flex items-center min-w-0 gap-2">
|
||||||
|
<FileIcon entry={row.entry} size="sm" />
|
||||||
|
<span
|
||||||
|
className="text-sm truncate text-default-500"
|
||||||
|
title={row.oldName}
|
||||||
|
>
|
||||||
|
{row.oldName}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<ArrowRightIcon className="size-4 text-default-300 shrink-0" />
|
||||||
|
<div className="flex flex-col min-w-0">
|
||||||
|
<span
|
||||||
|
className={cn(
|
||||||
|
'truncate text-sm',
|
||||||
|
row.error
|
||||||
|
? 'text-danger'
|
||||||
|
: row.newName !== row.oldName
|
||||||
|
? 'font-medium text-foreground'
|
||||||
|
: 'text-default-400'
|
||||||
|
)}
|
||||||
|
title={row.newName}
|
||||||
|
>
|
||||||
|
{row.newName || '—'}
|
||||||
|
</span>
|
||||||
|
{row.error && (
|
||||||
|
<span className="text-xs text-danger">
|
||||||
|
{row.error}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</ScrollShadow>
|
||||||
|
</div>
|
||||||
|
</DrawerBody>
|
||||||
|
|
||||||
|
<DrawerFooter className="border-t border-divider">
|
||||||
|
<Button variant="light" onPress={onClose} data-focus-visible="false">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
isDisabled={applyDisabled}
|
||||||
|
isLoading={applyMutation.isPending}
|
||||||
|
onPress={() => applyMutation.mutate()}
|
||||||
|
data-focus-visible="false"
|
||||||
|
>
|
||||||
|
{pending.length > 0 ? `Rename ${pending.length}` : 'Rename'}
|
||||||
|
</Button>
|
||||||
|
</DrawerFooter>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</DrawerContent>
|
||||||
|
</Drawer>
|
||||||
|
)
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user