mirror of
https://github.com/neosubhamoy/neodlp.git
synced 2025-12-19 13:12:57 +05:30
(refactor): improved settings categorization and layout
This commit is contained in:
@@ -7,7 +7,7 @@ import { Switch } from "@/components/ui/switch";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { useToast } from "@/hooks/use-toast";
|
||||
import { ExternalLink, FolderOpen, Loader2, LucideIcon, Monitor, Moon, Radio, RotateCcw, RotateCw, Sun, Terminal } from "lucide-react";
|
||||
import { ExternalLink, Folder, FolderOpen, Loader2, LucideIcon, Monitor, Moon, Radio, RotateCcw, RotateCw, Sun, Terminal, WandSparkles, Wifi, Wrench } from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { useEffect } from "react";
|
||||
import { useTheme } from "@/providers/themeProvider";
|
||||
@@ -157,11 +157,40 @@ export default function SettingsPage() {
|
||||
<div className="container mx-auto p-4 space-y-4 min-h-screen">
|
||||
<Heading title="Settings" description="Manage your preferences and app settings" />
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab}>
|
||||
<div className="w-full flex items-center justify-between">
|
||||
<TabsList>
|
||||
<TabsTrigger value="general">General</TabsTrigger>
|
||||
<TabsTrigger value="app">Application</TabsTrigger>
|
||||
<TabsTrigger value="extension">Extension</TabsTrigger>
|
||||
</TabsList>
|
||||
<TabsContent value="general">
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
className="w-fit"
|
||||
variant="destructive"
|
||||
size="sm"
|
||||
disabled={isUsingDefaultSettings}
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
Reset
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Reset settings to default?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
Are you sure you want to reset all settings to their default values? This action cannot be undone!
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={
|
||||
() => resetSettings()
|
||||
}>Reset</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
<TabsContent value="app">
|
||||
<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">
|
||||
@@ -220,10 +249,62 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-col w-[50%] gap-4">
|
||||
<Tabs
|
||||
orientation="vertical"
|
||||
defaultValue="general"
|
||||
className="w-full flex flex-row items-start gap-4 mt-10"
|
||||
>
|
||||
<TabsList className="shrink-0 grid grid-cols-1 gap-1 p-0 bg-background min-w-45">
|
||||
<TabsTrigger
|
||||
key="general"
|
||||
value="general"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground justify-start px-3 py-1.5 gap-2"
|
||||
><Wrench className="size-4" /> General</TabsTrigger>
|
||||
<TabsTrigger
|
||||
key="appearance"
|
||||
value="appearance"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground justify-start px-3 py-1.5 gap-2"
|
||||
><WandSparkles className="size-4" /> Appearance</TabsTrigger>
|
||||
<TabsTrigger
|
||||
key="folders"
|
||||
value="folders"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground justify-start px-3 py-1.5 gap-2"
|
||||
><Folder className="size-4" /> Folders</TabsTrigger>
|
||||
<TabsTrigger
|
||||
key="network"
|
||||
value="network"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground justify-start px-3 py-1.5 gap-2"
|
||||
><Wifi className="size-4" /> Network</TabsTrigger>
|
||||
</TabsList>
|
||||
<div className="min-h-full flex flex-col max-w-[55%] w-full border-l border-border pl-4">
|
||||
<TabsContent key="general" value="general" className="flex flex-col gap-4 min-h-[150px]">
|
||||
<div className="max-parallel-downloads">
|
||||
<h3 className="font-semibold">Max Parallel Downloads</h3>
|
||||
<p className="text-xs text-muted-foreground mb-3">Set maximum number of allowed parallel downloads</p>
|
||||
<Slider
|
||||
id="max-parallel-downloads"
|
||||
className="w-[350px] mb-2"
|
||||
value={[maxParallelDownloads]}
|
||||
min={1}
|
||||
max={5}
|
||||
onValueChange={(value) => saveSettingsKey('max_parallel_downloads', value[0])}
|
||||
/>
|
||||
<Label htmlFor="max-parallel-downloads" className="text-xs text-muted-foreground">(Current: {maxParallelDownloads}) (Default: 2, Maximum: 5)</Label>
|
||||
</div>
|
||||
<div className="prefer-video-over-playlist">
|
||||
<h3 className="font-semibold">Prefer Video Over Playlist</h3>
|
||||
<p className="text-xs text-muted-foreground mb-3">Prefer only the video, if the URL refers to a video and a playlist</p>
|
||||
<Switch
|
||||
id="prefer-video-over-playlist"
|
||||
checked={preferVideoOverPlaylist}
|
||||
onCheckedChange={(checked) => saveSettingsKey('prefer_video_over_playlist', checked)}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent key="appearance" value="appearance" className="flex flex-col gap-4 min-h-[150px]">
|
||||
<div className="app-theme">
|
||||
<h3 className="font-semibold">Theme</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">Choose app interface theme</p>
|
||||
<p className="text-xs text-muted-foreground mb-3">Choose app interface theme</p>
|
||||
<div className={cn('inline-flex gap-1 rounded-lg p-1 bg-muted')}>
|
||||
{themeOptions.map(({ value, icon: Icon, label }) => (
|
||||
<button
|
||||
@@ -242,9 +323,11 @@ export default function SettingsPage() {
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent key="folders" value="folders" className="flex flex-col gap-4 min-h-[150px]">
|
||||
<div className="download-dir">
|
||||
<h3 className="font-semibold">Download Directory</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">Set default download directory</p>
|
||||
<h3 className="font-semibold">Download Folder</h3>
|
||||
<p className="text-xs text-muted-foreground mb-3">Set default download folder (directory)</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<Input className="focus-visible:ring-0" type="text" placeholder="Select download directory" value={downloadDirPath ?? 'Unknown'} readOnly/>
|
||||
<Button
|
||||
@@ -273,31 +356,11 @@ export default function SettingsPage() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="max-parallel-downloads">
|
||||
<h3 className="font-semibold">Max Parallel Downloads</h3>
|
||||
<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] mb-2"
|
||||
value={[maxParallelDownloads]}
|
||||
min={1}
|
||||
max={5}
|
||||
onValueChange={(value) => saveSettingsKey('max_parallel_downloads', value[0])}
|
||||
/>
|
||||
<Label htmlFor="max-parallel-downloads" className="text-xs text-muted-foreground">(Current: {maxParallelDownloads}) (Default: 2, Maximum: 5)</Label>
|
||||
</div>
|
||||
<div className="prefer-video-over-playlist">
|
||||
<h3 className="font-semibold">Prefer Video Over Playlist</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">Prefer only the video, if the URL refers to a video and a playlist</p>
|
||||
<Switch
|
||||
id="prefer-video-over-playlist"
|
||||
checked={preferVideoOverPlaylist}
|
||||
onCheckedChange={(checked) => saveSettingsKey('prefer_video_over_playlist', checked)}
|
||||
/>
|
||||
</div>
|
||||
</TabsContent>
|
||||
<TabsContent key="network" value="network" className="flex flex-col gap-4 min-h-[150px]">
|
||||
<div className="proxy">
|
||||
<h3 className="font-semibold">Proxy</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">Use proxy for downloads, Unblocks blocked sites in your region (Download speed may affect, Some sites may not work)</p>
|
||||
<p className="text-xs text-muted-foreground mb-3">Use proxy for downloads, Unblocks blocked sites in your region (Download speed may affect, Some sites may not work)</p>
|
||||
<div className="flex items-center space-x-2 mb-4">
|
||||
<Switch
|
||||
id="use-proxy"
|
||||
@@ -337,7 +400,9 @@ export default function SettingsPage() {
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</TabsContent>
|
||||
<TabsContent value="extension">
|
||||
<Card className="p-4 space-y-4 my-4">
|
||||
@@ -389,10 +454,23 @@ export default function SettingsPage() {
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<div className="flex flex-col w-[50%] gap-4">
|
||||
<Tabs
|
||||
orientation="vertical"
|
||||
defaultValue="general"
|
||||
className="w-full flex flex-row items-start gap-4 mt-10"
|
||||
>
|
||||
<TabsList className="shrink-0 grid grid-cols-1 gap-1 p-0 bg-background min-w-45">
|
||||
<TabsTrigger
|
||||
key="general"
|
||||
value="general"
|
||||
className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground justify-start px-3 py-1.5 gap-2"
|
||||
><Wrench className="size-4" /> General</TabsTrigger>
|
||||
</TabsList>
|
||||
<div className="min-h-full flex flex-col max-w-[55%] w-full border-l border-border pl-4">
|
||||
<TabsContent key="general" value="general" className="flex flex-col gap-4 min-h-[150px]">
|
||||
<div className="websocket-port">
|
||||
<h3 className="font-semibold">Websocket Port</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">Change extension websocket server port</p>
|
||||
<p className="text-xs text-muted-foreground mb-3">Change extension websocket server port</p>
|
||||
<div className="flex items-center gap-4">
|
||||
<Form {...websocketPortForm}>
|
||||
<form onSubmit={websocketPortForm.handleSubmit(handleWebsocketPortSubmit)} className="flex gap-4 w-full" autoComplete="off">
|
||||
@@ -431,39 +509,11 @@ export default function SettingsPage() {
|
||||
</Form>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
<div className="flex flex-col">
|
||||
<h3 className="font-semibold">Reset Settings</h3>
|
||||
<p className="text-sm text-muted-foreground mb-3">Reset all setting to default</p>
|
||||
<AlertDialog>
|
||||
<AlertDialogTrigger asChild>
|
||||
<Button
|
||||
className="w-fit"
|
||||
variant="destructive"
|
||||
disabled={isUsingDefaultSettings}
|
||||
>
|
||||
<RotateCcw className="h-4 w-4" />
|
||||
Reset Default
|
||||
</Button>
|
||||
</AlertDialogTrigger>
|
||||
<AlertDialogContent>
|
||||
<AlertDialogHeader>
|
||||
<AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
|
||||
<AlertDialogDescription>
|
||||
This action cannot be undone! it will permanently reset all settings to default.
|
||||
</AlertDialogDescription>
|
||||
</AlertDialogHeader>
|
||||
<AlertDialogFooter>
|
||||
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
||||
<AlertDialogAction onClick={
|
||||
() => resetSettings()
|
||||
}>Reset</AlertDialogAction>
|
||||
</AlertDialogFooter>
|
||||
</AlertDialogContent>
|
||||
</AlertDialog>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user