ui improvements

apps/web/src/app/(routes)/inbox/page.tsx

@@ -6,8 +6,8 @@ import { Suspense } from "react";
 
 export default function Inbox() {
   return (
-    <section className="h-full pt-2 pl-2 pr-4">
-      <div className="w-full rounded-lg bg-white min-h-[200px] md:min-h-min overflow-hidden">
+    <section className="pt-2 pl-2 pr-4">
+      <div className="w-full rounded-lg bg-white shadow-sm h-[calc(100vh-80px)] overflow-auto border border-gray-100">
         <ErrorBoundary
           fallback={<div>Error loading inbox. Please try again later.</div>}
         >

apps/web/src/app/(routes)/layout.tsx

@@ -1,21 +1,27 @@
 import { AssistantModal } from "@/components/assistant-ui/assistant-modal";
 import { AppSidebar } from "@/components/sidebar/app-sidebar";
-import { SidebarProvider, SidebarTrigger } from "@/components/ui/sidebar";
+import {
+  SidebarInset,
+  SidebarProvider,
+  SidebarTrigger,
+} from "@/components/ui/sidebar";
 import { Toaster } from "@/components/ui/sonner";
 
 export default function Layout({ children }: { children: React.ReactNode }) {
   return (
     <SidebarProvider>
       <AppSidebar />
-      <main className="w-full bg-[#F2F2F2]">
-        <div className="h-12 border-b bg-white flex items-center px-4 gap-3">
-          <SidebarTrigger />
-          <h1 className="font-medium text-base">Today</h1>
-        </div>
-        <div className="container">{children}</div>
-        <AssistantModal />
-        <Toaster />
-      </main>
+      <SidebarInset>
+        <main className="w-full bg-[#F2F2F2]">
+          <div className="h-12 border-b bg-white flex items-center px-4 gap-3">
+            <SidebarTrigger />
+            <h1 className="font-medium text-base">Today</h1>
+          </div>
+          <div className="container">{children}</div>
+          <AssistantModal />
+          <Toaster />
+        </main>
+      </SidebarInset>
     </SidebarProvider>
   );
 }

apps/web/src/components/assistant-ui/assistant-modal.tsx

@@ -11,14 +11,14 @@ import { TooltipIconButton } from "@/components/assistant-ui/tooltip-icon-button
 export const AssistantModal: FC = () => {
   return (
     <AssistantModalPrimitive.Root>
-      <AssistantModalPrimitive.Anchor className="fixed bottom-4 right-4 size-9">
+      <AssistantModalPrimitive.Anchor className="fixed bottom-4 right-4 size-9 z-[9999]">
         <AssistantModalPrimitive.Trigger asChild>
           <AssistantModalButton />
         </AssistantModalPrimitive.Trigger>
       </AssistantModalPrimitive.Anchor>
       <AssistantModalPrimitive.Content
         sideOffset={16}
-        className="bg-popover text-popover-foreground z-50 h-[600px] w-[500px] overflow-clip rounded-xl border p-0 shadow-md outline-none [&>.aui-thread-root]:bg-inherit data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out data-[state=open]:zoom-in data-[state=open]:slide-in-from-bottom-1/2 data-[state=open]:slide-in-from-right-1/2 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=closed]:slide-out-to-right-1/2"
+        className="bg-popover text-popover-foreground z-[9999] h-[600px] w-[500px] overflow-clip rounded-xl border p-0 shadow-md outline-none [&>.aui-thread-root]:bg-inherit data-[state=closed]:animate-out data-[state=open]:animate-in data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out data-[state=open]:zoom-in data-[state=open]:slide-in-from-bottom-1/2 data-[state=open]:slide-in-from-right-1/2 data-[state=closed]:slide-out-to-bottom-1/2 data-[state=closed]:slide-out-to-right-1/2"
       >
         <Thread />
       </AssistantModalPrimitive.Content>

apps/web/src/components/blocks/list/list-items.tsx

@@ -34,31 +34,38 @@ export function ListItems() {
               checked: item.isCompleted,
             }}
           >
-            <div className="flex items-center w-full p-2 rounded-lg hover:bg-gray-50 transition-colors">
-              <div className="flex items-center space-x-3 w-full">
-                <Checkbox
-                  id={`item-${item._id}`}
-                  className="h-[18px] w-[18px]"
-                  checked={item.isCompleted}
-                  onCheckedChange={() => {
-                    updateObject({
-                      _id: item._id,
-                      isCompleted: !item.isCompleted,
-                    });
-                  }}
-                />
+            <div className="flex items-center w-full py-2 px-0 rounded-md hover:bg-gray-50 transition-colors">
+              <div className="flex items-center gap-3 w-full">
+                <div
+                  className="flex items-center justify-center"
+                  style={{ width: "18px" }}
+                >
+                  <Checkbox
+                    id={`item-${item._id}`}
+                    className="h-[18px] w-[18px] border-gray-300"
+                    checked={item.isCompleted}
+                    onCheckedChange={() => {
+                      updateObject({
+                        _id: item._id,
+                        isCompleted: !item.isCompleted,
+                      });
+                    }}
+                  />
+                </div>
                 <label
                   htmlFor={`item-${item._id}`}
                   className={cn(
                     "text-sm cursor-pointer select-none",
-                    item.isCompleted && "text-gray-500 line-through"
+                    item.isCompleted
+                      ? "text-gray-400 line-through"
+                      : "text-gray-700"
                   )}
                 >
                   {item.title}
                 </label>
               </div>
             </div>
-            <Separator className="last:hidden opacity-30" />
+            <Separator className="last:hidden opacity-20" />
           </SortableItem>
         ))}
       </div>

apps/web/src/components/blocks/list/list.tsx

@@ -2,7 +2,6 @@
 
 import InputBox from "@/components/input/input-box";
 import { ListItems } from "./list-items";
-import { Separator } from "@/components/ui/separator";
 import { BlockProvider } from "@/contexts/block-context";
 import { useCreateObject } from "@/hooks/use-objects";
 import { CreateObject } from "@/types/objects";
@@ -22,18 +21,17 @@ export default function ListBlock({ header, arrayType }: Props) {
   return (
     <div className="w-full max-w-2xl mx-auto -mt-1">
       <BlockProvider arrayType={arrayType}>
-        <header className="mb-3">
+        <header className="pt-3 pb-2 mb-2 px-3">
           <h1 className="font-semibold text-xl text-gray-900">{header}</h1>
         </header>
-        <section className="space-y-3">
+        <section className="space-y-3 px-3">
           <InputBox
             className="w-full"
             onSubmit={handleSubmit}
             arrayType={arrayType}
           />
-          <Separator className="my-2" />
         </section>
-        <section className="pt-2">
+        <section className="pt-1 px-3">
           <ListItems />
         </section>
       </BlockProvider>

apps/web/src/components/input/input-box.tsx

@@ -1,10 +1,10 @@
 "use client";
 
 import { Input } from "../ui/input";
-import { Plus } from "lucide-react";
+import { Checkbox } from "../ui/checkbox";
 import { cn } from "@/lib/utils";
 import { CreateObject } from "@/types/objects";
-import React from "react";
+import React, { useState } from "react";
 
 interface InputBoxProps {
   className?: string;
@@ -17,6 +17,8 @@ export default function InputBox({
   onSubmit,
   arrayType,
 }: InputBoxProps) {
+  const [isFocused, setIsFocused] = useState(false);
+
   const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
     e.preventDefault();
     const form = e.target as HTMLFormElement;
@@ -32,20 +34,37 @@ export default function InputBox({
     }
 
     form.reset();
+    setIsFocused(false);
   };
 
   return (
     <form onSubmit={handleSubmit} className="relative">
-      <Plus className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
-      <Input
-        name="todo"
-        placeholder="Add new todo here"
-        className={cn(
-          "bg-gray-100 border-none pl-10",
-          "focus-visible:ring-0 focus:outline-none focus:bg-gray-50 transition-colors",
-          className
-        )}
-      />
+      <div className={cn(
+        "flex items-center gap-3 px-0 py-2 rounded-md",
+        isFocused ? "bg-gray-100" : "bg-transparent",
+        "transition-colors"
+      )}>
+        <div className="flex items-center justify-center" style={{ width: '18px' }}>
+          <Checkbox className="h-[18px] w-[18px] opacity-40" />
+        </div>
+        <Input
+          name="todo"
+          placeholder="Add object"
+          className={cn(
+            "border-none shadow-none p-0 h-auto",
+            "focus-visible:ring-0 focus:outline-none",
+            "bg-transparent text-sm placeholder:text-gray-400",
+            className
+          )}
+          onFocus={() => setIsFocused(true)}
+          onBlur={(e) => {
+            // Only set to false if the form is not being submitted
+            if (e.relatedTarget?.tagName !== 'BUTTON') {
+              setIsFocused(false);
+            }
+          }}
+        />
+      </div>
     </form>
   );
 }

apps/web/src/components/sidebar/app-sidebar.tsx

@@ -33,7 +33,6 @@ export function AppSidebar() {
             <SidebarGroupLabel>Arrays</SidebarGroupLabel>
           </div>
           <SidebarGroupContent>
-            <SidebarGroupLabel>arrays</SidebarGroupLabel>
             <SidebarMenu>
               <SidebarMenuItem>
                 <SidebarMenuButton asChild>

apps/web/src/components/wrappers/grid-wrapper.tsx

@@ -21,7 +21,7 @@ const GridWrapper: React.FC<GridWrapperProps> = ({
     <div className="grid auto-cols-[minmax(0,1fr)] grid-flow-col w-full h-full gap-3">
       {React.Children.map(children, (child, index) =>
         index < maxChildren ? (
-          <div className="rounded-lg p-4 bg-white min-h-[200px] md:min-h-min overflow-hidden">
+          <div className="rounded-lg bg-white min-h-[200px] max-h-[calc(100vh-80px)] overflow-auto shadow-sm border border-gray-100">
             {child}
           </div>
         ) : null