git.gladyson/openmonetis
1
0
Fork 1
mirror of https://github.com/felipegcoutinho/openmonetis.git synced 2026-06-14 00:56:00 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(dashboard): refina experiencia dos widgets

Browse Source
This commit is contained in:
Felipe Coutinho
2026-05-31 15:18:43 -03:00
parent 402f0072af
commit 35abe1b0bf
39 changed files with 887 additions and 592 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,8 @@
import { RiFileList2Line, RiPencilLine } from "@remixicon/react";
import {
RiCalendarLine,
RiFileList2Line,
RiPencilLine,
} from "@remixicon/react";
import type { Note } from "@/features/notes/components/types";
import {
buildNoteDisplayTitle,
@@ -7,6 +11,11 @@ import {
} from "@/features/notes/lib/formatters";
import { Badge } from "@/shared/components/ui/badge";
import { Button } from "@/shared/components/ui/button";
import {
Tooltip,
TooltipContent,
TooltipTrigger,
} from "@/shared/components/ui/tooltip";
type NoteListItemProps = {
note: Note;
@@ -21,43 +30,59 @@ export function NoteListItem({
}: NoteListItemProps) {
const displayTitle = buildNoteDisplayTitle(note.title);
const createdAtLabel = formatNoteCreatedAt(note.createdAt);
const isTask = note.type === "tarefa";
return (
<div className="group flex items-center justify-between gap-2 transition-all duration-300 py-2">
<li className="group flex items-center justify-between gap-2 py-1.5 transition-all duration-300">
<div className="min-w-0 flex-1">
<p className="truncate text-sm font-medium text-foreground">
{displayTitle}
</p>
<div className="mt-1 flex items-center gap-2">
<Badge variant="outline" className="h-5 px-1.5 text-xs">
{getNoteTasksSummary(note)}
</Badge>
<div className="mt-1 flex min-w-0 items-center gap-2">
{isTask ? (
<Badge variant="outline" className="h-5 px-1.5 text-xs">
{getNoteTasksSummary(note)}
</Badge>
) : null}
<p className="truncate text-xs text-muted-foreground">
{createdAtLabel}
<span className="inline-flex items-center gap-1">
<RiCalendarLine className="size-3.5 shrink-0" />
{createdAtLabel}
</span>
</p>
</div>
</div>
<div className="flex shrink-0 items-center">
<Button
variant="link"
size="icon-sm"
className="transition-opacity text-primary hover:opacity-80"
onClick={() => onOpenEdit(note)}
aria-label={`Editar anotação ${displayTitle}`}
>
<RiPencilLine className="size-4" />
</Button>
<Button
variant="link"
size="icon-sm"
className="transition-opacity text-primary hover:opacity-80"
onClick={() => onOpenDetails(note)}
aria-label={`Ver detalhes da anotação ${displayTitle}`}
>
<RiFileList2Line className="size-4" />
</Button>
<div className="flex shrink-0 items-center gap-0.5">
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon-sm"
className="text-primary/70 opacity-70 transition-all hover:text-primary hover:opacity-100 focus-visible:text-primary focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100"
onClick={() => onOpenEdit(note)}
aria-label={`Editar anotação ${displayTitle}`}
>
<RiPencilLine className="size-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">Editar anotação</TooltipContent>
</Tooltip>
<Tooltip>
<TooltipTrigger asChild>
<Button
variant="ghost"
size="icon-sm"
className="text-primary/70 opacity-70 transition-all hover:text-primary hover:opacity-100 focus-visible:text-primary focus-visible:opacity-100 group-hover:opacity-100 group-focus-within:opacity-100"
onClick={() => onOpenDetails(note)}
aria-label={`Ver detalhes da anotação ${displayTitle}`}
>
<RiFileList2Line className="size-4" />
</Button>
</TooltipTrigger>
<TooltipContent side="top">Ver detalhes</TooltipContent>
</Tooltip>
</div>
</div>
</li>
);
}

2
src/features/dashboard/components/notes/notes-widget-view.tsx
View File

@@ -27,7 +27,7 @@ export function NotesWidgetView({
}: NotesWidgetViewProps) {
return (
<>
<div className="flex flex-col gap-4 px-0">
<div className="flex flex-col px-0">
<NotesList
notes={notes}
onOpenEdit={onOpenEdit}