diff --git a/keep-notes/components/recent-notes-section.tsx b/keep-notes/components/recent-notes-section.tsx
index 665bf10..22d7c33 100644
--- a/keep-notes/components/recent-notes-section.tsx
+++ b/keep-notes/components/recent-notes-section.tsx
@@ -1,7 +1,7 @@
'use client'
import { Note } from '@/lib/types'
-import { Clock, FileText, Tag } from 'lucide-react'
+import { Clock } from 'lucide-react'
import { cn } from '@/lib/utils'
import { useLanguage } from '@/lib/i18n'
@@ -11,27 +11,24 @@ interface RecentNotesSectionProps {
}
export function RecentNotesSection({ recentNotes, onEdit }: RecentNotesSectionProps) {
- const { language } = useLanguage()
+ const { t } = useLanguage()
- // Show only the 3 most recent notes
const topThree = recentNotes.slice(0, 3)
if (topThree.length === 0) return null
return (
- {/* Minimalist header - matching your app style */}
- {language === 'fr' ? 'Récent' : 'Recent'}
+ {t('notes.recent')}
· {topThree.length}
- {/* Compact 3-card row */}
{topThree.map((note, index) => (
void
}) {
- const { language } = useLanguage()
- // Use contentUpdatedAt - only reflects actual content changes, not property changes (size, color, etc.)
- const timeAgo = getCompactTime(note.contentUpdatedAt || note.updatedAt, language)
+ const { t } = useLanguage()
+ const timeAgo = getCompactTime(note.contentUpdatedAt || note.updatedAt, t)
const isFirstNote = index === 0
return (
@@ -69,7 +64,6 @@ function CompactCard({
isFirstNote && "ring-2 ring-primary/20"
)}
>
- {/* Subtle left accent - colored based on recency */}
- {/* Content with left padding for accent line */}
- {/* Title */}
- {note.title || (language === 'fr' ? 'Sans titre' : 'Untitled')}
+ {note.title || t('notes.untitled')}
- {/* Preview - 2 lines max */}
{note.content?.substring(0, 80) || ''}
{note.content && note.content.length > 80 && '...'}
- {/* Footer with time and indicators */}
- {/* Time - left */}
{timeAgo}
- {/* Indicators - right */}
- {/* Notebook indicator */}
{note.notebookId && (
-
+
)}
- {/* Labels indicator */}
{note.labels && note.labels.length > 0 && (
-
+
)}
- {/* Hover indicator - top right */}
)
}
-// Compact time display - matching your app's style
-// NOTE: Ensure dates are properly parsed from database (may come as strings)
-function getCompactTime(date: Date | string, language: string): string {
+function getCompactTime(date: Date | string, t: (key: string, params?: Record) => string): string {
const now = new Date()
const then = date instanceof Date ? date : new Date(date)
- // Validate date
if (isNaN(then.getTime())) {
console.warn('Invalid date provided to getCompactTime:', date)
- return language === 'fr' ? 'date invalide' : 'invalid date'
+ return t('common.error')
}
const seconds = Math.floor((now.getTime() - then.getTime()) / 1000)
const minutes = Math.floor(seconds / 60)
const hours = Math.floor(minutes / 60)
- if (language === 'fr') {
- if (seconds < 60) return 'à l\'instant'
- if (minutes < 60) return `il y a ${minutes}m`
- if (hours < 24) return `il y a ${hours}h`
- const days = Math.floor(hours / 24)
- return `il y a ${days}j`
- } else {
- if (seconds < 60) return 'just now'
- if (minutes < 60) return `${minutes}m ago`
- if (hours < 24) return `${hours}h ago`
- const days = Math.floor(hours / 24)
- return `${days}d ago`
- }
+ if (seconds < 60) return t('time.justNow')
+ if (minutes < 60) return t('time.minutesAgo', { count: minutes })
+ if (hours < 24) return t('time.hoursAgo', { count: hours })
+ const days = Math.floor(hours / 24)
+ return t('time.daysAgo', { count: days })
}
diff --git a/keep-notes/components/reminder-dialog.tsx b/keep-notes/components/reminder-dialog.tsx
index f957528..11693ee 100644
--- a/keep-notes/components/reminder-dialog.tsx
+++ b/keep-notes/components/reminder-dialog.tsx
@@ -1,7 +1,10 @@
+'use client'
+
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { useState, useEffect } from "react"
+import { useLanguage } from '@/lib/i18n'
interface ReminderDialogProps {
open: boolean
@@ -18,6 +21,7 @@ export function ReminderDialog({
onSave,
onRemove
}: ReminderDialogProps) {
+ const { t } = useLanguage()
const [reminderDate, setReminderDate] = useState('')
const [reminderTime, setReminderTime] = useState('')
@@ -51,7 +55,6 @@ export function ReminderDialog({