From 1e563a89733f897efba461c42bc08afc76320463 Mon Sep 17 00:00:00 2001
From: Matthieu MALVACHE <matthieu@root.fr>
Date: Thu, 2 Oct 2025 14:48:45 +0200
Subject: [PATCH] fix: Fix sidebar footer overflow causing page height
 extension
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add overflow-hidden to sidebar container to prevent absolute positioned menu from extending page height
- Improve theme consistency in email viewer security indicators
- Add AI spam analysis display (X-Spam-LLM header support)
- Enhance dark mode support with better color variables
- Update CLAUDE.md with commit/push guidelines

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 CLAUDE.md                         |   3 +-
 TODO.md                           |   1 +
 app/[locale]/layout.tsx           |  20 ++++++
 app/globals.css                   |   2 +
 components/email/email-viewer.tsx | 109 ++++++++++++++++++++----------
 components/layout/sidebar.tsx     |   2 +-
 lib/email-headers.ts              |  42 ++++++++----
 lib/jmap/types.ts                 |   6 +-
 8 files changed, 134 insertions(+), 51 deletions(-)

diff --git a/CLAUDE.md b/CLAUDE.md
index 8ffc13b..0be4722 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -45,4 +45,5 @@ This project uses **next-intl** for internationalization with support for Englis
 
 8. **User preference**: Language selection is persisted and overrides browser detection
 - When you are not sure, check the official documentation online.
-- Always use last versions. Reduce external dependencies as well (less is better).
\ No newline at end of file
+- Always use last versions. Reduce external dependencies as well (less is better).
+- Only commit/push when I confirm the issue/task you are working on is ok.
\ No newline at end of file
diff --git a/TODO.md b/TODO.md
index 96ec747..8171715 100644
--- a/TODO.md
+++ b/TODO.md
@@ -204,4 +204,5 @@
 - [x] Fixed plain text emails displaying on one line (smart HTML/text version selection)
 - [x] Fixed light mode not applying properly (replaced hardcoded colors with CSS variables)
 - [x] Fixed all hardcoded colors in email viewer for proper theme support
+- [x] Fixed sidebar footer menu extending page height when scrolling (overflow containment)
 
diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index a5a4511..12c881f 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -43,6 +43,26 @@ export default async function LocaleLayout({
 
   return (
     <html lang={locale} suppressHydrationWarning>
+      <head>
+        <script
+          dangerouslySetInnerHTML={{
+            __html: `
+              (function() {
+                try {
+                  const stored = localStorage.getItem('theme-storage');
+                  const theme = stored ? JSON.parse(stored).state.theme : 'system';
+                  const systemTheme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+                  const resolved = theme === 'system' ? systemTheme : theme;
+                  document.documentElement.classList.remove('light', 'dark');
+                  document.documentElement.classList.add(resolved);
+                } catch (e) {
+                  document.documentElement.classList.add('light');
+                }
+              })();
+            `,
+          }}
+        />
+      </head>
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
diff --git a/app/globals.css b/app/globals.css
index 9648b54..ebd90d6 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -1,5 +1,7 @@
 @import "tailwindcss";
 
+@custom-variant dark (&:where(.dark, .dark *));
+
 :root {
   --color-border: #e2e8f0;
   --color-input: #e2e8f0;
diff --git a/components/email/email-viewer.tsx b/components/email/email-viewer.tsx
index ee71112..9c6bbaa 100644
--- a/components/email/email-viewer.tsx
+++ b/components/email/email-viewer.tsx
@@ -53,6 +53,8 @@ import {
   List,
   Code,
   Copy,
+  Brain,
+  Sparkles,
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 
@@ -184,20 +186,11 @@ export function EmailViewer({
     // Additional headers
     if (email.headers) {
       source += '\n--- Additional Headers ---\n';
-      // Check if headers is an array (which seems to be the case based on error)
-      if (Array.isArray(email.headers)) {
-        email.headers.forEach((header: any) => {
-          if (header && typeof header === 'object') {
-            source += `${header.name || 'Unknown'}: ${header.value || ''}\n`;
-          }
-        });
-      } else {
-        // Handle as object
-        Object.entries(email.headers).forEach(([key, value]) => {
-          const val = Array.isArray(value) ? value.join(', ') : String(value);
-          source += `${key}: ${val}\n`;
-        });
-      }
+      // Headers should now always be a Record after client processing
+      Object.entries(email.headers).forEach(([key, value]) => {
+        const val = Array.isArray(value) ? value.join('\n    ') : String(value);
+        source += `${key}: ${val}\n`;
+      });
     }
 
     // Authentication results
@@ -803,8 +796,8 @@ export function EmailViewer({
                   {/* Security & Authentication Section */}
                   {(email.authenticationResults || email.spamScore !== undefined) && (
                     <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
-                      <div className="bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-950/30 dark:to-indigo-950/30 px-4 py-2 border-b border-blue-200 dark:border-blue-800">
-                        <h3 className="text-xs font-semibold text-blue-700 dark:text-blue-300 uppercase tracking-wider flex items-center gap-2">
+                      <div className="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+                        <h3 className="text-xs font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-wider flex items-center gap-2">
                           <ShieldCheck className="w-3.5 h-3.5" />
                           Security & Authentication
                         </h3>
@@ -816,7 +809,7 @@ export function EmailViewer({
                             {/* SPF Check */}
                             {email.authenticationResults.spf && (
                               <div className={cn(
-                                "px-3 py-2 rounded-md border",
+                                "px-3 py-2 rounded-md",
                                 getSecurityStatus(email.authenticationResults.spf.result).bgColor,
                                 getSecurityStatus(email.authenticationResults.spf.result).borderColor
                               )}>
@@ -830,7 +823,7 @@ export function EmailViewer({
                                   {getSecurityStatus(email.authenticationResults.spf.result).icon === 'minus' &&
                                     <Minus className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.spf.result).color)} />}
                                   <div>
-                                    <div className="text-xs font-medium">SPF</div>
+                                    <div className="text-xs font-medium text-gray-900 dark:text-gray-100">SPF</div>
                                     <div className={cn("text-xs capitalize", getSecurityStatus(email.authenticationResults.spf.result).color)}>
                                       {email.authenticationResults.spf.result}
                                     </div>
@@ -847,7 +840,7 @@ export function EmailViewer({
                             {/* DKIM Check */}
                             {email.authenticationResults.dkim && (
                               <div className={cn(
-                                "px-3 py-2 rounded-md border",
+                                "px-3 py-2 rounded-md",
                                 getSecurityStatus(email.authenticationResults.dkim.result).bgColor,
                                 getSecurityStatus(email.authenticationResults.dkim.result).borderColor
                               )}>
@@ -861,7 +854,7 @@ export function EmailViewer({
                                   {getSecurityStatus(email.authenticationResults.dkim.result).icon === 'minus' &&
                                     <Minus className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dkim.result).color)} />}
                                   <div>
-                                    <div className="text-xs font-medium">DKIM</div>
+                                    <div className="text-xs font-medium text-gray-900 dark:text-gray-100">DKIM</div>
                                     <div className={cn("text-xs capitalize", getSecurityStatus(email.authenticationResults.dkim.result).color)}>
                                       {email.authenticationResults.dkim.result}
                                     </div>
@@ -878,7 +871,7 @@ export function EmailViewer({
                             {/* DMARC Check */}
                             {email.authenticationResults.dmarc && (
                               <div className={cn(
-                                "px-3 py-2 rounded-md border",
+                                "px-3 py-2 rounded-md",
                                 getSecurityStatus(email.authenticationResults.dmarc.result).bgColor,
                                 getSecurityStatus(email.authenticationResults.dmarc.result).borderColor
                               )}>
@@ -892,7 +885,7 @@ export function EmailViewer({
                                   {getSecurityStatus(email.authenticationResults.dmarc.result).icon === 'minus' &&
                                     <Minus className={cn("w-4 h-4", getSecurityStatus(email.authenticationResults.dmarc.result).color)} />}
                                   <div>
-                                    <div className="text-xs font-medium">DMARC</div>
+                                    <div className="text-xs font-medium text-gray-900 dark:text-gray-100">DMARC</div>
                                     <div className={cn("text-xs capitalize", getSecurityStatus(email.authenticationResults.dmarc.result).color)}>
                                       {email.authenticationResults.dmarc.result}
                                     </div>
@@ -909,25 +902,25 @@ export function EmailViewer({
                             {/* Spam Score */}
                             {email.spamScore !== undefined && (
                               <div className={cn(
-                                "px-3 py-2 rounded-md border",
-                                email.spamScore > 5 ? "bg-red-50 dark:bg-red-950/30 border-red-200 dark:border-red-800" :
-                                email.spamScore > 2 ? "bg-amber-50 dark:bg-amber-950/30 border-amber-200 dark:border-amber-800" :
-                                "bg-green-50 dark:bg-green-950/30 border-green-200 dark:border-green-800"
+                                "px-3 py-2 rounded-md",
+                                email.spamScore > 5 ? "bg-gray-50 dark:bg-gray-800 border-l-4 border-red-600 dark:border-red-500" :
+                                email.spamScore > 2 ? "bg-gray-50 dark:bg-gray-800 border-l-4 border-amber-600 dark:border-amber-500" :
+                                "bg-gray-50 dark:bg-gray-800 border-l-4 border-green-600 dark:border-green-500"
                               )}>
                                 <div className="flex items-center gap-2">
                                   <Shield className={cn(
                                     "w-4 h-4",
-                                    email.spamScore > 5 ? "text-red-600 dark:text-red-400" :
-                                    email.spamScore > 2 ? "text-amber-600 dark:text-amber-400" :
-                                    "text-green-600 dark:text-green-400"
+                                    email.spamScore > 5 ? "text-red-700 dark:text-red-400" :
+                                    email.spamScore > 2 ? "text-amber-700 dark:text-amber-400" :
+                                    "text-green-700 dark:text-green-400"
                                   )} />
                                   <div>
-                                    <div className="text-xs font-medium">Spam Score</div>
+                                    <div className="text-xs font-medium text-gray-900 dark:text-gray-100">Spam Score</div>
                                     <div className={cn(
                                       "text-xs",
-                                      email.spamScore > 5 ? "text-red-600 dark:text-red-400" :
-                                      email.spamScore > 2 ? "text-amber-600 dark:text-amber-400" :
-                                      "text-green-600 dark:text-green-400"
+                                      email.spamScore > 5 ? "text-red-700 dark:text-red-400" :
+                                      email.spamScore > 2 ? "text-amber-700 dark:text-amber-400" :
+                                      "text-green-700 dark:text-green-400"
                                     )}>
                                       {email.spamScore.toFixed(1)}
                                     </div>
@@ -942,6 +935,50 @@ export function EmailViewer({
                             )}
                           </div>
                         )}
+
+                        {/* AI Analysis (X-Spam-LLM) - Full width card */}
+                        {email.spamLLM && (
+                          <div className={cn(
+                            "mt-3 px-4 py-3 rounded-lg",
+                            email.spamLLM.verdict === 'LEGITIMATE'
+                              ? "bg-gray-50 dark:bg-gray-800 border-l-4 border-green-600 dark:border-green-500"
+                              : email.spamLLM.verdict === 'SPAM'
+                              ? "bg-gray-50 dark:bg-gray-800 border-l-4 border-red-600 dark:border-red-500"
+                              : "bg-gray-50 dark:bg-gray-800 border-l-4 border-amber-600 dark:border-amber-500"
+                          )}>
+                            <div className="flex items-start gap-3">
+                              <div className="flex-shrink-0 mt-0.5">
+                                {email.spamLLM.verdict === 'LEGITIMATE' ? (
+                                  <div className="flex items-center gap-1.5">
+                                    <Brain className="w-4 h-4 text-green-700 dark:text-green-400" />
+                                    <Sparkles className="w-3 h-3 text-green-700 dark:text-green-400" />
+                                  </div>
+                                ) : email.spamLLM.verdict === 'SPAM' ? (
+                                  <ShieldAlert className="w-4 h-4 text-red-700 dark:text-red-400" />
+                                ) : (
+                                  <AlertTriangle className="w-4 h-4 text-amber-700 dark:text-amber-400" />
+                                )}
+                              </div>
+                              <div className="flex-1 min-w-0">
+                                <div className="flex items-center gap-2 mb-1">
+                                  <span className={cn(
+                                    "text-xs font-semibold uppercase tracking-wide",
+                                    email.spamLLM.verdict === 'LEGITIMATE'
+                                      ? "text-green-700 dark:text-green-400"
+                                      : email.spamLLM.verdict === 'SPAM'
+                                      ? "text-red-700 dark:text-red-400"
+                                      : "text-amber-700 dark:text-amber-400"
+                                  )}>
+                                    AI Analysis: {email.spamLLM.verdict}
+                                  </span>
+                                </div>
+                                <p className="text-xs text-gray-700 dark:text-gray-300 leading-relaxed">
+                                  {email.spamLLM.explanation}
+                                </p>
+                              </div>
+                            </div>
+                          </div>
+                        )}
                       </div>
                     </div>
                   )}
@@ -949,9 +986,9 @@ export function EmailViewer({
                   {/* Technical Details Section - Only show if we have useful technical info */}
                   {(email.messageId || email.replyTo?.length || (email.sentAt && email.receivedAt &&
                     Math.abs(new Date(email.sentAt).getTime() - new Date(email.receivedAt).getTime()) > 60000)) && (
-                    <div className="border border-border rounded-lg overflow-hidden">
-                      <div className="bg-gradient-to-r from-muted/50 to-muted px-4 py-2 border-b border-border">
-                        <h3 className="text-xs font-semibold text-foreground uppercase tracking-wider flex items-center gap-2">
+                    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden">
+                      <div className="bg-gray-50 dark:bg-gray-800 px-4 py-2 border-b border-gray-200 dark:border-gray-700">
+                        <h3 className="text-xs font-semibold text-gray-900 dark:text-gray-100 uppercase tracking-wider flex items-center gap-2">
                           <Network className="w-3.5 h-3.5" />
                           Technical Details
                         </h3>
diff --git a/components/layout/sidebar.tsx b/components/layout/sidebar.tsx
index 6cff32c..d2132b6 100644
--- a/components/layout/sidebar.tsx
+++ b/components/layout/sidebar.tsx
@@ -298,7 +298,7 @@ export function Sidebar({
   return (
     <div
       className={cn(
-        "relative flex flex-col h-full border-r transition-all duration-300",
+        "relative flex flex-col h-full border-r transition-all duration-300 overflow-hidden",
         "bg-secondary border-border",
         isCollapsed ? "w-16" : "w-64",
         className
diff --git a/lib/email-headers.ts b/lib/email-headers.ts
index 9fccf61..1b99e04 100644
--- a/lib/email-headers.ts
+++ b/lib/email-headers.ts
@@ -129,38 +129,56 @@ export function getSecurityStatus(result?: string): {
   switch (result) {
     case 'pass':
       return {
-        color: 'text-green-600 dark:text-green-400',
+        color: 'text-green-700 dark:text-green-400',
         icon: 'check',
-        bgColor: 'bg-green-50 dark:bg-green-950/30',
-        borderColor: 'border-green-200 dark:border-green-800'
+        bgColor: 'bg-gray-50 dark:bg-gray-800',
+        borderColor: 'border-l-4 border-green-600 dark:border-green-500'
       };
     case 'fail':
     case 'permerror':
       return {
-        color: 'text-red-600 dark:text-red-400',
+        color: 'text-red-700 dark:text-red-400',
         icon: 'x',
-        bgColor: 'bg-red-50 dark:bg-red-950/30',
-        borderColor: 'border-red-200 dark:border-red-800'
+        bgColor: 'bg-gray-50 dark:bg-gray-800',
+        borderColor: 'border-l-4 border-red-600 dark:border-red-500'
       };
     case 'softfail':
     case 'neutral':
     case 'temperror':
       return {
-        color: 'text-amber-600 dark:text-amber-400',
+        color: 'text-amber-700 dark:text-amber-400',
         icon: 'alert',
-        bgColor: 'bg-amber-50 dark:bg-amber-950/30',
-        borderColor: 'border-amber-200 dark:border-amber-800'
+        bgColor: 'bg-gray-50 dark:bg-gray-800',
+        borderColor: 'border-l-4 border-amber-600 dark:border-amber-500'
       };
     default:
       return {
-        color: 'text-gray-400 dark:text-gray-500',
+        color: 'text-gray-700 dark:text-gray-400',
         icon: 'minus',
-        bgColor: 'bg-gray-50 dark:bg-gray-900',
-        borderColor: 'border-gray-200 dark:border-gray-700'
+        bgColor: 'bg-gray-50 dark:bg-gray-800',
+        borderColor: 'border-l-4 border-gray-400 dark:border-gray-600'
       };
   }
 }
 
+/**
+ * Parse X-Spam-LLM header to extract AI verdict and explanation
+ */
+export function parseSpamLLM(header: string): { verdict: string; explanation: string } | null {
+  // Format: "LEGITIMATE (explanation)" or "SPAM (explanation)"
+  // Trim the header first to remove any leading/trailing whitespace
+  const trimmed = header.trim();
+  const match = trimmed.match(/^(LEGITIMATE|SPAM|SUSPICIOUS)\s*\((.+)\)\s*$/i);
+
+  if (match) {
+    return {
+      verdict: match[1].toUpperCase(),
+      explanation: match[2].trim()
+    };
+  }
+  return null;
+}
+
 /**
  * Extract list headers (List-Unsubscribe, List-Id, etc.)
  */
diff --git a/lib/jmap/types.ts b/lib/jmap/types.ts
index 042fd2e..b1917ee 100644
--- a/lib/jmap/types.ts
+++ b/lib/jmap/types.ts
@@ -27,11 +27,15 @@ export interface Email {
   messageId?: string;
   inReplyTo?: string[];
   references?: string[];
-  headers?: Record<string, string | string[]> | EmailHeader[];
+  headers?: Record<string, string | string[]>;
   // Security headers parsed
   authenticationResults?: AuthenticationResults;
   spamScore?: number;
   spamStatus?: string;
+  spamLLM?: {
+    verdict: string;
+    explanation: string;
+  };
 }
 
 export interface AuthenticationResults {