feat: use centralized logger

Author: sanoojes

src/components/Fullscreen.tsx

@@ -13,7 +13,7 @@ import { useStore } from 'zustand';
 
 const exitFullScreen = () => {
   document.exitFullscreen().catch((err) => {
-    console.error('Failed to exit fullscreen:', err);
+    logger.error('Failed to exit fullscreen:', err);
   });
   tempStore.getState().setFullscreenMode('compact');
 };
@@ -79,7 +79,7 @@ const Fullscreen: React.FC = () => {
   useEffect(() => {
     if (fullscreenMode === 'fullscreen') {
       document.documentElement.requestFullscreen().catch((err) => {
-        console.error('Failed to enter fullscreen:', err);
+        logger.error('Failed to enter fullscreen:', err);
       });
     } else if (fullscreenMode === 'compact') {
       exitFullScreen();

src/components/background/AnimatedColorBackground.tsx

@@ -1,6 +1,7 @@
 import { FragmentShader, GetShaderUniforms, VertexShader } from '@/shaders/color.ts';
 import appStore from '@/store/appStore.ts';
 import tempStore from '@/store/tempStore.ts';
+import { logger } from '@logger';
 import { useEffect, useRef } from 'react';
 import {
   Color,
@@ -136,7 +137,7 @@ const AnimatedBackground: React.FC<AnimatedBackgroundProps> = ({ timeScale = 50
         material.dispose();
         renderer.dispose();
       } catch (e) {
-        console.warn('Error disposing renderer resources:', e);
+        logger.warn('Error disposing renderer resources:', e);
       }
     };
   }, [colors, timeScale]);

src/components/background/helper/loadAndProcessImage.ts

@@ -1,11 +1,12 @@
 import type { CSSFilter } from '@/types/styles.ts';
+import { logger } from '@logger';
 import { serializeFilters } from '@utils/dom';
 import { CanvasTexture, type Texture } from 'three';
 
 async function loadAndProcessImage(url: string, filter: CSSFilter): Promise<Texture | null> {
   try {
     if (!url) {
-      console.warn('No image URL provided');
+      logger.warn('No image URL provided');
       return null;
     }
 
@@ -22,7 +23,7 @@ async function loadAndProcessImage(url: string, filter: CSSFilter): Promise<Text
     const circleCanvas = new OffscreenCanvas(originalSize, originalSize);
     const ctx = circleCanvas.getContext('2d');
     if (!ctx) {
-      console.error('Failed to get 2D context for circleCanvas');
+      logger.error('Failed to get 2D context for circleCanvas');
       return null;
     }
 
@@ -45,7 +46,7 @@ async function loadAndProcessImage(url: string, filter: CSSFilter): Promise<Text
     const blurredCanvas = new OffscreenCanvas(expandedSize, expandedSize);
     const blurredCtx = blurredCanvas.getContext('2d');
     if (!blurredCtx) {
-      console.error('Failed to get 2D context for blurredCanvas');
+      logger.error('Failed to get 2D context for blurredCanvas');
       return null;
     }
 
@@ -56,7 +57,7 @@ async function loadAndProcessImage(url: string, filter: CSSFilter): Promise<Text
     texture.needsUpdate = true;
     return texture;
   } catch (err) {
-    console.error('Failed to load/process image:', err);
+    logger.error('Failed to load/process image:', err);
     return null;
   }
 }

src/components/ui/Dropdown.tsx

@@ -1,69 +1,75 @@
-/** biome-ignore-all lint/a11y: no a11y for now  */
-
 import { Tippy } from '@/components/ui';
 import { ChevronDown } from 'lucide-react';
 import { createContext, useContext, useEffect, useRef, useState } from 'react';
 import { createPortal } from 'react-dom';
 
-// Context
 type DropdownContextType = {
   open: boolean;
   setOpen: React.Dispatch<React.SetStateAction<boolean>>;
   buttonRef: React.RefObject<HTMLButtonElement | null>;
 };
 
-const DropdownContext = createContext<DropdownContextType>({
-  open: false,
-  setOpen: () => {},
-  buttonRef: { current: null },
-});
+const DropdownContext = createContext<DropdownContextType | null>(null);
+
+function useDropdownContext() {
+  const context = useContext(DropdownContext);
+  if (!context) {
+    throw new Error('Dropdown components must be used within a Dropdown');
+  }
+  return context;
+}
 
-// Dropdown Root
+// Dropdown Component
 type DropdownProps = {
   children: React.ReactNode;
 };
 
 const Dropdown = ({ children }: DropdownProps) => {
   const [open, setOpen] = useState(false);
-  const dropdownRef = useRef<HTMLDivElement>(null);
   const buttonRef = useRef<HTMLButtonElement>(null);
 
   return (
     <DropdownContext.Provider value={{ open, setOpen, buttonRef }}>
-      <div ref={dropdownRef} className="dropdown">
-        {children}
-      </div>
+      <div className="dropdown">{children}</div>
     </DropdownContext.Provider>
   );
 };
 
 // Dropdown Button
 type DropdownButtonProps = {
   children: React.ReactNode;
-  icon?: React.ReactNode;
 };
 
-function DropdownButton({ children }: DropdownButtonProps) {
-  const { open, setOpen, buttonRef } = useContext(DropdownContext);
+const DropdownButton = ({ children }: DropdownButtonProps) => {
+  const { open, setOpen, buttonRef } = useDropdownContext();
 
   const toggleOpen = () => setOpen(!open);
 
   return (
     <Tippy label={open ? 'Close' : 'Open'}>
-      <button ref={buttonRef} onClick={toggleOpen} className="dropdown-button" type="button">
+      <button
+        ref={buttonRef}
+        onClick={(e) => {
+          e.stopPropagation();
+          toggleOpen();
+        }}
+        className="dropdown-button"
+        type="button"
+      >
         {children}
         <ChevronDown className={`dropdown-icon ${open ? 'rotate' : ''}`} />
       </button>
     </Tippy>
   );
-}
+};
 
+// Dropdown Content
 type DropdownContentProps = {
   children: React.ReactNode;
 };
 
-function DropdownContent({ children }: DropdownContentProps) {
-  const { open, buttonRef, setOpen } = useContext(DropdownContext);
+const DropdownContent = ({ children }: DropdownContentProps) => {
+  const { open, buttonRef, setOpen } = useDropdownContext();
   const contentRef = useRef<HTMLDivElement>(null);
   const [coords, setCoords] = useState({ top: 0, left: 0, width: 0 });
   const [ready, setReady] = useState(false);
@@ -72,7 +78,6 @@ function DropdownContent({ children }: DropdownContentProps) {
   const updatePosition = () => {
     const button = buttonRef.current;
     const content = contentRef.current;
-
     if (button && content) {
       const buttonRect = button.getBoundingClientRect();
       const contentWidth = content.offsetWidth || buttonRect.width;
@@ -104,24 +109,22 @@ function DropdownContent({ children }: DropdownContentProps) {
     }
   };
 
-  useEffect(() => {
-    document.body.classList.toggle('dropdown-open', open);
-  }, [open]);
-
   useEffect(() => {
     if (open) {
       setReady(false);
       setShow(false);
       updatePosition();
-
       window.addEventListener('resize', updatePosition);
-
       return () => {
         window.removeEventListener('resize', updatePosition);
       };
     }
   }, [open]);
 
+  useEffect(() => {
+    document.body.classList.toggle('dropdown-open', open);
+  }, [open]);
+
   if (!open) return null;
 
   return createPortal(
@@ -137,43 +140,51 @@ function DropdownContent({ children }: DropdownContentProps) {
           left: coords.left,
           minWidth: coords.width,
         }}
+        onClick={(e) => e.stopPropagation()}
       >
         {children}
       </div>
     </div>,
     document.body
   );
-}
+};
 
 // Dropdown List
 type DropdownListProps = React.HTMLAttributes<HTMLUListElement> & {
   children: React.ReactNode;
 };
 
-function DropdownList({ children, ...props }: DropdownListProps) {
-  const { setOpen } = useContext(DropdownContext);
+const DropdownList = ({ children, ...props }: DropdownListProps) => {
+  const { setOpen } = useDropdownContext();
 
   return (
-    <ul onClick={() => setOpen(false)} className="dropdown-list" {...props}>
+    <ul
+      className="dropdown-list"
+      {...props}
+      onClick={(e) => {
+        e.stopPropagation();
+        setOpen(false);
+      }}
+    >
       {children}
     </ul>
   );
-}
+};
 
 // Dropdown Item
 type DropdownItemProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   children: React.ReactNode;
 };
 
-function DropdownItem({ children, ...props }: DropdownItemProps) {
+const DropdownItem = ({ children, ...props }: DropdownItemProps) => {
   return (
     <li className="dropdown-item">
       <button className="dropdown-item-button" {...props}>
         {children}
       </button>
     </li>
   );
-}
+};
 
 // Attach subcomponents
 Dropdown.Button = DropdownButton;

src/components/ui/RomanizationButton.tsx

@@ -1,9 +1,9 @@
-import { LetterA } from '@/components/icons';
-import { Button } from '@/components/ui';
-import appStore from '@/store/appStore.ts';
-import tempStore from '@/store/tempStore.ts';
-import { Languages } from 'lucide-react';
-import { useStore } from 'zustand';
+import { LetterA } from "@/components/icons";
+import { Button } from "@/components/ui";
+import appStore from "@/store/appStore.ts";
+import tempStore from "@/store/tempStore.ts";
+import { Languages } from "lucide-react";
+import { useStore } from "zustand";
 
 const RomanizationButton = () => {
   const hasRomanizedText = useStore(
@@ -18,7 +18,9 @@ const RomanizationButton = () => {
       onClick={appStore.getState().toggleRomanization}
       variant="icon"
       show={hasRomanizedText ?? false}
-      tippyContent={forceRomanized ? 'Disable Romanization' : 'Enable Romanization'}
+      tippyContent={
+        forceRomanized ? "Disable Romanization" : "Enable Romanization"
+      }
     >
       {forceRomanized ? <LetterA /> : <Languages />}
     </Button>

src/components/ui/Tippy.tsx

@@ -21,29 +21,29 @@ const Tippy: React.FC<TippyProps> = ({ label = null, children, hasIcon = false,
   const containerRef = useRef<HTMLDivElement>(null);
   const disableTippy = useStore(appStore, (s) => s.disableTippy);
 
-  const showTooltip = () => {
-    if (disableTippy) return;
-    if (containerRef.current) {
-      const rect = containerRef.current.getBoundingClientRect();
-      setCoords({
-        top: rect.top + window.scrollY,
-        left: rect.left + window.scrollX + rect.width / 2,
-      });
-      setVisible(true);
-    }
-  };
-
-  const hideTooltip = () => {
-    if (disableTippy) return;
-    setVisible(false);
-  };
-
   useEffect(() => {
     if (disableTippy) return;
 
     const container = containerRef.current;
     if (!container) return;
 
+    const showTooltip = () => {
+      if (disableTippy) return;
+      if (containerRef.current) {
+        const rect = containerRef.current.getBoundingClientRect();
+        setCoords({
+          top: rect.top + window.scrollY,
+          left: rect.left + window.scrollX + rect.width / 2,
+        });
+        setVisible(true);
+      }
+    };
+
+    const hideTooltip = () => {
+      if (disableTippy) return;
+      setVisible(false);
+    };
+
     container.addEventListener('mouseenter', showTooltip);
     container.addEventListener('mouseleave', hideTooltip);
 

src/lib/logger.ts

@@ -1,7 +1,7 @@
 import appStore from '@/store/appStore.ts';
 
 export const createLogger = (prefix: string = '') => ({
-  log: (...args: any[]) => console.log('[Lucid-Lyrics]', prefix, ...args),
+  info: (...args: any[]) => console.log('[Lucid-Lyrics]', prefix, ...args),
   debug: (...args: any[]) =>
     appStore.getState().isDevMode ? console.debug('[Lucid-Lyrics]', prefix, ...args) : null,
   warn: (...args: any[]) => console.trace('[Lucid-Lyrics]', prefix, ...args),