🎉 first commit

app/components/header/Header.tsx

@@ -0,0 +1,58 @@
+import { useStore } from '@nanostores/react';
+import classNames from 'classnames';
+import { ClientOnly } from 'remix-utils/client-only';
+import { useAuth } from '~/lib/hooks';
+import { aiState } from '~/lib/stores/ai-state';
+import { HistorySwitch } from '../sidebar/HistorySwitch';
+import { ThemeSwitch } from '../ui/ThemeSwitch';
+import { ChatDescription } from './ChatDescription';
+import { HeaderActionButtons } from './HeaderActionButtons';
+import { MinimalAvatarDropdown } from './MinimalAvatarDropdown';
+
+export function Header() {
+  const { isAuthenticated } = useAuth();
+  const { chatStarted } = useStore(aiState);
+
+  return (
+    <>
+      <header
+        className={classNames(
+          'flex items-center justify-between px-3 py-2 gap-3 shrink-0 border-b h-[var(--header-height)]',
+          {
+            'border-transparent': !chatStarted,
+            'border-upage-elements-borderColor': chatStarted,
+          },
+        )}
+      >
+        <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
+          </a>
+          <div className="flex gap-1 ml-6">
+            {isAuthenticated && <HistorySwitch />}
+            <ThemeSwitch />
+          </div>
+        </div>
+
+        <div className="flex-1 px-4 truncate text-center text-upage-elements-textPrimary">
+          {chatStarted && <ClientOnly>{() => <ChatDescription />}</ClientOnly>}
+        </div>
+
+        <div className="flex items-center gap-2 justify-end">
+          {chatStarted && (
+            <>
+              <ClientOnly>
+                {() => (
+                  <div className="mr-1">
+                    <HeaderActionButtons />
+                  </div>
+                )}
+              </ClientOnly>
+            </>
+          )}
+          <MinimalAvatarDropdown />
+        </div>
+      </header>
+    </>
+  );
+}