sandrodach
da82caf82c
MindSift CI & Docker Release / Build, Test in Container & Push (push) Successful in 51s
279 lines
11 KiB
TypeScript
279 lines
11 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import {
|
|
Check,
|
|
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="w-full space-y-2">
|
|
{/* Filter Tabs */}
|
|
<div className="flex flex-wrap items-center justify-between gap-2 mb-1">
|
|
<div className="flex items-center border border-white/[0.08] bg-[#16171a]">
|
|
<button
|
|
onClick={() => setFilter('open')}
|
|
className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
|
|
filter === 'open'
|
|
? 'bg-[#222428] text-white'
|
|
: 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
|
|
}`}
|
|
>
|
|
Offen ({openTasks.length})
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setFilter('done')}
|
|
className={`h-8 px-3.5 text-xs font-medium border-r border-white/[0.08] transition-colors ${
|
|
filter === 'done'
|
|
? 'bg-[#222428] text-white'
|
|
: 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
|
|
}`}
|
|
>
|
|
Erledigt ({doneTasks.length})
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => setFilter('discarded')}
|
|
className={`h-8 px-3.5 text-xs font-medium transition-colors ${
|
|
filter === 'discarded'
|
|
? 'bg-[#222428] text-white'
|
|
: 'text-zinc-400 hover:text-white hover:bg-white/[0.02]'
|
|
}`}
|
|
>
|
|
Papierkorb ({discarded.length})
|
|
</button>
|
|
</div>
|
|
|
|
{filter === 'discarded' && discarded.length > 0 && (
|
|
<button
|
|
onClick={handlePurgeAllDiscarded}
|
|
className="h-7 px-3 rounded-full bg-white/[0.06] hover:bg-white/[0.12] text-zinc-300 hover:text-white 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-6 text-center text-zinc-500 text-sm">Lade Aufgaben…</div>
|
|
) : filter === 'discarded' ? (
|
|
<div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
|
|
{discarded.length === 0 ? (
|
|
<div className="px-4 py-6 text-center text-zinc-400 text-sm">
|
|
Keine verworfenen Gedanken im Papierkorb.
|
|
</div>
|
|
) : (
|
|
discarded.map((item) => (
|
|
<div
|
|
key={item.id}
|
|
className="px-3 py-2 flex items-center justify-between gap-3 hover:bg-white/[0.02]"
|
|
>
|
|
<div className="flex items-center gap-2.5 min-w-0 flex-1">
|
|
<Trash2 className="w-4 h-4 text-zinc-500 flex-shrink-0" />
|
|
<p className="text-sm text-zinc-400 line-through truncate">{item.content}</p>
|
|
</div>
|
|
<div className="flex items-center gap-2 flex-shrink-0">
|
|
<button
|
|
onClick={() => handleRestore(item)}
|
|
className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-[#1d8cf8] flex items-center gap-1.5 transition-colors"
|
|
>
|
|
<RotateCcw className="w-3 h-3" /> Zurück
|
|
</button>
|
|
<button
|
|
onClick={() => handleDeletePermanent(item.id)}
|
|
className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
) : (
|
|
<div className="bg-[#222428] border border-white/[0.08] divide-y divide-white/[0.06]">
|
|
{(filter === 'open' ? openTasks : doneTasks).length === 0 ? (
|
|
<div className="px-4 py-6 text-center text-zinc-400 text-sm">
|
|
{filter === 'open'
|
|
? 'Keine offenen Aufgaben vorhanden.'
|
|
: 'Noch keine erledigten Aufgaben.'}
|
|
</div>
|
|
) : (
|
|
(filter === 'open' ? openTasks : doneTasks).map((task) => (
|
|
<div
|
|
key={task.id}
|
|
className={`px-3 py-2 flex flex-col sm:flex-row sm:items-center justify-between gap-2 transition-colors hover:bg-white/[0.02] ${
|
|
task.isCompleted ? 'opacity-65' : ''
|
|
}`}
|
|
>
|
|
<div className="flex items-center gap-3 min-w-0 flex-1">
|
|
{/* Square minimalist checkbox */}
|
|
<button
|
|
onClick={() => handleToggleDone(task)}
|
|
className={`w-4 h-4 flex items-center justify-center flex-shrink-0 transition-colors border ${
|
|
task.isCompleted
|
|
? 'bg-[#1d8cf8] border-[#1d8cf8] text-white'
|
|
: 'border-zinc-500 hover:border-[#1d8cf8] text-transparent'
|
|
}`}
|
|
title={task.isCompleted ? 'Als offen markieren' : 'Als erledigt abhaken'}
|
|
>
|
|
<Check className="w-3 h-3 stroke-[3]" />
|
|
</button>
|
|
|
|
<div className="min-w-0 flex-1">
|
|
<p
|
|
className={`text-sm break-words leading-tight ${
|
|
task.isCompleted ? 'line-through text-zinc-500' : 'text-white'
|
|
}`}
|
|
>
|
|
{task.content}
|
|
</p>
|
|
|
|
<div className="flex flex-wrap items-center gap-1.5 mt-0.5 empty:hidden">
|
|
{task.priority === 'urgent' && (
|
|
<span className="px-1.5 py-0.2 border border-[#1d8cf8] text-[#1d8cf8] text-[10px] font-semibold">
|
|
Dringend
|
|
</span>
|
|
)}
|
|
{task.priority === 'high' && (
|
|
<span className="px-1.5 py-0.2 border border-white/20 text-zinc-300 text-[10px] font-medium">
|
|
Wichtig
|
|
</span>
|
|
)}
|
|
{task.tags?.map((tag) => (
|
|
<span
|
|
key={tag}
|
|
className="px-1.5 py-0.2 bg-[#16171a] text-zinc-400 text-[10px]"
|
|
>
|
|
#{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 h-3 text-zinc-400 absolute left-2 pointer-events-none" />
|
|
<input
|
|
type="date"
|
|
value={task.dueDate || ''}
|
|
onChange={(e) => handleDueDateChange(task, e.target.value)}
|
|
className="h-7 pl-6 pr-2 bg-[#16171a] text-white text-xs border border-white/[0.08] focus:outline-none focus:border-[#1d8cf8] transition-colors"
|
|
/>
|
|
</div>
|
|
|
|
<button
|
|
onClick={() => handleConvertToDoc(task)}
|
|
title="Als Notiz / Projekt vertiefen"
|
|
className="h-7 px-2.5 rounded-full bg-[#16171a] hover:bg-[#2b2d33] border border-white/[0.06] text-xs text-zinc-300 hover:text-white flex items-center gap-1.5 transition-colors"
|
|
>
|
|
<FileText className="w-3 h-3 text-[#1d8cf8]" />
|
|
<span className="hidden md:inline">Vertiefen</span>
|
|
</button>
|
|
|
|
<button
|
|
onClick={() => handleDeletePermanent(task.id)}
|
|
title="Löschen"
|
|
className="w-7 h-7 rounded-full bg-[#16171a] hover:bg-white/[0.1] text-zinc-400 hover:text-white flex items-center justify-center transition-colors"
|
|
>
|
|
<Trash2 className="w-3 h-3" />
|
|
</button>
|
|
</div>
|
|
</div>
|
|
))
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|