refactor: ordenar tarefas por status e simplificar note dialog

Tarefas pendentes agora aparecem primeiro, concluídas por último, tanto nos cards quanto nos modais (details e edit). Note dialog mais minimalista: remove labels redundantes, contadores de caracteres, descriptions verbosas. Tarefas com line-through quando concluídas, botão de remover mais sutil. Cards de anotação agora usam grid responsivo (1/2/3 colunas) igual aos cards de cartões, em vez de largura fixa 440px. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-02-26 17:44:02 +00:00
parent 283dfd70a8
commit 29b3bc1086
5 changed files with 139 additions and 186 deletions
--- a/components/anotacoes/note-card.tsx
+++ b/components/anotacoes/note-card.tsx
@@ -11,7 +11,7 @@ import {
 import { useMemo } from "react";
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
-import type { Note } from "./types";
+import { type Note, sortTasksByStatus } from "./types";

 const DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
 	dateStyle: "medium",
@@ -47,6 +47,7 @@ export function NoteCard({

 	const isTask = note.type === "tarefa";
 	const tasks = note.tasks || [];
+	const sortedTasks = useMemo(() => sortTasksByStatus(tasks), [tasks]);
 	const completedCount = tasks.filter((t) => t.completed).length;
 	const totalCount = tasks.length;

@@ -82,7 +83,7 @@ export function NoteCard({
 	].filter((action) => typeof action.onClick === "function");

 	return (
-		<Card className="flex h-[300px] w-[440px] flex-col gap-0">
+		<Card className="flex h-[300px] w-full flex-col gap-0">
 			<CardContent className="flex min-h-0 flex-1 flex-col gap-4">
 				<div className="flex shrink-0 items-start justify-between gap-3">
 					<div className="flex flex-col gap-2">
@@ -99,7 +100,7 @@ export function NoteCard({

 				{isTask ? (
 					<div className="min-h-0 flex-1 space-y-2 overflow-hidden">
-						{tasks.slice(0, 5).map((task) => (
+						{sortedTasks.slice(0, 5).map((task) => (
 							<div key={task.id} className="flex items-start gap-2 text-sm">
 								<div
 									className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
--- a/components/anotacoes/note-details-dialog.tsx
+++ b/components/anotacoes/note-details-dialog.tsx
@@ -14,7 +14,7 @@ import {
 	DialogTitle,
 } from "@/components/ui/dialog";
 import { Card } from "../ui/card";
-import type { Note } from "./types";
+import { type Note, sortTasksByStatus } from "./types";

 const DATE_FORMATTER = new Intl.DateTimeFormat("pt-BR", {
 	dateStyle: "long",
@@ -51,6 +51,7 @@ export function NoteDetailsDialog({

 	const isTask = note.type === "tarefa";
 	const tasks = note.tasks || [];
+	const sortedTasks = useMemo(() => sortTasksByStatus(tasks), [tasks]);
 	const completedCount = tasks.filter((t) => t.completed).length;
 	const totalCount = tasks.length;

@@ -71,7 +72,7 @@ export function NoteDetailsDialog({

 				{isTask ? (
 					<div className="max-h-[320px] overflow-auto space-y-3">
-						{tasks.map((task) => (
+						{sortedTasks.map((task) => (
 							<Card
 								key={task.id}
 								className="flex gap-3 p-3 flex-row items-center"
--- a/components/anotacoes/note-dialog.tsx
+++ b/components/anotacoes/note-dialog.tsx
@@ -4,6 +4,7 @@ import { RiAddLine, RiDeleteBinLine } from "@remixicon/react";
 import {
 	type ReactNode,
 	useEffect,
+	useMemo,
 	useRef,
 	useState,
 	useTransition,
@@ -29,8 +30,12 @@ import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
 import { Textarea } from "@/components/ui/textarea";
 import { useControlledState } from "@/hooks/use-controlled-state";
 import { useFormState } from "@/hooks/use-form-state";
-import { Card } from "../ui/card";
-import type { Note, NoteFormValues, Task } from "./types";
+import {
+	type Note,
+	type NoteFormValues,
+	sortTasksByStatus,
+	type Task,
+} from "./types";

 type NoteDialogMode = "create" | "update";
 interface NoteDialogProps {
@@ -94,17 +99,17 @@ export function NoteDialog({
 	}, [dialogOpen, note, setFormState]);

 	const title = mode === "create" ? "Nova anotação" : "Editar anotação";
-	const description =
-		mode === "create"
-			? "Escolha entre uma nota simples ou uma lista de tarefas."
-			: "Altere o título e/ou conteúdo desta anotação.";
-	const submitLabel =
-		mode === "create" ? "Salvar anotação" : "Atualizar anotação";
+	const submitLabel = mode === "create" ? "Salvar" : "Atualizar";

 	const titleCount = formState.title.length;
 	const descCount = formState.description.length;
 	const isNote = formState.type === "nota";

+	const sortedTasks = useMemo(
+		() => sortTasksByStatus(formState.tasks || []),
+		[formState.tasks],
+	);
+
 	const onlySpaces =
 		normalize(formState.title).length === 0 ||
 		(isNote && formState.description.trim().length === 0) ||
@@ -222,21 +227,20 @@ export function NoteDialog({
 			<DialogContent className="max-h-[90vh] overflow-y-auto">
 				<DialogHeader>
 					<DialogTitle>{title}</DialogTitle>
-					<DialogDescription>{description}</DialogDescription>
+					<DialogDescription className="sr-only">
+						{mode === "create"
+							? "Criar nova anotação"
+							: "Editar anotação existente"}
+					</DialogDescription>
 				</DialogHeader>

 				<form
-					className="space-y-4"
+					className="space-y-3"
 					onSubmit={handleSubmit}
 					onKeyDown={handleKeyDown}
 					noValidate
 				>
-					{/* Seletor de Tipo - apenas no modo de criação */}
 					{mode === "create" && (
-						<div className="space-y-3">
-							<label className="text-sm font-medium text-foreground">
-								Tipo de anotação
-							</label>
 						<RadioGroup
 							value={formState.type}
 							onValueChange={(value) =>
@@ -264,90 +268,43 @@ export function NoteDialog({
 								</label>
 							</div>
 						</RadioGroup>
-						</div>
 					)}

-					{/* Título */}
-					<div className="space-y-2">
-						<label
-							htmlFor="note-title"
-							className="text-sm font-medium text-foreground"
-						>
-							Título
-						</label>
 					<Input
 						id="note-title"
 						ref={titleRef}
 						value={formState.title}
 						onChange={(e) => updateField("title", e.target.value)}
-							placeholder={
-								isNote ? "Ex.: Revisar metas do mês" : "Ex.: Tarefas da semana"
-							}
+						placeholder="Título"
 						maxLength={MAX_TITLE}
 						disabled={isPending}
-							aria-describedby="note-title-help"
 						required
 					/>
-						<p
-							id="note-title-help"
-							className="text-xs text-muted-foreground"
-							aria-live="polite"
-						>
-							Até {MAX_TITLE} caracteres. Restantes:{" "}
-							{Math.max(0, MAX_TITLE - titleCount)}.
-						</p>
-					</div>

-					{/* Conteúdo - apenas para Notas */}
 					{isNote && (
-						<div className="space-y-2">
-							<label
-								htmlFor="note-description"
-								className="text-sm font-medium text-foreground"
-							>
-								Conteúdo
-							</label>
 						<Textarea
 							id="note-description"
 							className="field-sizing-fixed"
 							ref={descRef}
 							value={formState.description}
 							onChange={(e) => updateField("description", e.target.value)}
-								placeholder="Detalhe sua anotação..."
-								rows={6}
+							placeholder="Escreva sua anotação..."
+							rows={5}
 							maxLength={MAX_DESC}
 							disabled={isPending}
-								aria-describedby="note-desc-help"
 							required
 						/>
-							<p
-								id="note-desc-help"
-								className="text-xs text-muted-foreground"
-								aria-live="polite"
-							>
-								Até {MAX_DESC} caracteres. Restantes:{" "}
-								{Math.max(0, MAX_DESC - descCount)}.
-							</p>
-						</div>
 					)}

-					{/* Lista de Tarefas - apenas para Tarefas */}
 					{!isNote && (
-						<div className="space-y-4">
 						<div className="space-y-2">
-								<label
-									htmlFor="new-task-input"
-									className="text-sm font-medium text-foreground"
-								>
-									Adicionar tarefa
-								</label>
 							<div className="flex gap-2">
 								<Input
 									id="new-task-input"
 									ref={newTaskRef}
 									value={newTaskText}
 									onChange={(e) => setNewTaskText(e.target.value)}
-										placeholder="Ex.: Comprar ingredientes para o jantar"
+									placeholder="Nova tarefa..."
 									disabled={isPending}
 									onKeyDown={(e) => {
 										if (e.key === "Enter") {
@@ -358,6 +315,7 @@ export function NoteDialog({
 								/>
 								<Button
 									type="button"
+									variant="outline"
 									onClick={handleAddTask}
 									disabled={isPending || !normalize(newTaskText)}
 									className="shrink-0"
@@ -365,55 +323,43 @@ export function NoteDialog({
 									<RiAddLine className="h-4 w-4" />
 								</Button>
 							</div>
-								<p className="text-xs text-muted-foreground">
-									Pressione Enter ou clique no botão + para adicionar
-								</p>
-							</div>

-							{/* Lista de tarefas existentes */}
-							{formState.tasks && formState.tasks.length > 0 && (
-								<div className="space-y-2">
-									<label className="text-sm font-medium text-foreground">
-										Tarefas ({formState.tasks.length})
-									</label>
-									<div className="space-y-2 max-h-[240px] overflow-y-auto pr-1">
-										{formState.tasks.map((task) => (
-											<Card
+							{sortedTasks.length > 0 && (
+								<div className="space-y-1 max-h-[240px] overflow-y-auto pr-1">
+									{sortedTasks.map((task) => (
+										<div
 											key={task.id}
-												className="flex items-center gap-3 px-3 py-2 flex-row mt-1"
+											className="flex items-center gap-3 px-3 py-1.5 rounded-md hover:bg-muted/50"
 										>
 											<Checkbox
 												className="data-[state=checked]:bg-success data-[state=checked]:border-success"
 												checked={task.completed}
 												onCheckedChange={() => handleToggleTask(task.id)}
 												disabled={isPending}
-													aria-label={`Marcar tarefa "${task.text}" como ${
+												aria-label={`Marcar "${task.text}" como ${
 													task.completed ? "não concluída" : "concluída"
 												}`}
 											/>
 											<span
 												className={`flex-1 text-sm wrap-break-word ${
 													task.completed
-															? "text-muted-foreground"
+														? "text-muted-foreground line-through"
 														: "text-foreground"
 												}`}
 											>
 												{task.text}
 											</span>
-												<Button
+											<button
 												type="button"
-													variant="ghost"
-													size="sm"
 												onClick={() => handleRemoveTask(task.id)}
 												disabled={isPending}
-													className="h-8 w-8 p-0 shrink-0 text-muted-foreground hover:text-destructive"
-													aria-label={`Remover tarefa "${task.text}"`}
+												className="shrink-0 text-muted-foreground/50 hover:text-destructive transition-colors"
+												aria-label={`Remover "${task.text}"`}
 											>
-													<RiDeleteBinLine className="h-4 w-4" />
-												</Button>
-											</Card>
-										))}
+												<RiDeleteBinLine className="h-3.5 w-3.5" />
+											</button>
 										</div>
+									))}
 								</div>
 							)}
 						</div>
--- a/components/anotacoes/notes-page.tsx
+++ b/components/anotacoes/notes-page.tsx
@@ -178,7 +178,7 @@ export function NotesPage({ notes, archivedNotes }: NotesPageProps) {
 		}

 		return (
-			<div className="flex flex-wrap gap-4">
+			<div className="grid gap-4 grid-cols-1 sm:grid-cols-2 xl:grid-cols-3">
 				{list.map((note) => (
 					<NoteCard
 						key={note.id}
--- a/components/anotacoes/types.ts
+++ b/components/anotacoes/types.ts
@@ -22,3 +22,8 @@ export interface NoteFormValues {
 	type: NoteType;
 	tasks?: Task[];
 }
+
+/** Ordena tarefas: pendentes primeiro, concluídas por último. */
+export function sortTasksByStatus(tasks: Task[]): Task[] {
+	return [...tasks].sort((a, b) => Number(a.completed) - Number(b.completed));
+}