Skip to content

Commit f41b082

Browse files
dustinwloring1988dustinwloring1988
committed
feat: improved sidebar
improved the sidebar
1 parent 502de4b commit f41b082

File tree

3 files changed

+139
-28
lines changed

3 files changed

+139
-28
lines changed

‎app/components/sidebar/HistoryItem.tsx

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,9 +5,11 @@ import { type ChatHistoryItem } from '~/lib/persistence';
55
interface HistoryItemProps {
66
item: ChatHistoryItem;
77
onDelete?: (event: React.UIEvent) => void;
8+
onRename?: (event: React.UIEvent) => void;
9+
onExport?: (event: React.UIEvent) => void;
810
}
911

10-
export function HistoryItem({ item, onDelete }: HistoryItemProps) {
12+
export function HistoryItem({ item, onDelete, onRename, onExport }: HistoryItemProps) {
1113
const [hovering, setHovering] = useState(false);
1214
const hoverRef = useRef<HTMLDivElement>(null);
1315

@@ -16,7 +18,6 @@ export function HistoryItem({ item, onDelete }: HistoryItemProps) {
1618

1719
function mouseEnter() {
1820
setHovering(true);
19-
2021
if (timeout) {
2122
clearTimeout(timeout);
2223
}
@@ -42,17 +43,33 @@ export function HistoryItem({ item, onDelete }: HistoryItemProps) {
4243
>
4344
<a href={`/chat/${item.urlId}`} className="flex w-full relative truncate block">
4445
{item.description}
45-
<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 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-45%">
46+
<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 to-transparent w-10 flex justify-end group-hover:w-32 group-hover:from-45%">
4647
{hovering && (
47-
<div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-item-contentDanger">
48+
<div className="flex items-center gap-1 p-1 text-bolt-elements-textSecondary">
49+
<button
50+
className="i-ph:pencil-simple scale-110 hover:text-bolt-elements-textPrimary"
51+
onClick={(event) => {
52+
event.preventDefault();
53+
onRename?.(event);
54+
}}
55+
title="Rename"
56+
/>
57+
<button
58+
className="i-ph:export scale-110 hover:text-bolt-elements-textPrimary"
59+
onClick={(event) => {
60+
event.preventDefault();
61+
onExport?.(event);
62+
}}
63+
title="Export as JSON"
64+
/>
4865
<Dialog.Trigger asChild>
4966
<button
50-
className="i-ph:trash scale-110"
67+
className="i-ph:trash scale-110 hover:text-bolt-elements-item-contentDanger"
5168
onClick={(event) => {
52-
// we prevent the default so we don't trigger the anchor above
5369
event.preventDefault();
5470
onDelete?.(event);
5571
}}
72+
title="Delete"
5673
/>
5774
</Dialog.Trigger>
5875
</div>

‎app/components/sidebar/Menu.client.tsx

Lines changed: 96 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { toast } from 'react-toastify';
44
import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog';
55
import { IconButton } from '~/components/ui/IconButton';
66
import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
7-
import { db, deleteById, getAll, chatId, type ChatHistoryItem } from '~/lib/persistence';
7+
import { db, deleteById, getAll, chatId, type ChatHistoryItem, setMessages } from '~/lib/persistence';
88
import { cubicEasingFn } from '~/utils/easings';
99
import { logger } from '~/utils/logger';
1010
import { HistoryItem } from './HistoryItem';
@@ -31,13 +31,17 @@ const menuVariants = {
3131
},
3232
} satisfies Variants;
3333

34-
type DialogContent = { type: 'delete'; item: ChatHistoryItem } | null;
34+
type DialogContent =
35+
| { type: 'delete'; item: ChatHistoryItem }
36+
| { type: 'rename'; item: ChatHistoryItem }
37+
| null;
3538

3639
export function Menu() {
3740
const menuRef = useRef<HTMLDivElement>(null);
3841
const [list, setList] = useState<ChatHistoryItem[]>([]);
3942
const [open, setOpen] = useState(false);
4043
const [dialogContent, setDialogContent] = useState<DialogContent>(null);
44+
const [newName, setNewName] = useState('');
4145

4246
const loadEntries = useCallback(() => {
4347
if (db) {
@@ -68,6 +72,43 @@ export function Menu() {
6872
}
6973
}, []);
7074

75+
const renameItem = useCallback(async (event: React.UIEvent, item: ChatHistoryItem, newDescription: string) => {
76+
event.preventDefault();
77+
78+
if (db) {
79+
try {
80+
await setMessages(db, item.id, item.messages, item.urlId, newDescription);
81+
loadEntries();
82+
toast.success('Chat renamed successfully');
83+
} catch (error) {
84+
toast.error('Failed to rename chat');
85+
logger.error(error);
86+
}
87+
}
88+
}, []);
89+
90+
const exportItem = useCallback((event: React.UIEvent, item: ChatHistoryItem) => {
91+
event.preventDefault();
92+
93+
const exportData = {
94+
description: item.description,
95+
messages: item.messages,
96+
timestamp: item.timestamp
97+
};
98+
99+
const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' });
100+
const url = URL.createObjectURL(blob);
101+
const a = document.createElement('a');
102+
a.href = url;
103+
a.download = `chat-${item.description || 'export'}.json`;
104+
document.body.appendChild(a);
105+
a.click();
106+
document.body.removeChild(a);
107+
URL.revokeObjectURL(url);
108+
109+
toast.success('Chat exported successfully');
110+
}, []);
111+
71112
const closeDialog = () => {
72113
setDialogContent(null);
73114
};
@@ -102,24 +143,16 @@ export function Menu() {
102143
return (
103144
<motion.div
104145
ref={menuRef}
105-
initial="closed"
106-
animate={open ? 'open' : 'closed'}
146+
className="fixed top-0 bottom-0 w-[300px] bg-bolt-elements-background-depth-2 border-r border-bolt-elements-borderColor z-sidebar"
107147
variants={menuVariants}
108-
className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-bolt-elements-background-depth-2 border-r rounded-r-3xl border-bolt-elements-borderColor z-sidebar shadow-xl shadow-bolt-elements-sidebar-dropdownShadow text-sm"
148+
animate={open ? 'open' : 'closed'}
149+
initial="closed"
109150
>
110-
<div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>
111-
<div className="flex-1 flex flex-col h-full w-full overflow-hidden">
112-
<div className="p-4">
113-
<a
114-
href="/"
115-
className="flex gap-2 items-center bg-bolt-elements-sidebar-buttonBackgroundDefault text-bolt-elements-sidebar-buttonText hover:bg-bolt-elements-sidebar-buttonBackgroundHover rounded-md p-2 transition-theme"
116-
>
117-
<span className="inline-block i-bolt:chat scale-110" />
118-
Start new chat
119-
</a>
151+
<div className="h-full flex flex-col">
152+
<div className="sticky top-0 z-1 bg-bolt-elements-background-depth-2 p-4 pt-12 flex justify-between items-center border-b border-bolt-elements-borderColor">
153+
<div className="text-bolt-elements-textPrimary font-medium">History</div>
120154
</div>
121-
<div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
122-
<div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
155+
<div className="flex-1 overflow-y-auto p-2 pb-16">
123156
{list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
124157
<DialogRoot open={dialogContent !== null}>
125158
{binDates(list).map(({ category, items }) => (
@@ -128,7 +161,16 @@ export function Menu() {
128161
{category}
129162
</div>
130163
{items.map((item) => (
131-
<HistoryItem key={item.id} item={item} onDelete={() => setDialogContent({ type: 'delete', item })} />
164+
<HistoryItem
165+
key={item.id}
166+
item={item}
167+
onDelete={() => setDialogContent({ type: 'delete', item })}
168+
onRename={() => {
169+
setNewName(item.description || '');
170+
setDialogContent({ type: 'rename', item });
171+
}}
172+
onExport={(event) => exportItem(event, item)}
173+
/>
132174
))}
133175
</div>
134176
))}
@@ -160,12 +202,45 @@ export function Menu() {
160202
</div>
161203
</>
162204
)}
205+
{dialogContent?.type === 'rename' && (
206+
<>
207+
<DialogTitle>Rename Chat</DialogTitle>
208+
<DialogDescription asChild>
209+
<div>
210+
<input
211+
type="text"
212+
value={newName}
213+
onChange={(e) => setNewName(e.target.value)}
214+
className="w-full p-2 mt-2 text-bolt-elements-textPrimary bg-bolt-elements-background-depth-1 border border-bolt-elements-borderColor rounded-md focus:outline-none focus:border-bolt-elements-borderColorFocus"
215+
placeholder="Enter new name"
216+
autoFocus
217+
/>
218+
</div>
219+
</DialogDescription>
220+
<div className="px-5 pb-4 bg-bolt-elements-background-depth-2 flex gap-2 justify-end">
221+
<DialogButton type="secondary" onClick={closeDialog}>
222+
Cancel
223+
</DialogButton>
224+
<DialogButton
225+
type="primary"
226+
onClick={(event) => {
227+
if (newName.trim()) {
228+
renameItem(event, dialogContent.item, newName.trim());
229+
closeDialog();
230+
}
231+
}}
232+
>
233+
Rename
234+
</DialogButton>
235+
</div>
236+
</>
237+
)}
163238
</Dialog>
164239
</DialogRoot>
165240
</div>
166-
<div className="flex items-center border-t border-bolt-elements-borderColor p-4">
167-
<ThemeSwitch className="ml-auto" />
168-
</div>
241+
</div>
242+
<div className="absolute bottom-4 right-4">
243+
<ThemeSwitch />
169244
</div>
170245
</motion.div>
171246
);

‎package-lock.json

Lines changed: 20 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)