fix delete button

This commit is contained in:
Mathew Pareles 2025-01-11 19:12:38 -08:00
parent c056214684
commit ee9f84a475

View file

@ -288,59 +288,83 @@ export const SelectedFiles = (
const isThisSelectionOpened = !!(selection.selectionStr && selectionIsOpened[i]) const isThisSelectionOpened = !!(selection.selectionStr && selectionIsOpened[i])
const isThisSelectionAFile = selection.selectionStr === null const isThisSelectionAFile = selection.selectionStr === null
const content = <div // container for `selectionSummary` and `selectionText` return <div // container for `selectionSummary` and `selectionText`
className={`${isThisSelectionOpened ? 'w-full' : ''}`} className={`${isThisSelectionOpened ? 'w-full' : ''}`}
> >
{/* selection summary */} {/* selection summary */}
<div <div // container for delete button
// className="relative rounded rounded-e-2xl flex items-center space-x-2 mx-1 mb-1 disabled:cursor-default" className='flex items-center gap-0.5'
className={`flex items-center gap-0.5 relative
rounded-md px-1
w-fit h-fit
select-none
bg-void-bg-3 hover:brightness-95
text-void-fg-1 text-xs text-nowrap
border rounded-xs ${isClearHovered ? 'border-void-border-1' : 'border-void-border-2'}
transition-all duration-150`}
onClick={() => {
// open the file if it is a file
if (isThisSelectionAFile) {
commandService.executeCommand('vscode.open', selection.fileURI, {
preview: true,
// preserveFocus: false,
});
} else {
// open the selection if it is a text-selection
setSelectionIsOpened(s => {
const newS = [...s]
newS[i] = !newS[i]
return newS
});
}
}}
> >
<span> <div // styled summary box
{/* file name */} className={`flex items-center gap-0.5 relative
{getBasename(selection.fileURI.fsPath)} rounded-md px-1
{/* selection range */} w-fit h-fit
{!isThisSelectionAFile ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''} select-none
</span> bg-void-bg-3 hover:brightness-95
text-void-fg-1 text-xs text-nowrap
border rounded-xs ${isClearHovered ? 'border-void-border-1' : 'border-void-border-2'}
transition-all duration-150`}
onClick={() => {
// open the file if it is a file
if (isThisSelectionAFile) {
commandService.executeCommand('vscode.open', selection.fileURI, {
preview: true,
// preserveFocus: false,
});
} else {
// open the selection if it is a text-selection
setSelectionIsOpened(s => {
const newS = [...s]
newS[i] = !newS[i]
return newS
});
}
}}
>
<span>
{/* file name */}
{getBasename(selection.fileURI.fsPath)}
{/* selection range */}
{!isThisSelectionAFile ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''}
</span>
{/* X button */} {/* X button */}
{type === 'staging' && {type === 'staging' &&
<span <span
className='cursor-pointer hover:bg-vscode-toolbar-hover-bg rounded-md z-1' className='cursor-pointer hover:bg-vscode-toolbar-hover-bg rounded-md z-1'
onClick={(e) => { onClick={(e) => {
e.stopPropagation(); // don't open/close selection e.stopPropagation(); // don't open/close selection
if (type !== 'staging') return; if (type !== 'staging') return;
setStaging([...selections.slice(0, i), ...selections.slice(i + 1)]) setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)]) setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)])
}} }}
> >
<IconX size={16} className="p-[2px] stroke-[3]" /> <IconX size={16} className="p-[2px] stroke-[3]" />
</span>} </span>}
</div>
{/* delete all selections button */}
{type !== 'staging' || selections.length === 0 || i !== selections.length - 1
? null
: <div key={i} className={`flex items-center gap-0.5 ${isThisSelectionOpened ? 'w-full' : ''}`}>
<div
className='rounded-md'
onMouseEnter={() => setIsClearHovered(true)}
onMouseLeave={() => setIsClearHovered(false)}
>
<Delete
size={16}
className='stroke-[1] stroke-void-fg-3
fill-void-bg-3
hover:brightness-105
cursor-pointer'
onClick={() => { setStaging([]) }}
/>
</div>
</div>
}
</div> </div>
{/* selection text */} {/* selection text */}
{isThisSelectionOpened && {isThisSelectionOpened &&
@ -359,26 +383,6 @@ export const SelectedFiles = (
</div>} </div>}
</div> </div>
if (type !== 'staging' || selections.length === 0 || i !== selections.length - 1)
return <Fragment key={i}>{content}</Fragment>
else return <div key={i} className='flex items-center gap-0.5'>
{content}
<div
className='rounded-md'
onMouseEnter={() => setIsClearHovered(true)}
onMouseLeave={() => setIsClearHovered(false)}
>
<Delete
size={16}
className='stroke-[1] stroke-void-fg-3
fill-void-bg-3
hover:brightness-105
cursor-pointer'
onClick={() => { setStaging([]) }}
/>
</div>
</div>
})} })}
@ -413,14 +417,14 @@ const ChatBubble = ({ chatMessage, isLoading }: {
return <div return <div
// align chatbubble accoridng to role // align chatbubble accoridng to role
className={` className={`
${role === 'user' ? 'px-2 self-end w-fit max-w-full' : ''} ${role === 'user' ? 'px-4 self-end w-fit max-w-full' : ''}
${role === 'assistant' ? 'self-start w-full max-w-full' : ''} ${role === 'assistant' ? 'self-start w-full max-w-full' : ''}
`} `}
> >
<div <div
// style chatbubble according to role // style chatbubble according to role
className={` className={`
p-2 text-left space-y-2 rounded-lg p-4 text-left space-y-2 rounded-lg
overflow-x-auto max-w-full overflow-x-auto max-w-full
${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''} ${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''}
`} `}