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 isThisSelectionAFile = selection.selectionStr === null
const content = <div // container for `selectionSummary` and `selectionText`
return <div // container for `selectionSummary` and `selectionText`
className={`${isThisSelectionOpened ? 'w-full' : ''}`}
>
{/* selection summary */}
<div
// 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 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
});
}
}}
<div // container for delete button
className='flex items-center gap-0.5'
>
<span>
{/* file name */}
{getBasename(selection.fileURI.fsPath)}
{/* selection range */}
{!isThisSelectionAFile ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''}
</span>
<div // styled summary box
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>
{/* file name */}
{getBasename(selection.fileURI.fsPath)}
{/* selection range */}
{!isThisSelectionAFile ? ` (${selection.range.startLineNumber}-${selection.range.endLineNumber})` : ''}
</span>
{/* X button */}
{type === 'staging' &&
<span
className='cursor-pointer hover:bg-vscode-toolbar-hover-bg rounded-md z-1'
onClick={(e) => {
e.stopPropagation(); // don't open/close selection
if (type !== 'staging') return;
setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)])
}}
>
<IconX size={16} className="p-[2px] stroke-[3]" />
</span>}
{/* X button */}
{type === 'staging' &&
<span
className='cursor-pointer hover:bg-vscode-toolbar-hover-bg rounded-md z-1'
onClick={(e) => {
e.stopPropagation(); // don't open/close selection
if (type !== 'staging') return;
setStaging([...selections.slice(0, i), ...selections.slice(i + 1)])
setSelectionIsOpened(o => [...o.slice(0, i), ...o.slice(i + 1)])
}}
>
<IconX size={16} className="p-[2px] stroke-[3]" />
</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>
{/* selection text */}
{isThisSelectionOpened &&
@ -359,26 +383,6 @@ export const SelectedFiles = (
</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
// align chatbubble accoridng to role
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' : ''}
`}
>
<div
// style chatbubble according to role
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
${role === 'user' ? 'bg-vscode-input-bg text-vscode-input-fg' : ''}
`}