refactor: add WIP

Author: mikesprague

app/components/ThemeChanger.tsx

@@ -22,6 +22,8 @@ export const ThemeChanger = () => {
   const setEditorTheme = useSetAtom(editorThemeAtom);
   const memoizedIcon = useMemo(() => <FontAwesomeIcon icon={faPalette} />, []);
 
+  console.log(theme);
+
   useEffect(() => {
     const details = [...document.querySelectorAll('details.dropdown')];
     const handleClickOutside = (event: MouseEvent) => {
@@ -43,14 +45,12 @@ export const ThemeChanger = () => {
       }
     };
     document.addEventListener('click', handleClickOutside);
-    return () => {
-      document.removeEventListener('click', handleClickOutside);
-    };
   }, []);
 
   const handleClick = useCallback(
     (e: MouseEvent<HTMLButtonElement>) => {
       const button = e.currentTarget;
+      console.log(button);
       setTheme(button.dataset.theme as string);
       setEditorTheme(getEditorTheme(button.dataset.theme as string));
     },
@@ -60,14 +60,14 @@ export const ThemeChanger = () => {
   const updateSelected = useCallback(() => {
     const selectedSVGs = document.querySelectorAll('svg.themeSelected');
     for (const svg of selectedSVGs) {
-      svg.classList.add('invisible');
+      svg.classList.add('hidden');
     }
     const buttons = document.querySelectorAll('button');
     for (const button of buttons) {
       if (button.getAttribute('data-theme') === theme) {
         const svg = button.querySelector('svg');
         if (svg) {
-          svg.classList.remove('invisible');
+          svg.classList.remove('hidden');
           svg.scrollIntoView({
             behavior: 'smooth',
             block: 'center',
@@ -107,7 +107,7 @@ export const ThemeChanger = () => {
                       height="16"
                       viewBox="0 0 24 24"
                       fill="currentColor"
-                      className="invisible w-3 h-3 shrink-0 themeSelected"
+                      className="hidden w-3 h-3 shrink-0 themeSelected"
                     >
                       <path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z" />
                     </svg>

app/components/UserAvatar.tsx

@@ -114,7 +114,7 @@ export const UserAvatar = memo(() => {
       <span className="hidden mr-2 text-sm lg:flex">{email}</span>
       <div className="dropdown dropdown-end bg-base-300">
         {/* biome-ignore lint/a11y/noLabelWithoutControl: <explanation> */}
-        <label tabIndex={0} className="avatar placeholder">
+        <label tabIndex={0} className="avatar avatar-placeholder">
           <div
             className={clsx(
               'rounded-full bg-primary text-primary-content cursor-pointer',

app/globals.css

@@ -0,0 +1,70 @@
+@import "tailwindcss";
+
+@plugin "daisyui" {
+  themes: night, autumn, light, dark, abyss, acid, aqua, black, bumblebee, business, caramellatte, cmyk, coffee, corporate, cupcake, cyberpunk, dim, dracula, emerald, fantasy, forest, garden, halloween, lemonade, lofi, luxury, nord, pastel, retro, silk, sunset, synthwave, valentine, winter, wireframe;
+};
+
+@plugin "daisyui/theme" {
+  name: cyberpunk;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+}
+
+@plugin "daisyui/theme" {
+  name: wireframe;
+  font-family: Chalkboard, "comic sans ms", sans-serif;
+}
+
+.page-wrapper {
+  min-height: 100vh;
+}
+
+.chat-bubble.prose > p {
+  margin-top: 0;
+  margin-bottom: calc(var(--spacing) * 3)
+}
+
+.chat-bubble.prose > p:last-of-type {
+  margin-bottom: 0;
+}
+
+div.chat-bubble > .clipboard-container:first-child,
+div.chat-bubble > .delete-container,
+div.chat-bubble > .reload-container {
+  margin-top: calc(var(--spacing) * -10);
+}
+
+.code-pre {
+  background-color: transparent;
+  margin-top: 0;
+  margin-bottom: calc(var(--spacing) * 2);
+  padding-block: 0;
+}
+
+.code-pre>div:last-of-type {
+  border-radius: var(--radius-md);
+  padding: calc(var(--spacing) * 1);
+}
+
+.menu ul > li div:hover, .menu ul > li span:hover {
+  background-color: transparent;
+}
+
+/* fix some display issue in bot chat bubbles in light mode */
+.chat-bubble.bot code,
+.chat-bubble.bot strong,
+.chat-bubble.bot blockquote,
+.chat-bubble.bot h1,
+.chat-bubble.bot h2,
+.chat-bubble.bot h3,
+.chat-bubble.bot h4,
+.chat-bubble.bot h5,
+.chat-bubble.bot ul,
+.chat-bubble.bot ol,
+.chat-bubble.bot li,
+.chat-bubble.bot li::marker {
+  color: var(--color-secondary-content);
+}
+
+.chat-footer.bot {
+  margin-top: calc(var(--spacing) * 1);
+}

app/globals.scss

@@ -1,5 +1,6 @@
 import type React from 'react';
-import './globals.scss';
+
+import './globals.css';
 
 import { Providers } from '@/app/providers';
 

app/layout.tsx

@@ -2,11 +2,17 @@ import { Provider } from 'jotai';
 import { ThemeProvider } from 'next-themes';
 import type React from 'react';
 
+import { themes } from '@/app/utils/themes';
+
 export const Providers = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <Provider>
-        <ThemeProvider attribute="data-theme" defaultTheme="dark">
+        <ThemeProvider
+          attribute="data-theme"
+          defaultTheme="dark"
+          themes={themes}
+        >
           {children}
         </ThemeProvider>
       </Provider>