feat: implement light and dark theme (#30)
This commit is contained in:
Dominic Elm
@@ -53,18 +53,18 @@ export function HistoryItem({ item, loadEntries }: { item: ChatHistory; loadEntr
|
||||
return (
|
||||
<div
|
||||
ref={hoverRef}
|
||||
className="group rounded-md hover:bg-gray-100 overflow-hidden flex justify-between items-center px-2 py-1"
|
||||
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">
|
||||
{item.description}
|
||||
<div className="absolute right-0 z-1 top-0 bottom-0 bg-gradient-to-l from-white group-hover:from-gray-100 to-transparent w-10 flex justify-end group-hover:w-15 group-hover:from-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%">
|
||||
{hovering && (
|
||||
<div className="flex items-center p-1">
|
||||
<div className="flex items-center p-1 text-bolt-elements-textSecondary hover:text-bolt-elements-textPrimary">
|
||||
{requestingDelete ? (
|
||||
<button className="i-ph:check text-gray-600 hover:text-gray-1000 scale-110" onClick={deleteItem} />
|
||||
<button className="i-ph:check scale-110" onClick={deleteItem} />
|
||||
) : (
|
||||
<button
|
||||
className="i-ph:trash text-gray-600 hover:text-gray-1000 scale-110"
|
||||
className="i-ph:trash scale-110"
|
||||
onClick={(event) => {
|
||||
event.preventDefault();
|
||||
setRequestingDelete(true);
|
||||
|
||||
@@ -2,6 +2,7 @@ import { motion, type Variants } from 'framer-motion';
|
||||
import { useCallback, useEffect, useRef, useState } from 'react';
|
||||
import { toast } from 'react-toastify';
|
||||
import { IconButton } from '~/components/ui/IconButton';
|
||||
import { ThemeSwitch } from '~/components/ui/ThemeSwitch';
|
||||
import { db, getAll, type ChatHistory } from '~/lib/persistence';
|
||||
import { cubicEasingFn } from '~/utils/easings';
|
||||
import { HistoryItem } from './HistoryItem';
|
||||
@@ -10,6 +11,7 @@ import { binDates } from './date-binning';
|
||||
const menuVariants = {
|
||||
closed: {
|
||||
opacity: 0,
|
||||
visibility: 'hidden',
|
||||
left: '-150px',
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
@@ -18,6 +20,7 @@ const menuVariants = {
|
||||
},
|
||||
open: {
|
||||
opacity: 1,
|
||||
visibility: 'initial',
|
||||
left: 0,
|
||||
transition: {
|
||||
duration: 0.2,
|
||||
@@ -47,21 +50,22 @@ export function Menu() {
|
||||
}, [open]);
|
||||
|
||||
useEffect(() => {
|
||||
const enterThreshold = 80;
|
||||
const exitThreshold = 40;
|
||||
|
||||
function onMouseMove(event: MouseEvent) {
|
||||
if (event.pageX < 80) {
|
||||
if (event.pageX < enterThreshold) {
|
||||
setOpen(true);
|
||||
}
|
||||
|
||||
if (menuRef.current && event.clientX > menuRef.current.getBoundingClientRect().right + exitThreshold) {
|
||||
setOpen(false);
|
||||
}
|
||||
}
|
||||
|
||||
function onMouseLeave(_event: MouseEvent) {
|
||||
setOpen(false);
|
||||
}
|
||||
|
||||
menuRef.current?.addEventListener('mouseleave', onMouseLeave);
|
||||
window.addEventListener('mousemove', onMouseMove);
|
||||
|
||||
return () => {
|
||||
menuRef.current?.removeEventListener('mouseleave', onMouseLeave);
|
||||
window.removeEventListener('mousemove', onMouseMove);
|
||||
};
|
||||
}, []);
|
||||
@@ -72,34 +76,34 @@ export function Menu() {
|
||||
initial="closed"
|
||||
animate={open ? 'open' : 'closed'}
|
||||
variants={menuVariants}
|
||||
className="flex flex-col side-menu fixed top-0 w-[350px] h-full bg-white border-r rounded-r-3xl border-gray-200 z-max shadow-xl text-sm"
|
||||
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"
|
||||
>
|
||||
<div className="flex items-center p-4 h-[var(--header-height)]">
|
||||
<img src="/logo_text.svg" width="60px" alt="Bolt Logo" />
|
||||
</div>
|
||||
<div className="flex items-center h-[var(--header-height)]">{/* Placeholder */}</div>
|
||||
<div className="flex-1 flex flex-col h-full w-full overflow-hidden">
|
||||
<div className="p-4">
|
||||
<a
|
||||
href="/"
|
||||
className="flex gap-2 items-center text-accent-600 rounded-md bg-accent-600/12 hover:bg-accent-600/15 p-2 font-medium"
|
||||
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"
|
||||
>
|
||||
<span className="inline-block i-blitz:chat scale-110" />
|
||||
<span className="inline-block i-bolt:chat scale-110" />
|
||||
Start new chat
|
||||
</a>
|
||||
</div>
|
||||
<div className="font-semibold pl-6 pr-5 my-2">Your Chats</div>
|
||||
<div className="text-bolt-elements-textPrimary font-medium pl-6 pr-5 my-2">Your Chats</div>
|
||||
<div className="flex-1 overflow-scroll pl-4 pr-5 pb-5">
|
||||
{list.length === 0 && <div className="pl-2 text-gray">No previous conversations</div>}
|
||||
{list.length === 0 && <div className="pl-2 text-bolt-elements-textTertiary">No previous conversations</div>}
|
||||
{binDates(list).map(({ category, items }) => (
|
||||
<div key={category} className="mt-4 first:mt-0 space-y-1">
|
||||
<div className="text-gray sticky top-0 z-20 bg-white pl-2 pt-2 pb-1">{category}</div>
|
||||
<div className="text-bolt-elements-textTertiary sticky top-0 z-1 bg-bolt-elements-background-depth-2 pl-2 pt-2 pb-1">
|
||||
{category}
|
||||
</div>
|
||||
{items.map((item) => (
|
||||
<HistoryItem key={item.id} item={item} loadEntries={loadEntries} />
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex items-center border-t p-4">
|
||||
<div className="flex items-center border-t border-bolt-elements-borderColor p-4">
|
||||
<a href="/logout">
|
||||
<IconButton className="p-1.5 gap-1.5">
|
||||
<>
|
||||
@@ -107,6 +111,7 @@ export function Menu() {
|
||||
</>
|
||||
</IconButton>
|
||||
</a>
|
||||
<ThemeSwitch className="ml-auto" />
|
||||
</div>
|
||||
</div>
|
||||
</motion.div>
|
||||
|
||||
Reference in New Issue
Block a user