feat: add google oauth

src/components/LeftSidebar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { Upload, LogIn, LogOut, FileText, Clock, ChevronLeft, ChevronRight, Settings, History, MousePointerClick, FileUp, ClipboardPaste, Loader2 } from 'lucide-react';
+import { Upload, LogIn, LogOut, FileText, Clock, ChevronLeft, ChevronRight, History, MousePointerClick, FileUp, ClipboardPaste, Loader2 } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import { FileRecord } from '../types';
@@ -10,6 +10,8 @@ interface LeftSidebarProps {
   selectedFileId: string | null;
   onFileSelect: (fileId: string) => void;
   onUploadClick: () => void;
+  canUploadAnonymously: boolean;
+  onRequireAuth: () => void;
   isCollapsed: boolean;
   onToggleCollapse: () => void;
   onUploadFiles: (files: File[]) => void;
@@ -23,6 +25,8 @@ export default function LeftSidebar({
   selectedFileId,
   onFileSelect,
   onUploadClick,
+  canUploadAnonymously,
+  onRequireAuth,
   isCollapsed,
   onToggleCollapse,
   onUploadFiles,
@@ -30,12 +34,19 @@ export default function LeftSidebar({
   loadingMore,
   onLoadMore,
 }: LeftSidebarProps) {
-  const { user, signOut } = useAuth();
+  const { user, signOut, isAuthenticated } = useAuth();
   const { t } = useLanguage();
   const [showAuthModal, setShowAuthModal] = useState(false);
   const [isDragging, setIsDragging] = useState(false);
   const fileInputRef = useRef<HTMLInputElement>(null);
   const listRef = useRef<HTMLDivElement>(null);
+  const displayName = user?.username?.trim() || user?.email || '';
+
+  useEffect(() => {
+    if (isAuthenticated) {
+      setShowAuthModal(false);
+    }
+  }, [isAuthenticated]);
 
   // ... (rest of the logic remains the same)
   // Handle scroll to load more
@@ -84,6 +95,10 @@ export default function LeftSidebar({
 
   const handleDrop = (e: React.DragEvent) => {
     e.preventDefault();
+    if (!user && !canUploadAnonymously) {
+      onRequireAuth();
+      return;
+    }
     setIsDragging(false);
 
     const droppedFiles = Array.from(e.dataTransfer.files);
@@ -97,6 +112,10 @@ export default function LeftSidebar({
   };
 
   const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (!user && !canUploadAnonymously) {
+      onRequireAuth();
+      return;
+    }
     if (e.target.files && e.target.files.length > 0) {
       onUploadFiles(Array.from(e.target.files));
     }
@@ -117,7 +136,13 @@ export default function LeftSidebar({
         </button>
 
         <button
-          onClick={onUploadClick}
+          onClick={() => {
+            if (!user && !canUploadAnonymously) {
+              onRequireAuth();
+              return;
+            }
+            onUploadClick();
+          }}
           className="p-3 rounded-xl bg-blue-600 text-white hover:bg-blue-700 shadow-lg shadow-blue-600/20 transition-all mb-6"
           title={t.common.upload}
         >
@@ -162,9 +187,15 @@ export default function LeftSidebar({
           <div className="mb-2" id="sidebar-upload-area">
             <div
               onDragOver={handleDragOver}
-              onDragLeave={handleDragLeave}
-              onDrop={handleDrop}
-              onClick={() => fileInputRef.current?.click()}
+            onDragLeave={handleDragLeave}
+            onDrop={handleDrop}
+            onClick={() => {
+                if (!user && !canUploadAnonymously) {
+                  onRequireAuth();
+                  return;
+                }
+                fileInputRef.current?.click();
+              }}
               className={`
                     border-2 border-dashed rounded-xl p-6 text-center cursor-pointer transition-all duration-200 group
                     ${isDragging
@@ -284,7 +315,7 @@ export default function LeftSidebar({
                 </svg>
               </div>
               <div className="flex-1 min-w-0">
-                <p className="text-sm font-medium text-gray-900 truncate">{user.email}</p>
+                <p className="text-sm font-medium text-gray-900 truncate">{displayName}</p>
               </div>
               <button
                 onClick={() => signOut()}