From 69df314db77ce5b981a218073064cf3954a70437 Mon Sep 17 00:00:00 2001
From: Felipe Coutinho <felipi@live.com>
Date: Mon, 16 Mar 2026 01:14:33 +0000
Subject: [PATCH] =?UTF-8?q?feat:=20aprimora=20a=20edi=C3=A7=C3=A3o=20e=20v?=
 =?UTF-8?q?isualiza=C3=A7=C3=A3o=20de=20anota=C3=A7=C3=B5es?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/notes/note-list-item.tsx       |   6 +-
 src/features/notes/actions.ts                 |   2 +-
 src/features/notes/components/note-card.tsx   |  41 +++---
 .../notes/components/note-details-dialog.tsx  |  23 +++-
 src/features/notes/components/note-dialog.tsx | 125 ++++++++++--------
 src/features/notes/components/notes-page.tsx  |  21 +--
 6 files changed, 123 insertions(+), 95 deletions(-)

diff --git a/src/features/dashboard/components/notes/note-list-item.tsx b/src/features/dashboard/components/notes/note-list-item.tsx
index 407769d..af9e6a7 100644
--- a/src/features/dashboard/components/notes/note-list-item.tsx
+++ b/src/features/dashboard/components/notes/note-list-item.tsx
@@ -23,7 +23,7 @@ export function NoteListItem({
 	const createdAtLabel = formatNoteCreatedAt(note.createdAt);
 
 	return (
-		<div className="flex items-center justify-between gap-2 transition-all duration-300 py-2">
+		<div className="group flex items-center justify-between gap-2 transition-all duration-300 py-2">
 			<div className="min-w-0 flex-1">
 				<p className="truncate text-sm font-medium text-foreground">
 					{displayTitle}
@@ -44,7 +44,7 @@ export function NoteListItem({
 				<Button
 					variant="outline"
 					size="icon-sm"
-					className="text-muted-foreground hover:text-foreground"
+					className="opacity-30 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground"
 					onClick={() => onOpenEdit(note)}
 					aria-label={`Editar anotação ${displayTitle}`}
 				>
@@ -53,7 +53,7 @@ export function NoteListItem({
 				<Button
 					variant="outline"
 					size="icon-sm"
-					className="text-muted-foreground hover:text-foreground"
+					className="opacity-30 group-hover:opacity-100 transition-opacity text-muted-foreground hover:text-foreground"
 					onClick={() => onOpenDetails(note)}
 					aria-label={`Ver detalhes da anotação ${displayTitle}`}
 				>
diff --git a/src/features/notes/actions.ts b/src/features/notes/actions.ts
index 891293a..6e708be 100644
--- a/src/features/notes/actions.ts
+++ b/src/features/notes/actions.ts
@@ -189,7 +189,7 @@ export async function archiveNoteAction(
 		return {
 			success: true,
 			message: data.archived
-				? "Anotação archived com sucesso."
+				? "Anotação arquivada com sucesso."
 				: "Anotação desarquivada com sucesso.",
 		};
 	} catch (error) {
diff --git a/src/features/notes/components/note-card.tsx b/src/features/notes/components/note-card.tsx
index 5ba8ae8..2a8ae1e 100644
--- a/src/features/notes/components/note-card.tsx
+++ b/src/features/notes/components/note-card.tsx
@@ -8,7 +8,10 @@ import {
 	RiInboxUnarchiveLine,
 	RiPencilLine,
 } from "@remixicon/react";
-import { buildNoteDisplayTitle } from "@/features/notes/lib/formatters";
+import {
+	buildNoteDisplayTitle,
+	formatNoteCreatedAt,
+} from "@/features/notes/lib/formatters";
 import { Badge } from "@/shared/components/ui/badge";
 import { Card, CardContent, CardFooter } from "@/shared/components/ui/card";
 import { type Note, sortTasksByStatus } from "./types";
@@ -31,6 +34,7 @@ export function NoteCard({
 	isArquivadas = false,
 }: NoteCardProps) {
 	const displayTitle = buildNoteDisplayTitle(note.title);
+	const createdAtLabel = formatNoteCreatedAt(note.createdAt);
 	const isTask = note.type === "tarefa";
 	const tasks = note.tasks || [];
 	const sortedTasks = sortTasksByStatus(tasks);
@@ -39,46 +43,51 @@ export function NoteCard({
 
 	const actions = [
 		{
-			label: "editar",
+			label: "Editar",
 			icon: <RiPencilLine className="size-4" aria-hidden />,
 			onClick: onEdit,
-			variant: "default" as const,
+			destructive: false,
 		},
 		{
-			label: "detalhes",
+			label: "Detalhes",
 			icon: <RiFileList2Line className="size-4" aria-hidden />,
 			onClick: onDetails,
-			variant: "default" as const,
+			destructive: false,
 		},
 		{
-			label: isArquivadas ? "desarquivar" : "arquivar",
+			label: isArquivadas ? "Desarquivar" : "Arquivar",
 			icon: isArquivadas ? (
 				<RiInboxUnarchiveLine className="size-4" aria-hidden />
 			) : (
 				<RiArchiveLine className="size-4" aria-hidden />
 			),
 			onClick: onArquivar,
-			variant: "default" as const,
+			destructive: false,
 		},
 		{
-			label: "remover",
+			label: "Remover",
 			icon: <RiDeleteBin5Line className="size-4" aria-hidden />,
 			onClick: onRemove,
-			variant: "destructive" as const,
+			destructive: true,
 		},
 	].filter((action) => typeof action.onClick === "function");
 
 	return (
-		<Card className="flex h-[300px] w-full flex-col gap-0">
+		<Card className="flex h-[340px] 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">
+					<div className="flex min-w-0 flex-col gap-1">
 						<h3 className="text-lg font-semibold leading-tight text-foreground wrap-break-word">
 							{displayTitle}
 						</h3>
+						{createdAtLabel && (
+							<span className="text-xs text-muted-foreground">
+								{createdAtLabel}
+							</span>
+						)}
 					</div>
 					{isTask && (
-						<Badge variant="outline" className="text-xs">
+						<Badge variant="outline" className="shrink-0 text-xs">
 							{completedCount}/{totalCount} concluídas
 						</Badge>
 					)}
@@ -112,7 +121,7 @@ export function NoteCard({
 						))}
 						{tasks.length > 5 && (
 							<p className="text-xs text-muted-foreground pl-5 py-1">
-								+{tasks.length - 5}
+								+{tasks.length - 5}{" "}
 								{tasks.length - 5 === 1 ? "tarefa" : "tarefas"}...
 							</p>
 						)}
@@ -126,14 +135,12 @@ export function NoteCard({
 
 			{actions.length > 0 ? (
 				<CardFooter className="flex shrink-0 flex-wrap gap-3 px-6 pt-3 text-sm">
-					{actions.map(({ label, icon, onClick, variant }) => (
+					{actions.map(({ label, icon, onClick, destructive }) => (
 						<button
 							key={label}
 							type="button"
 							onClick={() => onClick?.(note)}
-							className={`flex items-center gap-1 font-medium transition-opacity hover:opacity-80 ${
-								variant === "destructive" ? "text-destructive" : "text-primary"
-							}`}
+							className={`flex items-center gap-1 font-medium transition-opacity hover:opacity-80 ${destructive ? "text-destructive" : "text-primary"}`}
 							aria-label={`${label} anotação`}
 						>
 							{icon}
diff --git a/src/features/notes/components/note-details-dialog.tsx b/src/features/notes/components/note-details-dialog.tsx
index 58510ac..9116a9e 100644
--- a/src/features/notes/components/note-details-dialog.tsx
+++ b/src/features/notes/components/note-details-dialog.tsx
@@ -7,7 +7,6 @@ import {
 } from "@/features/notes/lib/formatters";
 import { Badge } from "@/shared/components/ui/badge";
 import { Button } from "@/shared/components/ui/button";
-import { Card } from "@/shared/components/ui/card";
 import {
 	Dialog,
 	DialogClose,
@@ -23,12 +22,14 @@ interface NoteDetailsDialogProps {
 	note: Note | null;
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
+	onEdit?: (note: Note) => void;
 }
 
 export function NoteDetailsDialog({
 	note,
 	open,
 	onOpenChange,
+	onEdit,
 }: NoteDetailsDialogProps) {
 	if (!note) {
 		return null;
@@ -58,14 +59,14 @@ export function NoteDetailsDialog({
 				</DialogHeader>
 
 				{isTask ? (
-					<Card className="max-h-[320px] overflow-auto gap-2 p-2">
+					<div className="max-h-[320px] overflow-auto rounded-md border p-1">
 						{sortedTasks.map((task) => (
 							<div
 								key={task.id}
-								className="flex items-center gap-3 px-3 py-1.5 space-y-1 rounded-md hover:bg-muted/50"
+								className="flex items-center gap-3 rounded-md px-3 py-1.5"
 							>
 								<div
-									className={`mt-0.5 flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
+									className={`flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border ${
 										task.completed
 											? "bg-success border-success"
 											: "border-input"
@@ -86,7 +87,7 @@ export function NoteDetailsDialog({
 								</span>
 							</div>
 						))}
-					</Card>
+					</div>
 				) : (
 					<div className="max-h-[320px] overflow-auto whitespace-pre-line wrap-break-word text-sm text-foreground">
 						{note.description}
@@ -94,6 +95,18 @@ export function NoteDetailsDialog({
 				)}
 
 				<DialogFooter>
+					{onEdit && (
+						<Button
+							type="button"
+							variant="outline"
+							onClick={() => {
+								onOpenChange(false);
+								onEdit(note);
+							}}
+						>
+							Editar
+						</Button>
+					)}
 					<DialogClose asChild>
 						<Button type="button" variant="outline">
 							Fechar
diff --git a/src/features/notes/components/note-dialog.tsx b/src/features/notes/components/note-dialog.tsx
index d3d99d1..469e696 100644
--- a/src/features/notes/components/note-dialog.tsx
+++ b/src/features/notes/components/note-dialog.tsx
@@ -24,10 +24,10 @@ import {
 } from "@/shared/components/ui/dialog";
 import { Input } from "@/shared/components/ui/input";
 import { Label } from "@/shared/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/shared/components/ui/radio-group";
 import { Textarea } from "@/shared/components/ui/textarea";
 import { useControlledState } from "@/shared/hooks/use-controlled-state";
 import { useFormState } from "@/shared/hooks/use-form-state";
+import { cn } from "@/shared/utils/ui";
 import {
 	type Note,
 	type NoteFormValues,
@@ -98,7 +98,9 @@ export function NoteDialog({
 	const description =
 		mode === "create"
 			? "Crie uma nota simples ou uma lista de tarefas."
-			: "Altere o conteúdo desta anotação.";
+			: note?.type === "tarefa"
+				? "Editando lista de tarefas."
+				: "Editando nota.";
 	const submitLabel = mode === "create" ? "Salvar" : "Atualizar";
 
 	const titleCount = formState.title.length;
@@ -231,6 +233,7 @@ export function NoteDialog({
 				</DialogHeader>
 
 				<form
+					id="note-form"
 					className="space-y-3 -mx-6 max-h-[80vh] overflow-y-auto px-6 pb-1"
 					onSubmit={handleSubmit}
 					onKeyDown={handleKeyDown}
@@ -239,38 +242,51 @@ export function NoteDialog({
 					{mode === "create" && (
 						<div className="space-y-1">
 							<Label>Tipo de anotação</Label>
-							<RadioGroup
-								value={formState.type}
-								onValueChange={(value) =>
-									updateField("type", value as "nota" | "tarefa")
-								}
-								disabled={isPending}
-								className="flex gap-4"
-							>
-								<div className="flex items-center gap-2">
-									<RadioGroupItem value="nota" id="tipo-nota" />
-									<Label
-										htmlFor="tipo-nota"
-										className="font-normal cursor-pointer"
-									>
-										Nota
-									</Label>
-								</div>
-								<div className="flex items-center gap-2">
-									<RadioGroupItem value="tarefa" id="tipo-tarefa" />
-									<Label
-										htmlFor="tipo-tarefa"
-										className="font-normal cursor-pointer"
-									>
-										Tarefas
-									</Label>
-								</div>
-							</RadioGroup>
+							<div className="grid grid-cols-2 overflow-hidden rounded-md border">
+								<button
+									type="button"
+									onClick={() => updateField("type", "nota")}
+									disabled={isPending}
+									className={cn(
+										"py-1.5 text-sm transition-colors",
+										formState.type === "nota"
+											? "bg-primary text-primary-foreground"
+											: "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+									)}
+								>
+									Nota
+								</button>
+								<button
+									type="button"
+									onClick={() => updateField("type", "tarefa")}
+									disabled={isPending}
+									className={cn(
+										"border-l py-1.5 text-sm transition-colors",
+										formState.type === "tarefa"
+											? "bg-primary text-primary-foreground"
+											: "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+									)}
+								>
+									Tarefas
+								</button>
+							</div>
 						</div>
 					)}
 
 					<div className="space-y-1">
-						<Label htmlFor="note-title">Título</Label>
+						<div className="flex items-center justify-between">
+							<Label htmlFor="note-title">Título</Label>
+							<span
+								className={cn(
+									"text-xs",
+									titleCount > MAX_TITLE
+										? "text-destructive"
+										: "text-muted-foreground",
+								)}
+							>
+								{titleCount}/{MAX_TITLE}
+							</span>
+						</div>
 						<Input
 							id="note-title"
 							ref={titleRef}
@@ -279,7 +295,7 @@ export function NoteDialog({
 							placeholder={
 								isNote ? "Ex.: Revisar metas do mês" : "Ex.: Tarefas da semana"
 							}
-							maxLength={MAX_TITLE}
+							maxLength={MAX_TITLE + 10}
 							disabled={isPending}
 							required
 						/>
@@ -287,7 +303,19 @@ export function NoteDialog({
 
 					{isNote && (
 						<div className="space-y-1">
-							<Label htmlFor="note-description">Conteúdo</Label>
+							<div className="flex items-center justify-between">
+								<Label htmlFor="note-description">Conteúdo</Label>
+								<span
+									className={cn(
+										"text-xs",
+										descCount > MAX_DESC
+											? "text-destructive"
+											: "text-muted-foreground",
+									)}
+								>
+									{descCount}/{MAX_DESC}
+								</span>
+							</div>
 							<Textarea
 								id="note-description"
 								className="field-sizing-fixed"
@@ -296,10 +324,13 @@ export function NoteDialog({
 								onChange={(e) => updateField("description", e.target.value)}
 								placeholder="Detalhe sua anotação..."
 								rows={5}
-								maxLength={MAX_DESC}
+								maxLength={MAX_DESC + 10}
 								disabled={isPending}
 								required
 							/>
+							<p className="text-xs text-muted-foreground">
+								Ctrl+Enter para salvar
+							</p>
 						</div>
 					)}
 
@@ -327,19 +358,20 @@ export function NoteDialog({
 										variant="outline"
 										onClick={handleAddTask}
 										disabled={isPending || !normalize(newTaskText)}
-										className="shrink-0"
+										className="shrink-0 gap-1.5"
 									>
 										<RiAddCircleFill className="h-4 w-4" />
+										Adicionar
 									</Button>
 								</div>
 							</div>
 
 							{sortedTasks.length > 0 && (
-								<div className="space-y-1 max-h-[300px] overflow-y-auto pr-1 mt-4 rounded-md p-2 bg-card ">
+								<div className="mt-4 max-h-[300px] space-y-1 overflow-y-auto rounded-md bg-card p-2 pr-1">
 									{sortedTasks.map((task) => (
 										<div
 											key={task.id}
-											className="flex items-center gap-3 px-3 py-1.5 rounded-md hover:bg-muted/50"
+											className="flex items-center gap-3 rounded-md px-3 py-1.5 hover:bg-muted/50"
 										>
 											<Checkbox
 												className="data-[state=checked]:bg-success data-[state=checked]:border-success"
@@ -351,11 +383,12 @@ export function NoteDialog({
 												}`}
 											/>
 											<span
-												className={`flex-1 text-sm wrap-break-word ${
+												className={cn(
+													"flex-1 text-sm wrap-break-word",
 													task.completed
 														? "text-muted-foreground line-through"
-														: "text-foreground"
-												}`}
+														: "text-foreground",
+												)}
 											>
 												{task.text}
 											</span>
@@ -391,19 +424,7 @@ export function NoteDialog({
 					>
 						Cancelar
 					</Button>
-					<Button
-						type="submit"
-						disabled={disableSubmit}
-						onClick={(e) => {
-							const form = (
-								e.currentTarget.closest("[role=dialog]") as HTMLElement
-							)?.querySelector("form");
-							if (form) {
-								e.preventDefault();
-								form.requestSubmit();
-							}
-						}}
-					>
+					<Button type="submit" form="note-form" disabled={disableSubmit}>
 						{isPending ? "Salvando..." : submitLabel}
 					</Button>
 				</DialogFooter>
diff --git a/src/features/notes/components/notes-page.tsx b/src/features/notes/components/notes-page.tsx
index 0101d5d..c9aa53d 100644
--- a/src/features/notes/components/notes-page.tsx
+++ b/src/features/notes/components/notes-page.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { RiAddFill, RiTodoLine } from "@remixicon/react";
-import { useMemo, useState } from "react";
+import { useState } from "react";
 import { toast } from "sonner";
 import { archiveNoteAction, deleteNoteAction } from "@/features/notes/actions";
 import { ConfirmActionDialog } from "@/shared/components/confirm-action-dialog";
@@ -36,22 +36,8 @@ export function NotesPage({ notes, archivedNotes }: NotesPageProps) {
 	const [arquivarOpen, setArquivarOpen] = useState(false);
 	const [noteToArquivar, setNoteToArquivar] = useState<Note | null>(null);
 
-	const sortedNotes = useMemo(
-		() =>
-			[...notes].sort(
-				(a, b) =>
-					new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-			),
-		[notes],
-	);
-	const sortedArchivedNotes = useMemo(
-		() =>
-			[...archivedNotes].sort(
-				(a, b) =>
-					new Date(b.createdAt).getTime() - new Date(a.createdAt).getTime(),
-			),
-		[archivedNotes],
-	);
+	const sortedNotes = notes;
+	const sortedArchivedNotes = archivedNotes;
 
 	const isArquivadas = activeTab === "arquivadas";
 
@@ -242,6 +228,7 @@ export function NotesPage({ notes, archivedNotes }: NotesPageProps) {
 				note={noteDetails}
 				open={detailsOpen}
 				onOpenChange={handleDetailsOpenChange}
+				onEdit={handleEditRequest}
 			/>
 
 			<ConfirmActionDialog