blog: Bump to 0.0.3 version.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "personal-blog",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "private": true,
   "author": "Hadad Darajat",
   "type": "module",

src/client/components/ai/AnalysisModal.tsx

@@ -3,12 +3,11 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState, useCallback } from "react";
 import { createPortal } from "react-dom";
-import { X, Sparkles, AlertCircle } from "lucide-react";
-import { ReasoningSection } from "./ReasoningSection";
+import { X, Sparkles, AlertCircle, Brain, ChevronDown, ChevronUp } from "lucide-react";
 import { siteConfig } from "@shared/config";
-import { Marked } from "marked";
+import { renderMarkdown } from "../../utils/markdownRenderer";
 import type { AnalysisState } from "@shared/types";
 import type { CSSProperties } from "react";
 
@@ -17,36 +16,34 @@ interface AnalysisModalProps {
   onClose: () => void;
 }
 
-const marked = new Marked();
-marked.setOptions({
-  gfm: true,
-  breaks: true,
-});
-
 const overlayStyle: CSSProperties = {
   position: "fixed",
   top: 0,
   left: 0,
   right: 0,
   bottom: 0,
-  backgroundColor: "rgba(0, 0, 0, 0.5)",
   zIndex: 1000,
   display: "flex",
-  alignItems: "center",
+  alignItems: "flex-end",
   justifyContent: "center",
-  padding: "var(--spacing-md)",
+  padding: "0 var(--spacing-md)",
+  pointerEvents: "none",
 };
 
-const modalStyle: CSSProperties = {
+const panelStyle: CSSProperties = {
   width: "100%",
-  maxWidth: "800px",
-  maxHeight: "90vh",
+  maxWidth: "var(--max-width-container)",
+  height: "70vh",
   backgroundColor: "var(--color-background)",
-  borderRadius: "var(--border-radius-lg)",
-  boxShadow: "var(--shadow-lg)",
+  borderRadius: "var(--border-radius-lg) var(--border-radius-lg) 0 0",
+  boxShadow: "0 -8px 32px rgba(0, 0, 0, 0.2)",
   display: "flex",
   flexDirection: "column",
   overflow: "hidden",
+  pointerEvents: "auto",
+  animation: "slideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1)",
+  border: "1px solid var(--color-border)",
+  borderBottom: "none",
 };
 
 const headerStyle: CSSProperties = {
@@ -59,31 +56,43 @@ const headerStyle: CSSProperties = {
   flexShrink: 0,
 };
 
-const headerTitleContainerStyle: CSSProperties = {
+const headerLeftStyle: CSSProperties = {
   display: "flex",
   alignItems: "center",
   gap: "var(--spacing-sm)",
 };
 
-const headerIconStyle: CSSProperties = {
-  color: "var(--color-accent)",
+const headerIconContainerStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "32px",
+  height: "32px",
+  borderRadius: "var(--border-radius-md)",
+  backgroundColor: "var(--color-accent)",
+  color: "#ffffff",
 };
 
 const headerTitleStyle: CSSProperties = {
-  fontSize: "var(--font-size-lg)",
+  fontSize: "var(--font-size-base)",
   fontWeight: 600,
   color: "var(--color-text-primary)",
 };
 
+const headerSubtitleStyle: CSSProperties = {
+  fontSize: "var(--font-size-xs)",
+  color: "var(--color-text-muted)",
+};
+
 const closeButtonStyle: CSSProperties = {
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   width: "32px",
   height: "32px",
-  borderRadius: "var(--border-radius-sm)",
-  border: "none",
-  backgroundColor: "transparent",
+  borderRadius: "var(--border-radius-md)",
+  border: "2px solid var(--color-border)",
+  backgroundColor: "var(--color-surface)",
   color: "var(--color-text-muted)",
   cursor: "pointer",
   transition: "all var(--transition-fast)",
@@ -92,7 +101,15 @@ const closeButtonStyle: CSSProperties = {
 const contentContainerStyle: CSSProperties = {
   flex: 1,
   overflowY: "auto",
+  overflowX: "hidden",
+  scrollbarGutter: "stable",
+};
+
+const contentInnerStyle: CSSProperties = {
   padding: "var(--spacing-lg)",
+  display: "flex",
+  flexDirection: "column",
+  gap: "var(--spacing-lg)",
 };
 
 const loadingContainerStyle: CSSProperties = {
@@ -105,11 +122,23 @@ const loadingContainerStyle: CSSProperties = {
   color: "var(--color-text-muted)",
 };
 
-const spinnerStyle: CSSProperties = {
+const loadingSpinnerStyle: CSSProperties = {
   animation: "spin 1s linear infinite",
   color: "var(--color-accent)",
 };
 
+const loadingTextStyle: CSSProperties = {
+  fontSize: "var(--font-size-sm)",
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-sm)",
+};
+
+const loadingDotsStyle: CSSProperties = {
+  display: "inline-flex",
+  gap: "4px",
+};
+
 const errorContainerStyle: CSSProperties = {
   display: "flex",
   flexDirection: "column",
@@ -125,6 +154,67 @@ const errorIconStyle: CSSProperties = {
   color: "#ef4444",
 };
 
+const reasoningSectionStyle: CSSProperties = {
+  borderRadius: "var(--border-radius-md)",
+  border: "1px solid var(--color-border)",
+  backgroundColor: "var(--color-surface)",
+  overflow: "hidden",
+};
+
+const reasoningHeaderStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-sm)",
+  padding: "var(--spacing-sm) var(--spacing-md)",
+  cursor: "pointer",
+  userSelect: "none",
+  backgroundColor: "var(--color-surface)",
+  transition: "background-color var(--transition-fast)",
+};
+
+const reasoningIconStyle: CSSProperties = {
+  color: "var(--color-accent)",
+  flexShrink: 0,
+};
+
+const reasoningTitleStyle: CSSProperties = {
+  flex: 1,
+  fontSize: "var(--font-size-sm)",
+  fontWeight: 600,
+  color: "var(--color-text-primary)",
+  display: "flex",
+  alignItems: "center",
+  gap: "var(--spacing-xs)",
+};
+
+const pulsingDotStyle: CSSProperties = {
+  width: "6px",
+  height: "6px",
+  borderRadius: "50%",
+  backgroundColor: "var(--color-accent)",
+  animation: "pulse 1.5s ease-in-out infinite",
+};
+
+const chevronStyle: CSSProperties = {
+  color: "var(--color-text-muted)",
+  flexShrink: 0,
+  transition: "transform var(--transition-fast)",
+};
+
+const reasoningContentStyle: CSSProperties = {
+  maxHeight: "350px",
+  overflowY: "auto",
+  padding: "var(--spacing-md)",
+  borderTop: "1px solid var(--color-border)",
+  scrollbarGutter: "stable",
+};
+
+const reasoningTextStyle: CSSProperties = {
+  fontSize: "var(--font-size-sm)",
+  color: "var(--color-text-secondary)",
+  lineHeight: 1.7,
+};
+
 const analysisContentStyle: CSSProperties = {
   fontSize: "var(--font-size-base)",
   color: "var(--color-text-primary)",
@@ -132,25 +222,99 @@ const analysisContentStyle: CSSProperties = {
 };
 
 const streamingIndicatorStyle: CSSProperties = {
-  marginTop: "var(--spacing-md)",
   display: "flex",
   alignItems: "center",
   gap: "var(--spacing-sm)",
+  padding: "var(--spacing-sm) 0",
   color: "var(--color-text-muted)",
+  fontSize: "var(--font-size-sm)",
 };
 
-const streamingTextStyle: CSSProperties = {
-  fontSize: "var(--font-size-sm)",
+const streamingDotStyle: CSSProperties = {
+  width: "8px",
+  height: "8px",
+  borderRadius: "50%",
+  backgroundColor: "var(--color-accent)",
+  animation: "pulse 1s ease-in-out infinite",
 };
 
 export const AnalysisModal = ({ analysisState, onClose }: AnalysisModalProps): JSX.Element | null => {
   const contentRef = useRef<HTMLDivElement>(null);
+  const reasoningContentRef = useRef<HTMLDivElement>(null);
+  const [isReasoningExpanded, setIsReasoningExpanded] = useState<boolean>(false);
+  const [userToggledReasoning, setUserToggledReasoning] = useState<boolean>(false);
+  const [userHasScrolledContent, setUserHasScrolledContent] = useState<boolean>(false);
+  const [userHasScrolledReasoning, setUserHasScrolledReasoning] = useState<boolean>(false);
+  const lastContentScrollTopRef = useRef<number>(0);
+  const lastReasoningScrollTopRef = useRef<number>(0);
+  const hasAutoCollapsedRef = useRef<boolean>(false);
+
+  useEffect((): void => {
+    if (userToggledReasoning) {
+      return;
+    }
+
+    if (analysisState.isLoading && analysisState.reasoning.length > 0 && !analysisState.isReasoningComplete) {
+      setIsReasoningExpanded(true);
+    }
+
+    if (analysisState.isReasoningComplete && analysisState.reasoning.length > 0 && !hasAutoCollapsedRef.current) {
+      hasAutoCollapsedRef.current = true;
+      setIsReasoningExpanded(false);
+    }
+  }, [analysisState.isLoading, analysisState.isReasoningComplete, analysisState.reasoning, userToggledReasoning]);
 
   useEffect((): void => {
-    if (contentRef.current && analysisState.content) {
-      contentRef.current.scrollTop = contentRef.current.scrollHeight;
+    if (contentRef.current && analysisState.content && !userHasScrolledContent) {
+      const element = contentRef.current;
+      const isNearBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 100;
+      if (isNearBottom || lastContentScrollTopRef.current === 0) {
+        element.scrollTop = element.scrollHeight;
+      }
     }
-  }, [analysisState.content]);
+  }, [analysisState.content, userHasScrolledContent]);
+
+  useEffect((): void => {
+    if (reasoningContentRef.current && analysisState.reasoning && !userHasScrolledReasoning && isReasoningExpanded) {
+      const element = reasoningContentRef.current;
+      const isNearBottom = element.scrollHeight - element.scrollTop - element.clientHeight < 50;
+      if (isNearBottom || lastReasoningScrollTopRef.current === 0) {
+        element.scrollTop = element.scrollHeight;
+      }
+    }
+  }, [analysisState.reasoning, userHasScrolledReasoning, isReasoningExpanded]);
+
+  const handleContentScroll = useCallback((): void => {
+    if (!contentRef.current) {
+      return;
+    }
+    const element = contentRef.current;
+    const currentScrollTop = element.scrollTop;
+    if (currentScrollTop < lastContentScrollTopRef.current - 10) {
+      setUserHasScrolledContent(true);
+    }
+    const isAtBottom = element.scrollHeight - currentScrollTop - element.clientHeight < 20;
+    if (isAtBottom && analysisState.isLoading) {
+      setUserHasScrolledContent(false);
+    }
+    lastContentScrollTopRef.current = currentScrollTop;
+  }, [analysisState.isLoading]);
+
+  const handleReasoningScroll = useCallback((): void => {
+    if (!reasoningContentRef.current) {
+      return;
+    }
+    const element = reasoningContentRef.current;
+    const currentScrollTop = element.scrollTop;
+    if (currentScrollTop < lastReasoningScrollTopRef.current - 10) {
+      setUserHasScrolledReasoning(true);
+    }
+    const isAtBottom = element.scrollHeight - currentScrollTop - element.clientHeight < 20;
+    if (isAtBottom && analysisState.isLoading && !analysisState.isReasoningComplete) {
+      setUserHasScrolledReasoning(false);
+    }
+    lastReasoningScrollTopRef.current = currentScrollTop;
+  }, [analysisState.isLoading, analysisState.isReasoningComplete]);
 
   useEffect((): (() => void) => {
     const handleEscape = (event: KeyboardEvent): void => {
@@ -160,29 +324,87 @@ export const AnalysisModal = ({ analysisState, onClose }: AnalysisModalProps): J
     };
 
     document.addEventListener("keydown", handleEscape);
-    document.body.style.overflow = "hidden";
 
     return (): void => {
       document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "";
     };
   }, [onClose]);
 
+  useEffect((): void => {
+    if (!analysisState.isOpen) {
+      setUserHasScrolledContent(false);
+      setUserHasScrolledReasoning(false);
+      setUserToggledReasoning(false);
+      setIsReasoningExpanded(false);
+      lastContentScrollTopRef.current = 0;
+      lastReasoningScrollTopRef.current = 0;
+      hasAutoCollapsedRef.current = false;
+    }
+  }, [analysisState.isOpen]);
+
   if (!analysisState.isOpen) {
     return null;
   }
 
-  const handleOverlayClick = (event: React.MouseEvent<HTMLDivElement>): void => {
-    if (event.target === event.currentTarget) {
-      onClose();
+  const handleReasoningToggle = (): void => {
+    setUserToggledReasoning(true);
+    setIsReasoningExpanded((previous) => !previous);
+  };
+
+  const renderReasoningSection = (): JSX.Element | null => {
+    if (!analysisState.reasoning) {
+      return null;
     }
+
+    const reasoningHtml = renderMarkdown(analysisState.reasoning);
+
+    return (
+      <div style={reasoningSectionStyle}>
+        <div
+          style={reasoningHeaderStyle}
+          onClick={handleReasoningToggle}
+          role="button"
+          tabIndex={0}
+          onKeyDown={(event): void => {
+            if (event.key === "Enter" || event.key === " ") {
+              handleReasoningToggle();
+            }
+          }}
+        >
+          <Brain size={16} style={reasoningIconStyle} />
+          <span style={reasoningTitleStyle}>
+            {siteConfig.messages.reasoning}
+            {analysisState.isLoading && !analysisState.isReasoningComplete && (
+              <span style={pulsingDotStyle} />
+            )}
+          </span>
+          {isReasoningExpanded ? (
+            <ChevronUp size={16} style={chevronStyle} />
+          ) : (
+            <ChevronDown size={16} style={chevronStyle} />
+          )}
+        </div>
+        {isReasoningExpanded && (
+          <div
+            ref={reasoningContentRef}
+            style={reasoningContentStyle}
+            onScroll={handleReasoningScroll}
+          >
+            <div
+              style={reasoningTextStyle}
+              dangerouslySetInnerHTML={{ __html: reasoningHtml }}
+            />
+          </div>
+        )}
+      </div>
+    );
   };
 
   const renderContent = (): JSX.Element => {
     if (analysisState.error) {
       return (
         <div style={errorContainerStyle}>
-          <AlertCircle size={48} style={errorIconStyle} />
+          <AlertCircle size={40} style={errorIconStyle} />
           <span>{analysisState.error}</span>
         </div>
       );
@@ -191,46 +413,56 @@ export const AnalysisModal = ({ analysisState, onClose }: AnalysisModalProps): J
     if (analysisState.isLoading && !analysisState.reasoning && !analysisState.content) {
       return (
         <div style={loadingContainerStyle}>
-          <Sparkles size={48} style={spinnerStyle} />
-          <span>{siteConfig.messages.analyzing}</span>
+          <Sparkles size={40} style={loadingSpinnerStyle} />
+          <div style={loadingTextStyle}>
+            <span>{siteConfig.messages.analyzing}</span>
+            <span style={loadingDotsStyle}>
+              <span style={{ ...pulsingDotStyle, animationDelay: "0s" }} />
+              <span style={{ ...pulsingDotStyle, animationDelay: "0.2s" }} />
+              <span style={{ ...pulsingDotStyle, animationDelay: "0.4s" }} />
+            </span>
+          </div>
         </div>
       );
     }
 
-    const htmlContent = analysisState.content ? marked.parse(analysisState.content) as string : "";
+    const contentHtml = renderMarkdown(analysisState.content);
 
     return (
-      <>
-        <ReasoningSection
-          reasoning={analysisState.reasoning}
-          isReasoningComplete={analysisState.isReasoningComplete}
-          isLoading={analysisState.isLoading}
-        />
+      <div style={contentInnerStyle}>
+        {renderReasoningSection()}
         {analysisState.content && (
           <div
             style={analysisContentStyle}
-            dangerouslySetInnerHTML={{ __html: htmlContent }}
+            dangerouslySetInnerHTML={{ __html: contentHtml }}
           />
         )}
         {analysisState.isLoading && analysisState.content && (
           <div style={streamingIndicatorStyle}>
-            <Sparkles size={16} style={spinnerStyle} />
-            <span style={streamingTextStyle}>{siteConfig.messages.analyzing}</span>
+            <span style={streamingDotStyle} />
+            <span>{siteConfig.messages.analyzing}</span>
           </div>
         )}
-      </>
+      </div>
     );
   };
 
   const modalContent = (
-    <div style={overlayStyle} onClick={handleOverlayClick}>
-      <div style={modalStyle}>
+    <div style={overlayStyle}>
+      <div style={panelStyle}>
         <div style={headerStyle}>
-          <div style={headerTitleContainerStyle}>
-            <Sparkles size={20} style={headerIconStyle} />
-            <span style={headerTitleStyle}>
-              {analysisState.isLoading ? siteConfig.messages.analyzing : siteConfig.messages.analysisComplete}
-            </span>
+          <div style={headerLeftStyle}>
+            <div style={headerIconContainerStyle}>
+              <Sparkles size={16} />
+            </div>
+            <div>
+              <div style={headerTitleStyle}>
+                {analysisState.isLoading ? siteConfig.messages.analyzing : siteConfig.messages.analysisComplete}
+              </div>
+              <div style={headerSubtitleStyle}>
+                {siteConfig.messages.analysisInfo}
+              </div>
+            </div>
           </div>
           <button
             type="button"
@@ -238,10 +470,14 @@ export const AnalysisModal = ({ analysisState, onClose }: AnalysisModalProps): J
             style={closeButtonStyle}
             title={siteConfig.messages.closeAnalysis}
           >
-            <X size={20} />
+            <X size={18} />
           </button>
         </div>
-        <div style={contentContainerStyle} ref={contentRef}>
+        <div
+          ref={contentRef}
+          style={contentContainerStyle}
+          onScroll={handleContentScroll}
+        >
           {renderContent()}
         </div>
       </div>

src/client/components/ai/AnalyzeButton.tsx

@@ -1,70 +0,0 @@
-//
-// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
-// SPDX-License-Identifier: Apache-2.0
-//
-
-import { Sparkles } from "lucide-react";
-import { siteConfig } from "@shared/config";
-import type { CSSProperties } from "react";
-
-interface AnalyzeButtonProps {
-  onClick: () => void;
-  isLoading: boolean;
-}
-
-const buttonContainerStyle: CSSProperties = {
-  position: "fixed",
-  bottom: "calc(var(--footer-height) + var(--spacing-lg))",
-  left: "50%",
-  transform: "translateX(-50%)",
-  zIndex: 90,
-};
-
-const buttonStyle: CSSProperties = {
-  display: "inline-flex",
-  alignItems: "center",
-  justifyContent: "center",
-  gap: "var(--spacing-sm)",
-  padding: "var(--spacing-sm) var(--spacing-lg)",
-  borderRadius: "var(--border-radius-lg)",
-  border: "1px solid var(--color-border)",
-  backgroundColor: "rgba(var(--color-surface-rgb, 248, 249, 250), 0.85)",
-  backdropFilter: "blur(8px)",
-  color: "var(--color-text-primary)",
-  fontSize: "var(--font-size-sm)",
-  fontWeight: 500,
-  cursor: "pointer",
-  transition: "all var(--transition-fast)",
-  boxShadow: "var(--shadow-md)",
-  whiteSpace: "nowrap",
-};
-
-const buttonDisabledStyle: CSSProperties = {
-  ...buttonStyle,
-  opacity: 0.7,
-  cursor: "not-allowed",
-};
-
-const iconStyle: CSSProperties = {
-  color: "var(--color-accent)",
-};
-
-const spinnerStyle: CSSProperties = {
-  animation: "spin 1s linear infinite",
-};
-
-export const AnalyzeButton = ({ onClick, isLoading }: AnalyzeButtonProps): JSX.Element => {
-  return (
-    <div style={buttonContainerStyle}>
-      <button
-        type="button"
-        onClick={onClick}
-        disabled={isLoading}
-        style={isLoading ? buttonDisabledStyle : buttonStyle}
-      >
-        <Sparkles size={16} style={isLoading ? { ...iconStyle, ...spinnerStyle } : iconStyle} />
-        {isLoading ? siteConfig.messages.analyzing : siteConfig.messages.analyzeWithAI}
-      </button>
-    </div>
-  );
-};

src/client/components/ai/ReasoningSection.tsx

@@ -1,143 +0,0 @@
-//
-// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
-// SPDX-License-Identifier: Apache-2.0
-//
-
-import { useState, useEffect } from "react";
-import { ChevronDown, ChevronRight, Brain } from "lucide-react";
-import { siteConfig } from "@shared/config";
-import type { CSSProperties } from "react";
-
-interface ReasoningSectionProps {
-  reasoning: string;
-  isReasoningComplete: boolean;
-  isLoading: boolean;
-}
-
-const containerStyle: CSSProperties = {
-  marginBottom: "var(--spacing-lg)",
-  borderRadius: "var(--border-radius-md)",
-  border: "1px solid var(--color-border)",
-  backgroundColor: "var(--color-surface)",
-  overflow: "hidden",
-};
-
-const headerStyle: CSSProperties = {
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--spacing-sm)",
-  padding: "var(--spacing-md)",
-  cursor: "pointer",
-  userSelect: "none",
-  backgroundColor: "var(--color-surface)",
-  transition: "background-color var(--transition-fast)",
-};
-
-const headerIconStyle: CSSProperties = {
-  color: "var(--color-accent)",
-  flexShrink: 0,
-};
-
-const headerTitleStyle: CSSProperties = {
-  flex: 1,
-  fontSize: "var(--font-size-sm)",
-  fontWeight: 600,
-  color: "var(--color-text-primary)",
-  display: "flex",
-  alignItems: "center",
-  gap: "var(--spacing-xs)",
-};
-
-const pulsingDotStyle: CSSProperties = {
-  width: "8px",
-  height: "8px",
-  borderRadius: "50%",
-  backgroundColor: "var(--color-accent)",
-  animation: "pulse 1.5s ease-in-out infinite",
-};
-
-const chevronStyle: CSSProperties = {
-  color: "var(--color-text-muted)",
-  flexShrink: 0,
-  transition: "transform var(--transition-fast)",
-};
-
-const contentContainerStyle: CSSProperties = {
-  maxHeight: "300px",
-  overflowY: "auto",
-  padding: "var(--spacing-md)",
-  borderTop: "1px solid var(--color-border)",
-};
-
-const contentTextStyle: CSSProperties = {
-  fontSize: "var(--font-size-sm)",
-  color: "var(--color-text-secondary)",
-  lineHeight: 1.6,
-  whiteSpace: "pre-wrap",
-  wordBreak: "break-word",
-  fontFamily: "var(--font-family-mono)",
-};
-
-export const ReasoningSection = ({
-  reasoning,
-  isReasoningComplete,
-  isLoading,
-}: ReasoningSectionProps): JSX.Element | null => {
-  const [isExpanded, setIsExpanded] = useState<boolean>(false);
-  const [userToggled, setUserToggled] = useState<boolean>(false);
-
-  useEffect((): void => {
-    if (userToggled) {
-      return;
-    }
-
-    if (isLoading && reasoning.length > 0 && !isReasoningComplete) {
-      setIsExpanded(true);
-    }
-
-    if (isReasoningComplete && reasoning.length > 0) {
-      setIsExpanded(false);
-    }
-  }, [isLoading, reasoning, isReasoningComplete, userToggled]);
-
-  const handleToggle = (): void => {
-    setUserToggled(true);
-    setIsExpanded((previous) => !previous);
-  };
-
-  if (!reasoning) {
-    return null;
-  }
-
-  return (
-    <div style={containerStyle}>
-      <div
-        style={headerStyle}
-        onClick={handleToggle}
-        role="button"
-        tabIndex={0}
-        onKeyDown={(event): void => {
-          if (event.key === "Enter" || event.key === " ") {
-            handleToggle();
-          }
-        }}
-      >
-        <Brain size={18} style={headerIconStyle} />
-        <span style={headerTitleStyle}>
-          {siteConfig.messages.reasoning}
-          {isLoading && !isReasoningComplete && <span style={pulsingDotStyle} />}
-        </span>
-        {isExpanded ? (
-          <ChevronDown size={18} style={chevronStyle} />
-        ) : (
-          <ChevronRight size={18} style={chevronStyle} />
-        )}
-      </div>
-      {isExpanded && (
-        <div style={contentContainerStyle}>
-          <div style={contentTextStyle}>{reasoning}</div>
-        </div>
-      )}
-    </div>
-  );
-};

src/client/components/layout/Header.tsx

@@ -7,7 +7,8 @@ import { Link } from "react-router-dom";
 import { siteConfig } from "@shared/config";
 import { useTheme } from "../../contexts/ThemeContext";
 import { usePageContext } from "../../contexts/PageContext";
-import { Sun, Moon, MonitorCog, Home, ChevronRight } from "lucide-react";
+import { useAnalysisContext } from "../../contexts/AnalysisContext";
+import { Sun, Moon, MonitorCog, Home, ChevronRight, Sparkles } from "lucide-react";
 import type { CSSProperties } from "react";
 
 const headerStyle: CSSProperties = {
@@ -113,6 +114,40 @@ const iconButtonStyle: CSSProperties = {
   textDecoration: "none",
 };
 
+const analyzeButtonStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "36px",
+  height: "36px",
+  borderRadius: "var(--border-radius-md)",
+  border: "1px solid var(--color-accent)",
+  backgroundColor: "var(--color-surface)",
+  color: "var(--color-accent)",
+  cursor: "pointer",
+  transition: "all var(--transition-fast)",
+  textDecoration: "none",
+};
+
+const analyzeButtonDisabledStyle: CSSProperties = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "36px",
+  height: "36px",
+  borderRadius: "var(--border-radius-md)",
+  border: "1px solid var(--color-border)",
+  backgroundColor: "var(--color-surface)",
+  color: "var(--color-text-muted)",
+  cursor: "not-allowed",
+  opacity: 0.6,
+  textDecoration: "none",
+};
+
+const spinnerIconStyle: CSSProperties = {
+  animation: "spin 1s linear infinite",
+};
+
 const ThemeIcon = ({ theme }: { theme: "system" | "light" | "dark" }): JSX.Element => {
   if (theme === "light") {
     return <Sun size={18} />;
@@ -126,6 +161,7 @@ const ThemeIcon = ({ theme }: { theme: "system" | "light" | "dark" }): JSX.Eleme
 export const Header = (): JSX.Element => {
   const { theme, setTheme } = useTheme();
   const { currentPostTitle } = usePageContext();
+  const { analysisState, startAnalysis, postContent } = useAnalysisContext();
 
   const cycleTheme = (): void => {
     const themes: Array<"system" | "light" | "dark"> = ["system", "light", "dark"];
@@ -135,6 +171,14 @@ export const Header = (): JSX.Element => {
   };
 
   const isOnPostPage = currentPostTitle !== null;
+  const canAnalyze = isOnPostPage && postContent !== null && !analysisState.isOpen && !analysisState.isLoading;
+  const showAnalyzeButton = siteConfig.features.enableAIAnalysis && isOnPostPage;
+
+  const handleAnalyzeClick = (): void => {
+    if (canAnalyze) {
+      startAnalysis();
+    }
+  };
 
   return (
     <header style={headerStyle}>
@@ -166,6 +210,17 @@ export const Header = (): JSX.Element => {
         </div>
 
         <div style={rightSectionStyle}>
+          {showAnalyzeButton && (
+            <button
+              type="button"
+              onClick={handleAnalyzeClick}
+              disabled={!canAnalyze}
+              style={canAnalyze ? analyzeButtonStyle : analyzeButtonDisabledStyle}
+              title={siteConfig.messages.analyzeWithAI}
+            >
+              <Sparkles size={18} style={analysisState.isLoading ? spinnerIconStyle : undefined} />
+            </button>
+          )}
           {isOnPostPage && (
             <Link to="/" style={iconButtonStyle} title={siteConfig.messages.backToHome}>
               <Home size={18} />

src/client/components/layout/Layout.tsx

@@ -17,13 +17,18 @@ const layoutStyle: CSSProperties = {
   display: "flex",
   flexDirection: "column",
   overflow: "hidden",
-  transition: "filter var(--transition-fast)",
+  transition: "filter var(--transition-base), transform var(--transition-base)",
 };
 
 const layoutBlurredStyle: CSSProperties = {
-  ...layoutStyle,
-  filter: "blur(4px)",
+  height: "100%",
+  display: "flex",
+  flexDirection: "column",
+  overflow: "hidden",
+  filter: "blur(20px) brightness(0.4) saturate(0.5)",
+  transform: "scale(0.95)",
   pointerEvents: "none",
+  transition: "filter var(--transition-base), transform var(--transition-base)",
 };
 
 const mainStyle: CSSProperties = {

src/client/contexts/AnalysisContext.tsx

@@ -3,12 +3,27 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-import { createContext, useContext, useState, useCallback, useMemo } from "react";
+import { createContext, useContext, useState, useCallback, useMemo, useRef, useEffect } from "react";
 import type { ReactNode } from "react";
+import type { AnalysisState, AIStreamChunk } from "@shared/types";
+
+const initialAnalysisState: AnalysisState = {
+  isOpen: false,
+  isLoading: false,
+  reasoning: "",
+  content: "",
+  isReasoningComplete: false,
+  error: null,
+};
 
 interface AnalysisContextValue {
   isBlurred: boolean;
-  setIsBlurred: (value: boolean) => void;
+  analysisState: AnalysisState;
+  postContent: string | null;
+  postTitle: string | null;
+  setPostInfo: (content: string | null, title: string | null) => void;
+  startAnalysis: () => Promise<void>;
+  resetAnalysis: () => void;
 }
 
 const AnalysisContext = createContext<AnalysisContextValue | null>(null);
@@ -18,16 +33,186 @@ interface AnalysisProviderProps {
 }
 
 export const AnalysisProvider = ({ children }: AnalysisProviderProps): JSX.Element => {
-  const [isBlurred, setIsBlurredState] = useState<boolean>(false);
+  const [analysisState, setAnalysisState] = useState<AnalysisState>(initialAnalysisState);
+  const [postContent, setPostContent] = useState<string | null>(null);
+  const [postTitle, setPostTitle] = useState<string | null>(null);
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  const isBlurred = analysisState.isOpen;
+
+  const setPostInfo = useCallback((content: string | null, title: string | null): void => {
+    setPostContent(content);
+    setPostTitle(title);
+  }, []);
+
+  const resetAnalysis = useCallback((): void => {
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+      abortControllerRef.current = null;
+    }
+    setAnalysisState(initialAnalysisState);
+  }, []);
+
+  const startAnalysis = useCallback(async (): Promise<void> => {
+    if (!postContent || !postTitle) {
+      return;
+    }
+
+    if (abortControllerRef.current) {
+      abortControllerRef.current.abort();
+    }
+
+    abortControllerRef.current = new AbortController();
+
+    setAnalysisState({
+      isOpen: true,
+      isLoading: true,
+      reasoning: "",
+      content: "",
+      isReasoningComplete: false,
+      error: null,
+    });
+
+    try {
+      const response = await fetch("/api/analyze", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({ content: postContent, title: postTitle }),
+        signal: abortControllerRef.current.signal,
+      });
+
+      if (!response.ok) {
+        throw new Error("Failed to start analysis");
+      }
+
+      const reader = response.body?.getReader();
+      if (!reader) {
+        throw new Error("No response stream");
+      }
+
+      const decoder = new TextDecoder("utf-8");
+      let buffer = "";
+      let hasReceivedContent = false;
+
+      while (true) {
+        const { done, value } = await reader.read();
+
+        if (done) {
+          break;
+        }
+
+        buffer += decoder.decode(value, { stream: true });
+        const lines = buffer.split("\n");
+        buffer = lines.pop() || "";
+
+        for (const line of lines) {
+          const trimmedLine = line.trim();
+
+          if (!trimmedLine || !trimmedLine.startsWith("data: ")) {
+            continue;
+          }
+
+          const dataContent = trimmedLine.slice(6);
+
+          try {
+            const chunk: AIStreamChunk = JSON.parse(dataContent);
+
+            if (chunk.type === "error") {
+              setAnalysisState((previous) => ({
+                ...previous,
+                isLoading: false,
+                error: chunk.content || "An error occurred",
+              }));
+              return;
+            }
+
+            if (chunk.type === "done") {
+              setAnalysisState((previous) => ({
+                ...previous,
+                isLoading: false,
+                isReasoningComplete: true,
+              }));
+              return;
+            }
+
+            if (chunk.type === "reasoning" && chunk.content) {
+              setAnalysisState((previous) => ({
+                ...previous,
+                reasoning: previous.reasoning + chunk.content,
+              }));
+            }
+
+            if (chunk.type === "content" && chunk.content) {
+              if (!hasReceivedContent) {
+                hasReceivedContent = true;
+                setAnalysisState((previous) => ({
+                  ...previous,
+                  isReasoningComplete: true,
+                }));
+              }
+              setAnalysisState((previous) => ({
+                ...previous,
+                content: previous.content + chunk.content,
+              }));
+            }
+          } catch {
+            continue;
+          }
+        }
+      }
+
+      setAnalysisState((previous) => ({
+        ...previous,
+        isLoading: false,
+        isReasoningComplete: true,
+      }));
+    } catch (error) {
+      if (error instanceof Error && error.name === "AbortError") {
+        return;
+      }
+
+      setAnalysisState((previous) => ({
+        ...previous,
+        isLoading: false,
+        error: error instanceof Error ? error.message : "An error occurred",
+      }));
+    }
+  }, [postContent, postTitle]);
+
+  useEffect((): (() => void) => {
+    const handlePopState = (): void => {
+      if (analysisState.isOpen) {
+        resetAnalysis();
+      }
+    };
+
+    window.addEventListener("popstate", handlePopState);
+
+    return (): void => {
+      window.removeEventListener("popstate", handlePopState);
+    };
+  }, [analysisState.isOpen, resetAnalysis]);
 
-  const setIsBlurred = useCallback((value: boolean): void => {
-    setIsBlurredState(value);
+  useEffect((): (() => void) => {
+    return (): void => {
+      if (abortControllerRef.current) {
+        abortControllerRef.current.abort();
+        abortControllerRef.current = null;
+      }
+    };
   }, []);
 
   const contextValue = useMemo((): AnalysisContextValue => ({
     isBlurred,
-    setIsBlurred,
-  }), [isBlurred, setIsBlurred]);
+    analysisState,
+    postContent,
+    postTitle,
+    setPostInfo,
+    startAnalysis,
+    resetAnalysis,
+  }), [isBlurred, analysisState, postContent, postTitle, setPostInfo, startAnalysis, resetAnalysis]);
 
   return (
     <AnalysisContext.Provider value={contextValue}>

src/client/hooks/useAIAnalysis.ts

@@ -1,178 +0,0 @@
-//
-// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
-// SPDX-License-Identifier: Apache-2.0
-//
-
-import { useState, useCallback, useRef } from "react";
-import type { AnalysisState, AIStreamChunk } from "@shared/types";
-
-interface UseAIAnalysisResult {
-  analysisState: AnalysisState;
-  startAnalysis: (content: string, title: string) => Promise<void>;
-  resetAnalysis: () => void;
-  abortAnalysis: () => void;
-}
-
-const initialState: AnalysisState = {
-  isOpen: false,
-  isLoading: false,
-  reasoning: "",
-  content: "",
-  isReasoningComplete: false,
-  error: null,
-};
-
-export const useAIAnalysis = (): UseAIAnalysisResult => {
-  const [analysisState, setAnalysisState] = useState<AnalysisState>(initialState);
-  const abortControllerRef = useRef<AbortController | null>(null);
-
-  const resetAnalysis = useCallback((): void => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-    setAnalysisState(initialState);
-  }, []);
-
-  const abortAnalysis = useCallback((): void => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-      abortControllerRef.current = null;
-    }
-    setAnalysisState((previous) => ({
-      ...previous,
-      isLoading: false,
-    }));
-  }, []);
-
-  const startAnalysis = useCallback(async (content: string, title: string): Promise<void> => {
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-
-    abortControllerRef.current = new AbortController();
-
-    setAnalysisState({
-      isOpen: true,
-      isLoading: true,
-      reasoning: "",
-      content: "",
-      isReasoningComplete: false,
-      error: null,
-    });
-
-    try {
-      const response = await fetch("/api/analyze", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json",
-        },
-        body: JSON.stringify({ content, title }),
-        signal: abortControllerRef.current.signal,
-      });
-
-      if (!response.ok) {
-        throw new Error("Failed to start analysis");
-      }
-
-      const reader = response.body?.getReader();
-      if (!reader) {
-        throw new Error("No response stream");
-      }
-
-      const decoder = new TextDecoder("utf-8");
-      let buffer = "";
-      let hasReceivedContent = false;
-
-      while (true) {
-        const { done, value } = await reader.read();
-
-        if (done) {
-          break;
-        }
-
-        buffer += decoder.decode(value, { stream: true });
-        const lines = buffer.split("\n");
-        buffer = lines.pop() || "";
-
-        for (const line of lines) {
-          const trimmedLine = line.trim();
-
-          if (!trimmedLine || !trimmedLine.startsWith("data: ")) {
-            continue;
-          }
-
-          const dataContent = trimmedLine.slice(6);
-
-          try {
-            const chunk: AIStreamChunk = JSON.parse(dataContent);
-
-            if (chunk.type === "error") {
-              setAnalysisState((previous) => ({
-                ...previous,
-                isLoading: false,
-                error: chunk.content || "An error occurred",
-              }));
-              return;
-            }
-
-            if (chunk.type === "done") {
-              setAnalysisState((previous) => ({
-                ...previous,
-                isLoading: false,
-                isReasoningComplete: true,
-              }));
-              return;
-            }
-
-            if (chunk.type === "reasoning" && chunk.content) {
-              setAnalysisState((previous) => ({
-                ...previous,
-                reasoning: previous.reasoning + chunk.content,
-              }));
-            }
-
-            if (chunk.type === "content" && chunk.content) {
-              if (!hasReceivedContent) {
-                hasReceivedContent = true;
-                setAnalysisState((previous) => ({
-                  ...previous,
-                  isReasoningComplete: true,
-                }));
-              }
-              setAnalysisState((previous) => ({
-                ...previous,
-                content: previous.content + chunk.content,
-              }));
-            }
-          } catch {
-            continue;
-          }
-        }
-      }
-
-      setAnalysisState((previous) => ({
-        ...previous,
-        isLoading: false,
-        isReasoningComplete: true,
-      }));
-    } catch (error) {
-      if (error instanceof Error && error.name === "AbortError") {
-        return;
-      }
-
-      setAnalysisState((previous) => ({
-        ...previous,
-        isLoading: false,
-        error: error instanceof Error ? error.message : "An error occurred",
-      }));
-    }
-  }, []);
-
-  return {
-    analysisState,
-    startAnalysis,
-    resetAnalysis,
-    abortAnalysis,
-  };
-};

src/client/pages/PostPage.tsx

@@ -4,13 +4,11 @@
 //
 
 import { useParams, Link } from "react-router-dom";
-import { useEffect, useCallback } from "react";
+import { useEffect, useCallback, useMemo } from "react";
 import { usePost } from "../hooks/usePosts";
 import { usePageContext } from "../contexts/PageContext";
 import { useAnalysisContext } from "../contexts/AnalysisContext";
-import { useAIAnalysis } from "../hooks/useAIAnalysis";
 import { PostContent } from "../components/blog/PostContent";
-import { AnalyzeButton } from "../components/ai/AnalyzeButton";
 import { AnalysisModal } from "../components/ai/AnalysisModal";
 import { Head } from "../components/common/Head";
 import { siteConfig } from "@shared/config";
@@ -67,31 +65,27 @@ export const PostPage = (): JSX.Element => {
   const { slug } = useParams<{ slug: string }>();
   const { post, loading, error } = usePost(slug || "");
   const { setCurrentPostTitle } = usePageContext();
-  const { setIsBlurred } = useAnalysisContext();
-  const { analysisState, startAnalysis, resetAnalysis } = useAIAnalysis();
+  const { analysisState, setPostInfo, resetAnalysis } = useAnalysisContext();
+
+  const textContent = useMemo((): string | null => {
+    if (post) {
+      return extractTextFromHtml(post.content);
+    }
+    return null;
+  }, [post]);
 
   useEffect((): (() => void) => {
     if (post) {
       setCurrentPostTitle(post.frontMatter.title);
+      setPostInfo(textContent, post.frontMatter.title);
     }
 
     return (): void => {
       setCurrentPostTitle(null);
+      setPostInfo(null, null);
+      resetAnalysis();
     };
-  }, [post, setCurrentPostTitle]);
-
-  useEffect((): void => {
-    setIsBlurred(analysisState.isOpen);
-  }, [analysisState.isOpen, setIsBlurred]);
-
-  const handleAnalyzeClick = useCallback((): void => {
-    if (!post) {
-      return;
-    }
-
-    const textContent = extractTextFromHtml(post.content);
-    startAnalysis(textContent, post.frontMatter.title);
-  }, [post, startAnalysis]);
+  }, [post, textContent, setCurrentPostTitle, setPostInfo, resetAnalysis]);
 
   const handleCloseAnalysis = useCallback((): void => {
     resetAnalysis();
@@ -123,8 +117,6 @@ export const PostPage = (): JSX.Element => {
     );
   }
 
-  const showAnalyzeButton = siteConfig.features.enableAIAnalysis && !analysisState.isOpen;
-
   return (
     <div style={containerStyle}>
       <Head
@@ -134,12 +126,6 @@ export const PostPage = (): JSX.Element => {
         type="article"
       />
       <PostContent post={post} />
-      {showAnalyzeButton && (
-        <AnalyzeButton
-          onClick={handleAnalyzeClick}
-          isLoading={analysisState.isLoading}
-        />
-      )}
       <AnalysisModal
         analysisState={analysisState}
         onClose={handleCloseAnalysis}

src/client/styles/global.css

@@ -437,4 +437,24 @@ iframe {
   50% {
     opacity: 0.4;
   }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }

src/client/utils/markdownRenderer.ts

@@ -0,0 +1,30 @@
+//
+// SPDX-FileCopyrightText: Hadad <hadad@linuxmail.org>
+// SPDX-License-Identifier: Apache-2.0
+//
+
+import { Marked } from "marked";
+import { markedHighlight } from "marked-highlight";
+import hljs from "highlight.js";
+
+const marked = new Marked(
+  markedHighlight({
+    langPrefix: "hljs language-",
+    highlight(code: string, lang: string): string {
+      const language = hljs.getLanguage(lang) ? lang : "plaintext";
+      return hljs.highlight(code, { language }).value;
+    },
+  })
+);
+
+marked.setOptions({
+  gfm: true,
+  breaks: true,
+});
+
+export const renderMarkdown = (content: string): string => {
+  if (!content) {
+    return "";
+  }
+  return marked.parse(content) as string;
+};

src/shared/config.ts

@@ -28,6 +28,7 @@ export const siteConfig = {
     next: "Next",
     analyzeWithAI: "Analyze this article",
     analyzing: "Analyzing...",
+    analysisInfo: "AI Analysis",
     analysisComplete: "Analysis Complete",
     reasoning: "Reasoning",
     closeAnalysis: "Close",

vite.config.ts

@@ -20,6 +20,7 @@ export default defineConfig({
   },
   
   build: {
+    chunkSizeWarningLimit: 1600,
     outDir: "dist/client",
     emptyOutDir: true,
   },