git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-05-09 11:01:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: aprimora a edição e visualização de anotações

Browse Source
This commit is contained in:
Felipe Coutinho
2026-03-16 01:14:33 +00:00
parent fc86b9002e
commit 69df314db7
6 changed files with 123 additions and 95 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/features/dashboard/components/notes/note-list-item.tsx
View File

@@ -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}`}
>

2
src/features/notes/actions.ts
View File

@@ -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) {

41
src/features/notes/components/note-card.tsx
View File

@@ -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}

23
src/features/notes/components/note-details-dialog.tsx
View File

@@ -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

109
src/features/notes/components/note-dialog.tsx
View File

@@ -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")
}
<div className="grid grid-cols-2 overflow-hidden rounded-md border">
<button
type="button"
onClick={() => updateField("type", "nota")}
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"
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
</Label>
</div>
<div className="flex items-center gap-2">
<RadioGroupItem value="tarefa" id="tipo-tarefa" />
<Label
htmlFor="tipo-tarefa"
className="font-normal cursor-pointer"
</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
</Label>
</button>
</div>
</RadioGroup>
</div>
)}
<div className="space-y-1">
<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">
<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>

21
src/features/notes/components/notes-page.tsx
View File

@@ -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