From ac932fefeec3d6e4ed3f70ddc889b19b83344b83 Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 3 Mar 2025 14:25:51 -0700
Subject: [PATCH] home page

---
 .../app/app/(primary_layout)/home/page.tsx    |  8 +++-
 .../features/sidebars/SidebarPrimary.tsx      |  4 +-
 web/src/components/ui/buttons/Button.tsx      |  4 +-
 .../components/ui/inputs/InputTextArea.tsx    | 28 ++++++++++---
 .../ui/inputs/InputTextAreaButton.tsx         | 20 ++++++---
 .../ui/layouts/AppPageLayoutContent.tsx       |  2 +-
 .../ui/layouts/AppPageLayoutHeader.tsx        | 15 ++++---
 .../components/ui/typography/Paragraph.tsx    |  2 +-
 web/src/components/ui/typography/Title.tsx    | 10 ++---
 .../HomePage/HomePageController.tsx           | 41 +++++++++++++++++++
 .../controllers/HomePage/HomePageHeader.tsx   |  5 +++
 web/src/controllers/HomePage/NewChatInput.tsx | 40 ++++++++++++++++++
 web/src/controllers/HomePage/index.ts         |  2 +
 13 files changed, 153 insertions(+), 28 deletions(-)
 create mode 100644 web/src/controllers/HomePage/HomePageController.tsx
 create mode 100644 web/src/controllers/HomePage/HomePageHeader.tsx
 create mode 100644 web/src/controllers/HomePage/NewChatInput.tsx
 create mode 100644 web/src/controllers/HomePage/index.ts

diff --git a/web/src/app/app/(primary_layout)/home/page.tsx b/web/src/app/app/(primary_layout)/home/page.tsx
index f9618f18c..29aad9259 100644
--- a/web/src/app/app/(primary_layout)/home/page.tsx
+++ b/web/src/app/app/(primary_layout)/home/page.tsx
@@ -1,5 +1,11 @@
+import { AppPageLayout } from '@/components/ui';
 import React from 'react';
+import { HomePageController, HomePageHeader } from '@/controllers/HomePage';
 
 export default function HomePage() {
-  return <div>HomePage TODO:</div>;
+  return (
+    <AppPageLayout header={<HomePageHeader />}>
+      <HomePageController />
+    </AppPageLayout>
+  );
 }
diff --git a/web/src/components/features/sidebars/SidebarPrimary.tsx b/web/src/components/features/sidebars/SidebarPrimary.tsx
index f29a51b97..031418928 100644
--- a/web/src/components/features/sidebars/SidebarPrimary.tsx
+++ b/web/src/components/features/sidebars/SidebarPrimary.tsx
@@ -150,12 +150,12 @@ const SidebarPrimaryHeader = React.memo(() => {
           </Link>
         </Tooltip>
         <Tooltip title="Start a chat">
-          <Link href={createBusterRoute({ route: BusterRoutes.SETTINGS_PROFILE })}>
+          <Link href={createBusterRoute({ route: BusterRoutes.APP_HOME })}>
             <Button
               size="tall"
               rounding={'large'}
               prefix={
-                <div className="translate-x-[0px] translate-y-[-1px]">
+                <div className="flex items-center justify-center">
                   <PencilSquareIcon />
                 </div>
               }
diff --git a/web/src/components/ui/buttons/Button.tsx b/web/src/components/ui/buttons/Button.tsx
index cef20ea8f..7f2f57c5e 100644
--- a/web/src/components/ui/buttons/Button.tsx
+++ b/web/src/components/ui/buttons/Button.tsx
@@ -7,7 +7,7 @@ import { CircleSpinnerLoader } from '../loaders/CircleSpinnerLoader';
 export const buttonTypeClasses = {
   default:
     'bg-background border hover:bg-item-hover disabled:bg-disabled disabled:text-gray-light active:bg-item-active data-[selected=true]:bg-item-select',
-  black: 'bg-black text-white hover:bg-foreground-hover disabled:bg-black/30',
+  black: 'bg-black text-white hover:bg-foreground-hover disabled:bg-black/60',
   primary:
     'bg-primary text-white hover:bg-primary-light active:bg-primary-dark data-[selected=true]:bg-primary-dark',
   ghost:
@@ -36,7 +36,7 @@ const sizeVariants = {
 };
 
 export const buttonVariants = cva(
-  'inline-flex items-center overflow-hidden text-base justify-center gap-[5px] shadow rounded transition-all duration-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed data-[loading=true]:cursor-progress',
+  'inline-flex items-center overflow-hidden text-base justify-center gap-[5px] shadow rounded transition-all duration-300 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed data-[loading=true]:cursor-progress',
   {
     variants: {
       variant: buttonTypeClasses,
diff --git a/web/src/components/ui/inputs/InputTextArea.tsx b/web/src/components/ui/inputs/InputTextArea.tsx
index 356f86e7a..8745f57eb 100644
--- a/web/src/components/ui/inputs/InputTextArea.tsx
+++ b/web/src/components/ui/inputs/InputTextArea.tsx
@@ -41,7 +41,16 @@ export interface InputTextAreaProps
 
 export const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(
   (
-    { className, variant = 'default', autoResize, style, rows = 1, rounding = 'default', ...props },
+    {
+      className,
+      variant = 'default',
+      autoResize,
+      style,
+      rows = 1,
+      rounding = 'default',
+      onPressMetaEnter,
+      ...props
+    },
     ref
   ) => {
     const textareaRef = useRef<HTMLTextAreaElement | null>(null);
@@ -84,7 +93,7 @@ export const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextArea
 
     const adjustHeight = useMemoizedFn(() => {
       const textarea = textareaRef.current;
-      if (!textarea || !autoResize) return;
+      if (!textarea || !autoResize || textarea.value === '') return;
 
       const minHeight = calculateMinHeight();
       if (!minHeight) return;
@@ -93,14 +102,14 @@ export const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextArea
 
       const computedStyle = window.getComputedStyle(textarea);
       const lineHeight =
-        parseFloat(computedStyle.lineHeight) || parseFloat(computedStyle.fontSize) * 1.2;
+        parseFloat(computedStyle.lineHeight) || parseFloat(computedStyle.fontSize) * 1.3;
       const { top, bottom } = getPaddingValues();
       const maxHeight = autoResize.maxRows
         ? autoResize.maxRows * lineHeight + top + bottom
         : Infinity;
 
       const scrollHeight = Math.max(textarea.scrollHeight, minHeight);
-      const newHeight = Math.min(scrollHeight, maxHeight) + 3;
+      const newHeight = Math.min(scrollHeight, maxHeight);
 
       textarea.style.height = `${newHeight}px`;
       textarea.style.overflowY = scrollHeight > maxHeight ? 'auto' : 'hidden';
@@ -110,6 +119,14 @@ export const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextArea
       requestAnimationFrame(adjustHeight);
     });
 
+    const handleKeyDown = useMemoizedFn((e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+      if (e.key === 'Enter' && (e.metaKey || e.ctrlKey)) {
+        e.preventDefault();
+        onPressMetaEnter?.(e);
+      }
+      props.onKeyDown?.(e);
+    });
+
     useEffect(() => {
       const textarea = textareaRef.current;
       if (!textarea || !autoResize) return;
@@ -138,10 +155,11 @@ export const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextArea
           inputTextAreaVariants({ variant }),
           textAreaVariants({ rounding }),
           'px-2.5 py-2.5',
-          autoResize && 'resize-none',
+          autoResize && 'resize-none!',
           className
         )}
         rows={autoResize ? 1 : rows}
+        onKeyDown={handleKeyDown}
         {...props}
       />
     );
diff --git a/web/src/components/ui/inputs/InputTextAreaButton.tsx b/web/src/components/ui/inputs/InputTextAreaButton.tsx
index 028f897db..29170c802 100644
--- a/web/src/components/ui/inputs/InputTextAreaButton.tsx
+++ b/web/src/components/ui/inputs/InputTextAreaButton.tsx
@@ -8,12 +8,12 @@ import { ShapeSquare } from '../icons/NucleoIconFilled';
 import { useMemoizedFn } from 'ahooks';
 
 const inputTextAreaButtonVariants = cva(
-  'relative flex w-full items-center overflow-hidden rounded border border-border transition-all duration-200',
+  'relative flex w-full items-center overflow-hidden rounded-xl border border-border transition-all duration-200',
   {
     variants: {
       variant: {
         default:
-          'has-[textarea:hover]:border-foreground has-[textarea:focus]:border-foreground has-[textarea:disabled]:border-border'
+          'has-[textarea:hover]:border-foreground shadow has-[textarea:focus]:border-foreground has-[textarea:disabled]:border-border'
       }
     }
   }
@@ -25,6 +25,7 @@ export interface InputTextAreaButtonProps extends Omit<InputTextAreaProps, 'vari
   loading?: boolean;
   onSubmit: (text: string) => void;
   variant?: 'default';
+  disabledSubmit?: boolean;
 }
 
 export const InputTextAreaButton: React.FC<InputTextAreaButtonProps> = ({
@@ -36,6 +37,7 @@ export const InputTextAreaButton: React.FC<InputTextAreaButtonProps> = ({
   loading = false,
   onSubmit,
   variant = 'default',
+  disabledSubmit,
   ...props
 }) => {
   const textRef = useRef<HTMLTextAreaElement>(null);
@@ -52,12 +54,20 @@ export const InputTextAreaButton: React.FC<InputTextAreaButtonProps> = ({
   });
 
   return (
-    <div className={cn(inputTextAreaButtonVariants(), loading && 'border-border!', className)}>
+    <div
+      className={cn(
+        inputTextAreaButtonVariants({ variant }),
+        loading && 'border-border!',
+        className
+      )}>
       <InputTextArea
         ref={textRef}
         disabled={disabled || loading}
         variant="ghost"
-        className={cn('w-full pr-10 align-middle leading-[1.2]', loading && '!cursor-default')}
+        className={cn(
+          'leading-1.3 w-full px-5! py-4! pr-10 align-middle',
+          loading && '!cursor-default'
+        )}
         autoResize={autoResize}
         rounding="xl"
         onPressMetaEnter={onPressMetaEnter}
@@ -66,7 +76,7 @@ export const InputTextAreaButton: React.FC<InputTextAreaButtonProps> = ({
 
       <div className="absolute right-2 bottom-2">
         <SubmitButton
-          disabled={disabled}
+          disabled={disabled || disabledSubmit}
           loading={loading}
           sendIcon={sendIcon}
           loadingIcon={loadingIcon}
diff --git a/web/src/components/ui/layouts/AppPageLayoutContent.tsx b/web/src/components/ui/layouts/AppPageLayoutContent.tsx
index 08b5b39f9..c071768f6 100644
--- a/web/src/components/ui/layouts/AppPageLayoutContent.tsx
+++ b/web/src/components/ui/layouts/AppPageLayoutContent.tsx
@@ -11,7 +11,7 @@ export const AppPageLayoutContent: React.FC<
     <main
       className={cn(
         'app-content-page',
-        'bg-background app-content h-full max-h-[100%] overflow-hidden p-0',
+        'bg-page-background app-content h-full max-h-[100%] overflow-hidden p-0',
         scrollable && 'overflow-y-auto',
         className
       )}>
diff --git a/web/src/components/ui/layouts/AppPageLayoutHeader.tsx b/web/src/components/ui/layouts/AppPageLayoutHeader.tsx
index 104bd1ac6..2adb9968b 100644
--- a/web/src/components/ui/layouts/AppPageLayoutHeader.tsx
+++ b/web/src/components/ui/layouts/AppPageLayoutHeader.tsx
@@ -2,14 +2,17 @@ import { cn } from '@/lib/utils';
 import React from 'react';
 import { cva, type VariantProps } from 'class-variance-authority';
 
-const headerVariants = cva('bg-background flex max-h-[38px] min-h-[38px] items-center border-b', {
-  variants: {
-    variant: {
-      default: 'px-4.5',
-      list: 'px-7.5'
+const headerVariants = cva(
+  'bg-page-background flex max-h-[38px] min-h-[38px] items-center justify-between gap-x-2.5 border-b',
+  {
+    variants: {
+      variant: {
+        default: 'px-4.5',
+        list: 'px-7.5'
+      }
     }
   }
-});
+);
 
 export const AppPageLayoutHeader: React.FC<
   React.PropsWithChildren<
diff --git a/web/src/components/ui/typography/Paragraph.tsx b/web/src/components/ui/typography/Paragraph.tsx
index cf13b9cb7..f9c20ed35 100644
--- a/web/src/components/ui/typography/Paragraph.tsx
+++ b/web/src/components/ui/typography/Paragraph.tsx
@@ -15,7 +15,7 @@ const paragraphVariants = cva('', {
     lineHeight: {
       none: 'leading-[1]!',
       sm: 'leading-[1.2]!',
-      base: 'leading-[1.3]!',
+      base: 'leading-1.3!',
       md: 'leading-[1.4]!',
       lg: 'leading-[1.5]!'
     }
diff --git a/web/src/components/ui/typography/Title.tsx b/web/src/components/ui/typography/Title.tsx
index 0dc5e7a5b..22fea44c3 100644
--- a/web/src/components/ui/typography/Title.tsx
+++ b/web/src/components/ui/typography/Title.tsx
@@ -6,11 +6,11 @@ import { textColorVariants } from './variants';
 const titleVariants = cva('', {
   variants: {
     size: {
-      h1: 'text-3xl',
-      h2: 'text-2xl',
-      h3: 'text-xl',
-      h4: 'text-lg',
-      h5: 'text-md'
+      h1: 'text-4xl font-normal! ',
+      h2: 'text-2xl font-normal!',
+      h3: 'text-xl font-normal!',
+      h4: 'text-lg font-normal!',
+      h5: 'text-md font-normal!'
     },
     truncate: {
       true: 'truncate',
diff --git a/web/src/controllers/HomePage/HomePageController.tsx b/web/src/controllers/HomePage/HomePageController.tsx
new file mode 100644
index 000000000..c66ec9d22
--- /dev/null
+++ b/web/src/controllers/HomePage/HomePageController.tsx
@@ -0,0 +1,41 @@
+'use client';
+
+import React, { useMemo } from 'react';
+import { Title } from '@/components/ui/typography';
+import { useUserConfigContextSelector } from '@/context/Users';
+import { NewChatInput } from './NewChatInput';
+
+export const HomePageController: React.FC<{}> = () => {
+  const user = useUserConfigContextSelector((state) => state.user);
+  const userName = user?.name;
+
+  const isMorning = useMemo(() => {
+    const now = new Date();
+    const hours = now.getHours();
+    return hours < 12;
+  }, []);
+
+  const greeting = useMemo(() => {
+    if (isMorning) {
+      return `Good morning, ${userName}`;
+    }
+    return `Good afternoon, ${userName}`;
+  }, [userName]);
+
+  return (
+    <div className="flex flex-col items-center justify-center p-4.5">
+      <div className="mt-[150px] flex w-full max-w-[650px] flex-col space-y-6">
+        <div className="flex flex-col justify-center gap-y-2.5 text-center">
+          <Title as="h1" className="mb-0!">
+            {greeting}
+          </Title>
+          <Title as="h2" variant={'secondary'} className="mb-0! text-4xl!">
+            How can I help you today?
+          </Title>
+        </div>
+
+        <NewChatInput />
+      </div>
+    </div>
+  );
+};
diff --git a/web/src/controllers/HomePage/HomePageHeader.tsx b/web/src/controllers/HomePage/HomePageHeader.tsx
new file mode 100644
index 000000000..8418892ba
--- /dev/null
+++ b/web/src/controllers/HomePage/HomePageHeader.tsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+export const HomePageHeader: React.FC<{}> = () => {
+  return <div>Home</div>;
+};
diff --git a/web/src/controllers/HomePage/NewChatInput.tsx b/web/src/controllers/HomePage/NewChatInput.tsx
new file mode 100644
index 000000000..8666b8f13
--- /dev/null
+++ b/web/src/controllers/HomePage/NewChatInput.tsx
@@ -0,0 +1,40 @@
+'use client';
+
+import { InputTextAreaButton } from '@/components/ui/inputs/InputTextAreaButton';
+import { useBusterNewChatContextSelector } from '@/context/Chats';
+import { inputHasText } from '@/lib/text';
+import { useMemoizedFn } from 'ahooks';
+import { ChangeEvent, useMemo, useState } from 'react';
+
+const autoResizeConfig = {
+  minRows: 3,
+  maxRows: 18
+};
+
+export const NewChatInput: React.FC<{}> = () => {
+  const onStartNewChat = useBusterNewChatContextSelector((state) => state.onStartNewChat);
+  const [inputValue, setInputValue] = useState('');
+
+  const disabledSubmit = useMemo(() => {
+    return !inputHasText(inputValue);
+  }, [inputValue]);
+
+  const onSubmit = useMemoizedFn((value: string) => {
+    onStartNewChat({ prompt: value });
+  });
+
+  const onChange = useMemoizedFn((e: ChangeEvent<HTMLTextAreaElement>) => {
+    setInputValue(e.target.value);
+  });
+
+  return (
+    <InputTextAreaButton
+      placeholder="Ask Buster a question..."
+      autoResize={autoResizeConfig}
+      onSubmit={onSubmit}
+      onChange={onChange}
+      autoFocus
+      disabledSubmit={disabledSubmit}
+    />
+  );
+};
diff --git a/web/src/controllers/HomePage/index.ts b/web/src/controllers/HomePage/index.ts
new file mode 100644
index 000000000..779cb40a5
--- /dev/null
+++ b/web/src/controllers/HomePage/index.ts
@@ -0,0 +1,2 @@
+export * from './HomePageController';
+export * from './HomePageHeader';