feat: adicionar página de anotações arquivadas e componente de notificação

- Implementa a página de anotações arquivadas, que busca as notas
  arquivadas do usuário e as exibe utilizando o componente NotesPage.

- Cria o componente NotificationBell para gerenciar e exibir
  notificações de pagamentos, incluindo a formatação de datas e
  valores monetários. O componente também apresenta um sistema de
  tooltip e dropdown para interação do usuário.

components/calendario/calendar-legend.tsx

@@ -5,22 +5,25 @@ import type { CalendarEvent } from "@/components/calendario/types";
 import { cn } from "@/lib/utils/ui";
 
 const LEGEND_ITEMS: Array<{
-  type: CalendarEvent["type"];
+  type?: CalendarEvent["type"];
   label: string;
+  dotColor?: string;
 }> = [
-  { type: "lancamento", label: "Lançamento financeiro" },
+  { type: "lancamento", label: "Lançamentos" },
   { type: "boleto", label: "Boleto com vencimento" },
   { type: "cartao", label: "Vencimento de cartão" },
+  { label: "Pagamento fatura", dotColor: "bg-green-600" },
 ];
 
 export function CalendarLegend() {
   return (
     <div className="flex flex-wrap gap-3 rounded-sm border border-border/60 bg-muted/20 p-2 text-xs font-medium text-muted-foreground">
-      {LEGEND_ITEMS.map((item) => {
-        const style = EVENT_TYPE_STYLES[item.type];
+      {LEGEND_ITEMS.map((item, index) => {
+        const dotColor =
+          item.dotColor || (item.type ? EVENT_TYPE_STYLES[item.type].dot : "");
         return (
-          <span key={item.type} className="flex items-center gap-2">
-            <span className={cn("size-3 rounded-full", style.dot)} />
+          <span key={item.type || index} className="flex items-center gap-2">
+            <span className={cn("size-3 rounded-full", dotColor)} />
             {item.label}
           </span>
         );