feat(dashboard): tableau de bord Second Brain configurable avec chargement progressif

Briefing granulaire, pistes rapides puis enrichissement async, layout persisté v5, suggestions agents, intégration Gmail et navigation sidebar alignée sur /home. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-07-14 16:50:53 +00:00
parent d38a99586b
commit 30da592ba2
62 changed files with 7741 additions and 335 deletions
--- a/memento-note/components/dashboard-sentiment-chip.tsx
+++ b/memento-note/components/dashboard-sentiment-chip.tsx
@@ -0,0 +1,113 @@
+'use client'
+
+import { Heart } from 'lucide-react'
+import type { LucideIcon } from 'lucide-react'
+import { useLanguage } from '@/lib/i18n'
+import { DashboardWidgetTitleRow } from '@/components/dashboard-widget-title-row'
+
+interface EmotionMeta {
+  Icon: LucideIcon
+  color: string
+}
+
+export interface DashboardSentimentChipProps {
+  available: boolean
+  loading?: boolean
+  dominantEmotion?: string
+  summary?: string
+  emotions?: Record<string, number>
+  emotionMeta: Record<string, EmotionMeta>
+}
+
+export function DashboardSentimentChip({
+  available,
+  loading,
+  dominantEmotion,
+  summary,
+  emotions,
+  emotionMeta,
+}: DashboardSentimentChipProps) {
+  const { t } = useLanguage()
+
+  if (loading) {
+    return (
+      <div className="rounded-2xl border border-border/30 bg-white dark:bg-zinc-900 p-4">
+        <div className="h-24 rounded-xl bg-stone-50 dark:bg-zinc-950/30 animate-pulse" />
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-2xl border border-border/30 bg-white dark:bg-zinc-900 p-4 min-h-[140px]">
+      <DashboardWidgetTitleRow
+        widgetId="sentiment"
+        icon={<Heart size={12} className="text-brand-accent" />}
+        title={t('homeDashboard.sentiment')}
+      />
+
+      {!available || !dominantEmotion ? (
+        <p className="text-[11px] text-concrete italic leading-relaxed">
+          {t('homeDashboard.notEnoughNotes')}
+        </p>
+      ) : (
+        <div className="space-y-3">
+          <div className="flex items-center gap-3">
+            {(() => {
+              const meta = emotionMeta[dominantEmotion] || emotionMeta.reflective
+              const Icon = meta?.Icon
+              return (
+                <div
+                  className="w-10 h-10 rounded-xl flex items-center justify-center shrink-0"
+                  style={{ backgroundColor: `${meta.color}18`, color: meta.color }}
+                >
+                  {Icon && <Icon size={18} strokeWidth={1.75} />}
+                </div>
+              )
+            })()}
+            <div className="min-w-0">
+              <p className="text-lg font-serif font-semibold text-ink dark:text-dark-ink">
+                {t(`homeDashboard.emotions.${dominantEmotion}`)}
+              </p>
+              <p className="text-[9px] font-mono uppercase tracking-wider text-concrete">
+                {t('homeDashboard.sentimentDominant')}
+              </p>
+            </div>
+          </div>
+
+          {summary && (
+            <p className="text-[11px] text-concrete leading-relaxed border-s-2 border-brand-accent/30 ps-3">
+              {summary}
+            </p>
+          )}
+
+          {emotions && (
+            <div className="space-y-2 pt-1">
+              {Object.entries(emotions)
+                .sort(([, a], [, b]) => b - a)
+                .slice(0, 4)
+                .map(([key, val]) => {
+                  const em = emotionMeta[key]
+                  return (
+                    <div key={key} className="flex items-center gap-2">
+                      <span className="text-[8px] font-mono uppercase text-concrete w-16 truncate">
+                        {t(`homeDashboard.emotions.${key}`)}
+                      </span>
+                      <div className="flex-1 h-1.5 rounded-full bg-stone-100 dark:bg-zinc-800 overflow-hidden">
+                        <div
+                          className="h-full rounded-full"
+                          style={{
+                            width: `${Math.min(val * 100, 100)}%`,
+                            backgroundColor: em?.color || 'var(--color-brand-accent)',
+                          }}
+                        />
+                      </div>
+                    </div>
+                  )
+                })}
+            </div>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}