refactor 👌

main/background.ts

@@ -25,6 +25,7 @@ import {
 import { initDatabase } from "./helpers/db/createDB";
 import { parseFile } from "music-metadata";
 import fs from "fs";
+import { Howl } from "howler";
 
 const isProd = process.env.NODE_ENV === "production";
 
@@ -110,6 +111,7 @@ ipcMain.on("set-rpc-state", (_, { details, state, timestamp }) => {
     largeImageKey: "logo",
     largeImageText: `v${app.getVersion()}`,
     instance: false,
+    type: "LISTENING",
   };
 
   if (timestamp) {

package.json

@@ -46,7 +46,6 @@
     "music-metadata": "^7.14.0",
     "next-themes": "^0.3.0",
     "react-hook-form": "^7.52.1",
-    "recharts": "^2.12.7",
     "sonner": "^1.5.0",
     "tailwind-gradient-mask-image": "^1.2.0",
     "tailwind-merge": "^2.4.0",

renderer/components/main/navbar.tsx

@@ -1,9 +1,12 @@
 import {
   IconArrowRight,
+  IconDeviceDesktop,
   IconFocusCentered,
   IconInbox,
+  IconMoon,
   IconPlus,
   IconSearch,
+  IconSun,
   IconVinyl,
 } from "@tabler/icons-react";
 import {
@@ -46,6 +49,7 @@ import {
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { useTheme } from "next-themes";
 
 const formSchema = z.object({
   name: z.string().min(2, {
@@ -68,6 +72,27 @@ const Navbar = () => {
   const [search, setSearch] = useState("");
   const [loading, setLoading] = useState(false);
   const { setQueueAndPlay } = usePlayer();
+  const { theme, setTheme } = useTheme();
+
+  const handleThemeToggle = () => {
+    if (theme === "light") {
+      setTheme("dark");
+    } else if (theme === "dark") {
+      setTheme("system");
+    } else {
+      setTheme("light");
+    }
+  };
+
+  const renderIcon = () => {
+    if (theme === "light") {
+      return <IconSun stroke={2} className="w-5" />;
+    } else if (theme === "dark") {
+      return <IconMoon stroke={2} className="w-5" />;
+    } else {
+      return <IconDeviceDesktop stroke={2} className="w-5" />;
+    }
+  };
 
   useEffect(() => {
     const down = (e) => {
@@ -77,6 +102,8 @@ const Navbar = () => {
       }
     };
 
+    console.log(theme);
+
     document.addEventListener("keydown", down);
     return () => document.removeEventListener("keydown", down);
   }, []);
@@ -230,6 +257,9 @@ const Navbar = () => {
             </Tooltip>
           </div>
         </TooltipProvider>
+        <Button variant="ghost" onClick={handleThemeToggle} asChild>
+          {renderIcon()}
+        </Button>
         <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
           <DialogContent>
             <div className="flex h-full w-full items-start gap-6">

renderer/components/main/player.tsx

@@ -4,6 +4,7 @@ import {
   IconArrowsShuffle2,
   IconCheck,
   IconClock,
+  IconDisc,
   IconHeart,
   IconInfoCircle,
   IconListTree,
@@ -15,6 +16,7 @@ import {
   IconPlayerSkipForward,
   IconPlus,
   IconRepeat,
+  IconRipple,
   IconVinyl,
   IconVolume,
   IconVolumeOff,
@@ -408,9 +410,9 @@ export const Player = () => {
       </div>
       <div className="!absolute right-0 top-0 w-full">
         <div
-          className={`wora-border ${showSpectrogram ? "block" : "hidden"} relative mt-2 h-full w-full rounded-xl bg-white/70 backdrop-blur-xl dark:bg-black/70`}
+          className={`wora-border ${soundRef.current && soundRef.current.playing() && showSpectrogram ? "block" : "hidden"} relative mt-2 h-full w-full rounded-xl bg-black`}
         >
-          <div className="h-utility w-full px-6 pt-6">
+          <div className="h-utility w-full p-6">
             {soundRef.current && <Spectrogram howl={soundRef.current} />}
           </div>
         </div>
@@ -560,7 +562,7 @@ export const Player = () => {
                   <div className="absolute -left-24 mt-0.5">
                     <Tooltip delayDuration={0}>
                       <TooltipTrigger>
-                        <IconWaveSine stroke={2} className="w-3.5" />
+                        <IconRipple stroke={2} className="w-3.5" />
                       </TooltipTrigger>
                       <TooltipContent side="left" sideOffset={25}>
                         <p>
@@ -727,9 +729,15 @@ export const Player = () => {
                     </div>
                   </DialogContent>
                 </Dialog>
-                <Button variant="ghost" onClick={toggleSpectrogram}>
-                  <IconWaveSine stroke={2} size={15} />
-                </Button>
+                {soundRef.current && soundRef.current.playing() ? (
+                  <Button variant="ghost" onClick={toggleSpectrogram}>
+                    <IconWaveSine stroke={2} size={15} />
+                  </Button>
+                ) : (
+                  <Button variant="ghost">
+                    <IconWaveSine stroke={2} size={15} />
+                  </Button>
+                )}
                 <Button variant="ghost" onClick={toggleQueue}>
                   <IconListTree stroke={2} size={15} />
                 </Button>

renderer/components/ui/actions.tsx

@@ -25,9 +25,9 @@ function Actions() {
   }, []);
 
   return (
-    <div className="absolute top-0 z-50 flex h-11 w-full items-center justify-end px-8 py-2.5">
+    <div className="drag absolute top-0 z-50 flex h-11 w-full items-center justify-end px-8 py-2.5">
       <div className="relative flex h-full w-full items-center justify-center">
-        <div className="drag flex h-full items-center gap-2">
+        <div className="flex h-full items-center gap-2">
           <Image
             src={"/assets/Logo [Dark].ico"}
             alt="logo"
@@ -44,7 +44,7 @@ function Actions() {
           />
           Wora v{data && data.appVersion}
         </div>
-        <div className="absolute -right-2 top-0 flex h-full items-center gap-2.5">
+        <div className="no-drag absolute -right-2 top-0 flex h-full items-center gap-2.5">
           {data && data.isNotMac && (
             <>
               <Button

renderer/components/ui/input.tsx

@@ -11,7 +11,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-9 w-full rounded-lg bg-black/5 px-3 py-1 text-xs transition duration-300 focus:bg-black/10 focus:outline-none dark:bg-white/10 dark:focus:bg-white/15",
+          "flex h-9 w-full rounded-lg bg-black/5 px-3 py-1 text-xs ring-inset transition duration-300 focus:outline-none focus:ring-2 focus:ring-black dark:bg-white/10 dark:focus:ring-white",
           className,
         )}
         ref={ref}

renderer/components/ui/spectrogram.tsx

@@ -6,11 +6,14 @@ interface SpectrogramProps {
 }
 
 const Spectrogram: React.FC<SpectrogramProps> = ({ howl }) => {
+  const containerRef = useRef<HTMLDivElement | null>(null);
   const canvasRef = useRef<HTMLCanvasElement | null>(null);
   const analyserRef = useRef<AnalyserNode | null>(null);
   const animationRef = useRef<number | null>(null);
   const [isSetup, setIsSetup] = useState(false);
   const [isPlaying, setIsPlaying] = useState(false);
+  const LEFT_MARGIN = 20; // Space for y-axis labels
+  const AXIS_RIGHT_PADDING = 30; // Space between y-axis labels and graph
 
   const setupAudio = useCallback(() => {
     setIsSetup(false);
@@ -26,7 +29,6 @@ const Spectrogram: React.FC<SpectrogramProps> = ({ howl }) => {
       }
 
       analyserRef.current = audioContext.createAnalyser();
-      analyserRef.current.fftSize = 2048;
 
       const sound = howl as any;
       if (!sound._sounds || !sound._sounds[0] || !sound._sounds[0]._node) {
@@ -66,15 +68,15 @@ const Spectrogram: React.FC<SpectrogramProps> = ({ howl }) => {
 
     const barWidth = 1;
     const height = canvas.height - 20;
-    const leftMargin = 30;
+    const graphStart = LEFT_MARGIN + AXIS_RIGHT_PADDING;
 
     const imageData = ctx.getImageData(
-      leftMargin + barWidth,
+      graphStart + barWidth,
       0,
-      canvas.width - leftMargin - barWidth,
+      canvas.width - graphStart - barWidth,
       height,
     );
-    ctx.putImageData(imageData, leftMargin, 0);
+    ctx.putImageData(imageData, graphStart, 0);
 
     ctx.clearRect(canvas.width - barWidth, 0, barWidth, height);
 
@@ -99,22 +101,22 @@ const Spectrogram: React.FC<SpectrogramProps> = ({ howl }) => {
     canvas: HTMLCanvasElement,
   ) => {
     ctx.save();
-    ctx.clearRect(0, 0, 30, canvas.height);
+    ctx.clearRect(0, 0, LEFT_MARGIN + AXIS_RIGHT_PADDING, canvas.height);
     ctx.clearRect(0, canvas.height - 20, canvas.width, 20);
 
     ctx.fillStyle = "white";
-    ctx.font = "10px Maven Pro";
+    ctx.font = "10.5px Maven Pro";
     for (let i = 0; i <= 10; i++) {
       const freq = (i / 10) * 22.05;
       const y = canvas.height - 20 - (i / 10) * (canvas.height - 20);
-      ctx.fillText(`${freq.toFixed(2)}`, 5, y);
+      ctx.fillText(`${freq.toFixed(2)}k`, 5, y);
     }
 
     const currentTime = howl.seek();
     ctx.fillText(
-      `${currentTime.toFixed(1)}s`,
-      canvas.width - 30,
-      canvas.height - 5,
+      `Time: ${currentTime.toFixed(1)}s`,
+      canvas.width / 2,
+      canvas.height,
     );
 
     ctx.restore();
@@ -144,6 +146,15 @@ const Spectrogram: React.FC<SpectrogramProps> = ({ howl }) => {
     }
   }, []);
 
+  const resizeCanvas = useCallback(() => {
+    const canvas = canvasRef.current;
+    const container = containerRef.current;
+    if (canvas && container) {
+      canvas.width = container.clientWidth;
+      canvas.height = container.clientHeight;
+    }
+  }, []);
+
   useEffect(() => {
     const initializeSpectrogram = () => {
       if (howl.state() === "loaded") {
@@ -169,6 +180,12 @@ const Spectrogram: React.FC<SpectrogramProps> = ({ howl }) => {
 
     initializeSpectrogram();
 
+    // Set up ResizeObserver
+    const resizeObserver = new ResizeObserver(resizeCanvas);
+    if (containerRef.current) {
+      resizeObserver.observe(containerRef.current);
+    }
+
     return () => {
       stopSpectrogram();
       if (analyserRef.current) {
@@ -177,17 +194,16 @@ const Spectrogram: React.FC<SpectrogramProps> = ({ howl }) => {
       howl.off("play", handlePlay);
       howl.off("pause", handlePauseOrStop);
       howl.off("end", handlePauseOrStop);
+      resizeObserver.disconnect();
     };
-  }, [howl, startSpectrogram, stopSpectrogram]);
+  }, [howl, startSpectrogram, stopSpectrogram, resizeCanvas]);
 
   return (
-    <div className="w-full rounded-xl bg-black p-5">
-      <canvas
-        ref={canvasRef}
-        width="1315"
-        height="400"
-        className="w-full antialiased"
-      />
+    <div
+      ref={containerRef}
+      className="h-full w-full rounded-xl px-6 pb-8 gradient-mask-r-90"
+    >
+      <canvas ref={canvasRef} className="h-full w-full antialiased" />
     </div>
   );
 };

renderer/components/ui/tabs.tsx

@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "wora-transition inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium ring-offset-white focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-black/10 data-[state=active]:text-black data-[state=active]:shadow dark:data-[state=active]:bg-white/15 dark:data-[state=active]:text-white",
+      "wora-transition inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1.5 text-xs font-medium ring-offset-white focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-white/70 data-[state=active]:text-black data-[state=active]:shadow dark:data-[state=active]:bg-black/30 dark:data-[state=active]:text-white",
       className,
     )}
     {...props}

renderer/pages/_app.tsx

@@ -7,6 +7,7 @@ import { PlayerProvider } from "@/context/playerContext";
 import { useRouter } from "next/router";
 import { Toaster } from "@/components/ui/sonner";
 import { ThemeProvider } from "@/components/themeProvider";
+import { ScrollArea } from "@/components/ui/scroll-area";
 
 export default function App({ Component, pageProps }) {
   const router = useRouter();
@@ -18,7 +19,7 @@ export default function App({ Component, pageProps }) {
       disableTransitionOnChange
       enableSystem
     >
-      <main className="select-none rounded-lg bg-white font-sans text-xs text-black antialiased dark:bg-black dark:text-white">
+      <main className="select-none overflow-hidden rounded-lg bg-white font-sans text-xs text-black antialiased dark:bg-black dark:text-white">
         <Head>
           <title>Wora</title>
         </Head>
@@ -36,7 +37,10 @@ export default function App({ Component, pageProps }) {
                   </div>
                   <div className="h-screen flex-grow p-8 pl-0 pt-10">
                     <div className="wora-transition relative flex h-full w-full flex-col">
-                      <Component {...pageProps} />
+                      <ScrollArea className="mt-2.5 h-full w-full gradient-mask-b-80">
+                        <Component {...pageProps} />
+                        <div className="h-[16vh] w-full"></div>
+                      </ScrollArea>
                       <Player />
                     </div>
                   </div>

renderer/pages/albums.tsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useState } from "react";
-import { ScrollArea } from "@/components/ui/scroll-area";
 import AlbumCard from "@/components/ui/album";
 
 export default function Albums() {
@@ -12,18 +11,16 @@ export default function Albums() {
   }, []);
 
   return (
-    <ScrollArea className="mt-2.5 h-full w-full gradient-mask-b-80">
+    <div className="flex flex-col gap-8">
       <div className="flex flex-col gap-8">
-        <div className="flex flex-col gap-8">
-          <div className="flex flex-col">
-            <div className="mt-4 text-base font-medium">Albums</div>
-            <div className="opacity-50">All of your albums in one place.</div>
-          </div>
-          <div className="grid w-full grid-cols-5 gap-8 pb-[32vh]">
-            {albums && albums.map((album) => <AlbumCard album={album} />)}
-          </div>
+        <div className="flex flex-col">
+          <div className="mt-4 text-base font-medium">Albums</div>
+          <div className="opacity-50">All of your albums in one place.</div>
+        </div>
+        <div className="grid w-full grid-cols-5 gap-8">
+          {albums && albums.map((album) => <AlbumCard album={album} />)}
         </div>
       </div>
-    </ScrollArea>
+    </div>
   );
 }