Add permission-aware upload controls and permission caching

- Add disabled/disabledReason props to DragDropUpload component
- Block drag, drop, and click events when upload is disabled
- Add visual disabled state with tooltip explanation
- Add permission caching to AuthContext with 5-minute TTL
- Clear permission cache on login/logout
- Show disabled upload zone for read-only users with explanation

frontend/src/contexts/AuthContext.tsx

@@ -1,6 +1,11 @@
-import { createContext, useContext, useState, useEffect, useCallback, ReactNode } from 'react';
-import { User } from '../types';
-import { getCurrentUser, login as apiLogin, logout as apiLogout } from '../api';
+import { createContext, useContext, useState, useEffect, useCallback, useRef, ReactNode } from 'react';
+import { User, AccessLevel } from '../types';
+import { getCurrentUser, login as apiLogin, logout as apiLogout, getMyProjectAccess } from '../api';
+
+interface PermissionCacheEntry {
+  accessLevel: AccessLevel | null;
+  timestamp: number;
+}
 
 interface AuthContextType {
   user: User | null;
@@ -10,6 +15,8 @@ interface AuthContextType {
   logout: () => Promise<void>;
   refreshUser: () => Promise<void>;
   clearError: () => void;
+  getProjectPermission: (projectName: string) => Promise<AccessLevel | null>;
+  invalidatePermissionCache: (projectName?: string) => void;
 }
 
 const AuthContext = createContext<AuthContextType | undefined>(undefined);
@@ -18,10 +25,19 @@ interface AuthProviderProps {
   children: ReactNode;
 }
 
+// Cache TTL in milliseconds (5 minutes)
+const PERMISSION_CACHE_TTL = 5 * 60 * 1000;
+
 export function AuthProvider({ children }: AuthProviderProps) {
   const [user, setUser] = useState<User | null>(null);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState<string | null>(null);
+  const permissionCacheRef = useRef<Map<string, PermissionCacheEntry>>(new Map());
+
+  // Clear permission cache
+  const clearPermissionCache = useCallback(() => {
+    permissionCacheRef.current.clear();
+  }, []);
 
   // Check session on initial load
   useEffect(() => {
@@ -44,6 +60,8 @@ export function AuthProvider({ children }: AuthProviderProps) {
     try {
       const loggedInUser = await apiLogin({ username, password });
       setUser(loggedInUser);
+      // Clear permission cache on login - permissions may have changed
+      clearPermissionCache();
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Login failed';
       setError(message);
@@ -51,7 +69,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [clearPermissionCache]);
 
   const logout = useCallback(async () => {
     setLoading(true);
@@ -59,6 +77,8 @@ export function AuthProvider({ children }: AuthProviderProps) {
     try {
       await apiLogout();
       setUser(null);
+      // Clear permission cache on logout
+      clearPermissionCache();
     } catch (err) {
       const message = err instanceof Error ? err.message : 'Logout failed';
       setError(message);
@@ -66,7 +86,7 @@ export function AuthProvider({ children }: AuthProviderProps) {
     } finally {
       setLoading(false);
     }
-  }, []);
+  }, [clearPermissionCache]);
 
   const clearError = useCallback(() => {
     setError(null);
@@ -81,8 +101,57 @@ export function AuthProvider({ children }: AuthProviderProps) {
     }
   }, []);
 
+  // Get project permission with caching
+  const getProjectPermission = useCallback(async (projectName: string): Promise<AccessLevel | null> => {
+    const cached = permissionCacheRef.current.get(projectName);
+    const now = Date.now();
+
+    // Return cached value if still valid
+    if (cached && (now - cached.timestamp) < PERMISSION_CACHE_TTL) {
+      return cached.accessLevel;
+    }
+
+    // Fetch fresh permission
+    try {
+      const result = await getMyProjectAccess(projectName);
+      const entry: PermissionCacheEntry = {
+        accessLevel: result.access_level,
+        timestamp: now,
+      };
+      permissionCacheRef.current.set(projectName, entry);
+      return result.access_level;
+    } catch {
+      // On error, cache null to avoid repeated failed requests
+      const entry: PermissionCacheEntry = {
+        accessLevel: null,
+        timestamp: now,
+      };
+      permissionCacheRef.current.set(projectName, entry);
+      return null;
+    }
+  }, []);
+
+  // Invalidate permission cache for a specific project or all projects
+  const invalidatePermissionCache = useCallback((projectName?: string) => {
+    if (projectName) {
+      permissionCacheRef.current.delete(projectName);
+    } else {
+      clearPermissionCache();
+    }
+  }, [clearPermissionCache]);
+
   return (
-    <AuthContext.Provider value={{ user, loading, error, login, logout, refreshUser, clearError }}>
+    <AuthContext.Provider value={{
+      user,
+      loading,
+      error,
+      login,
+      logout,
+      refreshUser,
+      clearError,
+      getProjectPermission,
+      invalidatePermissionCache,
+    }}>
       {children}
     </AuthContext.Provider>
   );