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

chore: ui updates

Browse Source 
some small ui updates for preview popout and chat history popout
This commit is contained in:
Dustin Loring 2025-01-18 15:51:42 -05:00 committed by GitHub
commit 8960bb8145
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 15 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
app/components/chat/ChatHistory.client.tsx
View File

@ -59,27 +59,30 @@ export function ChatHistory() {
</IconButton> </IconButton>
{isOpen && ( {isOpen && (
<div className="absolute bottom-full left-0 mb-2 w-[300px] max-h-[400px] overflow-y-auto bg-bolt-elements-background-depth-2 border border-bolt-elements-borderColor rounded-lg shadow-lg"> <>
<div className="p-2"> <div className="fixed inset-0 z-[9998]" onClick={() => setIsOpen(false)} />
<h3 className="text-sm font-medium text-bolt-elements-textPrimary px-2 py-1">Chat History</h3> <div className="absolute bottom-full left-0 mb-2 z-[9999] min-w-[300px] max-h-[400px] overflow-y-auto bg-bolt-elements-background-depth-2 rounded-xl shadow-2xl border border-bolt-elements-borderColor overflow-hidden">
<div className="mt-1"> <div className="px-4 py-3.5 border-b border-bolt-elements-borderColor">
<h3 className="text-sm font-medium text-bolt-elements-textPrimary">Chat History</h3>
</div>
<div>
{history.map((item) => ( {history.map((item) => (
<button <button
key={item.id} key={item.id}
onClick={() => handleRestore(item)} onClick={() => handleRestore(item)}
className="w-full text-left px-2 py-1.5 hover:bg-bolt-elements-item-backgroundHover rounded transition-colors" className="w-full px-4 py-3.5 text-left bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-item-backgroundAccent text-bolt-elements-textPrimary text-sm whitespace-nowrap transition-all duration-200 flex flex-col group"
> >
<div className="text-sm text-bolt-elements-textPrimary truncate"> <span className="font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors duration-200 truncate">
{item.description || `Version ${new Date(item.timestamp).toLocaleTimeString()}`} {item.description || `Version ${new Date(item.timestamp).toLocaleTimeString()}`}
</div> </span>
<div className="text-xs text-bolt-elements-textTertiary"> <span className="text-xs text-bolt-elements-textSecondary group-hover:text-bolt-elements-textPrimary transition-colors duration-200">
{new Date(item.timestamp).toLocaleDateString()} {new Date(item.timestamp).toLocaleTimeString()} {new Date(item.timestamp).toLocaleDateString()} {new Date(item.timestamp).toLocaleTimeString()}
</div> </span>
</button> </button>
))} ))}
</div> </div>
</div> </div>
</div> </>
)} )}
</div> </div>
); );

4
app/components/workbench/Preview.tsx
View File

@ -325,7 +325,7 @@ export const Preview = memo(() => {
{WINDOW_SIZES.map((size) => ( {WINDOW_SIZES.map((size) => (
<button <button
key={size.name} key={size.name}
className="w-full px-4 py-3.5 text-left hover:bg-bolt-elements-item-backgroundAccent text-bolt-elements-textSecondary text-sm whitespace-nowrap transition-all duration-200 flex items-center gap-3 group" className="w-full px-4 py-3.5 text-left bg-bolt-elements-background-depth-2 hover:bg-bolt-elements-item-backgroundAccent text-bolt-elements-textPrimary text-sm whitespace-nowrap transition-all duration-200 flex items-center gap-3 group"
onClick={() => { onClick={() => {
setSelectedWindowSize(size); setSelectedWindowSize(size);
setIsWindowSizeDropdownOpen(false); setIsWindowSizeDropdownOpen(false);
@ -333,7 +333,7 @@ export const Preview = memo(() => {
}} }}
> >
<div <div
className={`${size.icon} w-5 h-5 text-bolt-elements-textSecondary group-hover:text-bolt-elements-item-contentAccent transition-colors duration-200`} className={`${size.icon} w-5 h-5 text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors duration-200`}
/> />
<div className="flex flex-col"> <div className="flex flex-col">
<span className="font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors duration-200"> <span className="font-medium text-bolt-elements-textPrimary group-hover:text-bolt-elements-item-contentAccent transition-colors duration-200">