API Management: Centralize and improve storage

[Ayush8923]

Is your feature request related to a problem?
API keys are read from localStorage using duplicated logic across multiple files, causing inconsistency and code redundancy. Additionally, the sidebar state resets on navigation, leading to a poor user experience.

Describe the solution you'd like

1. Centralize API key management

   • Introduce an AuthContext to manage API keys globally
   • Provide a single source of truth for API keys
   • Remove duplicated useEffect logic from individual pages

2. Improve storage mechanism

   • Replace direct localStorage usage with controlled approaches
   • Ensure consistent access and enhanced security

3. Persist sidebar state globally

   • Move sidebar state into a global context
   • Persist state across navigation

Original issue

Describe the current behavior
API keys are currently read from localStorage across multiple files using duplicated useEffect logic. In some cases, the storage key is hardcoded instead of using the shared STORAGE_KEY constant. Additionally, the sidebar collapsed state is managed independently across multiple pages, causing it to reset on every navigation.

There is no single source of truth for these shared states, which leads to inconsistent behavior and unnecessary duplication.

Current problems
1. API key state is duplicated across the application

Multiple pages implement the same logic to fetch API keys from localStorage, leading to repeated and hard-to-maintain code.

// Duplicated verbatim in 8+ page files
const [apiKeys, setApiKeys] = useState<APIKey[]>([]);

useEffect(() => {
  const stored = localStorage.getItem(STORAGE_KEY);
  if (stored) {
    try {
      setApiKeys(JSON.parse(stored));
    } catch (e) {
      console.error('Failed to load API keys:', e);
    }
  }
}, []);

• Code duplication across 8+ files
• Hardcoded storage keys in some places
• Increased risk of inconsistencies and bugs

2. Sidebar state resets on navigation
The sidebar collapsed/expanded state is managed locally in multiple pages, resulting in:

• State reset on every route change
• Poor user experience
• No shared/global control

3. No centralized state management
There is no global mechanism (like Context) to manage shared state such as API keys or UI preferences. This leads to:

• Repeated logic
• Prop drilling (in some cases)
• Difficult maintenance and scalability issues

Describe the enhancement you'd like
1. Centralize API key management

• Introduce an AuthContext (or similar) to manage API keys globally
• Provide a single source of truth for API keys
• Remove duplicated useEffect logic from individual pages

2. Persist sidebar state globally

• Move sidebar state into a global context (e.g., UIContext)
• Persist state across navigation
• Improve overall user experience