fix format and linting issue

Author: Shivanand-hulikatti

src/components/theme/theme-switcher.tsx

@@ -1,16 +1,8 @@
 "use client";
 
 import React, { useState } from "react";
-import {
-  Search,
-  Palette,
-  Shuffle,
-  Moon,
-  Sun,
-  Plus,
-  X,
-  ExternalLink,
-} from "lucide-react";
+import type { ThemePreset } from "@/contexts/theme/types";
+import { Search, Palette, Shuffle, Moon, Sun, Plus } from "lucide-react";
 
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";
@@ -62,8 +54,8 @@ export function ThemeSwitcher({
   const [showImportDialog, setShowImportDialog] = useState(false);
 
   // Use controlled or uncontrolled state
-  const isOpen = controlledOpen !== undefined ? controlledOpen : internalOpen;
-  const setIsOpen = onOpenChange || setInternalOpen;
+  const isOpen = controlledOpen ?? internalOpen;
+  const setIsOpen = onOpenChange ?? setInternalOpen;
 
   // Filter themes based on search
   const filteredThemes = allThemes.filter((theme) =>
@@ -215,7 +207,7 @@ export function ThemeSwitcher({
               {!isLoading && filteredThemes.length === 0 && searchQuery && (
                 <div className="flex items-center justify-center py-8">
                   <div className="text-muted-foreground text-sm">
-                    No themes found matching "{searchQuery}"
+                    No themes found matching &quot;{searchQuery}&quot;
                   </div>
                 </div>
               )}
@@ -244,7 +236,7 @@ export function ThemeSwitcher({
 }
 
 interface ThemeCardProps {
-  theme: any;
+  theme: ThemePreset;
   onSelect: () => void;
   previewColors: string[];
 }
@@ -262,7 +254,9 @@ function ThemeCard({ theme, onSelect, previewColors }: ThemeCardProps) {
       <div className="space-y-2">
         <div className="flex items-center justify-between">
           <span className="text-sm font-medium">{theme.name}</span>
-          {!theme.isBuiltIn && <Badge variant="secondary">Custom</Badge>}
+          {!(theme.isBuiltIn ?? false) && (
+            <Badge variant="secondary">Custom</Badge>
+          )}
         </div>
 
         {/* Color Preview */}
@@ -298,7 +292,7 @@ function ImportThemeDialog({ open, onOpenChange }: ImportThemeDialogProps) {
 
     try {
       setError("");
-      await importTheme(url.trim());
+      importTheme(url.trim());
       setUrl("");
       onOpenChange(false);
     } catch (err) {

src/contexts/theme/storage.ts

@@ -29,10 +29,9 @@ export function loadThemeFromStorage(): ThemeState {
       parsed &&
       typeof parsed === "object" &&
       parsed.currentMode &&
-      parsed.cssVars &&
-      parsed.cssVars.theme &&
-      parsed.cssVars.light &&
-      parsed.cssVars.dark
+      parsed.cssVars?.theme &&
+      parsed.cssVars?.light &&
+      parsed.cssVars?.dark
     ) {
       return parsed;
     }

src/contexts/theme/theme-script.tsx

@@ -1,8 +1,6 @@
 "use client";
 
-import { applyThemeToElement, getPreferredColorScheme } from "./apply-theme";
 import { DEFAULT_THEME } from "./default-theme";
-import type { ThemeState } from "./types";
 
 /**
  * Inline script component that runs before React hydration to prevent theme flash.

src/contexts/theme/theme-utils.ts

@@ -45,12 +45,13 @@ function normalizeThemeUrl(url: string): string {
 /**
  * Gets the theme name from the data or generates a fallback
  */
-function getThemeName(themeData: any): string {
-  return themeData.name
-    ? themeData.name
-        .replace(/[-_]/g, " ")
-        .replace(/\b\w/g, (l: string) => l.toUpperCase())
-    : "Custom Theme";
+function getThemeName(themeData: Record<string, unknown>): string {
+  if (typeof themeData.name === "string") {
+    return themeData.name
+      .replace(/[-_]/g, " ")
+      .replace(/\b\w/g, (l: string) => l.toUpperCase());
+  }
+  return "Custom Theme";
 }
 
 /**
@@ -65,16 +66,26 @@ export async function fetchThemeFromUrl(url: string): Promise<FetchedTheme> {
       throw new Error(`HTTP ${response.status}: ${response.statusText}`);
     }
 
-    const themeData = await response.json();
+    const themeData = (await response.json()) as Record<string, unknown>;
     const themeName = getThemeName(themeData);
     const isBuiltIn = THEME_URLS.includes(url);
 
+    // Type-safe access to cssVars
+    const cssVarsRaw = themeData.cssVars as
+      | Record<string, Record<string, string>>
+      | undefined;
+    const cssVars = {
+      theme: cssVarsRaw?.theme ?? {},
+      light: cssVarsRaw?.light ?? {},
+      dark: cssVarsRaw?.dark ?? {},
+    };
+
     return {
       name: themeName,
       preset: {
         name: themeName,
         isBuiltIn,
-        cssVars: themeData.cssVars || { theme: {}, light: {}, dark: {} },
+        cssVars,
       },
       url,
       type: isBuiltIn ? "built-in" : "custom",

src/contexts/theme/use-theme-management.ts

@@ -17,8 +17,7 @@ import type { ThemePreset } from "./types";
  * Hook for managing themes including fetching, applying, and custom imports
  */
 export function useThemeManagement() {
-  const { themeState, setThemeState, toggleMode, applyTheme, resetToDefault } =
-    useTheme();
+  const { themeState, toggleMode, applyTheme, resetToDefault } = useTheme();
   const queryClient = useQueryClient();
   const [customThemeUrls, setCustomThemeUrls] = useState<string[]>([]);
 
@@ -92,7 +91,7 @@ export function useThemeManagement() {
       }
       return { theme: fetchedTheme.preset, url, name: fetchedTheme.name };
     },
-    onSuccess: ({ theme, url, name }) => {
+    onSuccess: async ({ theme, url, name }) => {
       applyTheme(theme);
 
       // Add to custom themes if not already there
@@ -101,7 +100,7 @@ export function useThemeManagement() {
       }
 
       // Invalidate queries to refresh the lists
-      queryClient.invalidateQueries({ queryKey: ["themes"] });
+      await queryClient.invalidateQueries({ queryKey: ["themes"] });
 
       toast.success(`Applied theme: ${name}`);
     },
@@ -132,9 +131,9 @@ export function useThemeManagement() {
   };
 
   // Remove custom theme URL
-  const removeCustomTheme = (url: string) => {
+  const removeCustomTheme = async (url: string) => {
     setCustomThemeUrls((prev) => prev.filter((u) => u !== url));
-    queryClient.invalidateQueries({ queryKey: ["themes", "custom"] });
+    await queryClient.invalidateQueries({ queryKey: ["themes", "custom"] });
     toast.success("Removed custom theme");
   };
 
@@ -170,6 +169,6 @@ export function useThemeManagement() {
     getThemePreview,
 
     // Errors
-    error: builtInError || customError,
+    error: builtInError ?? customError,
   };
 }