neosubhamoy/neodlp
1
1
Fork 0
mirror of https://github.com/neosubhamoy/neodlp.git synced 2025-12-19 16:42:58 +05:30
Code Issues Actions Releases Wiki Activity

(refactor): improved settings categorization and layout

Browse Source
This commit is contained in:
Subhamoy Biswas
2025-07-09 21:51:51 +05:30
parent 1670a757ca
commit c133b18b49
1 changed files with 242 additions and 192 deletions
Download Patch File Download Diff File Expand all files Collapse all files

174
src/pages/settings.tsx
View File

@@ -7,7 +7,7 @@ import { Switch } from "@/components/ui/switch";
import { Label } from "@/components/ui/label"; import { Label } from "@/components/ui/label";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { useToast } from "@/hooks/use-toast"; 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 { cn } from "@/lib/utils";
import { useEffect } from "react"; import { useEffect } from "react";
import { useTheme } from "@/providers/themeProvider"; 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"> <div className="container mx-auto p-4 space-y-4 min-h-screen">
<Heading title="Settings" description="Manage your preferences and app settings" /> <Heading title="Settings" description="Manage your preferences and app settings" />
<Tabs value={activeTab} onValueChange={setActiveTab}> <Tabs value={activeTab} onValueChange={setActiveTab}>
<div className="w-full flex items-center justify-between">
<TabsList> <TabsList>
<TabsTrigger value="general">General</TabsTrigger> <TabsTrigger value="app">Application</TabsTrigger>
<TabsTrigger value="extension">Extension</TabsTrigger> <TabsTrigger value="extension">Extension</TabsTrigger>
</TabsList> </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"> <Card className="p-4 space-y-4 my-4">
<div className="w-full flex gap-4 items-center justify-between"> <div className="w-full flex gap-4 items-center justify-between">
<div className="flex gap-4 items-center"> <div className="flex gap-4 items-center">
@@ -220,10 +249,62 @@ export default function SettingsPage() {
</div> </div>
</div> </div>
</Card> </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"> <div className="app-theme">
<h3 className="font-semibold">Theme</h3> <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')}> <div className={cn('inline-flex gap-1 rounded-lg p-1 bg-muted')}>
{themeOptions.map(({ value, icon: Icon, label }) => ( {themeOptions.map(({ value, icon: Icon, label }) => (
<button <button
@@ -242,9 +323,11 @@ export default function SettingsPage() {
))} ))}
</div> </div>
</div> </div>
</TabsContent>
<TabsContent key="folders" value="folders" className="flex flex-col gap-4 min-h-[150px]">
<div className="download-dir"> <div className="download-dir">
<h3 className="font-semibold">Download Directory</h3> <h3 className="font-semibold">Download Folder</h3>
<p className="text-sm text-muted-foreground mb-3">Set default download directory</p> <p className="text-xs text-muted-foreground mb-3">Set default download folder (directory)</p>
<div className="flex items-center gap-4"> <div className="flex items-center gap-4">
<Input className="focus-visible:ring-0" type="text" placeholder="Select download directory" value={downloadDirPath ?? 'Unknown'} readOnly/> <Input className="focus-visible:ring-0" type="text" placeholder="Select download directory" value={downloadDirPath ?? 'Unknown'} readOnly/>
<Button <Button
@@ -273,31 +356,11 @@ export default function SettingsPage() {
</Button> </Button>
</div> </div>
</div> </div>
<div className="max-parallel-downloads"> </TabsContent>
<h3 className="font-semibold">Max Parallel Downloads</h3> <TabsContent key="network" value="network" className="flex flex-col gap-4 min-h-[150px]">
<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>
<div className="proxy"> <div className="proxy">
<h3 className="font-semibold">Proxy</h3> <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"> <div className="flex items-center space-x-2 mb-4">
<Switch <Switch
id="use-proxy" id="use-proxy"
@@ -337,7 +400,9 @@ export default function SettingsPage() {
</Form> </Form>
</div> </div>
</div> </div>
</TabsContent>
</div> </div>
</Tabs>
</TabsContent> </TabsContent>
<TabsContent value="extension"> <TabsContent value="extension">
<Card className="p-4 space-y-4 my-4"> <Card className="p-4 space-y-4 my-4">
@@ -389,10 +454,23 @@ export default function SettingsPage() {
</div> </div>
</div> </div>
</Card> </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"> <div className="websocket-port">
<h3 className="font-semibold">Websocket Port</h3> <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"> <div className="flex items-center gap-4">
<Form {...websocketPortForm}> <Form {...websocketPortForm}>
<form onSubmit={websocketPortForm.handleSubmit(handleWebsocketPortSubmit)} className="flex gap-4 w-full" autoComplete="off"> <form onSubmit={websocketPortForm.handleSubmit(handleWebsocketPortSubmit)} className="flex gap-4 w-full" autoComplete="off">
@@ -431,39 +509,11 @@ export default function SettingsPage() {
</Form> </Form>
</div> </div>
</div> </div>
</TabsContent>
</div> </div>
</Tabs>
</TabsContent> </TabsContent>
</Tabs> </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> </div>
) )
} }