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:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user