First draft
This commit is contained in:
sandrodach committed
1 parent
aba52f2b3c
commit
84bc6884b0
37 files changed
+6697
-27
No files matched your search
@@ -0,0 +1,272 @@
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
CheckCircle2,
|
||||
Circle,
|
||||
Calendar,
|
||||
Trash2,
|
||||
RotateCcw,
|
||||
FileText,
|
||||
Tag,
|
||||
AlertCircle,
|
||||
} from 'lucide-react';
|
||||
import { Thought } from '../../lib/types';
|
||||
import { api, triggerHaptic } from '../../lib/api';
|
||||
|
||||
interface TasksViewProps {
|
||||
onRefreshStats: () => void;
|
||||
onOpenDocument: (docId: string) => void;
|
||||
}
|
||||
|
||||
export const TasksView: React.FC<TasksViewProps> = ({ onRefreshStats, onOpenDocument }) => {
|
||||
const [filter, setFilter] = useState<'open' | 'done' | 'discarded'>('open');
|
||||
const [tasks, setTasks] = useState<Thought[]>([]);
|
||||
const [discarded, setDiscarded] = useState<Thought[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const loadData = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
const [allTasks, allDiscarded] = await Promise.all([
|
||||
api.getTasks(),
|
||||
api.getThoughts('discarded'),
|
||||
]);
|
||||
setTasks(allTasks);
|
||||
setDiscarded(allDiscarded);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
loadData();
|
||||
}, []);
|
||||
|
||||
const handleToggleDone = async (task: Thought) => {
|
||||
triggerHaptic(15);
|
||||
const nextState = !task.isCompleted;
|
||||
setTasks((prev) =>
|
||||
prev.map((t) => (t.id === task.id ? { ...t, isCompleted: nextState } : t))
|
||||
);
|
||||
await api.updateThought(task.id, { isCompleted: nextState });
|
||||
onRefreshStats();
|
||||
};
|
||||
|
||||
const handleDueDateChange = async (task: Thought, newDate: string) => {
|
||||
setTasks((prev) => prev.map((t) => (t.id === task.id ? { ...t, dueDate: newDate } : t)));
|
||||
await api.updateThought(task.id, { dueDate: newDate });
|
||||
};
|
||||
|
||||
const handleConvertToDoc = async (task: Thought) => {
|
||||
triggerHaptic(20);
|
||||
const updated = await api.triageAction(task.id, 'keep', { convertTo: 'document' });
|
||||
onRefreshStats();
|
||||
if (updated.convertedRefId) {
|
||||
onOpenDocument(updated.convertedRefId);
|
||||
} else {
|
||||
loadData();
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestore = async (item: Thought) => {
|
||||
triggerHaptic(15);
|
||||
await api.triageAction(item.id, 'restore');
|
||||
await loadData();
|
||||
onRefreshStats();
|
||||
};
|
||||
|
||||
const handleDeletePermanent = async (id: string) => {
|
||||
triggerHaptic(20);
|
||||
await api.deleteThought(id);
|
||||
await loadData();
|
||||
onRefreshStats();
|
||||
};
|
||||
|
||||
const handlePurgeAllDiscarded = async () => {
|
||||
await api.purgeDiscarded();
|
||||
await loadData();
|
||||
onRefreshStats();
|
||||
};
|
||||
|
||||
const openTasks = tasks.filter((t) => !t.isCompleted);
|
||||
const doneTasks = tasks.filter((t) => t.isCompleted);
|
||||
|
||||
return (
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{/* Filter Pills */}
|
||||
<div className="flex flex-wrap items-center justify-between gap-3 mb-6">
|
||||
<div className="flex items-center gap-2">
|
||||
<button
|
||||
onClick={() => setFilter('open')}
|
||||
className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
|
||||
filter === 'open'
|
||||
? 'bg-[#8ab4f8] text-[#0b0f19] font-semibold'
|
||||
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
}`}
|
||||
>
|
||||
Offene Aufgaben ({openTasks.length})
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setFilter('done')}
|
||||
className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
|
||||
filter === 'done'
|
||||
? 'bg-[#81c995] text-[#0b0f19] font-semibold'
|
||||
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
}`}
|
||||
>
|
||||
Erledigt ({doneTasks.length})
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => setFilter('discarded')}
|
||||
className={`h-10 px-4 rounded-full text-xs sm:text-sm font-medium transition-colors ${
|
||||
filter === 'discarded'
|
||||
? 'bg-[#f28b82] text-[#0b0f19] font-semibold'
|
||||
: 'bg-[#1e1f20] text-[#9aa0a6] hover:text-[#e3e3e3] gemini-border'
|
||||
}`}
|
||||
>
|
||||
Verworfen ({discarded.length})
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{filter === 'discarded' && discarded.length > 0 && (
|
||||
<button
|
||||
onClick={handlePurgeAllDiscarded}
|
||||
className="h-9 px-4 rounded-full bg-[#f28b82]/15 hover:bg-[#f28b82]/25 text-[#f28b82] text-xs font-medium flex items-center gap-1.5 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Papierkorb leeren
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{loading ? (
|
||||
<div className="p-8 text-center text-[#9aa0a6] text-sm">Lade Aufgaben…</div>
|
||||
) : filter === 'discarded' ? (
|
||||
<div className="space-y-2.5">
|
||||
{discarded.length === 0 ? (
|
||||
<div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
|
||||
Keine verworfenen Gedanken im Papierkorb.
|
||||
</div>
|
||||
) : (
|
||||
discarded.map((item) => (
|
||||
<div
|
||||
key={item.id}
|
||||
className="p-4 rounded-3xl bg-[#1e1f20] gemini-border flex items-center justify-between gap-4"
|
||||
>
|
||||
<div className="min-w-0 flex-1">
|
||||
<p className="text-sm text-[#9aa0a6] line-through truncate">{item.content}</p>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 flex-shrink-0">
|
||||
<button
|
||||
onClick={() => handleRestore(item)}
|
||||
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323639] text-xs text-[#8ab4f8] flex items-center gap-1"
|
||||
>
|
||||
<RotateCcw className="w-3.5 h-3.5" /> Zurück in Inbox
|
||||
</button>
|
||||
<button
|
||||
onClick={() => handleDeletePermanent(item.id)}
|
||||
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#f28b82] flex items-center justify-center"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
) : (
|
||||
<div className="space-y-2.5">
|
||||
{(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
|
||||
<div className="p-10 rounded-3xl bg-[#1e1f20] gemini-border text-center text-[#9aa0a6] text-sm">
|
||||
{filter === 'open'
|
||||
? 'Keine offenen Aufgaben. Wische Gedanken in der Triage nach rechts, um Aufgaben anzulegen!'
|
||||
: 'Noch keine erledigten Aufgaben.'}
|
||||
</div>
|
||||
) : (
|
||||
(filter === 'open' ? openTasks : doneTasks).map((task) => (
|
||||
<div
|
||||
key={task.id}
|
||||
className="p-4 sm:p-5 rounded-3xl bg-[#1e1f20] hover:bg-[#242628] gemini-border flex flex-col sm:flex-row sm:items-center justify-between gap-3 transition-colors"
|
||||
>
|
||||
<div className="flex items-start gap-3.5 min-w-0 flex-1">
|
||||
<button
|
||||
onClick={() => handleToggleDone(task)}
|
||||
className="mt-0.5 flex-shrink-0 text-[#8ab4f8] hover:scale-110 transition-transform"
|
||||
>
|
||||
{task.isCompleted ? (
|
||||
<CheckCircle2 className="w-5 h-5 text-[#81c995]" />
|
||||
) : (
|
||||
<Circle className="w-5 h-5 text-[#9aa0a6] hover:text-[#8ab4f8]" />
|
||||
)}
|
||||
</button>
|
||||
|
||||
<div className="min-w-0 flex-1">
|
||||
<p
|
||||
className={`text-sm sm:text-base font-medium break-words ${
|
||||
task.isCompleted ? 'line-through text-[#5f6368]' : 'text-[#e3e3e3]'
|
||||
}`}
|
||||
>
|
||||
{task.content}
|
||||
</p>
|
||||
|
||||
<div className="flex flex-wrap items-center gap-2 mt-2">
|
||||
{task.priority === 'urgent' && (
|
||||
<span className="px-2.5 py-0.5 rounded-full bg-[#f28b82]/20 text-[#f28b82] text-xs flex items-center gap-1">
|
||||
<AlertCircle className="w-3 h-3" /> Dringend
|
||||
</span>
|
||||
)}
|
||||
{task.priority === 'high' && (
|
||||
<span className="px-2.5 py-0.5 rounded-full bg-[#8ab4f8]/20 text-[#8ab4f8] text-xs">
|
||||
Hoch
|
||||
</span>
|
||||
)}
|
||||
{task.tags?.map((tag) => (
|
||||
<span
|
||||
key={tag}
|
||||
className="px-2.5 py-0.5 rounded-full bg-[#131314] text-[#8ab4f8] text-xs flex items-center gap-1"
|
||||
>
|
||||
<Tag className="w-2.5 h-2.5" />#{tag}
|
||||
</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Action Controls */}
|
||||
<div className="flex items-center gap-2 self-end sm:self-center flex-shrink-0">
|
||||
<div className="relative flex items-center">
|
||||
<Calendar className="w-3.5 h-3.5 text-[#8ab4f8] absolute left-3 pointer-events-none" />
|
||||
<input
|
||||
type="date"
|
||||
value={task.dueDate || ''}
|
||||
onChange={(e) => handleDueDateChange(task, e.target.value)}
|
||||
className="pl-8 pr-3 py-1 rounded-full bg-[#131314] text-[#e3e3e3] text-xs gemini-border focus:outline-none focus:border-[#8ab4f8]"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => handleConvertToDoc(task)}
|
||||
title="Im Workspace als Projekt-Dokument vertiefen"
|
||||
className="h-8 px-3 rounded-full bg-[#282a2c] hover:bg-[#323538] text-xs text-[#c58af9] flex items-center gap-1"
|
||||
>
|
||||
<FileText className="w-3.5 h-3.5" />
|
||||
<span className="hidden md:inline">Vertiefen</span>
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={() => handleDeletePermanent(task.id)}
|
||||
title="Löschen"
|
||||
className="w-8 h-8 rounded-full bg-[#282a2c] hover:bg-[#f28b82]/20 text-[#9aa0a6] hover:text-[#f28b82] flex items-center justify-center"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
))
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
Reference in new issue
Block a user