From 018eead3c46ceda71161580831baefef4e3247ee Mon Sep 17 00:00:00 2001 From: Urjit Chakraborty <135136842+urjitc@users.noreply.github.com> Date: Sat, 17 Jan 2026 21:34:40 -0500 Subject: [PATCH 01/10] feat: add new home page components and layout - Create HomeContent component with hero section, featured workspaces, and workspace grid - Add HomePromptInput with typewriter animation for cycling placeholders - Add FeaturedWorkspaces carousel with current research topics - Add WorkspaceGrid component extracted from NoWorkspaceSelected - Create HomeLayout for simplified home page layout (sidebar + content only) - Remove panels, chat, and workspace state hooks from home route --- src/components/home/FeaturedWorkspaces.tsx | 170 +++++++++++++++++ src/components/home/HomeContent.tsx | 33 ++++ src/components/home/HomePromptInput.tsx | 212 +++++++++++++++++++++ src/components/home/WorkspaceGrid.tsx | 135 +++++++++++++ src/components/layout/HomeLayout.tsx | 57 ++++++ 5 files changed, 607 insertions(+) create mode 100644 src/components/home/FeaturedWorkspaces.tsx create mode 100644 src/components/home/HomeContent.tsx create mode 100644 src/components/home/HomePromptInput.tsx create mode 100644 src/components/home/WorkspaceGrid.tsx create mode 100644 src/components/layout/HomeLayout.tsx diff --git a/src/components/home/FeaturedWorkspaces.tsx b/src/components/home/FeaturedWorkspaces.tsx new file mode 100644 index 00000000..55510ea5 --- /dev/null +++ b/src/components/home/FeaturedWorkspaces.tsx @@ -0,0 +1,170 @@ +"use client"; + +import { ChevronLeft, ChevronRight } from "lucide-react"; +import { Button } from "@/components/ui/button"; +import { cn } from "@/lib/utils"; +import { useEffect, useRef, useState } from "react"; +import { toast } from "sonner"; + +// Featured workspace templates with current topics +const FEATURED_WORKSPACES = [ + { + id: "featured-1", + name: "AI & Machine Learning", + description: "Explore GPT, LLMs, and AI trends", + color: "hsl(217, 91%, 60%)", + }, + { + id: "featured-2", + name: "Climate Science", + description: "Study climate change and solutions", + color: "hsl(142, 76%, 36%)", + }, + { + id: "featured-3", + name: "Web3 & Blockchain", + description: "Learn crypto, DeFi, and NFTs", + color: "hsl(280, 100%, 70%)", + }, + { + id: "featured-4", + name: "Quantum Computing", + description: "Understand quantum mechanics", + color: "hsl(24, 95%, 53%)", + }, + { + id: "featured-5", + name: "Space Exploration", + description: "Mars missions and astronomy", + color: "hsl(200, 100%, 50%)", + }, + { + id: "featured-6", + name: "Neuroscience", + description: "Brain science and cognition", + color: "hsl(320, 70%, 60%)", + }, + { + id: "featured-7", + name: "Sustainable Energy", + description: "Solar, wind, and green tech", + color: "hsl(120, 60%, 45%)", + }, + { + id: "featured-8", + name: "Biotechnology", + description: "CRISPR, gene therapy, and more", + color: "hsl(15, 85%, 55%)", + }, +]; + +export function FeaturedWorkspaces() { + const scrollRef = useRef(null); + const [canScrollLeft, setCanScrollLeft] = useState(false); + const [canScrollRight, setCanScrollRight] = useState(true); + + const checkScrollability = () => { + if (!scrollRef.current) return; + const { scrollLeft, scrollWidth, clientWidth } = scrollRef.current; + setCanScrollLeft(scrollLeft > 0); + setCanScrollRight(scrollLeft < scrollWidth - clientWidth - 10); + }; + + useEffect(() => { + checkScrollability(); + // Check on window resize + window.addEventListener("resize", checkScrollability); + return () => window.removeEventListener("resize", checkScrollability); + }, []); + + const scroll = (direction: "left" | "right") => { + if (!scrollRef.current) return; + const scrollAmount = scrollRef.current.clientWidth * 0.8; + scrollRef.current.scrollBy({ + left: direction === "left" ? -scrollAmount : scrollAmount, + behavior: "smooth", + }); + }; + + return ( +
+
+

Featured workspaces

+
+ + +
+
+ +
+ {FEATURED_WORKSPACES.map((workspace) => ( +
{ + toast.info("Coming soon", { + description: `Template workspace "${workspace.name}" will be available soon!`, + }); + }} + className={cn( + "flex-shrink-0 w-64 px-6 py-8 rounded-md border border-sidebar-border/50 backdrop-blur-sm", + "hover:border-primary/40 hover:shadow-lg hover:shadow-primary/5", + "transition-all duration-300 cursor-pointer", + "flex flex-col items-start justify-between", + "aspect-[3.5/1]" + )} + style={{ + backgroundColor: `${workspace.color}08`, + }} + > +
+
+
+
+
+

+ {workspace.name} +

+

{workspace.description}

+
+
+
+ ))} +
+
+ ); +} diff --git a/src/components/home/HomeContent.tsx b/src/components/home/HomeContent.tsx new file mode 100644 index 00000000..3f2c298f --- /dev/null +++ b/src/components/home/HomeContent.tsx @@ -0,0 +1,33 @@ +"use client"; + +import { HomePromptInput } from "./HomePromptInput"; +import { FeaturedWorkspaces } from "./FeaturedWorkspaces"; +import { WorkspaceGrid } from "./WorkspaceGrid"; + +export function HomeContent() { + return ( +
+ {/* Main content area */} +
+ {/* Hero Section */} +
+

+ What's on your mind? +

+
+ +
+
+ + {/* Content Sections */} +
+ {/* Featured Workspaces */} + + + {/* Your Workspaces */} + +
+
+
+ ); +} diff --git a/src/components/home/HomePromptInput.tsx b/src/components/home/HomePromptInput.tsx new file mode 100644 index 00000000..7b44dfbd --- /dev/null +++ b/src/components/home/HomePromptInput.tsx @@ -0,0 +1,212 @@ +"use client"; + +import { useState, useRef } from "react"; +import { toast } from "sonner"; +import { ArrowUp, Paperclip } from "lucide-react"; +import { cn } from "@/lib/utils"; +import { Button } from "@/components/ui/button"; +import { Textarea } from "@/components/ui/textarea"; +import Typewriter from "typewriter-effect"; + +const PLACEHOLDER_OPTIONS = [ + "climate change impacts", + "quantum computing applications", + "neural network architectures", + "CRISPR gene editing", + "renewable energy systems", + "machine learning ethics", + "space exploration missions", + "biotechnology advances", + "sustainable agriculture", + "artificial intelligence safety", + "blockchain technology", + "cancer immunotherapy", + "ocean acidification", + "renewable energy storage", + "autonomous vehicles", + "precision medicine", + "carbon capture technology", + "synthetic biology", + "quantum cryptography", + "fusion energy research", +]; + +const baseText = "Create a workspace for "; +const typewriterStrings = PLACEHOLDER_OPTIONS.map(option => baseText + option); + +export function HomePromptInput() { + const [value, setValue] = useState(""); + const fileInputRef = useRef(null); + const typewriterRef = useRef(null); + + // Handle user typing - stop animation + const handleInput = (e: React.ChangeEvent) => { + const newValue = e.target.value; + setValue(newValue); + + if (newValue.length > 0 && typewriterRef.current) { + // Stop and clear typewriter when user types + typewriterRef.current.stop(); + typewriterRef.current.deleteAll(1); + } else if (newValue.length === 0 && typewriterRef.current) { + // Restart typewriter when input is cleared + typewriterRef.current.start(); + } + }; + + const handleFileUpload = () => { + fileInputRef.current?.click(); + }; + + const handleFileChange = (e: React.ChangeEvent) => { + const files = e.target.files; + if (!files || files.length === 0) return; + + toast.info("Coming soon", { + description: "File upload for workspace creation will be available soon!", + }); + + if (fileInputRef.current) { + fileInputRef.current.value = ""; + } + }; + + const handleSubmit = (e: React.FormEvent) => { + e.preventDefault(); + if (!value.trim()) return; + + toast.info("Coming soon", { + description: "Workspace creation from prompts will be available soon!", + }); + + setValue(""); + if (typewriterRef.current) { + typewriterRef.current.start(); + } + }; + + return ( +
+
+ {/* Hidden file input */} + + + {/* Textarea */} +
+ {/* File upload button - inside on the left */} + + +