small-changes

autogpt_platform/frontend/src/app/agents/page.tsx

@@ -0,0 +1,15 @@
+import LibraryActionHeader from "@/components/agptui/composite/LibraryActionHeader";
+
+const LibraryPage = () => {
+  return (
+    <main className="p-4">
+      {/* Top section - includes notification, search and uploading mechansim */}
+      <LibraryActionHeader />
+
+      {/* Last section for Agent Lists, Agent counter and filter */}
+      <div></div>
+    </main>
+  );
+};
+
+export default LibraryPage;

autogpt_platform/frontend/src/app/globals.css

@@ -120,3 +120,8 @@
     @apply shadow-sm focus-visible:shadow-md;
   }
 }
+
+.scroll-none {
+  scrollbar-width: thin; /* For Firefox (sets a thin scrollbar) */
+  scrollbar-color: transparent transparent; /* For Firefox (thumb and track colors) */
+}

autogpt_platform/frontend/src/app/layout.tsx

@@ -21,6 +21,12 @@ const poppins = Poppins({
   variable: "--font-poppins",
 });
 
+const poppins = Poppins({
+  subsets: ["latin"],
+  weight: ["400", "500", "600", "700"],
+  variable: "--font-poppins",
+});
+
 export const metadata: Metadata = {
   title: "NextGen AutoGPT",
   description: "Your one stop shop to creating AI Agents",

autogpt_platform/frontend/src/components/agptui/Button.tsx

@@ -20,6 +20,9 @@ const buttonVariants = cva(
         ghost:
           "hover:bg-neutral-100 text-[#272727] dark:text-neutral-100 dark:hover:bg-neutral-700",
         link: "text-[#272727] underline-offset-4 hover:underline dark:text-neutral-100",
+        library_outline:
+          "rounded-[52px] hover:bg-[#262626] border border-zinc-700 hover:text-white",
+        library_primary: "rounded-[52px] bg-[#262626] text-white",
       },
       size: {
         default:
@@ -29,6 +32,7 @@ const buttonVariants = cva(
         primary:
           "h-10 w-28 sm:h-12 sm:w-32 md:h-[4.375rem] md:w-[11rem] lg:h-[3.125rem] lg:w-[7rem]",
         icon: "h-10 w-10 sm:h-12 sm:w-12 md:h-14 md:w-14 lg:h-[4.375rem] lg:w-[4.375rem]",
+        library: "py-2 px-[14px] h-10 text-[14px] font-medium leading-6 ",
       },
     },
     defaultVariants: {
@@ -48,8 +52,11 @@ export interface ButtonProps
     | "outline"
     | "secondary"
     | "ghost"
-    | "link";
-  size?: "default" | "sm" | "lg" | "primary" | "icon";
+    | "link"
+    | "library_outline"
+    | "library_primary";
+
+  size?: "default" | "sm" | "lg" | "primary" | "icon" | "library";
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(

autogpt_platform/frontend/src/components/agptui/LibraryNotificationDropdown.tsx

@@ -0,0 +1,109 @@
+"use client";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@/components/ui/dropdown-menu";
+import { Button } from "./Button";
+import { BellIcon, X } from "lucide-react";
+import { motion, useAnimationControls } from "framer-motion";
+import { useState } from "react";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "../ui/card";
+
+export const LibraryNotificationDropdown = () => {
+  const controls = useAnimationControls();
+  const [open, setOpen] = useState(false);
+
+  const handleHoverStart = () => {
+    controls.start({
+      rotate: [0, -10, 10, -10, 10, 0],
+      transition: { duration: 0.5 },
+    });
+  };
+  return (
+    <DropdownMenu open={open} onOpenChange={setOpen}>
+      <DropdownMenuTrigger asChild>
+        <Button
+          variant={open ? "library_primary" : "library_outline"}
+          size="library"
+          onMouseEnter={handleHoverStart}
+          onMouseLeave={handleHoverStart}
+          className="w-[161px]"
+        >
+          <motion.div animate={controls}>
+            <BellIcon className="mr-2 h-5 w-5" strokeWidth={2} />
+          </motion.div>
+          Your updates
+          <span className="ml-2 text-[14px]">2</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent className="scroll-none relative left-[16px] h-[80vh] w-fit overflow-y-auto rounded-[26px] bg-[#a1a1aa]/60 p-5">
+        <DropdownMenuLabel className="mb-4 font-sans text-[18px] text-white">
+          Agent run updates
+        </DropdownMenuLabel>
+        <button
+          className="absolute right-[10px] top-[20px] h-fit w-fit"
+          onClick={() => setOpen(false)}
+        >
+          <X className="h-6 w-6 text-white hover:text-white/60" />
+        </button>
+        <DropdownMenuItem>
+          <LibraryNotificationCard />
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <LibraryNotificationCard />
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <LibraryNotificationCard />
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+};
+
+const LibraryNotificationCard = () => {
+  return (
+    <Card className="w-[424px] rounded-[14px] border border-neutral-100 p-[16px] pt-[12px]">
+      <CardHeader>
+        <CardTitle>Latest Agent Updates</CardTitle>
+        <CardDescription>View your latest workflow changes</CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <div className="space-y-4">
+          <div className="flex items-center gap-4">
+            <div className="h-10 w-10 rounded-full bg-neutral-100" />
+            <div>
+              <p className="font-medium">Agent Run #1234</p>
+              <p className="text-sm text-neutral-500">Updated 2 hours ago</p>
+            </div>
+          </div>
+
+          <div className="flex items-center gap-4">
+            <div className="h-10 w-10 rounded-full bg-neutral-100" />
+            <div>
+              <p className="font-medium">Workflow Changes</p>
+              <p className="text-sm text-neutral-500">3 new changes detected</p>
+            </div>
+          </div>
+        </div>
+      </CardContent>
+
+      <CardFooter>
+        <Button variant="outline" className="w-full">
+          View All Updates
+        </Button>
+      </CardFooter>
+    </Card>
+  );
+};

autogpt_platform/frontend/src/components/agptui/composite/LibraryActionHeader.tsx

@@ -0,0 +1,26 @@
+import { LibraryNotificationDropdown } from "../LibraryNotificationDropdown";
+
+const LibraryActionHeader: React.FC = () => {
+  return (
+    <div className="flex w-screen items-center justify-between px-4 pt-6">
+      <LibraryNotificationDropdown />
+      <LibrarySearchBar />
+      <LibraryUploadAgent />
+    </div>
+  );
+};
+
+const LibrarySearchBar = () => {
+  return (
+    <div>
+      SearchBar
+      {/* Search bar content */}
+    </div>
+  );
+};
+
+const LibraryUploadAgent = () => {
+  return <div>Uploading Agent</div>;
+};
+
+export default LibraryActionHeader;

autogpt_platform/frontend/src/components/ui/dropdown-menu.tsx

@@ -88,7 +88,7 @@ const DropdownMenuItem = React.forwardRef<
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-pointer select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
       inset && "pl-8",
       className,
     )}