feat(ui): panneau repliable, carnets plus lisibles et accueil plus clair

Harmonise la liste des notes et l’éditeur (titres, dates, retour),
rend la saisie rapide et les raccourcis de l’accueil utilisables
sur téléphone, et conserve le panneau latéral repliable.
This commit is contained in:
Antigravity
2026-09-05 20:53:48 +00:00
parent a7b16870a4
commit 3bdbec575a
37 changed files with 1138 additions and 482 deletions

View File

@@ -10,9 +10,7 @@ import { FusionModal } from '@/components/fusion-modal'
import { ReminderDialog } from '@/components/reminder-dialog'
import { ContextualAIChat } from '@/components/contextual-ai-chat'
import { NoteDocumentInfoPanel } from '@/components/note-document-info-panel'
import { fr } from 'date-fns/locale/fr'
import { enUS } from 'date-fns/locale/en-US'
import { formatAbsoluteDateLocalized } from '@/lib/utils/format-localized-date'
import { dateTextDirection, formatNoteCalendarDate } from '@/lib/utils/format-localized-date'
import { ChevronRight } from 'lucide-react'
import { toast } from 'sonner'
import { Note } from '@/lib/types'
@@ -34,7 +32,7 @@ interface NoteEditorFullPageProps {
export function NoteEditorFullPage({ onClose }: NoteEditorFullPageProps) {
const { t, language } = useLanguage()
const { requestAiConsent } = useAiConsent()
const dateLocale = language === 'fr' ? fr : enUS
const dateDir = dateTextDirection(language)
const { state, actions, note, readOnly, notebooks, fileInputRef, globalLabels } = useNoteEditorContext()
const [docQAAttachment, setDocQAAttachment] = useState<{ id: string; fileName: string } | null>(null)
const [attachmentsCount, setAttachmentsCount] = useState(0)
@@ -77,23 +75,37 @@ export function NoteEditorFullPage({ onClose }: NoteEditorFullPageProps) {
{/* ── main scrollable column ── */}
<div
ref={scrollRootRef}
className="flex-1 flex flex-col overflow-y-auto bg-white dark:bg-background min-w-0"
className="flex-1 flex flex-col overflow-y-auto bg-white dark:bg-background min-w-0 max-md:scroll-pb-24 max-md:pb-16"
>
{/* TOOLBAR */}
<NoteEditorToolbar mode="fullPage" onClose={onClose} onToggleAttachments={() => setUploadTrigger(v => v + 1)} attachmentsCount={attachmentsCount} />
{/* BODY — max-w-5xl, responsive px, py-16 */}
<div className="max-w-5xl mx-auto w-full px-6 sm:px-12 py-16 space-y-12 min-w-0">
<div className="max-w-5xl mx-auto w-full px-4 sm:px-12 py-8 sm:py-16 space-y-8 sm:space-y-12 min-w-0">
{/* Breadcrumb + Title block */}
<div className="space-y-4">
{/* Breadcrumb: Notebook Date */}
<div className="flex items-center gap-3 text-[12px] uppercase tracking-[.25em] font-bold">
{notebookName && <span style={{ color: 'var(--color-ink)' }}>{notebookName}</span>}
{notebookName && <ChevronRight size={10} style={{ color: 'var(--color-concrete)' }} />}
<span suppressHydrationWarning style={{ color: 'var(--color-concrete)' }}>
{formatAbsoluteDateLocalized(new Date(note.contentUpdatedAt), language, 'MMM d, yyyy', dateLocale)}
<div className="flex flex-wrap items-center gap-x-3 gap-y-1 text-[12px] font-bold min-w-0">
{notebookName && (
<span
className="uppercase tracking-[.25em] min-w-0 break-words [overflow-wrap:anywhere]"
dir="auto"
style={{ color: 'var(--color-ink)' }}
>
{notebookName}
</span>
)}
{notebookName && <ChevronRight size={10} className="shrink-0 rtl:rotate-180" style={{ color: 'var(--color-concrete)' }} />}
<span
suppressHydrationWarning
className="font-medium tracking-normal normal-case"
dir={dateDir}
lang={language === 'fa' ? 'fa' : language === 'ar' ? 'ar' : undefined}
style={{ color: 'var(--color-concrete)' }}
>
{formatNoteCalendarDate(note.contentUpdatedAt, language)}
</span>
</div>
@@ -141,7 +153,7 @@ export function NoteEditorFullPage({ onClose }: NoteEditorFullPageProps) {
/>
{/* Content area — max-w-4xl for wider reading column */}
<div className="max-w-4xl mx-auto w-full space-y-8 pb-32">
<div className="max-w-4xl mx-auto w-full space-y-8 pb-40 md:pb-32">
{state.quotaExceededFeature === 'reformulate' && (
<InlinePaywall
feature="reformulate"