UniqAI/bolt.new
1
0
Fork 0
mirror of https://github.com/stackblitz/bolt.new synced 2025-02-06 04:48:04 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

refactor: improve history item hover states and interactions

Browse Source
This commit is contained in:
SujalXplores 2024-11-25 20:46:17 +05:30
parent dafe934d99
commit b8b25baf5c
1 changed files with 33 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

99
app/components/sidebar/HistoryItem.tsx
View File

@ -1,5 +1,4 @@
import * as Dialog from '@radix-ui/react-dialog'; import * as Dialog from '@radix-ui/react-dialog';
import { useEffect, useRef, useState } from 'react';
import { type ChatHistoryItem } from '~/lib/persistence'; import { type ChatHistoryItem } from '~/lib/persistence';
import WithTooltip from '~/components/ui/Tooltip'; import WithTooltip from '~/components/ui/Tooltip';
@ -11,78 +10,46 @@ interface HistoryItemProps {
} }
export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) { export function HistoryItem({ item, onDelete, onDuplicate, exportChat }: HistoryItemProps) {
const [hovering, setHovering] = useState(false);
const hoverRef = useRef<HTMLDivElement>(null);
useEffect(() => {
let timeout: NodeJS.Timeout | undefined;
function mouseEnter() {
setHovering(true);
if (timeout) {
clearTimeout(timeout);
}
}
function mouseLeave() {
setHovering(false);
}
hoverRef.current?.addEventListener('mouseenter', mouseEnter);
hoverRef.current?.addEventListener('mouseleave', mouseLeave);
return () => {
hoverRef.current?.removeEventListener('mouseenter', mouseEnter);
hoverRef.current?.removeEventListener('mouseleave', mouseLeave);
};
}, []);
return ( return (
<div <div className="group rounded-md text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 overflow-hidden flex justify-between items-center px-2 py-1">
ref={hoverRef}
className="group rounded-md text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary hover:bg-bolt-elements-background-depth-3 overflow-hidden flex justify-between items-center px-2 py-1"
>
<a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block"> <a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
{item.description} {item.description}
<div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-99%"> <div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-bolt-elements-background-depth-2 group-hover:from-bolt-elements-background-depth-3 box-content pl-3 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-99%">
{hovering && ( <div className="flex items-center p-1 text-bolt-elements-textSecondary opacity-0 group-hover:opacity-100 transition-opacity">
<div className="flex items-center p-1 text-bolt-elements-textSecondary"> <WithTooltip tooltip="Export chat">
<WithTooltip tooltip="Export chat"> <button
type="button"
className="i-ph:download-simple scale-110 mr-2 hover:text-bolt-elements-item-contentAccent"
onClick={(event) => {
event.preventDefault();
exportChat(item.id);
}}
title="Export chat"
/>
</WithTooltip>
{onDuplicate && (
<WithTooltip tooltip="Duplicate chat">
<button <button
className="i-ph:download-simple scale-110 mr-2" type="button"
onClick={(event) => { className="i-ph:copy scale-110 mr-2 hover:text-bolt-elements-item-contentAccent"
event.preventDefault(); onClick={() => onDuplicate?.(item.id)}
exportChat(item.id); title="Duplicate chat"
//exportChat(item.messages, item.description);
}}
title="Export chat"
/> />
</WithTooltip> </WithTooltip>
{onDuplicate && ( )}
<WithTooltip tooltip="Duplicate chat"> <Dialog.Trigger asChild>
<button <WithTooltip tooltip="Delete chat">
className="i-ph:copy scale-110 mr-2" <button
onClick={() => onDuplicate?.(item.id)} type="button"
title="Duplicate chat" className="i-ph:trash scale-110 hover:text-bolt-elements-button-danger-text"
/> onClick={(event) => {
</WithTooltip> event.preventDefault();
)} onDelete?.(event);
<Dialog.Trigger asChild> }}
<WithTooltip tooltip="Delete chat"> />
<button </WithTooltip>
className="i-ph:trash scale-110" </Dialog.Trigger>
onClick={(event) => { </div>
// we prevent the default so we don't trigger the anchor above
event.preventDefault();
onDelete?.(event);
}}
/>
</WithTooltip>
</Dialog.Trigger>
</div>
)}
</div> </div>
</a> </a>
</div> </div>