feat: add upage logo

app/components/header/Header.tsx

@@ -1,8 +1,10 @@
 import { useStore } from '@nanostores/react';
 import classNames from 'classnames';
+import { useMemo } from 'react';
 import { ClientOnly } from 'remix-utils/client-only';
 import { useAuth } from '~/lib/hooks';
 import { aiState } from '~/lib/stores/ai-state';
+import { themeStore } from '~/lib/stores/theme';
 import { HistorySwitch } from '../sidebar/HistorySwitch';
 import { ThemeSwitch } from '../ui/ThemeSwitch';
 import { ChatDescription } from './ChatDescription.client';
@@ -12,6 +14,8 @@ import { MinimalAvatarDropdown } from './MinimalAvatarDropdown';
 export function Header() {
   const { isAuthenticated } = useAuth();
   const { chatStarted } = useStore(aiState);
+  const theme = useStore(themeStore);
+  const logoSrc = useMemo(() => (theme === 'dark' ? '/logo-dark.png' : '/logo.png'), [theme]);
 
   return (
     <>
@@ -26,9 +30,11 @@ export function Header() {
       >
         <div className="flex items-center gap-2 z-logo text-upage-elements-textPrimary cursor-pointer">
           <a href="/" className="text-xl font-semibold text-accent flex items-center">
-            UPage
+            <picture>
+              <img src={logoSrc} alt="UPage Logo" className="h-6" />
+            </picture>
           </a>
-          <div className="flex gap-1 ml-6">
+          <div className="flex gap-1">
             {isAuthenticated && <HistorySwitch />}
             <ThemeSwitch />
           </div>