fix redundant code, broken stuff, migrate to tw v4 ✅

Author: hiaaryan

bun.lockb

@@ -31,6 +31,7 @@
     "@radix-ui/react-tabs": "^1.1.12",
     "@radix-ui/react-tooltip": "^1.2.7",
     "@tabler/icons-react": "^3.34.0",
+    "@tailwindcss/postcss": "^4.1.10",
     "@types/better-sqlite3": "^7.6.13",
     "@types/crypto-js": "^4.2.2",
     "@xhayper/discord-rpc": "^1.2.2",
@@ -55,7 +56,6 @@
     "react-window": "^1.8.11",
     "seamless-scroll-polyfill": "^2.3.4",
     "sonner": "^2.0.5",
-    "tailwind-gradient-mask-image": "^1.2.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss-animate": "^1.0.7",
     "zod": "^3.25.67"
@@ -77,7 +77,7 @@
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "rebuild": "^0.1.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^4.1.10",
     "typescript": "^5.8.3"
   },
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"

package.json

@@ -37,11 +37,11 @@ const Lyrics: React.FC<LyricsProps> = React.memo(
 
     return (
       <div className="wora-border relative h-full w-full rounded-2xl bg-white/70 backdrop-blur-xl dark:bg-black/70">
-        <div className="absolute bottom-5 right-6 z-50 flex items-center gap-2">
+        <div className="absolute right-6 bottom-5 z-50 flex items-center gap-2">
           <Badge>{isSyncedLyrics ? "Synced" : "Unsynced"}</Badge>
         </div>
 
-        <div className="h-utility flex w-full items-center overflow-y-auto text-balance px-8 text-2xl font-medium gradient-mask-b-70-d">
+        <div className="h-utility mask flex w-full items-center overflow-y-auto mask-y-from-70% px-8 text-2xl font-medium text-balance">
           <div
             ref={lyricsRef}
             className="no-scrollbar h-full w-full py-[33vh]"

renderer/components/main/lyrics.tsx

@@ -229,7 +229,7 @@ const Navbar = () => {
               <p>{settings && settings.name ? settings.name : "Wora User"}</p>
             </TooltipContent>
           </Tooltip>
-          <div className="wora-border flex w-[4.5rem] flex-col items-center gap-10 rounded-2xl p-8">
+          <div className="wora-border flex w-18 flex-col items-center gap-10 rounded-2xl p-8">
             {navLinks.map((link) => (
               <Tooltip key={link.href} delayDuration={0}>
                 <TooltipTrigger>
@@ -298,7 +298,7 @@ const Navbar = () => {
                     onSelect={() => handleItemClick(item)}
                     className="text-black dark:text-white"
                   >
-                    <div className="flex h-full w-full items-center gap-2.5 gradient-mask-r-70">
+                    <div className="flex h-full w-full items-center gap-2.5 mask-r-from-70%">
                       {(item.type === "Playlist" || item.type === "Album") && (
                         <div className="relative h-12 w-12 overflow-hidden rounded-lg shadow-xl transition duration-300">
                           <Image
@@ -315,7 +315,7 @@ const Navbar = () => {
                         </div>
                       )}
                       <div>
-                        <p className="w-full overflow-hidden text-nowrap text-xs">
+                        <p className="w-full overflow-hidden text-xs text-nowrap">
                           {item.name}
                           <span className="ml-1 opacity-50">({item.type})</span>
                         </p>
@@ -333,7 +333,7 @@ const Navbar = () => {
               </CommandGroup>
             ) : (
               <div className="flex h-[325px] w-full items-center justify-center text-xs">
-                <div className="dark:bg.white/10 ml-2 rounded-lg bg-black/5 px-1.5 py-1 shadow-sm">
+                <div className="dark:bg.white/10 ml-2 rounded-lg bg-black/5 px-1.5 py-1 shadow-xs">
                   ⌘ / Ctrl + F
                 </div>
               </div>

renderer/components/main/navbar.tsx

@@ -669,7 +669,7 @@ export const Player = () => {
       <div className="h-utility w-full max-w-3xl px-6 pt-6">
         <Tabs
           defaultValue="queue"
-          className="flex h-full w-full flex-col gap-4 gradient-mask-b-70"
+          className="flex h-full w-full flex-col gap-4 mask-b-from-70%"
         >
           <TabsList className="w-full">
             <TabsTrigger value="queue" className="w-full gap-2">
@@ -683,7 +683,7 @@ export const Player = () => {
           {/* Queue tab content */}
           <TabsContent
             value="queue"
-            className="no-scrollbar flex-grow overflow-y-auto pb-64"
+            className="no-scrollbar grow overflow-y-auto pb-64"
           >
             <ul className="flex flex-col gap-4">
               {queue.slice(currentIndex + 1).map((song) => (
@@ -701,7 +701,7 @@ export const Player = () => {
           {/* History tab content */}
           <TabsContent
             value="history"
-            className="no-scrollbar flex-grow overflow-y-auto pb-64"
+            className="no-scrollbar grow overflow-y-auto pb-64"
           >
             <ul className="flex flex-col gap-4">
               {[...history].reverse().map((song) => (
@@ -749,7 +749,7 @@ export const Player = () => {
   return (
     <div>
       {/* Lyrics overlay */}
-      <div className="absolute right-0 top-0 w-full">
+      <div className="absolute top-0 right-0 w-full">
         {showLyrics && lyrics && (
           <Lyrics
             lyrics={parseLyrics(lyrics)}
@@ -761,7 +761,7 @@ export const Player = () => {
       </div>
 
       {/* Queue panel */}
-      <div className="!absolute right-0 top-0 w-96">
+      <div className="!absolute top-0 right-0 w-96">
         {showQueue && <QueuePanel />}
       </div>
 
@@ -777,7 +777,7 @@ export const Player = () => {
                     <Link
                       href={song.album?.id ? `/albums/${song.album.id}` : "#"}
                     >
-                      <div className="relative min-h-[4.25rem] min-w-[4.25rem] overflow-hidden rounded-lg shadow-lg transition">
+                      <div className="relative min-h-17 min-w-17 overflow-hidden rounded-lg shadow-lg transition">
                         <Image
                           alt="Album Cover"
                           src={`wora://${song?.album.cover}`}
@@ -818,7 +818,7 @@ export const Player = () => {
                   </ContextMenuContent>
                 </ContextMenu>
               ) : (
-                <div className="relative min-h-[4.25rem] min-w-[4.25rem] overflow-hidden rounded-lg shadow-lg">
+                <div className="relative min-h-17 min-w-17 overflow-hidden rounded-lg shadow-lg">
                   <Image
                     alt="Album Cover"
                     src="/coverArt.png"
@@ -854,25 +854,25 @@ export const Player = () => {
             </div>
 
             {/* Center - Playback controls */}
-            <div className="absolute left-0 right-0 mx-auto flex h-full w-2/4 flex-col items-center justify-between gap-4">
+            <div className="absolute right-0 left-0 mx-auto flex h-full w-2/4 flex-col items-center justify-between gap-4">
               {/* Playback buttons */}
               <div className="flex h-full w-full items-center justify-center gap-8">
                 {/* Shuffle button */}
                 <Button
                   variant="ghost"
                   onClick={toggleShuffle}
-                  className="relative !opacity-100"
+                  className="relative opacity-100!"
                 >
                   {!shuffle ? (
                     <IconArrowsShuffle2
                       stroke={2}
                       size={16}
-                      className="!opacity-30 hover:!opacity-100"
+                      className="opacity-30! hover:opacity-100!"
                     />
                   ) : (
                     <div>
                       <IconArrowsShuffle2 stroke={2} size={16} />
-                      <div className="absolute -top-2 left-0 right-0 mx-auto h-[1.5px] w-2/3 rounded-full bg-black dark:bg-white"></div>
+                      <div className="absolute -top-2 right-0 left-0 mx-auto h-[1.5px] w-2/3 rounded-full bg-black dark:bg-white"></div>
                     </div>
                   )}
                 </Button>
@@ -913,18 +913,18 @@ export const Player = () => {
                 <Button
                   variant="ghost"
                   onClick={toggleRepeat}
-                  className="relative !opacity-100"
+                  className="relative opacity-100!"
                 >
                   {!repeat ? (
                     <IconRepeat
                       stroke={2}
                       size={15}
-                      className="!opacity-30 hover:!opacity-100"
+                      className="opacity-30! hover:opacity-100!"
                     />
                   ) : (
                     <div>
                       <IconRepeat stroke={2} size={15} />
-                      <div className="absolute -top-2 left-0 right-0 mx-auto h-[1.5px] w-2/3 rounded-full bg-black dark:bg-white"></div>
+                      <div className="absolute -top-2 right-0 left-0 mx-auto h-[1.5px] w-2/3 rounded-full bg-black dark:bg-white"></div>
                     </div>
                   )}
                 </Button>
@@ -990,7 +990,7 @@ export const Player = () => {
                     <TooltipTrigger>
                       <Button
                         variant="ghost"
-                        className="!opacity-100"
+                        className="opacity-100!"
                         onClick={() => toggleFavourite(song?.id)}
                         disabled={!song}
                       >
@@ -1033,13 +1033,13 @@ export const Player = () => {
                 <Button
                   variant="ghost"
                   onClick={toggleMute}
-                  className="!opacity-100"
+                  className="opacity-100!"
                 >
                   {!isMuted ? (
                     <IconVolume
                       stroke={2}
                       size={17.5}
-                      className="wora-transition !opacity-30 hover:!opacity-100"
+                      className="wora-transition opacity-30! hover:opacity-100!"
                     />
                   ) : (
                     <IconVolumeOff

renderer/components/main/player.tsx

@@ -8,7 +8,6 @@ type Album = {
   name: string;
   artist: string;
   cover: string;
-  duration?: number;
 };
 
 type AlbumCardProps = {
@@ -17,42 +16,27 @@ type AlbumCardProps = {
 
 const AlbumCard: React.FC<AlbumCardProps> = ({ album }) => {
   return (
-    <div className="group/album wora-border wora-transition rounded-2xl p-5 hover:bg-black/5 dark:hover:bg-white/10">
-      <div className="relative flex flex-col justify-between">
-        <Link href={`/albums/${album.id}`} passHref>
+    <Link href={`/albums/${album.id}`}>
+      <div className="group/album wora-border wora-transition rounded-2xl p-5 hover:bg-black/5 dark:hover:bg-white/10">
+        <div className="relative flex flex-col justify-between">
           <div className="relative w-full overflow-hidden rounded-xl pb-[100%] shadow-lg">
             <Image
               alt={album ? album.name : "Album Cover"}
               src={`wora://${album.cover}`}
               fill
               loading="lazy"
               className="z-10 cursor-pointer object-cover"
-              quality={10}
             />
           </div>
-        </Link>
-        <div className="mt-8 flex w-full flex-col overflow-clip">
-          <Link href={`/albums/${album.id}`} passHref>
-            <p className="cursor-pointer truncate text-sm font-medium">
+          <div className="mt-8 flex w-full flex-col overflow-clip">
+            <p className="cursor-pointer mask-r-from-70% text-sm font-medium text-nowrap">
               {album.name}
             </p>
-          </Link>
-          <div className="flex items-center justify-between">
-            <Link
-              href={`/artists/${encodeURIComponent(album.artist)}`}
-              passHref
-            >
-              <p className="text-primary mr-2 cursor-pointer truncate opacity-50 hover:underline">
-                {album.artist}
-              </p>
-            </Link>
-            <span className="shrink-0 text-xs opacity-50">
-              {album.duration ? convertTime(album.duration) : "--:--"}
-            </span>
+            <p className="mr-2 truncate opacity-50">{album.artist}</p>
           </div>
         </div>
       </div>
-    </div>
+    </Link>
   );
 };
 

renderer/components/ui/album.tsx

@@ -12,7 +12,7 @@ const badgeVariants = cva(
         secondary:
           "border-transparent bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
         destructive:
-          "border-transparent bg-red-500 text-neutral-50 shadow hover:bg-red-500/80 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/80",
+          "border-transparent bg-red-500 text-neutral-50 shadow-sm hover:bg-red-500/80 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/80",
         outline: "text-neutral-950 dark:text-neutral-50",
       },
     },

renderer/components/ui/badge.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
         default: "bg-white/70 dark:bg-black/30 hover:scale-95 wora-border",
         destructive: "bg-red-500/10 hover:scale-95 border border-red-500/15",
         outline:
-          "border border-neutral-200 bg-white shadow-sm hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+          "border border-neutral-200 bg-white shadow-xs hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
         ghost: "wora-transition opacity-30 hover:opacity-100 p-0",
       },
     },

renderer/components/ui/button.tsx

@@ -47,7 +47,7 @@ const CommandInput = React.forwardRef<
     <CommandPrimitive.Input
       ref={ref}
       className={cn(
-        "flex w-full bg-transparent text-xs outline-none placeholder:text-black/50 dark:placeholder:text-white/50",
+        "flex w-full bg-transparent text-xs outline-hidden placeholder:text-black/50 dark:placeholder:text-white/50",
         className,
       )}
       {...props}
@@ -121,7 +121,7 @@ const CommandItem = React.forwardRef<
   <CommandPrimitive.Item
     ref={ref}
     className={cn(
-      "wora-transition relative flex cursor-pointer select-none items-center text-nowrap rounded-xl p-2 text-xs outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-black/5 data-[selected=true]:text-black data-[disabled=true]:opacity-50 dark:data-[selected=true]:bg-white/10 dark:data-[selected=true]:text-white",
+      "wora-transition relative flex cursor-pointer select-none items-center text-nowrap rounded-xl p-2 text-xs outline-hidden data-[disabled=true]:pointer-events-none data-[selected=true]:bg-black/5 data-[selected=true]:text-black data-[disabled=true]:opacity-50 dark:data-[selected=true]:bg-white/10 dark:data-[selected=true]:text-white",
       className,
     )}
     {...props}

renderer/components/ui/command.tsx

@@ -31,7 +31,7 @@ const ContextMenuSubTrigger = React.forwardRef<
   <ContextMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      "wora-transition flex cursor-pointer select-none items-center rounded-lg p-2 text-xs outline-none hover:bg-black/5 data-[state=open]:bg-black/5 data-[state=open]:text-black dark:hover:bg-white/10 dark:data-[state=open]:bg-white/10 dark:data-[state=open]:text-white",
+      "wora-transition flex cursor-pointer select-none items-center rounded-lg p-2 text-xs outline-hidden hover:bg-black/5 data-[state=open]:bg-black/5 data-[state=open]:text-black dark:hover:bg-white/10 dark:data-[state=open]:bg-white/10 dark:data-[state=open]:text-white",
       inset && "pl-8",
       className,
     )}
@@ -84,7 +84,7 @@ const ContextMenuItem = React.forwardRef<
   <ContextMenuPrimitive.Item
     ref={ref}
     className={cn(
-      "wora-transition flex cursor-pointer select-none items-center rounded-lg p-2 text-xs outline-none hover:bg-black/5 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:hover:bg-white/10 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "wora-transition flex cursor-pointer select-none items-center rounded-lg p-2 text-xs outline-hidden hover:bg-black/5 data-disabled:pointer-events-none data-disabled:opacity-50 dark:hover:bg-white/10 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
       inset && "pl-8",
       className,
     )}
@@ -100,7 +100,7 @@ const ContextMenuCheckboxItem = React.forwardRef<
   <ContextMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-neutral-100 focus:text-neutral-900 data-disabled:pointer-events-none data-disabled:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
       className,
     )}
     checked={checked}
@@ -124,7 +124,7 @@ const ContextMenuRadioItem = React.forwardRef<
   <ContextMenuPrimitive.RadioItem
     ref={ref}
     className={cn(
-      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-neutral-100 focus:text-neutral-900 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
+      "relative flex cursor-default select-none items-center rounded-xs py-1.5 pl-8 pr-2 text-sm outline-hidden focus:bg-neutral-100 focus:text-neutral-900 data-disabled:pointer-events-none data-disabled:opacity-50 dark:focus:bg-neutral-800 dark:focus:text-neutral-50",
       className,
     )}
     {...props}