(refactor): minor tweaks for latest dependency migration

src-tauri/binaries/yt-dlp-x86_64-pc-windows-msvc.exe

@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:f26019446a303dfa16f5a4b60e03e853a5d1e0d44a682b31e5cfd2622c0ce2fd
-size 18152568
+oid sha256:c20996d097127884243f4780d929b3769d55418c0efa9bd7a98999f387b5fbed
+size 18113133

src-tauri/tauri.conf.json

@@ -15,7 +15,7 @@
       {
         "title": "NeoDLP",
         "width": 1067,
-        "height": 600,
+        "height": 605,
         "visible": false
       }
     ],

src-tauri/tauri.linux.conf.json

@@ -11,7 +11,7 @@
             {
                 "title": "NeoDLP",
                 "width": 1067,
-                "height": 600,
+                "height": 605,
                 "visible": false
             }
         ],

src-tauri/tauri.macos-aarch64.conf.json

@@ -11,7 +11,7 @@
             {
                 "title": "NeoDLP",
                 "width": 1067,
-                "height": 600,
+                "height": 605,
                 "visible": false
             }
         ],

src-tauri/tauri.macos-x86_64.conf.json

@@ -11,7 +11,7 @@
             {
                 "title": "NeoDLP",
                 "width": 1067,
-                "height": 600,
+                "height": 605,
                 "visible": false
             }
         ],

src-tauri/tauri.windows.conf.json

@@ -11,7 +11,7 @@
             {
                 "title": "NeoDLP",
                 "width": 1067,
-                "height": 600,
+                "height": 605,
                 "visible": false
             }
         ],

src/components/custom/legacyToggleGroup.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group"
+import { type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { toggleVariants } from "@/components/ui/toggle"
+
+const ToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants>
+>({
+  size: "default",
+  variant: "default",
+})
+
+const ToggleGroup = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
+    VariantProps<typeof toggleVariants>
+>(({ className, variant, size, children, ...props }, ref) => (
+  <ToggleGroupPrimitive.Root
+    ref={ref}
+    className={cn("flex items-center justify-center gap-1", className)}
+    {...props}
+  >
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      {children}
+    </ToggleGroupContext.Provider>
+  </ToggleGroupPrimitive.Root>
+))
+
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
+
+const ToggleGroupItem = React.forwardRef<
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants>
+>(({ className, children, variant, size, ...props }, ref) => {
+  const context = React.useContext(ToggleGroupContext)
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        toggleVariants({
+          variant: context.variant || variant,
+          size: context.size || size,
+        }),
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </ToggleGroupPrimitive.Item>
+  )
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
+
+export { ToggleGroup, ToggleGroupItem }

src/components/sidebar.tsx

@@ -124,7 +124,7 @@ export function AppSidebar() {
                         <item.icon />
                         <span>{item.title}</span>
                         {item.title === "Library" && ongoingDownloads.length > 0 && showBadge && (
-                          <Badge className="absolute right-2 inset-y-auto rounded-full font-bold bg-foreground/80">{ongoingDownloads.length}</Badge>
+                          <Badge className="absolute right-2 inset-y-auto h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">{ongoingDownloads.length}</Badge>
                         )}
                       </Link>
                     </SidebarMenuButton>

src/pages/downloader.tsx

@@ -9,10 +9,10 @@ import { useToast } from "@/hooks/use-toast";
 import { useAppContext } from "@/providers/appContextProvider";
 import { useCurrentVideoMetadataStore, useDownloaderPageStatesStore } from "@/services/store";
 import { determineFileType, fileFormatFilter, formatBitrate, formatDurationString, formatFileSize, formatReleaseDate, formatYtStyleCount, isObjEmpty, sortByBitrate } from "@/utils";
-import { Calendar, Clock, DownloadCloud, Eye, Info, Loader2, Music, ThumbsUp, Video, File, ListVideo } from "lucide-react";
+import { Calendar, Clock, DownloadCloud, Eye, Info, Loader2, Music, ThumbsUp, Video, File, ListVideo, PackageSearch } from "lucide-react";
 import { FormatSelectionGroup, FormatSelectionGroupItem } from "@/components/custom/formatSelectionGroup";
 import { useEffect, useRef } from "react";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { ToggleGroup, ToggleGroupItem } from "@/components/custom/legacyToggleGroup";
 import { VideoFormat } from "@/types/video";
 // import { PlaylistToggleGroup, PlaylistToggleGroupItem } from "@/components/custom/playlistToggleGroup";
 import { PlaylistSelectionGroup, PlaylistSelectionGroupItem } from "@/components/custom/playlistSelectionGroup";
@@ -223,9 +223,9 @@ export default function DownloaderPage() {
 
     return (
         <div className="container mx-auto p-4 space-y-4 relative" ref={containerRef}>
-            <Card>
+            <Card className="gap-4">
                 <CardHeader>
-                    <CardTitle>{config.appName} Search</CardTitle>
+                    <CardTitle className="flex items-center"><PackageSearch className="size-5 mr-3" />{config.appName} Search</CardTitle>
                 </CardHeader>
                 <CardContent className="space-y-4">
                     <Form {...searchForm}>
@@ -239,7 +239,7 @@ export default function DownloaderPage() {
                                         <FormControl>
                                             <Input
                                             className="focus-visible:ring-0"
-                                            placeholder="Enter URL to search..."
+                                            placeholder="Enter Video URL to Search"
                                             {...field}
                                             />
                                         </FormControl>
@@ -352,7 +352,7 @@ export default function DownloaderPage() {
                             }
                         }}
                         >
-                            <p className="text-xs">Suggested (Best)</p>
+                            <p className="text-xs">Suggested</p>
                             <div className="">
                                 <FormatSelectionGroupItem
                                 key="best"

src/pages/library.tsx

@@ -8,7 +8,7 @@ import { useToast } from "@/hooks/use-toast";
 import { useAppContext } from "@/providers/appContextProvider";
 import { useDownloadActionStatesStore, useDownloadStatesStore } from "@/services/store";
 import { formatBitrate, formatCodec, formatDurationString, formatFileSize, formatSecToTimeString, formatSpeed } from "@/utils";
-import { AudioLines, CircleArrowDown, CircleCheck, Clock, File, FileAudio2, FileQuestion, FileVideo2, FolderInput, ListVideo, Loader2, Music, Pause, Play, Trash2, Video, X } from "lucide-react";
+import { AudioLines, Clock, CloudDownload, File, FileAudio2, FileQuestion, FileVideo2, FolderInput, ListVideo, Loader2, Music, PackageCheck, Pause, Play, Trash2, Video, X } from "lucide-react";
 import { invoke } from "@tauri-apps/api/core";
 import * as fs from "@tauri-apps/plugin-fs";
 import { DownloadState } from "@/types/download";
@@ -100,8 +100,8 @@ export default function LibraryPage() {
         <div className="container mx-auto p-4 space-y-4">
             <Heading title="Library" description="Manage all your downloads in one place" />
             <div className="w-full fle flex-col">
-                <div className="flex w-full items-center gap-2 mb-2">
-                    <CircleArrowDown className="size-4" />
+                <div className="flex w-full items-center gap-3 mb-2">
+                    <CloudDownload className="size-5" />
                     <h3 className="text-nowrap font-semibold">Incomplete Downloads</h3>
                 </div>
                 <Separator orientation="horizontal" className="" />
@@ -279,8 +279,8 @@ export default function LibraryPage() {
                 )}
             </div>
             <div className="w-full fle flex-col">
-                <div className="flex w-full items-center gap-2 mb-2">
-                    <CircleCheck className="size-4" />
+                <div className="flex w-full items-center gap-3 mb-2">
+                    <PackageCheck className="size-5" />
                     <h3 className="text-nowrap font-semibold">Completed Downloads</h3>
                 </div>
                 <Separator orientation="horizontal" className="" />

src/pages/settings.tsx

@@ -24,13 +24,15 @@ import { invoke } from "@tauri-apps/api/core";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 
 const websocketPortSchema = z.object({
-    port: z.string().min(1, { message: "Websocket port is required" })
-    .regex(/^\d+$/, { message: "Websocket port must be a number" })
-    .transform((val) => parseInt(val, 10))
-    .refine((port) => port >= 50000 && port <= 60000, {
-        message: "Websocket port must be between 50000 and 60000",
-    })
-});
+    port: z.coerce.number({
+        required_error: "Websocket Port is required",
+        invalid_type_error: "Websocket Port must be a valid number",
+    }).min(50000, {
+        message: "Websocket Port must be at least 50000"
+    }).max(60000, {
+        message: "Websocket Port must be at most 60000"
+    }),
+})
 
 const proxyUrlSchema = z.object({
     url: z.string().min(1, { message: "Proxy URL is required" }).url({ message: "Invalid URL format" })
@@ -163,7 +165,7 @@ export default function SettingsPage() {
                     <Card className="p-4 space-y-4 my-4">
                         <div className="w-full flex gap-4 items-center justify-between">
                             <div className="flex gap-4 items-center">
-                                <div className="imgwrapper w-10 h-10 flex items-center justify-center bg-gradient-to-r from-[#4444FF] to-[#FF43D0] rounded-md overflow-hidden border border-border">
+                                <div className="imgwrapper w-10 h-10 flex items-center justify-center bg-linear-65 from-[#FF43D0] to-[#4444FF] rounded-md overflow-hidden border border-border">
                                     <Terminal className="size-5 text-white" />
                                 </div>
                                 <div className="flex flex-col">
@@ -276,7 +278,7 @@ export default function SettingsPage() {
                             <p className="text-sm text-muted-foreground mb-3">Set maximum number of allowed parallel downloads</p>
                             <Slider
                             id="max-parallel-downloads"
-                            className="w-[350px]"
+                            className="w-[350px] mb-2"
                             value={[maxParallelDownloads]}
                             min={1}
                             max={5}
@@ -341,7 +343,7 @@ export default function SettingsPage() {
                     <Card className="p-4 space-y-4 my-4">
                         <div className="w-full flex gap-4 items-center justify-between">
                             <div className="flex gap-4 items-center">
-                                <div className="imgwrapper w-10 h-10 flex items-center justify-center bg-gradient-to-r from-[#4444FF] to-[#FF43D0] rounded-md overflow-hidden border border-border">
+                                <div className="imgwrapper w-10 h-10 flex items-center justify-center bg-linear-65 from-[#FF43D0] to-[#4444FF] rounded-md overflow-hidden border border-border">
                                     <Radio className="size-5 text-white" />
                                 </div>
                                 <div className="flex flex-col">