Refactor FileReader and enhance note-taking functionality

- Updated the default marker color in FileReaderContent to blue for better visibility.
- Integrated current file path management in EditHistoryContext to support file-specific annotations.
- Enhanced note management in NoteBar with improved state handling and integration with EditHistoryContext.
- Added file path awareness in PDFViewer and DocumentViewer to ensure correct loading of annotations.
- Introduced FileAnnotationStorage service for persistent storage of annotations and history in localStorage.
- Improved popover behavior in LeftToolbar for better user experience.

Author: atom7xyz

src/frontend/components/reader/FileReaderContent.tsx

@@ -14,15 +14,15 @@ import 'react-pdf/dist/Page/TextLayer.css';
 import 'react-pdf/dist/Page/AnnotationLayer.css';
 
 // Define default colors
-const DEFAULT_MARKER_COLOR = 'rgba(255, 255, 0, 0.3)'; // Yellow
+const DEFAULT_MARKER_COLOR = 'rgba(0, 196, 255, 0.3)'; // Blue
 const DEFAULT_DRAWING_COLOR = '#FF0000'; // Red
 const DEFAULT_LINE_WIDTH = 2;
 
 const FileReaderContent = memo(() => {
   const navigate = useNavigate();
   const { zoomLevel, setZoomLevel, isDraggingZoom } = useZoom();
   const { activeTabId, getTabById, isLoading, setIsLoading } = useTabs();
-  const { undo, redo } = useEditHistoryContext();
+  const { undo, redo, setCurrentFilePath } = useEditHistoryContext();
 
   // Group all state hooks together at the top
   const [numPages, setNumPages] = useState<number | null>(10); // Default to 10 pages as placeholder
@@ -78,8 +78,18 @@ const FileReaderContent = memo(() => {
       if (activeTab) {
         // Only update the file path if it actually changed
         if (filePath !== activeTab.path) {
+          console.log(`Switching from ${filePath} to ${activeTab.path}`);
+          
+          // First set the current file path in the EditHistoryContext
+          // This will cause the EditHistoryContext to load annotations for the new file
+          setCurrentFilePath(activeTab.path);
+          
+          // Then update our local state
           setFilePath(activeTab.path);
 
+          // Reset the active tool when switching documents
+          setActiveTool(null);
+          
           // Check if we have a saved page position for this document
           if (documentPageMap.has(activeTab.path)) {
             setPageNumber(documentPageMap.get(activeTab.path) || 1);
@@ -95,13 +105,21 @@ const FileReaderContent = memo(() => {
     } else {
       // If no active tab, use a default file based on file type preference
       if (filePath !== DEFAULT_FILES[FileType.PDF]) {
+        // First set the current file path in the EditHistoryContext
+        setCurrentFilePath(DEFAULT_FILES[FileType.PDF]);
+        
+        // Then update our local state
         setFilePath(DEFAULT_FILES[FileType.PDF]);
+        
+        // Reset the active tool
+        setActiveTool(null);
+        
         setPageNumber(1);
       }
 
       previousActiveTabIdRef.current = null;
     }
-  }, [activeTabId, getTabById, filePath, documentPageMap, pageNumber]);
+  }, [activeTabId, getTabById, filePath, documentPageMap, pageNumber, setCurrentFilePath]);
 
   const handleDocumentLoadSuccess = useCallback((numPages?: number) => {
     if (numPages) {
@@ -278,7 +296,7 @@ const FileReaderContent = memo(() => {
 
         // Calculate new zoom level based on wheel direction
         const delta = e.deltaY < 0 ? 25 : -25; // Increase/decrease by 25%
-        const newZoom = Math.min(Math.max(zoomLevel + delta, 50), 200); // Limit between 50% and 200%
+        const newZoom = Math.min(Math.max(zoomLevel + delta, 50), 400); // Limit between 50% and 400%
 
         setZoomLevel(newZoom);
       }

src/frontend/components/reader/LeftToolbar.tsx

@@ -1,4 +1,4 @@
-import React, { memo, useState } from 'react';
+import React, { memo, useState, useRef, useEffect } from 'react';
 import { Button } from '@/components/ui/button';
 import { 
   Hand, 
@@ -81,6 +81,11 @@ const LeftToolbar = memo(({
 }: LeftToolbarProps) => {
   const { undo, redo, canUndo, canRedo } = useEditHistoryContext();
   const [openPopover, setOpenPopover] = useState<string | null>(null);
+  const popoverTriggerRefs = useRef<Record<string, HTMLDivElement | null>>({});
+  const popoverTimeoutRef = useRef<NodeJS.Timeout | null>(null);
+  
+  // Track whether a popover is open for tooltip control
+  const [isAnyPopoverOpen, setIsAnyPopoverOpen] = useState(false);
 
   // Create base tools array
   const baseTools: Tool[] = [
@@ -166,15 +171,39 @@ const LeftToolbar = memo(({
     return null;
   };
 
-  // Handle popover toggle
-  const togglePopover = (toolId: string) => {
-    if (openPopover === toolId) {
-      setOpenPopover(null);
-    } else {
+  // Handle popover hover behavior
+  const handlePopoverHover = (toolId: string, isHovering: boolean) => {
+    // Only show popovers for the active tool or if already open
+    if (toolId !== activeTool && openPopover !== toolId) {
+      return;
+    }
+    
+    if (popoverTimeoutRef.current) {
+      clearTimeout(popoverTimeoutRef.current);
+      popoverTimeoutRef.current = null;
+    }
+
+    if (isHovering) {
       setOpenPopover(toolId);
+      setIsAnyPopoverOpen(true);
+    } else {
+      // Add a small delay before closing to prevent flickering when moving between button and popover
+      popoverTimeoutRef.current = setTimeout(() => {
+        setOpenPopover(null);
+        setIsAnyPopoverOpen(false);
+      }, 300);
     }
   };
 
+  // Cleanup timeout on unmount
+  useEffect(() => {
+    return () => {
+      if (popoverTimeoutRef.current) {
+        clearTimeout(popoverTimeoutRef.current);
+      }
+    };
+  }, []);
+
   return (
     <div className="fixed left-4 top-1/2 -translate-y-1/2 flex flex-col items-center space-y-2 bg-background/90 backdrop-blur-sm p-2 rounded-lg shadow-md border border-border">
       <TooltipProvider delayDuration={300}>
@@ -212,11 +241,27 @@ const LeftToolbar = memo(({
         {/* Main tools */}
         {tools.map(tool => (
           <div key={tool.id} className="relative">
-            {tool.showPopover ? (
-              <Popover open={openPopover === tool.id} onOpenChange={() => togglePopover(tool.id)}>
+            {tool.showPopover && (activeTool === tool.id) ? (
+              <Popover 
+                open={openPopover === tool.id} 
+                onOpenChange={(open) => {
+                  if (!open && openPopover === tool.id) {
+                    setOpenPopover(null);
+                    setIsAnyPopoverOpen(false);
+                  } else if (open) {
+                    setIsAnyPopoverOpen(true);
+                  }
+                }}
+              >
                 <PopoverTrigger asChild>
-                  <div className="relative">
-                    <Tooltip>
+                  <div 
+                    className="relative"
+                    ref={(ref: HTMLDivElement | null) => { popoverTriggerRefs.current[tool.id] = ref; }}
+                    onMouseEnter={() => handlePopoverHover(tool.id, true)}
+                    onMouseLeave={() => handlePopoverHover(tool.id, false)}
+                  >
+                    {/* Only hide tooltip when tool is active or popover is open */}
+                    <Tooltip open={activeTool === tool.id || openPopover === tool.id ? false : undefined}>
                       <TooltipTrigger asChild>
                         <Button
                           variant={tool.variant || (activeTool === tool.id ? "secondary" : "ghost")}
@@ -246,7 +291,13 @@ const LeftToolbar = memo(({
                     </Tooltip>
                   </div>
                 </PopoverTrigger>
-                <PopoverContent side="right" align="start" className="w-auto p-2">
+                <PopoverContent 
+                  side="right" 
+                  align="start" 
+                  className="w-auto p-2"
+                  onMouseEnter={() => handlePopoverHover(tool.id, true)}
+                  onMouseLeave={() => handlePopoverHover(tool.id, false)}
+                >
                   {tool.id === 'marker' && (
                     <div className="space-y-2">
                       <p className="text-xs font-medium">Marker Color</p>
@@ -329,7 +380,7 @@ const LeftToolbar = memo(({
                 </PopoverContent>
               </Popover>
             ) : (
-              <Tooltip>
+              <Tooltip open={activeTool === tool.id ? false : undefined}>
                 <TooltipTrigger asChild>
                   <Button
                     variant={tool.variant || (activeTool === tool.id ? "secondary" : "ghost")}
@@ -347,6 +398,7 @@ const LeftToolbar = memo(({
                     aria-pressed={activeTool === tool.id}
                   >
                     {tool.icon}
+                    {getColorIndicator(tool.id)}
                   </Button>
                 </TooltipTrigger>
                 <TooltipContent side="right" align="center" className="max-w-[200px]">