feat: remove login button from sidebar, add history toggle

src/components/LeftSidebar.tsx

@@ -1,9 +1,8 @@
 import React, { useState, useRef, useCallback, useEffect } from 'react';
-import { Upload, LogIn, LogOut, FileText, Clock, ChevronLeft, ChevronRight, History, MousePointerClick, FileUp, ClipboardPaste, Loader2 } from 'lucide-react';
+import { Upload, LogOut, FileText, Clock, ChevronLeft, ChevronRight, MousePointerClick, FileUp, ClipboardPaste, Loader2 } from 'lucide-react';
 import { useAuth } from '../contexts/AuthContext';
 import { useLanguage } from '../contexts/LanguageContext';
 import { FileRecord } from '../types';
-import AuthModal from './AuthModal';
 
 interface LeftSidebarProps {
   files: FileRecord[];
@@ -18,6 +17,8 @@ interface LeftSidebarProps {
   hasMore: boolean;
   loadingMore: boolean;
   onLoadMore: () => void;
+  historyEnabled: boolean;
+  onToggleHistory: () => void;
 }
 
 export default function LeftSidebar({
@@ -33,22 +34,16 @@ export default function LeftSidebar({
   hasMore,
   loadingMore,
   onLoadMore,
+  historyEnabled,
+  onToggleHistory,
 }: LeftSidebarProps) {
-  const { user, signOut, isAuthenticated } = useAuth();
+  const { user, signOut } = 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
   const handleScroll = useCallback(() => {
     if (!listRef.current || loadingMore || !hasMore) return;
@@ -149,19 +144,7 @@ export default function LeftSidebar({
           <Upload size={20} />
         </button>
 
-        <div className="flex-1 w-full flex flex-col items-center gap-4">
-          <button className="p-2 text-gray-400 hover:text-gray-900 transition-colors" title={t.common.history}>
-            <History size={20} />
-          </button>
-        </div>
-
-        <button
-          onClick={() => !user && setShowAuthModal(true)}
-          className="p-3 rounded-lg text-gray-600 hover:bg-gray-200 transition-colors mt-auto"
-          title={user ? 'Signed In' : t.common.login}
-        >
-          <LogIn size={20} />
-        </button>
+        <div className="flex-1 w-full flex flex-col items-center gap-4" />
       </div>
     );
   }
@@ -236,9 +219,25 @@ export default function LeftSidebar({
 
         {/* Middle Area: History */}
         <div className="flex-1 overflow-hidden flex flex-col px-4" id="sidebar-history">
-          <div className="flex items-center gap-2 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-2">
-            <Clock size={14} />
-            <span>{t.sidebar.historyHeader}</span>
+          <div className="flex items-center justify-between text-xs font-semibold text-gray-500 uppercase tracking-wider mb-3 px-2">
+            <div className="flex items-center gap-2">
+              <Clock size={14} />
+              <span>{t.sidebar.historyHeader}</span>
+            </div>
+            <button
+              onClick={onToggleHistory}
+              className={`relative w-8 h-4 rounded-full transition-colors duration-200 focus:outline-none ${
+                historyEnabled ? 'bg-blue-500' : 'bg-gray-300'
+              }`}
+              title={t.sidebar.historyToggle}
+              aria-pressed={historyEnabled}
+            >
+              <span
+                className={`absolute top-0.5 left-0.5 w-3 h-3 bg-white rounded-full shadow transition-transform duration-200 ${
+                  historyEnabled ? 'translate-x-4' : 'translate-x-0'
+                }`}
+              />
+            </button>
           </div>
 
           <div
@@ -246,10 +245,15 @@ export default function LeftSidebar({
             onScroll={handleScroll}
             className="flex-1 overflow-y-auto space-y-1 pr-2 -mr-2 custom-scrollbar"
           >
-            {!user ? (
+            {!historyEnabled ? (
               <div className="text-center py-12 text-gray-400 text-sm">
                 <div className="mb-2 opacity-50"><FileText size={40} className="mx-auto" /></div>
-                {t.sidebar.pleaseLogin}
+                {t.sidebar.historyToggle}
+              </div>
+            ) : !user ? (
+              <div className="text-center py-12 text-gray-400 text-sm">
+                <div className="mb-2 opacity-50"><FileText size={40} className="mx-auto" /></div>
+                {t.sidebar.historyLoginRequired}
               </div>
             ) : files.length === 0 ? (
               <div className="text-center py-12 text-gray-400 text-sm">
@@ -305,9 +309,9 @@ export default function LeftSidebar({
           </div>
         </div>
 
-        {/* Bottom Area: User/Login */}
-        <div className="p-4 border-t border-gray-100 bg-gray-50/30">
-          {user ? (
+        {/* Bottom Area: User info (only shown when logged in) */}
+        {user && (
+          <div className="p-4 border-t border-gray-100 bg-gray-50/30">
             <div className="flex items-center gap-3 p-2 rounded-lg bg-white border border-gray-100 shadow-sm">
               <div className="w-8 h-8 bg-gray-900 rounded-full flex items-center justify-center flex-shrink-0">
                 <svg width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -325,21 +329,9 @@ export default function LeftSidebar({
                 <LogOut size={16} />
               </button>
             </div>
-          ) : (
-            <button
-              onClick={() => setShowAuthModal(true)}
-              className="w-full py-2.5 px-4 bg-gray-900 text-white rounded-lg hover:bg-gray-800 transition-colors flex items-center justify-center gap-2 text-sm font-medium shadow-lg shadow-gray-900/10"
-            >
-              <LogIn size={18} />
-              {t.common.login}
-            </button>
-          )}
-        </div>
+          </div>
+        )}
       </div>
-
-      {showAuthModal && (
-        <AuthModal onClose={() => setShowAuthModal(false)} />
-      )}
     </>
   );
 }