feat (tasks/integrations): added new effect to tasks and integrations pages

Author: Kabeer2004

src/client/app/integrations/page.js

@@ -38,6 +38,7 @@ import {
 } from "@tabler/icons-react"
 import { cn } from "@utils/cn"
 import { usePostHog } from "posthog-js/react"
+import InteractiveNetworkBackground from "@components/ui/InteractiveNetworkBackground"
 import { motion, AnimatePresence } from "framer-motion"
 import {
 	MorphingDialog,
@@ -581,15 +582,15 @@ const IntegrationCard = ({ integration, icon: Icon }) => {
 		integration.connected || integration.auth_type === "builtin"
 
 	return (
-		<div className="bg-neutral-900/50 p-5 rounded-xl transition-all duration-300 border border-neutral-800/70 hover:border-brand-orange hover:-translate-y-1 flex flex-col text-left h-full">
+		<div className="bg-neutral-900/50 p-4 sm:p-5 rounded-xl transition-all duration-300 border border-neutral-800/70 hover:border-brand-orange hover:-translate-y-1 flex flex-col text-left h-full">
 			{/* Top Section */}
 			<div className="flex items-start justify-between mb-4">
 				<div className="flex items-center gap-3">
 					<div className="w-10 h-10 flex items-center justify-center rounded-lg bg-brand-gray p-1.5 text-brand-orange">
 						<Icon className="w-full h-full" />
 					</div>
 					<div>
-						<h3 className="font-semibold text-white text-lg">
+						<h3 className="font-semibold text-white text-base sm:text-lg">
 							{integration.display_name}
 						</h3>
 						<span
@@ -942,16 +943,23 @@ const IntegrationsPage = () => {
 	}, [allIntegrations, searchQuery, activeCategory])
 
 	return (
-		<div className="flex-1 flex h-screen bg-dark-surface text-white overflow-x-hidden">
+		<div className="flex-1 flex h-screen text-white overflow-x-hidden">
 			<Tooltip
 				id="page-help-tooltip"
 				place="right-start"
 				style={{ zIndex: 9999 }}
 			/>
 			<SparkleEffect trigger={sparkleTrigger} />
-			<div className="flex-1 flex flex-col overflow-hidden relative bg-dark-surface md:pl-20 pb-16 md:pb-0">
+			<div
+				className={cn(
+					"flex-1 flex flex-col overflow-hidden relative w-full md:pl-20 pb-16 md:pb-0"
+				)}
+			>
+				<div className="absolute inset-0 z-[-1] network-grid-background">
+					<InteractiveNetworkBackground />
+				</div>
 				<div className="absolute -top-[250px] left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-orange/10 rounded-full blur-3xl -z-10" />
-				<header className="flex items-center justify-between p-4 sm:p-6 md:px-8 md:py-6 bg-dark-surface border-b border-[var(--color-primary-surface)] shrink-0">
+				<header className="flex items-center justify-between p-4 sm:p-6 md:px-8 md:py-6 bg-transparent border-b border-[var(--color-primary-surface)] shrink-0">
 					<HelpTooltip content="Connect your apps here. This allows Sentient to access information and perform actions on your behalf." />
 					<div>
 						<h1 className="text-3xl lg:text-4xl font-bold text-white">
@@ -1054,13 +1062,13 @@ const IntegrationsPage = () => {
 																		<MorphingDialogContainer>
 																			<MorphingDialogContent className="pointer-events-auto relative flex h-auto w-full flex-col overflow-hidden border border-neutral-700 bg-neutral-900 sm:w-[600px] rounded-2xl">
 																				<BorderTrail className="bg-brand-orange" />
-																				<div className="p-6 overflow-y-auto custom-scrollbar">
+																				<div className="p-4 sm:p-6 overflow-y-auto custom-scrollbar">
 																					<div className="flex items-center gap-4 mb-4">
 																						<div className="w-10 h-10 flex items-center justify-center rounded-lg bg-brand-gray p-1.5 text-brand-orange">
 																							<Icon className="w-full h-full" />
 																						</div>
 																						<div>
-																							<MorphingDialogTitle className="text-2xl font-bold text-white">
+																							<MorphingDialogTitle className="text-xl sm:text-2xl font-bold text-white">
 																								{
 																									integration.display_name
 																								}
@@ -1073,7 +1081,7 @@ const IntegrationsPage = () => {
 																						</div>
 																					</div>
 																					<MorphingDialogDescription>
-																						<p className="text-neutral-300 mb-6">
+																						<p className="text-sm sm:text-base text-neutral-300 mb-6">
 																							{
 																								integration.description
 																							}

src/client/app/tasks/page.js

@@ -22,6 +22,7 @@ import ListView from "@components/tasks/ListView"
 import CalendarView from "@components/tasks/CalendarView"
 import WelcomePanel from "@components/tasks/WelcomePanel"
 import CreateTaskInput from "@components/tasks/CreateTaskInput"
+import InteractiveNetworkBackground from "@components/ui/InteractiveNetworkBackground"
 import DayDetailView from "@components/tasks/DayDetailView"
 
 function TasksPageContent() {
@@ -264,7 +265,10 @@ function TasksPageContent() {
 				place="right"
 				style={{ zIndex: 9999 }}
 			/>
-			<div className="flex-1 flex flex-col md:flex-row ml-2 gap-x-2 overflow-hidden">
+			<div className="flex-1 flex flex-col md:flex-row ml-2 gap-x-2 overflow-hidden relative">
+				<div className="absolute inset-0 z-[-1] network-grid-background">
+					<InteractiveNetworkBackground />
+				</div>
 				{/* Main Content Panel */}
 				<main className="flex-1 flex flex-col overflow-hidden relative">
 					<div className="absolute -top-[250px] left-1/2 -translate-x-1/2 w-[800px] h-[500px] bg-brand-orange/10 rounded-full blur-3xl -z-10" />
@@ -323,7 +327,7 @@ function TasksPageContent() {
 				</main>
 
 				{/* Right Details Panel */}
-				<aside className="w-full md:w-[450px] lg:w-[500px] bg-brand-black border-l border-brand-gray flex-shrink-0 flex flex-col">
+				<aside className="w-full md:w-[450px] lg:w-[500px] bg-brand-black/50 backdrop-blur-sm border-l border-brand-gray flex-shrink-0 flex flex-col">
 					<AnimatePresence mode="wait">
 						{rightPanelContent.type === "task" &&
 						rightPanelContent.data ? (

src/client/components/tasks/CalendarView.js

@@ -49,7 +49,7 @@ const CalendarDayCell = ({
 			variants={cellVariants}
 			className={cn(
 				"border-r border-b border-neutral-800 p-2 flex flex-col gap-1 overflow-hidden relative min-h-[120px] rounded-lg",
-				!isCurrentMonth && "bg-brand-black text-neutral-600",
+				!isCurrentMonth && "bg-neutral-900/50 text-neutral-600",
 				isSelected
 					? "bg-brand-orange/90 text-brand-black font-bold hover:bg-brand-orange"
 					: "hover:bg-neutral-800/70"

src/client/components/tasks/ListView.js

@@ -58,7 +58,7 @@ const ListView = ({
 	}
 
 	return (
-		<div className="p-6 space-y-4 overflow-y-auto custom-scrollbar h-full bg-brand-black/50 backdrop-blur-sm rounded-xl border border-zinc-700/50">
+		<div className="p-6 space-y-4 overflow-y-auto custom-scrollbar h-full bg-transparent rounded-xl">
 			<div className="relative">
 				<IconSearch
 					className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"

src/client/components/tasks/TaskCardList.js

@@ -51,7 +51,7 @@ const TaskCardList = ({ task, onSelectTask }) => {
 			variants={cardVariants}
 			exit={{ opacity: 0, transition: { duration: 0.1 } }}
 			onClick={() => onSelectTask(task)}
-			className="bg-brand-black p-4 rounded-lg border border-zinc-700 hover:border-brand-orange transition-all cursor-pointer relative"
+			className="bg-neutral-900/50 p-4 rounded-lg border border-zinc-700 hover:border-brand-orange transition-all cursor-pointer relative"
 		>
 			<div className="flex justify-between items-start gap-4">
 				<p className="font-sans font-semibold text-brand-white flex-1 text-sm">

src/client/components/ui/InteractiveNetworkBackground.js

@@ -0,0 +1,122 @@
+// src/client/components/ui/InteractiveNetworkBackground.js
+"use client"
+import React, { useRef, useEffect } from "react"
+import { cn } from "@utils/cn"
+
+const InteractiveNetworkBackground = ({ className }) => {
+	const canvasRef = useRef(null)
+
+	useEffect(() => {
+		const canvas = canvasRef.current
+		if (!canvas) return
+
+		const ctx = canvas.getContext("2d")
+		let animationFrameId
+		let time = 0
+
+		// Disable on mobile for performance
+		if (window.innerWidth < 768) {
+			return
+		}
+
+		const setup = () => {
+			canvas.width = window.innerWidth
+			canvas.height = window.innerHeight
+		}
+
+		const particles = []
+		const particleCount = 150
+		const connectionDistance = 150
+
+		class Particle {
+			constructor() {
+				this.x = Math.random() * canvas.width
+				this.y = Math.random() * canvas.height
+				this.vx = (Math.random() - 0.5) * 0.5
+				this.vy = (Math.random() - 0.5) * 0.5
+				this.radius = 1.5
+				this.pulseOffset = Math.random() * Math.PI * 2
+			}
+
+			update() {
+				if (this.x < 0 || this.x > canvas.width) this.vx *= -1
+				if (this.y < 0 || this.y > canvas.height) this.vy *= -1
+				this.x += this.vx
+				this.y += this.vy
+			}
+
+			draw() {
+				const pulseRadius =
+					this.radius + Math.sin(time * 0.05 + this.pulseOffset) * 0.5
+				ctx.beginPath()
+				ctx.arc(this.x, this.y, pulseRadius, 0, Math.PI * 2)
+				ctx.fillStyle = "rgba(241, 162, 29, 0.5)"
+				ctx.fill()
+			}
+		}
+
+		const init = () => {
+			particles.length = 0
+			for (let i = 0; i < particleCount; i++) {
+				particles.push(new Particle())
+			}
+		}
+
+		const animate = () => {
+			time++
+			ctx.clearRect(0, 0, canvas.width, canvas.height)
+			particles.forEach((p) => {
+				p.update()
+				p.draw()
+			})
+			connect()
+			animationFrameId = requestAnimationFrame(animate)
+		}
+
+		const connect = () => {
+			for (let i = 0; i < particles.length; i++) {
+				for (let j = i + 1; j < particles.length; j++) {
+					const distance = Math.sqrt(
+						Math.pow(particles[i].x - particles[j].x, 2) +
+							Math.pow(particles[i].y - particles[j].y, 2)
+					)
+					if (distance < connectionDistance) {
+						const opacity = 1 - distance / connectionDistance
+						ctx.strokeStyle = `rgba(241, 162, 29, ${opacity})`
+						ctx.lineWidth = 0.7
+						ctx.beginPath()
+						ctx.moveTo(particles[i].x, particles[i].y)
+						ctx.lineTo(particles[j].x, particles[j].y)
+						ctx.stroke()
+					}
+				}
+			}
+		}
+
+		const handleResize = () => {
+			setup()
+			init()
+		}
+
+		setup()
+		init()
+		animate()
+
+		window.addEventListener("resize", handleResize)
+
+		return () => {
+			window.removeEventListener("resize", handleResize)
+			cancelAnimationFrame(animationFrameId)
+		}
+	}, [])
+
+	return (
+		<canvas
+			ref={canvasRef}
+			className={cn("absolute inset-0 z-[-1] opacity-30", className)}
+			aria-hidden="true"
+		/>
+	)
+}
+
+export default InteractiveNetworkBackground

src/client/components/ui/morphing-dialog.js

@@ -190,7 +190,7 @@ function MorphingDialogContainer({ children }) {
 						animate={{ opacity: 1 }}
 						exit={{ opacity: 0 }}
 					/>
-					<div className="fixed inset-0 z-50 flex items-center justify-center">
+					<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
 						{children}
 					</div>
 				</>

src/client/styles/globals.css

@@ -120,3 +120,16 @@ button,
 .sparkle-on-complete {
 	animation: sparkle 1.5s ease-in-out;
 }
+
+.network-grid-background {
+	background-color: var(--color-primary-background); /* Or #000000 */
+	background-image:
+		linear-gradient(rgba(241, 162, 29, 0.05) 1px, transparent 1px),
+		linear-gradient(to right, rgba(241, 162, 29, 0.05) 1px, transparent 1px);
+	background-size: 40px 40px;
+	mask-image: radial-gradient(
+		ellipse 100% 80% at 50% 50%,
+		black,
+		transparent 95%
+	);
+}