Skip to content

Commit 7ea7903

Browse files
itsskofficialitsskofficial
committed
feat (tasks): tasks page frontend updates, border trail effect, abstract blurred shapes, etc
1 parent 12c2ac8 commit 7ea7903

File tree

9 files changed

+63
-52
lines changed

9 files changed

+63
-52
lines changed

‎src/client/app/integrations/page.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -831,7 +831,7 @@ const IntegrationsPage = () => {
831831
duration: 0.3
832832
}}
833833
>
834-
<MorphingDialogTrigger className="bg-gradient-to-br from-neutral-900 to-neutral-800/60 p-5 rounded-xl shadow-lg transition-all duration-300 border border-neutral-800/70 hover:border-sentient-blue/30 hover:-translate-y-1 flex flex-col group text-left h-full">
834+
<MorphingDialogTrigger className="bg-gradient-to-br from-neutral-900 to-neutral-800/60 p-5 rounded-xl shadow-lg transition-all duration-300 border border-neutral-800/70 hover:border-brand-orange/30 hover:-translate-y-1 flex flex-col group text-left h-full">
835835
<div className="flex items-start justify-between mb-4">
836836
{React.createElement(
837837
integration.icon,

‎src/client/app/tasks/page.js‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -258,16 +258,17 @@ function TasksPageContent() {
258258
}, [oneTimeTasks, recurringInstances, searchQuery])
259259

260260
return (
261-
<div className="flex-1 flex h-screen bg-brand-black text-white overflow-hidden md:pl-20">
261+
<div className="flex-1 flex h-screen text-white overflow-hidden md:pl-20">
262262
<Tooltip
263263
id="tasks-tooltip"
264264
place="right"
265265
style={{ zIndex: 9999 }}
266266
/>
267-
<div className="flex-1 flex flex-col md:flex-row ml-2 gap-x-2 overflow-hidden bg-brand-black">
267+
<div className="flex-1 flex flex-col md:flex-row ml-2 gap-x-2 overflow-hidden">
268268
{/* Main Content Panel */}
269269
<main className="flex-1 flex flex-col overflow-hidden relative">
270-
<header className="p-6 flex-shrink-0 flex items-center justify-between bg-brand-black">
270+
<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" />
271+
<header className="p-6 flex-shrink-0 flex items-center justify-between bg-transparent">
271272
<h1 className="text-3xl font-bold text-white">Tasks</h1>
272273
<div className="absolute top-6 left-1/2 -translate-x-1/2">
273274
<TaskViewSwitcher view={view} setView={setView} />

‎src/client/components/tasks/ApprovalCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ const ApprovalCard = ({
3838
initial={{ opacity: 0, y: 10 }}
3939
animate={{ opacity: 1, y: 0 }}
4040
exit={{ opacity: 0, x: -20 }}
41-
className="bg-dark-surface/70 p-3 rounded-lg border border-dark-surface-elevated hover:border-sentient-blue/50 transition-colors"
41+
className="bg-dark-surface/70 p-3 rounded-lg border border-dark-surface-elevated hover:border-brand-orange/50 transition-colors"
4242
>
4343
<div onClick={() => onViewDetails(task)} className="cursor-pointer">
4444
<p className="font-medium text-sm text-white mb-2">

‎src/client/components/tasks/CalendarView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@ const CalendarView = ({ tasks, onSelectTask, onDayClick, onShowMoreClick }) => {
123123
}
124124

125125
return (
126-
<div className="p-4 h-full flex flex-col bg-brand-black rounded-xl border border-zinc-700">
126+
<div className="p-4 h-full flex flex-col bg-brand-black/50 backdrop-blur-sm rounded-xl border border-zinc-700/50">
127127
<header className="flex items-center justify-between mb-4">
128128
<h2 className="text-lg font-sans font-semibold text-white">
129129
{format(currentMonth, "MMMM yyyy")}

‎src/client/components/tasks/ClarificationCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ const ClarificationCard = ({ task, onAnswerClarifications }) => {
3939
initial={{ opacity: 0, y: 10 }}
4040
animate={{ opacity: 1, y: 0 }}
4141
exit={{ opacity: 0, x: -20 }}
42-
className="bg-dark-surface/70 p-4 rounded-lg space-y-3 border border-dark-surface-elevated hover:border-sentient-blue/50 transition-colors"
42+
className="bg-dark-surface/70 p-4 rounded-lg space-y-3 border border-dark-surface-elevated hover:border-brand-orange/50 transition-colors"
4343
>
4444
<p className="font-medium text-sm text-white">{task.description}</p>
4545
<div className="space-y-2">

‎src/client/components/tasks/CreateTaskInput.js‎

Lines changed: 50 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
"use client"
22
import React, { useState, useRef, useEffect } from "react"
3-
import { IconPlus, IconLoader, IconSend } from "@tabler/icons-react"
3+
import { IconLoader, IconSend } from "@tabler/icons-react"
44
import { cn } from "@utils/cn"
5+
import { BorderTrail } from "@components/ui/border-trail"
56
import { TextLoop } from "@components/ui/TextLoop"
67
import toast from "react-hot-toast"
78

@@ -14,7 +15,7 @@ const CreateTaskInput = ({ onTaskAdded, prompt, setPrompt }) => {
1415
if (textarea) {
1516
textarea.style.height = "auto"
1617
const scrollHeight = textarea.scrollHeight
17-
textarea.style.height = `${scrollHeight > 120 ? 120 : scrollHeight}px`
18+
textarea.style.height = `${Math.min(Math.max(scrollHeight, 20), 100)}px`
1819
}
1920
}, [prompt])
2021

@@ -44,50 +45,59 @@ const CreateTaskInput = ({ onTaskAdded, prompt, setPrompt }) => {
4445
}
4546

4647
return (
47-
<div className="p-4 flex-shrink-0 bg-brand-black">
48+
<div className="p-4 flex-shrink-0 bg-transparent">
4849
<div
4950
className={cn(
50-
"relative flex items-end bg-brand-gray rounded-xl p-1 transition-all border border-transparent focus-within:border-brand-orange"
51+
"relative flex items-end bg-brand-black rounded-full p-1 transition-all overflow-hidden"
5152
)}
5253
>
53-
<textarea
54-
ref={textareaRef}
55-
value={prompt}
56-
onChange={(e) => setPrompt(e.target.value)}
57-
onKeyDown={(e) => {
58-
if (e.key === "Enter" && !e.shiftKey) {
59-
e.preventDefault()
60-
handleAddTask()
61-
}
62-
}}
63-
placeholder=" "
64-
className="w-full bg-transparent text-white placeholder-transparent resize-none focus:ring-0 focus:outline-none p-2 custom-scrollbar text-sm"
65-
rows={1}
66-
style={{ maxHeight: "120px" }}
67-
/>
68-
{!prompt && (
69-
<div className="absolute top-1/2 left-3 -translate-y-1/2 text-neutral-500 pointer-events-none">
70-
<TextLoop className="text-sm">
71-
<span>Create a task...</span>
72-
<span>Summarize my unread emails from today</span>
73-
<span>
74-
Draft a follow-up to the project proposal
75-
</span>
76-
<span>Schedule a meeting with the design team</span>
77-
</TextLoop>
78-
</div>
79-
)}
80-
<button
81-
onClick={handleAddTask}
82-
disabled={isSaving || !prompt.trim()}
83-
className="p-2.5 bg-brand-orange rounded-lg text-brand-black disabled:opacity-50 hover:bg-opacity-80 transition-colors"
54+
<BorderTrail size={100} className="bg-brand-orange px-4" />
55+
<div
56+
className={cn(
57+
"relative flex gap-2 items-end bg-transparent p-1 transition-all w-full"
58+
)}
8459
>
85-
{isSaving ? (
86-
<IconLoader size={18} className="animate-spin" />
87-
) : (
88-
<IconSend size={18} />
60+
<textarea
61+
ref={textareaRef}
62+
value={prompt}
63+
onChange={(e) => setPrompt(e.target.value)}
64+
onKeyDown={(e) => {
65+
if (e.key === "Enter" && !e.shiftKey) {
66+
e.preventDefault()
67+
handleAddTask()
68+
}
69+
}}
70+
placeholder=" "
71+
className="w-full rounded-l-full bg-transparent text-white placeholder-transparent border-1 border-brand-orange focus:ring-0 focus:ring-brand-black text-sm z-10 overflow-y-auto"
72+
/>
73+
{!prompt && (
74+
<div className="absolute top-1/2 left-4 -translate-y-1/2 text-neutral-500 pointer-events-none z-0">
75+
<TextLoop className="text-sm px-2">
76+
<span>Create a task...</span>
77+
<span>
78+
Summarize my unread emails from today
79+
</span>
80+
<span>
81+
Draft a follow-up to the project proposal
82+
</span>
83+
<span>
84+
Schedule a meeting with the design team
85+
</span>
86+
</TextLoop>
87+
</div>
8988
)}
90-
</button>
89+
<button
90+
onClick={handleAddTask}
91+
disabled={isSaving || !prompt.trim()}
92+
className="p-3 bg-brand-orange rounded-r-full h-12 text-brand-black disabled:opacity-50 hover:bg-opacity-80 transition-colors z-10 flex-shrink-0"
93+
>
94+
{isSaving ? (
95+
<IconLoader size={18} className="animate-spin" />
96+
) : (
97+
<IconSend size={18} />
98+
)}
99+
</button>
100+
</div>
91101
</div>
92102
</div>
93103
)

‎src/client/components/tasks/ListView.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const ListView = ({
4747
}
4848

4949
return (
50-
<div className="p-6 space-y-4 overflow-y-auto custom-scrollbar h-full">
50+
<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">
5151
<div className="relative">
5252
<IconSearch
5353
className="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-500"

‎src/client/components/tasks/TaskCardList.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ const TaskCardList = ({ task, onSelectTask }) => {
4747
animate={{ opacity: 1 }}
4848
exit={{ opacity: 0 }}
4949
onClick={() => onSelectTask(task)}
50-
className="bg-brand-gray p-4 rounded-lg border border-zinc-700 hover:border-brand-orange transition-all cursor-pointer relative"
50+
className="bg-brand-black p-4 rounded-lg border border-zinc-700 hover:border-brand-orange transition-all cursor-pointer relative"
5151
>
5252
<div className="flex justify-between items-start gap-4">
5353
<p className="font-sans font-semibold text-brand-white flex-1 text-sm">

‎src/client/components/tasks/WelcomePanel.js‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -72,11 +72,11 @@ const exampleWorkflows = [
7272

7373
const WelcomePanel = ({ onExampleClick }) => {
7474
return (
75-
<div className="p-6 h-full flex flex-col">
75+
<div className="p-6 h-full flex flex-col overflow-y-auto custom-scrollbar">
7676
<div className="text-center mb-8">
7777
<IconSparkles
7878
size={40}
79-
className="mx-auto text-sentient-blue mb-4"
79+
className="mx-auto text-brand-orange mb-4"
8080
/>
8181
<h2 className="text-2xl font-bold text-white">
8282
Welcome to Tasks
@@ -97,7 +97,7 @@ const WelcomePanel = ({ onExampleClick }) => {
9797
animate={{ opacity: 1, y: 0 }}
9898
transition={{ delay: index * 0.1 }}
9999
onClick={() => onExampleClick(workflow.prompt)}
100-
className="bg-neutral-800/50 p-4 rounded-lg border border-neutral-700 hover:border-sentient-blue cursor-pointer transition-colors flex flex-col justify-between"
100+
className="bg-neutral-800/50 p-4 rounded-lg border border-neutral-700 hover:border-brand-orange cursor-pointer transition-colors flex flex-col justify-between"
101101
>
102102
<div>
103103
<div className="flex items-center gap-3 mb-2">

0 commit comments

Comments
 (0)