feat: updated settings dialog, settings api fix

Author: Venipa

src/main/trpc/settings.api.ts

@@ -6,6 +6,7 @@ import config from "@shared/config";
 import { TRPCError } from "@trpc/server";
 import { observable } from "@trpc/server/observable";
 import { app, dialog } from "electron";
+import { merge } from "lodash-es";
 import { z } from "zod";
 import { publicProcedure, router } from "./trpc";
 const settingsChangeEmitter = new EventEmitter();
@@ -59,7 +60,7 @@ export const settingsRouter = router({
 			return { key, value };
 		}),
 	updateMany: publicProcedure.input(z.record(z.any())).mutation(async ({ ctx, input: settings }) => {
-		appStore.set(settings);
+		appStore.set(merge(appStore.store, settings));
 		Object.keys(settings).forEach((key) => {
 			settingsChangeEmitter.emit(handleKey, { key });
 		});

src/main/trpc/ytdlp.utils.ts

@@ -9,6 +9,7 @@ import { Logger } from "@shared/logger";
 import { resulter } from "@shared/promises/helper";
 import { nt as calvNewerThan } from "calver";
 import { app } from "electron";
+import { stat, unlink } from "fs/promises";
 import { VideoInfo } from "yt-dlp-wrap/types";
 import { pushLogToClient } from "./events.ee";
 const YTDLP_PLATFORM = platform();
@@ -95,6 +96,9 @@ export class YTDLP {
 	}
 	private async downloadUpdate(release: GithubRelease & { version: string }): Promise<{ version: string; path: string }> {
 		const newYtdlPath = path.join(ytdlpPath, appPlatform.isWindows ? "ytdlp.exe" : "ytdlp");
+		if (await stat(newYtdlPath).then((stats) => stats.isFile())) {
+			await unlink(newYtdlPath);
+		}
 		await YTDLWrapper.downloadFromGithub(newYtdlPath, release.version, YTDLP_PLATFORM);
 		return { version: release.version, path: newYtdlPath };
 	}

src/renderer/src/components/ui/button.tsx

@@ -12,7 +12,7 @@ const buttonVariants = cva(
 				default: "bg-primary text-primary-foreground shadow hover:bg-primary/90 [&.active]:bg-primary",
 				accent: "bg-accent text-accent-foreground shadow hover:bg-accent/90 [&.active]:bg-accent",
 				destructive: "bg-destructive text-destructive-foreground shadow-sm ring-destructive/40 hover:bg-destructive/90 focus:bg-destructive/90",
-				outline: "border border-secondary-foreground/10 bg-background/20 ring-secondary/40 hover:bg-backround/30 hover:text-secondary-foreground",
+				outline: "border border-secondary-foreground/10 bg-background/20 ring-secondary/40 hover:bg-secondary/50 hover:text-secondary-foreground focus:bg-secondary/50",
 				secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
 				ghost: "hover:bg-primary/5 hover:text-secondary-foreground ring-secondary/30 [&.active]:text-secondary-foreground [&.active]:bg-primary/10",
 				link: "text-primary underline-offset-4 hover:underline",

src/renderer/src/components/ui/dialog.tsx

@@ -1,73 +1,86 @@
 "use client";
 
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { Cross2Icon } from "@radix-ui/react-icons";
+import { XIcon } from "lucide-react";
 import * as React from "react";
 
-import { cn } from "@renderer/lib/utils";
+import { cn } from "@/lib/utils";
 
-const Dialog = DialogPrimitive.Root;
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+	return <DialogPrimitive.Root data-slot='dialog' {...props} />;
+}
 
-const DialogTrigger = DialogPrimitive.Trigger;
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+	return <DialogPrimitive.Trigger data-slot='dialog-trigger' {...props} />;
+}
 
-const DialogPortal = DialogPrimitive.Portal;
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+	return <DialogPrimitive.Portal data-slot='dialog-portal' {...props} />;
+}
 
-const DialogClose = DialogPrimitive.Close;
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+	return <DialogPrimitive.Close data-slot='dialog-close' {...props} />;
+}
 
-const DialogOverlay = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Overlay>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>(
-	({ className, ...props }, ref) => (
+function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+	return (
 		<DialogPrimitive.Overlay
-			ref={ref}
+			data-slot='dialog-overlay'
 			className={cn(
-				"fixed inset-0 z-50 bg-black/80 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+				"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/50",
 				className,
 			)}
 			{...props}
 		/>
-	),
-);
-DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+	);
+}
 
-const DialogContent = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Content>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>>(
-	({ className, children, ...props }, ref) => (
-		<DialogPortal>
+function DialogContent({
+	className,
+	children,
+	showCloseButton = true,
+	...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+	showCloseButton?: boolean;
+}) {
+	return (
+		<DialogPortal data-slot='dialog-portal'>
 			<DialogOverlay />
 			<DialogPrimitive.Content
-				ref={ref}
+				data-slot='dialog-content'
 				className={cn(
-					"fixed left-[50%] top-[50%] z-50 grid w-full outline-none overflow-y-auto max-h-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background py-6 px-4 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg",
+					"bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg",
 					className,
 				)}
 				{...props}>
 				{children}
-				<DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
-					<Cross2Icon className='h-4 w-4' />
-					<span className='sr-only'>Close</span>
-				</DialogPrimitive.Close>
+				{showCloseButton && (
+					<DialogPrimitive.Close
+						data-slot='dialog-close'
+						className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4">
+						<XIcon />
+						<span className='sr-only'>Close</span>
+					</DialogPrimitive.Close>
+				)}
 			</DialogPrimitive.Content>
 		</DialogPortal>
-	),
-);
-DialogContent.displayName = DialogPrimitive.Content.displayName;
+	);
+}
 
-const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)} {...props} />
-);
-DialogHeader.displayName = "DialogHeader";
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot='dialog-header' className={cn("flex flex-col gap-2 text-center sm:text-left", className)} {...props} />;
+}
 
-const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
-	<div className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)} {...props} />
-);
-DialogFooter.displayName = "DialogFooter";
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+	return <div data-slot='dialog-footer' className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props} />;
+}
 
-const DialogTitle = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Title>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>>(
-	({ className, ...props }, ref) => <DialogPrimitive.Title ref={ref} className={cn("text-lg font-semibold leading-none tracking-tight", className)} {...props} />,
-);
-DialogTitle.displayName = DialogPrimitive.Title.displayName;
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+	return <DialogPrimitive.Title data-slot='dialog-title' className={cn("text-lg leading-none font-semibold", className)} {...props} />;
+}
 
-const DialogDescription = React.forwardRef<React.ElementRef<typeof DialogPrimitive.Description>, React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>>(
-	({ className, ...props }, ref) => <DialogPrimitive.Description ref={ref} className={cn("text-sm text-muted-foreground", className)} {...props} />,
-);
-DialogDescription.displayName = DialogPrimitive.Description.displayName;
+function DialogDescription({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Description>) {
+	return <DialogPrimitive.Description data-slot='dialog-description' className={cn("text-muted-foreground text-sm", className)} {...props} />;
+}
 
 export { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger };

src/renderer/src/components/ui/responsive-tabs.tsx

@@ -73,7 +73,10 @@ function TabNavbar({ children, defaultTab, orientation = "horizontal", indicator
 		<TabContext.Provider value={contextValue}>
 			<nav
 				className={cn(
-					`relative flex select-none ${isMobile ? "items-stretch" : isVertical ? "flex-col items-stretch pb-10" : "items-center "} border-border ${isMobile && !isVertical ? "" : isVertical ? "border-r h-full pr-2" : "border-b"}`,
+					`relative flex select-none border-border`,
+					isMobile && "items-stretch",
+					!isMobile && isVertical ? "flex-col items-stretch pb-10" : "items-center",
+					!isMobile && isVertical ? "border-r h-full" : "border-b",
 					className,
 				)}>
 				{isMobile && orientation === "horizontal" ? (
@@ -97,7 +100,7 @@ function TabNavbar({ children, defaultTab, orientation = "horizontal", indicator
 					</Sheet>
 				) : (
 					<>
-						<div className={cn(`flex ${orientation === "vertical" ? "flex-col space-y-1 truncate flex-auto" : "items-center flex-auto space-x-1"}`)}>{children}</div>
+						<div className={cn(`flex ${orientation === "vertical" ? "flex-col space-y-1 flex-auto" : "items-center flex-auto space-x-1"}`)}>{children}</div>
 						<ActiveTabIndicator />
 					</>
 				)}
@@ -190,7 +193,7 @@ function ActiveTabIndicator() {
 		!isInitialRender && (
 			<>
 				<motion.div
-					className='bg-primary absolute rounded-full'
+					className='bg-primary absolute rounded-full -z-1'
 					initial={false}
 					animate={getIndicatorStyles()}
 					transition={{
@@ -201,7 +204,7 @@ function ActiveTabIndicator() {
 				/>
 				{orientation === "vertical" && (
 					<motion.div
-						className='bg-gradient-to-r from-primary/0 to-primary/40 blur absolute rounded-full'
+						className='bg-linear-to-r from-primary/0 to-primary/40 blur absolute rounded-full -z-1'
 						style={{
 							[indicatorPosition !== "right" ? "marginLeft" : "marginRight"]: "-" + getIndicatorStyles().width,
 						}}

src/renderer/src/components/ui/tooltip.tsx

@@ -3,49 +3,63 @@
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import * as React from "react";
 
+import { Slot } from "@radix-ui/react-slot";
 import { cn } from "@renderer/lib/utils";
 
-const TooltipProvider = TooltipPrimitive.Provider;
+function TooltipProvider({ delayDuration = 0, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+	return <TooltipPrimitive.Provider data-slot='tooltip-provider' delayDuration={delayDuration} {...props} />;
+}
 
-const Tooltip = TooltipPrimitive.Root;
+function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+	return (
+		<TooltipProvider>
+			<TooltipPrimitive.Root data-slot='tooltip' {...props} />
+		</TooltipProvider>
+	);
+}
 
-const TooltipTrigger = TooltipPrimitive.Trigger;
+function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+	return <TooltipPrimitive.Trigger data-slot='tooltip-trigger' {...props} />;
+}
 
-const TooltipContent = React.forwardRef<React.ElementRef<typeof TooltipPrimitive.Content>, React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>>(
-	({ className, sideOffset = 4, ...props }, ref) => (
-		<TooltipPrimitive.Content
-			ref={ref}
-			sideOffset={sideOffset}
-			className={cn(
-				"z-50 overflow-hidden rounded-md bg-secondary px-3 py-1.5 text-xs text-secondary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-				className,
-			)}
-			{...props}
-		/>
-	),
-);
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+function TooltipContent({ className, sideOffset = 0, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+	return (
+		<TooltipPrimitive.Portal>
+			<TooltipPrimitive.Content
+				data-slot='tooltip-content'
+				sideOffset={sideOffset}
+				className={cn(
+					"bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+					className,
+				)}
+				{...props}>
+				{children}
+			</TooltipPrimitive.Content>
+		</TooltipPrimitive.Portal>
+	);
+}
 
 const QTooltip = React.forwardRef<
 	React.ElementRef<typeof Tooltip>,
 	React.ComponentPropsWithoutRef<typeof TooltipContent> & React.PropsWithChildren<{ content: string | React.ReactNode }>
 >(({ className, children, content, asChild, side, ...props }, ref) => {
+	const TriggerSlot = asChild ? Slot : "button";
 	return (
-		<Tooltip delayDuration={350} {...props}>
+		<Tooltip delayDuration={350} defaultOpen={false} {...props}>
 			<TooltipTrigger disabled={!content} asChild={asChild} className='cursor-auto'>
-				{children}
+				<TriggerSlot>{children}</TriggerSlot>
 			</TooltipTrigger>
 			<TooltipContent
 				align='center'
 				{...{ side, ...props }}
 				sideOffset={4}
 				updatePositionStrategy='optimized'
 				ref={ref}
-				className='bg-white dark:bg-background-2 border border-muted dark:border-muted/60 shadow-md p-2.5 text-primary'>
+				className='bg-white dark:bg-background border border-muted fill-muted dark:border-muted/60 shadow-md text-primary'>
 				{typeof content === "string" ? <div>{content}</div> : content}
 			</TooltipContent>
 		</Tooltip>
 	);
 });
-
+QTooltip.displayName = "QTooltip";
 export { QTooltip, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

src/renderer/src/pages/components/link-list.tsx

@@ -235,36 +235,40 @@ export default function LinkList(props: { className?: string }) {
 			}
 		},
 	});
+	const noResults = useMemo(() => !filteredItems.length, [filteredItems]);
+	const hasSearch = useMemo(() => !!search?.length, [search]);
 	return (
 		<div className={cn("flex flex-col gap-2 relative", props.className)}>
-			<VList className='flex-grow relative flex flex-col py-2.5 px-2' style={{ height: "100%" }}>
+			<VList className='grow relative flex flex-col py-2.5 px-2' style={{ height: "100%" }}>
 				{isFetching && <SuspenseLoader className='absolute bg-background inset-0' />}
 				{filteredItems?.map((d) => (
 					<div className='h-12' key={d.id}>
 						<LinkListItem {...(d as any)} />
 					</div>
 				))}
 			</VList>
-			{!filteredItems.length && (
+			{noResults && (
 				<div className='absolute bg-background inset-0 flex items-center justify-center text-muted-foreground gap-4 flex-col'>
-					<span>No results found. Try a different search.</span>
+					{hasSearch ? <span>No results found. Try a different search.</span> : <span>No downloads found. Add a link to start downloading.</span>}
 					<pre className='flex flex-col bg-muted/20 border border-muted/40 p-2 rounded-md'>
 						{["type:video|audio", "size:<100mb, <=10gb, etc", "status:success|error|active"].map((line) => (
 							<span key={line} className='text-xs text-muted-foreground'>
 								{line}
 							</span>
 						))}
 					</pre>
-					<Button
-						variant={"ghost"}
-						size={"sm"}
-						className='px-2'
-						onClick={() => {
-							setSearch("");
-						}}>
-						<LucideRefreshCcw />
-						<span>Clear search</span>
-					</Button>
+					{hasSearch && (
+						<Button
+							variant={"ghost"}
+							size={"sm"}
+							className='px-2'
+							onClick={() => {
+								setSearch("");
+							}}>
+							<LucideRefreshCcw />
+							<span>Clear search</span>
+						</Button>
+					)}
 				</div>
 			)}
 		</div>

src/renderer/src/pages/components/settings/context.tsx

@@ -1,6 +1,5 @@
 import { atom, getDefaultStore, useAtom } from "jotai";
-import { PropsWithChildren, createContext, useCallback, useContext, useEffect } from "react";
-import SettingsDialog from "./dialog";
+import { Provider, createContext, useCallback, useContext, useEffect } from "react";
 
 type SettingsContextType = {
 	open: boolean;
@@ -16,7 +15,7 @@ const setShowSettings = (open: boolean) => {
 	console.log("setShowSettings", v);
 };
 const SettingsContext = createContext<SettingsContextType>({} as any);
-const SettingsContextProvider = ({ children }: PropsWithChildren) => {
+const SettingsContextProvider: Provider<SettingsContextType> = ({ value, ...props }) => {
 	const [settings, setSettings] = useAtom(settingsContext);
 	const showSettings = useCallback(() => {
 		setSettings((s) => ({ ...s, open: true }));
@@ -27,12 +26,7 @@ const SettingsContextProvider = ({ children }: PropsWithChildren) => {
 	useEffect(() => {
 		console.log("settings", settings);
 	}, [settings]);
-	return (
-		<SettingsContext.Provider value={{ open: settings.open, showSettings, closeSettings }}>
-			{children}
-			<SettingsDialog />
-		</SettingsContext.Provider>
-	);
+	return <SettingsContext.Provider value={{ ...value, open: settings.open, showSettings, closeSettings }} {...props} />;
 };
 
 const useSettings = () => {