refactor: move configs and hooks to global locations for reusability

Move previously nested configs and hooks to global src/ folders to make
them reusable across the application, reduce nesting, and establish
clearer organization patterns.

**New Global Structure:**
- src/config/theme-options.ts (moved from appearance/config/)
- src/config/api-providers.ts (moved from api-keys/config/)
- src/hooks/use-scroll-tracking.ts (moved from settings-view/hooks/)

**Changes:**
- Move theme-options.ts to src/config/ - app-wide theme configuration
- Move api-provider-config.ts to src/config/api-providers.ts - global API config
- Move use-scroll-tracking.ts to src/hooks/ - reusable scroll navigation hook
- Make useScrollTracking generic and more flexible with options object
- Update all imports across settings-view components
- Remove duplicate api-provider-config.ts from shared/ folder
- Remove empty config/ folders (appearance/config, api-keys/config)

**Benefits:**
✅ Single source of truth for themes and API providers
✅ Reusable scroll tracking hook available globally
✅ Cleaner structure with less nesting
✅ Better discoverability for developers
✅ No duplicate configuration files

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

app/src/components/views/settings-view/api-keys/api-key-field.tsx

@@ -2,7 +2,7 @@ import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import { AlertCircle, CheckCircle2, Eye, EyeOff, Loader2, Zap } from "lucide-react";
-import type { ProviderConfig } from "./shared/api-provider-config";
+import type { ProviderConfig } from "@/config/api-providers";
 
 interface ApiKeyFieldProps {
   config: ProviderConfig;

app/src/components/views/settings-view/api-keys/api-keys-section.tsx

@@ -3,7 +3,7 @@ import { useSetupStore } from "@/store/setup-store";
 import { Button } from "@/components/ui/button";
 import { Key, CheckCircle2 } from "lucide-react";
 import { ApiKeyField } from "./api-key-field";
-import { buildProviderConfigs } from "./shared/api-provider-config";
+import { buildProviderConfigs } from "@/config/api-providers";
 import { AuthenticationStatusDisplay } from "./authentication-status-display";
 import { SecurityNotice } from "./security-notice";
 import { useApiKeyManagement } from "./hooks/use-api-key-management";

app/src/components/views/settings-view/api-keys/config/api-provider-config.ts

@@ -1,149 +0,0 @@
-import type { Dispatch, SetStateAction } from "react";
-import type { LucideIcon } from "lucide-react";
-import type { ApiKeys } from "@/store/app-store";
-
-export type ProviderKey = "anthropic" | "google" | "openai";
-
-export interface ProviderConfig {
-  key: ProviderKey;
-  label: string;
-  inputId: string;
-  placeholder: string;
-  value: string;
-  setValue: Dispatch<SetStateAction<string>>;
-  showValue: boolean;
-  setShowValue: Dispatch<SetStateAction<boolean>>;
-  hasStoredKey: string | null | undefined;
-  inputTestId: string;
-  toggleTestId: string;
-  testButton: {
-    onClick: () => Promise<void> | void;
-    disabled: boolean;
-    loading: boolean;
-    testId: string;
-  };
-  result: { success: boolean; message: string } | null;
-  resultTestId: string;
-  resultMessageTestId: string;
-  descriptionPrefix: string;
-  descriptionLinkHref: string;
-  descriptionLinkText: string;
-  descriptionSuffix?: string;
-}
-
-export interface ProviderConfigParams {
-  apiKeys: ApiKeys;
-  anthropic: {
-    value: string;
-    setValue: Dispatch<SetStateAction<string>>;
-    show: boolean;
-    setShow: Dispatch<SetStateAction<boolean>>;
-    testing: boolean;
-    onTest: () => Promise<void>;
-    result: { success: boolean; message: string } | null;
-  };
-  google: {
-    value: string;
-    setValue: Dispatch<SetStateAction<string>>;
-    show: boolean;
-    setShow: Dispatch<SetStateAction<boolean>>;
-    testing: boolean;
-    onTest: () => Promise<void>;
-    result: { success: boolean; message: string } | null;
-  };
-  openai: {
-    value: string;
-    setValue: Dispatch<SetStateAction<string>>;
-    show: boolean;
-    setShow: Dispatch<SetStateAction<boolean>>;
-    testing: boolean;
-    onTest: () => Promise<void>;
-    result: { success: boolean; message: string } | null;
-  };
-}
-
-export const buildProviderConfigs = ({
-  apiKeys,
-  anthropic,
-  google,
-  openai,
-}: ProviderConfigParams): ProviderConfig[] => [
-  {
-    key: "anthropic",
-    label: "Anthropic API Key (Claude)",
-    inputId: "anthropic-key",
-    placeholder: "sk-ant-...",
-    value: anthropic.value,
-    setValue: anthropic.setValue,
-    showValue: anthropic.show,
-    setShowValue: anthropic.setShow,
-    hasStoredKey: apiKeys.anthropic,
-    inputTestId: "anthropic-api-key-input",
-    toggleTestId: "toggle-anthropic-visibility",
-    testButton: {
-      onClick: anthropic.onTest,
-      disabled: !anthropic.value || anthropic.testing,
-      loading: anthropic.testing,
-      testId: "test-claude-connection",
-    },
-    result: anthropic.result,
-    resultTestId: "test-connection-result",
-    resultMessageTestId: "test-connection-message",
-    descriptionPrefix: "Used for Claude AI features. Get your key at",
-    descriptionLinkHref: "https://console.anthropic.com/account/keys",
-    descriptionLinkText: "console.anthropic.com",
-    descriptionSuffix:
-      ". Alternatively, the CLAUDE_CODE_OAUTH_TOKEN environment variable can be used.",
-  },
-  {
-    key: "google",
-    label: "Google API Key (Gemini)",
-    inputId: "google-key",
-    placeholder: "AIza...",
-    value: google.value,
-    setValue: google.setValue,
-    showValue: google.show,
-    setShowValue: google.setShow,
-    hasStoredKey: apiKeys.google,
-    inputTestId: "google-api-key-input",
-    toggleTestId: "toggle-google-visibility",
-    testButton: {
-      onClick: google.onTest,
-      disabled: !google.value || google.testing,
-      loading: google.testing,
-      testId: "test-gemini-connection",
-    },
-    result: google.result,
-    resultTestId: "gemini-test-connection-result",
-    resultMessageTestId: "gemini-test-connection-message",
-    descriptionPrefix:
-      "Used for Gemini AI features (including image/design prompts). Get your key at",
-    descriptionLinkHref: "https://makersuite.google.com/app/apikey",
-    descriptionLinkText: "makersuite.google.com",
-  },
-  {
-    key: "openai",
-    label: "OpenAI API Key (Codex/GPT)",
-    inputId: "openai-key",
-    placeholder: "sk-...",
-    value: openai.value,
-    setValue: openai.setValue,
-    showValue: openai.show,
-    setShowValue: openai.setShow,
-    hasStoredKey: apiKeys.openai,
-    inputTestId: "openai-api-key-input",
-    toggleTestId: "toggle-openai-visibility",
-    testButton: {
-      onClick: openai.onTest,
-      disabled: !openai.value || openai.testing,
-      loading: openai.testing,
-      testId: "test-openai-connection",
-    },
-    result: openai.result,
-    resultTestId: "openai-test-connection-result",
-    resultMessageTestId: "openai-test-connection-message",
-    descriptionPrefix: "Used for OpenAI Codex CLI and GPT models. Get your key at",
-    descriptionLinkHref: "https://platform.openai.com/api-keys",
-    descriptionLinkText: "platform.openai.com",
-  },
-];

app/src/components/views/settings-view/api-keys/hooks/use-api-key-management.ts

@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 import { useAppStore } from "@/store/app-store";
 import { getElectronAPI } from "@/lib/electron";
-import type { ProviderConfigParams } from "../config/api-provider-config";
+import type { ProviderConfigParams } from "@/config/api-providers";
 
 interface TestResult {
   success: boolean;