ci: revert back to old tauri release asset naming scheme

.gitea/workflows/publish-to-aur.yml

@@ -1,6 +1,4 @@
-on:
+on: workflow_dispatch
-  release:
-    types: [published]
 
 name: 🚀 Publish to AUR
 jobs:

CHANGELOG.md

@@ -1,15 +1,24 @@
 ### ✨ Changelog
 
-- HOTFIX: yt-dlp exiting with code 2 while resolving deno on macOS
+- Added support for selective-batch/full-playlist download
-- Also, a small correction: Linux (deb, rpm) packages are not yet self-updateable
+- Added support for selecting multiple audio streams on combine mode
+- Added support for embedding original auto-generated subtitles
+- Added option to crop thubnails to square (1:1) before embedding
+- Added 'errored' download state (to better identify errored downloads, which you can retry later)
+- Added app interface color scheme options on appearance settings
+- Added app info page under settings
+- Added copy/clear log buttons in log viewer
+- Added sponsorblock 'hook' category
+- Fixed sidebar state not persisting on app re-start
+- Fixed linux native (deb/rpm) installation downloading appimage update
+- Bumped up shadcn/ui to v3.5 and lots of under the hood ui improvements
+- Optimized database and backend performance
+- Lots of other fixes and improvements
 
 ### 📝 Notes
 
-> [!TIP]
-> This is a hotfix release for macOS only, You can skip this update if you are on other platforms
-
 > [!CAUTION]
-> This is a breaking update if you are coming from older version than `v0.3.0`. Users are adviced to complete/cancel all paused downloads before updating to this version, otherwise paused downloads may not resume properly or re-start from the begining.
+> This update introduces few breaking changes! Users are adviced to complete/cancel all paused downloads before updating to this version, otherwise paused downloads may not resume properly or re-start from the begining.
 
 > [!WARNING]
 > Linux users make sure `yt-dlp` and `deno` is not installed in your distro (otherwise you will get package installation conflict). Don't worry, You can still use yt-dlp cli as before (the only difference is that now it will be installed and auto-updated by neo-dlp, which You can also disable from neo-dlp Settings if you don't want to auto-update yt-dlp)
@@ -22,7 +31,7 @@
 
 | yt-dlp (updateable) | ffmpeg | ffprobe | aria2c | deno |
 | :---- | :---- | :---- | :---- | :---- |
-| v2025.11.05.232946 (nightly) | v7.1.1 | v7.1.1 | v1.37.0 | v2.5.6 |
+| v2026.01.19.233146 (nightly) | v7.1.1 | v7.1.1 | v1.37.0 | v2.6.5 |
 
 > ‼️ Linux builds (deb, rpm) does not ships with `ffmpeg` and `ffprobe` (though it will be auto installed as a dependency by your package manager, if you are on fedora make sure to [enable rpmfusion free+nonfree repos](https://docs.fedoraproject.org/en-US/quick-docs/rpmfusion-setup/#_enabling_the_rpm_fusion_repositories_using_command_line_utilities) before installing the rpm package)
 
@@ -32,8 +41,8 @@
 
 | Architecture | Windows (msi) ⬆️ | Windows (exe) ⬆️ | Linux (deb) | Linux (rpm) | Linux (AppImage) ⬆️ | MacOS (dmg) ⬆️ | MacOS (app) ⬆️ |
 | :---- | :---- | :---- | :---- | :---- | :---- | :---- | :---- |
-| x86_64 | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_x64_en-US_windows.msi) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_x64-setup_windows.exe) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_amd64_linux.deb) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP-<version>-1.x86_64_linux.rpm) | 🚫 [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_amd64_linux.AppImage) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_x64_darwin.dmg) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_darwin_x64.app.tar.gz) |
+| x86_64 | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_x64_en-US.msi) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_x64-setup.exe) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_amd64.deb) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP-<version>-1.x86_64.rpm) | 🚫 [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_amd64.AppImage) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_x64.dmg) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_x64.app.tar.gz) |
-| ARM64 | N/A | 🪟 [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_x64-setup_windows.exe) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_arm64_linux.deb) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP-<version>-1.aarch64_linux.rpm) | N/A | ⚠️ [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_aarch64_darwin.dmg) | ⚠️ [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_darwin_aarch64.app.tar.gz) |
+| ARM64 | N/A | 🪟 [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_x64-setup.exe) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_arm64.deb) | [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP-<version>-1.aarch64.rpm) | N/A | ⚠️ [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_<version>_aarch64.dmg) | ⚠️ [Download](https://github.com/neosubhamoy/neodlp/releases/download/<release_tag>/NeoDLP_aarch64.app.tar.gz) |
 
 > ⬆️ icon indicates this packaging format supports in-built app-updater
 
@@ -41,4 +50,7 @@
 
 > 🚫 Linux AppImage builds are experimental and does not support neodlp's browser intergration features due to it's sandboxed nature. Also, don't run the AppImage with portable (.home, .config) folders, it will break things (it is highly recommended to use native [deb, rpm, AUR] builds if possible for the full experiance, otherwise AppImages are good for trying out NeoDLP without installing)
 
-> ⚠️ MacOS ARM64 binary downloads are experimental and may not open on Apple Silicon Macs if downloaded from browser (You will get 'Damaged File' error) it's because the binaries are not signed (signing MacOS binaries requires 99$/year Apple Developer Account subscription, which I can't afford RN!) and Apple Silicon Macs don't allow unsigned apps (downloaded from browser) to be installed on the system. If you want to use NeoDLP on your Apple Silicon Macs, you can simply use the command line [Curl-Bash Installer](https://neodlp.neosubhamoy.com/download) (Recommended) -OR- [compile it from source](https://github.com/neosubhamoy/neodlp?tab=readme-ov-file#%EF%B8%8F-contributing--building-from-source) in your Mac
+> ⚠️ MacOS ARM64 binary downloads are experimental and may not open on Apple Silicon Macs if downloaded from browser (You will get 'Damaged File' error) it's because the binaries are not signed (signing MacOS binaries requires 99$/year Apple Developer Account subscription, which I can't afford RN!) and Apple Silicon Macs don't allow unsigned apps (downloaded from browser) to be installed on the system. If you want to use NeoDLP on your Apple Silicon Macs, There are few ways you can bypass these restrictions:
+> 1. Using our automated [Curl-Bash Installer](https://neodlp.neosubhamoy.com/download) (Recommended)
+> 2. You can also manually remove the .dmg file/.app folder from macOS quarantine using these commands: `xattr -d com.apple.quarantine NeoDLP_x.x.x_aarch64.dmg` (for .dmg file) -OR- `xattr -r -d com.apple.quarantine /Applications/NeoDLP.app` (for .app folder)
+> 3. Or you can [compile NeoDLP from source](https://github.com/neosubhamoy/neodlp?tab=readme-ov-file#%EF%B8%8F-building-from-source) in your Mac (Then you don't have to download the pre-compiled binaries at all, though it is a much longer process and is intended for advanced users only)

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2025 Subhamoy Biswas
+Copyright (c) 2025 - Present Subhamoy Biswas
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,18 +1,20 @@
 ![NeoDLP](./.github/images/banner.svg)
 
-# NeoDLP - (Neo Downloader Plus)
+# NeoDLP - Neo Downloader Plus
 
 Cross-platform Video/Audio Downloader Desktop App with Modern UI and Browser Integration
 
-[![status](https://img.shields.io/badge/status-active-brightgreen.svg?style=flat)](https://github.com/neosubhamoy/neodlp)
+[![github release](https://img.shields.io/github/v/release/neosubhamoy/neodlp?color=lime-green&style=for-the-badge)](https://github.com/neosubhamoy/neodlp/releases/latest)
-[![github tag](https://img.shields.io/github/v/tag/neosubhamoy/neodlp?color=yellow)](https://github.com/neosubhamoy/neodlp)
+[![github downloads](https://img.shields.io/github/downloads/neosubhamoy/neodlp/total?style=for-the-badge)](https://github.com/neosubhamoy/neodlp/releases)
-[![github downloads](https://img.shields.io/github/downloads/neosubhamoy/neodlp/total)](https://github.com/neosubhamoy/neodlp/releases)
+[![github stars](https://img.shields.io/github/stars/neosubhamoy/neodlp?color=yellow&style=for-the-badge)](https://github.com/neosubhamoy/neodlp/stargazers)
-[![PRs](https://img.shields.io/badge/PRs-welcome-blue.svg?style=flat)](https://github.com/neosubhamoy/neodlp)
+[![github license](https://img.shields.io/github/license/neosubhamoy/neodlp?color=blue&style=for-the-badge)](https://github.com/neosubhamoy/neodlp/blob/main/LICENSE)
 
 > [!TIP]
 > **🥰 Liked this project? Please consider giving it a Star (🌟) on github to show us your appreciation and help the algorythm recommend this project to even more awesome people like you!**
 
-[![Packaging status](https://repology.org/badge/vertical-allrepos/neodlp.svg)](https://repology.org/project/neodlp/versions)
+[![winget version](https://img.shields.io/winget/v/neosubhamoy.neodlp?color=lime-green&style=flat-square)](https://github.com/microsoft/winget-pkgs/tree/master/manifests/n/neosubhamoy/neodlp)
+[![aur version](https://img.shields.io/aur/version/neodlp?color=lime-green&style=flat-square)](https://aur.archlinux.org/packages/neodlp)
+
 
 ## ✨ Highlighted Features
 
@@ -20,7 +22,7 @@ Cross-platform Video/Audio Downloader Desktop App with Modern UI and Browser Int
 - Download Video/Audio in your preffered format (MP4, WEBM, MKV, MP3 etc.)
 - Supports both Video and Playlist download
 - Supports Combining Video, Audio streams of your choice
-- Supports Multi-Language Subtitle/Caption (CC) embeding
+- Supports Multi-Lingual Subtitle/Caption (CC) embeding
 - Different Video/Audio metadata embeding options (info, chapters, thumbnail etc.)
 - SponsorBlock support (mark/remove video segments)
 - Network controls (proxy, rate limit etc.)
@@ -28,13 +30,13 @@ Cross-platform Video/Audio Downloader Desktop App with Modern UI and Browser Int
 
 ## 🧩 Browser Integration
 
-You can integrate NeoDLP with your favourite browser (any Chrome/Chromium/Firefox based browser) Just, install [NeoDLP Extension](https://github.com/neosubhamoy/neodlp-extension) to get started!
+You can integrate NeoDLP with your favourite browser (any Chromium/Firefox based browser) Just, install [NeoDLP Extension](https://github.com/neosubhamoy/neodlp-extension) to get started!
 
 After installing the extension you can do the following directly from the browser:
 
 - Quick Search (search current browser address with NeoDLP) (via pressing keyboard shortcut `ALT`+`SHIFT`+`Q`, You can also change this shortcut key combo from browser settings)
 
-- Right Click Context Menu Action (Download with Neo Downloader Plus - Link, Selection, Media Source)
+- Right Click Context Menu Action (Search with Neo Downloader Plus - Link, Selection, Media Source)
 
 ## 👀 Sneak Peek
 
@@ -52,10 +54,10 @@ After installing the extension you can do the following directly from the browse
 
 ## 🤝 External Dependencies
 
-- [YT-DLP](https://github.com/yt-dlp/yt-dlp) - The core CLI tool used to download video/audio from the web (Hero of the show 😎)
+- [YT-DLP](https://github.com/yt-dlp/yt-dlp) [Unlicense] - The core CLI tool used to download video/audio from the web (Hero of the show 😎)
-- [FFmpeg & FFprobe](https://www.ffmpeg.org) - Used for video/audio post-processing
+- [FFmpeg & FFprobe](https://www.ffmpeg.org) [LGPLv2.1+] - Used for video/audio post-processing
-- [Aria2](https://aria2.github.io) - Used as an external downloader for blazing fast downloads with yt-dlp (Not included with NeoDLP MacOS builds)
+- [Aria2](https://aria2.github.io) [GPLv2+] - Used as an external downloader for blazing fast downloads with yt-dlp (Not included with NeoDLP MacOS builds)
-- [Deno](https://deno.com) - Provides sandboxed javascript runtime environment for yt-dlp (Required for YT downloads, as per the new yt-dlp [announcement](https://github.com/yt-dlp/yt-dlp/issues/14404))
+- [Deno](https://deno.com) [MIT] - Provides sandboxed javascript runtime environment for yt-dlp (Required for YT downloads, as per the new yt-dlp [announcement](https://github.com/yt-dlp/yt-dlp/issues/14404))
 
 ## ℹ️ System Pre-Requirements
 
@@ -65,7 +67,7 @@ After installing the extension you can do the following directly from the browse
 
 ## ⬇️ Download and Installation
 
-1. Download the latest [NeoDLP](https://github.com/neosubhamoy/neodlp/releases/latest) release based on your OS and CPU Architecture, then install it! -OR- Install it directly from an available distribution channel (listed below)
+1. Download the latest NeoDLP release based on your OS and CPU Architecture, then install it! -OR- Install it directly from an available distribution channel (listed below)
 
 | Architecture | Windows | Linux | MacOS |
 | :----        | :----   | :---- | :---- |
@@ -77,7 +79,7 @@ After installing the extension you can do the following directly from the browse
 
 | Platform (OS) | Distribution Channel | Installation Command / Instruction |
 | :---- | :---- | :---- |
-| Windows x86_64 / ARM64 | WinGet | `winget install neodlp` |
+| Windows x86_64 / ARM64 | WinGet | `winget install neosubhamoy.neodlp` |
 | MacOS x86_64 / ARM64 | Curl-Bash Installer | `curl -sSL https://neodlp.neosubhamoy.com/macos_installer.sh \| bash` |
 | Linux x86_64 / ARM64 | Curl-Bash Installer | `curl -sSL https://neodlp.neosubhamoy.com/linux_installer.sh \| bash` |
 | Arch Linux x86_64 / ARM64 | AUR | `yay -S neodlp` |
@@ -89,6 +91,9 @@ Though NeoDLP is supported on most platforms but not all packages are tested on
 > [!TIP]
 > If you have access to any of the untested systems listed below, you can test the packages there and send me the test results via creating an github issue! (that would be super helpful actualy 😊)
 
+<details>
+<summary>Test Coverage</summary>
+
 | Platform | Status | Platform | Status |
 | :---- | :---- | :---- | :---- |
 | Windows 10 (x64) | ✅ Tested | Windows 10 (ARM64) | ⚠️ Untested |
@@ -102,6 +107,8 @@ Though NeoDLP is supported on most platforms but not all packages are tested on
 | openSUSE 16 (x64) | ⚠️ Untested | openSUSE 16 (ARM64) | ⚠️ Untested |
 | RHEL 10 (x64) | ⚠️ Untested | RHEL 10 (ARM64) | ⚠️ Untested |
 
+</details>
+
 ## 💝 Support the Development
 
 NeoDLP is and will be always FREE to Use and Open-Sourced for Everyone. On the other hand the developent process of NeoDLP takes lots of time, effort and even sometimes money! So, if you appriciate my work and have the ability to donate, then please consider supporting the development by donating (even a very small donation matters and helps NeoDLP to be a better product!) Your support is the key to my motivation...🤗
@@ -121,67 +128,80 @@ NeoDLP is and will be always FREE to Use and Open-Sourced for Everyone. On the o
 - [x] Integrate with browsers
 - [x] Add aria2c support
 - [x] Add custom command support
-- [ ] Add more advanced settings and achive stability **(ongoing)**
+- [x] Add full-playlist/batch download support
-- [ ] Add media converter
+- [ ] Improve browser integration **(ongoing)**
-- [ ] Add multiple downloader engines
+- [ ] Implement NeoDLP API
-- [ ] Add advanced web extractor
+- [ ] Build web interface
+- [ ] Implement plugin system
 - [ ] Add more cool stuffs 😉
 
 ## ⚡ Technologies Used
 
-![Tauri](https://img.shields.io/badge/tauri-%2324C8DB.svg?style=for-the-badge&logo=tauri&logoColor=%23FFFFFF)
+[![Tauri](https://img.shields.io/badge/tauri-%2324C8DB.svg?style=for-the-badge&logo=tauri&logoColor=%23FFFFFF)](https://tauri.app)
-![Rust](https://img.shields.io/badge/rust-%23000000.svg?style=for-the-badge&logo=rust&logoColor=white)
+[![Rust](https://img.shields.io/badge/rust-%23000000.svg?style=for-the-badge&logo=rust&logoColor=white)](https://rust-lang.org)
-![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)
+[![React](https://img.shields.io/badge/react-%2320232a.svg?style=for-the-badge&logo=react&logoColor=%2361DAFB)](https://react.dev)
-![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
+[![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)](https://www.typescriptlang.org)
-![ShadCnUi](https://img.shields.io/badge/shadcn%2Fui-000000?style=for-the-badge&logo=shadcnui&logoColor=white)
+[![ShadCnUi](https://img.shields.io/badge/shadcn%2Fui-000000?style=for-the-badge&logo=shadcnui&logoColor=white)](https://ui.shadcn.com)
 
-## 🛠️ Contributing / Building from Source
+## 🛠️ Building from Source
 
-Want to be part of this? Feel free to contribute...!! Pull Requests are always welcome...!! (^_^) Follow these simple steps to start building:
+Want to build/compile NeoDLP from the source code? Follow these simple steps to create a production build:
 
 * Make sure to install [Rust](https://www.rust-lang.org/tools/install), [Node.js](https://nodejs.org/en), and [Git](https://git-scm.com/downloads) before proceeding.
 * Install [Tauri Prerequisites](https://v2.tauri.app/start/prerequisites/) for your OS / platform
-1. Fork this repo in your github account.
+1. Clone this repo in your local machine: `git clone https://github.com/neosubhamoy/neodlp.git`
-2. Git clone the forked repo in your local machine.
+2. Go inside the cloned project directory: `cd neodlp`
-3. Create a git branch (related to the feature you are working on) (Optional - Recommended)
+3. Install Node.js dependencies: `npm install`
-4. Install Node.js dependencies: `npm install`
+4. Download required external binaries (for your platform): `npm run download`
-5. Download binaries (for current platform): `npm run download`
+5. Run build process (run the command based on your platform and architecture)
-6. Run development / build process
+```shell
-> [!WARNING]
+# command for windows users
-> Make sure to run the `build` command once before running the `dev` command for the first time to avoid compile time errors
+npm run tauri build                 # for both x64/ARM64 devices
-```code
-# for windows users
-npm run tauri dev        # for development
-npm run tauri build      # for production build
 
-# for linux users (based on cpu architecture)
+# commands for linux users
-npm run tauri dev -- --config "./src-tauri/tauri.linux-aarch64.conf.json"       # for ARM64 devices, development
+npm run tauri:build:linux-x64       # for x64 devices
-npm run tauri build -- --config "./src-tauri/tauri.linux-aarch64.conf.json"     # for ARM64 devices, production build
+npm run tauri:build:linux-arm64     # for ARM64 devices
 
-npm run tauri dev -- --config "./src-tauri/tauri.linux-x86_64.conf.json"        # for x64 devices, development
+# commands for macOS users
-npm run tauri build -- --config "./src-tauri/tauri.linux-x86_64.conf.json"      # for x64 devices, production build
+npm run tauri:build:macos-arm64     # for apple silicon macs
-
+npm run tauri:build:macos-x64       # for intel x86 macs
-# for macOS users (based on cpu architecture)
-npm run tauri dev -- --config "./src-tauri/tauri.macos-aarch64.conf.json"       # for apple silicon macs, development
-npm run tauri build -- --config "./src-tauri/tauri.macos-aarch64.conf.json"     # for apple silicon macs, production build
-
-npm run tauri dev -- --config "./src-tauri/tauri.macos-x86_64.conf.json"        # for intel x86 macs, development
-npm run tauri build -- --config "./src-tauri/tauri.macos-x86_64.conf.json"      # for intel x86 macs, production build
 ```
-6. Do the changes, Send a Pull Request with proper Description (NOTE: Pull Requests Without Proper Description will be Rejected)
+6. Give it the time to compile (~5-10min) (if you get an error, something like this at the end: `Error A public key has been found, but no private key. Make sure to set 'TAURI_SIGNING_PRIVATE_KEY' environment variable.` simply ignore it! Your build is successfull!). You can find the compiled packages under: `src-tauri/target/release/bundle` directory.
 
-## ⭕ Bug Report
+## 🐞 Bug Report and Discussions
 
-Noticed any Bug? or Want to give me some suggetion? Always feel free to open a [GitHub Issue](https://github.com/neosubhamoy/neodlp/issues). I would love to hear from you...!!
+Noticed any Bug? or Want to give us some suggetions? Always feel free to let us know! We would love to hear from you...!! You can reach us out via the following methods:
+
+- GitHub Issues (Recommended):  [Report a Bug](https://github.com/neosubhamoy/neodlp/issues/new?template=bug_report.md) -OR- [Request a Feature](https://github.com/neosubhamoy/neodlp/issues/new?template=feature_request.md)
+- Mailing List: If you prefer the good old mailing list way, You can just simply write us on [support@neodlp.neosubhamoy.com](mailto:support@neodlp.neosubhamoy.com) (Kindly follow the Bug Report/Feature Request Template on that case)
+- Reddit Community: If you have any other general pourpose query/discussion related to NeoDLP, post it on our subreddit community [r/NeoDLP](https://www.reddit.com/r/NeoDLP)
+
+## 📦 Sources
+
+- [Official Website](https://neodlp.neosubhamoy.com)
+- Official Repositories
+  - [GitHub (Primary)](https://github.com/neosubhamoy/neodlp)
+  - [Gitea (Mirror)](https://gitea.neosubhamoy.com/neosubhamoy/neodlp)
+  - [SourceForge (Releases Only)](https://sourceforge.net/projects/neodlp)
+- Official Distribution Channels
+  - [WinGet (for Windows)](https://github.com/microsoft/winget-pkgs/tree/master/manifests/n/neosubhamoy/neodlp)
+  - [AUR (for Arch Linux)](https://aur.archlinux.org/packages/neodlp)
+- Related Projects
+  - [NeoDLP Extension](https://github.com/neosubhamoy/neodlp-extension)
+  - [NeoDLP Website](https://github.com/neosubhamoy/neodlp-website)
 
 ## 💫 Credits
 
+- NeoDLP is made possible by the joint efforts of [yt-dlp](https://github.com/yt-dlp/yt-dlp) and [FFmpeg](https://www.ffmpeg.org). Lots of NeoDLP features are actually powered by these tools under the hood! So huge thanks to all the developers/contributers for making these great tools! 🙏
 - NeoDLP's 'Format Selection' options are inspired from the [Seal](https://github.com/JunkFood02/Seal) app by [@JunkFood02](https://github.com/JunkFood02)
 - Aria2 Linux x86_64 static binaries are built by [@asdo92](https://github.com/asdo92/aria2-static-builds)
 
-## 📝 License
+## ⚖️ License and Usage
 
-NeoDLP is Licensed under the [MIT license](https://github.com/neosubhamoy/neodlp/blob/main/LICENSE). Anyone can view, modify, use (personal and commercial) or distribute it's sources without any attribution and extra permissions.
+NeoDLP is a Fully Open-Source Software Licensed under the [MIT license](https://github.com/neosubhamoy/neodlp/blob/main/LICENSE). Anyone can view, modify, use (personal and commercial) or distribute it's sources without any extra permission (Just include the LICENSE file :)
+
+> [!WARNING]
+> NeoDLP facilitates downloading from various Online Platforms with different Policies and Terms of Use which Users must follow. We strictly do not promote any unauthorized downloading of copyrighted content. NeoDLP is only made for downloading content that the user holds the copyright to or has the authority for. Users must use the downloaded content wisely and solely at their own legal responsibility. The developer is not responsible for any action taken by the user, and takes zero direct or indirect liability for that matter.
 
 ****
 An Open Sourced Project - Developed with ❤️ by **Subhamoy**

package.json

@@ -1,13 +1,22 @@
 {
   "name": "neodlp",
   "private": true,
-  "version": "0.3.4",
+  "version": "0.4.0",
+  "description": "Cross-platform Video/Audio Downloader Desktop App with Modern UI and Browser Integration",
   "type": "module",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
     "tauri": "tauri",
+    "tauri:dev:linux-x64": "npm run tauri dev -- --config ./src-tauri/tauri.linux-x86_64.conf.json",
+    "tauri:build:linux-x64": "npm run tauri build -- --config ./src-tauri/tauri.linux-x86_64.conf.json",
+    "tauri:dev:linux-arm64": "npm run tauri dev -- --config ./src-tauri/tauri.linux-aarch64.conf.json",
+    "tauri:build:linux-arm64": "npm run tauri build -- --config ./src-tauri/tauri.linux-aarch64.conf.json",
+    "tauri:dev:macos-x64": "npm run tauri dev -- --config ./src-tauri/tauri.macos-x86_64.conf.json",
+    "tauri:build:macos-x64": "npm run tauri build -- --config ./src-tauri/tauri.macos-x86_64.conf.json",
+    "tauri:dev:macos-arm64": "npm run tauri dev -- --config ./src-tauri/tauri.macos-aarch64.conf.json",
+    "tauri:build:macos-arm64": "npm run tauri build -- --config ./src-tauri/tauri.macos-aarch64.conf.json",
     "download": "node ./scripts/download-bins.js"
   },
   "dependencies": {
@@ -39,17 +48,21 @@
     "@radix-ui/react-toggle": "^1.1.10",
     "@radix-ui/react-toggle-group": "^1.1.11",
     "@radix-ui/react-tooltip": "^1.2.8",
-    "@tanstack/react-query": "^5.90.7",
+    "@tanstack/devtools-vite": "^0.4.1",
-    "@tanstack/react-query-devtools": "^5.90.2",
+    "@tanstack/react-devtools": "^0.9.2",
-    "@tauri-apps/api": "^2.9.0",
+    "@tanstack/react-pacer": "^0.19.3",
+    "@tanstack/react-pacer-devtools": "^0.5.2",
+    "@tanstack/react-query": "^5.90.19",
+    "@tanstack/react-query-devtools": "^5.91.2",
+    "@tauri-apps/api": "^2.9.1",
     "@tauri-apps/plugin-clipboard-manager": "^2.3.2",
-    "@tauri-apps/plugin-dialog": "^2.4.2",
+    "@tauri-apps/plugin-dialog": "^2.6.0",
-    "@tauri-apps/plugin-fs": "^2.4.4",
+    "@tauri-apps/plugin-fs": "^2.4.5",
     "@tauri-apps/plugin-notification": "^2.3.3",
-    "@tauri-apps/plugin-opener": "^2.5.2",
+    "@tauri-apps/plugin-opener": "^2.5.3",
     "@tauri-apps/plugin-os": "^2.3.2",
     "@tauri-apps/plugin-process": "^2.3.1",
-    "@tauri-apps/plugin-shell": "^2.3.3",
+    "@tauri-apps/plugin-shell": "^2.3.4",
     "@tauri-apps/plugin-sql": "^2.3.1",
     "@tauri-apps/plugin-updater": "^2.9.0",
     "class-variance-authority": "^0.7.1",
@@ -58,34 +71,34 @@
     "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.552.0",
+    "lucide-react": "^0.562.0",
     "next-themes": "^0.4.6",
-    "react": "^19.2.0",
+    "react": "^19.2.3",
-    "react-day-picker": "^9.11.1",
+    "react-day-picker": "^9.13.0",
-    "react-dom": "^19.2.0",
+    "react-dom": "^19.2.3",
-    "react-hook-form": "^7.66.0",
+    "react-hook-form": "^7.71.1",
     "react-resizable-panels": "^3.0.6",
-    "react-router-dom": "^7.9.5",
+    "react-router-dom": "^7.12.0",
-    "recharts": "^3.3.0",
+    "recharts": "^3.6.0",
     "sonner": "^2.0.7",
-    "tailwind-merge": "^3.3.1",
+    "tailwind-merge": "^3.4.0",
-    "ulid": "^3.0.1",
+    "ulid": "^3.0.2",
     "vaul": "^1.1.2",
-    "zod": "^4.1.12",
+    "zod": "^4.3.5",
-    "zustand": "^5.0.8"
+    "zustand": "^5.0.10"
   },
   "devDependencies": {
-    "@tailwindcss/postcss": "^4.1.17",
+    "@tailwindcss/postcss": "^4.1.18",
-    "@tailwindcss/vite": "^4.1.17",
+    "@tailwindcss/vite": "^4.1.18",
-    "@tauri-apps/cli": "^2.9.3",
+    "@tauri-apps/cli": "^2.9.6",
-    "@types/node": "^24.10.0",
+    "@types/node": "^25.0.9",
-    "@types/react": "^19.2.2",
+    "@types/react": "^19.2.9",
-    "@types/react-dom": "^19.2.2",
+    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.0",
+    "@vitejs/plugin-react": "^5.1.2",
     "postcss": "^8.5.6",
-    "tailwindcss": "^4.1.17",
+    "tailwindcss": "^4.1.18",
     "tw-animate-css": "^1.4.0",
     "typescript": "~5.9.3",
-    "vite": "^7.2.1"
+    "vite": "^7.3.1"
   }
 }

src-tauri/Cargo.toml

@@ -1,7 +1,7 @@
 [package]
 name = "neodlp"
-version = "0.3.4"
+version = "0.4.0"
-description = "NeoDLP"
+description = "Cross-platform Video/Audio Downloader Desktop App with Modern UI and Browser Integration"
 authors = ["neosubhamoy <hey@neosubhamoy.com>"]
 edition = "2021"
 license = "MIT"
@@ -22,7 +22,7 @@ tauri-build = { version = "2", features = [] }
 tauri = { version = "2", features = ["tray-icon"] }
 serde = { version = "1", features = ["derive"] }
 serde_json = "1"
-reqwest = { version = "0.12", features = ["json"] }
+reqwest = { version = "0.13", features = ["json"] }
 tokio = { version = "1", features = ["full"] }
 tokio-tungstenite = "*"
 sqlx = { version = "0.8", features = [ "sqlite", "runtime-tokio", "tls-native-tls" ] }

src-tauri/src/migrations.rs

@@ -148,5 +148,94 @@ pub fn get_migrations() -> Vec<Migration> {
             END;
             ",
         kind: MigrationKind::Up,
+    },
+    Migration {
+        version: 3,
+        description: "add_more_columns_and_indices_to_downloads",
+        sql: "
+            -- Create temporary table with all new columns
+            CREATE TABLE downloads_temp (
+                id INTEGER PRIMARY KEY NOT NULL,
+                download_id TEXT UNIQUE NOT NULL,
+                download_status TEXT NOT NULL,
+                video_id TEXT NOT NULL,
+                format_id TEXT NOT NULL,
+                subtitle_id TEXT,
+                queue_index INTEGER,
+                playlist_id TEXT,
+                playlist_indices TEXT,
+                resolution TEXT,
+                ext TEXT,
+                abr REAL,
+                vbr REAL,
+                acodec TEXT,
+                vcodec TEXT,
+                dynamic_range TEXT,
+                process_id INTEGER,
+                status TEXT,
+                item TEXT,
+                progress REAL,
+                total INTEGER,
+                downloaded INTEGER,
+                speed REAL,
+                eta INTEGER,
+                filepath TEXT,
+                filetype TEXT,
+                filesize INTEGER,
+                output_format TEXT,
+                embed_metadata INTEGER NOT NULL DEFAULT 0,
+                embed_thumbnail INTEGER NOT NULL DEFAULT 0,
+                square_crop_thumbnail INTEGER NOT NULL DEFAULT 0,
+                sponsorblock_remove TEXT,
+                sponsorblock_mark TEXT,
+                use_aria2 INTEGER NOT NULL DEFAULT 0,
+                custom_command TEXT,
+                queue_config TEXT,
+                created_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                updated_at TEXT NOT NULL DEFAULT CURRENT_TIMESTAMP,
+                FOREIGN KEY (video_id) REFERENCES video_info (video_id),
+                FOREIGN KEY (playlist_id) REFERENCES playlist_info (playlist_id)
+            );
+
+            -- Copy all data from original table to temporary table with default values for new columns
+            INSERT INTO downloads_temp SELECT
+                id, download_id, download_status, video_id, format_id, subtitle_id,
+                queue_index, playlist_id,
+                CAST(playlist_index AS TEXT),                                 -- Convert INTEGER playlist_index to TEXT playlist_indices
+                resolution, ext, abr, vbr,
+                acodec, vcodec, dynamic_range, process_id, status,
+                CASE WHEN playlist_id IS NOT NULL THEN '1/1' ELSE NULL END,   -- item
+                progress, total, downloaded, speed, eta,
+                filepath, filetype, filesize,
+                output_format, embed_metadata, embed_thumbnail,
+                0,                                                            -- square_crop_thumbnail
+                sponsorblock_remove, sponsorblock_mark, use_aria2,
+                custom_command, queue_config, created_at, updated_at
+            FROM downloads;
+
+            -- Remove existing triggers
+            DROP TRIGGER IF EXISTS update_downloads_updated_at;
+
+            -- Drop the original table
+            DROP TABLE downloads;
+
+            -- Rename temporary table to original name
+            ALTER TABLE downloads_temp RENAME TO downloads;
+
+            -- Create trigger for updating updated_at timestamp
+            CREATE TRIGGER IF NOT EXISTS update_downloads_updated_at
+                AFTER UPDATE ON downloads
+                FOR EACH ROW
+            BEGIN
+                UPDATE downloads SET updated_at = CURRENT_TIMESTAMP WHERE id = NEW.id;
+            END;
+
+            -- Add indexes to improve query performance
+            CREATE INDEX IF NOT EXISTS idx_downloads_video_id ON downloads(video_id);
+            CREATE INDEX IF NOT EXISTS idx_downloads_playlist_id ON downloads(playlist_id);
+            CREATE INDEX IF NOT EXISTS idx_downloads_status_updated ON downloads(download_status, updated_at DESC);
+            CREATE INDEX IF NOT EXISTS idx_downloads_id_desc ON downloads(id DESC);
+        ",
+        kind: MigrationKind::Up,
     }]
 }

src-tauri/tauri.conf.json

@@ -2,7 +2,7 @@
   "$schema": "https://schema.tauri.app/config/2",
   "productName": "NeoDLP",
   "mainBinaryName": "neodlp",
-  "version": "0.3.4",
+  "version": "0.4.0",
   "identifier": "com.neosubhamoy.neodlp",
   "build": {
     "beforeDevCommand": "npm run dev",

src/App.tsx

@@ -1,16 +1,13 @@
 import { ThemeProvider } from "@/providers/themeProvider";
 import { TooltipProvider } from "@/components/ui/tooltip";
 import { AppContext } from "@/providers/appContextProvider";
-import { DownloadState } from "@/types/download";
+import { useEffect, useRef, useState } from "react";
-import { invoke } from "@tauri-apps/api/core";
-import { useCallback, useEffect, useRef, useState } from "react";
 import { arch, exeExtension } from "@tauri-apps/plugin-os";
 import { downloadDir, join, resourceDir, tempDir } from "@tauri-apps/api/path";
 import { useBasePathsStore, useCurrentVideoMetadataStore, useDownloaderPageStatesStore, useDownloadStatesStore, useKvPairsStatesStore, useSettingsPageStatesStore } from "@/services/store";
-import { determineFileType, generateVideoId, isObjEmpty, parseProgressLine } from "@/utils";
+import { isObjEmpty} from "@/utils";
 import { Command } from "@tauri-apps/plugin-shell";
-import { RawVideoInfo } from "@/types/video";
+import { useUpdateDownloadStatus } from "@/services/mutations";
-import { useDeleteDownloadState, useSaveDownloadState, useSavePlaylistInfo, useSaveVideoInfo, useUpdateDownloadFilePath, useUpdateDownloadStatus } from "@/services/mutations";
 import { useQueryClient } from "@tanstack/react-query";
 import { useFetchAllDownloadStates, useFetchAllkVPairs, useFetchAllSettings } from "@/services/queries";
 import { config } from "@/config";
@@ -27,9 +24,7 @@ import useAppUpdater from "@/helpers/use-app-updater";
 import { Toaster as Sonner } from "@/components/ui/sonner";
 import { toast } from "sonner";
 import { useLogger } from "@/helpers/use-logger";
-import { DownloadConfiguration } from "@/types/settings";
+import useDownloader from "@/helpers/use-downloader";
-import { ulid } from "ulid";
-import { sendNotification } from '@tauri-apps/plugin-notification';
 
 export default function App({ children }: { children: React.ReactNode }) {
     const { data: downloadStates, isSuccess: isSuccessFetchingDownloadStates } = useFetchAllDownloadStates();
@@ -41,12 +36,6 @@ export default function App({ children }: { children: React.ReactNode }) {
     const setDownloadStates = useDownloadStatesStore((state) => state.setDownloadStates);
     const setPath = useBasePathsStore((state) => state.setPath);
 
-  const ffmpegPath = useBasePathsStore((state) => state.ffmpegPath);
-  const tempDownloadDirPath = useBasePathsStore((state) => state.tempDownloadDirPath);
-  const downloadDirPath = useBasePathsStore((state) => state.downloadDirPath);
-
-  const setSearchPid = useCurrentVideoMetadataStore((state) => state.setSearchPid);
-
     const setIsUsingDefaultSettings = useSettingsPageStatesStore((state) => state.setIsUsingDefaultSettings);
     const setSettingsKey = useSettingsPageStatesStore((state) => state.setSettingsKey);
     const appVersion = useSettingsPageStatesStore(state => state.appVersion);
@@ -55,56 +44,20 @@ export default function App({ children }: { children: React.ReactNode }) {
     const setIsFetchingYtDlpVersion = useSettingsPageStatesStore((state) => state.setIsFetchingYtDlpVersion);
     const setAppVersion = useSettingsPageStatesStore((state) => state.setAppVersion);
     const setIsFetchingAppVersion = useSettingsPageStatesStore((state) => state.setIsFetchingAppVersion);
-  const YTDLP_AUTO_UPDATE = useSettingsPageStatesStore(state => state.settings.ytdlp_auto_update);
+    const {
-  const YTDLP_UPDATE_CHANNEL = useSettingsPageStatesStore(state => state.settings.ytdlp_update_channel);
+        ytdlp_auto_update: YTDLP_AUTO_UPDATE,
-  const APP_THEME = useSettingsPageStatesStore(state => state.settings.theme);
+        ytdlp_update_channel: YTDLP_UPDATE_CHANNEL,
-  const MAX_PARALLEL_DOWNLOADS = useSettingsPageStatesStore(state => state.settings.max_parallel_downloads);
+        download_dir: DOWNLOAD_DIR,
-  const MAX_RETRIES = useSettingsPageStatesStore(state => state.settings.max_retries);
+        theme: APP_THEME,
-  const DOWNLOAD_DIR = useSettingsPageStatesStore(state => state.settings.download_dir);
+        color_scheme: APP_COLOR_SCHEME,
-  const PREFER_VIDEO_OVER_PLAYLIST = useSettingsPageStatesStore(state => state.settings.prefer_video_over_playlist);
+    } = useSettingsPageStatesStore(state => state.settings);
-  const STRICT_DOWNLOADABILITY_CHECK = useSettingsPageStatesStore(state => state.settings.strict_downloadablity_check);
-  const USE_PROXY = useSettingsPageStatesStore(state => state.settings.use_proxy);
-  const PROXY_URL = useSettingsPageStatesStore(state => state.settings.proxy_url);
-  const USE_RATE_LIMIT = useSettingsPageStatesStore(state => state.settings.use_rate_limit);
-  const RATE_LIMIT = useSettingsPageStatesStore(state => state.settings.rate_limit);
-  const VIDEO_FORMAT = useSettingsPageStatesStore(state => state.settings.video_format);
-  const AUDIO_FORMAT = useSettingsPageStatesStore(state => state.settings.audio_format);
-  const ALWAYS_REENCODE_VIDEO = useSettingsPageStatesStore(state => state.settings.always_reencode_video);
-  const EMBED_VIDEO_METADATA = useSettingsPageStatesStore(state => state.settings.embed_video_metadata);
-  const EMBED_AUDIO_METADATA = useSettingsPageStatesStore(state => state.settings.embed_audio_metadata);
-  const EMBED_VIDEO_THUMBNAIL = useSettingsPageStatesStore(state => state.settings.embed_video_thumbnail);
-  const EMBED_AUDIO_THUMBNAIL = useSettingsPageStatesStore(state => state.settings.embed_audio_thumbnail);
-  const USE_COOKIES = useSettingsPageStatesStore(state => state.settings.use_cookies);
-  const IMPORT_COOKIES_FROM = useSettingsPageStatesStore(state => state.settings.import_cookies_from);
-  const COOKIES_BROWSER = useSettingsPageStatesStore(state => state.settings.cookies_browser);
-  const COOKIES_FILE = useSettingsPageStatesStore(state => state.settings.cookies_file);
-  const USE_SPONSORBLOCK = useSettingsPageStatesStore(state => state.settings.use_sponsorblock);
-  const SPONSORBLOCK_MODE = useSettingsPageStatesStore(state => state.settings.sponsorblock_mode);
-  const SPONSORBLOCK_REMOVE = useSettingsPageStatesStore(state => state.settings.sponsorblock_remove);
-  const SPONSORBLOCK_MARK = useSettingsPageStatesStore(state => state.settings.sponsorblock_mark);
-  const SPONSORBLOCK_REMOVE_CATEGORIES = useSettingsPageStatesStore(state => state.settings.sponsorblock_remove_categories);
-  const SPONSORBLOCK_MARK_CATEGORIES = useSettingsPageStatesStore(state => state.settings.sponsorblock_mark_categories);
-  const USE_ARIA2 = useSettingsPageStatesStore(state => state.settings.use_aria2);
-  const USE_FORCE_INTERNET_PROTOCOL = useSettingsPageStatesStore(state => state.settings.use_force_internet_protocol);
-  const FORCE_INTERNET_PROTOCOL = useSettingsPageStatesStore(state => state.settings.force_internet_protocol);
-  const USE_CUSTOM_COMMANDS = useSettingsPageStatesStore(state => state.settings.use_custom_commands);
-  const CUSTOM_COMMANDS = useSettingsPageStatesStore(state => state.settings.custom_commands);
-  const FILENAME_TEMPLATE = useSettingsPageStatesStore(state => state.settings.filename_template);
-  const DEBUG_MODE = useSettingsPageStatesStore(state => state.settings.debug_mode);
-  const LOG_VERBOSE = useSettingsPageStatesStore(state => state.settings.log_verbose);
-  const LOG_WARNING = useSettingsPageStatesStore(state => state.settings.log_warning);
-  const LOG_PROGRESS = useSettingsPageStatesStore(state => state.settings.log_progress);
-  const ENABLE_NOTIFICATIONS = useSettingsPageStatesStore(state => state.settings.enable_notifications);
-  const DOWNLOAD_COMPLETION_NOTIFICATION = useSettingsPageStatesStore(state => state.settings.download_completion_notification);
 
-  const isErrored = useDownloaderPageStatesStore((state) => state.isErrored);
+    const erroredDownloadIds = useDownloaderPageStatesStore((state) => state.erroredDownloadIds);
-  const isErrorExpected = useDownloaderPageStatesStore((state) => state.isErrorExpected);
+    const expectedErrorDownloadIds = useDownloaderPageStatesStore((state) => state.expectedErrorDownloadIds);
-  const erroredDownloadId = useDownloaderPageStatesStore((state) => state.erroredDownloadId);
+    const removeErroredDownload = useDownloaderPageStatesStore((state) => state.removeErroredDownload);
-  const setIsErrored = useDownloaderPageStatesStore((state) => state.setIsErrored);
+    const removeExpectedErrorDownload = useDownloaderPageStatesStore((state) => state.removeExpectedErrorDownload);
-  const setIsErrorExpected = useDownloaderPageStatesStore((state) => state.setIsErrorExpected);
-  const setErroredDownloadId = useDownloaderPageStatesStore((state) => state.setErroredDownloadId);
 
-  const appWindow = getCurrentWebviewWindow()
+    const appWindow = getCurrentWebviewWindow();
     const navigate = useNavigate();
     const LOG = useLogger();
     const currentPlatform = platform();
@@ -116,775 +69,17 @@ export default function App({ children }: { children: React.ReactNode }) {
     const macOsRegisteredVersion = useKvPairsStatesStore(state => state.kvPairs.macos_registered_version);
 
     const queryClient = useQueryClient();
-  const downloadStateSaver = useSaveDownloadState();
     const downloadStatusUpdater = useUpdateDownloadStatus();
-  const downloadFilePathUpdater = useUpdateDownloadFilePath();
-  const videoInfoSaver = useSaveVideoInfo();
-  const downloadStateDeleter = useDeleteDownloadState();
-  const playlistInfoSaver = useSavePlaylistInfo();
 
     const ongoingDownloads = globalDownloadStates.filter(state => state.download_status === 'downloading' || state.download_status === 'starting');
     const queuedDownloads = globalDownloadStates.filter(state => state.download_status === 'queued').sort((a, b) => a.queue_index! - b.queue_index!);
 
-  const isProcessingQueueRef = useRef(false);
-  const lastProcessedDownloadIdRef = useRef<string | null>(null);
     const hasRunYtDlpAutoUpdateRef = useRef(false);
     const hasRunAppUpdateCheckRef = useRef(false);
     const isRegisteredToMacOsRef = useRef(false);
+    const pendingErrorUpdatesRef = useRef<Set<string>>(new Set());
 
-  const fetchVideoMetadata = async (url: string, formatId?: string, playlistIndex?: string, selectedSubtitles?: string | null, resumeState?: DownloadState, downloadConfig?: DownloadConfiguration): Promise<RawVideoInfo | null> => {
+    const { fetchVideoMetadata, startDownload, pauseDownload, resumeDownload, cancelDownload, processQueuedDownloads } = useDownloader();
-    try {
-      const args = [url, '--dump-single-json', '--no-warnings'];
-      if (formatId) args.push('--format', formatId);
-      if (selectedSubtitles) args.push('--embed-subs', '--sub-lang', selectedSubtitles);
-      if (playlistIndex) args.push('--playlist-items', playlistIndex);
-      if (PREFER_VIDEO_OVER_PLAYLIST && !playlistIndex) args.push('--no-playlist');
-      if (STRICT_DOWNLOADABILITY_CHECK && !formatId) args.push('--check-all-formats');
-      if (STRICT_DOWNLOADABILITY_CHECK && formatId) args.push('--check-formats');
-
-      if ((USE_CUSTOM_COMMANDS && CUSTOM_COMMANDS && downloadConfig?.custom_command) || resumeState?.custom_command) {
-        let customCommandArgs = null;
-        if (resumeState?.custom_command) {
-          customCommandArgs = resumeState.custom_command;
-        } else if (CUSTOM_COMMANDS.find(cmd => cmd.id === downloadConfig?.custom_command)) {
-          let customCommand = CUSTOM_COMMANDS.find(cmd => cmd.id === downloadConfig?.custom_command);
-          customCommandArgs = customCommand ? customCommand.args : '';
-        }
-        if (customCommandArgs && customCommandArgs.trim() !== '') args.push(...customCommandArgs.split(' '));
-      }
-
-      if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_PROXY && PROXY_URL) args.push('--proxy', PROXY_URL);
-      if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_FORCE_INTERNET_PROTOCOL && FORCE_INTERNET_PROTOCOL) {
-        if (FORCE_INTERNET_PROTOCOL === 'ipv4') {
-          args.push('--force-ipv4');
-        } else if (FORCE_INTERNET_PROTOCOL === 'ipv6') {
-          args.push('--force-ipv6');
-        }
-      }
-      if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_COOKIES) {
-        if (IMPORT_COOKIES_FROM === 'browser' && COOKIES_BROWSER) {
-          args.push('--cookies-from-browser', COOKIES_BROWSER);
-        } else if (IMPORT_COOKIES_FROM === 'file' && COOKIES_FILE) {
-          args.push('--cookies', COOKIES_FILE);
-        }
-      }
-      if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && (USE_SPONSORBLOCK || (resumeState?.sponsorblock_remove || resumeState?.sponsorblock_mark))) {
-        if (SPONSORBLOCK_MODE === 'remove' || resumeState?.sponsorblock_remove) {
-          let sponsorblockRemove = resumeState?.sponsorblock_remove || (SPONSORBLOCK_REMOVE === 'custom' ? (
-          SPONSORBLOCK_REMOVE_CATEGORIES.length > 0 ? SPONSORBLOCK_REMOVE_CATEGORIES.join(',') : 'default'
-          ) : (SPONSORBLOCK_REMOVE));
-          args.push('--sponsorblock-remove', sponsorblockRemove);
-        } else if (SPONSORBLOCK_MODE === 'mark' || resumeState?.sponsorblock_mark) {
-          let sponsorblockMark = resumeState?.sponsorblock_mark || (SPONSORBLOCK_MARK === 'custom' ? (
-          SPONSORBLOCK_MARK_CATEGORIES.length > 0 ? SPONSORBLOCK_MARK_CATEGORIES.join(',') : 'default'
-          ) : (SPONSORBLOCK_MARK));
-          args.push('--sponsorblock-mark', sponsorblockMark);
-        }
-      };
-      const command = Command.sidecar('binaries/yt-dlp', args);
-
-      let jsonOutput = '';
-
-      return new Promise<RawVideoInfo | null>((resolve) => {
-        command.stdout.on('data', line => {
-          jsonOutput += line;
-        });
-
-        command.on('close', async (data) => {
-          if (data.code !== 0) {
-            console.error(`yt-dlp failed to fetch metadata with code ${data.code}`);
-            LOG.error('NEODLP', `yt-dlp exited with code ${data.code} while fetching metadata for URL: ${url} (ignore if you manually cancelled)`);
-            resolve(null);
-          } else {
-            try {
-              const matchedJson = jsonOutput.match(/{.*}/);
-              if (!matchedJson) {
-                console.error(`Failed to match JSON: ${jsonOutput}`);
-                LOG.error('NEODLP', `Failed to parse metadata JSON for URL: ${url})`);
-                resolve(null);
-                return;
-              }
-              const parsedJson: RawVideoInfo = JSON.parse(matchedJson[0]);
-              resolve(parsedJson);
-            }
-            catch (e) {
-              console.error(`Failed to parse JSON: ${e}`);
-              LOG.error('NEODLP', `Failed to parse metadata JSON for URL: ${url}) with error: ${e}`);
-              resolve(null);
-            }
-          }
-        });
-
-        command.on('error', error => {
-          console.error(`Error fetching metadata: ${error}`);
-          LOG.error('NEODLP', `Error occurred while fetching metadata for URL: ${url} : ${error}`);
-          resolve(null);
-        });
-
-        LOG.info('NEODLP', `Fetching metadata for URL: ${url}, with args: ${args.join(' ')}`);
-        command.spawn().then(child => {
-          setSearchPid(child.pid);
-        }).catch(e => {
-          console.error(`Failed to spawn command: ${e}`);
-          LOG.error('NEODLP', `Failed to spawn yt-dlp process for fetching metadata for URL: ${url} : ${e}`);
-          resolve(null);
-        });
-      });
-    } catch (e) {
-      console.error(`Failed to fetch metadata: ${e}`);
-      LOG.error('NEODLP', `Failed to fetch metadata for URL: ${url} : ${e}`);
-      return null;
-    }
-  };
-
-  const startDownload = async (url: string, selectedFormat: string, downloadConfig: DownloadConfiguration, selectedSubtitles?: string | null, resumeState?: DownloadState, playlistItems?: string) => {
-    LOG.info('NEODLP', `Initiating yt-dlp download for URL: ${url}`);
-    // set error states to default
-    setIsErrored(false);
-    setIsErrorExpected(false);
-    setErroredDownloadId(null);
-
-    console.log('Starting download:', { url, selectedFormat, downloadConfig, selectedSubtitles, resumeState, playlistItems });
-    if (!ffmpegPath || !tempDownloadDirPath || !downloadDirPath) {
-      console.error('FFmpeg or download paths not found');
-      return;
-    }
-
-    const isPlaylist = (playlistItems && typeof playlistItems === 'string') || (resumeState?.playlist_id && resumeState?.playlist_index) ? true : false;
-    const playlistIndex = isPlaylist ? (resumeState?.playlist_index?.toString() || playlistItems) : null;
-    let videoMetadata = await fetchVideoMetadata(url, selectedFormat, isPlaylist && playlistIndex && typeof playlistIndex === 'string' ? playlistIndex : undefined, selectedSubtitles, resumeState);
-    if (!videoMetadata) {
-      console.error('Failed to fetch video metadata');
-      toast.error("Download Failed", {
-        description: "yt-dlp failed to fetch video metadata. Please try again later.",
-      });
-      return;
-    }
-
-    console.log('Video Metadata:', videoMetadata);
-    videoMetadata = isPlaylist ? videoMetadata.entries[0] : videoMetadata;
-
-    const fileType = determineFileType(videoMetadata.vcodec, videoMetadata.acodec);
-
-    if (fileType !== 'unknown' && (VIDEO_FORMAT !== 'auto' || AUDIO_FORMAT !== 'auto')) {
-      if (VIDEO_FORMAT !== 'auto' && (fileType === 'video+audio' || fileType === 'video')) videoMetadata.ext = VIDEO_FORMAT;
-      if (AUDIO_FORMAT !== 'auto' && fileType === 'audio') videoMetadata.ext = AUDIO_FORMAT;
-    }
-
-    let configOutputFormat = null;
-    if (downloadConfig.output_format && downloadConfig.output_format !== 'auto') {
-      videoMetadata.ext = downloadConfig.output_format;
-      configOutputFormat = downloadConfig.output_format;
-    }
-    if (resumeState && resumeState.output_format) videoMetadata.ext = resumeState.output_format;
-
-    const videoId = resumeState?.video_id || generateVideoId(videoMetadata.id, videoMetadata.webpage_url_domain);
-    const playlistId = isPlaylist ? (resumeState?.playlist_id || generateVideoId(videoMetadata.playlist_id, videoMetadata.webpage_url_domain)) : null;
-    const downloadId = resumeState?.download_id || ulid() /*generateDownloadId(videoMetadata.id, videoMetadata.webpage_url_domain)*/;
-    // const tempDownloadPathForYtdlp = await join(tempDownloadDirPath, `${downloadId}_${selectedFormat}.%(ext)s`);
-    // const tempDownloadPath = await join(tempDownloadDirPath, `${downloadId}_${selectedFormat}.${videoMetadata.ext}`);
-    // let downloadFilePath = resumeState?.filepath || await join(downloadDirPath, sanitizeFilename(`${videoMetadata.title}_${videoMetadata.resolution || 'unknown'}[${videoMetadata.id}].${videoMetadata.ext}`));
-    let downloadFilePath: string | null = null;
-    let processPid: number | null = null;
-    const args = [
-      url,
-      '--newline',
-      '--progress-template',
-      'status:%(progress.status)s,progress:%(progress._percent_str)s,speed:%(progress.speed)f,downloaded:%(progress.downloaded_bytes)d,total:%(progress.total_bytes)d,eta:%(progress.eta)d',
-      '--paths',
-      `temp:${tempDownloadDirPath}`,
-      '--paths',
-      `home:${downloadDirPath}`,
-      '--output',
-      `${FILENAME_TEMPLATE}[${downloadId}].%(ext)s`,
-      '--windows-filenames',
-      '--restrict-filenames',
-      '--exec',
-      'after_move:echo Finalpath: {}',
-      '--format',
-      selectedFormat,
-      '--no-mtime',
-      '--retries',
-      MAX_RETRIES.toString(),
-    ];
-
-    if (currentPlatform === 'macos') {
-      args.push('--ffmpeg-location', '/Applications/NeoDLP.app/Contents/MacOS', '--js-runtimes', 'deno:/Applications/NeoDLP.app/Contents/MacOS/deno');
-    }
-
-    if (!DEBUG_MODE || (DEBUG_MODE && !LOG_WARNING)) {
-      args.push('--no-warnings');
-    }
-
-    if (DEBUG_MODE && LOG_VERBOSE) {
-      args.push('--verbose');
-    }
-
-    if (selectedSubtitles) {
-      args.push('--embed-subs', '--sub-lang', selectedSubtitles);
-    }
-
-    if (isPlaylist && playlistIndex && typeof playlistIndex === 'string') {
-      args.push('--playlist-items', playlistIndex);
-    }
-
-    let customCommandArgs = null;
-    if ((USE_CUSTOM_COMMANDS && CUSTOM_COMMANDS && downloadConfig.custom_command) || resumeState?.custom_command) {
-        if (resumeState?.custom_command) {
-            customCommandArgs = resumeState.custom_command;
-        } else if (CUSTOM_COMMANDS.find(cmd => cmd.id === downloadConfig.custom_command)) {
-            let customCommand = CUSTOM_COMMANDS.find(cmd => cmd.id === downloadConfig.custom_command);
-            customCommandArgs = customCommand ? customCommand.args : '';
-        }
-
-        if (customCommandArgs && customCommandArgs.trim() !== '') args.push(...customCommandArgs.split(' '));
-    }
-
-    let outputFormat = null;
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && ((fileType !== 'unknown' && (VIDEO_FORMAT !== 'auto' || AUDIO_FORMAT !== 'auto')) || configOutputFormat || resumeState?.output_format)) {
-        const format = resumeState?.output_format || configOutputFormat;
-
-        if (format) {
-            outputFormat = format;
-        } else if (fileType === 'audio' && AUDIO_FORMAT !== 'auto') {
-            outputFormat = AUDIO_FORMAT;
-        } else if ((fileType === 'video' || fileType === 'video+audio') && VIDEO_FORMAT !== 'auto') {
-            outputFormat = VIDEO_FORMAT;
-        }
-
-        const recodeOrRemux = ALWAYS_REENCODE_VIDEO ? '--recode-video' : '--remux-video';
-        const formatToUse = format || VIDEO_FORMAT;
-
-        // Handle video+audio
-        if (fileType === 'video+audio' && (VIDEO_FORMAT !== 'auto' || format)) {
-            args.push(ALWAYS_REENCODE_VIDEO ? '--recode-video' : '--merge-output-format', formatToUse);
-        }
-        // Handle video only
-        else if (fileType === 'video' && (VIDEO_FORMAT !== 'auto' || format)) {
-            args.push(recodeOrRemux, formatToUse);
-        }
-        // Handle audio only
-        else if (fileType === 'audio' && (AUDIO_FORMAT !== 'auto' || format)) {
-            args.push('--extract-audio', '--audio-format', format || AUDIO_FORMAT);
-        }
-        // Handle unknown filetype
-        else if (fileType === 'unknown' && format) {
-            if (['mkv', 'mp4', 'webm'].includes(format)) {
-                args.push(recodeOrRemux, formatToUse);
-            } else if (['mp3', 'm4a', 'opus'].includes(format)) {
-                args.push('--extract-audio', '--audio-format', format);
-            }
-        }
-    }
-
-    let embedMetadata = 0;
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && (downloadConfig.embed_metadata || resumeState?.embed_metadata || EMBED_VIDEO_METADATA || EMBED_AUDIO_METADATA)) {
-        const shouldEmbedMetaForVideo = (fileType === 'video+audio' || fileType === 'video') && (downloadConfig.embed_metadata || resumeState?.embed_metadata || (EMBED_VIDEO_METADATA && downloadConfig.embed_metadata === null));
-        const shouldEmbedMetaForAudio = fileType === 'audio' && (downloadConfig.embed_metadata || resumeState?.embed_metadata || (EMBED_AUDIO_METADATA && downloadConfig.embed_metadata === null));
-        const shouldEmbedMetaForUnknown = fileType === 'unknown' && (downloadConfig.embed_metadata || resumeState?.embed_metadata);
-
-        if (shouldEmbedMetaForUnknown || shouldEmbedMetaForVideo || shouldEmbedMetaForAudio) {
-            embedMetadata = 1;
-            args.push('--embed-metadata');
-        }
-    }
-
-    let embedThumbnail = 0;
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && (downloadConfig.embed_thumbnail || resumeState?.embed_thumbnail || EMBED_VIDEO_THUMBNAIL || EMBED_AUDIO_THUMBNAIL)) {
-        const shouldEmbedThumbForVideo = (fileType === 'video+audio' || fileType === 'video') && (downloadConfig.embed_thumbnail || resumeState?.embed_thumbnail || (EMBED_VIDEO_THUMBNAIL && downloadConfig.embed_thumbnail === null));
-        const shouldEmbedThumbForAudio = fileType === 'audio' && (downloadConfig.embed_thumbnail || resumeState?.embed_thumbnail || (EMBED_AUDIO_THUMBNAIL && downloadConfig.embed_thumbnail === null));
-        const shouldEmbedThumbForUnknown = fileType === 'unknown' && (downloadConfig.embed_thumbnail || resumeState?.embed_thumbnail);
-
-        if (shouldEmbedThumbForUnknown || shouldEmbedThumbForVideo || shouldEmbedThumbForAudio) {
-            embedThumbnail = 1;
-            args.push('--embed-thumbnail');
-        }
-    }
-
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_PROXY && PROXY_URL) {
-      args.push('--proxy', PROXY_URL);
-    }
-
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_RATE_LIMIT && RATE_LIMIT) {
-      args.push('--limit-rate', `${RATE_LIMIT}`);
-    }
-
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_FORCE_INTERNET_PROTOCOL && FORCE_INTERNET_PROTOCOL) {
-      if (FORCE_INTERNET_PROTOCOL === 'ipv4') {
-        args.push('--force-ipv4');
-      } else if (FORCE_INTERNET_PROTOCOL === 'ipv6') {
-        args.push('--force-ipv6');
-      }
-    }
-
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_COOKIES) {
-      if (IMPORT_COOKIES_FROM === 'browser' && COOKIES_BROWSER) {
-        args.push('--cookies-from-browser', COOKIES_BROWSER);
-      } else if (IMPORT_COOKIES_FROM === 'file' && COOKIES_FILE) {
-        args.push('--cookies', COOKIES_FILE);
-      }
-    }
-
-    let sponsorblockRemove = null;
-    let sponsorblockMark = null;
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && ((downloadConfig.sponsorblock && downloadConfig.sponsorblock !== 'auto') || resumeState?.sponsorblock_remove || resumeState?.sponsorblock_mark || USE_SPONSORBLOCK)) {
-      if (downloadConfig?.sponsorblock === 'remove' || resumeState?.sponsorblock_remove || (SPONSORBLOCK_MODE === 'remove' && !downloadConfig.sponsorblock)) {
-        sponsorblockRemove = resumeState?.sponsorblock_remove || (SPONSORBLOCK_REMOVE === 'custom' ? (
-          SPONSORBLOCK_REMOVE_CATEGORIES.length > 0 ? SPONSORBLOCK_REMOVE_CATEGORIES.join(',') : 'default'
-        ) : (SPONSORBLOCK_REMOVE));
-        args.push('--sponsorblock-remove', sponsorblockRemove);
-      } else if (downloadConfig?.sponsorblock === 'mark' || resumeState?.sponsorblock_mark || (SPONSORBLOCK_MODE === 'mark' && !downloadConfig.sponsorblock)) {
-        sponsorblockMark = resumeState?.sponsorblock_mark || (SPONSORBLOCK_MARK === 'custom' ? (
-          SPONSORBLOCK_MARK_CATEGORIES.length > 0 ? SPONSORBLOCK_MARK_CATEGORIES.join(',') : 'default'
-        ) : (SPONSORBLOCK_MARK));
-        args.push('--sponsorblock-mark', sponsorblockMark);
-      }
-    }
-
-    let useAria2 = 0;
-    if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && (USE_ARIA2 || resumeState?.use_aria2)) {
-      useAria2 = 1;
-      args.push(
-        '--downloader', 'aria2c',
-        '--downloader', 'dash,m3u8:native',
-        '--downloader-args', 'aria2c:-c -j 16 -x 16 -s 16 -k 1M --check-certificate=false'
-      );
-      LOG.warning('NEODLP', `Looks like you are using aria2 for this yt-dlp download: ${downloadId}. Make sure aria2 is installed on your system if you are on macOS for this to work. Also, pause/resume might not work as expected especially on windows (using aria2 is not recommended for most downloads).`);
-    }
-
-    if (resumeState || (!USE_CUSTOM_COMMANDS && USE_ARIA2)) {
-      args.push('--continue');
-    } else {
-      args.push('--no-continue');
-    }
-
-    console.log('Starting download with args:', args);
-    const command = Command.sidecar('binaries/yt-dlp', args);
-
-    command.on('close', async (data) => {
-      if (data.code !== 0) {
-        console.error(`Download failed with code ${data.code}`);
-        LOG.error(`YT-DLP Download ${downloadId}`, `yt-dlp exited with code ${data.code} (ignore if you manually paused or cancelled the download)`);
-        if (!isErrorExpected) {
-          setIsErrored(true);
-          setErroredDownloadId(downloadId);
-        }
-      } else {
-        LOG.info(`YT-DLP Download ${downloadId}`, `yt-dlp exited with code ${data.code}`);
-      }
-    });
-
-    command.on('error', error => {
-      console.error(`Error: ${error}`);
-      LOG.error(`YT-DLP Download ${downloadId}`, `Error occurred: ${error}`);
-      setIsErrored(true);
-      setErroredDownloadId(downloadId);
-    });
-
-    command.stdout.on('data', line => {
-      if (line.startsWith('status:') || line.startsWith('[#')) {
-        // console.log(line);
-        if (DEBUG_MODE && LOG_PROGRESS) LOG.progress(`YT-DLP Download ${downloadId}`, line);
-        const currentProgress = parseProgressLine(line);
-        const state: DownloadState = {
-          download_id: downloadId,
-          download_status: 'downloading',
-          video_id: videoId,
-          format_id: selectedFormat,
-          subtitle_id: selectedSubtitles || null,
-          queue_index: null,
-          playlist_id: playlistId,
-          playlist_index: playlistIndex ? Number(playlistIndex) : null,
-          title: videoMetadata.title,
-          url: url,
-          host: videoMetadata.webpage_url_domain,
-          thumbnail: videoMetadata.thumbnail || null,
-          channel: videoMetadata.channel || null,
-          duration_string: videoMetadata.duration_string || null,
-          release_date: videoMetadata.release_date || null,
-          view_count: videoMetadata.view_count || null,
-          like_count: videoMetadata.like_count || null,
-          playlist_title: videoMetadata.playlist_title,
-          playlist_url: videoMetadata.playlist_webpage_url,
-          playlist_n_entries: videoMetadata.playlist_count || videoMetadata.n_entries,
-          playlist_channel: videoMetadata.playlist_channel || null,
-          resolution: videoMetadata.resolution || null,
-          ext: videoMetadata.ext || null,
-          abr: videoMetadata.abr || null,
-          vbr: videoMetadata.vbr || null,
-          acodec: videoMetadata.acodec || null,
-          vcodec: videoMetadata.vcodec || null,
-          dynamic_range: videoMetadata.dynamic_range || null,
-          process_id: processPid,
-          status: currentProgress.status || null,
-          progress: currentProgress.progress || null,
-          total: currentProgress.total || null,
-          downloaded: currentProgress.downloaded || null,
-          speed: currentProgress.speed || null,
-          eta: currentProgress.eta || null,
-          filepath: downloadFilePath,
-          filetype: determineFileType(videoMetadata.vcodec, videoMetadata.acodec) || null,
-          filesize: videoMetadata.filesize_approx || null,
-          output_format: outputFormat,
-          embed_metadata: embedMetadata,
-          embed_thumbnail: embedThumbnail,
-          sponsorblock_remove: sponsorblockRemove,
-          sponsorblock_mark: sponsorblockMark,
-          use_aria2: useAria2,
-          custom_command: customCommandArgs,
-          queue_config: null
-        };
-        downloadStateSaver.mutate(state, {
-          onSuccess: (data) => {
-            console.log("Download State saved successfully:", data);
-            queryClient.invalidateQueries({ queryKey: ['download-states'] });
-          },
-          onError: (error) => {
-            console.error("Failed to save download state:", error);
-          }
-        })
-      } else {
-        // console.log(line);
-        if (line.trim() !== '') LOG.info(`YT-DLP Download ${downloadId}`, line);
-
-        if (line.startsWith('Finalpath: ')) {
-            downloadFilePath = line.replace('Finalpath: ', '').trim().replace(/^"|"$/g, '');
-            const downloadedFileExt = downloadFilePath.split('.').pop();
-
-            // Update completion status after a short delay to ensure database states are propagated correctly
-            console.log(`Download completed with ID: ${downloadId}, updating filepath and status after 1.5s delay...`);
-            setTimeout(async () => {
-                LOG.info('NEODLP', `yt-dlp download completed with id: ${downloadId}`);
-                downloadFilePathUpdater.mutate({ download_id: downloadId, filepath: downloadFilePath as string, ext: downloadedFileExt as string }, {
-                    onSuccess: (data) => {
-                        console.log("Download filepath updated successfully:", data);
-                        queryClient.invalidateQueries({ queryKey: ['download-states'] });
-                    },
-                    onError: (error) => {
-                        console.error("Failed to update download filepath:", error);
-                    }
-                });
-
-                downloadStatusUpdater.mutate({ download_id: downloadId, download_status: 'completed' }, {
-                    onSuccess: (data) => {
-                        console.log("Download status updated successfully:", data);
-                        queryClient.invalidateQueries({ queryKey: ['download-states'] });
-                    },
-                    onError: (error) => {
-                        console.error("Failed to update download status:", error);
-                    }
-                });
-
-                toast.success("Download Completed", {
-                    description: `The download for "${videoMetadata.title}" has completed successfully.`,
-                });
-
-                if (ENABLE_NOTIFICATIONS && DOWNLOAD_COMPLETION_NOTIFICATION) {
-                    sendNotification({
-                        title: "Download Completed",
-                        body: `The download for "${videoMetadata.title}" has completed successfully.`,
-                    });
-                }
-            }, 1500);
-        }
-      }
-    });
-
-    try {
-      videoInfoSaver.mutate({
-        video_id: videoId,
-        title: videoMetadata.title,
-        url: url,
-        host: videoMetadata.webpage_url_domain,
-        thumbnail: videoMetadata.thumbnail || null,
-        channel: videoMetadata.channel || videoMetadata.uploader || null,
-        duration_string: videoMetadata.duration_string || null,
-        release_date: videoMetadata.release_date || null,
-        view_count: videoMetadata.view_count || null,
-        like_count: videoMetadata.like_count || null
-      }, {
-        onSuccess: (data) => {
-          console.log("Video Info saved successfully:", data);
-          if (isPlaylist) {
-            playlistInfoSaver.mutate({
-              playlist_id: playlistId ? playlistId : '',
-              playlist_title: videoMetadata.playlist_title,
-              playlist_url: videoMetadata.playlist_webpage_url,
-              playlist_n_entries: videoMetadata.playlist_count || videoMetadata.n_entries,
-              playlist_channel: videoMetadata.playlist_channel || null
-            }, {
-              onSuccess: (data) => {
-                console.log("Playlist Info saved successfully:", data);
-              },
-              onError: (error) => {
-                console.error("Failed to save playlist info:", error);
-              }
-            })
-          }
-          const state: DownloadState = {
-            download_id: downloadId,
-            download_status: (!ongoingDownloads || ongoingDownloads && ongoingDownloads?.length < MAX_PARALLEL_DOWNLOADS) ? 'starting' : 'queued',
-            video_id: videoId,
-            format_id: selectedFormat,
-            subtitle_id: selectedSubtitles || null,
-            queue_index: (!ongoingDownloads || ongoingDownloads && ongoingDownloads?.length < MAX_PARALLEL_DOWNLOADS) ? null : (queuedDownloads?.length || 0),
-            playlist_id: playlistId,
-            playlist_index: playlistIndex ? Number(playlistIndex) : null,
-            title: videoMetadata.title,
-            url: url,
-            host: videoMetadata.webpage_url_domain,
-            thumbnail: videoMetadata.thumbnail || null,
-            channel: videoMetadata.channel || null,
-            duration_string: videoMetadata.duration_string || null,
-            release_date: videoMetadata.release_date || null,
-            view_count: videoMetadata.view_count || null,
-            like_count: videoMetadata.like_count || null,
-            playlist_title: videoMetadata.playlist_title,
-            playlist_url: videoMetadata.playlist_webpage_url,
-            playlist_n_entries: videoMetadata.playlist_count || videoMetadata.n_entries,
-            playlist_channel: videoMetadata.playlist_channel || null,
-            resolution: resumeState?.resolution || null,
-            ext: resumeState?.ext || null,
-            abr: resumeState?.abr || null,
-            vbr: resumeState?.vbr || null,
-            acodec: resumeState?.acodec || null,
-            vcodec: resumeState?.vcodec || null,
-            dynamic_range: resumeState?.dynamic_range || null,
-            process_id: resumeState?.process_id || null,
-            status: resumeState?.status || null,
-            progress: resumeState?.progress || null,
-            total: resumeState?.total || null,
-            downloaded: resumeState?.downloaded || null,
-            speed: resumeState?.speed || null,
-            eta: resumeState?.eta || null,
-            filepath: downloadFilePath,
-            filetype: resumeState?.filetype || null,
-            filesize: resumeState?.filesize || null,
-            output_format: resumeState?.output_format || null,
-            embed_metadata: resumeState?.embed_metadata || 0,
-            embed_thumbnail: resumeState?.embed_thumbnail || 0,
-            sponsorblock_remove: resumeState?.sponsorblock_remove || null,
-            sponsorblock_mark: resumeState?.sponsorblock_mark || null,
-            use_aria2: resumeState?.use_aria2 || 0,
-            custom_command: resumeState?.custom_command || null,
-            queue_config: resumeState?.queue_config || ((!ongoingDownloads || ongoingDownloads && ongoingDownloads?.length < MAX_PARALLEL_DOWNLOADS) ? null : JSON.stringify(downloadConfig))
-          }
-          downloadStateSaver.mutate(state, {
-            onSuccess: (data) => {
-              console.log("Download State saved successfully:", data);
-              queryClient.invalidateQueries({ queryKey: ['download-states'] });
-            },
-            onError: (error) => {
-              console.error("Failed to save download state:", error);
-            }
-          })
-        },
-        onError: (error) => {
-          console.error("Failed to save video info:", error);
-        }
-      })
-
-      if (!ongoingDownloads || ongoingDownloads && ongoingDownloads?.length < MAX_PARALLEL_DOWNLOADS) {
-        LOG.info('NEODLP', `Starting yt-dlp download with args: ${args.join(' ')}`);
-        if(!DEBUG_MODE || (DEBUG_MODE && !LOG_PROGRESS)) LOG.warning('NEODLP', `Progress logs are hidden. Enable 'Debug Mode > Log Progress' in Settings to unhide.`);
-        const child = await command.spawn();
-        processPid = child.pid;
-        return Promise.resolve();
-      } else {
-        console.log("Download is queued, not starting immediately.");
-        LOG.info('NEODLP', `Download queued with id: ${downloadId}`);
-        return Promise.resolve();
-      }
-    } catch (e) {
-      console.error(`Failed to start download: ${e}`);
-      LOG.error('NEODLP', `Failed to start download for URL: ${url} with error: ${e}`);
-      throw e;
-    }
-  };
-
-  const pauseDownload = async (downloadState: DownloadState) => {
-    try {
-      LOG.info('NEODLP', `Pausing yt-dlp download with id: ${downloadState.download_id} (as per user request)`);
-      if ((downloadState.download_status === 'downloading' && downloadState.process_id) || (downloadState.download_status === 'starting' && downloadState.process_id)) {
-        setIsErrorExpected(true);  // Set error expected to true to handle UI state
-        console.log("Killing process with PID:", downloadState.process_id);
-        await invoke('kill_all_process', { pid: downloadState.process_id });
-      }
-      downloadStatusUpdater.mutate({ download_id: downloadState.download_id, download_status: 'paused' }, {
-        onSuccess: (data) => {
-          console.log("Download status updated successfully:", data);
-          queryClient.invalidateQueries({ queryKey: ['download-states'] });
-
-          /* re-check if the download is properly paused (if not try again after a small delay)
-          as the pause opertion happens within high throughput of operations and have a high chgance of failure.
-          */
-          if (isSuccessFetchingDownloadStates && downloadStates.find(state => state.download_id === downloadState.download_id)?.download_status !== 'paused') {
-            console.log("Download status not updated to paused yet, retrying...");
-            setTimeout(() => {
-              downloadStatusUpdater.mutate({ download_id: downloadState.download_id, download_status: 'paused' }, {
-                onSuccess: (data) => {
-                  console.log("Download status updated successfully on retry:", data);
-                  queryClient.invalidateQueries({ queryKey: ['download-states'] });
-                },
-                onError: (error) => {
-                  console.error("Failed to update download status:", error);
-                }
-              });
-            }, 200);
-          }
-
-          // Reset the processing flag to ensure queue can be processed
-          isProcessingQueueRef.current = false;
-
-          // Process the queue after a short delay to ensure state is updated
-          setTimeout(() => {
-            processQueuedDownloads();
-          }, 1000);
-        },
-        onError: (error) => {
-          console.error("Failed to update download status:", error);
-        }
-      })
-      return Promise.resolve();
-    } catch (e) {
-      console.error(`Failed to pause download: ${e}`);
-      LOG.error('NEODLP', `Failed to pause download with id: ${downloadState.download_id} with error: ${e}`);
-      isProcessingQueueRef.current = false;
-      throw e;
-    }
-  };
-
-  const resumeDownload = async (downloadState: DownloadState) => {
-    try {
-      LOG.info('NEODLP', `Resuming yt-dlp download with id: ${downloadState.download_id} (as per user request)`);
-      await startDownload(
-        downloadState.playlist_id && downloadState.playlist_index ? downloadState.playlist_url : downloadState.url,
-        downloadState.format_id,
-        downloadState.queue_config ? JSON.parse(downloadState.queue_config) : {
-          output_format: null,
-          embed_metadata: null,
-          embed_thumbnail: null,
-          sponsorblock: null,
-          custom_command: null
-        },
-        downloadState.subtitle_id,
-        downloadState
-      );
-      return Promise.resolve();
-    } catch (e) {
-      console.error(`Failed to resume download: ${e}`);
-      LOG.error('NEODLP', `Failed to resume download with id: ${downloadState.download_id} with error: ${e}`);
-      throw e;
-    }
-  };
-
-  const cancelDownload = async (downloadState: DownloadState) => {
-    try {
-      LOG.info('NEODLP', `Cancelling yt-dlp download with id: ${downloadState.download_id} (as per user request)`);
-      if ((downloadState.download_status === 'downloading' && downloadState.process_id) || (downloadState.download_status === 'starting' && downloadState.process_id)) {
-        setIsErrorExpected(true); // Set error expected to true to handle UI state
-        console.log("Killing process with PID:", downloadState.process_id);
-        await invoke('kill_all_process', { pid: downloadState.process_id });
-      }
-      downloadStateDeleter.mutate(downloadState.download_id, {
-        onSuccess: (data) => {
-          console.log("Download State deleted successfully:", data);
-          queryClient.invalidateQueries({ queryKey: ['download-states'] });
-          // Reset processing flag and trigger queue processing
-          isProcessingQueueRef.current = false;
-
-          // Process the queue after a short delay
-          setTimeout(() => {
-            processQueuedDownloads();
-          }, 1000);
-        },
-        onError: (error) => {
-          console.error("Failed to delete download state:", error);
-          isProcessingQueueRef.current = false;
-        }
-      })
-      return Promise.resolve();
-    } catch (e) {
-      console.error(`Failed to cancel download: ${e}`);
-      LOG.error('NEODLP', `Failed to cancel download with id: ${downloadState.download_id} with error: ${e}`);
-      throw e;
-    }
-  }
-
-  const processQueuedDownloads = useCallback(async () => {
-    // Prevent concurrent processing
-    if (isProcessingQueueRef.current) {
-      console.log("Queue processing already in progress, skipping...");
-      return;
-    }
-
-    // Check if we can process more downloads
-    if (!queuedDownloads?.length || ongoingDownloads?.length >= MAX_PARALLEL_DOWNLOADS) {
-      return;
-    }
-
-    try {
-      isProcessingQueueRef.current = true;
-      console.log("Processing download queue...");
-
-      // Get the first download in queue
-      const downloadToStart = queuedDownloads[0];
-
-      // Skip if we just processed this download to prevent loops
-      if (lastProcessedDownloadIdRef.current === downloadToStart.download_id) {
-        console.log("Skipping recently processed download:", downloadToStart.download_id);
-        return;
-      }
-
-      // Double-check current state from global state
-      const currentState = globalDownloadStates.find(
-        state => state.download_id === downloadToStart.download_id
-      );
-
-      if (!currentState || currentState.download_status !== 'queued') {
-        console.log("Download no longer in queued state:", downloadToStart.download_id);
-        return;
-      }
-
-      console.log("Starting queued download:", downloadToStart.download_id);
-      LOG.info('NEODLP', `Starting queued download with id: ${downloadToStart.download_id}`);
-      lastProcessedDownloadIdRef.current = downloadToStart.download_id;
-
-      // Update status to 'starting' first
-      await downloadStatusUpdater.mutateAsync({
-        download_id: downloadToStart.download_id,
-        download_status: 'starting'
-      });
-
-      // Fetch latest state after status update
-      await queryClient.invalidateQueries({ queryKey: ['download-states'] });
-
-      // Start the download
-      await startDownload(
-        downloadToStart.url,
-        downloadToStart.format_id,
-        downloadToStart.queue_config ? JSON.parse(downloadToStart.queue_config) : {
-          output_format: null,
-          embed_metadata: null,
-          embed_thumbnail: null,
-          sponsorblock: null,
-          custom_command: null
-        },
-        downloadToStart.subtitle_id,
-        downloadToStart
-      );
-
-    } catch (error) {
-      console.error("Error processing download queue:", error);
-      LOG.error('NEODLP', `Error processing download queue: ${error}`);
-    } finally {
-      // Important: reset the processing flag
-      setTimeout(() => {
-        isProcessingQueueRef.current = false;
-        console.log("Queue processor released lock");
-      }, 1000); // Small delay to prevent rapid re-processing
-    }
-  }, [queuedDownloads, ongoingDownloads, globalDownloadStates, queryClient]);
 
     // Prevent right click context menu in production
     if (!import.meta.env.DEV) {
@@ -912,7 +107,7 @@ export default function App({ children }: { children: React.ReactNode }) {
                 appWindow.setFocus();
                 navigate('/');
                 if (event.payload.url) {
-            LOG.info('NEODLP', `Received download request from neodlp browser extension for URL: ${event.payload.url}`);
+                    LOG.info('NEODLP', `Received search request from neodlp browser extension for URL: ${event.payload.url}`);
                     const { setRequestedUrl, setAutoSubmitSearch } = useCurrentVideoMetadataStore.getState();
                     setRequestedUrl(event.payload.url);
                     setAutoSubmitSearch(true);
@@ -929,17 +124,6 @@ export default function App({ children }: { children: React.ReactNode }) {
         };
     }, []);
 
-  // useEffect(() => {
-  //   const fetchConfigPath = async () => {
-  //     const configPath = await invoke('get_config_file_path');
-  //     console.log("Config path fetched successfully:", configPath);
-  //   };
-
-  //   fetchConfigPath().catch((error) => {
-  //     console.error("Error fetching config path:", error);
-  //   });
-  // }, []);
-
     // Fetch download states from database and sync with state
     useEffect(() => {
         if (isSuccessFetchingSettings && settings) {
@@ -1125,7 +309,7 @@ export default function App({ children }: { children: React.ReactNode }) {
 
     useEffect(() => {
         if (isSuccessFetchingDownloadStates && downloadStates) {
-      console.log("Download States fetched successfully:", downloadStates);
+            // console.log("Download States fetched successfully:", downloadStates);
             setDownloadStates(downloadStates);
         }
     }, [downloadStates, isSuccessFetchingDownloadStates, setDownloadStates]);
@@ -1143,42 +327,63 @@ export default function App({ children }: { children: React.ReactNode }) {
 
     // show a toast and pause the download when yt-dlp exits unexpectedly
     useEffect(() => {
-    if (isErrored && !isErrorExpected) {
+        const unexpectedErrors = Array.from(erroredDownloadIds).filter(id => !expectedErrorDownloadIds.has(id));
+        const processedUnexpectedErrors = unexpectedErrors.filter(id => !pendingErrorUpdatesRef.current.has(id));
+        if (unexpectedErrors.length === 0) return;
+
+        processedUnexpectedErrors.forEach((downloadId) => {
+            const downloadState = globalDownloadStates.find(d => d.download_id === downloadId);
+            const isPlaylist = downloadState?.playlist_id !== null && downloadState?.playlist_indices !== null;
+            const isMultiplePlaylistItems = isPlaylist && downloadState?.playlist_indices && downloadState?.playlist_indices.includes(',');
+
             toast.error("Download Failed", {
-        description: "yt-dlp exited unexpectedly. Please try again later",
+                description: `The download for ${isMultiplePlaylistItems ? 'playlist ' : ''}"${isMultiplePlaylistItems ? downloadState?.playlist_title : downloadState?.title}" failed because yt-dlp exited unexpectedly. Please try again later.`,
             });
-      if (erroredDownloadId) {
+        });
-        downloadStatusUpdater.mutate({ download_id: erroredDownloadId, download_status: 'paused' }, {
+
+        const timeoutIds: NodeJS.Timeout[] = [];
+        unexpectedErrors.forEach((downloadId) => {
+            pendingErrorUpdatesRef.current.add(downloadId);
+
+            const timeoutId = setTimeout(() => {
+                downloadStatusUpdater.mutate({ download_id: downloadId, download_status: 'errored' }, {
                     onSuccess: (data) => {
                         console.log("Download status updated successfully:", data);
                         queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                        removeErroredDownload(downloadId);
+                        pendingErrorUpdatesRef.current.delete(downloadId);
                     },
                     onError: (error) => {
                         console.error("Failed to update download status:", error);
+                        removeErroredDownload(downloadId);
+                        pendingErrorUpdatesRef.current.delete(downloadId);
                     }
-        })
+                });
-        setErroredDownloadId(null);
+            }, 500);
-      }
+            timeoutIds.push(timeoutId);
-      setIsErrored(false);
+        });
-      setIsErrorExpected(false);
+
-    }
+        return () => {
-  }, [isErrored, isErrorExpected, erroredDownloadId, setIsErrored, setIsErrorExpected, setErroredDownloadId]);
+            timeoutIds.forEach(id => clearTimeout(id));
+        };
+    }, [erroredDownloadIds, expectedErrorDownloadIds]);
 
     // auto reset error states after 3 seconds of expecting an error
     useEffect(() => {
-    if (isErrorExpected) {
+        if (expectedErrorDownloadIds.size > 0) {
             const timeoutId = setTimeout(() => {
-        setIsErrored(false);
+                expectedErrorDownloadIds.forEach((downloadId) => {
-        setIsErrorExpected(false);
+                    removeErroredDownload(downloadId);
-        setErroredDownloadId(null);
+                    removeExpectedErrorDownload(downloadId);
+                });
             }, 3000);
             return () => clearTimeout(timeoutId);
         }
-  }, [isErrorExpected, setIsErrorExpected]);
+    }, [expectedErrorDownloadIds]);
 
     return (
         <AppContext.Provider value={{ fetchVideoMetadata, startDownload, pauseDownload, resumeDownload, cancelDownload }}>
-      <ThemeProvider defaultTheme={APP_THEME || "system"} storageKey="vite-ui-theme">
+            <ThemeProvider defaultTheme={APP_THEME || "system"} defaultColorScheme={APP_COLOR_SCHEME || "default"}>
                 <TooltipProvider delayDuration={1000}>
                     {children}
                     <Sonner closeButton />

src/components/custom/formatSelectionGroup.tsx

@@ -57,8 +57,8 @@ const FormatSelectionGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "relative w-full rounded-lg border-2 border-border bg-card px-3 py-2 shadow-sm transition-all",
+        "relative w-full rounded-lg border-2 border-border bg-background px-3 py-2 shadow-sm transition-all",
-        "data-[state=checked]:border-primary data-[state=checked]:border-2 data-[state=checked]:bg-muted/70",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary/10",
         "hover:bg-muted/70",
         "disabled:cursor-not-allowed disabled:opacity-50",
         className

src/components/custom/formatToggleGroup.tsx

@@ -0,0 +1,114 @@
+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";
+import { VideoFormat } from "@/types/video";
+import { determineFileType, formatBitrate, formatCodec, formatFileSize } from "@/utils";
+import { Music, Video, File } from "lucide-react";
+
+const FormatToggleGroupContext = React.createContext<
+  VariantProps<typeof toggleVariants> & { toggleType?: "single" | "multiple" }
+>({
+  size: "default",
+  variant: "default",
+  toggleType: "multiple",
+});
+
+type FormatToggleGroupProps =
+  | (Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, "type"> &
+      VariantProps<typeof toggleVariants> & { type: "single", value?: string, onValueChange?: (value: string) => void })
+  | (Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, "type"> &
+      VariantProps<typeof toggleVariants> & { type: "multiple", value?: string[], onValueChange?: (value: string[]) => void });
+
+export const FormatToggleGroup = React.forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
+  FormatToggleGroupProps
+>(({ className, variant, size, children, type = "multiple", ...props }, ref) => {
+  if (type === "single") {
+    return (
+      <ToggleGroupPrimitive.Root
+        ref={ref}
+        type="single"
+        className={cn("flex flex-col gap-2", className)}
+        {...(props as any)}
+      >
+        <FormatToggleGroupContext.Provider value={{ variant, size, toggleType: "single" }}>
+          {children}
+        </FormatToggleGroupContext.Provider>
+      </ToggleGroupPrimitive.Root>
+    );
+  }
+
+  return (
+    <ToggleGroupPrimitive.Root
+      ref={ref}
+      type="multiple"
+      className={cn("flex flex-col gap-2", className)}
+      {...(props as any)}
+    >
+      <FormatToggleGroupContext.Provider value={{ variant, size, toggleType: "multiple" }}>
+        {children}
+      </FormatToggleGroupContext.Provider>
+    </ToggleGroupPrimitive.Root>
+  );
+});
+FormatToggleGroup.displayName = "FormatToggleGroup";
+
+export const FormatToggleGroupItem = React.forwardRef<
+  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
+    VariantProps<typeof toggleVariants> & {
+      format: VideoFormat
+    }
+>(({ className, children, variant, size, format, value, ...props }, ref) => {
+  const determineFileTypeIcon = (format: VideoFormat) => {
+    const fileFormat = determineFileType(/*format.video_ext, format.audio_ext,*/ format.vcodec, format.acodec)
+    switch (fileFormat) {
+      case 'video+audio':
+        return (
+          <span className="absolute flex items-center right-2 bottom-2">
+            <Video className="w-3 h-3 mr-2" />
+            <Music className="w-3 h-3" />
+          </span>
+        )
+      case 'video':
+        return (
+          <Video className="w-3 h-3 absolute right-2 bottom-2" />
+        )
+      case 'audio':
+        return (
+          <Music className="w-3 h-3 absolute right-2 bottom-2" />
+        )
+      default:
+        return (
+          <File className="w-3 h-3 absolute right-2 bottom-2" />
+        )
+    }
+  }
+
+  return (
+    <ToggleGroupPrimitive.Item
+      ref={ref}
+      className={cn(
+        "relative flex w-full p-2 rounded-lg border-2 border-border bg-background px-3 py-2 shadow-sm transition-all",
+        "hover:bg-muted/70 data-[state=on]:bg-primary/10",
+        "data-[state=on]:border-primary",
+        className
+      )}
+      value={value}
+      {...props}
+    >
+      <div className="flex flex-col items-start text-start gap-1">
+        <h5 className="text-sm">{format.format}</h5>
+        <p className="text-muted-foreground text-xs">{format.filesize_approx ? formatFileSize(format.filesize_approx) : 'unknown'} {format.tbr ? formatBitrate(format.tbr) : 'unknown'}</p>
+        <p className="text-muted-foreground text-xs">{format.ext ? format.ext.toUpperCase() : 'unknown'} {
+        ((format.vcodec && format.vcodec !== 'none') || (format.acodec && format.acodec !== 'none')) && (
+            `(${format.vcodec && format.vcodec !== 'none' ? formatCodec(format.vcodec) : ''}${format.vcodec && format.vcodec !== 'none' && format.acodec && format.acodec !== 'none' ? ' ' : ''}${format.acodec && format.acodec !== 'none' ? formatCodec(format.acodec) : ''})`
+        )}</p>
+        {determineFileTypeIcon(format)}
+      </div>
+    </ToggleGroupPrimitive.Item>
+  );
+});
+FormatToggleGroupItem.displayName = "FormatToggleGroupItem";

src/components/custom/paginationBar.tsx

@@ -0,0 +1,81 @@
+import { Paginated } from "@/types/download";
+import { Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious } from "@/components/ui/pagination";
+
+export default function PaginationBar({
+    paginatedData,
+    setPage,
+}: {
+    paginatedData: Paginated;
+    setPage: (page: number) => void;
+}) {
+    return (
+        <Pagination className="mt-4">
+            <PaginationContent>
+                <PaginationItem>
+                    <PaginationPrevious
+                        onClick={() => setPage(paginatedData.prev_page ?? paginatedData.first_page)}
+                        aria-disabled={!paginatedData.prev_page}
+                        className={!paginatedData.prev_page ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                    />
+                </PaginationItem>
+
+                {paginatedData.pages.map((link, index, array) => {
+                    const currentPage = paginatedData.current_page;
+                    const pageNumber = link.page!;
+
+                    // Show first page, last page, current page, and 2 pages around current
+                    const showPage =
+                        pageNumber === 1 ||
+                        pageNumber === paginatedData.last_page ||
+                        Math.abs(pageNumber - currentPage) <= 1;
+
+                    // Show ellipsis if there's a gap
+                    const prevVisiblePage = array
+                        .slice(0, index)
+                        .reverse()
+                        .find((prevLink) => {
+                            const prevPageNum = prevLink.page!;
+                            return (
+                                prevPageNum === 1 ||
+                                prevPageNum === paginatedData.last_page ||
+                                Math.abs(prevPageNum - currentPage) <= 1
+                            );
+                        })?.page;
+
+                    const showEllipsis = showPage && prevVisiblePage && pageNumber - prevVisiblePage > 1;
+
+                    if (!showPage) return null;
+
+                    return (
+                        <div key={link.page} className="contents">
+                            {showEllipsis && (
+                                <PaginationItem>
+                                    <PaginationEllipsis />
+                                </PaginationItem>
+                            )}
+                            {showPage && (
+                                <PaginationItem>
+                                    <PaginationLink
+                                        className="cursor-pointer"
+                                        onClick={() => setPage(link.page)}
+                                        isActive={link.active}
+                                    >
+                                        {link.label}
+                                    </PaginationLink>
+                                </PaginationItem>
+                            )}
+                        </div>
+                    );
+                })}
+
+                <PaginationItem>
+                    <PaginationNext
+                        onClick={() => setPage(paginatedData.next_page ?? paginatedData.last_page)}
+                        aria-disabled={!paginatedData.next_page}
+                        className={!paginatedData.next_page ? 'pointer-events-none opacity-50' : 'cursor-pointer'}
+                    />
+                </PaginationItem>
+            </PaginationContent>
+        </Pagination>
+    )
+}

src/components/custom/playlistSelectionGroup.tsx

@@ -35,8 +35,8 @@ const PlaylistSelectionGroupItem = React.forwardRef<
     <RadioGroupPrimitive.Item
       ref={ref}
       className={cn(
-        "relative w-full rounded-lg border-2 border-border bg-card p-2 shadow-sm transition-all",
+        "relative w-full rounded-lg border-2 border-border bg-background p-2 shadow-sm transition-all",
-        "data-[state=checked]:border-primary data-[state=checked]:border-2 data-[state=checked]:bg-muted/70",
+        "data-[state=checked]:border-primary data-[state=checked]:bg-primary/10",
         "hover:bg-muted/70",
         "disabled:cursor-not-allowed disabled:opacity-50",
         className
@@ -44,7 +44,7 @@ const PlaylistSelectionGroupItem = React.forwardRef<
       {...props}
     >
       <div className="flex gap-2 w-full relative">
-        <div className="w-[7rem] xl:w-[10rem]">
+        <div className="w-28 xl:w-40">
           <AspectRatio
             ratio={16 / 9}
             className={clsx(
@@ -63,9 +63,9 @@ const PlaylistSelectionGroupItem = React.forwardRef<
           </AspectRatio>
         </div>
 
-        <div className="flex w-[10rem] lg:w-[12rem] xl:w-[15rem] flex-col items-start text-start">
+        <div className="flex w-40 lg:w-48 xl:w-60 flex-col items-start text-start">
           <h3 className="text-sm text-nowrap w-full overflow-hidden text-ellipsis mb-1" title={video.title}>{video.title}</h3>
-          <p className="text-xs text-muted-foreground mb-2">{video.channel || video.uploader || 'unknown'}</p>
+          <p className="text-xs text-nowrap w-full overflow-hidden text-ellipsis text-muted-foreground mb-2" title={video.creator || video.channel || video.uploader || 'unknown'}>{video.creator || video.channel || video.uploader || 'unknown'}</p>
           <div className="flex items-center">
             <span className="text-xs text-muted-foreground flex items-center pr-3">
               <Clock className="w-4 h-4 mr-2"/>

src/components/custom/playlistToggleGroup.tsx

@@ -3,7 +3,6 @@ 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";
-import { Checkbox } from "@/components/ui/checkbox";
 import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { ProxyImage } from "@/components/custom/proxyImage";
 import { Clock } from "lucide-react";
@@ -11,7 +10,6 @@ import clsx from "clsx";
 import { formatDurationString } from "@/utils";
 import { RawVideoInfo } from "@/types/video";
 
-// Create a context to share toggle group props
 const PlaylistToggleGroupContext = React.createContext<
   VariantProps<typeof toggleVariants> & { toggleType?: "single" | "multiple" }
 >({
@@ -20,19 +18,16 @@ const PlaylistToggleGroupContext = React.createContext<
   toggleType: "multiple",
 });
 
-// Helper type for the PlaylistToggleGroup
 type PlaylistToggleGroupProps =
   | (Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, "type"> &
       VariantProps<typeof toggleVariants> & { type: "single", value?: string, onValueChange?: (value: string) => void })
   | (Omit<React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root>, "type"> &
       VariantProps<typeof toggleVariants> & { type: "multiple", value?: string[], onValueChange?: (value: string[]) => void });
 
-// Main PlaylistToggleGroup component with proper type handling
 export const PlaylistToggleGroup = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
+  React.ComponentRef<typeof ToggleGroupPrimitive.Root>,
   PlaylistToggleGroupProps
 >(({ className, variant, size, children, type = "multiple", ...props }, ref) => {
-  // Pass props based on the type
   if (type === "single") {
     return (
       <ToggleGroupPrimitive.Root
@@ -63,85 +58,27 @@ export const PlaylistToggleGroup = React.forwardRef<
 });
 PlaylistToggleGroup.displayName = "PlaylistToggleGroup";
 
-// Rest of your component remains the same
-// PlaylistToggleGroupItem component with checkbox and item layout
 export const PlaylistToggleGroupItem = React.forwardRef<
-  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
+  React.ComponentRef<typeof ToggleGroupPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
     VariantProps<typeof toggleVariants> & {
       video: RawVideoInfo;
     }
 >(({ className, children, variant, size, video, value, ...props }, ref) => {
-  const [isHovered, setIsHovered] = React.useState(false);
-  const [checked, setChecked] = React.useState(false);
-  
-  // Instead of a ref + useEffect approach
-  const [itemElement, setItemElement] = React.useState<HTMLButtonElement | null>(null);
-  
-  // Handle checkbox click separately by simulating a click on the parent item
-  const handleCheckboxClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-    
-    // Manually trigger the item's click to toggle selection
-    if (itemElement) {
-      // This simulates a click on the toggle item itself
-      itemElement.click();
-    }
-  };
-
-  // Use an effect that triggers when itemElement changes
-  React.useEffect(() => {
-    if (itemElement) {
-      const observer = new MutationObserver((mutations) => {
-        mutations.forEach((mutation) => {
-          if (mutation.attributeName === 'data-state') {
-            setChecked(itemElement.getAttribute('data-state') === 'on');
-          }
-        });
-      });
-      
-      setChecked(itemElement.getAttribute('data-state') === 'on');
-      observer.observe(itemElement, { attributes: true });
-      
-      return () => observer.disconnect();
-    }
-  }, [itemElement]);
-
   return (
     <ToggleGroupPrimitive.Item
-      ref={(el) => {
+      ref={ref}
-        // Handle both our ref and the forwarded ref
-        if (typeof ref === 'function') {
-          ref(el);
-        } else if (ref) {
-          ref.current = el;
-        }
-        setItemElement(el);
-      }}
       className={cn(
-        "flex w-full p-2 rounded-md transition-colors border-2 border-border",
+        "flex w-full p-2 rounded-lg transition-colors border-2 border-border",
-        "hover:bg-muted/50 data-[state=on]:bg-muted/70",
+        "hover:bg-muted/70 data-[state=on]:bg-primary/10",
         "data-[state=on]:border-primary",
         className
       )}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}
       value={value}
       {...props}
     >
-      
       <div className="flex gap-2 w-full relative">
-        <div className="absolute top-2 left-2 z-10">
+        <div className="w-28 xl:w-40">
-            <Checkbox 
-            checked={checked}
-            onClick={handleCheckboxClick}
-            className={cn(
-                "transition-opacity",
-                isHovered || checked ? "opacity-100" : "opacity-0"
-            )}
-            />
-        </div>
-        <div className="w-[7rem] xl:w-[10rem]">
           <AspectRatio
             ratio={16 / 9}
             className={clsx(
@@ -160,9 +97,9 @@ export const PlaylistToggleGroupItem = React.forwardRef<
           </AspectRatio>
         </div>
 
-        <div className="flex w-[10rem] lg:w-[12rem] xl:w-[15rem] flex-col items-start text-start">
+        <div className="flex w-40 lg:w-48 xl:w-60 flex-col items-start text-start">
-          <h3 className="text-sm text-nowrap w-full overflow-hidden text-ellipsis mb-1">{video.title}</h3>
+          <h3 className="text-sm text-nowrap w-full overflow-hidden text-ellipsis mb-1" title={video.title}>{video.title}</h3>
-          <p className="text-xs text-muted-foreground mb-2">{video.channel || video.uploader || 'unknown'}</p>
+          <p className="text-xs text-nowrap w-full overflow-hidden text-ellipsis text-muted-foreground mb-2" title={video.creator || video.channel || video.uploader || 'unknown'}>{video.creator || video.channel || video.uploader || 'unknown'}</p>
           <div className="flex items-center">
             <span className="text-xs text-muted-foreground flex items-center pr-3">
               <Clock className="w-4 h-4 mr-2"/>

src/components/custom/slidingButton.tsx

@@ -23,7 +23,7 @@ export const SlidingButton = ({
     return (
       <Tag
         className={cn(
-          "px-4 py-2 rounded-md bg-black dark:bg-white dark:text-black text-white text-center relative overflow-hidden cursor-pointer flex justify-center",
+          "px-4 py-2 rounded-md bg-primary text-primary-foreground text-center relative overflow-hidden cursor-pointer flex justify-center",
           `group/sliding-button`,
           className
         )}
@@ -41,7 +41,7 @@ export const SlidingButton = ({
         </span>
         <div
           className={cn(
-            'flex items-center justify-center absolute inset-0 transition duration-500 text-white z-20',
+            'flex items-center justify-center absolute inset-0 transition duration-500 text-primary-foreground z-20',
             `-translate-x-60 group-hover/sliding-button:translate-x-0`
           )}
         >

src/components/footer.tsx

@@ -2,7 +2,8 @@ import { useLocation } from "react-router-dom";
 import { isActive } from "@/utils";
 import { config } from "@/config";
 import { useSettingsPageStatesStore } from "@/services/store";
-import { Github, Globe } from "lucide-react";
+import { Github, Globe, Heart } from "lucide-react";
+import { IndianFlagLogo } from "@/components/icons/india";
 
 export default function Footer() {
     const location = useLocation();
@@ -14,8 +15,8 @@ export default function Footer() {
         {isSettingsPage ? (
             <div className="flex items-center justify-between p-4 border-t border-border">
                 <div className="flex flex-col gap-1">
-                    <span className="text-sm">{config.appName} v{appVersion} - &copy; {new Date().getFullYear()} &nbsp;|&nbsp; <a href={'https://github.com/' + config.appRepo + '/blob/main/LICENSE'} target="_blank">MIT License</a></span>
+                    <span className="text-sm">{config.appName} v{appVersion} &copy; 2025 - {new Date().getFullYear()} &nbsp;|&nbsp; <a href={'https://github.com/' + config.appRepo + '/blob/main/LICENSE'} target="_blank">MIT License</a></span>
-                    <span className="text-xs text-muted-foreground">Made with ❤️ by <a href={config.appAuthorUrl} target="_blank">{config.appAuthor}</a></span>
+                    <span className="text-xs text-muted-foreground">Proudly Made with <Heart className="inline size-3 mb-0.5 fill-primary stroke-primary"/> in India <IndianFlagLogo className="inline size-full w-4 ml-0.5 mb-[0.1rem]" /></span>
                 </div>
                 <div className="flex items-center gap-2">
                     <a href={config.appHomepage} target="_blank" className="text-sm text-muted-foreground hover:text-foreground" title="Homepage">

src/components/icons/india.tsx

@@ -0,0 +1,27 @@
+export function IndianFlagLogo({ className }: { className?: string }) {
+    return (
+        <svg width="1024" height="1024" viewBox="-45 -30 90 60" fill="#07038D" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" className={className}>
+            <path fill="#FFF" d="m-45-30h90v60h-90z"/>
+            <path fill="#FF6820" d="m-45-30h90v20h-90z"/>
+            <path fill="#046A38" d="m-45 10h90v20h-90z"/>
+            <circle r="9.25"/>
+            <circle fill="#FFF" r="8"/>
+            <circle r="1.6"/>
+            <g id="d">
+                <g id="c">
+                    <g id="b">
+                        <g id="a">
+                            <path d="m0-8 .3 4.81409L0-.80235-.3-3.18591z"/>
+                            <circle transform="rotate(7.5)" r="0.35" cy="-8"/>
+                        </g>
+                        <use xlinkHref="#a" transform="scale(-1)"/>
+                    </g>
+                    <use xlinkHref="#b" transform="rotate(15)"/>
+                </g>
+                <use xlinkHref="#c" transform="rotate(30)"/>
+            </g>
+            <use xlinkHref="#d" transform="rotate(60)"/>
+            <use xlinkHref="#d" transform="rotate(120)"/>
+        </svg>
+    );
+}

src/components/icons/neodlp.tsx

@@ -6,8 +6,8 @@ export function NeoDlpLogo({ className }: { className?: string }) {
             <rect x="355" y="222" width="313" height="346" rx="25" fill="#FAFAFA"/>
             <defs>
                 <linearGradient id="paint0_linear_10_2" x1="129.5" y1="148.5" x2="921" y2="863" gradientUnits="userSpaceOnUse">
-                    <stop stopColor="#4444FF"/>
+                    <stop stopColor="var(--logo-stop-color-1)"/>
-                    <stop offset="1" stopColor="#FF43D0"/>
+                    <stop offset="1" stopColor="var(--logo-stop-color-2)"/>
                 </linearGradient>
             </defs>
         </svg>

src/components/navbar.tsx

@@ -1,21 +1,32 @@
+import { useState } from "react";
 import { useLocation } from "react-router-dom";
 import { SidebarTrigger } from "@/components/ui/sidebar";
 import { getRouteName } from "@/utils";
 import { Button } from "@/components/ui/button";
-import { Terminal } from "lucide-react";
+import { BrushCleaning, Check, Copy, Terminal } from "lucide-react";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
-import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
 import { useLogger } from "@/helpers/use-logger";
+import { writeText } from "@tauri-apps/plugin-clipboard-manager";
 
 export default function Navbar() {
+    const [copied, setCopied] = useState(false);
     const location = useLocation();
-    const logs = useLogger().getLogs();
+    const logger = useLogger();
+    const logs = logger.getLogs();
+    const logText = logs.map(log => `${new Date(log.timestamp).toLocaleTimeString()} [${log.level.toUpperCase()}] ${log.context}: ${log.message}`).join('\n');
+
+    const handleCopyLogs = async () => {
+        await writeText(logText);
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+    }
 
     return (
         <nav className="flex justify-between items-center py-3 px-4 sticky top-0 backdrop-blur supports-backdrop-filter:bg-background/60 border-b z-50">
             <div className="flex justify-center">
                 <SidebarTrigger />
-                <h1 className="text-lg text-primary font-semibold ml-4">{getRouteName(location.pathname)}</h1>
+                <h1 className="text-lg font-semibold ml-4">{getRouteName(location.pathname)}</h1>
             </div>
             <div className="flex justify-center items-center">
                 <Dialog>
@@ -31,12 +42,12 @@ export default function Navbar() {
                         <p>Logs</p>
                         </TooltipContent>
                     </Tooltip>
-                    <DialogContent className="sm:max-w-[600px]">
+                    <DialogContent className="sm:max-w-150">
                         <DialogHeader>
                             <DialogTitle>Log Viewer</DialogTitle>
                             <DialogDescription>Monitor real-time app session logs (latest on top)</DialogDescription>
                         </DialogHeader>
-                        <div className="flex flex-col gap-2 p-2 max-h-[300px] overflow-y-scroll overflow-x-hidden bg-muted">
+                        <div className="flex flex-col gap-2 p-2 max-h-75 overflow-y-scroll overflow-x-hidden bg-muted">
                             {logs.length === 0 ? (
                                 <p className="text-sm text-muted-foreground">NO LOGS TO SHOW!</p>
                             ) : (
@@ -48,6 +59,28 @@ export default function Navbar() {
                                 ))
                             )}
                         </div>
+                        <DialogFooter>
+                            <Button
+                            variant="destructive"
+                            disabled={logs.length === 0}
+                            onClick={() => logger.clearLogs()}
+                            >
+                                <BrushCleaning className="size-4" />
+                                Clear Logs
+                            </Button>
+                            <Button
+                            className="transition-all duration-300"
+                            disabled={logs.length === 0}
+                            onClick={() => handleCopyLogs()}
+                            >
+                                {copied ? (
+                                    <Check className="size-4" />
+                                ) : (
+                                    <Copy className="size-4" />
+                                )}
+                                Copy Logs
+                            </Button>
+                        </DialogFooter>
                     </DialogContent>
                 </Dialog>
             </div>

src/components/pages/downloader/bottomBar.tsx

@@ -0,0 +1,503 @@
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { useAppContext } from "@/providers/appContextProvider";
+import { useDownloaderPageStatesStore, useSettingsPageStatesStore } from "@/services/store";
+import { formatBitrate, formatFileSize } from "@/utils";
+import { Loader2, Music, Video, File, AlertCircleIcon, Settings2 } from "lucide-react";
+import { useEffect, useRef } from "react";
+import { RawVideoInfo, VideoFormat } from "@/types/video";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle, DialogTrigger } from "@/components/ui/dialog";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+import { Checkbox } from "@/components/ui/checkbox";
+
+interface DownloadConfigDialogProps {
+    selectedFormatFileType: "video+audio" | "video" | "audio" | "unknown";
+}
+
+interface BottomBarProps {
+    videoMetadata: RawVideoInfo;
+    selectedFormat: VideoFormat | undefined;
+    selectedFormatFileType: "video+audio" | "video" | "audio" | "unknown";
+    selectedVideoFormat: VideoFormat | undefined;
+    selectedAudioFormats: VideoFormat[] | undefined;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+}
+
+function DownloadConfigDialog({ selectedFormatFileType }: DownloadConfigDialogProps) {
+    const activeDownloadModeTab = useDownloaderPageStatesStore((state) => state.activeDownloadModeTab);
+    const activeDownloadConfigurationTab = useDownloaderPageStatesStore((state) => state.activeDownloadConfigurationTab);
+    const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
+    const selectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableVideoFormat);
+    const selectedCombinableAudioFormats = useDownloaderPageStatesStore((state) => state.selectedCombinableAudioFormats);
+    const downloadConfiguration = useDownloaderPageStatesStore((state) => state.downloadConfiguration);
+    const setActiveDownloadConfigurationTab = useDownloaderPageStatesStore((state) => state.setActiveDownloadConfigurationTab);
+    const setDownloadConfigurationKey = useDownloaderPageStatesStore((state) => state.setDownloadConfigurationKey);
+
+    const embedVideoMetadata = useSettingsPageStatesStore(state => state.settings.embed_video_metadata);
+    const embedAudioMetadata = useSettingsPageStatesStore(state => state.settings.embed_audio_metadata);
+    const embedVideoThumbnail = useSettingsPageStatesStore(state => state.settings.embed_video_thumbnail);
+    const embedAudioThumbnail = useSettingsPageStatesStore(state => state.settings.embed_audio_thumbnail);
+    const useCustomCommands = useSettingsPageStatesStore(state => state.settings.use_custom_commands);
+    const customCommands = useSettingsPageStatesStore(state => state.settings.custom_commands);
+
+    const isCombineableAudioSelected = selectedCombinableAudioFormats && selectedCombinableAudioFormats.length > 0;
+
+    return (
+        <Dialog>
+            <Tooltip>
+                <TooltipTrigger asChild>
+                    <DialogTrigger asChild>
+                        <Button
+                        variant="outline"
+                        size="icon"
+                        disabled={!selectedDownloadFormat || (activeDownloadModeTab === 'combine' && (!selectedCombinableVideoFormat || !isCombineableAudioSelected))}
+                        >
+                            <Settings2 className="size-4" />
+                        </Button>
+                    </DialogTrigger>
+                </TooltipTrigger>
+                <TooltipContent>
+                <p>Configurations</p>
+                </TooltipContent>
+            </Tooltip>
+            <DialogContent className="sm:max-w-112.5">
+                <DialogHeader>
+                    <DialogTitle>Configurations</DialogTitle>
+                    <DialogDescription>Tweak this download's configurations</DialogDescription>
+                </DialogHeader>
+                <div className="flex flex-col gap-2 max-h-75 overflow-y-scroll overflow-x-hidden no-scrollbar">
+                    <Tabs
+                    className=""
+                    value={activeDownloadConfigurationTab}
+                    onValueChange={(tab) => setActiveDownloadConfigurationTab(tab)}
+                    >
+                        <TabsList>
+                            <TabsTrigger value="options">Options</TabsTrigger>
+                            <TabsTrigger value="commands">Commands</TabsTrigger>
+                        </TabsList>
+                        <TabsContent value="options">
+                            {useCustomCommands ? (
+                            <Alert className="mt-2 mb-3">
+                                <AlertCircleIcon className="size-4 stroke-primary" />
+                                <AlertTitle className="text-sm">Options Unavailable!</AlertTitle>
+                                <AlertDescription className="text-xs">
+                                    You cannot use these options when custom commands are enabled. To use these options, disable custom commands from Settings.
+                                </AlertDescription>
+                            </Alert>
+                            ) : null}
+                            <div className="video-format">
+                                <Label className="text-xs mb-3 mt-2">Output Format ({(selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? 'Video' : selectedFormatFileType && selectedFormatFileType === 'audio' ? 'Audio' : 'Unknown'})</Label>
+                                {(selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? (
+                                    <RadioGroup
+                                    orientation="horizontal"
+                                    className="flex items-center gap-4 flex-wrap my-2"
+                                    value={downloadConfiguration.output_format ?? 'auto'}
+                                    onValueChange={(value) => setDownloadConfigurationKey('output_format', value)}
+                                    disabled={useCustomCommands}
+                                    >
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="auto" id="v-auto" />
+                                            <Label htmlFor="v-auto">Follow Settings</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="mp4" id="v-mp4" />
+                                            <Label htmlFor="v-mp4">MP4</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="webm" id="v-webm" />
+                                            <Label htmlFor="v-webm">WEBM</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="mkv" id="v-mkv" />
+                                            <Label htmlFor="v-mkv">MKV</Label>
+                                        </div>
+                                    </RadioGroup>
+                                ) : selectedFormatFileType && selectedFormatFileType === 'audio' ? (
+                                    <RadioGroup
+                                    orientation="horizontal"
+                                    className="flex items-center gap-4 flex-wrap my-2"
+                                    value={downloadConfiguration.output_format ?? 'auto'}
+                                    onValueChange={(value) => setDownloadConfigurationKey('output_format', value)}
+                                    disabled={useCustomCommands}
+                                    >
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="auto" id="a-auto" />
+                                            <Label htmlFor="a-auto">Follow Settings</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="m4a" id="a-m4a" />
+                                            <Label htmlFor="a-m4a">M4A</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="opus" id="a-opus" />
+                                            <Label htmlFor="a-opus">OPUS</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="mp3" id="a-mp3" />
+                                            <Label htmlFor="a-mp3">MP3</Label>
+                                        </div>
+                                    </RadioGroup>
+                                ) : (
+                                    <RadioGroup
+                                    orientation="horizontal"
+                                    className="flex items-center gap-4 flex-wrap my-2"
+                                    value={downloadConfiguration.output_format ?? 'auto'}
+                                    onValueChange={(value) => setDownloadConfigurationKey('output_format', value)}
+                                    disabled={useCustomCommands}
+                                    >
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="auto" id="u-auto" />
+                                            <Label htmlFor="u-auto">Follow Settings</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="mp4" id="u-mp4" />
+                                            <Label htmlFor="u-mp4">MP4</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="webm" id="u-webm" />
+                                            <Label htmlFor="u-webm">WEBM</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="mkv" id="u-mkv" />
+                                            <Label htmlFor="u-mkv">MKV</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="m4a" id="u-m4a" />
+                                            <Label htmlFor="u-m4a">M4A</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="opus" id="u-opus" />
+                                            <Label htmlFor="u-opus">OPUS</Label>
+                                        </div>
+                                        <div className="flex items-center gap-3">
+                                            <RadioGroupItem value="mp3" id="u-mp3" />
+                                            <Label htmlFor="u-mp3">MP3</Label>
+                                        </div>
+                                    </RadioGroup>
+                                )}
+                            </div>
+                            <div className="sponsorblock">
+                                <Label className="text-xs my-3">Sponsorblock Mode</Label>
+                                <RadioGroup
+                                orientation="horizontal"
+                                className="flex items-center gap-4 flex-wrap my-2"
+                                value={downloadConfiguration.sponsorblock ?? 'auto'}
+                                onValueChange={(value) => setDownloadConfigurationKey('sponsorblock', value)}
+                                disabled={useCustomCommands}
+                                >
+                                    <div className="flex items-center gap-3">
+                                        <RadioGroupItem value="auto" id="sb-auto" />
+                                        <Label htmlFor="sb-auto">Follow Settings</Label>
+                                    </div>
+                                    <div className="flex items-center gap-3">
+                                        <RadioGroupItem value="remove" id="sb-remove" />
+                                        <Label htmlFor="sb-remove">Remove</Label>
+                                    </div>
+                                    <div className="flex items-center gap-3">
+                                        <RadioGroupItem value="mark" id="sb-mark" />
+                                        <Label htmlFor="sb-mark">Mark</Label>
+                                    </div>
+                                </RadioGroup>
+                            </div>
+                            <div className="embeding-options">
+                                <Label className="text-xs my-3">Embedding Options</Label>
+                                <div className="flex items-center space-x-2 mt-3">
+                                    <Switch
+                                    id="embed-metadata"
+                                    checked={downloadConfiguration.embed_metadata !== null ? downloadConfiguration.embed_metadata : (selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? embedVideoMetadata : selectedFormatFileType && selectedFormatFileType === 'audio' ? embedAudioMetadata : false}
+                                    onCheckedChange={(checked) => setDownloadConfigurationKey('embed_metadata', checked)}
+                                    disabled={useCustomCommands}
+                                    />
+                                    <Label htmlFor="embed-metadata">Embed Metadata</Label>
+                                </div>
+                                <div className="flex items-center space-x-2 mt-3">
+                                    <Switch
+                                    id="embed-thumbnail"
+                                    checked={downloadConfiguration.embed_thumbnail !== null ? downloadConfiguration.embed_thumbnail : (selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? embedVideoThumbnail : selectedFormatFileType && selectedFormatFileType === 'audio' ? embedAudioThumbnail : false}
+                                    onCheckedChange={(checked) => setDownloadConfigurationKey('embed_thumbnail', checked)}
+                                    disabled={useCustomCommands}
+                                    />
+                                    <Label htmlFor="embed-thumbnail">Embed Thumbnail</Label>
+                                    <div className="flex items-center gap-3 ml-4">
+                                        <Checkbox
+                                        id="square-crop-thumbnail"
+                                        checked={downloadConfiguration.square_crop_thumbnail !== null ? downloadConfiguration.square_crop_thumbnail : false}
+                                        onCheckedChange={(checked) => setDownloadConfigurationKey('square_crop_thumbnail', checked)}
+                                        disabled={useCustomCommands || !(downloadConfiguration.embed_thumbnail !== null ? downloadConfiguration.embed_thumbnail : (selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio')) || activeDownloadModeTab === 'combine' ? embedVideoThumbnail : selectedFormatFileType && selectedFormatFileType === 'audio' ? embedAudioThumbnail : false)}
+                                        />
+                                        <Label htmlFor="square-crop-thumbnail">Square Crop</Label>
+                                    </div>
+                                </div>
+                            </div>
+                        </TabsContent>
+                        <TabsContent value="commands">
+                            {!useCustomCommands ? (
+                            <Alert className="mt-2 mb-3">
+                                <AlertCircleIcon className="size-4 stroke-primary" />
+                                <AlertTitle className="text-sm">Enable Custom Commands!</AlertTitle>
+                                <AlertDescription className="text-xs">
+                                    To run custom commands for downloads, please enable it from the Settings.
+                                </AlertDescription>
+                            </Alert>
+                            ) : null}
+                            <div className="custom-commands">
+                                <Label className="text-xs mb-3 mt-2">Run Custom Command</Label>
+                                {customCommands.length === 0 ? (
+                                    <p className="text-sm text-muted-foreground">NO CUSTOM COMMAND TEMPLATE ADDED YET!</p>
+                                ) : (
+                                    <RadioGroup
+                                    orientation="vertical"
+                                    className="flex flex-col gap-2 my-2"
+                                    disabled={!useCustomCommands}
+                                    value={downloadConfiguration.custom_command}
+                                    onValueChange={(value) => setDownloadConfigurationKey('custom_command', value)}
+                                    >
+                                        {customCommands.map((command) => (
+                                            <div className="flex items-center gap-3" key={command.id}>
+                                                <RadioGroupItem value={command.id} id={`cmd-${command.id}`} />
+                                                <Label htmlFor={`cmd-${command.id}`}>{command.label}</Label>
+                                            </div>
+                                        ))}
+                                    </RadioGroup>
+                                )}
+                            </div>
+                        </TabsContent>
+                    </Tabs>
+                </div>
+            </DialogContent>
+        </Dialog>
+    );
+}
+
+export function BottomBar({ videoMetadata, selectedFormat, selectedFormatFileType, selectedVideoFormat, selectedAudioFormats, containerRef }: BottomBarProps) {
+    const { startDownload } = useAppContext();
+    console.log(selectedAudioFormats);
+    const activeDownloadModeTab = useDownloaderPageStatesStore((state) => state.activeDownloadModeTab);
+    const isStartingDownload = useDownloaderPageStatesStore((state) => state.isStartingDownload);
+    const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
+    const selectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableVideoFormat);
+    const selectedCombinableAudioFormats = useDownloaderPageStatesStore((state) => state.selectedCombinableAudioFormats);
+    const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
+    const selectedPlaylistVideos = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideos);
+    const downloadConfiguration = useDownloaderPageStatesStore((state) => state.downloadConfiguration);
+    const setActiveDownloadConfigurationTab = useDownloaderPageStatesStore((state) => state.setActiveDownloadConfigurationTab);
+    const setIsStartingDownload = useDownloaderPageStatesStore((state) => state.setIsStartingDownload);
+
+    const videoFormat = useSettingsPageStatesStore(state => state.settings.video_format);
+    const audioFormat = useSettingsPageStatesStore(state => state.settings.audio_format);
+    const useSponsorblock = useSettingsPageStatesStore(state => state.settings.use_sponsorblock);
+    const useCustomCommands = useSettingsPageStatesStore(state => state.settings.use_custom_commands);
+
+    const bottomBarRef = useRef<HTMLDivElement>(null);
+
+    const isPlaylist = videoMetadata._type === 'playlist';
+    const isMultiplePlaylistItems = isPlaylist && selectedPlaylistVideos.length > 1;
+    const isCombineableAudioSelected = selectedCombinableAudioFormats && selectedCombinableAudioFormats.length > 0 && selectedAudioFormats && selectedAudioFormats.length > 0;
+    const isMultipleCombineableAudioSelected = selectedCombinableAudioFormats && selectedCombinableAudioFormats.length > 1 && selectedAudioFormats && selectedAudioFormats.length > 1;
+
+    let selectedFormatExtensionMsg = 'Auto - unknown';
+    if (activeDownloadModeTab === 'combine') {
+        if (downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') {
+            selectedFormatExtensionMsg = `Combined - ${downloadConfiguration.output_format.toUpperCase()}`;
+        } else if (videoFormat !== 'auto') {
+            selectedFormatExtensionMsg = `Combined - ${videoFormat.toUpperCase()}`;
+        } else if (isCombineableAudioSelected && selectedVideoFormat?.ext) {
+            if (isMultipleCombineableAudioSelected) {
+                selectedFormatExtensionMsg = `Combined - ${selectedVideoFormat.ext.toUpperCase()} + ${selectedAudioFormats.length} Audio`;
+            } else {
+                selectedFormatExtensionMsg = `Combined - ${selectedVideoFormat.ext.toUpperCase()} + ${selectedAudioFormats[0].ext.toUpperCase()}`;
+            }
+        } else {
+            selectedFormatExtensionMsg = `Combined - unknown`;
+        }
+    } else if (selectedFormat?.ext) {
+        if ((selectedFormatFileType === 'video+audio' || selectedFormatFileType === 'video') && ((downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') || videoFormat !== 'auto')) {
+            selectedFormatExtensionMsg = `Forced - ${(downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') ? downloadConfiguration.output_format.toUpperCase() : videoFormat.toUpperCase()}`;
+        } else if (selectedFormatFileType === 'audio' && ((downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') || audioFormat !== 'auto')) {
+            selectedFormatExtensionMsg = `Forced - ${(downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') ? downloadConfiguration.output_format.toUpperCase() : audioFormat.toUpperCase()}`;
+        } else if (selectedFormatFileType === 'unknown' && downloadConfiguration.output_format && downloadConfiguration.output_format !== 'auto') {
+            selectedFormatExtensionMsg = `Forced - ${downloadConfiguration.output_format.toUpperCase()}`;
+        } else {
+            selectedFormatExtensionMsg = `Auto - ${selectedFormat.ext.toUpperCase()}`;
+        }
+    }
+
+    let selectedFormatResolutionMsg = 'unknown';
+    let totalTbr = 0;
+    if (activeDownloadModeTab === 'combine') {
+        if (isCombineableAudioSelected) {
+            if (isMultipleCombineableAudioSelected) {
+                const totalAudioTbr = selectedAudioFormats.reduce((acc, format) => acc + (format.tbr ?? 0), 0);
+                totalTbr = (selectedVideoFormat?.tbr ?? 0) + totalAudioTbr;
+                selectedFormatResolutionMsg = `${selectedVideoFormat?.resolution ?? 'unknown'} + ${formatBitrate(totalAudioTbr)}`;
+            } else {
+                totalTbr = (selectedVideoFormat?.tbr ?? 0) + (selectedAudioFormats && selectedAudioFormats[0].tbr ? selectedAudioFormats[0].tbr : 0);
+                selectedFormatResolutionMsg = `${selectedVideoFormat?.resolution ?? 'unknown'} + ${selectedAudioFormats && selectedAudioFormats[0].tbr ? formatBitrate(selectedAudioFormats[0].tbr) : 'unknown'}`;
+            }
+        } else {
+            totalTbr = selectedVideoFormat?.tbr ?? 0;
+            selectedFormatResolutionMsg = `${selectedVideoFormat?.resolution ?? 'unknown'} + unknown`;
+        }
+    } else if (selectedFormat?.resolution) {
+        totalTbr = selectedFormat.tbr ?? 0;
+        selectedFormatResolutionMsg = selectedFormat.resolution;
+    }
+
+    let selectedFormatDynamicRangeMsg = '';
+    if (activeDownloadModeTab === 'combine') {
+        selectedFormatDynamicRangeMsg = selectedVideoFormat?.dynamic_range && selectedVideoFormat.dynamic_range !== 'SDR' && selectedVideoFormat.dynamic_range !== 'auto' ? selectedVideoFormat.dynamic_range : '';
+    } else if (selectedFormat?.dynamic_range && selectedFormat.dynamic_range !== 'SDR' && selectedFormat.dynamic_range !== 'auto') {
+        selectedFormatDynamicRangeMsg = selectedFormat.dynamic_range;
+    }
+
+    let selectedFormatFileSizeMsg = 'unknown filesize';
+    let totalFilesize = 0;
+    if (activeDownloadModeTab === 'combine') {
+        if (isCombineableAudioSelected) {
+            if (isMultipleCombineableAudioSelected) {
+                totalFilesize = (selectedVideoFormat?.filesize_approx ?? 0) + selectedAudioFormats.reduce((acc, format) => acc + (format.filesize_approx ?? 0), 0);
+                selectedFormatFileSizeMsg = totalFilesize > 0 ? formatFileSize(totalFilesize) : 'unknown filesize';
+            } else {
+                totalFilesize = (selectedVideoFormat?.filesize_approx ?? 0) + (selectedAudioFormats && selectedAudioFormats[0].filesize_approx ? selectedAudioFormats[0].filesize_approx : 0);
+                selectedFormatFileSizeMsg = (selectedVideoFormat?.filesize_approx && selectedAudioFormats && selectedAudioFormats[0].filesize_approx) ? formatFileSize(selectedVideoFormat.filesize_approx + selectedAudioFormats[0].filesize_approx) : 'unknown filesize';
+            }
+        } else {
+            totalFilesize = selectedVideoFormat?.filesize_approx ?? 0;
+            selectedFormatFileSizeMsg = selectedVideoFormat?.filesize_approx ? formatFileSize(selectedVideoFormat.filesize_approx) : 'unknown filesize';
+        }
+    } else if (selectedFormat?.filesize_approx) {
+        totalFilesize = selectedFormat.filesize_approx;
+        selectedFormatFileSizeMsg = formatFileSize(selectedFormat.filesize_approx);
+    }
+
+    let selectedFormatFinalMsg = '';
+    if (activeDownloadModeTab === 'combine') {
+        if (selectedCombinableVideoFormat && selectedCombinableAudioFormats.length > 0) {
+            selectedFormatFinalMsg = `${selectedFormatExtensionMsg} (${selectedFormatResolutionMsg}) ${selectedFormatDynamicRangeMsg} ${selectedSubtitles.length > 0 ? `• ESUB` : ''} ${useSponsorblock || (downloadConfiguration.sponsorblock && downloadConfiguration.sponsorblock !== 'auto') ? `• SPBLOCK` : ''} • ${selectedFormatFileSizeMsg}`;
+        } else {
+            selectedFormatFinalMsg = `Choose a video and audio streams to combine`;
+        }
+    } else {
+        if (selectedFormat) {
+            selectedFormatFinalMsg = `${selectedFormatExtensionMsg} (${selectedFormatResolutionMsg}) ${selectedFormatDynamicRangeMsg} ${selectedSubtitles.length > 0 ? `• ESUB` : ''} ${useSponsorblock || (downloadConfiguration.sponsorblock && downloadConfiguration.sponsorblock !== 'auto') ? `• SPBLOCK` : ''} • ${selectedFormatFileSizeMsg}`;
+        } else {
+            selectedFormatFinalMsg = `Select a stream to download`;
+        }
+    }
+
+    useEffect(() => {
+        const updateBottomBarWidth = (): void => {
+            if (containerRef.current && bottomBarRef.current) {
+                bottomBarRef.current.style.width = `${containerRef.current.offsetWidth}px`;
+                const containerRect = containerRef.current.getBoundingClientRect();
+                bottomBarRef.current.style.left = `${containerRect.left}px`;
+            }
+        };
+        updateBottomBarWidth();
+        const resizeObserver = new ResizeObserver(() => {
+            updateBottomBarWidth();
+        });
+        if (containerRef.current) {
+            resizeObserver.observe(containerRef.current);
+        }
+        window.addEventListener('resize', updateBottomBarWidth);
+        window.addEventListener('scroll', updateBottomBarWidth);
+        return () => {
+            resizeObserver.disconnect();
+            window.removeEventListener('resize', updateBottomBarWidth);
+            window.removeEventListener('scroll', updateBottomBarWidth);
+        };
+    }, []);
+
+    useEffect(() => {
+        useCustomCommands ? setActiveDownloadConfigurationTab('commands') : setActiveDownloadConfigurationTab('options');
+    }, []);
+
+    return (
+        <div className="flex justify-between items-center gap-2 fixed bottom-0 right-0 p-4 w-full bg-background rounded-t-lg border-t border-border z-20" ref={bottomBarRef}>
+            <div className="flex items-center gap-4">
+                <div className="flex justify-center items-center p-3 rounded-md border border-border">
+                    {activeDownloadModeTab === 'combine' && (
+                        <Video className="w-4 h-4 stroke-primary" />
+                    )}
+                    {activeDownloadModeTab !== 'combine' && selectedFormatFileType && (selectedFormatFileType === 'video' || selectedFormatFileType === 'video+audio') && (
+                        <Video className="w-4 h-4 stroke-primary" />
+                    )}
+                    {activeDownloadModeTab !== 'combine' && selectedFormatFileType && selectedFormatFileType === 'audio' && (
+                        <Music className="w-4 h-4 stroke-primary" />
+                    )}
+                    {activeDownloadModeTab !== 'combine' && ((!selectedFormatFileType) || (selectedFormatFileType && selectedFormatFileType !== 'video' && selectedFormatFileType !== 'audio' && selectedFormatFileType !== 'video+audio')) && (
+                        <File className="w-4 h-4 stroke-primary" />
+                    )}
+                </div>
+                <div className="flex flex-col gap-1">
+                    <span className="text-sm text-nowrap max-w-120 xl:max-w-200 overflow-hidden text-ellipsis">{videoMetadata._type === 'video' ? videoMetadata.title : videoMetadata._type === 'playlist' ? selectedPlaylistVideos.length === 1 ? videoMetadata.entries[Number(selectedPlaylistVideos[0]) - 1].title : `${selectedPlaylistVideos.length} Items` : 'Unknown' }</span>
+                    <span className="text-xs text-muted-foreground">{selectedFormatFinalMsg}</span>
+                </div>
+            </div>
+            <div className="flex items-center gap-2">
+                <DownloadConfigDialog selectedFormatFileType={selectedFormatFileType} />
+                <Button
+                onClick={async () => {
+                    setIsStartingDownload(true);
+                    try {
+                        if (videoMetadata._type === 'playlist') {
+                            await startDownload({
+                                url: videoMetadata.original_url,
+                                selectedFormat: activeDownloadModeTab === 'combine' ? `${selectedCombinableVideoFormat}+${selectedCombinableAudioFormats.join('+')}` : selectedDownloadFormat,
+                                downloadConfig: downloadConfiguration,
+                                selectedSubtitles: selectedSubtitles.length > 0 ? selectedSubtitles.join(',') : null,
+                                playlistItems: selectedPlaylistVideos.sort((a, b) => Number(a) - Number(b)).join(','),
+                                overrideOptions: isMultiplePlaylistItems ? {
+                                    filesize: totalFilesize > 0 ? totalFilesize : undefined,
+                                    tbr: totalTbr > 0 ? totalTbr : undefined,
+                                } : isMultipleCombineableAudioSelected ? {
+                                    filesize: totalFilesize > 0 ? totalFilesize : undefined,
+                                    tbr: totalTbr > 0 ? totalTbr : undefined,
+                                } : undefined
+                            });
+                        } else if (videoMetadata._type === 'video') {
+                            await startDownload({
+                                url: videoMetadata.webpage_url,
+                                selectedFormat: activeDownloadModeTab === 'combine' ? `${selectedCombinableVideoFormat}+${selectedCombinableAudioFormats.join('+')}` : selectedDownloadFormat === 'best' ? videoMetadata.requested_downloads[0].format_id : selectedDownloadFormat,
+                                downloadConfig: downloadConfiguration,
+                                selectedSubtitles: selectedSubtitles.length > 0 ? selectedSubtitles.join(',') : null,
+                                overrideOptions: isMultipleCombineableAudioSelected ? {
+                                    filesize: totalFilesize > 0 ? totalFilesize : undefined,
+                                    tbr: totalTbr > 0 ? totalTbr : undefined,
+                                } : undefined
+                            });
+                        }
+                        // toast({
+                        //     title: 'Download Initiated',
+                        //     description: 'Download initiated, it will start shortly.',
+                        // });
+                    } catch (error) {
+                        console.error('Download failed to start:', error);
+                        toast.error("Failed to Start Download", {
+                            description: "There was an error initiating the download."
+                        });
+                    } finally {
+                        setIsStartingDownload(false);
+                    }
+                }}
+                disabled={isStartingDownload || !selectedDownloadFormat || (activeDownloadModeTab === 'combine' && (!selectedCombinableVideoFormat || !isCombineableAudioSelected)) || (useCustomCommands && !downloadConfiguration.custom_command)}
+                >
+                    {isStartingDownload ? (
+                        <>
+                            <Loader2 className="h-4 w-4 animate-spin" />
+                            Starting Download
+                        </>
+                    ) : (
+                        'Start Download'
+                    )}
+                </Button>
+            </div>
+        </div>
+    );
+}

src/components/pages/downloader/playlistDownloader.tsx

@@ -0,0 +1,406 @@
+import { useDownloaderPageStatesStore } from "@/services/store";
+import { DownloadCloud, Info, ListVideo, AlertCircleIcon } from "lucide-react";
+import { FormatSelectionGroup, FormatSelectionGroupItem } from "@/components/custom/formatSelectionGroup";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { RawVideoInfo, VideoFormat } from "@/types/video";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { PlaylistToggleGroup, PlaylistToggleGroupItem } from "@/components/custom/playlistToggleGroup";
+import { getMergedBestFormat } from "@/utils";
+import { Switch } from "@/components/ui/switch";
+import { FormatToggleGroup, FormatToggleGroupItem } from "@/components/custom/formatToggleGroup";
+
+interface PlaylistPreviewSelectionProps {
+    videoMetadata: RawVideoInfo;
+}
+
+interface SelectivePlaylistDownloadProps {
+    videoMetadata: RawVideoInfo;
+    audioOnlyFormats: VideoFormat[] | undefined;
+    videoOnlyFormats: VideoFormat[] | undefined;
+    combinedFormats: VideoFormat[] | undefined;
+    qualityPresetFormats: VideoFormat[] | undefined;
+    subtitleLanguages: { code: string; lang: string }[];
+}
+
+interface CombinedPlaylistDownloadProps {
+    audioOnlyFormats: VideoFormat[] | undefined;
+    videoOnlyFormats: VideoFormat[] | undefined;
+    subtitleLanguages: { code: string; lang: string }[];
+}
+
+interface PlaylistDownloaderProps {
+    videoMetadata: RawVideoInfo;
+    audioOnlyFormats: VideoFormat[] | undefined;
+    videoOnlyFormats: VideoFormat[] | undefined;
+    combinedFormats: VideoFormat[] | undefined;
+    qualityPresetFormats: VideoFormat[] | undefined;
+    subtitleLanguages: { code: string; lang: string }[];
+}
+
+function PlaylistPreviewSelection({ videoMetadata }: PlaylistPreviewSelectionProps) {
+    const selectedPlaylistVideos = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideos);
+    const setSelectedDownloadFormat = useDownloaderPageStatesStore((state) => state.setSelectedDownloadFormat);
+    const setSelectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.setSelectedCombinableVideoFormat);
+    const setSelectedCombinableAudioFormats = useDownloaderPageStatesStore((state) => state.setSelectedCombinableAudioFormats);
+    const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
+    const setSelectedPlaylistVideos = useDownloaderPageStatesStore((state) => state.setSelectedPlaylistVideos);
+    const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
+
+    const totalVideos = videoMetadata.entries.filter((entry) => entry).length;
+    const allVideoIndices = videoMetadata.entries.filter((entry) => entry).map((entry) => entry.playlist_index.toString());
+
+    return (
+        <div className="flex flex-col w-full pr-4">
+            <div className="flex items-center justify-between mb-4 mt-2">
+                <h3 className="text-sm flex items-center gap-2">
+                    <ListVideo className="w-4 h-4" />
+                    <span>Playlist ({videoMetadata.entries[0].n_entries})</span>
+                </h3>
+                <div className="flex items-center space-x-2">
+                    <Switch
+                    id="select-all-videos"
+                    checked={selectedPlaylistVideos.length === totalVideos && totalVideos > 0}
+                    onCheckedChange={(checked) => {
+                        if (checked) {
+                            setSelectedPlaylistVideos(allVideoIndices);
+                        } else {
+                            setSelectedPlaylistVideos(["1"]);
+                        }
+                        setSelectedDownloadFormat('best');
+                        setSelectedSubtitles([]);
+                        setSelectedCombinableVideoFormat('');
+                        setSelectedCombinableAudioFormats([]);
+                        resetDownloadConfiguration();
+                    }}
+                    disabled={totalVideos <= 1}
+                    />
+                </div>
+            </div>
+            <div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
+                <h2 className="mb-1">{videoMetadata.entries[0].playlist_title ? videoMetadata.entries[0].playlist_title : 'UNTITLED'}</h2>
+                <p className="text-muted-foreground text-xs mb-4">{videoMetadata.entries[0].playlist_creator || videoMetadata.entries[0].playlist_channel || videoMetadata.entries[0].playlist_uploader || 'unknown'}</p>
+                <PlaylistToggleGroup
+                    className="mb-2"
+                    type="multiple"
+                    value={selectedPlaylistVideos}
+                    onValueChange={(value: string[]) => {
+                        if (value.length > 0) {
+                            setSelectedPlaylistVideos(value);
+                            setSelectedDownloadFormat('best');
+                            setSelectedSubtitles([]);
+                            setSelectedCombinableVideoFormat('');
+                            setSelectedCombinableAudioFormats([]);
+                            resetDownloadConfiguration();
+                        }
+                    }}
+                >
+                    {videoMetadata.entries.map((entry) => entry ? (
+                        <PlaylistToggleGroupItem
+                            key={entry.playlist_index}
+                            value={entry.playlist_index.toString()}
+                            video={entry}
+                        />
+                    ) : null)}
+                </PlaylistToggleGroup>
+                <div className="flex items-center text-muted-foreground">
+                    <Info className="w-3 h-3 mr-2" />
+                    <span className="text-xs">Extracted from {videoMetadata.entries[0].extractor ? videoMetadata.entries[0].extractor.charAt(0).toUpperCase() + videoMetadata.entries[0].extractor.slice(1) : 'Unknown'}</span>
+                </div>
+                <div className="spacer mb-12"></div>
+            </div>
+        </div>
+    );
+}
+
+function SelectivePlaylistDownload({ videoMetadata, audioOnlyFormats, videoOnlyFormats, combinedFormats, qualityPresetFormats, subtitleLanguages }: SelectivePlaylistDownloadProps) {
+    const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
+    const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
+    const selectedPlaylistVideos = useDownloaderPageStatesStore((state) => state.selectedPlaylistVideos);
+    const setSelectedDownloadFormat = useDownloaderPageStatesStore((state) => state.setSelectedDownloadFormat);
+    const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
+    const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
+
+    return (
+        <div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
+            {subtitleLanguages && subtitleLanguages.length > 0 && (
+                <ToggleGroup
+                type="multiple"
+                variant="outline"
+                className="flex flex-col items-start gap-2 mb-2"
+                value={selectedSubtitles}
+                onValueChange={(value) => setSelectedSubtitles(value)}
+                // disabled={selectedFormat?.ext !== 'mp4' && selectedFormat?.ext !== 'mkv' && selectedFormat?.ext !== 'webm'}
+                >
+                    <p className="text-xs">Subtitle Languages</p>
+                    <div className="flex gap-2 flex-wrap items-center">
+                        {subtitleLanguages.map((lang) => {
+                            const hasAutoSubSelected = selectedSubtitles.some(code => code.endsWith('-orig'));
+                            const hasNormalSubSelected = selectedSubtitles.some(code => !code.endsWith('-orig'));
+                            const isDisabled = (hasAutoSubSelected && !lang.code.endsWith('-orig')) || (hasNormalSubSelected && lang.code.endsWith('-orig'));
+
+                            return (
+                                <ToggleGroupItem
+                                className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
+                                value={lang.code}
+                                size="sm"
+                                aria-label={lang.lang}
+                                key={lang.code}
+                                disabled={isDisabled}>
+                                    {lang.lang}
+                                </ToggleGroupItem>
+                            );
+                        })}
+                    </div>
+                </ToggleGroup>
+            )}
+            <FormatSelectionGroup
+            value={selectedDownloadFormat}
+            onValueChange={(value) => {
+                setSelectedDownloadFormat(value);
+                // const currentlySelectedFormat = value === 'best' ? videoMetadata?.entries[Number(value) - 1].requested_downloads[0] : allFilteredFormats.find((format) => format.format_id === value);
+                // if (currentlySelectedFormat?.ext !== 'mp4' && currentlySelectedFormat?.ext !== 'mkv' && currentlySelectedFormat?.ext !== 'webm') {
+                //     setSelectedSubtitles([]);
+                // }
+                resetDownloadConfiguration();
+            }}
+            >
+                <p className="text-xs">Suggested</p>
+                <div className="">
+                    <FormatSelectionGroupItem
+                    key="best"
+                    value="best"
+                    format={getMergedBestFormat(videoMetadata.entries, selectedPlaylistVideos) as VideoFormat}
+                    />
+                </div>
+                {qualityPresetFormats && qualityPresetFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Quality Presets</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {qualityPresetFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+                {audioOnlyFormats && audioOnlyFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Audio</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {audioOnlyFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+                {videoOnlyFormats && videoOnlyFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Video {videoOnlyFormats.every(format => format.acodec === 'none') ? '(no audio)' : ''}</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {videoOnlyFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+                {combinedFormats && combinedFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Video</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {combinedFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+            </FormatSelectionGroup>
+            <div className="spacer mb-12"></div>
+        </div>
+    );
+}
+
+function CombinedPlaylistDownload({ audioOnlyFormats, videoOnlyFormats, subtitleLanguages }: CombinedPlaylistDownloadProps) {
+    const selectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableVideoFormat);
+    const selectedCombinableAudioFormats = useDownloaderPageStatesStore((state) => state.selectedCombinableAudioFormats);
+    const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
+    const setSelectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.setSelectedCombinableVideoFormat);
+    const setSelectedCombinableAudioFormats = useDownloaderPageStatesStore((state) => state.setSelectedCombinableAudioFormats);
+    const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
+    const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
+
+    return (
+        <div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
+            {audioOnlyFormats && audioOnlyFormats.length > 0 && videoOnlyFormats && videoOnlyFormats.length > 0 && subtitleLanguages && subtitleLanguages.length > 0 && (
+                <ToggleGroup
+                type="multiple"
+                variant="outline"
+                className="flex flex-col items-start gap-2 mb-2"
+                value={selectedSubtitles}
+                onValueChange={(value) => setSelectedSubtitles(value)}
+                >
+                    <p className="text-xs">Subtitle Languages</p>
+                    <div className="flex gap-2 flex-wrap items-center">
+                        {subtitleLanguages.map((lang) => {
+                            const hasAutoSubSelected = selectedSubtitles.some(code => code.endsWith('-orig'));
+                            const hasNormalSubSelected = selectedSubtitles.some(code => !code.endsWith('-orig'));
+                            const isDisabled = (hasAutoSubSelected && !lang.code.endsWith('-orig')) || (hasNormalSubSelected && lang.code.endsWith('-orig'));
+
+                            return (
+                                <ToggleGroupItem
+                                className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
+                                value={lang.code}
+                                size="sm"
+                                aria-label={lang.lang}
+                                key={lang.code}
+                                disabled={isDisabled}>
+                                    {lang.lang}
+                                </ToggleGroupItem>
+                            );
+                        })}
+                    </div>
+                </ToggleGroup>
+            )}
+            <FormatToggleGroup
+            type="multiple"
+            variant="outline"
+            className="mb-2"
+            value={selectedCombinableAudioFormats}
+            onValueChange={(value: string[]) => {
+                setSelectedCombinableAudioFormats(value);
+                resetDownloadConfiguration();
+            }}
+            >
+                {videoOnlyFormats && videoOnlyFormats.length > 0 && audioOnlyFormats && audioOnlyFormats.length > 0 && (
+                    <>
+                        <p className="text-xs">Audio</p>
+                        <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                            {audioOnlyFormats.map((format) => (
+                                <FormatToggleGroupItem
+                                key={format.format_id}
+                                value={format.format_id}
+                                format={format}
+                                />
+                            ))}
+                        </div>
+                    </>
+                )}
+            </FormatToggleGroup>
+            <FormatSelectionGroup
+            value={selectedCombinableVideoFormat}
+            onValueChange={(value) => {
+                setSelectedCombinableVideoFormat(value);
+                resetDownloadConfiguration();
+            }}
+            >
+                {audioOnlyFormats && audioOnlyFormats.length > 0 && videoOnlyFormats && videoOnlyFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Video</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {videoOnlyFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+            </FormatSelectionGroup>
+            {(!videoOnlyFormats || videoOnlyFormats.length === 0 || !audioOnlyFormats || audioOnlyFormats.length === 0) && (
+                <Alert>
+                    <AlertCircleIcon className="size-4 stroke-primary" />
+                    <AlertTitle>Unable to use Combine Mode!</AlertTitle>
+                    <AlertDescription>
+                        Cannot use combine mode for this video as it does not have both audio and video formats available. Use Selective Mode or try another video.
+                    </AlertDescription>
+                </Alert>
+            )}
+            <div className="spacer mb-12"></div>
+        </div>
+    );
+}
+
+export function PlaylistDownloader({ videoMetadata, audioOnlyFormats, videoOnlyFormats, combinedFormats, qualityPresetFormats, subtitleLanguages }: PlaylistDownloaderProps) {
+    const activeDownloadModeTab = useDownloaderPageStatesStore((state) => state.activeDownloadModeTab);
+    const setActiveDownloadModeTab = useDownloaderPageStatesStore((state) => state.setActiveDownloadModeTab);
+    const playlistPanelSizes = useDownloaderPageStatesStore((state) => state.playlistPanelSizes);
+    const setPlaylistPanelSizes = useDownloaderPageStatesStore((state) => state.setPlaylistPanelSizes);
+    const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
+
+    return (
+        <div className="flex">
+            <ResizablePanelGroup
+            direction="horizontal"
+            className="w-full"
+            onLayout={(sizes) => setPlaylistPanelSizes(sizes)}
+            >
+                <ResizablePanel
+                defaultSize={playlistPanelSizes[0]}
+                >
+                    <PlaylistPreviewSelection videoMetadata={videoMetadata} />
+                </ResizablePanel>
+                <ResizableHandle />
+                <ResizablePanel
+                defaultSize={playlistPanelSizes[1]}
+                >
+                    <div className="flex flex-col w-full pl-4">
+                        <Tabs
+                        className=""
+                        value={activeDownloadModeTab}
+                        onValueChange={(tab) => {
+                            setActiveDownloadModeTab(tab);
+                            resetDownloadConfiguration();
+                        }}
+                        >
+                            <div className="flex items-center justify-between">
+                                <h3 className="text-sm flex items-center gap-2">
+                                    <DownloadCloud className="w-4 h-4" />
+                                    <span>Download Options</span>
+                                </h3>
+                                <TabsList>
+                                    <TabsTrigger value="selective">Selective</TabsTrigger>
+                                    <TabsTrigger value="combine">Combine</TabsTrigger>
+                                </TabsList>
+                            </div>
+                            <TabsContent value="selective">
+                                <SelectivePlaylistDownload
+                                videoMetadata={videoMetadata}
+                                audioOnlyFormats={audioOnlyFormats}
+                                videoOnlyFormats={videoOnlyFormats}
+                                combinedFormats={combinedFormats}
+                                qualityPresetFormats={qualityPresetFormats}
+                                subtitleLanguages={subtitleLanguages}
+                                />
+                            </TabsContent>
+                            <TabsContent value="combine">
+                                <CombinedPlaylistDownload
+                                audioOnlyFormats={audioOnlyFormats}
+                                videoOnlyFormats={videoOnlyFormats}
+                                subtitleLanguages={subtitleLanguages}
+                                />
+                            </TabsContent>
+                        </Tabs>
+                    </div>
+                </ResizablePanel>
+            </ResizablePanelGroup>
+        </div>
+    );
+}

src/components/pages/downloader/videoDownloader.tsx

@@ -0,0 +1,383 @@
+import clsx from "clsx";
+import { ProxyImage } from "@/components/custom/proxyImage";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Separator } from "@/components/ui/separator";
+import { useDownloaderPageStatesStore } from "@/services/store";
+import { formatBitrate, formatDurationString, formatReleaseDate, formatYtStyleCount, isObjEmpty } from "@/utils";
+import { Calendar, Clock, DownloadCloud, Eye, Info, ThumbsUp, AlertCircleIcon } from "lucide-react";
+import { FormatSelectionGroup, FormatSelectionGroupItem } from "@/components/custom/formatSelectionGroup";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import { RawVideoInfo, VideoFormat } from "@/types/video";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from "@/components/ui/resizable";
+import { FormatToggleGroup, FormatToggleGroupItem } from "@/components/custom/formatToggleGroup";
+
+interface VideoPreviewProps {
+    videoMetadata: RawVideoInfo;
+}
+
+interface SelectiveVideoDownloadProps {
+    videoMetadata: RawVideoInfo;
+    audioOnlyFormats: VideoFormat[] | undefined;
+    videoOnlyFormats: VideoFormat[] | undefined;
+    combinedFormats: VideoFormat[] | undefined;
+    qualityPresetFormats: VideoFormat[] | undefined;
+    subtitleLanguages: { code: string; lang: string }[];
+}
+
+interface CombinedVideoDownloadProps {
+    audioOnlyFormats: VideoFormat[] | undefined;
+    videoOnlyFormats: VideoFormat[] | undefined;
+    subtitleLanguages: { code: string; lang: string }[];
+}
+
+interface VideoDownloaderProps {
+    videoMetadata: RawVideoInfo;
+    audioOnlyFormats: VideoFormat[] | undefined;
+    videoOnlyFormats: VideoFormat[] | undefined;
+    combinedFormats: VideoFormat[] | undefined;
+    qualityPresetFormats: VideoFormat[] | undefined;
+    subtitleLanguages: { code: string; lang: string }[];
+}
+
+function VideoPreview({ videoMetadata }: VideoPreviewProps) {
+    return (
+        <div className="flex flex-col w-full pr-4">
+            <h3 className="text-sm mb-4 mt-2 flex items-center gap-2">
+                <Info className="w-4 h-4" />
+                <span>Metadata</span>
+            </h3>
+            <div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
+                <AspectRatio ratio={16 / 9} className={clsx("w-full rounded-lg overflow-hidden mb-2 border border-border", videoMetadata.aspect_ratio && videoMetadata.aspect_ratio === 0.56 && "relative")}>
+                    <ProxyImage src={videoMetadata.thumbnail} alt="thumbnail" className={clsx(videoMetadata.aspect_ratio && videoMetadata.aspect_ratio === 0.56 && "absolute h-full w-auto top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2")} />
+                </AspectRatio>
+                <h2 className="mb-1">{videoMetadata.title ? videoMetadata.title : 'UNTITLED'}</h2>
+                <p className="text-muted-foreground text-xs mb-2">{videoMetadata.creator || videoMetadata.channel || videoMetadata.uploader || 'unknown'}</p>
+                <div className="flex items-center mb-2">
+                    <span className="text-xs text-muted-foreground flex items-center pr-3"><Clock className="w-4 h-4 mr-2"/> {videoMetadata.duration_string ? formatDurationString(videoMetadata.duration_string) : 'unknown'}</span>
+                    <Separator orientation="vertical" />
+                    <span className="text-xs text-muted-foreground flex items-center px-3"><Eye className="w-4 h-4 mr-2"/> {videoMetadata.view_count ? formatYtStyleCount(videoMetadata.view_count) : 'unknown'}</span>
+                    <Separator orientation="vertical" />
+                    <span className="text-xs text-muted-foreground flex items-center pl-3"><ThumbsUp className="w-4 h-4 mr-2"/> {videoMetadata.like_count ? formatYtStyleCount(videoMetadata.like_count) : 'unknown'}</span>
+                </div>
+                <p className="text-xs text-muted-foreground flex items-center gap-2 mb-2">
+                    <Calendar className="w-4 h-4" />
+                    <span className="">{videoMetadata.upload_date ? formatReleaseDate(videoMetadata.upload_date) : 'unknown'}</span>
+                </p>
+                <div className="flex flex-wrap gap-2 text-xs mb-2">
+                    {videoMetadata.resolution && (
+                        <span className="border border-border py-1 px-2 rounded">{videoMetadata.resolution}</span>
+                    )}
+                    {videoMetadata.tbr && (
+                        <span className="border border-border py-1 px-2 rounded">{formatBitrate(videoMetadata.tbr)}</span>
+                    )}
+                    {videoMetadata.fps && (
+                        <span className="border border-border py-1 px-2 rounded">{videoMetadata.fps} fps</span>
+                    )}
+                    {videoMetadata.subtitles && !isObjEmpty(videoMetadata.subtitles) && (
+                        <span className="border border-border py-1 px-2 rounded">SUB</span>
+                    )}
+                    {videoMetadata.dynamic_range && videoMetadata.dynamic_range !== 'SDR' && (
+                        <span className="border border-border py-1 px-2 rounded">{videoMetadata.dynamic_range}</span>
+                    )}
+                </div>
+                <div className="flex items-center text-muted-foreground">
+                    <Info className="w-3 h-3 mr-2" />
+                    <span className="text-xs">Extracted from {videoMetadata.extractor ? videoMetadata.extractor.charAt(0).toUpperCase() + videoMetadata.extractor.slice(1) : 'Unknown'}</span>
+                </div>
+                <div className="spacer mb-12"></div>
+            </div>
+        </div>
+    );
+}
+
+function SelectiveVideoDownload({ videoMetadata, audioOnlyFormats, videoOnlyFormats, combinedFormats, qualityPresetFormats, subtitleLanguages }: SelectiveVideoDownloadProps) {
+    const selectedDownloadFormat = useDownloaderPageStatesStore((state) => state.selectedDownloadFormat);
+    const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
+    const setSelectedDownloadFormat = useDownloaderPageStatesStore((state) => state.setSelectedDownloadFormat);
+    const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
+    const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
+
+    return (
+        <div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
+            {subtitleLanguages && subtitleLanguages.length > 0 && (
+                <ToggleGroup
+                type="multiple"
+                variant="outline"
+                className="flex flex-col items-start gap-2 mb-2"
+                value={selectedSubtitles}
+                onValueChange={(value) => setSelectedSubtitles(value)}
+                // disabled={selectedFormat?.ext !== 'mp4' && selectedFormat?.ext !== 'mkv' && selectedFormat?.ext !== 'webm'}
+                >
+                    <p className="text-xs">Subtitle Languages</p>
+                    <div className="flex gap-2 flex-wrap items-center">
+                        {subtitleLanguages.map((lang) => {
+                            const hasAutoSubSelected = selectedSubtitles.some(code => code.endsWith('-orig'));
+                            const hasNormalSubSelected = selectedSubtitles.some(code => !code.endsWith('-orig'));
+                            const isDisabled = (hasAutoSubSelected && !lang.code.endsWith('-orig')) || (hasNormalSubSelected && lang.code.endsWith('-orig'));
+
+                            return (
+                                <ToggleGroupItem
+                                className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
+                                value={lang.code}
+                                size="sm"
+                                aria-label={lang.lang}
+                                key={lang.code}
+                                disabled={isDisabled}>
+                                    {lang.lang}
+                                </ToggleGroupItem>
+                            );
+                        })}
+                    </div>
+                </ToggleGroup>
+            )}
+            <FormatSelectionGroup
+            value={selectedDownloadFormat}
+            onValueChange={(value) => {
+                setSelectedDownloadFormat(value);
+                // const currentlySelectedFormat = value === 'best' ? videoMetadata?.requested_downloads[0] : allFilteredFormats.find((format) => format.format_id === value);
+                // if (currentlySelectedFormat?.ext !== 'mp4' && currentlySelectedFormat?.ext !== 'mkv' && currentlySelectedFormat?.ext !== 'webm') {
+                //     setSelectedSubtitles([]);
+                // }
+                resetDownloadConfiguration();
+            }}
+            >
+                <p className="text-xs">Suggested</p>
+                <div className="">
+                    <FormatSelectionGroupItem
+                    key="best"
+                    value="best"
+                    format={videoMetadata.requested_downloads[0]}
+                    />
+                </div>
+                {qualityPresetFormats && qualityPresetFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Quality Presets</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {qualityPresetFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+                {audioOnlyFormats && audioOnlyFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Audio</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {audioOnlyFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+                {videoOnlyFormats && videoOnlyFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Video {videoOnlyFormats.every(format => format.acodec === 'none') ? '(no audio)' : ''}</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {videoOnlyFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+                {combinedFormats && combinedFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Video</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {combinedFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+            </FormatSelectionGroup>
+            <div className="spacer mb-12"></div>
+        </div>
+    );
+}
+
+function CombinedVideoDownload({ audioOnlyFormats, videoOnlyFormats, subtitleLanguages }: CombinedVideoDownloadProps) {
+    const selectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.selectedCombinableVideoFormat);
+    const selectedCombinableAudioFormats = useDownloaderPageStatesStore((state) => state.selectedCombinableAudioFormats);
+    const selectedSubtitles = useDownloaderPageStatesStore((state) => state.selectedSubtitles);
+    const setSelectedCombinableVideoFormat = useDownloaderPageStatesStore((state) => state.setSelectedCombinableVideoFormat);
+    const setSelectedCombinableAudioFormats = useDownloaderPageStatesStore((state) => state.setSelectedCombinableAudioFormats);
+    const setSelectedSubtitles = useDownloaderPageStatesStore((state) => state.setSelectedSubtitles);
+    const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
+
+    return (
+        <div className="flex flex-col overflow-y-scroll max-h-[50vh] xl:max-h-[60vh] no-scrollbar">
+            {audioOnlyFormats && audioOnlyFormats.length > 0 && videoOnlyFormats && videoOnlyFormats.length > 0 && subtitleLanguages && subtitleLanguages.length > 0 && (
+                <ToggleGroup
+                type="multiple"
+                variant="outline"
+                className="flex flex-col items-start gap-2 mb-2"
+                value={selectedSubtitles}
+                onValueChange={(value) => setSelectedSubtitles(value)}
+                >
+                    <p className="text-xs">Subtitle Languages</p>
+                    <div className="flex gap-2 flex-wrap items-center">
+                        {subtitleLanguages.map((lang) => {
+                            const hasAutoSubSelected = selectedSubtitles.some(code => code.endsWith('-orig'));
+                            const hasNormalSubSelected = selectedSubtitles.some(code => !code.endsWith('-orig'));
+                            const isDisabled = (hasAutoSubSelected && !lang.code.endsWith('-orig')) || (hasNormalSubSelected && lang.code.endsWith('-orig'));
+
+                            return (
+                                <ToggleGroupItem
+                                className="text-xs text-nowrap border-2 data-[state=on]:border-2 data-[state=on]:border-primary data-[state=on]:bg-primary/10 hover:bg-muted/70"
+                                value={lang.code}
+                                size="sm"
+                                aria-label={lang.lang}
+                                key={lang.code}
+                                disabled={isDisabled}>
+                                    {lang.lang}
+                                </ToggleGroupItem>
+                            );
+                        })}
+                    </div>
+                </ToggleGroup>
+            )}
+            <FormatToggleGroup
+            type="multiple"
+            variant="outline"
+            className="mb-2"
+            value={selectedCombinableAudioFormats}
+            onValueChange={(value: string[]) => {
+                setSelectedCombinableAudioFormats(value);
+                resetDownloadConfiguration();
+            }}
+            >
+                {videoOnlyFormats && videoOnlyFormats.length > 0 && audioOnlyFormats && audioOnlyFormats.length > 0 && (
+                    <>
+                        <p className="text-xs">Audio</p>
+                        <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                            {audioOnlyFormats.map((format) => (
+                                <FormatToggleGroupItem
+                                key={format.format_id}
+                                value={format.format_id}
+                                format={format}
+                                />
+                            ))}
+                        </div>
+                    </>
+                )}
+            </FormatToggleGroup>
+            <FormatSelectionGroup
+            value={selectedCombinableVideoFormat}
+            onValueChange={(value) => {
+                setSelectedCombinableVideoFormat(value);
+                resetDownloadConfiguration();
+            }}
+            >
+                {audioOnlyFormats && audioOnlyFormats.length > 0 && videoOnlyFormats && videoOnlyFormats.length > 0 && (
+                <>
+                    <p className="text-xs">Video</p>
+                    <div className="grid grid-cols-2 xl:grid-cols-3 gap-2">
+                        {videoOnlyFormats.map((format) => (
+                            <FormatSelectionGroupItem
+                            key={format.format_id}
+                            value={format.format_id}
+                            format={format}
+                            />
+                        ))}
+                    </div>
+                </>
+                )}
+            </FormatSelectionGroup>
+            {(!videoOnlyFormats || videoOnlyFormats.length === 0 || !audioOnlyFormats || audioOnlyFormats.length === 0) && (
+                <Alert>
+                    <AlertCircleIcon className="size-4 stroke-primary" />
+                    <AlertTitle>Unable to use Combine Mode!</AlertTitle>
+                    <AlertDescription>
+                        Cannot use combine mode for this video as it does not have both audio and video formats available. Use Selective Mode or try another video.
+                    </AlertDescription>
+                </Alert>
+            )}
+            <div className="spacer mb-12"></div>
+        </div>
+    );
+}
+
+export function VideoDownloader({ videoMetadata, audioOnlyFormats, videoOnlyFormats, combinedFormats, qualityPresetFormats, subtitleLanguages }: VideoDownloaderProps) {
+    const activeDownloadModeTab = useDownloaderPageStatesStore((state) => state.activeDownloadModeTab);
+    const setActiveDownloadModeTab = useDownloaderPageStatesStore((state) => state.setActiveDownloadModeTab);
+    const resetDownloadConfiguration = useDownloaderPageStatesStore((state) => state.resetDownloadConfiguration);
+    const videoPanelSizes = useDownloaderPageStatesStore((state) => state.videoPanelSizes);
+    const setVideoPanelSizes = useDownloaderPageStatesStore((state) => state.setVideoPanelSizes);
+
+    return (
+        <div className="flex">
+            <ResizablePanelGroup
+            direction="horizontal"
+            className="w-full"
+            onLayout={(sizes) => setVideoPanelSizes(sizes)}
+            >
+                <ResizablePanel
+                defaultSize={videoPanelSizes[0]}
+                >
+                    <VideoPreview videoMetadata={videoMetadata} />
+                </ResizablePanel>
+                <ResizableHandle />
+                <ResizablePanel
+                defaultSize={videoPanelSizes[1]}
+                >
+                    <div className="flex flex-col w-full pl-4">
+                        <Tabs
+                        className=""
+                        value={activeDownloadModeTab}
+                        onValueChange={(tab) => {
+                            setActiveDownloadModeTab(tab);
+                            resetDownloadConfiguration();
+                        }}
+                        >
+                            <div className="flex items-center justify-between">
+                                <h3 className="text-sm flex items-center gap-2">
+                                    <DownloadCloud className="w-4 h-4" />
+                                    <span>Download Options</span>
+                                </h3>
+                                <TabsList>
+                                    <TabsTrigger value="selective">Selective</TabsTrigger>
+                                    <TabsTrigger value="combine">Combine</TabsTrigger>
+                                </TabsList>
+                            </div>
+                            <TabsContent value="selective">
+                                <SelectiveVideoDownload
+                                videoMetadata={videoMetadata}
+                                audioOnlyFormats={audioOnlyFormats}
+                                videoOnlyFormats={videoOnlyFormats}
+                                combinedFormats={combinedFormats}
+                                qualityPresetFormats={qualityPresetFormats}
+                                subtitleLanguages={subtitleLanguages}
+                                />
+                            </TabsContent>
+                            <TabsContent value="combine">
+                                <CombinedVideoDownload
+                                audioOnlyFormats={audioOnlyFormats}
+                                videoOnlyFormats={videoOnlyFormats}
+                                subtitleLanguages={subtitleLanguages}
+                                />
+                            </TabsContent>
+                        </Tabs>
+                    </div>
+                </ResizablePanel>
+            </ResizablePanelGroup>
+        </div>
+    );
+}

src/components/pages/library/completedDownloads.tsx

@@ -0,0 +1,374 @@
+import { useEffect } from "react";
+import { ProxyImage } from "@/components/custom/proxyImage";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Separator } from "@/components/ui/separator";
+import { toast } from "sonner";
+import { useCurrentVideoMetadataStore, useDownloadActionStatesStore, useLibraryPageStatesStore } from "@/services/store";
+import { formatBitrate, formatCodec, formatDurationString, formatFileSize, paginate } from "@/utils";
+import { ArrowUpRightIcon, AudioLines, CircleArrowDown, Clock, File, FileAudio2, FileQuestion, FileVideo2, FolderInput, ListVideo, Music, Play, Search, Trash2, Video } from "lucide-react";
+import { invoke } from "@tauri-apps/api/core";
+import * as fs from "@tauri-apps/plugin-fs";
+import { dirname } from "@tauri-apps/api/path";
+import { DownloadState } from "@/types/download";
+import { useQueryClient } from "@tanstack/react-query";
+import { useDeleteDownloadState } from "@/services/mutations";
+import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Label } from "@/components/ui/label";
+import { useNavigate } from "react-router-dom";
+import { useLogger } from "@/helpers/use-logger";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import PaginationBar from "@/components/custom/paginationBar";
+
+interface CompletedDownloadProps {
+    state: DownloadState;
+}
+
+interface CompletedDownloadsProps {
+    downloads: DownloadState[];
+}
+
+export function CompletedDownload({ state }: CompletedDownloadProps) {
+    const downloadActions = useDownloadActionStatesStore(state => state.downloadActions);
+    const setIsDeleteFileChecked = useDownloadActionStatesStore(state => state.setIsDeleteFileChecked);
+
+    const queryClient = useQueryClient();
+    const downloadStateDeleter = useDeleteDownloadState();
+    const navigate = useNavigate();
+    const LOG = useLogger();
+
+    const openFile = async (filePath: string | null, app: string | null) => {
+        if (filePath && await fs.exists(filePath)) {
+            try {
+                await invoke('open_file_with_app', { filePath: filePath, appName: app }).then(() => {
+                    toast.info(`${app === 'explorer' ? 'Revealing' : 'Opening'} file`, {
+                        description: `${app === 'explorer' ? 'Revealing' : 'Opening'} the file ${app === 'explorer' ? 'in' : 'with'} ${app ? app : 'default app'}.`,
+                    })
+                });
+            } catch (e) {
+                console.error(e);
+                toast.error(`Failed to ${app === 'explorer' ? 'reveal' : 'open'} file`, {
+                    description: `An error occurred while trying to ${app === 'explorer' ? 'reveal' : 'open'} the file.`,
+                })
+            }
+        } else {
+            toast.info("File unavailable", {
+                description: `The file you are trying to ${app === 'explorer' ? 'reveal' : 'open'} does not exist.`,
+            })
+        }
+    }
+
+    const removeFromDownloads = async (downloadState: DownloadState, delete_file: boolean) => {
+        if (delete_file && downloadState.filepath) {
+            const isMultiplePlaylistItems = downloadState.playlist_id !== null &&
+                downloadState.playlist_indices !== null &&
+                downloadState.playlist_indices.includes(',');
+
+            if (isMultiplePlaylistItems) {
+                const dirPath = await dirname(downloadState.filepath);
+                try {
+                    if (await fs.exists(dirPath)) {
+                        await fs.remove(dirPath, { recursive: true });
+                    } else {
+                        console.error(`Directory not found: "${dirPath}"`);
+                    }
+                } catch (e) {
+                    console.error(e);
+                }
+            } else {
+                try {
+                    if (await fs.exists(downloadState.filepath)) {
+                        await fs.remove(downloadState.filepath);
+                    } else {
+                        console.error(`File not found: "${downloadState.filepath}"`);
+                    }
+                } catch (e) {
+                    console.error(e);
+                }
+            }
+        }
+
+        downloadStateDeleter.mutate(downloadState.download_id, {
+            onSuccess: (data) => {
+                console.log("Download State deleted successfully:", data);
+                queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                if (delete_file  && downloadState.filepath) {
+                    toast.success("Deleted from downloads", {
+                        description: `The download for ${isMultiplePlaylistItems ? 'playlist ' : ''}"${isMultiplePlaylistItems ? downloadState.playlist_title : downloadState.title}" has been deleted successfully.`,
+                    });
+                } else {
+                    toast.success("Removed from downloads", {
+                        description: `The download for ${isMultiplePlaylistItems ? 'playlist ' : ''}"${isMultiplePlaylistItems ? downloadState.playlist_title : downloadState.title}" has been removed successfully.`,
+                    });
+                }
+            },
+            onError: (error) => {
+                console.error("Failed to delete download state:", error);
+                if (delete_file  && downloadState.filepath) {
+                    toast.error("Failed to delete download", {
+                        description: `An error occurred while trying to delete the download for ${isMultiplePlaylistItems ? 'playlist ' : ''}"${isMultiplePlaylistItems ? downloadState.playlist_title : downloadState.title}".`,
+                    });
+                } else {
+                    toast.error("Failed to remove download", {
+                        description: `An error occurred while trying to remove the download for ${isMultiplePlaylistItems ? 'playlist ' : ''}"${isMultiplePlaylistItems ? downloadState.playlist_title : downloadState.title}".`,
+                    });
+                }
+            }
+        })
+    }
+
+    const handleSearch = async (url: string, isPlaylist: boolean) => {
+        try {
+            LOG.info('NEODLP', `Received search request from library for URL: ${url}`);
+            navigate('/');
+            const { setRequestedUrl, setAutoSubmitSearch } = useCurrentVideoMetadataStore.getState();
+            setRequestedUrl(url);
+            setAutoSubmitSearch(true);
+            toast.info(`Initiating ${isPlaylist ? 'Playlist' : 'Video'} Search`, {
+                description: `Initiating search for the selected ${isPlaylist ? 'playlist' : 'video'}.`,
+            });
+        } catch (e) {
+            console.error(e);
+            toast.error("Failed to initiate search", {
+                description: "An error occurred while trying to initiate the search.",
+            });
+        }
+    }
+
+    const itemActionStates = downloadActions[state.download_id] || {
+        isResuming: false,
+        isPausing: false,
+        isCanceling: false,
+        isDeleteFileChecked: false,
+    };
+
+    const isPlaylist = state.playlist_id !== null && state.playlist_indices !== null;
+    const isMultiplePlaylistItems = isPlaylist && state.playlist_indices && state.playlist_indices.includes(',');
+    const isMultipleAudioFormatSelected = state.format_id ? state.format_id.split('+').length > 2 : false;
+
+    return (
+        <div className="p-4 border border-border rounded-lg flex gap-4" key={state.download_id}>
+            <div className="w-[30%] flex flex-col justify-between gap-2">
+                {isMultiplePlaylistItems ? (
+                    <div className="w-full relative flex items-center justify-center mt-2">
+                        <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2 z-20">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
+                        </AspectRatio>
+                        <div className="w-[95%] aspect-video absolute -top-1 rounded-lg overflow-hidden border border-border mb-2 z-10">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="blur-xs brightness-75" />
+                        </div>
+                        <div className="w-[87%] aspect-video absolute -top-2 rounded-lg overflow-hidden border border-border mb-2 z-0">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="blur-sm brightness-50" />
+                        </div>
+                    </div>
+                ) : (
+                    <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2">
+                        <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
+                    </AspectRatio>
+                )}
+                {isMultiplePlaylistItems ? (
+                    <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
+                        <ListVideo className="w-4 h-4 mr-2 stroke-primary" /> Playlist ({state.playlist_indices?.split(',').length})
+                    </span>
+                ) : (
+                    <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
+                        {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
+                            <Video className="w-4 h-4 mr-2 stroke-primary" />
+                        )}
+                        {state.filetype && state.filetype === 'audio' && (
+                            <Music className="w-4 h-4 mr-2 stroke-primary" />
+                        )}
+                        {(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
+                            <File className="w-4 h-4 mr-2 stroke-primary" />
+                        )}
+                        {state.ext ? state.ext.toUpperCase() : 'Unknown'} {state.resolution ? `(${state.resolution})` : null}
+                    </span>
+                )}
+            </div>
+            <div className="w-full flex flex-col justify-between gap-2">
+                <div className="flex flex-col gap-1">
+                    <h4 className="">{isMultiplePlaylistItems ? state.playlist_title : state.title}</h4>
+                    <p className="text-xs text-muted-foreground">{isMultiplePlaylistItems ? state.playlist_channel ?? 'unknown' : state.channel ?? 'unknown'} {state.host ? <><span className="text-primary">•</span> {state.host}</> : 'unknown'}</p>
+                    <div className="flex items-center mt-1">
+                        <span className="text-xs text-muted-foreground flex items-center pr-3">
+                            {isMultiplePlaylistItems ? (
+                                <><ListVideo className="w-4 h-4 mr-2"/> {state.playlist_n_entries ?? 'unknown'}</>
+                            ) : (
+                                <><Clock className="w-4 h-4 mr-2"/> {state.duration_string ? formatDurationString(state.duration_string) : 'unknown'}</>
+                            )}
+                        </span>
+                        <Separator orientation="vertical" />
+                        <span className="text-xs text-muted-foreground flex items-center px-3">
+                        {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
+                            <FileVideo2 className="w-4 h-4 mr-2"/>
+                        )}
+                        {state.filetype && state.filetype === 'audio' && (
+                            <FileAudio2 className="w-4 h-4 mr-2" />
+                        )}
+                        {(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
+                            <FileQuestion className="w-4 h-4 mr-2" />
+                        )}
+                        {state.filesize ? formatFileSize(state.filesize) : 'unknown'}
+                        </span>
+                        <Separator orientation="vertical" />
+                        <span className="text-xs text-muted-foreground flex items-center pl-3"><AudioLines className="w-4 h-4 mr-2"/>
+                        {state.vbr && state.abr ? (
+                            formatBitrate(state.vbr + state.abr)
+                        ) : state.vbr ? (
+                            formatBitrate(state.vbr)
+                        ) : state.abr ? (
+                            formatBitrate(state.abr)
+                        ) : (
+                            'unknown'
+                        )}
+                        </span>
+                    </div>
+                    <div className="hidden xl:flex items-center mt-1 gap-2 flex-wrap text-xs">
+                        {state.playlist_id && state.playlist_indices && !isMultiplePlaylistItems && (
+                            <span
+                            className="border border-border py-1 px-2 rounded flex items-center cursor-pointer"
+                            title={`${state.playlist_title ?? 'UNKNOWN PLAYLIST'}` + ' by ' + `${state.playlist_channel ?? 'UNKNOWN CHANNEL'}`}
+                            >
+                                <ListVideo className="w-4 h-4 mr-2" /> Playlist ({state.playlist_indices} of {state.playlist_n_entries})
+                            </span>
+                        )}
+                        {state.vcodec && !isMultiplePlaylistItems && (
+                            <span className="border border-border py-1 px-2 rounded">{formatCodec(state.vcodec)}</span>
+                        )}
+                        {state.acodec && !isMultiplePlaylistItems && (
+                            <span className="border border-border py-1 px-2 rounded">{formatCodec(state.acodec)}</span>
+                        )}
+                        {isMultipleAudioFormatSelected && (
+                            <span className="border border-border py-1 px-2 rounded">MULTIAUDIO</span>
+                        )}
+                        {state.dynamic_range && state.dynamic_range !== 'SDR' && !isMultiplePlaylistItems && (
+                            <span className="border border-border py-1 px-2 rounded">{state.dynamic_range}</span>
+                        )}
+                        {state.subtitle_id && (
+                            <span
+                            className="border border-border py-1 px-2 rounded cursor-pointer"
+                            title={`EMBEDED SUBTITLE (${state.subtitle_id})`}
+                            >
+                                ESUB
+                            </span>
+                        )}
+                        {state.sponsorblock_mark && (
+                            <span
+                            className="border border-border py-1 px-2 rounded cursor-pointer"
+                            title={`SPONSORBLOCK MARKED (${state.sponsorblock_mark})`}
+                            >
+                                SPBLOCK(M)
+                            </span>
+                        )}
+                        {state.sponsorblock_remove && (
+                            <span
+                            className="border border-border py-1 px-2 rounded cursor-pointer"
+                            title={`SPONSORBLOCK REMOVED (${state.sponsorblock_remove})`}
+                            >
+                                SPBLOCK(R)
+                            </span>
+                        )}
+                    </div>
+                </div>
+                <div className="w-full flex items-center gap-2">
+                    <Button size="sm" onClick={() => openFile(state.filepath, null)}>
+                        <Play className="w-4 h-4" />
+                        Open
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={() => openFile(state.filepath, 'explorer')}>
+                        <FolderInput className="w-4 h-4" />
+                        Reveal
+                    </Button>
+                    <Button size="sm" variant="outline" onClick={() => handleSearch(state.url, state.playlist_id ? true : false)}>
+                        <Search className="w-4 h-4" />
+                        Search
+                    </Button>
+                    <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                            <Button size="sm" variant="destructive">
+                                <Trash2 className="w-4 h-4" />
+                                Remove
+                            </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                            <AlertDialogHeader>
+                                <AlertDialogTitle>Remove from library?</AlertDialogTitle>
+                                <AlertDialogDescription>
+                                    Are you sure you want to remove this download from the library? You can also delete the downloaded file by cheking the box below. This action cannot be undone.
+                                </AlertDialogDescription>
+                                <div className="flex items-center space-x-2">
+                                    <Checkbox id="delete-file" checked={itemActionStates.isDeleteFileChecked} onCheckedChange={() => {setIsDeleteFileChecked(state.download_id, !itemActionStates.isDeleteFileChecked)}} />
+                                    <Label htmlFor="delete-file">Delete the downloaded file</Label>
+                                </div>
+                            </AlertDialogHeader>
+                            <AlertDialogFooter>
+                                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                                <AlertDialogAction onClick={
+                                    () => removeFromDownloads(state, itemActionStates.isDeleteFileChecked).then(() => {
+                                        setIsDeleteFileChecked(state.download_id, false);
+                                    })
+                                }>Remove</AlertDialogAction>
+                            </AlertDialogFooter>
+                        </AlertDialogContent>
+                    </AlertDialog>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export function CompletedDownloads({ downloads }: CompletedDownloadsProps) {
+    const activeCompletedDownloadsPage = useLibraryPageStatesStore(state => state.activeCompletedDownloadsPage);
+    const setActiveCompletedDownloadsPage = useLibraryPageStatesStore(state => state.setActiveCompletedDownloadsPage);
+
+    const navigate = useNavigate();
+    const paginatedCompletedDownloads = paginate(downloads, activeCompletedDownloadsPage, 5);
+
+    // Ensure current page is valid when downloads change
+    useEffect(() => {
+        if (downloads.length > 0 && activeCompletedDownloadsPage > paginatedCompletedDownloads.last_page) {
+            setActiveCompletedDownloadsPage(paginatedCompletedDownloads.last_page);
+        }
+    }, [downloads.length, activeCompletedDownloadsPage, paginatedCompletedDownloads.last_page, setActiveCompletedDownloadsPage]);
+
+    return (
+        <div className="w-full flex flex-col gap-2">
+            {paginatedCompletedDownloads.data.length > 0 ? (
+                <>
+                {paginatedCompletedDownloads.data.map((state) => {
+                    return (
+                        <CompletedDownload key={state.download_id} state={state} />
+                    );
+                })}
+                {paginatedCompletedDownloads.pages.length > 1 && (
+                    <PaginationBar
+                        paginatedData={paginatedCompletedDownloads}
+                        setPage={setActiveCompletedDownloadsPage}
+                    />
+                )}
+                </>
+            ) : (
+                <Empty className="mt-10">
+                    <EmptyHeader>
+                        <EmptyMedia variant="icon">
+                            <CircleArrowDown />
+                        </EmptyMedia>
+                        <EmptyTitle>No Completed Downloads</EmptyTitle>
+                        <EmptyDescription>
+                        You have not completed any downloads yet! Complete downloading something to see here :)
+                        </EmptyDescription>
+                    </EmptyHeader>
+                    <Button
+                        variant="link"
+                        className="text-muted-foreground"
+                        size="sm"
+                        onClick={() => navigate("/")}
+                    >
+                        Spin Up a New Download  <ArrowUpRightIcon />
+                    </Button>
+                </Empty>
+            )}
+        </div>
+    );
+}

src/components/pages/library/incompleteDownloads.tsx

@@ -0,0 +1,302 @@
+import { IndeterminateProgress } from "@/components/custom/indeterminateProgress";
+import { ProxyImage } from "@/components/custom/proxyImage";
+import { AspectRatio } from "@/components/ui/aspect-ratio";
+import { Button } from "@/components/ui/button";
+import { Progress } from "@/components/ui/progress";
+import { toast } from "sonner";
+import { useAppContext } from "@/providers/appContextProvider";
+import { useDownloadActionStatesStore, useSettingsPageStatesStore } from "@/services/store";
+import { formatFileSize, formatSecToTimeString, formatSpeed } from "@/utils";
+import { ArrowUpRightIcon, CircleCheck, File, Info, ListVideo, Loader2, Music, Pause, Play, RotateCw, Video, X } from "lucide-react";
+import { DownloadState } from "@/types/download";
+import { Empty, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle } from "@/components/ui/empty";
+import { useNavigate } from "react-router-dom";
+
+interface IncompleteDownloadProps {
+    state: DownloadState;
+}
+
+interface IncompleteDownloadsProps {
+    downloads: DownloadState[];
+}
+
+export function IncompleteDownload({ state }: IncompleteDownloadProps) {
+    const downloadActions = useDownloadActionStatesStore(state => state.downloadActions);
+    const setIsResumingDownload = useDownloadActionStatesStore(state => state.setIsResumingDownload);
+    const setIsPausingDownload = useDownloadActionStatesStore(state => state.setIsPausingDownload);
+    const setIsCancelingDownload = useDownloadActionStatesStore(state => state.setIsCancelingDownload);
+
+    const debugMode = useSettingsPageStatesStore(state => state.settings.debug_mode);
+
+    const { pauseDownload, resumeDownload, cancelDownload } = useAppContext()
+
+    const itemActionStates = downloadActions[state.download_id] || {
+        isResuming: false,
+        isPausing: false,
+        isCanceling: false,
+        isDeleteFileChecked: false,
+    };
+
+    const isPlaylist = state.playlist_id !== null && state.playlist_indices !== null;
+    const isMultiplePlaylistItems = isPlaylist && state.playlist_indices && state.playlist_indices.includes(',');
+
+    return (
+        <div className="p-4 border border-border rounded-lg flex gap-4" key={state.download_id}>
+            <div className="w-[30%] flex flex-col justify-between gap-2">
+                {isMultiplePlaylistItems ? (
+                    <div className="w-full relative flex items-center justify-center mt-2">
+                        <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2 z-20">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
+                        </AspectRatio>
+                        <div className="w-[95%] aspect-video absolute -top-1 rounded-lg overflow-hidden border border-border mb-2 z-10">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="blur-xs brightness-75" />
+                        </div>
+                        <div className="w-[87%] aspect-video absolute -top-2 rounded-lg overflow-hidden border border-border mb-2 z-0">
+                            <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="blur-sm brightness-50" />
+                        </div>
+                    </div>
+                ) : (
+                    <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2">
+                        <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
+                    </AspectRatio>
+                )}
+                {isMultiplePlaylistItems ? (
+                    <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
+                        <ListVideo className="w-4 h-4 mr-2 stroke-primary" /> Playlist ({state.playlist_indices?.split(',').length})
+                    </span>
+                ) : state.ext ? (
+                    <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
+                        {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
+                            <Video className="w-4 h-4 mr-2 stroke-primary" />
+                        )}
+                        {state.filetype && state.filetype === 'audio' && (
+                            <Music className="w-4 h-4 mr-2 stroke-primary" />
+                        )}
+                        {(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
+                            <File className="w-4 h-4 mr-2 stroke-primary" />
+                        )}
+                        {state.ext ? state.ext.toUpperCase() : 'Unknown'} {state.resolution ? `(${state.resolution})` : null}
+                    </span>
+                ) : (
+                    <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
+                        {state.download_status === 'starting' ? (
+                            <><Loader2 className="h-4 w-4 mr-2 stroke-primary animate-spin" /> Processing...</>
+                        ) : (
+                            <><File className="w-4 h-4 mr-2 stroke-primary" /> Unknown</>
+                        )}
+                    </span>
+                )}
+            </div>
+            <div className="w-full flex flex-col justify-between">
+                <div className="flex flex-col gap-1">
+                    <h4>{isMultiplePlaylistItems ? state.playlist_title : state.title}</h4>
+                    {((state.download_status === 'starting') || (state.download_status === 'downloading' && state.status === 'finished')) && (
+                        <IndeterminateProgress indeterminate={true} className="w-full" />
+                    )}
+                    {(state.download_status === 'downloading' || state.download_status === 'paused' || state.download_status === 'errored') && state.progress && state.status !== 'finished' && (
+                        <div className="w-full flex items-center gap-2">
+                            {isMultiplePlaylistItems && state.item ? (
+                                <span className="text-sm text-nowrap">({state.item})</span>
+                            ) : null}
+                            <span className="text-sm text-nowrap">{state.progress}%</span>
+                            <Progress value={state.progress} />
+                            <span className="text-sm text-nowrap">{
+                                state.downloaded && state.total
+                                ? `(${formatFileSize(state.downloaded)} / ${formatFileSize(state.total)})`
+                                : null
+                            }</span>
+                        </div>
+                    )}
+                    <div className="text-xs text-muted-foreground">
+                        {state.download_status && state.download_status === 'downloading' && state.status === 'finished' ? (
+                            <span>Processing</span>
+                        ) : state.download_status && state.download_status === 'errored' ? (
+                            <span className="text-destructive"><Info className="inline size-3 mb-1 mr-0.5" /> Errored</span>
+                        ) : (
+                            <span>{state.download_status.charAt(0).toUpperCase() + state.download_status.slice(1)}</span>
+                        )} {
+                        (debugMode && state.download_id) || (state.download_status === 'errored' && state.download_id) && (
+                            <><span className="text-primary">•</span> ID: {state.download_id.toUpperCase()}</>
+                        )} {
+                        state.download_status === 'downloading' && state.status !== 'finished' && state.speed && (
+                            <><span className="text-primary">•</span> Speed: {formatSpeed(state.speed)}</>
+                        )} {state.download_status === 'downloading' && state.eta && (
+                            <><span className="text-primary">•</span> ETA: {formatSecToTimeString(state.eta)}</>
+                        )}
+                    </div>
+                </div>
+                <div className="w-full flex items-center gap-2 mt-2">
+                    {state.download_status === 'paused' ? (
+                        <Button
+                        size="sm"
+                        className="w-fill"
+                        onClick={async () => {
+                            setIsResumingDownload(state.download_id, true);
+                            try {
+                                await resumeDownload(state)
+                                // toast.success("Resumed Download", {
+                                //     description: "Download resumed, it will re-start shortly.",
+                                // })
+                            } catch (e) {
+                                console.error(e);
+                                toast.error("Failed to Resume Download", {
+                                    description: `An error occurred while trying to resume the download for "${state.title}".`,
+                                })
+                            } finally {
+                                setIsResumingDownload(state.download_id, false);
+                            }
+                        }}
+                        disabled={itemActionStates.isResuming || itemActionStates.isCanceling}
+                        >
+                            {itemActionStates.isResuming ? (
+                                <>
+                                    <Loader2 className="h-4 w-4 animate-spin" />
+                                    Resuming
+                                </>
+                            ) : (
+                                <>
+                                    <Play className="w-4 h-4" />
+                                    Resume
+                                </>
+                            )}
+                        </Button>
+                    ) : state.download_status === 'errored' ? (
+                        <Button
+                        size="sm"
+                        className="w-fill"
+                        onClick={async () => {
+                            setIsResumingDownload(state.download_id, true);
+                            try {
+                                await resumeDownload(state);
+                            } catch (e) {
+                                console.error(e);
+                                toast.error("Failed to Restart Download", {
+                                    description: `An error occurred while trying to restart the download for "${state.title}".`,
+                                })
+                            } finally {
+                                setIsResumingDownload(state.download_id, false);
+                            }
+                        }}
+                        disabled={itemActionStates.isResuming || itemActionStates.isCanceling}
+                        >
+                            {itemActionStates.isResuming ? (
+                                <>
+                                    <Loader2 className="h-4 w-4 animate-spin" />
+                                    Retrying
+                                </>
+                            ) : (
+                                <>
+                                    <RotateCw className="w-4 h-4" />
+                                    Retry
+                                </>
+                            )}
+                        </Button>
+                    ) : (
+                        <Button
+                        size="sm"
+                        className="w-fill"
+                        onClick={async () => {
+                            setIsPausingDownload(state.download_id, true);
+                            try {
+                                await pauseDownload(state)
+                                // toast.success("Paused Download", {
+                                //     description: "Download paused successfully.",
+                                // })
+                            } catch (e) {
+                                console.error(e);
+                                toast.error("Failed to Pause Download", {
+                                    description: `An error occurred while trying to pause the download for "${state.title}".`,
+                                })
+                            } finally {
+                                setIsPausingDownload(state.download_id, false);
+                            }
+                        }}
+                        disabled={itemActionStates.isPausing || itemActionStates.isCanceling || state.download_status !== 'downloading' || (state.download_status === 'downloading' && state.status === 'finished')}
+                        >
+                            {itemActionStates.isPausing ? (
+                                <>
+                                    <Loader2 className="h-4 w-4 animate-spin" />
+                                    Pausing
+                                </>
+                            ) : (
+                                <>
+                                    <Pause className="w-4 h-4" />
+                                    Pause
+                                </>
+                            )}
+                        </Button>
+                    )}
+                    <Button
+                    size="sm"
+                    variant="destructive"
+                    onClick={async () => {
+                        setIsCancelingDownload(state.download_id, true);
+                        try {
+                            await cancelDownload(state)
+                            toast.success("Canceled Download", {
+                                description: `The download for "${state.title}" has been canceled.`,
+                            })
+                        } catch (e) {
+                            console.error(e);
+                            toast.error("Failed to Cancel Download", {
+                                description: `An error occurred while trying to cancel the download for "${state.title}".`,
+                            })
+                        } finally {
+                            setIsCancelingDownload(state.download_id, false);
+                        }
+                    }}
+                    disabled={itemActionStates.isCanceling || itemActionStates.isResuming || itemActionStates.isPausing || state.download_status === 'starting' || (state.download_status === 'downloading' && state.status === 'finished')}
+                    >
+                        {itemActionStates.isCanceling ? (
+                            <>
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                                Canceling
+                            </>
+                        ) : (
+                            <>
+                                <X className="w-4 h-4" />
+                                Cancel
+                            </>
+                        )}
+                    </Button>
+                </div>
+            </div>
+        </div>
+    );
+}
+
+export function IncompleteDownloads({ downloads }: IncompleteDownloadsProps) {
+    const navigate = useNavigate();
+
+    return (
+        <div className="w-full flex flex-col gap-2">
+            {downloads.length > 0 ? (
+                downloads.map((state) => {
+                    return (
+                        <IncompleteDownload key={state.download_id} state={state} />
+                    );
+                })
+            ) : (
+                <Empty className="mt-10">
+                    <EmptyHeader>
+                        <EmptyMedia variant="icon">
+                            <CircleCheck />
+                        </EmptyMedia>
+                        <EmptyTitle>No Incomplete Downloads</EmptyTitle>
+                        <EmptyDescription>
+                        You have all caught up! Sit back and relax or just spin up a new download to see here :)
+                        </EmptyDescription>
+                    </EmptyHeader>
+                    <Button
+                        variant="link"
+                        className="text-muted-foreground"
+                        size="sm"
+                        onClick={() => navigate("/")}
+                    >
+                        Spin Up a New Download  <ArrowUpRightIcon />
+                    </Button>
+                </Empty>
+            )}
+        </div>
+    );
+}

src/components/pages/settings/extensionSettings.tsx

@@ -0,0 +1,295 @@
+import { useEffect } from "react";
+import { Card } from "@/components/ui/card";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
+import { useSettingsPageStatesStore } from "@/services/store";
+import { Label } from "@/components/ui/label";
+import { Button } from "@/components/ui/button";
+import { toast } from "sonner";
+import { ArrowDownToLine, ArrowRight, EthernetPort, Loader2, Radio, RotateCw } from "lucide-react";
+import { useSettings } from "@/helpers/use-settings";
+import { Input } from "@/components/ui/input";
+import { z } from "zod";
+import { useForm } from "react-hook-form";
+import { zodResolver } from "@hookform/resolvers/zod"
+import { Form, FormControl, FormField, FormItem, FormMessage } from "@/components/ui/form";
+import { invoke } from "@tauri-apps/api/core";
+import { SlidingButton } from "@/components/custom/slidingButton";
+import clsx from "clsx";
+
+const websocketPortSchema = z.object({
+    port: z.coerce.number<number>({
+        error: (issue) => issue.input === undefined || issue.input === null || issue.input === ""
+        ? "Websocket Port is required"
+        : "Websocket Port must be a valid number"
+    }).int({
+        message: "Websocket Port must be an integer"
+    }).min(50000, {
+        message: "Websocket Port must be at least 50000"
+    }).max(60000, {
+        message: "Websocket Port must be at most 60000"
+    }),
+});
+
+function ExtInstallSettings() {
+    const openLink = async (url: string, app: string | null) => {
+        try {
+            await invoke('open_file_with_app', { filePath: url, appName: app }).then(() => {
+                toast.info("Opening link", {
+                    description: `Opening link with ${app ? app : 'default app'}.`,
+                })
+            });
+        } catch (e) {
+            console.error(e);
+            toast.error("Failed to open link", {
+                description: "An error occurred while trying to open the link.",
+            })
+        }
+    }
+
+    return (
+        <div className="install-neodlp-extension">
+            <h3 className="font-semibold">NeoDLP Extension</h3>
+            <p className="text-xs text-muted-foreground mb-4">Integrate NeoDLP with your favourite browser</p>
+            <div className="flex items-center gap-4 mb-4">
+                <SlidingButton
+                    slidingContent={
+                        <div className="flex items-center justify-center gap-2 text-primary-foreground">
+                            <ArrowRight className="size-4" />
+                            <span>Get Now</span>
+                        </div>
+                    }
+                    onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'chrome')}
+                    >
+                    <span className="font-semibold flex items-center gap-2">
+                        <svg className="size-4 fill-primary-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M0 256C0 209.4 12.5 165.6 34.3 127.1L144.1 318.3C166 357.5 207.9 384 256 384C270.3 384 283.1 381.7 296.8 377.4L220.5 509.6C95.9 492.3 0 385.3 0 256zM365.1 321.6C377.4 302.4 384 279.1 384 256C384 217.8 367.2 183.5 340.7 160H493.4C505.4 189.6 512 222.1 512 256C512 397.4 397.4 511.1 256 512L365.1 321.6zM477.8 128H256C193.1 128 142.3 172.1 130.5 230.7L54.2 98.5C101 38.5 174 0 256 0C350.8 0 433.5 51.5 477.8 128V128zM168 256C168 207.4 207.4 168 256 168C304.6 168 344 207.4 344 256C344 304.6 304.6 344 256 344C207.4 344 168 304.6 168 256z"/>
+                        </svg>
+                        Get Chrome Extension
+                    </span>
+                    <span className="text-xs">from Chrome Web Store</span>
+                </SlidingButton>
+                <SlidingButton
+                    slidingContent={
+                        <div className="flex items-center justify-center gap-2 text-primary-foreground">
+                            <ArrowRight className="size-4" />
+                            <span>Get Now</span>
+                        </div>
+                    }
+                    onClick={() => openLink('https://addons.mozilla.org/en-US/firefox/addon/neo-downloader-plus', 'firefox')}
+                    >
+                    <span className="font-semibold flex items-center gap-2">
+                        <svg className="size-4 fill-primary-foreground" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+                            <path d="M130.2 127.5C130.4 127.6 130.3 127.6 130.2 127.5V127.5zM481.6 172.9C471 147.4 449.6 119.9 432.7 111.2C446.4 138.1 454.4 165 457.4 185.2C457.4 185.3 457.4 185.4 457.5 185.6C429.9 116.8 383.1 89.1 344.9 28.7C329.9 5.1 334 3.5 331.8 4.1L331.7 4.2C285 30.1 256.4 82.5 249.1 126.9C232.5 127.8 216.2 131.9 201.2 139C199.8 139.6 198.7 140.7 198.1 142C197.4 143.4 197.2 144.9 197.5 146.3C197.7 147.2 198.1 148 198.6 148.6C199.1 149.3 199.8 149.9 200.5 150.3C201.3 150.7 202.1 151 203 151.1C203.8 151.1 204.7 151 205.5 150.8L206 150.6C221.5 143.3 238.4 139.4 255.5 139.2C318.4 138.7 352.7 183.3 363.2 201.5C350.2 192.4 326.8 183.3 304.3 187.2C392.1 231.1 368.5 381.8 247 376.4C187.5 373.8 149.9 325.5 146.4 285.6C146.4 285.6 157.7 243.7 227 243.7C234.5 243.7 256 222.8 256.4 216.7C256.3 214.7 213.8 197.8 197.3 181.5C188.4 172.8 184.2 168.6 180.5 165.5C178.5 163.8 176.4 162.2 174.2 160.7C168.6 141.2 168.4 120.6 173.5 101.1C148.5 112.5 129 130.5 114.8 146.4H114.7C105 134.2 105.7 93.8 106.3 85.3C106.1 84.8 99 89 98.1 89.7C89.5 95.7 81.6 102.6 74.3 110.1C58 126.7 30.1 160.2 18.8 211.3C14.2 231.7 12 255.7 12 263.6C12 398.3 121.2 507.5 255.9 507.5C376.6 507.5 478.9 420.3 496.4 304.9C507.9 228.2 481.6 173.8 481.6 172.9z"/>
+                        </svg>
+                        Get Firefox Extension
+                    </span>
+                    <span className="text-xs">from Mozilla Addons Store</span>
+                </SlidingButton>
+            </div>
+            <div className="flex gap-2 mb-4">
+                <Button variant="outline" onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'msedge')}>Edge</Button>
+                <Button variant="outline" onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'opera')}>Opera</Button>
+                <Button variant="outline" onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'brave')}>Brave</Button>
+                <Button variant="outline" onClick={() => openLink('https://chromewebstore.google.com/detail/neo-downloader-plus/mehopeailfjmiloiiohgicphlcgpompf', 'vivaldi')}>Vivaldi</Button>
+                <Button variant="outline" onClick={() => openLink('https://addons.mozilla.org/en-US/firefox/addon/neo-downloader-plus', 'zen')}>Zen</Button>
+            </div>
+            <p className="text-xs text-muted-foreground mb-2">* These links opens with coresponding browsers only. Make sure the browser is installed before clicking the link</p>
+        </div>
+    );
+}
+
+function ExtPortSettings() {
+    const formResetTrigger = useSettingsPageStatesStore(state => state.formResetTrigger);
+    const acknowledgeFormReset = useSettingsPageStatesStore(state => state.acknowledgeFormReset);
+
+    const websocketPort = useSettingsPageStatesStore(state => state.settings.websocket_port);
+    const isChangingWebSocketPort = useSettingsPageStatesStore(state => state.isChangingWebSocketPort);
+    const setIsChangingWebSocketPort = useSettingsPageStatesStore(state => state.setIsChangingWebSocketPort);
+    const isRestartingWebSocketServer = useSettingsPageStatesStore(state => state.isRestartingWebSocketServer);
+
+    const { saveSettingsKey } = useSettings();
+
+    interface Config {
+        port: number;
+    }
+
+    const websocketPortForm = useForm<z.infer<typeof websocketPortSchema>>({
+        resolver: zodResolver(websocketPortSchema),
+        defaultValues: {
+            port: websocketPort,
+        },
+        mode: "onChange",
+    });
+    const watchedPort = websocketPortForm.watch("port");
+    const { errors: websocketPortFormErrors } = websocketPortForm.formState;
+
+    async function handleWebsocketPortSubmit(values: z.infer<typeof websocketPortSchema>) {
+        setIsChangingWebSocketPort(true);
+        try {
+            // const port = parseInt(values.port, 10);
+            const updatedConfig: Config = await invoke("update_config", {
+                newConfig: {
+                    port: values.port,
+                }
+            });
+            saveSettingsKey('websocket_port', updatedConfig.port);
+            toast.success("Websocket port updated", {
+                description: `Websocket port changed to ${values.port}`,
+            });
+        } catch (error) {
+            console.error("Error changing websocket port:", error);
+            toast.error("Failed to change websocket port", {
+                description: "An error occurred while trying to change the websocket port. Please try again.",
+            });
+        } finally {
+            setIsChangingWebSocketPort(false);
+        }
+    }
+
+    useEffect(() => {
+        if (formResetTrigger > 0) {
+            websocketPortForm.reset();
+            acknowledgeFormReset();
+        }
+    }, [formResetTrigger]);
+
+    return (
+        <div className="websocket-port">
+            <h3 className="font-semibold">Websocket Port</h3>
+            <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">
+                        <FormField
+                            control={websocketPortForm.control}
+                            name="port"
+                            disabled={isChangingWebSocketPort}
+                            render={({ field }) => (
+                                <FormItem className="w-full">
+                                    <FormControl>
+                                        <Input
+                                        className="focus-visible:ring-0"
+                                        placeholder="Enter port number"
+                                        {...field}
+                                        />
+                                    </FormControl>
+                                    <Label htmlFor="port" className="text-xs text-muted-foreground">(Current: {websocketPort}) (Default: 53511, Range: 50000-60000)</Label>
+                                    <FormMessage />
+                                </FormItem>
+                            )}
+                        />
+                        <Button
+                            type="submit"
+                            disabled={!watchedPort || Number(watchedPort) === websocketPort || Object.keys(websocketPortFormErrors).length > 0 || isChangingWebSocketPort || isRestartingWebSocketServer}
+                        >
+                            {isChangingWebSocketPort ? (
+                                <>
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                                Changing
+                                </>
+                            ) : (
+                                'Change'
+                            )}
+                        </Button>
+                    </form>
+                </Form>
+            </div>
+        </div>
+    );
+}
+
+export function ExtensionSettings() {
+    const activeSubExtTab = useSettingsPageStatesStore(state => state.activeSubExtTab);
+    const setActiveSubExtTab = useSettingsPageStatesStore(state => state.setActiveSubExtTab);
+
+    const isChangingWebSocketPort = useSettingsPageStatesStore(state => state.isChangingWebSocketPort);
+    const isRestartingWebSocketServer = useSettingsPageStatesStore(state => state.isRestartingWebSocketServer);
+    const setIsRestartingWebSocketServer = useSettingsPageStatesStore(state => state.setIsRestartingWebSocketServer);
+
+    const tabsList = [
+        { key: "install", label: "Install", icon: ArrowDownToLine, component: <ExtInstallSettings /> },
+        { key: "port", label: "Port", icon: EthernetPort, component: <ExtPortSettings /> },
+    ];
+
+    return (
+        <>
+        <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-linear-65 from-[#FF43D0] to-[#4444FF] customscheme:from-chart-1 customscheme:to-chart-5 rounded-md overflow-hidden border border-border">
+                        <Radio className="size-5 text-white" />
+                    </div>
+                    <div className="flex flex-col">
+                        <h3 className="">Extension Websocket Server</h3>
+                        <div className="text-xs flex items-center">
+                            {isChangingWebSocketPort || isRestartingWebSocketServer ? (
+                                <><div className="h-1.5 w-1.5 rounded-full bg-amber-600 dark:bg-amber-500 mr-1.5 mt-0.5" /><span className="text-amber-600 dark:text-amber-500">Restarting...</span></>
+                            ) : (
+                                <><div className="h-1.5 w-1.5 rounded-full bg-emerald-600 dark:bg-emerald-500 mr-1.5 mt-0.5" /><span className="text-emerald-600 dark:text-emerald-500">Running</span></>
+                            )}
+                        </div>
+                    </div>
+                </div>
+                <div className="flex gap-4 items-center">
+                    <Button
+                    onClick={async () => {
+                        setIsRestartingWebSocketServer(true);
+                        try {
+                            await invoke("restart_websocket_server");
+                            toast.success("Websocket server restarted", {
+                                description: "Websocket server restarted successfully.",
+                            });
+                        } catch (error) {
+                            console.error("Error restarting websocket server:", error);
+                            toast.error("Failed to restart websocket server", {
+                                description: "An error occurred while trying to restart the websocket server. Please try again.",
+                            });
+                        } finally {
+                            setIsRestartingWebSocketServer(false);
+                        }
+                    }}
+                    disabled={isRestartingWebSocketServer || isChangingWebSocketPort}
+                    >
+                        {isRestartingWebSocketServer ? (
+                            <>
+                                <Loader2 className="h-4 w-4 animate-spin" />
+                                Restarting
+                            </>
+                        ) : (
+                            <>
+                                <RotateCw className="h-4 w-4" />
+                                Restart
+                            </>
+                        )}
+                    </Button>
+                </div>
+            </div>
+        </Card>
+        <Tabs
+        className="w-full flex flex-row items-start gap-4 mt-7"
+        orientation="vertical"
+        value={activeSubExtTab}
+        onValueChange={setActiveSubExtTab}
+        >
+            <TabsList className="shrink-0 grid grid-cols-1 gap-1 p-0 bg-background min-w-45">
+                {tabsList.map((tab) => (
+                    <TabsTrigger
+                        key={tab.key}
+                        value={tab.key}
+                        className="data-[state=active]:bg-primary data-[state=active]:text-primary-foreground justify-start px-3 py-1.5 gap-2"
+                    >
+                        <tab.icon className="size-4" /> {tab.label}
+                    </TabsTrigger>
+                ))}
+            </TabsList>
+            <div className="min-h-full flex flex-col w-full border-l border-border pl-4">
+                {tabsList.map((tab) => (
+                    <TabsContent key={tab.key} value={tab.key} className={clsx("flex flex-col gap-4 min-h-37.5", tab.key === "install" ? "max-w-[90%]" : "max-w-[70%]")}>
+                        {tab.component}
+                    </TabsContent>
+                ))}
+            </div>
+        </Tabs>
+        </>
+    );
+}

src/components/sidebar.tsx

@@ -1,9 +1,10 @@
 import { config } from "@/config";
 import { Link, useLocation } from "react-router-dom";
 import { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupContent, SidebarHeader, SidebarMenu, SidebarMenuButton, SidebarMenuItem, useSidebar } from "@/components/ui/sidebar";
-import { CircleArrowUp, Download, Settings, SquarePlay, } from "lucide-react";
+import { CircleArrowUp } from "lucide-react";
 import { isActive as isActiveSidebarItem } from "@/utils";
 import { RoutesObj } from "@/types/route";
+import { AllRoutes } from "@/routes";
 import { useDownloadStatesStore, useSettingsPageStatesStore } from "@/services/store";
 import { Badge } from "@/components/ui/badge";
 import { useEffect, useState } from "react";
@@ -14,6 +15,8 @@ import { Button } from "@/components/ui/button";
 import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
 import { Progress } from "@/components/ui/progress";
 import useAppUpdater from "@/helpers/use-app-updater";
+import { platform } from "@tauri-apps/plugin-os";
+import * as fs from "@tauri-apps/plugin-fs";
 
 export function AppSidebar() {
     const downloadStates = useDownloadStatesStore(state => state.downloadStates);
@@ -25,31 +28,21 @@ export function AppSidebar() {
     const appUpdate = useSettingsPageStatesStore(state => state.appUpdate);
     const isUpdatingApp = useSettingsPageStatesStore(state => state.isUpdatingApp);
     const appUpdateDownloadProgress = useSettingsPageStatesStore(state => state.appUpdateDownloadProgress);
+    const currentPlatform = platform();
     const location = useLocation();
     const { open } = useSidebar();
     const { downloadAndInstallAppUpdate } = useAppUpdater();
     const [showBadge, setShowBadge] = useState(false);
     const [showUpdateCard, setShowUpdateCard] = useState(false);
+    const [isNativeLinuxApp, setIsNativeLinuxApp] = useState(false);
 
     const topItems: Array<RoutesObj> = [
-    {
+        AllRoutes[0], // Downloader
-      title: "Downloader",
+        AllRoutes[1], // Library
-      url: "/",
-      icon: Download,
-    },
-    {
-      title: "Library",
-      url: "/library",
-      icon: SquarePlay,
-    }
     ];
 
     const bottomItems: Array<RoutesObj> = [
-    {
+        AllRoutes[2], // Settings
-      title: "Settings",
-      url: "/settings",
-      icon: Settings,
-    }
     ];
 
     useEffect(() => {
@@ -69,6 +62,15 @@ export function AppSidebar() {
         };
     }, [open]);
 
+    useEffect(() => {
+        (async () => {
+            if (currentPlatform === 'linux') {
+                const neoDlpExists = await fs.exists('/usr/bin/neodlp');
+                setIsNativeLinuxApp(neoDlpExists);
+            }
+        })();
+    }, [currentPlatform]);
+
     return (
         <Sidebar collapsible="icon">
             <SidebarHeader>
@@ -77,7 +79,7 @@ export function AppSidebar() {
                         <SidebarMenuButton size="lg" asChild>
                             <a href="#">
                                 <div className="flex aspect-square size-8 items-center justify-center rounded-lg">
-                  <NeoDlpLogo className="size-full rounded-lg border border-border" />
+                                    <NeoDlpLogo className="size-full rounded-md border border-border [--logo-stop-color-1:#4444FF] [--logo-stop-color-2:#FF43D0] customscheme:[--logo-stop-color-1:var(--color-chart-5)] customscheme:[--logo-stop-color-2:var(--color-chart-1)]" />
                                 </div>
                                 <div className="grid flex-1 text-left text-sm leading-tight">
                                     <span className="truncate font-semibold">Neo Downloader Plus</span>
@@ -105,7 +107,7 @@ export function AppSidebar() {
                                         asChild
                                         >
                                             <Link to={item.url}>
-                            <item.icon />
+                                                <item.icon className="stroke-primary" />
                                                 <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>
@@ -124,10 +126,12 @@ export function AppSidebar() {
                                 asChild
                                 >
                                     <Link to={item.url}>
-                        <item.icon />
+                                        <item.icon className="stroke-primary" />
                                         <span>{item.title}</span>
                                         {item.title === "Library" && ongoingDownloads.length > 0 && showBadge && (
-                          <Badge className="absolute right-2 inset-y-auto h-5 min-w-5 rounded-full px-1 font-mono tabular-nums">{ongoingDownloads.length}</Badge>
+                                        <Badge className="absolute right-2 inset-y-auto h-5 min-w-5 rounded-full px-1 font-mono tabular-nums flex items-center justify-center">
+                                            <span className="mt-0.5">{ongoingDownloads.length}</span>
+                                        </Badge>
                                         )}
                                     </Link>
                                 </SidebarMenuButton>
@@ -158,9 +162,19 @@ export function AppSidebar() {
                             <CardDescription>
                                 A newer version of {config.appName} is available. Please update to the latest version for the best experience.
                             </CardDescription>
-              <a className="text-xs font-semibold cursor-pointer mt-1" href={`https://github.com/neosubhamoy/neodlp/releases/tag/v${appUpdate?.version || '0.0.0'}`} target="_blank">✨ Read Changelog</a>
+                            <a className="text-xs font-semibold cursor-pointer mt-1" href={`https://github.com/${config.appRepo}/releases/tag/v${appUpdate?.version || '0.0.0'}`} target="_blank">✨ Read Changelog</a>
                         </CardHeader>
                         <CardContent className="grid gap-2.5 p-4">
+                        {isNativeLinuxApp ? (
+                            <Button
+                            className="w-full"
+                            size="sm"
+                            disabled={ongoingDownloads.length > 0 || isUpdatingApp}
+                            asChild
+                            >
+                                <a href={`https://github.com/${config.appRepo}/releases/tag/v${appUpdate?.version || '0.0.0'}`} target="_blank">Download Now</a>
+                            </Button>
+                        ) : (
                             <AlertDialog>
                                 <AlertDialogTrigger asChild>
                                     <Button
@@ -182,6 +196,7 @@ export function AppSidebar() {
                                     </AlertDialogHeader>
                                 </AlertDialogContent>
                             </AlertDialog>
+                        )}
                         </CardContent>
                     </Card>
                 )}
@@ -196,7 +211,7 @@ export function AppSidebar() {
                                 asChild
                                 >
                                     <Link to={item.url}>
-                        <item.icon />
+                                        <item.icon className="stroke-primary" />
                                         <span>{item.title}</span>
                                     </Link>
                                 </SidebarMenuButton>
@@ -211,7 +226,7 @@ export function AppSidebar() {
                         asChild
                         >
                             <Link to={item.url}>
-                    <item.icon />
+                                <item.icon className="stroke-primary" />
                                 <span>{item.title}</span>
                             </Link>
                         </SidebarMenuButton>
@@ -221,5 +236,5 @@ export function AppSidebar() {
                 </SidebarMenu>
             </SidebarFooter>
         </Sidebar>
-  )
+    );
 }

src/components/ui/accordion.tsx

@@ -1,64 +1,55 @@
 import * as React from "react"
 import * as AccordionPrimitive from "@radix-ui/react-accordion"
-import { ChevronDownIcon } from "lucide-react"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Accordion({
+const Accordion = AccordionPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
-  return <AccordionPrimitive.Root data-slot="accordion" {...props} />
-}
 
-function AccordionItem({
+const AccordionItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof AccordionPrimitive.Item>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
-}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AccordionPrimitive.Item
-      data-slot="accordion-item"
+    ref={ref}
-      className={cn("border-b last:border-b-0", className)}
+    className={cn("border-b", className)}
     {...props}
   />
-  )
+))
-}
+AccordionItem.displayName = "AccordionItem"
 
-function AccordionTrigger({
+const AccordionTrigger = React.forwardRef<
-  className,
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
-  children,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
-  return (
   <AccordionPrimitive.Header className="flex">
     <AccordionPrimitive.Trigger
-        data-slot="accordion-trigger"
+      ref={ref}
       className={cn(
-          "focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180",
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
         className
       )}
       {...props}
     >
       {children}
-        <ChevronDownIcon className="text-muted-foreground pointer-events-none size-4 shrink-0 translate-y-0.5 transition-transform duration-200" />
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
     </AccordionPrimitive.Trigger>
   </AccordionPrimitive.Header>
-  )
+))
-}
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
 
-function AccordionContent({
+const AccordionContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof AccordionPrimitive.Content>,
-  children,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
-  return (
   <AccordionPrimitive.Content
-      data-slot="accordion-content"
+    ref={ref}
-      className="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
     {...props}
   >
-      <div className={cn("pt-0 pb-4", className)}>{children}</div>
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
   </AccordionPrimitive.Content>
-  )
+))
-}
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
 
 export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

src/components/ui/alert-dialog.tsx

@@ -1,146 +1,128 @@
-"use client"
-
 import * as React from "react"
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
 
 import { cn } from "@/lib/utils"
 import { buttonVariants } from "@/components/ui/button"
 
-function AlertDialog({
+const AlertDialog = AlertDialogPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
-  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
-}
 
-function AlertDialogTrigger({
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
-  return (
-    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
-  )
-}
 
-function AlertDialogPortal({
+const AlertDialogPortal = AlertDialogPrimitive.Portal
-  ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
-  return (
-    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
-  )
-}
 
-function AlertDialogOverlay({
+const AlertDialogOverlay = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
-}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AlertDialogPrimitive.Overlay
-      data-slot="alert-dialog-overlay"
     className={cn(
-        "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",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
+    ref={ref}
   />
-  )
+))
-}
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
 
-function AlertDialogContent({
+const AlertDialogContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Content>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
-}: React.ComponentProps<typeof AlertDialogPrimitive.Content>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AlertDialogPortal>
     <AlertDialogOverlay />
     <AlertDialogPrimitive.Content
-        data-slot="alert-dialog-content"
+      ref={ref}
       className={cn(
-          "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",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 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 sm:rounded-lg",
         className
       )}
       {...props}
     />
   </AlertDialogPortal>
-  )
+))
-}
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
 
-function AlertDialogHeader({
+const AlertDialogHeader = ({
   className,
   ...props
-}: React.ComponentProps<"div">) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
   <div
-      data-slot="alert-dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-function AlertDialogFooter({
-  className,
-  ...props
-}: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="alert-dialog-footer"
     className={cn(
-        "flex flex-col-reverse gap-2 sm:flex-row sm:justify-end",
+      "flex flex-col space-y-2 text-center sm:text-left",
       className
     )}
     {...props}
   />
 )
-}
+AlertDialogHeader.displayName = "AlertDialogHeader"
 
-function AlertDialogTitle({
+const AlertDialogFooter = ({
   className,
   ...props
-}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+AlertDialogFooter.displayName = "AlertDialogFooter"
+
+const AlertDialogTitle = React.forwardRef<
+  React.ElementRef<typeof AlertDialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Title
-      data-slot="alert-dialog-title"
+    ref={ref}
     className={cn("text-lg font-semibold", className)}
     {...props}
   />
-  )
+))
-}
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
 
-function AlertDialogDescription({
+const AlertDialogDescription = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Description>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
-}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AlertDialogPrimitive.Description
-      data-slot="alert-dialog-description"
+    ref={ref}
-      className={cn("text-muted-foreground text-sm", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-  )
+))
-}
+AlertDialogDescription.displayName =
+  AlertDialogPrimitive.Description.displayName
 
-function AlertDialogAction({
+const AlertDialogAction = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Action>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
-}: React.ComponentProps<typeof AlertDialogPrimitive.Action>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AlertDialogPrimitive.Action
+    ref={ref}
     className={cn(buttonVariants(), className)}
     {...props}
   />
-  )
+))
-}
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
 
-function AlertDialogCancel({
+const AlertDialogCancel = React.forwardRef<
-  className,
+  React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
-}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AlertDialogPrimitive.Cancel
-      className={cn(buttonVariants({ variant: "outline" }), className)}
+    ref={ref}
+    className={cn(
+      buttonVariants({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    )}
     {...props}
   />
-  )
+))
-}
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
 
 export {
   AlertDialog,

src/components/ui/alert.tsx

@@ -4,13 +4,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
   {
     variants: {
       variant: {
-        default: "bg-card text-card-foreground",
+        default: "bg-background text-foreground",
         destructive:
-          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
       },
     },
     defaultVariants: {
@@ -19,48 +19,41 @@ const alertVariants = cva(
   }
 )
 
-function Alert({
+const Alert = React.forwardRef<
-  className,
+  HTMLDivElement,
-  variant,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
-  ...props
+>(({ className, variant, ...props }, ref) => (
-}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
-  return (
   <div
-      data-slot="alert"
+    ref={ref}
     role="alert"
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-  )
+))
-}
+Alert.displayName = "Alert"
 
-function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+const AlertTitle = React.forwardRef<
-  return (
+  HTMLParagraphElement,
-    <div
+  React.HTMLAttributes<HTMLHeadingElement>
-      data-slot="alert-title"
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <h5
-        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+    ref={ref}
-        className
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
-      )}
     {...props}
   />
-  )
+))
-}
+AlertTitle.displayName = "AlertTitle"
 
-function AlertDescription({
+const AlertDescription = React.forwardRef<
-  className,
+  HTMLParagraphElement,
-  ...props
+  React.HTMLAttributes<HTMLParagraphElement>
-}: React.ComponentProps<"div">) {
+>(({ className, ...props }, ref) => (
-  return (
   <div
-      data-slot="alert-description"
+    ref={ref}
-      className={cn(
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
-        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
-        className
-      )}
     {...props}
   />
-  )
+))
-}
+AlertDescription.displayName = "AlertDescription"
 
 export { Alert, AlertTitle, AlertDescription }

src/components/ui/aspect-ratio.tsx

@@ -1,9 +1,5 @@
 import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio"
 
-function AspectRatio({
+const AspectRatio = AspectRatioPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof AspectRatioPrimitive.Root>) {
-  return <AspectRatioPrimitive.Root data-slot="aspect-ratio" {...props} />
-}
 
 export { AspectRatio }

src/components/ui/avatar.tsx

@@ -5,49 +5,46 @@ import * as AvatarPrimitive from "@radix-ui/react-avatar"
 
 import { cn } from "@/lib/utils"
 
-function Avatar({
+const Avatar = React.forwardRef<
-  className,
+  React.ElementRef<typeof AvatarPrimitive.Root>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
-}: React.ComponentProps<typeof AvatarPrimitive.Root>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AvatarPrimitive.Root
-      data-slot="avatar"
+    ref={ref}
     className={cn(
-        "relative flex size-8 shrink-0 overflow-hidden rounded-full",
+      "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
       className
     )}
     {...props}
   />
-  )
+))
-}
+Avatar.displayName = AvatarPrimitive.Root.displayName
 
-function AvatarImage({
+const AvatarImage = React.forwardRef<
-  className,
+  React.ElementRef<typeof AvatarPrimitive.Image>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
-}: React.ComponentProps<typeof AvatarPrimitive.Image>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AvatarPrimitive.Image
-      data-slot="avatar-image"
+    ref={ref}
-      className={cn("aspect-square size-full", className)}
+    className={cn("aspect-square h-full w-full", className)}
     {...props}
   />
-  )
+))
-}
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
 
-function AvatarFallback({
+const AvatarFallback = React.forwardRef<
-  className,
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
-}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
+>(({ className, ...props }, ref) => (
-  return (
   <AvatarPrimitive.Fallback
-      data-slot="avatar-fallback"
+    ref={ref}
     className={cn(
-        "bg-muted flex size-full items-center justify-center rounded-full",
+      "flex h-full w-full items-center justify-center rounded-full bg-muted",
       className
     )}
     {...props}
   />
-  )
+))
-}
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
 
 export { Avatar, AvatarImage, AvatarFallback }

src/components/ui/badge.tsx

@@ -1,22 +1,20 @@
 import * as React from "react"
-import { Slot } from "@radix-ui/react-slot"
 import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden",
+  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {
         default:
-          "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
         destructive:
-          "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline:
+        outline: "text-foreground",
-          "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
       },
     },
     defaultVariants: {
@@ -25,21 +23,13 @@ const badgeVariants = cva(
   }
 )
 
-function Badge({
+export interface BadgeProps
-  className,
+  extends React.HTMLAttributes<HTMLDivElement>,
-  variant,
+    VariantProps<typeof badgeVariants> {}
-  asChild = false,
-  ...props
-}: React.ComponentProps<"span"> &
-  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
-  const Comp = asChild ? Slot : "span"
 
+function Badge({ className, variant, ...props }: BadgeProps) {
   return (
-    <Comp
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
-      data-slot="badge"
-      className={cn(badgeVariants({ variant }), className)}
-      {...props}
-    />
   )
 }
 

src/components/ui/breadcrumb.tsx

@@ -4,99 +4,105 @@ import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Breadcrumb({ ...props }: React.ComponentProps<"nav">) {
+const Breadcrumb = React.forwardRef<
-  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />
+  HTMLElement,
+  React.ComponentPropsWithoutRef<"nav"> & {
+    separator?: React.ReactNode
   }
+>(({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />)
+Breadcrumb.displayName = "Breadcrumb"
 
-function BreadcrumbList({ className, ...props }: React.ComponentProps<"ol">) {
+const BreadcrumbList = React.forwardRef<
-  return (
+  HTMLOListElement,
+  React.ComponentPropsWithoutRef<"ol">
+>(({ className, ...props }, ref) => (
   <ol
-      data-slot="breadcrumb-list"
+    ref={ref}
     className={cn(
-        "text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5",
+      "flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5",
       className
     )}
     {...props}
   />
-  )
+))
-}
+BreadcrumbList.displayName = "BreadcrumbList"
 
-function BreadcrumbItem({ className, ...props }: React.ComponentProps<"li">) {
+const BreadcrumbItem = React.forwardRef<
-  return (
+  HTMLLIElement,
+  React.ComponentPropsWithoutRef<"li">
+>(({ className, ...props }, ref) => (
   <li
-      data-slot="breadcrumb-item"
+    ref={ref}
     className={cn("inline-flex items-center gap-1.5", className)}
     {...props}
   />
-  )
+))
-}
+BreadcrumbItem.displayName = "BreadcrumbItem"
 
-function BreadcrumbLink({
+const BreadcrumbLink = React.forwardRef<
-  asChild,
+  HTMLAnchorElement,
-  className,
+  React.ComponentPropsWithoutRef<"a"> & {
-  ...props
-}: React.ComponentProps<"a"> & {
     asChild?: boolean
-}) {
+  }
+>(({ asChild, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "a"
 
   return (
     <Comp
-      data-slot="breadcrumb-link"
+      ref={ref}
-      className={cn("hover:text-foreground transition-colors", className)}
+      className={cn("transition-colors hover:text-foreground", className)}
       {...props}
     />
   )
-}
+})
+BreadcrumbLink.displayName = "BreadcrumbLink"
 
-function BreadcrumbPage({ className, ...props }: React.ComponentProps<"span">) {
+const BreadcrumbPage = React.forwardRef<
-  return (
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
   <span
-      data-slot="breadcrumb-page"
+    ref={ref}
     role="link"
     aria-disabled="true"
     aria-current="page"
-      className={cn("text-foreground font-normal", className)}
+    className={cn("font-normal text-foreground", className)}
     {...props}
   />
-  )
+))
-}
+BreadcrumbPage.displayName = "BreadcrumbPage"
 
-function BreadcrumbSeparator({
+const BreadcrumbSeparator = ({
   children,
   className,
   ...props
-}: React.ComponentProps<"li">) {
+}: React.ComponentProps<"li">) => (
-  return (
   <li
-      data-slot="breadcrumb-separator"
     role="presentation"
     aria-hidden="true"
-      className={cn("[&>svg]:size-3.5", className)}
+    className={cn("[&>svg]:w-3.5 [&>svg]:h-3.5", className)}
     {...props}
   >
     {children ?? <ChevronRight />}
   </li>
 )
-}
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 
-function BreadcrumbEllipsis({
+const BreadcrumbEllipsis = ({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<"span">) => (
-  return (
   <span
-      data-slot="breadcrumb-ellipsis"
     role="presentation"
     aria-hidden="true"
-      className={cn("flex size-9 items-center justify-center", className)}
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
     {...props}
   >
-      <MoreHorizontal className="size-4" />
+    <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More</span>
   </span>
 )
-}
+BreadcrumbEllipsis.displayName = "BreadcrumbElipssis"
 
 export {
   Breadcrumb,

src/components/ui/button-group.tsx

@@ -0,0 +1,83 @@
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+const buttonGroupVariants = cva(
+  "flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1",
+  {
+    variants: {
+      orientation: {
+        horizontal:
+          "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+        vertical:
+          "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+      },
+    },
+    defaultVariants: {
+      orientation: "horizontal",
+    },
+  }
+)
+
+function ButtonGroup({
+  className,
+  orientation,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="button-group"
+      data-orientation={orientation}
+      className={cn(buttonGroupVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> & {
+  asChild?: boolean
+}) {
+  const Comp = asChild ? Slot : "div"
+
+  return (
+    <Comp
+      className={cn(
+        "bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ButtonGroupSeparator({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="button-group-separator"
+      orientation={orientation}
+      className={cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  ButtonGroup,
+  ButtonGroupSeparator,
+  ButtonGroupText,
+  buttonGroupVariants,
+}

src/components/ui/button.tsx

@@ -5,27 +5,28 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default:
-          "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+          "bg-primary text-primary-foreground shadow hover:bg-primary/90",
         destructive:
-          "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
         outline:
-          "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+          "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
         secondary:
-          "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+          "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost:
+        ghost: "hover:bg-accent hover:text-accent-foreground",
-          "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
         link: "text-primary underline-offset-4 hover:underline",
       },
       size: {
-        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        lg: "h-10 rounded-md px-8",
-        icon: "size-9",
+        icon: "h-9 w-9",
+        "icon-sm": "size-8",
+        "icon-lg": "size-10",
       },
     },
     defaultVariants: {
@@ -35,25 +36,24 @@ const buttonVariants = cva(
   }
 )
 
-function Button({
+export interface ButtonProps
-  className,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-  variant,
+    VariantProps<typeof buttonVariants> {
-  size,
-  asChild = false,
-  ...props
-}: React.ComponentProps<"button"> &
-  VariantProps<typeof buttonVariants> & {
   asChild?: boolean
-  }) {
+}
-  const Comp = asChild ? Slot : "button"
 
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
     return (
       <Comp
-      data-slot="button"
         className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
         {...props}
       />
     )
   }
+)
+Button.displayName = "Button"
 
 export { Button, buttonVariants }

src/components/ui/calendar.tsx

@@ -1,3 +1,5 @@
+"use client"
+
 import * as React from "react"
 import {
   ChevronDownIcon,
@@ -27,7 +29,7 @@ function Calendar({
     <DayPicker
       showOutsideDays={showOutsideDays}
       className={cn(
-        "bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
+        "bg-background group/calendar p-3 [--cell-size:2rem] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent",
         String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`,
         String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`,
         className
@@ -41,69 +43,72 @@ function Calendar({
       classNames={{
         root: cn("w-fit", defaultClassNames.root),
         months: cn(
-          "flex gap-4 flex-col md:flex-row relative",
+          "relative flex flex-col gap-4 md:flex-row",
           defaultClassNames.months
         ),
-        month: cn("flex flex-col w-full gap-4", defaultClassNames.month),
+        month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
         nav: cn(
-          "flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between",
+          "absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1",
           defaultClassNames.nav
         ),
         button_previous: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
           defaultClassNames.button_previous
         ),
         button_next: cn(
           buttonVariants({ variant: buttonVariant }),
-          "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none",
+          "h-[--cell-size] w-[--cell-size] select-none p-0 aria-disabled:opacity-50",
           defaultClassNames.button_next
         ),
         month_caption: cn(
-          "flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)",
+          "flex h-[--cell-size] w-full items-center justify-center px-[--cell-size]",
           defaultClassNames.month_caption
         ),
         dropdowns: cn(
-          "w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5",
+          "flex h-[--cell-size] w-full items-center justify-center gap-1.5 text-sm font-medium",
           defaultClassNames.dropdowns
         ),
         dropdown_root: cn(
-          "relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md",
+          "has-focus:border-ring border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] relative rounded-md border",
           defaultClassNames.dropdown_root
         ),
-        dropdown: cn("absolute inset-0 opacity-0", defaultClassNames.dropdown),
+        dropdown: cn(
+          "bg-popover absolute inset-0 opacity-0",
+          defaultClassNames.dropdown
+        ),
         caption_label: cn(
           "select-none font-medium",
           captionLayout === "label"
             ? "text-sm"
-            : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5",
+            : "[&>svg]:text-muted-foreground flex h-8 items-center gap-1 rounded-md pl-2 pr-1 text-sm [&>svg]:size-3.5",
           defaultClassNames.caption_label
         ),
         table: "w-full border-collapse",
         weekdays: cn("flex", defaultClassNames.weekdays),
         weekday: cn(
-          "text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none",
+          "text-muted-foreground flex-1 select-none rounded-md text-[0.8rem] font-normal",
           defaultClassNames.weekday
         ),
-        week: cn("flex w-full mt-2", defaultClassNames.week),
+        week: cn("mt-2 flex w-full", defaultClassNames.week),
         week_number_header: cn(
-          "select-none w-(--cell-size)",
+          "w-[--cell-size] select-none",
           defaultClassNames.week_number_header
         ),
         week_number: cn(
-          "text-[0.8rem] select-none text-muted-foreground",
+          "text-muted-foreground select-none text-[0.8rem]",
           defaultClassNames.week_number
         ),
         day: cn(
-          "relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none",
+          "group/day relative aspect-square h-full w-full select-none p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md",
           defaultClassNames.day
         ),
         range_start: cn(
-          "rounded-l-md bg-accent",
+          "bg-accent rounded-l-md",
           defaultClassNames.range_start
         ),
         range_middle: cn("rounded-none", defaultClassNames.range_middle),
-        range_end: cn("rounded-r-md bg-accent", defaultClassNames.range_end),
+        range_end: cn("bg-accent rounded-r-md", defaultClassNames.range_end),
         today: cn(
           "bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none",
           defaultClassNames.today
@@ -154,7 +159,7 @@ function Calendar({
         WeekNumber: ({ children, ...props }) => {
           return (
             <td {...props}>
-              <div className="flex size-(--cell-size) items-center justify-center text-center">
+              <div className="flex size-[--cell-size] items-center justify-center text-center">
                 {children}
               </div>
             </td>
@@ -196,7 +201,7 @@ function CalendarDayButton({
       data-range-end={modifiers.range_end}
       data-range-middle={modifiers.range_middle}
       className={cn(
-        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70",
+        "data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 flex aspect-square h-auto w-full min-w-[--cell-size] flex-col gap-1 font-normal leading-none data-[range-end=true]:rounded-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] [&>span]:text-xs [&>span]:opacity-70",
         defaultClassNames.day,
         className
       )}

src/components/ui/card.tsx

@@ -2,91 +2,75 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Card({ className, ...props }: React.ComponentProps<"div">) {
+const Card = React.forwardRef<
-  return (
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
   <div
-      data-slot="card"
+    ref={ref}
     className={cn(
-        "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
+      "rounded-xl border bg-card text-card-foreground shadow",
       className
     )}
     {...props}
   />
-  )
+))
-}
+Card.displayName = "Card"
 
-function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
+const CardHeader = React.forwardRef<
-  return (
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
   <div
-      data-slot="card-header"
+    ref={ref}
-      className={cn(
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
-        "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
-        className
-      )}
     {...props}
   />
-  )
+))
-}
+CardHeader.displayName = "CardHeader"
 
-function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
+const CardTitle = React.forwardRef<
-  return (
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
   <div
-      data-slot="card-title"
+    ref={ref}
-      className={cn("leading-none font-semibold", className)}
+    className={cn("font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-  )
+))
-}
+CardTitle.displayName = "CardTitle"
 
-function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
+const CardDescription = React.forwardRef<
-  return (
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
   <div
-      data-slot="card-description"
+    ref={ref}
-      className={cn("text-muted-foreground text-sm", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-  )
+))
-}
+CardDescription.displayName = "CardDescription"
 
-function CardAction({ className, ...props }: React.ComponentProps<"div">) {
+const CardContent = React.forwardRef<
-  return (
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+))
+CardContent.displayName = "CardContent"
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
   <div
-      data-slot="card-action"
+    ref={ref}
-      className={cn(
+    className={cn("flex items-center p-6 pt-0", className)}
-        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
-        className
-      )}
     {...props}
   />
-  )
+))
-}
+CardFooter.displayName = "CardFooter"
 
-function CardContent({ className, ...props }: React.ComponentProps<"div">) {
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
-  return (
-    <div
-      data-slot="card-content"
-      className={cn("px-6", className)}
-      {...props}
-    />
-  )
-}
-
-function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="card-footer"
-      className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
-      {...props}
-    />
-  )
-}
-
-export {
-  Card,
-  CardHeader,
-  CardFooter,
-  CardTitle,
-  CardAction,
-  CardDescription,
-  CardContent,
-}

src/components/ui/carousel.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import useEmblaCarousel, {
   type UseEmblaCarouselType,
@@ -42,7 +40,12 @@ function useCarousel() {
   return context
 }
 
-function Carousel({
+const Carousel = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & CarouselProps
+>(
+  (
+    {
       orientation = "horizontal",
       opts,
       setApi,
@@ -50,7 +53,9 @@ function Carousel({
       className,
       children,
       ...props
-}: React.ComponentProps<"div"> & CarouselProps) {
+    },
+    ref
+  ) => {
     const [carouselRef, api] = useEmblaCarousel(
       {
         ...opts,
@@ -62,7 +67,10 @@ function Carousel({
     const [canScrollNext, setCanScrollNext] = React.useState(false)
 
     const onSelect = React.useCallback((api: CarouselApi) => {
-    if (!api) return
+      if (!api) {
+        return
+      }
+
       setCanScrollPrev(api.canScrollPrev())
       setCanScrollNext(api.canScrollNext())
     }, [])
@@ -89,12 +97,18 @@ function Carousel({
     )
 
     React.useEffect(() => {
-    if (!api || !setApi) return
+      if (!api || !setApi) {
+        return
+      }
+
       setApi(api)
     }, [api, setApi])
 
     React.useEffect(() => {
-    if (!api) return
+      if (!api) {
+        return
+      }
+
       onSelect(api)
       api.on("reInit", onSelect)
       api.on("select", onSelect)
@@ -119,11 +133,11 @@ function Carousel({
         }}
       >
         <div
+          ref={ref}
           onKeyDownCapture={handleKeyDown}
           className={cn("relative", className)}
           role="region"
           aria-roledescription="carousel"
-        data-slot="carousel"
           {...props}
         >
           {children}
@@ -131,17 +145,19 @@ function Carousel({
       </CarouselContext.Provider>
     )
   }
+)
+Carousel.displayName = "Carousel"
 
-function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
+const CarouselContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
   const { carouselRef, orientation } = useCarousel()
 
   return (
+    <div ref={carouselRef} className="overflow-hidden">
       <div
-      ref={carouselRef}
+        ref={ref}
-      className="overflow-hidden"
-      data-slot="carousel-content"
-    >
-      <div
         className={cn(
           "flex",
           orientation === "horizontal" ? "-ml-4" : "-mt-4 flex-col",
@@ -151,16 +167,20 @@ function CarouselContent({ className, ...props }: React.ComponentProps<"div">) {
       />
     </div>
   )
-}
+})
+CarouselContent.displayName = "CarouselContent"
 
-function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
+const CarouselItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
   const { orientation } = useCarousel()
 
   return (
     <div
+      ref={ref}
       role="group"
       aria-roledescription="slide"
-      data-slot="carousel-item"
       className={cn(
         "min-w-0 shrink-0 grow-0 basis-full",
         orientation === "horizontal" ? "pl-4" : "pt-4",
@@ -169,25 +189,24 @@ function CarouselItem({ className, ...props }: React.ComponentProps<"div">) {
       {...props}
     />
   )
-}
+})
+CarouselItem.displayName = "CarouselItem"
 
-function CarouselPrevious({
+const CarouselPrevious = React.forwardRef<
-  className,
+  HTMLButtonElement,
-  variant = "outline",
+  React.ComponentProps<typeof Button>
-  size = "icon",
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  ...props
-}: React.ComponentProps<typeof Button>) {
   const { orientation, scrollPrev, canScrollPrev } = useCarousel()
 
   return (
     <Button
-      data-slot="carousel-previous"
+      ref={ref}
       variant={variant}
       size={size}
       className={cn(
-        "absolute size-8 rounded-full",
+        "absolute  h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "top-1/2 -left-12 -translate-y-1/2"
+          ? "-left-12 top-1/2 -translate-y-1/2"
           : "-top-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
@@ -195,29 +214,28 @@ function CarouselPrevious({
       onClick={scrollPrev}
       {...props}
     >
-      <ArrowLeft />
+      <ArrowLeft className="h-4 w-4" />
       <span className="sr-only">Previous slide</span>
     </Button>
   )
-}
+})
+CarouselPrevious.displayName = "CarouselPrevious"
 
-function CarouselNext({
+const CarouselNext = React.forwardRef<
-  className,
+  HTMLButtonElement,
-  variant = "outline",
+  React.ComponentProps<typeof Button>
-  size = "icon",
+>(({ className, variant = "outline", size = "icon", ...props }, ref) => {
-  ...props
-}: React.ComponentProps<typeof Button>) {
   const { orientation, scrollNext, canScrollNext } = useCarousel()
 
   return (
     <Button
-      data-slot="carousel-next"
+      ref={ref}
       variant={variant}
       size={size}
       className={cn(
-        "absolute size-8 rounded-full",
+        "absolute h-8 w-8 rounded-full",
         orientation === "horizontal"
-          ? "top-1/2 -right-12 -translate-y-1/2"
+          ? "-right-12 top-1/2 -translate-y-1/2"
           : "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
         className
       )}
@@ -225,11 +243,12 @@ function CarouselNext({
       onClick={scrollNext}
       {...props}
     >
-      <ArrowRight />
+      <ArrowRight className="h-4 w-4" />
       <span className="sr-only">Next slide</span>
     </Button>
   )
-}
+})
+CarouselNext.displayName = "CarouselNext"
 
 export {
   type CarouselApi,

src/components/ui/checkbox.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
 import { CheckIcon } from "lucide-react"
@@ -21,7 +19,7 @@ function Checkbox({
     >
       <CheckboxPrimitive.Indicator
         data-slot="checkbox-indicator"
-        className="flex items-center justify-center text-current transition-none"
+        className="grid place-content-center text-current transition-none"
       >
         <CheckIcon className="size-3.5" />
       </CheckboxPrimitive.Indicator>
@@ -30,3 +28,4 @@ function Checkbox({
 }
 
 export { Checkbox }
+

src/components/ui/collapsible.tsx

@@ -1,31 +1,11 @@
+"use client"
+
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible"
 
-function Collapsible({
+const Collapsible = CollapsiblePrimitive.Root
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.Root>) {
-  return <CollapsiblePrimitive.Root data-slot="collapsible" {...props} />
-}
 
-function CollapsibleTrigger({
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleTrigger>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleTrigger
-      data-slot="collapsible-trigger"
-      {...props}
-    />
-  )
-}
 
-function CollapsibleContent({
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent
-  ...props
-}: React.ComponentProps<typeof CollapsiblePrimitive.CollapsibleContent>) {
-  return (
-    <CollapsiblePrimitive.CollapsibleContent
-      data-slot="collapsible-content"
-      {...props}
-    />
-  )
-}
 
 export { Collapsible, CollapsibleTrigger, CollapsibleContent }

src/components/ui/command.tsx

@@ -1,58 +1,33 @@
 "use client"
 
 import * as React from "react"
+import { type DialogProps } from "@radix-ui/react-dialog"
 import { Command as CommandPrimitive } from "cmdk"
-import { SearchIcon } from "lucide-react"
+import { Search } from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import {
+import { Dialog, DialogContent } from "@/components/ui/dialog"
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog"
 
-function Command({
+const Command = React.forwardRef<
-  className,
+  React.ElementRef<typeof CommandPrimitive>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
-}: React.ComponentProps<typeof CommandPrimitive>) {
+>(({ className, ...props }, ref) => (
-  return (
   <CommandPrimitive
-      data-slot="command"
+    ref={ref}
     className={cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+      "flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground",
       className
     )}
     {...props}
   />
-  )
+))
-}
+Command.displayName = CommandPrimitive.displayName
 
-function CommandDialog({
+const CommandDialog = ({ children, ...props }: DialogProps) => {
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}: React.ComponentProps<typeof Dialog> & {
-  title?: string
-  description?: string
-  className?: string
-  showCloseButton?: boolean
-}) {
   return (
     <Dialog {...props}>
-      <DialogHeader className="sr-only">
+      <DialogContent className="overflow-hidden p-0">
-        <DialogTitle>{title}</DialogTitle>
+        <Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
-        <DialogDescription>{description}</DialogDescription>
-      </DialogHeader>
-      <DialogContent
-        className={cn("overflow-hidden p-0", className)}
-        showCloseButton={showCloseButton}
-      >
-        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
           {children}
         </Command>
       </DialogContent>
@@ -60,116 +35,110 @@ function CommandDialog({
   )
 }
 
-function CommandInput({
+const CommandInput = React.forwardRef<
-  className,
+  React.ElementRef<typeof CommandPrimitive.Input>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
-}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-    <div
+    <Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
-      data-slot="command-input-wrapper"
-      className="flex h-9 items-center gap-2 border-b px-3"
-    >
-      <SearchIcon className="size-4 shrink-0 opacity-50" />
     <CommandPrimitive.Input
-        data-slot="command-input"
+      ref={ref}
       className={cn(
-          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+        "flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50",
         className
       )}
       {...props}
     />
   </div>
-  )
+))
-}
 
-function CommandList({
+CommandInput.displayName = CommandPrimitive.Input.displayName
-  className,
+
-  ...props
+const CommandList = React.forwardRef<
-}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  React.ElementRef<typeof CommandPrimitive.List>,
-  return (
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
   <CommandPrimitive.List
-      data-slot="command-list"
+    ref={ref}
-      className={cn(
+    className={cn("max-h-[300px] overflow-y-auto overflow-x-hidden", className)}
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      )}
     {...props}
   />
-  )
+))
-}
 
-function CommandEmpty({
+CommandList.displayName = CommandPrimitive.List.displayName
-  ...props
+
-}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+const CommandEmpty = React.forwardRef<
-  return (
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
   <CommandPrimitive.Empty
-      data-slot="command-empty"
+    ref={ref}
     className="py-6 text-center text-sm"
     {...props}
   />
-  )
+))
-}
 
-function CommandGroup({
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName
-  className,
+
-  ...props
+const CommandGroup = React.forwardRef<
-}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  React.ElementRef<typeof CommandPrimitive.Group>,
-  return (
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
   <CommandPrimitive.Group
-      data-slot="command-group"
+    ref={ref}
     className={cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+      "overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground",
       className
     )}
     {...props}
   />
-  )
+))
-}
 
-function CommandSeparator({
+CommandGroup.displayName = CommandPrimitive.Group.displayName
-  className,
+
-  ...props
+const CommandSeparator = React.forwardRef<
-}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  React.ElementRef<typeof CommandPrimitive.Separator>,
-  return (
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
   <CommandPrimitive.Separator
-      data-slot="command-separator"
+    ref={ref}
-      className={cn("bg-border -mx-1 h-px", className)}
+    className={cn("-mx-1 h-px bg-border", className)}
     {...props}
   />
-  )
+))
-}
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName
 
-function CommandItem({
+const CommandItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof CommandPrimitive.Item>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
-}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+>(({ className, ...props }, ref) => (
-  return (
   <CommandPrimitive.Item
-      data-slot="command-item"
+    ref={ref}
     className={cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
       className
     )}
     {...props}
   />
-  )
+))
-}
 
-function CommandShortcut({
+CommandItem.displayName = CommandPrimitive.Item.displayName
+
+const CommandShortcut = ({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      data-slot="command-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
     />
   )
 }
+CommandShortcut.displayName = "CommandShortcut"
 
 export {
   Command,

src/components/ui/context-menu.tsx

@@ -1,237 +1,183 @@
-"use client"
-
 import * as React from "react"
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function ContextMenu({
+const ContextMenu = ContextMenuPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Root>) {
-  return <ContextMenuPrimitive.Root data-slot="context-menu" {...props} />
-}
 
-function ContextMenuTrigger({
+const ContextMenuTrigger = ContextMenuPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Trigger>) {
-  return (
-    <ContextMenuPrimitive.Trigger data-slot="context-menu-trigger" {...props} />
-  )
-}
 
-function ContextMenuGroup({
+const ContextMenuGroup = ContextMenuPrimitive.Group
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Group>) {
-  return (
-    <ContextMenuPrimitive.Group data-slot="context-menu-group" {...props} />
-  )
-}
 
-function ContextMenuPortal({
+const ContextMenuPortal = ContextMenuPrimitive.Portal
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Portal>) {
-  return (
-    <ContextMenuPrimitive.Portal data-slot="context-menu-portal" {...props} />
-  )
-}
 
-function ContextMenuSub({
+const ContextMenuSub = ContextMenuPrimitive.Sub
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Sub>) {
-  return <ContextMenuPrimitive.Sub data-slot="context-menu-sub" {...props} />
-}
 
-function ContextMenuRadioGroup({
+const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioGroup>) {
-  return (
-    <ContextMenuPrimitive.RadioGroup
-      data-slot="context-menu-radio-group"
-      {...props}
-    />
-  )
-}
 
-function ContextMenuSubTrigger({
+const ContextMenuSubTrigger = React.forwardRef<
-  className,
+  React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
-  inset,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
-  children,
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubTrigger> & {
     inset?: boolean
-}) {
+  }
-  return (
+>(({ className, inset, children, ...props }, ref) => (
   <ContextMenuPrimitive.SubTrigger
-      data-slot="context-menu-sub-trigger"
+    ref={ref}
-      data-inset={inset}
     className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-      <ChevronRightIcon className="ml-auto" />
+    <ChevronRight className="ml-auto h-4 w-4" />
   </ContextMenuPrimitive.SubTrigger>
-  )
+))
-}
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 
-function ContextMenuSubContent({
+const ContextMenuSubContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
-}: React.ComponentProps<typeof ContextMenuPrimitive.SubContent>) {
+>(({ className, ...props }, ref) => (
-  return (
   <ContextMenuPrimitive.SubContent
-      data-slot="context-menu-sub-content"
+    ref={ref}
     className={cn(
-        "bg-popover text-popover-foreground 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-[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 min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[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 origin-[--radix-context-menu-content-transform-origin]",
       className
     )}
     {...props}
   />
-  )
+))
-}
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 
-function ContextMenuContent({
+const ContextMenuContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof ContextMenuPrimitive.Content>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
-}: React.ComponentProps<typeof ContextMenuPrimitive.Content>) {
+>(({ className, ...props }, ref) => (
-  return (
   <ContextMenuPrimitive.Portal>
     <ContextMenuPrimitive.Content
-        data-slot="context-menu-content"
+      ref={ref}
       className={cn(
-          "bg-popover text-popover-foreground 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-[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 max-h-(--radix-context-menu-content-available-height) min-w-[8rem] origin-(--radix-context-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        "z-50 max-h-[--radix-context-menu-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md 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-[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 origin-[--radix-context-menu-content-transform-origin]",
         className
       )}
       {...props}
     />
   </ContextMenuPrimitive.Portal>
-  )
+))
-}
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 
-function ContextMenuItem({
+const ContextMenuItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof ContextMenuPrimitive.Item>,
-  inset,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Item> & {
     inset?: boolean
-  variant?: "default" | "destructive"
+  }
-}) {
+>(({ className, inset, ...props }, ref) => (
-  return (
   <ContextMenuPrimitive.Item
-      data-slot="context-menu-item"
+    ref={ref}
-      data-inset={inset}
-      data-variant={variant}
     className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
       className
     )}
     {...props}
   />
-  )
+))
-}
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 
-function ContextMenuCheckboxItem({
+const ContextMenuCheckboxItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
-  children,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
-  checked,
+>(({ className, children, checked, ...props }, ref) => (
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.CheckboxItem>) {
-  return (
   <ContextMenuPrimitive.CheckboxItem
-      data-slot="context-menu-checkbox-item"
+    ref={ref}
     className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+        <Check className="h-4 w-4" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </ContextMenuPrimitive.CheckboxItem>
-  )
+))
-}
+ContextMenuCheckboxItem.displayName =
+  ContextMenuPrimitive.CheckboxItem.displayName
 
-function ContextMenuRadioItem({
+const ContextMenuRadioItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
-  children,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof ContextMenuPrimitive.RadioItem>) {
-  return (
   <ContextMenuPrimitive.RadioItem
-      data-slot="context-menu-radio-item"
+    ref={ref}
     className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <ContextMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
+        <Circle className="h-4 w-4 fill-current" />
       </ContextMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </ContextMenuPrimitive.RadioItem>
-  )
+))
-}
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
 
-function ContextMenuLabel({
+const ContextMenuLabel = React.forwardRef<
-  className,
+  React.ElementRef<typeof ContextMenuPrimitive.Label>,
-  inset,
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
-  ...props
-}: React.ComponentProps<typeof ContextMenuPrimitive.Label> & {
     inset?: boolean
-}) {
+  }
-  return (
+>(({ className, inset, ...props }, ref) => (
   <ContextMenuPrimitive.Label
-      data-slot="context-menu-label"
+    ref={ref}
-      data-inset={inset}
     className={cn(
-        "text-foreground px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
       className
     )}
     {...props}
   />
-  )
+))
-}
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
 
-function ContextMenuSeparator({
+const ContextMenuSeparator = React.forwardRef<
-  className,
+  React.ElementRef<typeof ContextMenuPrimitive.Separator>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
-}: React.ComponentProps<typeof ContextMenuPrimitive.Separator>) {
+>(({ className, ...props }, ref) => (
-  return (
   <ContextMenuPrimitive.Separator
-      data-slot="context-menu-separator"
+    ref={ref}
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+    className={cn("-mx-1 my-1 h-px bg-border", className)}
     {...props}
   />
-  )
+))
-}
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
 
-function ContextMenuShortcut({
+const ContextMenuShortcut = ({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      data-slot="context-menu-shortcut"
       className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
     />
   )
 }
+ContextMenuShortcut.displayName = "ContextMenuShortcut"
 
 export {
   ContextMenu,

src/components/ui/dialog.tsx

@@ -1,141 +1,122 @@
+"use client"
+
 import * as React from "react"
 import * as DialogPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Dialog({
+const Dialog = DialogPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Root>) {
-  return <DialogPrimitive.Root data-slot="dialog" {...props} />
-}
 
-function DialogTrigger({
+const DialogTrigger = DialogPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
-  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
-}
 
-function DialogPortal({
+const DialogPortal = DialogPrimitive.Portal
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Portal>) {
-  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
-}
 
-function DialogClose({
+const DialogClose = DialogPrimitive.Close
-  ...props
-}: React.ComponentProps<typeof DialogPrimitive.Close>) {
-  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
-}
 
-function DialogOverlay({
+const DialogOverlay = React.forwardRef<
-  className,
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
-}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+>(({ className, ...props }, ref) => (
-  return (
   <DialogPrimitive.Overlay
-      data-slot="dialog-overlay"
+    ref={ref}
     className={cn(
-        "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",
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
   />
-  )
+))
-}
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
-function DialogContent({
+const DialogContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof DialogPrimitive.Content>,
-  children,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
-  showCloseButton = true,
+>(({ className, children, ...props }, ref) => (
-  ...props
+  <DialogPortal>
-}: React.ComponentProps<typeof DialogPrimitive.Content> & {
-  showCloseButton?: boolean
-}) {
-  return (
-    <DialogPortal data-slot="dialog-portal">
     <DialogOverlay />
     <DialogPrimitive.Content
-        data-slot="dialog-content"
+      ref={ref}
       className={cn(
-          "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",
+        "fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 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 sm:rounded-lg",
         className
       )}
       {...props}
     >
       {children}
-        {showCloseButton && (
+      <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">
-          <DialogPrimitive.Close
+        <X className="h-4 w-4" />
-            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
 
-function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+const DialogHeader = ({
-  return (
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-      data-slot="dialog-header"
-      className={cn("flex flex-col gap-2 text-center sm:text-left", className)}
-      {...props}
-    />
-  )
-}
-
-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",
+      "flex flex-col space-y-1.5 text-center sm:text-left",
       className
     )}
     {...props}
   />
 )
-}
+DialogHeader.displayName = "DialogHeader"
 
-function DialogTitle({
+const DialogFooter = ({
   className,
   ...props
-}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+DialogFooter.displayName = "DialogFooter"
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
-      data-slot="dialog-title"
+    ref={ref}
-      className={cn("text-lg leading-none font-semibold", className)}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
     {...props}
   />
-  )
+))
-}
+DialogTitle.displayName = DialogPrimitive.Title.displayName
 
-function DialogDescription({
+const DialogDescription = React.forwardRef<
-  className,
+  React.ElementRef<typeof DialogPrimitive.Description>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
-}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+>(({ className, ...props }, ref) => (
-  return (
   <DialogPrimitive.Description
-      data-slot="dialog-description"
+    ref={ref}
-      className={cn("text-muted-foreground text-sm", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-  )
+))
-}
+DialogDescription.displayName = DialogPrimitive.Description.displayName
 
 export {
   Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
   DialogClose,
   DialogContent,
-  DialogDescription,
-  DialogFooter,
   DialogHeader,
-  DialogOverlay,
+  DialogFooter,
-  DialogPortal,
   DialogTitle,
-  DialogTrigger,
+  DialogDescription,
 }

src/components/ui/drawer.tsx

@@ -3,121 +3,104 @@ import { Drawer as DrawerPrimitive } from "vaul"
 
 import { cn } from "@/lib/utils"
 
-function Drawer({
+const Drawer = ({
+  shouldScaleBackground = true,
   ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Root>) {
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  return <DrawerPrimitive.Root data-slot="drawer" {...props} />
+  <DrawerPrimitive.Root
-}
+    shouldScaleBackground={shouldScaleBackground}
-
-function DrawerTrigger({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Trigger>) {
-  return <DrawerPrimitive.Trigger data-slot="drawer-trigger" {...props} />
-}
-
-function DrawerPortal({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Portal>) {
-  return <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
-}
-
-function DrawerClose({
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Close>) {
-  return <DrawerPrimitive.Close data-slot="drawer-close" {...props} />
-}
-
-function DrawerOverlay({
-  className,
-  ...props
-}: React.ComponentProps<typeof DrawerPrimitive.Overlay>) {
-  return (
-    <DrawerPrimitive.Overlay
-      data-slot="drawer-overlay"
-      className={cn(
-        "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}
   />
 )
-}
+Drawer.displayName = "Drawer"
 
-function DrawerContent({
+const DrawerTrigger = DrawerPrimitive.Trigger
-  className,
+
-  children,
+const DrawerPortal = DrawerPrimitive.Portal
-  ...props
+
-}: React.ComponentProps<typeof DrawerPrimitive.Content>) {
+const DrawerClose = DrawerPrimitive.Close
-  return (
+
-    <DrawerPortal data-slot="drawer-portal">
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    className={cn("fixed inset-0 z-50 bg-black/80", className)}
+    {...props}
+  />
+))
+DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DrawerPortal>
     <DrawerOverlay />
     <DrawerPrimitive.Content
-        data-slot="drawer-content"
+      ref={ref}
       className={cn(
-          "group/drawer-content bg-background fixed z-50 flex h-auto flex-col",
+        "fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background",
-          "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
-          "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
-          "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
-          "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
         className
       )}
       {...props}
     >
-        <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+      <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
       {children}
     </DrawerPrimitive.Content>
   </DrawerPortal>
-  )
+))
-}
+DrawerContent.displayName = "DrawerContent"
 
-function DrawerHeader({ className, ...props }: React.ComponentProps<"div">) {
+const DrawerHeader = ({
-  return (
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-      data-slot="drawer-header"
+    className={cn("grid gap-1.5 p-4 text-center sm:text-left", className)}
-      className={cn(
-        "flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left",
-        className
-      )}
     {...props}
   />
 )
-}
+DrawerHeader.displayName = "DrawerHeader"
 
-function DrawerFooter({ className, ...props }: React.ComponentProps<"div">) {
+const DrawerFooter = ({
-  return (
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
   <div
-      data-slot="drawer-footer"
     className={cn("mt-auto flex flex-col gap-2 p-4", className)}
     {...props}
   />
 )
-}
+DrawerFooter.displayName = "DrawerFooter"
 
-function DrawerTitle({
+const DrawerTitle = React.forwardRef<
-  className,
+  React.ElementRef<typeof DrawerPrimitive.Title>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
-}: React.ComponentProps<typeof DrawerPrimitive.Title>) {
+>(({ className, ...props }, ref) => (
-  return (
   <DrawerPrimitive.Title
-      data-slot="drawer-title"
+    ref={ref}
-      className={cn("text-foreground font-semibold", className)}
+    className={cn(
+      "text-lg font-semibold leading-none tracking-tight",
+      className
+    )}
     {...props}
   />
-  )
+))
-}
+DrawerTitle.displayName = DrawerPrimitive.Title.displayName
 
-function DrawerDescription({
+const DrawerDescription = React.forwardRef<
-  className,
+  React.ElementRef<typeof DrawerPrimitive.Description>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
-}: React.ComponentProps<typeof DrawerPrimitive.Description>) {
+>(({ className, ...props }, ref) => (
-  return (
   <DrawerPrimitive.Description
-      data-slot="drawer-description"
+    ref={ref}
-      className={cn("text-muted-foreground text-sm", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-  )
+))
-}
+DrawerDescription.displayName = DrawerPrimitive.Description.displayName
 
 export {
   Drawer,

src/components/ui/dropdown-menu.tsx

@@ -2,256 +2,200 @@
 
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function DropdownMenu({
+const DropdownMenu = DropdownMenuPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {
-  return <DropdownMenuPrimitive.Root data-slot="dropdown-menu" {...props} />
-}
 
-function DropdownMenuPortal({
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Portal>) {
-  return (
-    <DropdownMenuPrimitive.Portal data-slot="dropdown-menu-portal" {...props} />
-  )
-}
 
-function DropdownMenuTrigger({
+const DropdownMenuGroup = DropdownMenuPrimitive.Group
-  ...props
+
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal
-  return (
+
-    <DropdownMenuPrimitive.Trigger
+const DropdownMenuSub = DropdownMenuPrimitive.Sub
-      data-slot="dropdown-menu-trigger"
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <ChevronRight className="ml-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+))
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[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 origin-[--radix-dropdown-menu-content-transform-origin]",
+      className
+    )}
     {...props}
   />
-  )
+))
-}
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName
 
-function DropdownMenuContent({
+const DropdownMenuContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  sideOffset = 4,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
-  ...props
+>(({ className, sideOffset = 4, ...props }, ref) => (
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {
-  return (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
-        data-slot="dropdown-menu-content"
+      ref={ref}
       sideOffset={sideOffset}
       className={cn(
-          "bg-popover text-popover-foreground 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-[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 max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md",
+        "z-50 max-h-[var(--radix-dropdown-menu-content-available-height)] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
+        "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-[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 origin-[--radix-dropdown-menu-content-transform-origin]",
         className
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-  )
+))
-}
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
-function DropdownMenuGroup({
+const DropdownMenuItem = React.forwardRef<
-  ...props
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-  return (
-    <DropdownMenuPrimitive.Group data-slot="dropdown-menu-group" {...props} />
-  )
-}
-
-function DropdownMenuItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {
     inset?: boolean
-  variant?: "default" | "destructive"
+  }
-}) {
+>(({ className, inset, ...props }, ref) => (
-  return (
   <DropdownMenuPrimitive.Item
-      data-slot="dropdown-menu-item"
+    ref={ref}
-      data-inset={inset}
-      data-variant={variant}
     className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
       className
     )}
     {...props}
   />
-  )
+))
-}
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
-function DropdownMenuCheckboxItem({
+const DropdownMenuCheckboxItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
-  children,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
-  checked,
+>(({ className, children, checked, ...props }, ref) => (
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {
-  return (
   <DropdownMenuPrimitive.CheckboxItem
-      data-slot="dropdown-menu-checkbox-item"
+    ref={ref}
     className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     checked={checked}
     {...props}
   >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+        <Check className="h-4 w-4" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-  )
+))
-}
+DropdownMenuCheckboxItem.displayName =
+  DropdownMenuPrimitive.CheckboxItem.displayName
 
-function DropdownMenuRadioGroup({
+const DropdownMenuRadioItem = React.forwardRef<
-  ...props
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>) {
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
-  return (
+>(({ className, children, ...props }, ref) => (
-    <DropdownMenuPrimitive.RadioGroup
-      data-slot="dropdown-menu-radio-group"
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {
-  return (
   <DropdownMenuPrimitive.RadioItem
-      data-slot="dropdown-menu-radio-item"
+    ref={ref}
     className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
       <DropdownMenuPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
+        <Circle className="h-2 w-2 fill-current" />
       </DropdownMenuPrimitive.ItemIndicator>
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-  )
+))
-}
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
-function DropdownMenuLabel({
+const DropdownMenuLabel = React.forwardRef<
-  className,
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  inset,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & {
     inset?: boolean
-}) {
+  }
-  return (
+>(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
-      data-slot="dropdown-menu-label"
+    ref={ref}
-      data-inset={inset}
     className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
       className
     )}
     {...props}
   />
-  )
+))
-}
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
-function DropdownMenuSeparator({
+const DropdownMenuSeparator = React.forwardRef<
-  className,
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {
+>(({ className, ...props }, ref) => (
-  return (
   <DropdownMenuPrimitive.Separator
-      data-slot="dropdown-menu-separator"
+    ref={ref}
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-  )
+))
-}
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 
-function DropdownMenuShortcut({
+const DropdownMenuShortcut = ({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
     <span
-      data-slot="dropdown-menu-shortcut"
+      className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function DropdownMenuSub({
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {
-  return <DropdownMenuPrimitive.Sub data-slot="dropdown-menu-sub" {...props} />
-}
-
-function DropdownMenuSubTrigger({
-  className,
-  inset,
-  children,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & {
-  inset?: boolean
-}) {
-  return (
-    <DropdownMenuPrimitive.SubTrigger
-      data-slot="dropdown-menu-sub-trigger"
-      data-inset={inset}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    >
-      {children}
-      <ChevronRightIcon className="ml-auto size-4" />
-    </DropdownMenuPrimitive.SubTrigger>
-  )
-}
-
-function DropdownMenuSubContent({
-  className,
-  ...props
-}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {
-  return (
-    <DropdownMenuPrimitive.SubContent
-      data-slot="dropdown-menu-sub-content"
-      className={cn(
-        "bg-popover text-popover-foreground 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-[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 min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
-        className
-      )}
       {...props}
     />
   )
 }
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
 
 export {
   DropdownMenu,
-  DropdownMenuPortal,
   DropdownMenuTrigger,
   DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
   DropdownMenuItem,
   DropdownMenuCheckboxItem,
-  DropdownMenuRadioGroup,
   DropdownMenuRadioItem,
+  DropdownMenuLabel,
   DropdownMenuSeparator,
   DropdownMenuShortcut,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
   DropdownMenuSub,
-  DropdownMenuSubTrigger,
   DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuRadioGroup,
 }

src/components/ui/empty.tsx

@@ -0,0 +1,104 @@
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+function Empty({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty"
+      className={cn(
+        "flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-header"
+      className={cn(
+        "flex max-w-sm flex-col items-center gap-2 text-center",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const emptyMediaVariants = cva(
+  "mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function EmptyMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>) {
+  return (
+    <div
+      data-slot="empty-icon"
+      data-variant={variant}
+      className={cn(emptyMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function EmptyTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-title"
+      className={cn("text-lg font-medium tracking-tight", className)}
+      {...props}
+    />
+  )
+}
+
+function EmptyDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <div
+      data-slot="empty-description"
+      className={cn(
+        "text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function EmptyContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="empty-content"
+      className={cn(
+        "flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Empty,
+  EmptyHeader,
+  EmptyTitle,
+  EmptyDescription,
+  EmptyContent,
+  EmptyMedia,
+}

src/components/ui/field.tsx

@@ -0,0 +1,244 @@
+"use client"
+
+import { useMemo } from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-6",
+        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-3 font-medium",
+        "data-[variant=legend]:text-base",
+        "data-[variant=label]:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field data-[invalid=true]:text-destructive flex w-full gap-3",
+  {
+    variants: {
+      orientation: {
+        vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+        horizontal: [
+          "flex-row items-center",
+          "[&>[data-slot=field-label]]:flex-auto",
+          "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
+        ],
+        responsive: [
+          "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+          "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+          "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        ],
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  }
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4",
+        "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance",
+        "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="bg-background text-muted-foreground relative mx-auto block w-fit px-2"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors) {
+      return null
+    }
+
+    if (errors?.length === 1 && errors[0]?.message) {
+      return errors[0].message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {errors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-destructive text-sm font-normal", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldLabel,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldContent,
+  FieldTitle,
+}

src/components/ui/form.tsx

@@ -5,7 +5,6 @@ import {
   Controller,
   FormProvider,
   useFormContext,
-  useFormState,
   type ControllerProps,
   type FieldPath,
   type FieldValues,
@@ -18,18 +17,16 @@ const Form = FormProvider
 
 type FormFieldContextValue<
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 > = {
   name: TName
 }
 
-const FormFieldContext = React.createContext<FormFieldContextValue>(
+const FormFieldContext = React.createContext<FormFieldContextValue | null>(null)
-  {} as FormFieldContextValue
-)
 
 const FormField = <
   TFieldValues extends FieldValues = FieldValues,
-  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
 >({
   ...props
 }: ControllerProps<TFieldValues, TName>) => {
@@ -43,14 +40,18 @@ const FormField = <
 const useFormField = () => {
   const fieldContext = React.useContext(FormFieldContext)
   const itemContext = React.useContext(FormItemContext)
-  const { getFieldState } = useFormContext()
+  const { getFieldState, formState } = useFormContext()
-  const formState = useFormState({ name: fieldContext.name })
-  const fieldState = getFieldState(fieldContext.name, formState)
 
   if (!fieldContext) {
     throw new Error("useFormField should be used within <FormField>")
   }
 
+  if (!itemContext) {
+    throw new Error("useFormField should be used within <FormItem>")
+  }
+
+  const fieldState = getFieldState(fieldContext.name, formState)
+
   const { id } = itemContext
 
   return {
@@ -67,47 +68,48 @@ type FormItemContextValue = {
   id: string
 }
 
-const FormItemContext = React.createContext<FormItemContextValue>(
+const FormItemContext = React.createContext<FormItemContextValue | null>(null)
-  {} as FormItemContextValue
-)
 
-function FormItem({ className, ...props }: React.ComponentProps<"div">) {
+const FormItem = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => {
   const id = React.useId()
 
   return (
     <FormItemContext.Provider value={{ id }}>
-      <div
+      <div ref={ref} className={cn("space-y-2", className)} {...props} />
-        data-slot="form-item"
-        className={cn("grid gap-2", className)}
-        {...props}
-      />
     </FormItemContext.Provider>
   )
-}
+})
+FormItem.displayName = "FormItem"
 
-function FormLabel({
+const FormLabel = React.forwardRef<
-  className,
+  React.ElementRef<typeof LabelPrimitive.Root>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+>(({ className, ...props }, ref) => {
   const { error, formItemId } = useFormField()
 
   return (
     <Label
-      data-slot="form-label"
+      ref={ref}
-      data-error={!!error}
+      className={cn(error && "text-destructive", className)}
-      className={cn("data-[error=true]:text-destructive", className)}
       htmlFor={formItemId}
       {...props}
     />
   )
-}
+})
+FormLabel.displayName = "FormLabel"
 
-function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 
   return (
     <Slot
-      data-slot="form-control"
+      ref={ref}
       id={formItemId}
       aria-describedby={
         !error
@@ -118,24 +120,32 @@ function FormControl({ ...props }: React.ComponentProps<typeof Slot>) {
       {...props}
     />
   )
-}
+})
+FormControl.displayName = "FormControl"
 
-function FormDescription({ className, ...props }: React.ComponentProps<"p">) {
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
   const { formDescriptionId } = useFormField()
 
   return (
     <p
-      data-slot="form-description"
+      ref={ref}
       id={formDescriptionId}
-      className={cn("text-muted-foreground text-sm", className)}
+      className={cn("text-[0.8rem] text-muted-foreground", className)}
       {...props}
     />
   )
-}
+})
+FormDescription.displayName = "FormDescription"
 
-function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
   const { error, formMessageId } = useFormField()
-  const body = error ? String(error?.message ?? "") : props.children
+  const body = error ? String(error?.message ?? "") : children
 
   if (!body) {
     return null
@@ -143,15 +153,16 @@ function FormMessage({ className, ...props }: React.ComponentProps<"p">) {
 
   return (
     <p
-      data-slot="form-message"
+      ref={ref}
       id={formMessageId}
-      className={cn("text-destructive text-sm", className)}
+      className={cn("text-[0.8rem] font-medium text-destructive", className)}
       {...props}
     >
       {body}
     </p>
   )
-}
+})
+FormMessage.displayName = "FormMessage"
 
 export {
   useFormField,

src/components/ui/hover-card.tsx

@@ -3,40 +3,25 @@ import * as HoverCardPrimitive from "@radix-ui/react-hover-card"
 
 import { cn } from "@/lib/utils"
 
-function HoverCard({
+const HoverCard = HoverCardPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Root>) {
-  return <HoverCardPrimitive.Root data-slot="hover-card" {...props} />
-}
 
-function HoverCardTrigger({
+const HoverCardTrigger = HoverCardPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Trigger>) {
-  return (
-    <HoverCardPrimitive.Trigger data-slot="hover-card-trigger" {...props} />
-  )
-}
 
-function HoverCardContent({
+const HoverCardContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof HoverCardPrimitive.Content>,
-  align = "center",
+  React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
-  sideOffset = 4,
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  ...props
-}: React.ComponentProps<typeof HoverCardPrimitive.Content>) {
-  return (
-    <HoverCardPrimitive.Portal data-slot="hover-card-portal">
   <HoverCardPrimitive.Content
-        data-slot="hover-card-content"
+    ref={ref}
     align={align}
     sideOffset={sideOffset}
     className={cn(
-          "bg-popover text-popover-foreground 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-[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-64 origin-(--radix-hover-card-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+      "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[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 origin-[--radix-hover-card-content-transform-origin]",
       className
     )}
     {...props}
   />
-    </HoverCardPrimitive.Portal>
+))
-  )
+HoverCardContent.displayName = HoverCardPrimitive.Content.displayName
-}
 
 export { HoverCard, HoverCardTrigger, HoverCardContent }

src/components/ui/input-group.tsx

@@ -0,0 +1,168 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+
+function InputGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="input-group"
+      role="group"
+      className={cn(
+        "group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]",
+        "h-9 has-[>textarea]:h-auto",
+
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2",
+        "has-[>[data-align=inline-end]]:[&>input]:pr-2",
+        "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3",
+        "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3",
+
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1",
+
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40",
+
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+const inputGroupAddonVariants = cva(
+  "text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      align: {
+        "inline-start":
+          "order-first pl-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+        "inline-end":
+          "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+        "block-start":
+          "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+        "block-end":
+          "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5",
+      },
+    },
+    defaultVariants: {
+      align: "inline-start",
+    },
+  }
+)
+
+function InputGroupAddon({
+  className,
+  align = "inline-start",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="input-group-addon"
+      data-align={align}
+      className={cn(inputGroupAddonVariants({ align }), className)}
+      onClick={(e) => {
+        if ((e.target as HTMLElement).closest("button")) {
+          return
+        }
+        e.currentTarget.parentElement?.querySelector("input")?.focus()
+      }}
+      {...props}
+    />
+  )
+}
+
+const inputGroupButtonVariants = cva(
+  "flex items-center gap-2 text-sm shadow-none",
+  {
+    variants: {
+      size: {
+        xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+        sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+        "icon-xs":
+          "size-6 rounded-[calc(var(--radius)-5px)] p-0 has-[>svg]:p-0",
+        "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+      },
+    },
+    defaultVariants: {
+      size: "xs",
+    },
+  }
+)
+
+function InputGroupButton({
+  className,
+  type = "button",
+  variant = "ghost",
+  size = "xs",
+  ...props
+}: Omit<React.ComponentProps<typeof Button>, "size"> &
+  VariantProps<typeof inputGroupButtonVariants>) {
+  return (
+    <Button
+      type={type}
+      data-size={size}
+      variant={variant}
+      className={cn(inputGroupButtonVariants({ size }), className)}
+      {...props}
+    />
+  )
+}
+
+function InputGroupText({ className, ...props }: React.ComponentProps<"span">) {
+  return (
+    <span
+      className={cn(
+        "text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupInput({
+  className,
+  ...props
+}: React.ComponentProps<"input">) {
+  return (
+    <Input
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function InputGroupTextarea({
+  className,
+  ...props
+}: React.ComponentProps<"textarea">) {
+  return (
+    <Textarea
+      data-slot="input-group-control"
+      className={cn(
+        "flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  InputGroup,
+  InputGroupAddon,
+  InputGroupButton,
+  InputGroupText,
+  InputGroupInput,
+  InputGroupTextarea,
+}

src/components/ui/input-otp.tsx

@@ -1,57 +1,46 @@
-"use client"
-
 import * as React from "react"
 import { OTPInput, OTPInputContext } from "input-otp"
-import { MinusIcon } from "lucide-react"
+import { Minus } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function InputOTP({
+const InputOTP = React.forwardRef<
-  className,
+  React.ElementRef<typeof OTPInput>,
-  containerClassName,
+  React.ComponentPropsWithoutRef<typeof OTPInput>
-  ...props
+>(({ className, containerClassName, ...props }, ref) => (
-}: React.ComponentProps<typeof OTPInput> & {
-  containerClassName?: string
-}) {
-  return (
   <OTPInput
-      data-slot="input-otp"
+    ref={ref}
     containerClassName={cn(
-        "flex items-center gap-2 has-disabled:opacity-50",
+      "flex items-center gap-2 has-[:disabled]:opacity-50",
       containerClassName
     )}
     className={cn("disabled:cursor-not-allowed", className)}
     {...props}
   />
-  )
+))
-}
+InputOTP.displayName = "InputOTP"
 
-function InputOTPGroup({ className, ...props }: React.ComponentProps<"div">) {
+const InputOTPGroup = React.forwardRef<
-  return (
+  React.ElementRef<"div">,
-    <div
+  React.ComponentPropsWithoutRef<"div">
-      data-slot="input-otp-group"
+>(({ className, ...props }, ref) => (
-      className={cn("flex items-center", className)}
+  <div ref={ref} className={cn("flex items-center", className)} {...props} />
-      {...props}
+))
-    />
+InputOTPGroup.displayName = "InputOTPGroup"
-  )
-}
 
-function InputOTPSlot({
+const InputOTPSlot = React.forwardRef<
-  index,
+  React.ElementRef<"div">,
-  className,
+  React.ComponentPropsWithoutRef<"div"> & { index: number }
-  ...props
+>(({ index, className, ...props }, ref) => {
-}: React.ComponentProps<"div"> & {
-  index: number
-}) {
   const inputOTPContext = React.useContext(OTPInputContext)
-  const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {}
+  const { char, hasFakeCaret, isActive } = inputOTPContext.slots[index]
 
   return (
     <div
-      data-slot="input-otp-slot"
+      ref={ref}
-      data-active={isActive}
       className={cn(
-        "data-[active=true]:border-ring data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:ring-destructive/20 dark:data-[active=true]:aria-invalid:ring-destructive/40 aria-invalid:border-destructive data-[active=true]:aria-invalid:border-destructive dark:bg-input/30 border-input relative flex h-9 w-9 items-center justify-center border-y border-r text-sm shadow-xs transition-all outline-none first:rounded-l-md first:border-l last:rounded-r-md data-[active=true]:z-10 data-[active=true]:ring-[3px]",
+        "relative flex h-9 w-9 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md",
+        isActive && "z-10 ring-1 ring-ring",
         className
       )}
       {...props}
@@ -59,19 +48,22 @@ function InputOTPSlot({
       {char}
       {hasFakeCaret && (
         <div className="pointer-events-none absolute inset-0 flex items-center justify-center">
-          <div className="animate-caret-blink bg-foreground h-4 w-px duration-1000" />
+          <div className="h-4 w-px animate-caret-blink bg-foreground duration-1000" />
         </div>
       )}
     </div>
   )
-}
+})
+InputOTPSlot.displayName = "InputOTPSlot"
 
-function InputOTPSeparator({ ...props }: React.ComponentProps<"div">) {
+const InputOTPSeparator = React.forwardRef<
-  return (
+  React.ElementRef<"div">,
-    <div data-slot="input-otp-separator" role="separator" {...props}>
+  React.ComponentPropsWithoutRef<"div">
-      <MinusIcon />
+>(({ ...props }, ref) => (
+  <div ref={ref} role="separator" {...props}>
+    <Minus />
   </div>
-  )
+))
-}
+InputOTPSeparator.displayName = "InputOTPSeparator"
 
 export { InputOTP, InputOTPGroup, InputOTPSlot, InputOTPSeparator }

src/components/ui/input.tsx

@@ -2,20 +2,21 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
     return (
       <input
         type={type}
-      data-slot="input"
         className={cn(
-        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
           className
         )}
+        ref={ref}
         {...props}
       />
     )
   }
+)
+Input.displayName = "Input"
 
 export { Input }

src/components/ui/item.tsx

@@ -0,0 +1,193 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+import { Separator } from "@/components/ui/separator"
+
+function ItemGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      role="list"
+      data-slot="item-group"
+      className={cn("group/item-group flex flex-col", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof Separator>) {
+  return (
+    <Separator
+      data-slot="item-separator"
+      orientation="horizontal"
+      className={cn("my-0", className)}
+      {...props}
+    />
+  )
+}
+
+const itemVariants = cva(
+  "group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        outline: "border-border",
+        muted: "bg-muted/50",
+      },
+      size: {
+        default: "gap-4 p-4 ",
+        sm: "gap-2.5 px-4 py-3",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+function Item({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"div"> &
+  VariantProps<typeof itemVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot : "div"
+  return (
+    <Comp
+      data-slot="item"
+      data-variant={variant}
+      data-size={size}
+      className={cn(itemVariants({ variant, size, className }))}
+      {...props}
+    />
+  )
+}
+
+const itemMediaVariants = cva(
+  "flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        default: "bg-transparent",
+        icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+        image:
+          "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function ItemMedia({
+  className,
+  variant = "default",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>) {
+  return (
+    <div
+      data-slot="item-media"
+      data-variant={variant}
+      className={cn(itemMediaVariants({ variant, className }))}
+      {...props}
+    />
+  )
+}
+
+function ItemContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-content"
+      className={cn(
+        "flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-title"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium leading-snug",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="item-description"
+      className={cn(
+        "text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal",
+        "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemActions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-actions"
+      className={cn("flex items-center gap-2", className)}
+      {...props}
+    />
+  )
+}
+
+function ItemHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-header"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function ItemFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="item-footer"
+      className={cn(
+        "flex basis-full items-center justify-between gap-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export {
+  Item,
+  ItemMedia,
+  ItemContent,
+  ItemActions,
+  ItemGroup,
+  ItemSeparator,
+  ItemTitle,
+  ItemDescription,
+  ItemHeader,
+  ItemFooter,
+}

src/components/ui/kbd.tsx

@@ -0,0 +1,28 @@
+import { cn } from "@/lib/utils"
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium",
+        "[&_svg:not([class*='size-'])]:size-3",
+        "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function KbdGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <kbd
+      data-slot="kbd-group"
+      className={cn("inline-flex items-center gap-1", className)}
+      {...props}
+    />
+  )
+}
+
+export { Kbd, KbdGroup }

src/components/ui/label.tsx

@@ -2,23 +2,25 @@
 
 import * as React from "react"
 import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
 
 import { cn } from "@/lib/utils"
 
-function Label({
+const labelVariants = cva(
-  className,
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-  ...props
+)
-}: React.ComponentProps<typeof LabelPrimitive.Root>) {
+
-  return (
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
   <LabelPrimitive.Root
-      data-slot="label"
+    ref={ref}
-      className={cn(
+    className={cn(labelVariants(), className)}
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
-      )}
     {...props}
   />
-  )
+))
-}
+Label.displayName = LabelPrimitive.Root.displayName
 
 export { Label }

src/components/ui/menubar.tsx

@@ -1,211 +1,31 @@
 import * as React from "react"
 import * as MenubarPrimitive from "@radix-ui/react-menubar"
-import { CheckIcon, ChevronRightIcon, CircleIcon } from "lucide-react"
+import { Check, ChevronRight, Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Menubar({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Root>) {
-  return (
-    <MenubarPrimitive.Root
-      data-slot="menubar"
-      className={cn(
-        "bg-background flex h-9 items-center gap-1 rounded-md border p-1 shadow-xs",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
 function MenubarMenu({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Menu>) {
-  return <MenubarPrimitive.Menu data-slot="menubar-menu" {...props} />
+  return <MenubarPrimitive.Menu {...props} />
 }
 
 function MenubarGroup({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Group>) {
-  return <MenubarPrimitive.Group data-slot="menubar-group" {...props} />
+  return <MenubarPrimitive.Group {...props} />
 }
 
 function MenubarPortal({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.Portal>) {
-  return <MenubarPrimitive.Portal data-slot="menubar-portal" {...props} />
+  return <MenubarPrimitive.Portal {...props} />
 }
 
 function MenubarRadioGroup({
   ...props
 }: React.ComponentProps<typeof MenubarPrimitive.RadioGroup>) {
-  return (
+  return <MenubarPrimitive.RadioGroup {...props} />
-    <MenubarPrimitive.RadioGroup data-slot="menubar-radio-group" {...props} />
-  )
-}
-
-function MenubarTrigger({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Trigger>) {
-  return (
-    <MenubarPrimitive.Trigger
-      data-slot="menubar-trigger"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarContent({
-  className,
-  align = "start",
-  alignOffset = -4,
-  sideOffset = 8,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Content>) {
-  return (
-    <MenubarPortal>
-      <MenubarPrimitive.Content
-        data-slot="menubar-content"
-        align={align}
-        alignOffset={alignOffset}
-        sideOffset={sideOffset}
-        className={cn(
-          "bg-popover text-popover-foreground data-[state=open]:animate-in 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-[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 min-w-[12rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-md",
-          className
-        )}
-        {...props}
-      />
-    </MenubarPortal>
-  )
-}
-
-function MenubarItem({
-  className,
-  inset,
-  variant = "default",
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Item> & {
-  inset?: boolean
-  variant?: "default" | "destructive"
-}) {
-  return (
-    <MenubarPrimitive.Item
-      data-slot="menubar-item"
-      data-inset={inset}
-      data-variant={variant}
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarCheckboxItem({
-  className,
-  children,
-  checked,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.CheckboxItem>) {
-  return (
-    <MenubarPrimitive.CheckboxItem
-      data-slot="menubar-checkbox-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      checked={checked}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.CheckboxItem>
-  )
-}
-
-function MenubarRadioItem({
-  className,
-  children,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.RadioItem>) {
-  return (
-    <MenubarPrimitive.RadioItem
-      data-slot="menubar-radio-item"
-      className={cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    >
-      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
-        <MenubarPrimitive.ItemIndicator>
-          <CircleIcon className="size-2 fill-current" />
-        </MenubarPrimitive.ItemIndicator>
-      </span>
-      {children}
-    </MenubarPrimitive.RadioItem>
-  )
-}
-
-function MenubarLabel({
-  className,
-  inset,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Label> & {
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.Label
-      data-slot="menubar-label"
-      data-inset={inset}
-      className={cn(
-        "px-2 py-1.5 text-sm font-medium data-[inset]:pl-8",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function MenubarSeparator({
-  className,
-  ...props
-}: React.ComponentProps<typeof MenubarPrimitive.Separator>) {
-  return (
-    <MenubarPrimitive.Separator
-      data-slot="menubar-separator"
-      className={cn("bg-border -mx-1 my-1 h-px", className)}
-      {...props}
-    />
-  )
-}
-
-function MenubarShortcut({
-  className,
-  ...props
-}: React.ComponentProps<"span">) {
-  return (
-    <span
-      data-slot="menubar-shortcut"
-      className={cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      )}
-      {...props}
-    />
-  )
 }
 
 function MenubarSub({
@@ -214,61 +34,221 @@ function MenubarSub({
   return <MenubarPrimitive.Sub data-slot="menubar-sub" {...props} />
 }
 
-function MenubarSubTrigger({
+const Menubar = React.forwardRef<
-  className,
+  React.ElementRef<typeof MenubarPrimitive.Root>,
-  inset,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Root>
-  children,
+>(({ className, ...props }, ref) => (
-  ...props
+  <MenubarPrimitive.Root
-}: React.ComponentProps<typeof MenubarPrimitive.SubTrigger> & {
+    ref={ref}
-  inset?: boolean
-}) {
-  return (
-    <MenubarPrimitive.SubTrigger
-      data-slot="menubar-sub-trigger"
-      data-inset={inset}
     className={cn(
-        "focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8",
+      "flex h-9 items-center space-x-1 rounded-md border bg-background p-1 shadow-sm",
+      className
+    )}
+    {...props}
+  />
+))
+Menubar.displayName = MenubarPrimitive.Root.displayName
+
+const MenubarTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Trigger>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-3 py-1 text-sm font-medium outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarTrigger.displayName = MenubarPrimitive.Trigger.displayName
+
+const MenubarSubTrigger = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubTrigger> & {
+    inset?: boolean
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <MenubarPrimitive.SubTrigger
+    ref={ref}
+    className={cn(
+      "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
       className
     )}
     {...props}
   >
     {children}
-      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    <ChevronRight className="ml-auto h-4 w-4" />
   </MenubarPrimitive.SubTrigger>
-  )
+))
-}
+MenubarSubTrigger.displayName = MenubarPrimitive.SubTrigger.displayName
 
-function MenubarSubContent({
+const MenubarSubContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.SubContent
+    ref={ref}
+    className={cn(
+      "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg 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-[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 origin-[--radix-menubar-content-transform-origin]",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarSubContent.displayName = MenubarPrimitive.SubContent.displayName
+
+const MenubarContent = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Content>
+>(
+  (
+    { className, align = "start", alignOffset = -4, sideOffset = 8, ...props },
+    ref
+  ) => (
+    <MenubarPrimitive.Portal>
+      <MenubarPrimitive.Content
+        ref={ref}
+        align={align}
+        alignOffset={alignOffset}
+        sideOffset={sideOffset}
+        className={cn(
+          "z-50 min-w-[12rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in 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-[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 origin-[--radix-menubar-content-transform-origin]",
+          className
+        )}
+        {...props}
+      />
+    </MenubarPrimitive.Portal>
+  )
+)
+MenubarContent.displayName = MenubarPrimitive.Content.displayName
+
+const MenubarItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Item> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarItem.displayName = MenubarPrimitive.Item.displayName
+
+const MenubarCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.CheckboxItem>
+>(({ className, children, checked, ...props }, ref) => (
+  <MenubarPrimitive.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-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    checked={checked}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.CheckboxItem>
+))
+MenubarCheckboxItem.displayName = MenubarPrimitive.CheckboxItem.displayName
+
+const MenubarRadioItem = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.RadioItem>
+>(({ className, children, ...props }, ref) => (
+  <MenubarPrimitive.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-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}
+  >
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <MenubarPrimitive.ItemIndicator>
+        <Circle className="h-4 w-4 fill-current" />
+      </MenubarPrimitive.ItemIndicator>
+    </span>
+    {children}
+  </MenubarPrimitive.RadioItem>
+))
+MenubarRadioItem.displayName = MenubarPrimitive.RadioItem.displayName
+
+const MenubarLabel = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Label> & {
+    inset?: boolean
+  }
+>(({ className, inset, ...props }, ref) => (
+  <MenubarPrimitive.Label
+    ref={ref}
+    className={cn(
+      "px-2 py-1.5 text-sm font-semibold",
+      inset && "pl-8",
+      className
+    )}
+    {...props}
+  />
+))
+MenubarLabel.displayName = MenubarPrimitive.Label.displayName
+
+const MenubarSeparator = React.forwardRef<
+  React.ElementRef<typeof MenubarPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof MenubarPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <MenubarPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+))
+MenubarSeparator.displayName = MenubarPrimitive.Separator.displayName
+
+const MenubarShortcut = ({
   className,
   ...props
-}: React.ComponentProps<typeof MenubarPrimitive.SubContent>) {
+}: React.HTMLAttributes<HTMLSpanElement>) => {
   return (
-    <MenubarPrimitive.SubContent
+    <span
-      data-slot="menubar-sub-content"
       className={cn(
-        "bg-popover text-popover-foreground 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-[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 min-w-[8rem] origin-(--radix-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg",
+        "ml-auto text-xs tracking-widest text-muted-foreground",
         className
       )}
       {...props}
     />
   )
 }
+MenubarShortcut.displayname = "MenubarShortcut"
 
 export {
   Menubar,
-  MenubarPortal,
   MenubarMenu,
   MenubarTrigger,
   MenubarContent,
-  MenubarGroup,
+  MenubarItem,
   MenubarSeparator,
   MenubarLabel,
-  MenubarItem,
-  MenubarShortcut,
   MenubarCheckboxItem,
   MenubarRadioGroup,
   MenubarRadioItem,
-  MenubarSub,
+  MenubarPortal,
-  MenubarSubTrigger,
   MenubarSubContent,
+  MenubarSubTrigger,
+  MenubarGroup,
+  MenubarSub,
+  MenubarShortcut,
 }

src/components/ui/navigation-menu.tsx

@@ -1,161 +1,122 @@
 import * as React from "react"
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu"
 import { cva } from "class-variance-authority"
-import { ChevronDownIcon } from "lucide-react"
+import { ChevronDown } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function NavigationMenu({
+const NavigationMenu = React.forwardRef<
-  className,
+  React.ElementRef<typeof NavigationMenuPrimitive.Root>,
-  children,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root>
-  viewport = true,
+>(({ className, children, ...props }, ref) => (
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
-  viewport?: boolean
-}) {
-  return (
   <NavigationMenuPrimitive.Root
-      data-slot="navigation-menu"
+    ref={ref}
-      data-viewport={viewport}
     className={cn(
-        "group/navigation-menu relative flex max-w-max flex-1 items-center justify-center",
+      "relative z-10 flex max-w-max flex-1 items-center justify-center",
       className
     )}
     {...props}
   >
     {children}
-      {viewport && <NavigationMenuViewport />}
+    <NavigationMenuViewport />
   </NavigationMenuPrimitive.Root>
-  )
+))
-}
+NavigationMenu.displayName = NavigationMenuPrimitive.Root.displayName
 
-function NavigationMenuList({
+const NavigationMenuList = React.forwardRef<
-  className,
+  React.ElementRef<typeof NavigationMenuPrimitive.List>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List>
-}: React.ComponentProps<typeof NavigationMenuPrimitive.List>) {
+>(({ className, ...props }, ref) => (
-  return (
   <NavigationMenuPrimitive.List
-      data-slot="navigation-menu-list"
+    ref={ref}
     className={cn(
-        "group flex flex-1 list-none items-center justify-center gap-1",
+      "group flex flex-1 list-none items-center justify-center space-x-1",
       className
     )}
     {...props}
   />
-  )
+))
-}
+NavigationMenuList.displayName = NavigationMenuPrimitive.List.displayName
 
-function NavigationMenuItem({
+const NavigationMenuItem = NavigationMenuPrimitive.Item
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Item>) {
-  return (
-    <NavigationMenuPrimitive.Item
-      data-slot="navigation-menu-item"
-      className={cn("relative", className)}
-      {...props}
-    />
-  )
-}
 
 const navigationMenuTriggerStyle = cva(
-  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1"
+  "group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium transition-colors hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus:outline-none disabled:pointer-events-none disabled:opacity-50 data-[state=open]:text-accent-foreground data-[state=open]:bg-accent/50 data-[state=open]:hover:bg-accent data-[state=open]:focus:bg-accent"
 )
 
-function NavigationMenuTrigger({
+const NavigationMenuTrigger = React.forwardRef<
-  className,
+  React.ElementRef<typeof NavigationMenuPrimitive.Trigger>,
-  children,
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>) {
-  return (
   <NavigationMenuPrimitive.Trigger
-      data-slot="navigation-menu-trigger"
+    ref={ref}
     className={cn(navigationMenuTriggerStyle(), "group", className)}
     {...props}
   >
     {children}{" "}
-      <ChevronDownIcon
+    <ChevronDown
-        className="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+      className="relative top-[1px] ml-1 h-3 w-3 transition duration-300 group-data-[state=open]:rotate-180"
       aria-hidden="true"
     />
   </NavigationMenuPrimitive.Trigger>
-  )
+))
-}
+NavigationMenuTrigger.displayName = NavigationMenuPrimitive.Trigger.displayName
 
-function NavigationMenuContent({
+const NavigationMenuContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof NavigationMenuPrimitive.Content>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content>
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Content>) {
+>(({ className, ...props }, ref) => (
-  return (
   <NavigationMenuPrimitive.Content
-      data-slot="navigation-menu-content"
+    ref={ref}
     className={cn(
-        "data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto",
+      "left-0 top-0 w-full data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 md:absolute md:w-auto ",
-        "group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none",
       className
     )}
     {...props}
   />
-  )
+))
-}
+NavigationMenuContent.displayName = NavigationMenuPrimitive.Content.displayName
 
-function NavigationMenuViewport({
+const NavigationMenuLink = NavigationMenuPrimitive.Link
-  className,
+
-  ...props
+const NavigationMenuViewport = React.forwardRef<
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>) {
+  React.ElementRef<typeof NavigationMenuPrimitive.Viewport>,
-  return (
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport>
-    <div
+>(({ className, ...props }, ref) => (
-      className={cn(
+  <div className={cn("absolute left-0 top-full flex justify-center")}>
-        "absolute top-full left-0 isolate z-50 flex justify-center"
-      )}
-    >
     <NavigationMenuPrimitive.Viewport
-        data-slot="navigation-menu-viewport"
       className={cn(
-          "origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--radix-navigation-menu-viewport-width)]",
+        "origin-top-center relative mt-1.5 h-[var(--radix-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border bg-popover text-popover-foreground shadow data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 md:w-[var(--radix-navigation-menu-viewport-width)]",
         className
       )}
+      ref={ref}
       {...props}
     />
   </div>
-  )
+))
-}
+NavigationMenuViewport.displayName =
+  NavigationMenuPrimitive.Viewport.displayName
 
-function NavigationMenuLink({
+const NavigationMenuIndicator = React.forwardRef<
-  className,
+  React.ElementRef<typeof NavigationMenuPrimitive.Indicator>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator>
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Link>) {
+>(({ className, ...props }, ref) => (
-  return (
-    <NavigationMenuPrimitive.Link
-      data-slot="navigation-menu-link"
-      className={cn(
-        "data-[active=true]:focus:bg-accent data-[active=true]:hover:bg-accent data-[active=true]:bg-accent/50 data-[active=true]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground focus-visible:ring-ring/50 [&_svg:not([class*='text-'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-all outline-none focus-visible:ring-[3px] focus-visible:outline-1 [&_svg:not([class*='size-'])]:size-4",
-        className
-      )}
-      {...props}
-    />
-  )
-}
-
-function NavigationMenuIndicator({
-  className,
-  ...props
-}: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>) {
-  return (
   <NavigationMenuPrimitive.Indicator
-      data-slot="navigation-menu-indicator"
+    ref={ref}
     className={cn(
-        "data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden",
+      "top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in",
       className
     )}
     {...props}
   >
-      <div className="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+    <div className="relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm bg-border shadow-md" />
   </NavigationMenuPrimitive.Indicator>
-  )
+))
-}
+NavigationMenuIndicator.displayName =
+  NavigationMenuPrimitive.Indicator.displayName
 
 export {
+  navigationMenuTriggerStyle,
   NavigationMenu,
   NavigationMenuList,
   NavigationMenuItem,
@@ -164,5 +125,4 @@ export {
   NavigationMenuLink,
   NavigationMenuIndicator,
   NavigationMenuViewport,
-  navigationMenuTriggerStyle,
 }

src/components/ui/pagination.tsx

@@ -1,58 +1,52 @@
 import * as React from "react"
-import {
+import { ChevronLeft, ChevronRight, MoreHorizontal } from "lucide-react"
-  ChevronLeftIcon,
-  ChevronRightIcon,
-  MoreHorizontalIcon,
-} from "lucide-react"
 
 import { cn } from "@/lib/utils"
-import { Button, buttonVariants } from "@/components/ui/button"
+import { ButtonProps, buttonVariants } from "@/components/ui/button"
 
-function Pagination({ className, ...props }: React.ComponentProps<"nav">) {
+const Pagination = ({ className, ...props }: React.ComponentProps<"nav">) => (
-  return (
   <nav
     role="navigation"
     aria-label="pagination"
-      data-slot="pagination"
     className={cn("mx-auto flex w-full justify-center", className)}
     {...props}
   />
 )
-}
+Pagination.displayName = "Pagination"
 
-function PaginationContent({
+const PaginationContent = React.forwardRef<
-  className,
+  HTMLUListElement,
-  ...props
+  React.ComponentProps<"ul">
-}: React.ComponentProps<"ul">) {
+>(({ className, ...props }, ref) => (
-  return (
   <ul
-      data-slot="pagination-content"
+    ref={ref}
     className={cn("flex flex-row items-center gap-1", className)}
     {...props}
   />
-  )
+))
-}
+PaginationContent.displayName = "PaginationContent"
 
-function PaginationItem({ ...props }: React.ComponentProps<"li">) {
+const PaginationItem = React.forwardRef<
-  return <li data-slot="pagination-item" {...props} />
+  HTMLLIElement,
-}
+  React.ComponentProps<"li">
+>(({ className, ...props }, ref) => (
+  <li ref={ref} className={cn("", className)} {...props} />
+))
+PaginationItem.displayName = "PaginationItem"
 
 type PaginationLinkProps = {
   isActive?: boolean
-} & Pick<React.ComponentProps<typeof Button>, "size"> &
+} & Pick<ButtonProps, "size"> &
   React.ComponentProps<"a">
 
-function PaginationLink({
+const PaginationLink = ({
   className,
   isActive,
   size = "icon",
   ...props
-}: PaginationLinkProps) {
+}: PaginationLinkProps) => (
-  return (
   <a
     aria-current={isActive ? "page" : undefined}
-      data-slot="pagination-link"
-      data-active={isActive}
     className={cn(
       buttonVariants({
         variant: isActive ? "outline" : "ghost",
@@ -63,58 +57,54 @@ function PaginationLink({
     {...props}
   />
 )
-}
+PaginationLink.displayName = "PaginationLink"
 
-function PaginationPrevious({
+const PaginationPrevious = ({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) {
+}: React.ComponentProps<typeof PaginationLink>) => (
-  return (
   <PaginationLink
     aria-label="Go to previous page"
     size="default"
-      className={cn("gap-1 px-2.5 sm:pl-2.5", className)}
+    className={cn("gap-1 pl-2.5", className)}
     {...props}
   >
-      <ChevronLeftIcon />
+    <ChevronLeft className="h-4 w-4" />
-      <span className="hidden sm:block">Previous</span>
+    <span>Previous</span>
   </PaginationLink>
 )
-}
+PaginationPrevious.displayName = "PaginationPrevious"
 
-function PaginationNext({
+const PaginationNext = ({
   className,
   ...props
-}: React.ComponentProps<typeof PaginationLink>) {
+}: React.ComponentProps<typeof PaginationLink>) => (
-  return (
   <PaginationLink
     aria-label="Go to next page"
     size="default"
-      className={cn("gap-1 px-2.5 sm:pr-2.5", className)}
+    className={cn("gap-1 pr-2.5", className)}
     {...props}
   >
-      <span className="hidden sm:block">Next</span>
+    <span>Next</span>
-      <ChevronRightIcon />
+    <ChevronRight className="h-4 w-4" />
   </PaginationLink>
 )
-}
+PaginationNext.displayName = "PaginationNext"
 
-function PaginationEllipsis({
+const PaginationEllipsis = ({
   className,
   ...props
-}: React.ComponentProps<"span">) {
+}: React.ComponentProps<"span">) => (
-  return (
   <span
     aria-hidden
-      data-slot="pagination-ellipsis"
+    className={cn("flex h-9 w-9 items-center justify-center", className)}
-      className={cn("flex size-9 items-center justify-center", className)}
     {...props}
   >
-      <MoreHorizontalIcon className="size-4" />
+    <MoreHorizontal className="h-4 w-4" />
     <span className="sr-only">More pages</span>
   </span>
 )
-}
+PaginationEllipsis.displayName = "PaginationEllipsis"
 
 export {
   Pagination,

src/components/ui/popover.tsx

@@ -1,48 +1,31 @@
-"use client"
-
 import * as React from "react"
 import * as PopoverPrimitive from "@radix-ui/react-popover"
 
 import { cn } from "@/lib/utils"
 
-function Popover({
+const Popover = PopoverPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Root>) {
-  return <PopoverPrimitive.Root data-slot="popover" {...props} />
-}
 
-function PopoverTrigger({
+const PopoverTrigger = PopoverPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
-  return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
-}
 
-function PopoverContent({
+const PopoverAnchor = PopoverPrimitive.Anchor
-  className,
+
-  align = "center",
+const PopoverContent = React.forwardRef<
-  sideOffset = 4,
+  React.ElementRef<typeof PopoverPrimitive.Content>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
-}: React.ComponentProps<typeof PopoverPrimitive.Content>) {
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
-  return (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
-        data-slot="popover-content"
+      ref={ref}
       align={align}
       sideOffset={sideOffset}
       className={cn(
-          "bg-popover text-popover-foreground 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-[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-72 origin-(--radix-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-hidden",
+        "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none 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-[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 origin-[--radix-popover-content-transform-origin]",
         className
       )}
       {...props}
     />
   </PopoverPrimitive.Portal>
-  )
+))
-}
+PopoverContent.displayName = PopoverPrimitive.Content.displayName
-
-function PopoverAnchor({
-  ...props
-}: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
-  return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
-}
 
 export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }

src/components/ui/progress.tsx

@@ -1,29 +1,28 @@
+"use client"
+
 import * as React from "react"
 import * as ProgressPrimitive from "@radix-ui/react-progress"
 
 import { cn } from "@/lib/utils"
 
-function Progress({
+const Progress = React.forwardRef<
-  className,
+  React.ElementRef<typeof ProgressPrimitive.Root>,
-  value,
+  React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>
-  ...props
+>(({ className, value, ...props }, ref) => (
-}: React.ComponentProps<typeof ProgressPrimitive.Root>) {
-  return (
   <ProgressPrimitive.Root
-      data-slot="progress"
+    ref={ref}
     className={cn(
-        "bg-primary/20 relative h-2 w-full overflow-hidden rounded-full",
+      "relative h-2 w-full overflow-hidden rounded-full bg-primary/20",
       className
     )}
     {...props}
   >
     <ProgressPrimitive.Indicator
-        data-slot="progress-indicator"
+      className="h-full w-full flex-1 bg-primary transition-all"
-        className="bg-primary h-full w-full flex-1 transition-all"
       style={{ transform: `translateX(-${100 - (value || 0)}%)` }}
     />
   </ProgressPrimitive.Root>
-  )
+))
-}
+Progress.displayName = ProgressPrimitive.Root.displayName
 
 export { Progress }

src/components/ui/radio-group.tsx

@@ -1,5 +1,3 @@
-"use client"
-
 import * as React from "react"
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group"
 import { CircleIcon } from "lucide-react"
@@ -43,3 +41,4 @@ function RadioGroupItem({
 }
 
 export { RadioGroup, RadioGroupItem }
+

src/components/ui/resizable.tsx

@@ -1,16 +1,15 @@
-import * as React from "react"
+"use client"
-import { GripVerticalIcon } from "lucide-react"
+
+import { GripVertical } from "lucide-react"
 import * as ResizablePrimitive from "react-resizable-panels"
 
 import { cn } from "@/lib/utils"
 
-function ResizablePanelGroup({
+const ResizablePanelGroup = ({
   className,
   ...props
-}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) {
+}: React.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => (
-  return (
   <ResizablePrimitive.PanelGroup
-      data-slot="resizable-panel-group"
     className={cn(
       "flex h-full w-full data-[panel-group-direction=vertical]:flex-col",
       className
@@ -18,37 +17,29 @@ function ResizablePanelGroup({
     {...props}
   />
 )
-}
 
-function ResizablePanel({
+const ResizablePanel = ResizablePrimitive.Panel
-  ...props
-}: React.ComponentProps<typeof ResizablePrimitive.Panel>) {
-  return <ResizablePrimitive.Panel data-slot="resizable-panel" {...props} />
-}
 
-function ResizableHandle({
+const ResizableHandle = ({
   withHandle,
   className,
   ...props
 }: React.ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
   withHandle?: boolean
-}) {
+}) => (
-  return (
   <ResizablePrimitive.PanelResizeHandle
-      data-slot="resizable-handle"
     className={cn(
-        "bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90",
+      "relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90",
       className
     )}
     {...props}
   >
     {withHandle && (
-        <div className="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border">
+      <div className="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
-          <GripVerticalIcon className="size-2.5" />
+        <GripVertical className="h-2.5 w-2.5" />
       </div>
     )}
   </ResizablePrimitive.PanelResizeHandle>
 )
-}
 
 export { ResizablePanelGroup, ResizablePanel, ResizableHandle }

src/components/ui/scroll-area.tsx

@@ -1,58 +1,46 @@
-"use client"
-
 import * as React from "react"
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 
 import { cn } from "@/lib/utils"
 
-function ScrollArea({
+const ScrollArea = React.forwardRef<
-  className,
+  React.ElementRef<typeof ScrollAreaPrimitive.Root>,
-  children,
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
-  return (
   <ScrollAreaPrimitive.Root
-      data-slot="scroll-area"
+    ref={ref}
-      className={cn("relative", className)}
+    className={cn("relative overflow-hidden", className)}
     {...props}
   >
-      <ScrollAreaPrimitive.Viewport
+    <ScrollAreaPrimitive.Viewport className="h-full w-full rounded-[inherit]">
-        data-slot="scroll-area-viewport"
-        className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
-      >
       {children}
     </ScrollAreaPrimitive.Viewport>
     <ScrollBar />
     <ScrollAreaPrimitive.Corner />
   </ScrollAreaPrimitive.Root>
-  )
+))
-}
+ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
 
-function ScrollBar({
+const ScrollBar = React.forwardRef<
-  className,
+  React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
-  orientation = "vertical",
+  React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
-  ...props
+>(({ className, orientation = "vertical", ...props }, ref) => (
-}: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
-  return (
   <ScrollAreaPrimitive.ScrollAreaScrollbar
-      data-slot="scroll-area-scrollbar"
+    ref={ref}
     orientation={orientation}
     className={cn(
-        "flex touch-none p-px transition-colors select-none",
+      "flex touch-none select-none transition-colors",
       orientation === "vertical" &&
-          "h-full w-2.5 border-l border-l-transparent",
+        "h-full w-2.5 border-l border-l-transparent p-[1px]",
       orientation === "horizontal" &&
-          "h-2.5 flex-col border-t border-t-transparent",
+        "h-2.5 flex-col border-t border-t-transparent p-[1px]",
       className
     )}
     {...props}
   >
-      <ScrollAreaPrimitive.ScrollAreaThumb
+    <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
-        data-slot="scroll-area-thumb"
-        className="bg-border relative flex-1 rounded-full"
-      />
   </ScrollAreaPrimitive.ScrollAreaScrollbar>
-  )
+))
-}
+ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
 
 export { ScrollArea, ScrollBar }

src/components/ui/select.tsx

@@ -1,65 +1,81 @@
+"use client"
+
 import * as React from "react"
 import * as SelectPrimitive from "@radix-ui/react-select"
-import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react"
+import { Check, ChevronDown, ChevronUp } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Select({
+const Select = SelectPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Root>) {
-  return <SelectPrimitive.Root data-slot="select" {...props} />
-}
 
-function SelectGroup({
+const SelectGroup = SelectPrimitive.Group
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Group>) {
-  return <SelectPrimitive.Group data-slot="select-group" {...props} />
-}
 
-function SelectValue({
+const SelectValue = SelectPrimitive.Value
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Value>) {
-  return <SelectPrimitive.Value data-slot="select-value" {...props} />
-}
 
-function SelectTrigger({
+const SelectTrigger = React.forwardRef<
-  className,
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
-  size = "default",
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
-  children,
+>(({ className, children, ...props }, ref) => (
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {
-  size?: "sm" | "default"
-}) {
-  return (
   <SelectPrimitive.Trigger
-      data-slot="select-trigger"
+    ref={ref}
-      data-size={size}
     className={cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "flex h-9 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background data-[placeholder]:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}
   >
     {children}
     <SelectPrimitive.Icon asChild>
-        <ChevronDownIcon className="size-4 opacity-50" />
+      <ChevronDown className="h-4 w-4 opacity-50" />
     </SelectPrimitive.Icon>
   </SelectPrimitive.Trigger>
-  )
+))
-}
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-function SelectContent({
+const SelectScrollUpButton = React.forwardRef<
-  className,
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
-  children,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
-  position = "popper",
+>(({ className, ...props }, ref) => (
-  ...props
+  <SelectPrimitive.ScrollUpButton
-}: React.ComponentProps<typeof SelectPrimitive.Content>) {
+    ref={ref}
-  return (
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+))
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}
+  >
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+))
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
-        data-slot="select-content"
+      ref={ref}
       className={cn(
-          "bg-popover text-popover-foreground 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-[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 relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border shadow-md",
+        "relative z-50 max-h-[--radix-select-content-available-height] min-w-[8rem] overflow-y-auto overflow-x-hidden rounded-md border bg-popover text-popover-foreground shadow-md 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-[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 origin-[--radix-select-content-transform-origin]",
         position === "popper" &&
           "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
         className
@@ -72,7 +88,7 @@ function SelectContent({
         className={cn(
           "p-1",
           position === "popper" &&
-              "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
         )}
       >
         {children}
@@ -80,104 +96,64 @@ function SelectContent({
       <SelectScrollDownButton />
     </SelectPrimitive.Content>
   </SelectPrimitive.Portal>
-  )
+))
-}
+SelectContent.displayName = SelectPrimitive.Content.displayName
 
-function SelectLabel({
+const SelectLabel = React.forwardRef<
-  className,
+  React.ElementRef<typeof SelectPrimitive.Label>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
-}: React.ComponentProps<typeof SelectPrimitive.Label>) {
+>(({ className, ...props }, ref) => (
-  return (
   <SelectPrimitive.Label
-      data-slot="select-label"
+    ref={ref}
-      className={cn("text-muted-foreground px-2 py-1.5 text-xs", className)}
+    className={cn("px-2 py-1.5 text-sm font-semibold", className)}
     {...props}
   />
-  )
+))
-}
+SelectLabel.displayName = SelectPrimitive.Label.displayName
 
-function SelectItem({
+const SelectItem = React.forwardRef<
-  className,
+  React.ElementRef<typeof SelectPrimitive.Item>,
-  children,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
-  ...props
+>(({ className, children, ...props }, ref) => (
-}: React.ComponentProps<typeof SelectPrimitive.Item>) {
-  return (
   <SelectPrimitive.Item
-      data-slot="select-item"
+    ref={ref}
     className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       className
     )}
     {...props}
   >
-      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
       <SelectPrimitive.ItemIndicator>
-          <CheckIcon className="size-4" />
+        <Check className="h-4 w-4" />
       </SelectPrimitive.ItemIndicator>
     </span>
     <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
   </SelectPrimitive.Item>
-  )
+))
-}
+SelectItem.displayName = SelectPrimitive.Item.displayName
 
-function SelectSeparator({
+const SelectSeparator = React.forwardRef<
-  className,
+  React.ElementRef<typeof SelectPrimitive.Separator>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
-}: React.ComponentProps<typeof SelectPrimitive.Separator>) {
+>(({ className, ...props }, ref) => (
-  return (
   <SelectPrimitive.Separator
-      data-slot="select-separator"
+    ref={ref}
-      className={cn("bg-border pointer-events-none -mx-1 my-1 h-px", className)}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-  )
+))
-}
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName
-
-function SelectScrollUpButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {
-  return (
-    <SelectPrimitive.ScrollUpButton
-      data-slot="select-scroll-up-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronUpIcon className="size-4" />
-    </SelectPrimitive.ScrollUpButton>
-  )
-}
-
-function SelectScrollDownButton({
-  className,
-  ...props
-}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {
-  return (
-    <SelectPrimitive.ScrollDownButton
-      data-slot="select-scroll-down-button"
-      className={cn(
-        "flex cursor-default items-center justify-center py-1",
-        className
-      )}
-      {...props}
-    >
-      <ChevronDownIcon className="size-4" />
-    </SelectPrimitive.ScrollDownButton>
-  )
-}
 
 export {
   Select,
-  SelectContent,
   SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
   SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
 }

src/components/ui/separator.tsx

@@ -1,28 +1,29 @@
-"use client"
-
 import * as React from "react"
 import * as SeparatorPrimitive from "@radix-ui/react-separator"
 
 import { cn } from "@/lib/utils"
 
-function Separator({
+const Separator = React.forwardRef<
-  className,
+  React.ElementRef<typeof SeparatorPrimitive.Root>,
-  orientation = "horizontal",
+  React.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root>
-  decorative = true,
+>(
-  ...props
+  (
-}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+    { className, orientation = "horizontal", decorative = true, ...props },
-  return (
+    ref
+  ) => (
     <SeparatorPrimitive.Root
-      data-slot="separator"
+      ref={ref}
       decorative={decorative}
       orientation={orientation}
       className={cn(
-        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        "shrink-0 bg-border",
+        orientation === "horizontal" ? "h-[1px] w-full" : "h-full w-[1px]",
         className
       )}
       {...props}
     />
   )
-}
+)
+Separator.displayName = SeparatorPrimitive.Root.displayName
 
 export { Separator }

src/components/ui/sheet.tsx

@@ -1,132 +1,135 @@
+"use client"
+
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { XIcon } from "lucide-react"
+import { cva, type VariantProps } from "class-variance-authority"
+import { X } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>) {
+const Sheet = SheetPrimitive.Root
-  return <SheetPrimitive.Root data-slot="sheet" {...props} />
-}
 
-function SheetTrigger({
+const SheetTrigger = SheetPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Trigger>) {
-  return <SheetPrimitive.Trigger data-slot="sheet-trigger" {...props} />
-}
 
-function SheetClose({
+const SheetClose = SheetPrimitive.Close
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Close>) {
-  return <SheetPrimitive.Close data-slot="sheet-close" {...props} />
-}
 
-function SheetPortal({
+const SheetPortal = SheetPrimitive.Portal
-  ...props
-}: React.ComponentProps<typeof SheetPrimitive.Portal>) {
-  return <SheetPrimitive.Portal data-slot="sheet-portal" {...props} />
-}
 
-function SheetOverlay({
+const SheetOverlay = React.forwardRef<
-  className,
+  React.ElementRef<typeof SheetPrimitive.Overlay>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Overlay>
-}: React.ComponentProps<typeof SheetPrimitive.Overlay>) {
+>(({ className, ...props }, ref) => (
-  return (
   <SheetPrimitive.Overlay
-      data-slot="sheet-overlay"
     className={cn(
-        "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",
+      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}
+    ref={ref}
   />
-  )
+))
-}
+SheetOverlay.displayName = SheetPrimitive.Overlay.displayName
 
-function SheetContent({
+const sheetVariants = cva(
-  className,
+  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=open]:animate-in data-[state=closed]:animate-out",
-  children,
+  {
-  side = "right",
+    variants: {
-  ...props
+      side: {
-}: React.ComponentProps<typeof SheetPrimitive.Content> & {
+        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
-  side?: "top" | "right" | "bottom" | "left"
+        bottom:
-}) {
+          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-  return (
+        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+        right:
+          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
+      },
+    },
+    defaultVariants: {
+      side: "right",
+    },
+  }
+)
+
+interface SheetContentProps
+  extends React.ComponentPropsWithoutRef<typeof SheetPrimitive.Content>,
+    VariantProps<typeof sheetVariants> {}
+
+const SheetContent = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Content>,
+  SheetContentProps
+>(({ side = "right", className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content
-        data-slot="sheet-content"
+      ref={ref}
+      className={cn(sheetVariants({ side }), className)}
+      {...props}
+    >
+      <SheetPrimitive.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-secondary">
+        <X className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </SheetPrimitive.Close>
+      {children}
+    </SheetPrimitive.Content>
+  </SheetPortal>
+))
+SheetContent.displayName = SheetPrimitive.Content.displayName
+
+const SheetHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
     className={cn(
-          "bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+      "flex flex-col space-y-2 text-center sm:text-left",
-          side === "right" &&
-            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
-          side === "left" &&
-            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
-          side === "top" &&
-            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
-          side === "bottom" &&
-            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
       className
     )}
     {...props}
-      >
-        {children}
-        <SheetPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary 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">
-          <XIcon className="size-4" />
-          <span className="sr-only">Close</span>
-        </SheetPrimitive.Close>
-      </SheetPrimitive.Content>
-    </SheetPortal>
-  )
-}
-
-function SheetHeader({ className, ...props }: React.ComponentProps<"div">) {
-  return (
-    <div
-      data-slot="sheet-header"
-      className={cn("flex flex-col gap-1.5 p-4", className)}
-      {...props}
   />
 )
-}
+SheetHeader.displayName = "SheetHeader"
 
-function SheetFooter({ className, ...props }: React.ComponentProps<"div">) {
+const SheetFooter = ({
-  return (
-    <div
-      data-slot="sheet-footer"
-      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
-      {...props}
-    />
-  )
-}
-
-function SheetTitle({
   className,
   ...props
-}: React.ComponentProps<typeof SheetPrimitive.Title>) {
+}: React.HTMLAttributes<HTMLDivElement>) => (
-  return (
+  <div
+    className={cn(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      className
+    )}
+    {...props}
+  />
+)
+SheetFooter.displayName = "SheetFooter"
+
+const SheetTitle = React.forwardRef<
+  React.ElementRef<typeof SheetPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Title>
+>(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
-      data-slot="sheet-title"
+    ref={ref}
-      className={cn("text-foreground font-semibold", className)}
+    className={cn("text-lg font-semibold text-foreground", className)}
     {...props}
   />
-  )
+))
-}
+SheetTitle.displayName = SheetPrimitive.Title.displayName
 
-function SheetDescription({
+const SheetDescription = React.forwardRef<
-  className,
+  React.ElementRef<typeof SheetPrimitive.Description>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof SheetPrimitive.Description>
-}: React.ComponentProps<typeof SheetPrimitive.Description>) {
+>(({ className, ...props }, ref) => (
-  return (
   <SheetPrimitive.Description
-      data-slot="sheet-description"
+    ref={ref}
-      className={cn("text-muted-foreground text-sm", className)}
+    className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-  )
+))
-}
+SheetDescription.displayName = SheetPrimitive.Description.displayName
 
 export {
   Sheet,
+  SheetPortal,
+  SheetOverlay,
   SheetTrigger,
   SheetClose,
   SheetContent,

src/components/ui/sidebar.tsx

@@ -26,7 +26,7 @@ import {
 } from "@/components/ui/tooltip"
 
 const SIDEBAR_COOKIE_NAME = "sidebar_state"
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7
+const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 30 // 30 days
 const SIDEBAR_WIDTH = "16rem"
 const SIDEBAR_WIDTH_MOBILE = "18rem"
 const SIDEBAR_WIDTH_ICON = "3rem"
@@ -69,9 +69,25 @@ function SidebarProvider({
   const isMobile = useIsMobile()
   const [openMobile, setOpenMobile] = React.useState(false)
 
+  // Helper to read cookie value
+  const getCookieValue = (name: string): boolean | null => {
+    if (typeof document === "undefined") return null
+    const value = document.cookie
+      .split("; ")
+      .find((row) => row.startsWith(`${name}=`))
+      ?.split("=")[1]
+    return value === "true" ? true : value === "false" ? false : null
+  }
+
+  // Read initial state from cookie, fallback to defaultOpen
+  const getInitialState = () => {
+    const cookieValue = getCookieValue(SIDEBAR_COOKIE_NAME)
+    return cookieValue !== null ? cookieValue : defaultOpen
+  }
+
   // This is the internal state of the sidebar.
   // We use openProp and setOpenProp for control from outside the component.
-  const [_open, _setOpen] = React.useState(defaultOpen)
+  const [_open, _setOpen] = React.useState(getInitialState)
   const open = openProp ?? _open
   const setOpen = React.useCallback(
     (value: boolean | ((value: boolean) => boolean)) => {

src/components/ui/skeleton.tsx

@@ -1,10 +1,12 @@
 import { cn } from "@/lib/utils"
 
-function Skeleton({ className, ...props }: React.ComponentProps<"div">) {
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
   return (
     <div
-      data-slot="skeleton"
+      className={cn("animate-pulse rounded-md bg-primary/10", className)}
-      className={cn("bg-accent animate-pulse rounded-md", className)}
       {...props}
     />
   )

src/components/ui/slider.tsx

@@ -1,63 +1,26 @@
-"use client"
-
 import * as React from "react"
 import * as SliderPrimitive from "@radix-ui/react-slider"
 
 import { cn } from "@/lib/utils"
 
-function Slider({
+const Slider = React.forwardRef<
-  className,
+  React.ElementRef<typeof SliderPrimitive.Root>,
-  defaultValue,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
-  value,
+>(({ className, ...props }, ref) => (
-  min = 0,
-  max = 100,
-  ...props
-}: React.ComponentProps<typeof SliderPrimitive.Root>) {
-  const _values = React.useMemo(
-    () =>
-      Array.isArray(value)
-        ? value
-        : Array.isArray(defaultValue)
-          ? defaultValue
-          : [min, max],
-    [value, defaultValue, min, max]
-  )
-
-  return (
   <SliderPrimitive.Root
-      data-slot="slider"
+    ref={ref}
-      defaultValue={defaultValue}
-      value={value}
-      min={min}
-      max={max}
     className={cn(
-        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+      "relative flex w-full touch-none select-none items-center",
       className
     )}
     {...props}
   >
-      <SliderPrimitive.Track
+    <SliderPrimitive.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-primary/20">
-        data-slot="slider-track"
+      <SliderPrimitive.Range className="absolute h-full bg-primary" />
-        className={cn(
-          "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
-        )}
-      >
-        <SliderPrimitive.Range
-          data-slot="slider-range"
-          className={cn(
-            "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
-          )}
-        />
     </SliderPrimitive.Track>
-      {Array.from({ length: _values.length }, (_, index) => (
+    <SliderPrimitive.Thumb className="block h-4 w-4 rounded-full border border-primary/50 bg-background shadow transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50" />
-        <SliderPrimitive.Thumb
-          data-slot="slider-thumb"
-          key={index}
-          className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-        />
-      ))}
   </SliderPrimitive.Root>
-  )
+))
-}
+Slider.displayName = SliderPrimitive.Root.displayName
 
 export { Slider }

src/components/ui/sonner.tsx

@@ -1,5 +1,16 @@
+"use client"
+
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
 import { useTheme } from "next-themes"
-import { Toaster as Sonner, ToasterProps } from "sonner"
+import { Toaster as Sonner } from "sonner"
+
+type ToasterProps = React.ComponentProps<typeof Sonner>
 
 const Toaster = ({ ...props }: ToasterProps) => {
   const { theme = "system" } = useTheme()
@@ -8,17 +19,29 @@ const Toaster = ({ ...props }: ToasterProps) => {
     <Sonner
       theme={theme as ToasterProps["theme"]}
       className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
       style={
         {
           "--normal-bg": "var(--popover)",
           "--normal-text": "var(--popover-foreground)",
           "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
         } as React.CSSProperties
       }
       toastOptions={{
         classNames: {
-          toast: "group",
+          toast: "group toast",
           icon: "group-data-[type=error]:!text-red-500 group-data-[type=success]:!text-green-500 group-data-[type=warning]:!text-amber-500 group-data-[type=info]:!text-sky-500",
+          description: "group-[.toast]:!text-muted-foreground",
+          actionButton: "group-[.toast]:!bg-primary group-[.toast]:!text-primary-foreground",
+          cancelButton: "group-[.toast]:!bg-muted group-[.toast]:!text-muted-foreground",
+          closeButton: "hover:group-[.toast]:!bg-background hover:group-[.toast]:!text-foreground",
         },
       }}
       {...props}

src/components/ui/spinner.tsx

@@ -0,0 +1,16 @@
+import { Loader2Icon } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+function Spinner({ className, ...props }: React.ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  )
+}
+
+export { Spinner }

src/components/ui/switch.tsx

@@ -1,31 +1,27 @@
-"use client"
-
 import * as React from "react"
-import * as SwitchPrimitive from "@radix-ui/react-switch"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
 
 import { cn } from "@/lib/utils"
 
-function Switch({
+const Switch = React.forwardRef<
-  className,
+  React.ElementRef<typeof SwitchPrimitives.Root>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
-}: React.ComponentProps<typeof SwitchPrimitive.Root>) {
+>(({ className, ...props }, ref) => (
-  return (
+  <SwitchPrimitives.Root
-    <SwitchPrimitive.Root
-      data-slot="switch"
     className={cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
       className
     )}
     {...props}
+    ref={ref}
   >
-      <SwitchPrimitive.Thumb
+    <SwitchPrimitives.Thumb
-        data-slot="switch-thumb"
       className={cn(
-          "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
       )}
     />
-    </SwitchPrimitive.Root>
+  </SwitchPrimitives.Root>
-  )
+))
-}
+Switch.displayName = SwitchPrimitives.Root.displayName
 
 export { Switch }

src/components/ui/table.tsx

@@ -2,105 +2,111 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Table({ className, ...props }: React.ComponentProps<"table">) {
+const Table = React.forwardRef<
-  return (
+  HTMLTableElement,
-    <div
+  React.HTMLAttributes<HTMLTableElement>
-      data-slot="table-container"
+>(({ className, ...props }, ref) => (
-      className="relative w-full overflow-x-auto"
+  <div className="relative w-full overflow-auto">
-    >
     <table
-        data-slot="table"
+      ref={ref}
       className={cn("w-full caption-bottom text-sm", className)}
       {...props}
     />
   </div>
-  )
+))
-}
+Table.displayName = "Table"
 
-function TableHeader({ className, ...props }: React.ComponentProps<"thead">) {
+const TableHeader = React.forwardRef<
-  return (
+  HTMLTableSectionElement,
-    <thead
+  React.HTMLAttributes<HTMLTableSectionElement>
-      data-slot="table-header"
+>(({ className, ...props }, ref) => (
-      className={cn("[&_tr]:border-b", className)}
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-      {...props}
+))
-    />
+TableHeader.displayName = "TableHeader"
-  )
-}
 
-function TableBody({ className, ...props }: React.ComponentProps<"tbody">) {
+const TableBody = React.forwardRef<
-  return (
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
   <tbody
-      data-slot="table-body"
+    ref={ref}
     className={cn("[&_tr:last-child]:border-0", className)}
     {...props}
   />
-  )
+))
-}
+TableBody.displayName = "TableBody"
 
-function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">) {
+const TableFooter = React.forwardRef<
-  return (
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
   <tfoot
-      data-slot="table-footer"
+    ref={ref}
     className={cn(
-        "bg-muted/50 border-t font-medium [&>tr]:last:border-b-0",
+      "border-t bg-muted/50 font-medium [&>tr]:last:border-b-0",
       className
     )}
     {...props}
   />
-  )
+))
-}
+TableFooter.displayName = "TableFooter"
 
-function TableRow({ className, ...props }: React.ComponentProps<"tr">) {
+const TableRow = React.forwardRef<
-  return (
+  HTMLTableRowElement,
+  React.HTMLAttributes<HTMLTableRowElement>
+>(({ className, ...props }, ref) => (
   <tr
-      data-slot="table-row"
+    ref={ref}
     className={cn(
-        "hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors",
+      "border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted",
       className
     )}
     {...props}
   />
-  )
+))
-}
+TableRow.displayName = "TableRow"
 
-function TableHead({ className, ...props }: React.ComponentProps<"th">) {
+const TableHead = React.forwardRef<
-  return (
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
   <th
-      data-slot="table-head"
+    ref={ref}
     className={cn(
-        "text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}
   />
-  )
+))
-}
+TableHead.displayName = "TableHead"
 
-function TableCell({ className, ...props }: React.ComponentProps<"td">) {
+const TableCell = React.forwardRef<
-  return (
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
   <td
-      data-slot="table-cell"
+    ref={ref}
     className={cn(
-        "p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
+      "p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]",
       className
     )}
     {...props}
   />
-  )
+))
-}
+TableCell.displayName = "TableCell"
 
-function TableCaption({
+const TableCaption = React.forwardRef<
-  className,
+  HTMLTableCaptionElement,
-  ...props
+  React.HTMLAttributes<HTMLTableCaptionElement>
-}: React.ComponentProps<"caption">) {
+>(({ className, ...props }, ref) => (
-  return (
   <caption
-      data-slot="table-caption"
+    ref={ref}
-      className={cn("text-muted-foreground mt-4 text-sm", className)}
+    className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
-  )
+))
-}
+TableCaption.displayName = "TableCaption"
 
 export {
   Table,

src/components/ui/tabs.tsx

@@ -1,66 +1,53 @@
-"use client"
-
 import * as React from "react"
 import * as TabsPrimitive from "@radix-ui/react-tabs"
 
 import { cn } from "@/lib/utils"
 
-function Tabs({
+const Tabs = TabsPrimitive.Root
-  className,
-  ...props
-}: React.ComponentProps<typeof TabsPrimitive.Root>) {
-  return (
-    <TabsPrimitive.Root
-      data-slot="tabs"
-      className={cn("flex flex-col gap-2", className)}
-      {...props}
-    />
-  )
-}
 
-function TabsList({
+const TabsList = React.forwardRef<
-  className,
+  React.ElementRef<typeof TabsPrimitive.List>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
-}: React.ComponentProps<typeof TabsPrimitive.List>) {
+>(({ className, ...props }, ref) => (
-  return (
   <TabsPrimitive.List
-      data-slot="tabs-list"
+    ref={ref}
     className={cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
       className
     )}
     {...props}
   />
-  )
+))
-}
+TabsList.displayName = TabsPrimitive.List.displayName
 
-function TabsTrigger({
+const TabsTrigger = React.forwardRef<
-  className,
+  React.ElementRef<typeof TabsPrimitive.Trigger>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger>
-}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
+>(({ className, ...props }, ref) => (
-  return (
   <TabsPrimitive.Trigger
-      data-slot="tabs-trigger"
+    ref={ref}
     className={cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
       className
     )}
     {...props}
   />
-  )
+))
-}
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
 
-function TabsContent({
+const TabsContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof TabsPrimitive.Content>,
-  ...props
+  React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content>
-}: React.ComponentProps<typeof TabsPrimitive.Content>) {
+>(({ className, ...props }, ref) => (
-  return (
   <TabsPrimitive.Content
-      data-slot="tabs-content"
+    ref={ref}
-      className={cn("flex-1 outline-none", className)}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
     {...props}
   />
-  )
+))
-}
+TabsContent.displayName = TabsPrimitive.Content.displayName
 
 export { Tabs, TabsList, TabsTrigger, TabsContent }

src/components/ui/textarea.tsx

@@ -2,17 +2,21 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+const Textarea = React.forwardRef<
+  HTMLTextAreaElement,
+  React.ComponentProps<"textarea">
+>(({ className, ...props }, ref) => {
   return (
     <textarea
-      data-slot="textarea"
       className={cn(
-        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
         className
       )}
+      ref={ref}
       {...props}
     />
   )
-}
+})
+Textarea.displayName = "Textarea"
 
 export { Textarea }

src/components/ui/toggle-group.tsx

@@ -14,53 +14,39 @@ const ToggleGroupContext = React.createContext<
   variant: "default",
 })
 
-function ToggleGroup({
+const ToggleGroup = React.forwardRef<
-  className,
+  React.ElementRef<typeof ToggleGroupPrimitive.Root>,
-  variant,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Root> &
-  size,
+    VariantProps<typeof toggleVariants>
-  children,
+>(({ className, variant, size, children, ...props }, ref) => (
-  ...props
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
   <ToggleGroupPrimitive.Root
-      data-slot="toggle-group"
+    ref={ref}
-      data-variant={variant}
+    className={cn("flex items-center justify-center gap-1", className)}
-      data-size={size}
-      className={cn(
-        "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
-        className
-      )}
     {...props}
   >
     <ToggleGroupContext.Provider value={{ variant, size }}>
       {children}
     </ToggleGroupContext.Provider>
   </ToggleGroupPrimitive.Root>
-  )
+))
-}
 
-function ToggleGroupItem({
+ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName
-  className,
+
-  children,
+const ToggleGroupItem = React.forwardRef<
-  variant,
+  React.ElementRef<typeof ToggleGroupPrimitive.Item>,
-  size,
+  React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item> &
-  ...props
+    VariantProps<typeof toggleVariants>
-}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &
+>(({ className, children, variant, size, ...props }, ref) => {
-  VariantProps<typeof toggleVariants>) {
   const context = React.useContext(ToggleGroupContext)
 
   return (
     <ToggleGroupPrimitive.Item
-      data-slot="toggle-group-item"
+      ref={ref}
-      data-variant={context.variant || variant}
-      data-size={context.size || size}
       className={cn(
         toggleVariants({
           variant: context.variant || variant,
           size: context.size || size,
         }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
         className
       )}
       {...props}
@@ -68,6 +54,8 @@ function ToggleGroupItem({
       {children}
     </ToggleGroupPrimitive.Item>
   )
-}
+})
+
+ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName
 
 export { ToggleGroup, ToggleGroupItem }

src/components/ui/toggle.tsx

@@ -5,13 +5,13 @@ import { cva, type VariantProps } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap",
+  "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         outline:
-          "border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground",
+          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
       },
       size: {
         default: "h-9 px-2 min-w-9",
@@ -26,20 +26,18 @@ const toggleVariants = cva(
   }
 )
 
-function Toggle({
+const Toggle = React.forwardRef<
-  className,
+  React.ElementRef<typeof TogglePrimitive.Root>,
-  variant,
+  React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root> &
-  size,
+    VariantProps<typeof toggleVariants>
-  ...props
+>(({ className, variant, size, ...props }, ref) => (
-}: React.ComponentProps<typeof TogglePrimitive.Root> &
-  VariantProps<typeof toggleVariants>) {
-  return (
   <TogglePrimitive.Root
-      data-slot="toggle"
+    ref={ref}
     className={cn(toggleVariants({ variant, size, className }))}
     {...props}
   />
-  )
+))
-}
+
+Toggle.displayName = TogglePrimitive.Root.displayName
 
 export { Toggle, toggleVariants }

src/components/ui/tooltip.tsx

@@ -1,59 +1,32 @@
+"use client"
+
 import * as React from "react"
 import * as TooltipPrimitive from "@radix-ui/react-tooltip"
 
 import { cn } from "@/lib/utils"
 
-function TooltipProvider({
+const TooltipProvider = TooltipPrimitive.Provider
-  delayDuration = 0,
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
-  return (
-    <TooltipPrimitive.Provider
-      data-slot="tooltip-provider"
-      delayDuration={delayDuration}
-      {...props}
-    />
-  )
-}
 
-function Tooltip({
+const Tooltip = TooltipPrimitive.Root
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
-  return (
-    <TooltipProvider>
-      <TooltipPrimitive.Root data-slot="tooltip" {...props} />
-    </TooltipProvider>
-  )
-}
 
-function TooltipTrigger({
+const TooltipTrigger = TooltipPrimitive.Trigger
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
-  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
-}
 
-function TooltipContent({
+const TooltipContent = React.forwardRef<
-  className,
+  React.ElementRef<typeof TooltipPrimitive.Content>,
-  sideOffset = 0,
+  React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>
-  children,
+>(({ className, sideOffset = 4, ...props }, ref) => (
-  ...props
-}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
-  return (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
-        data-slot="tooltip-content"
+      ref={ref}
       sideOffset={sideOffset}
       className={cn(
-          "bg-primary text-primary-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 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+        "z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-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 origin-[--radix-tooltip-content-transform-origin]",
         className
       )}
       {...props}
-      >
+    />
-        {children}
-        <TooltipPrimitive.Arrow className="bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
-      </TooltipPrimitive.Content>
   </TooltipPrimitive.Portal>
-  )
+))
-}
+TooltipContent.displayName = TooltipPrimitive.Content.displayName
 
 export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }

src/config.ts

@@ -3,6 +3,8 @@ export const config = {
     appPkgName: "com.neosubhamoy.neodlp",
     appHomepage: "https://neodlp.neosubhamoy.com",
     appRepo: "neosubhamoy/neodlp",
-    appAuthor: "Subhamoy",
+    appSupportEmail: "support@neodlp.neosubhamoy.com",
+    appAuthor: "Subhamoy Biswas",
     appAuthorUrl: "https://neosubhamoy.com",
+    appAuthorSponsorUrl: "https://buymeacoffee.com/neosubhamoy",
 }

src/helpers/use-app-updater.ts

@@ -62,8 +62,5 @@ export default function useAppUpdater() {
         await relaunchApp();
     }
 
-    return {
+    return { checkForAppUpdate, downloadAndInstallAppUpdate };
-        checkForAppUpdate,
-        downloadAndInstallAppUpdate
-    }
 }

src/helpers/use-downloader.ts

@@ -0,0 +1,954 @@
+import { DownloadState } from "@/types/download";
+import { invoke } from "@tauri-apps/api/core";
+import { useCallback, useRef } from "react";
+import { useBasePathsStore, useCurrentVideoMetadataStore, useDownloaderPageStatesStore, useDownloadStatesStore, useSettingsPageStatesStore } from "@/services/store";
+import { determineFileType, extractPlaylistItemProgress, generateVideoId, parseProgressLine } from "@/utils";
+import { Command } from "@tauri-apps/plugin-shell";
+import { RawVideoInfo } from "@/types/video";
+import { useDeleteDownloadState, useSaveDownloadState, useSavePlaylistInfo, useSaveVideoInfo, useUpdateDownloadFilePath, useUpdateDownloadPlaylistItem, useUpdateDownloadStatus } from "@/services/mutations";
+import { useQueryClient } from "@tanstack/react-query";
+import { platform } from "@tauri-apps/plugin-os";
+import { toast } from "sonner";
+import { useLogger } from "@/helpers/use-logger";
+import { ulid } from "ulid";
+import { sendNotification } from '@tauri-apps/plugin-notification';
+import { FetchVideoMetadataParams, StartDownloadParams } from "@/providers/appContextProvider";
+import { useDebouncedCallback } from '@tanstack/react-pacer/debouncer';
+import { fetchDownloadStateById } from "@/services/database";
+
+export default function useDownloader() {
+    const globalDownloadStates = useDownloadStatesStore((state) => state.downloadStates);
+
+    const ffmpegPath = useBasePathsStore((state) => state.ffmpegPath);
+    const tempDownloadDirPath = useBasePathsStore((state) => state.tempDownloadDirPath);
+    const downloadDirPath = useBasePathsStore((state) => state.downloadDirPath);
+
+    const setSearchPid = useCurrentVideoMetadataStore((state) => state.setSearchPid);
+
+    const {
+        max_parallel_downloads: MAX_PARALLEL_DOWNLOADS,
+        max_retries: MAX_RETRIES,
+        prefer_video_over_playlist: PREFER_VIDEO_OVER_PLAYLIST,
+        strict_downloadablity_check: STRICT_DOWNLOADABILITY_CHECK,
+        use_proxy: USE_PROXY,
+        proxy_url: PROXY_URL,
+        use_rate_limit: USE_RATE_LIMIT,
+        rate_limit: RATE_LIMIT,
+        video_format: VIDEO_FORMAT,
+        audio_format: AUDIO_FORMAT,
+        always_reencode_video: ALWAYS_REENCODE_VIDEO,
+        embed_video_metadata: EMBED_VIDEO_METADATA,
+        embed_audio_metadata: EMBED_AUDIO_METADATA,
+        embed_video_thumbnail: EMBED_VIDEO_THUMBNAIL,
+        embed_audio_thumbnail: EMBED_AUDIO_THUMBNAIL,
+        use_cookies: USE_COOKIES,
+        import_cookies_from: IMPORT_COOKIES_FROM,
+        cookies_browser: COOKIES_BROWSER,
+        cookies_file: COOKIES_FILE,
+        use_sponsorblock: USE_SPONSORBLOCK,
+        sponsorblock_mode: SPONSORBLOCK_MODE,
+        sponsorblock_remove: SPONSORBLOCK_REMOVE,
+        sponsorblock_mark: SPONSORBLOCK_MARK,
+        sponsorblock_remove_categories: SPONSORBLOCK_REMOVE_CATEGORIES,
+        sponsorblock_mark_categories: SPONSORBLOCK_MARK_CATEGORIES,
+        use_aria2: USE_ARIA2,
+        use_force_internet_protocol: USE_FORCE_INTERNET_PROTOCOL,
+        force_internet_protocol: FORCE_INTERNET_PROTOCOL,
+        use_custom_commands: USE_CUSTOM_COMMANDS,
+        custom_commands: CUSTOM_COMMANDS,
+        filename_template: FILENAME_TEMPLATE,
+        debug_mode: DEBUG_MODE,
+        log_verbose: LOG_VERBOSE,
+        log_progress: LOG_PROGRESS,
+        enable_notifications: ENABLE_NOTIFICATIONS,
+        download_completion_notification: DOWNLOAD_COMPLETION_NOTIFICATION
+    } = useSettingsPageStatesStore(state => state.settings);
+
+    const expectedErrorDownloadIds = useDownloaderPageStatesStore((state) => state.expectedErrorDownloadIds);
+    const addErroredDownload = useDownloaderPageStatesStore((state) => state.addErroredDownload);
+    const removeErroredDownload = useDownloaderPageStatesStore((state) => state.removeErroredDownload);
+    const addExpectedErrorDownload = useDownloaderPageStatesStore((state) => state.addExpectedErrorDownload);
+    const removeExpectedErrorDownload = useDownloaderPageStatesStore((state) => state.removeExpectedErrorDownload);
+
+    const LOG = useLogger();
+    const currentPlatform = platform();
+
+    const queryClient = useQueryClient();
+    const downloadStateSaver = useSaveDownloadState();
+    const downloadStatusUpdater = useUpdateDownloadStatus();
+    const downloadFilePathUpdater = useUpdateDownloadFilePath();
+    const playlistItemUpdater = useUpdateDownloadPlaylistItem();
+    const videoInfoSaver = useSaveVideoInfo();
+    const downloadStateDeleter = useDeleteDownloadState();
+    const playlistInfoSaver = useSavePlaylistInfo();
+
+    const ongoingDownloads = globalDownloadStates.filter(state => state.download_status === 'downloading' || state.download_status === 'starting');
+    const queuedDownloads = globalDownloadStates.filter(state => state.download_status === 'queued').sort((a, b) => a.queue_index! - b.queue_index!);
+
+    const isProcessingQueueRef = useRef(false);
+    const lastProcessedDownloadIdRef = useRef<string | null>(null);
+
+    const updateDownloadProgress =  useDebouncedCallback((state: DownloadState) => {
+        downloadStateSaver.mutate(state, {
+            onSuccess: (_data) => {
+                // console.log("Download State saved successfully:", data);
+                queryClient.invalidateQueries({ queryKey: ['download-states'] });
+            },
+            onError: (error) => {
+                console.error("Failed to save download state:", error);
+            }
+        });
+    }, { key: 'update-download-progress', wait: 500 });
+
+    const fetchVideoMetadata = async (params: FetchVideoMetadataParams): Promise<RawVideoInfo | null> => {
+        const { url, formatId, playlistIndices, selectedSubtitles, resumeState, downloadConfig } = params;
+        try {
+            const args = [url, '--dump-single-json', '--no-warnings'];
+            if (formatId) {
+                const isMultipleAudioFormatSelected = formatId.split('+').length > 2;
+                args.push('--format', formatId);
+                if (isMultipleAudioFormatSelected) args.push('--audio-multistreams');
+            }
+            if (selectedSubtitles) {
+                const isAutoSub = selectedSubtitles.split(',').some(lang => lang.endsWith('-orig'));
+                if (isAutoSub) args.push('--write-auto-sub');
+                args.push('--embed-subs', '--sub-lang', selectedSubtitles);
+            }
+            if (playlistIndices) args.push('--playlist-items', playlistIndices);
+            if (PREFER_VIDEO_OVER_PLAYLIST && !playlistIndices) args.push('--no-playlist');
+            if (STRICT_DOWNLOADABILITY_CHECK && !formatId) args.push('--check-all-formats');
+            if (STRICT_DOWNLOADABILITY_CHECK && formatId) args.push('--check-formats');
+
+            if (currentPlatform === 'macos') {
+                args.push('--ffmpeg-location', '/Applications/NeoDLP.app/Contents/MacOS', '--js-runtimes', 'deno:/Applications/NeoDLP.app/Contents/MacOS/deno');
+            }
+
+            if ((USE_CUSTOM_COMMANDS && CUSTOM_COMMANDS && downloadConfig?.custom_command) || resumeState?.custom_command) {
+                let customCommandArgs = null;
+                if (resumeState?.custom_command) {
+                    customCommandArgs = resumeState.custom_command;
+                } else if (CUSTOM_COMMANDS.find(cmd => cmd.id === downloadConfig?.custom_command)) {
+                    let customCommand = CUSTOM_COMMANDS.find(cmd => cmd.id === downloadConfig?.custom_command);
+                    customCommandArgs = customCommand ? customCommand.args : '';
+                }
+                if (customCommandArgs && customCommandArgs.trim() !== '') args.push(...customCommandArgs.split(' '));
+            }
+
+            if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_PROXY && PROXY_URL) args.push('--proxy', PROXY_URL);
+            if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_FORCE_INTERNET_PROTOCOL && FORCE_INTERNET_PROTOCOL) {
+                if (FORCE_INTERNET_PROTOCOL === 'ipv4') {
+                    args.push('--force-ipv4');
+                } else if (FORCE_INTERNET_PROTOCOL === 'ipv6') {
+                    args.push('--force-ipv6');
+                }
+            }
+            if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_COOKIES) {
+                if (IMPORT_COOKIES_FROM === 'browser' && COOKIES_BROWSER) {
+                    args.push('--cookies-from-browser', COOKIES_BROWSER);
+                } else if (IMPORT_COOKIES_FROM === 'file' && COOKIES_FILE) {
+                    args.push('--cookies', COOKIES_FILE);
+                }
+            }
+            if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && (USE_SPONSORBLOCK || (resumeState?.sponsorblock_remove || resumeState?.sponsorblock_mark))) {
+                if (SPONSORBLOCK_MODE === 'remove' || resumeState?.sponsorblock_remove) {
+                    let sponsorblockRemove = resumeState?.sponsorblock_remove || (SPONSORBLOCK_REMOVE === 'custom' ? (
+                        SPONSORBLOCK_REMOVE_CATEGORIES.length > 0 ? SPONSORBLOCK_REMOVE_CATEGORIES.join(',') : 'default'
+                    ) : (SPONSORBLOCK_REMOVE));
+                    args.push('--sponsorblock-remove', sponsorblockRemove);
+                } else if (SPONSORBLOCK_MODE === 'mark' || resumeState?.sponsorblock_mark) {
+                    let sponsorblockMark = resumeState?.sponsorblock_mark || (SPONSORBLOCK_MARK === 'custom' ? (
+                        SPONSORBLOCK_MARK_CATEGORIES.length > 0 ? SPONSORBLOCK_MARK_CATEGORIES.join(',') : 'default'
+                    ) : (SPONSORBLOCK_MARK));
+                    args.push('--sponsorblock-mark', sponsorblockMark);
+                }
+            };
+            const command = Command.sidecar('binaries/yt-dlp', args);
+
+            let jsonOutput = '';
+
+            return new Promise<RawVideoInfo | null>((resolve) => {
+                command.stdout.on('data', line => {
+                    jsonOutput += line;
+                });
+
+                command.on('close', async (data) => {
+                    if (data.code !== 0) {
+                        console.error(`yt-dlp failed to fetch metadata with code ${data.code}`);
+                        LOG.error('NEODLP', `yt-dlp exited with code ${data.code} while fetching metadata for URL: ${url} (ignore if you manually cancelled)`);
+                        resolve(null);
+                    } else {
+                        try {
+                            const matchedJson = jsonOutput.match(/{.*}/);
+                            if (!matchedJson) {
+                                console.error(`Failed to match JSON: ${jsonOutput}`);
+                                LOG.error('NEODLP', `Failed to parse metadata JSON for URL: ${url})`);
+                                resolve(null);
+                                return;
+                            }
+                            const parsedJson: RawVideoInfo = JSON.parse(matchedJson[0]);
+                            resolve(parsedJson);
+                        }
+                        catch (e) {
+                            console.error(`Failed to parse JSON: ${e}`);
+                            LOG.error('NEODLP', `Failed to parse metadata JSON for URL: ${url}) with error: ${e}`);
+                            resolve(null);
+                        }
+                    }
+                });
+
+                command.on('error', error => {
+                    console.error(`Error fetching metadata: ${error}`);
+                    LOG.error('NEODLP', `Error occurred while fetching metadata for URL: ${url} : ${error}`);
+                    resolve(null);
+                });
+
+                LOG.info('NEODLP', `Fetching metadata for URL: ${url}, with args: ${args.join(' ')}`);
+                command.spawn().then(child => {
+                    setSearchPid(child.pid);
+                }).catch(e => {
+                    console.error(`Failed to spawn command: ${e}`);
+                    LOG.error('NEODLP', `Failed to spawn yt-dlp process for fetching metadata for URL: ${url} : ${e}`);
+                    resolve(null);
+                });
+            });
+        } catch (e) {
+            console.error(`Failed to fetch metadata: ${e}`);
+            LOG.error('NEODLP', `Failed to fetch metadata for URL: ${url} : ${e}`);
+            return null;
+        }
+    };
+
+    const startDownload = async (params: StartDownloadParams) => {
+        const { url, selectedFormat, downloadConfig, selectedSubtitles, resumeState, playlistItems, overrideOptions } = params;
+        LOG.info('NEODLP', `Initiating yt-dlp download for URL: ${url}`);
+
+        console.log('Starting download:', { url, selectedFormat, downloadConfig, selectedSubtitles, resumeState, playlistItems, overrideOptions });
+        if (!ffmpegPath || !tempDownloadDirPath || !downloadDirPath) {
+            console.error('FFmpeg or download paths not found');
+            return;
+        }
+
+        const isPlaylist = (playlistItems && typeof playlistItems === 'string') || (resumeState?.playlist_id && resumeState?.playlist_indices) ? true : false;
+        const playlistIndices = isPlaylist ? (resumeState?.playlist_indices || playlistItems) : null;
+        const isMultiplePlaylistItems = isPlaylist && playlistIndices && typeof playlistIndices === 'string' && playlistIndices.includes(',');
+        const isMultipleAudioFormatSelected = selectedFormat.split('+').length > 2;
+        let videoMetadata = await fetchVideoMetadata({
+            url,
+            formatId: (!isPlaylist || (isPlaylist && selectedFormat !== 'best')) ? selectedFormat : undefined,
+            playlistIndices: isPlaylist && playlistIndices && typeof playlistIndices === 'string' ? playlistIndices : undefined,
+            selectedSubtitles,
+            resumeState
+        });
+        if (!videoMetadata) {
+            console.error('Failed to fetch video metadata');
+            toast.error("Download Failed", {
+                description: "yt-dlp failed to fetch video metadata. Please try again later.",
+            });
+            return;
+        }
+
+        console.log('Video Metadata:', videoMetadata);
+        videoMetadata = isPlaylist ? videoMetadata.entries[0] : videoMetadata;
+
+        const fileType = isMultipleAudioFormatSelected ? 'video+audio' : determineFileType(videoMetadata.vcodec, videoMetadata.acodec);
+
+        if (fileType !== 'unknown' && (VIDEO_FORMAT !== 'auto' || AUDIO_FORMAT !== 'auto')) {
+            if (VIDEO_FORMAT !== 'auto' && (fileType === 'video+audio' || fileType === 'video')) videoMetadata.ext = VIDEO_FORMAT;
+            if (AUDIO_FORMAT !== 'auto' && fileType === 'audio') videoMetadata.ext = AUDIO_FORMAT;
+        }
+
+        let configOutputFormat = null;
+        if (downloadConfig.output_format && downloadConfig.output_format !== 'auto') {
+            videoMetadata.ext = downloadConfig.output_format;
+            configOutputFormat = downloadConfig.output_format;
+        }
+        if (resumeState && resumeState.output_format) videoMetadata.ext = resumeState.output_format;
+
+        const videoId = resumeState?.video_id || generateVideoId(videoMetadata.id, videoMetadata.webpage_url_domain);
+        const playlistId = isPlaylist ? (resumeState?.playlist_id || generateVideoId(videoMetadata.playlist_id, videoMetadata.webpage_url_domain)) : null;
+        const downloadId = resumeState?.download_id || ulid() /*generateDownloadId(videoMetadata.id, videoMetadata.webpage_url_domain)*/;
+
+        // Clear any existing errored/expected error states for this download
+        removeErroredDownload(downloadId);
+        removeExpectedErrorDownload(downloadId);
+
+        // const tempDownloadPathForYtdlp = await join(tempDownloadDirPath, `${downloadId}_${selectedFormat}.%(ext)s`);
+        // const tempDownloadPath = await join(tempDownloadDirPath, `${downloadId}_${selectedFormat}.${videoMetadata.ext}`);
+        // let downloadFilePath = resumeState?.filepath || await join(downloadDirPath, sanitizeFilename(`${videoMetadata.title}_${videoMetadata.resolution || 'unknown'}[${videoMetadata.id}].${videoMetadata.ext}`));
+        let downloadFilePath: string | null = null;
+        let processPid: number | null = null;
+        const args = [
+            url,
+            '--newline',
+            '--progress-template',
+            'status:%(progress.status)s,progress:%(progress._percent_str)s,speed:%(progress.speed)f,downloaded:%(progress.downloaded_bytes)d,total:%(progress.total_bytes)d,eta:%(progress.eta)d',
+            '--paths',
+            `temp:${tempDownloadDirPath}`,
+            '--paths',
+            `home:${downloadDirPath}`,
+            '--windows-filenames',
+            '--restrict-filenames',
+            '--exec',
+            'after_move:echo Finalpath: {}',
+            '--no-mtime',
+            '--retries',
+            MAX_RETRIES.toString(),
+        ];
+
+        if (currentPlatform === 'macos') {
+            args.push('--ffmpeg-location', '/Applications/NeoDLP.app/Contents/MacOS', '--js-runtimes', 'deno:/Applications/NeoDLP.app/Contents/MacOS/deno');
+        }
+
+        if (isMultiplePlaylistItems) {
+            args.push('--output', `%(playlist_title|Unknown)s[${downloadId}]/[%(playlist_index|0)d]_${FILENAME_TEMPLATE}.%(ext)s`);
+        } else {
+            args.push('--output', `${FILENAME_TEMPLATE}[${downloadId}].%(ext)s`);
+        }
+
+        if (isMultiplePlaylistItems) {
+            const playlistLength = playlistIndices.split(',').length;
+            if (playlistLength > 5 && playlistLength < 100) {
+                args.push('--sleep-requests', '1', '--sleep-interval', '5', '--max-sleep-interval', '15');
+            } else if (playlistLength >= 100 && playlistLength < 500) {
+                args.push('--sleep-requests', '1.5', '--sleep-interval', '10', '--max-sleep-interval', '40');
+            } else if (playlistLength >= 500) {
+                args.push('--sleep-requests', '2.5', '--sleep-interval', '20', '--max-sleep-interval', '60');
+            }
+        }
+
+        if (!isPlaylist || (isPlaylist && selectedFormat !== 'best')) {
+            args.push('--format', selectedFormat);
+            if (isMultipleAudioFormatSelected) {
+                args.push('--audio-multistreams');
+            }
+        }
+
+        if (DEBUG_MODE && LOG_VERBOSE) {
+            args.push('--verbose');
+        } else {
+            args.push('--no-warnings');
+        }
+
+        if (selectedSubtitles) {
+            const isAutoSub = selectedSubtitles.split(',').some(lang => lang.endsWith('-orig'));
+            if (isAutoSub) args.push('--write-auto-sub');
+            args.push('--embed-subs', '--sub-lang', selectedSubtitles);
+        }
+
+        if (isPlaylist && playlistIndices && typeof playlistIndices === 'string') {
+            args.push('--playlist-items', playlistIndices);
+        }
+
+        let customCommandArgs = null;
+        if ((USE_CUSTOM_COMMANDS && CUSTOM_COMMANDS && downloadConfig.custom_command) || resumeState?.custom_command) {
+            if (resumeState?.custom_command) {
+                customCommandArgs = resumeState.custom_command;
+            } else if (CUSTOM_COMMANDS.find(cmd => cmd.id === downloadConfig.custom_command)) {
+                let customCommand = CUSTOM_COMMANDS.find(cmd => cmd.id === downloadConfig.custom_command);
+                customCommandArgs = customCommand ? customCommand.args : '';
+            }
+
+            if (customCommandArgs && customCommandArgs.trim() !== '') args.push(...customCommandArgs.split(' '));
+        }
+
+        let outputFormat = null;
+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && ((fileType !== 'unknown' && (VIDEO_FORMAT !== 'auto' || AUDIO_FORMAT !== 'auto')) || configOutputFormat || resumeState?.output_format)) {
+            const format = resumeState?.output_format || configOutputFormat;
+
+            if (format) {
+                outputFormat = format;
+            } else if (fileType === 'audio' && AUDIO_FORMAT !== 'auto') {
+                outputFormat = AUDIO_FORMAT;
+            } else if ((fileType === 'video' || fileType === 'video+audio') && VIDEO_FORMAT !== 'auto') {
+                outputFormat = VIDEO_FORMAT;
+            }
+
+            const recodeOrRemux = ALWAYS_REENCODE_VIDEO ? '--recode-video' : '--remux-video';
+            const formatToUse = format || VIDEO_FORMAT;
+
+            // Handle video+audio
+            if (fileType === 'video+audio' && (VIDEO_FORMAT !== 'auto' || format)) {
+                args.push(ALWAYS_REENCODE_VIDEO ? '--recode-video' : '--merge-output-format', formatToUse);
+            }
+            // Handle video only
+            else if (fileType === 'video' && (VIDEO_FORMAT !== 'auto' || format)) {
+                args.push(recodeOrRemux, formatToUse);
+            }
+            // Handle audio only
+            else if (fileType === 'audio' && (AUDIO_FORMAT !== 'auto' || format)) {
+                args.push('--extract-audio', '--audio-format', format || AUDIO_FORMAT, '--audio-quality', '0');
+            }
+            // Handle unknown filetype
+            else if (fileType === 'unknown' && format) {
+                if (['mkv', 'mp4', 'webm'].includes(format)) {
+                    args.push(recodeOrRemux, formatToUse);
+                } else if (['mp3', 'm4a', 'opus'].includes(format)) {
+                    args.push('--extract-audio', '--audio-format', format, '--audio-quality', '0');
+                }
+            }
+        }
+
+        let embedMetadata = 0;
+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && (downloadConfig.embed_metadata || resumeState?.embed_metadata || EMBED_VIDEO_METADATA || EMBED_AUDIO_METADATA)) {
+            const shouldEmbedMetaForVideo = (fileType === 'video+audio' || fileType === 'video') && (downloadConfig.embed_metadata || resumeState?.embed_metadata || (EMBED_VIDEO_METADATA && downloadConfig.embed_metadata === null));
+            const shouldEmbedMetaForAudio = fileType === 'audio' && (downloadConfig.embed_metadata || resumeState?.embed_metadata || (EMBED_AUDIO_METADATA && downloadConfig.embed_metadata === null));
+            const shouldEmbedMetaForUnknown = fileType === 'unknown' && (downloadConfig.embed_metadata || resumeState?.embed_metadata);
+
+            if (shouldEmbedMetaForUnknown || shouldEmbedMetaForVideo || shouldEmbedMetaForAudio) {
+                embedMetadata = 1;
+                args.push('--embed-metadata');
+            }
+        }
+
+        let embedThumbnail = 0;
+        let squareCropThumbnail = 0;
+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && (downloadConfig.embed_thumbnail || resumeState?.embed_thumbnail || EMBED_VIDEO_THUMBNAIL || EMBED_AUDIO_THUMBNAIL)) {
+            const shouldEmbedThumbForVideo = (fileType === 'video+audio' || fileType === 'video') && (downloadConfig.embed_thumbnail || resumeState?.embed_thumbnail || (EMBED_VIDEO_THUMBNAIL && downloadConfig.embed_thumbnail === null));
+            const shouldEmbedThumbForAudio = fileType === 'audio' && (downloadConfig.embed_thumbnail || resumeState?.embed_thumbnail || (EMBED_AUDIO_THUMBNAIL && downloadConfig.embed_thumbnail === null));
+            const shouldEmbedThumbForUnknown = fileType === 'unknown' && (downloadConfig.embed_thumbnail || resumeState?.embed_thumbnail);
+
+            if (shouldEmbedThumbForUnknown || shouldEmbedThumbForVideo || shouldEmbedThumbForAudio) {
+                embedThumbnail = 1;
+                args.push('--embed-thumbnail', '--convert-thumbnail', 'jpg');
+
+                if (downloadConfig.square_crop_thumbnail || resumeState?.square_crop_thumbnail) {
+                    squareCropThumbnail = 1;
+                    args.push('--postprocessor-args', 'ThumbnailsConvertor+FFmpeg_o:-c:v mjpeg -qmin 1 -qscale:v 1 -vf crop="\'min(iw,ih)\':\'min(iw,ih)\'"');
+                }
+            }
+        }
+
+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_PROXY && PROXY_URL) {
+            args.push('--proxy', PROXY_URL);
+        }
+
+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_RATE_LIMIT && RATE_LIMIT) {
+            args.push('--limit-rate', `${RATE_LIMIT}`);
+        }
+
+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_FORCE_INTERNET_PROTOCOL && FORCE_INTERNET_PROTOCOL) {
+            if (FORCE_INTERNET_PROTOCOL === 'ipv4') {
+                args.push('--force-ipv4');
+            } else if (FORCE_INTERNET_PROTOCOL === 'ipv6') {
+                args.push('--force-ipv6');
+            }
+        }
+
+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && USE_COOKIES) {
+            if (IMPORT_COOKIES_FROM === 'browser' && COOKIES_BROWSER) {
+                args.push('--cookies-from-browser', COOKIES_BROWSER);
+            } else if (IMPORT_COOKIES_FROM === 'file' && COOKIES_FILE) {
+                args.push('--cookies', COOKIES_FILE);
+            }
+        }
+
+        let sponsorblockRemove = null;
+        let sponsorblockMark = null;
+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && ((downloadConfig.sponsorblock && downloadConfig.sponsorblock !== 'auto') || resumeState?.sponsorblock_remove || resumeState?.sponsorblock_mark || USE_SPONSORBLOCK)) {
+            if (downloadConfig?.sponsorblock === 'remove' || resumeState?.sponsorblock_remove || (SPONSORBLOCK_MODE === 'remove' && !downloadConfig.sponsorblock)) {
+                sponsorblockRemove = resumeState?.sponsorblock_remove || (SPONSORBLOCK_REMOVE === 'custom' ? (
+                    SPONSORBLOCK_REMOVE_CATEGORIES.length > 0 ? SPONSORBLOCK_REMOVE_CATEGORIES.join(',') : 'default'
+                ) : (SPONSORBLOCK_REMOVE));
+                args.push('--sponsorblock-remove', sponsorblockRemove);
+            } else if (downloadConfig?.sponsorblock === 'mark' || resumeState?.sponsorblock_mark || (SPONSORBLOCK_MODE === 'mark' && !downloadConfig.sponsorblock)) {
+                sponsorblockMark = resumeState?.sponsorblock_mark || (SPONSORBLOCK_MARK === 'custom' ? (
+                    SPONSORBLOCK_MARK_CATEGORIES.length > 0 ? SPONSORBLOCK_MARK_CATEGORIES.join(',') : 'default'
+                ) : (SPONSORBLOCK_MARK));
+                args.push('--sponsorblock-mark', sponsorblockMark);
+            }
+        }
+
+        let useAria2 = 0;
+        if ((!USE_CUSTOM_COMMANDS && !resumeState?.custom_command) && (USE_ARIA2 || resumeState?.use_aria2)) {
+            useAria2 = 1;
+            args.push(
+                '--downloader', 'aria2c',
+                '--downloader', 'dash,m3u8:native',
+                '--downloader-args', 'aria2c:-c -j 16 -x 16 -s 16 -k 1M --check-certificate=false'
+            );
+            LOG.warning('NEODLP', `Looks like you are using aria2 for this yt-dlp download: ${downloadId}. Make sure aria2 is installed on your system if you are on macOS for this to work. Also, pause/resume might not work as expected especially on windows (using aria2 is not recommended for most downloads).`);
+        }
+
+        if (resumeState || (!USE_CUSTOM_COMMANDS && USE_ARIA2)) {
+            args.push('--continue');
+        } else {
+            args.push('--no-continue');
+        }
+
+        console.log('Starting download with args:', args);
+        const command = Command.sidecar('binaries/yt-dlp', args);
+
+        command.on('close', async (data) => {
+            if (data.code !== 0) {
+                console.error(`Download failed with code ${data.code}`);
+                LOG.error(`YT-DLP Download ${downloadId}`, `yt-dlp exited with code ${data.code} (ignore if you manually paused or cancelled the download)`);
+                if (!expectedErrorDownloadIds.has(downloadId)) addErroredDownload(downloadId);
+            } else {
+                LOG.info(`YT-DLP Download ${downloadId}`, `yt-dlp exited with code ${data.code}`);
+            }
+        });
+
+        command.on('error', error => {
+            console.error(`Error: ${error}`);
+            LOG.error(`YT-DLP Download ${downloadId}`, `Error occurred: ${error}`);
+            addErroredDownload(downloadId);
+        });
+
+        command.stdout.on('data', async line => {
+            if (line.startsWith('status:') || line.startsWith('[#')) {
+                // console.log(line);
+                if (DEBUG_MODE && LOG_PROGRESS) LOG.progress(`YT-DLP Download ${downloadId}`, line);
+                const currentProgress = await parseProgressLine(line, downloadId);
+                const state: DownloadState = {
+                    download_id: downloadId,
+                    download_status: 'downloading',
+                    video_id: videoId,
+                    format_id: selectedFormat,
+                    subtitle_id: selectedSubtitles || null,
+                    queue_index: null,
+                    playlist_id: playlistId,
+                    playlist_indices: playlistIndices ?? null,
+                    title: videoMetadata.title,
+                    url: url,
+                    host: videoMetadata.webpage_url_domain,
+                    thumbnail: videoMetadata.thumbnail || null,
+                    channel: videoMetadata.creator || videoMetadata.channel || videoMetadata.uploader || null,
+                    duration_string: videoMetadata.duration_string || null,
+                    release_date: videoMetadata.release_date || null,
+                    view_count: videoMetadata.view_count || null,
+                    like_count: videoMetadata.like_count || null,
+                    playlist_title: videoMetadata.playlist_title,
+                    playlist_url: videoMetadata.playlist_webpage_url,
+                    playlist_n_entries: videoMetadata.playlist_count || videoMetadata.n_entries,
+                    playlist_channel: videoMetadata.playlist_channel || null,
+                    resolution: videoMetadata.resolution || null,
+                    ext: videoMetadata.ext || null,
+                    abr: resumeState?.abr || overrideOptions?.tbr/2 || videoMetadata.abr || null,
+                    vbr: resumeState?.vbr || overrideOptions?.tbr/2 || videoMetadata.vbr || null,
+                    acodec: videoMetadata.acodec || null,
+                    vcodec: videoMetadata.vcodec || null,
+                    dynamic_range: videoMetadata.dynamic_range || null,
+                    process_id: processPid,
+                    status: currentProgress.status || null,
+                    item: currentProgress.item || null,
+                    progress: currentProgress.progress || null,
+                    total: currentProgress.total || null,
+                    downloaded: currentProgress.downloaded || null,
+                    speed: currentProgress.speed || null,
+                    eta: currentProgress.eta || null,
+                    filepath: downloadFilePath,
+                    filetype: fileType || null,
+                    filesize: resumeState?.filesize || overrideOptions?.filesize || videoMetadata.filesize_approx || null,
+                    output_format: outputFormat,
+                    embed_metadata: embedMetadata,
+                    embed_thumbnail: embedThumbnail,
+                    square_crop_thumbnail: squareCropThumbnail,
+                    sponsorblock_remove: sponsorblockRemove,
+                    sponsorblock_mark: sponsorblockMark,
+                    use_aria2: useAria2,
+                    custom_command: customCommandArgs,
+                    queue_config: null
+                };
+                updateDownloadProgress(state);
+            } else {
+                // console.log(line);
+                if (line.trim() !== '') LOG.info(`YT-DLP Download ${downloadId}`, line);
+
+                if (isPlaylist && line.startsWith('[download] Downloading item')) {
+                    const playlistItemProgress = extractPlaylistItemProgress(line);
+                    setTimeout(async () => {
+                        playlistItemUpdater.mutate({ download_id: downloadId, item: playlistItemProgress as string }, {
+                            onSuccess: (data) => {
+                                console.log("Playlist item progress updated successfully:", data);
+                                queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                            },
+                            onError: (error) => {
+                                console.error("Failed to update playlist item progress:", error);
+                            }
+                        });
+                    }, 1500);
+                }
+
+                if (isPlaylist && line.startsWith('Finalpath: ')) {
+                    downloadFilePath = line.replace('Finalpath: ', '').trim().replace(/^"|"$/g, '');
+                    const downloadedFileExt = downloadFilePath.split('.').pop();
+
+                    const state = await fetchDownloadStateById(downloadId);
+                    const isLastPlaylistItem = state?.item && Number(state?.item.split('/')[0]) === Number(state?.item.split('/')[1]);
+
+                    setTimeout(async () => {
+                        downloadFilePathUpdater.mutate({ download_id: downloadId, filepath: downloadFilePath as string, ext: downloadedFileExt as string }, {
+                            onSuccess: (data) => {
+                                console.log("Download filepath updated successfully:", data);
+                                queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                            },
+                            onError: (error) => {
+                                console.error("Failed to update download filepath:", error);
+                            }
+                        });
+
+                        if (isLastPlaylistItem) {
+                            console.log(`Playlist download completed with ID: ${downloadId}, updating status...`);
+
+                            LOG.info('NEODLP', `yt-dlp download completed with id: ${downloadId}`);
+                            downloadStatusUpdater.mutate({ download_id: downloadId, download_status: 'completed' }, {
+                                onSuccess: (data) => {
+                                    console.log("Download status updated successfully:", data);
+                                    queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                                },
+                                onError: (error) => {
+                                    console.error("Failed to update download status:", error);
+                                }
+                            });
+
+                            toast.success("Download Completed", {
+                                description: `The download for ${isMultiplePlaylistItems ? 'playlist ' : ''}"${isMultiplePlaylistItems ? videoMetadata.playlist_title : videoMetadata.title}" has completed successfully.`,
+                            });
+
+                            if (ENABLE_NOTIFICATIONS && DOWNLOAD_COMPLETION_NOTIFICATION) {
+                                sendNotification({
+                                    title: "Download Completed",
+                                    body: `The download for ${isMultiplePlaylistItems ? 'playlist ' : ''}"${isMultiplePlaylistItems ? videoMetadata.playlist_title : videoMetadata.title}" has completed successfully.`,
+                                });
+                            }
+                        }
+                    }, 2000);
+                }
+
+                if (!isPlaylist && line.startsWith('Finalpath: ')) {
+                    downloadFilePath = line.replace('Finalpath: ', '').trim().replace(/^"|"$/g, '');
+                    const downloadedFileExt = downloadFilePath.split('.').pop();
+
+                    // Update completion status after a short delay to ensure database states are propagated correctly
+                    console.log(`Download completed with ID: ${downloadId}, updating filepath and status after 2s delay...`);
+                    setTimeout(async () => {
+                        LOG.info('NEODLP', `yt-dlp download completed with id: ${downloadId}`);
+                        downloadFilePathUpdater.mutate({ download_id: downloadId, filepath: downloadFilePath as string, ext: downloadedFileExt as string }, {
+                            onSuccess: (data) => {
+                                console.log("Download filepath updated successfully:", data);
+                                queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                            },
+                            onError: (error) => {
+                                console.error("Failed to update download filepath:", error);
+                            }
+                        });
+
+                        downloadStatusUpdater.mutate({ download_id: downloadId, download_status: 'completed' }, {
+                            onSuccess: (data) => {
+                                console.log("Download status updated successfully:", data);
+                                queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                            },
+                            onError: (error) => {
+                                console.error("Failed to update download status:", error);
+                            }
+                        });
+
+                        toast.success("Download Completed", {
+                            description: `The download for "${videoMetadata.title}" has completed successfully.`,
+                        });
+
+                        if (ENABLE_NOTIFICATIONS && DOWNLOAD_COMPLETION_NOTIFICATION) {
+                            sendNotification({
+                                title: "Download Completed",
+                                body: `The download for "${videoMetadata.title}" has completed successfully.`,
+                            });
+                        }
+                    }, 2000);
+                }
+            }
+        });
+
+        try {
+            videoInfoSaver.mutate({
+                video_id: videoId,
+                title: videoMetadata.title,
+                url: url,
+                host: videoMetadata.webpage_url_domain,
+                thumbnail: videoMetadata.thumbnail || null,
+                channel: videoMetadata.creator || videoMetadata.channel || videoMetadata.uploader || null,
+                duration_string: videoMetadata.duration_string || null,
+                release_date: videoMetadata.release_date || null,
+                view_count: videoMetadata.view_count || null,
+                like_count: videoMetadata.like_count || null
+            }, {
+                onSuccess: (data) => {
+                    console.log("Video Info saved successfully:", data);
+                    if (isPlaylist) {
+                        playlistInfoSaver.mutate({
+                            playlist_id: playlistId ? playlistId : '',
+                            playlist_title: videoMetadata.playlist_title,
+                            playlist_url: videoMetadata.playlist_webpage_url,
+                            playlist_n_entries: videoMetadata.playlist_count || videoMetadata.n_entries,
+                            playlist_channel: videoMetadata.playlist_creator || videoMetadata.playlist_channel || videoMetadata.playlist_uploader || null
+                        }, {
+                            onSuccess: (data) => {
+                                console.log("Playlist Info saved successfully:", data);
+                            },
+                            onError: (error) => {
+                                console.error("Failed to save playlist info:", error);
+                            }
+                        });
+                    }
+                    const state: DownloadState = {
+                        download_id: downloadId,
+                        download_status: (!ongoingDownloads || ongoingDownloads && ongoingDownloads?.length < MAX_PARALLEL_DOWNLOADS) ? 'starting' : 'queued',
+                        video_id: videoId,
+                        format_id: selectedFormat,
+                        subtitle_id: selectedSubtitles || null,
+                        queue_index: (!ongoingDownloads || ongoingDownloads && ongoingDownloads?.length < MAX_PARALLEL_DOWNLOADS) ? null : (queuedDownloads?.length || 0),
+                        playlist_id: playlistId,
+                        playlist_indices: playlistIndices ?? null,
+                        title: videoMetadata.title,
+                        url: url,
+                        host: videoMetadata.webpage_url_domain,
+                        thumbnail: videoMetadata.thumbnail || null,
+                        channel: videoMetadata.creator || videoMetadata.channel || videoMetadata.uploader || null,
+                        duration_string: videoMetadata.duration_string || null,
+                        release_date: videoMetadata.release_date || null,
+                        view_count: videoMetadata.view_count || null,
+                        like_count: videoMetadata.like_count || null,
+                        playlist_title: videoMetadata.playlist_title,
+                        playlist_url: videoMetadata.playlist_webpage_url,
+                        playlist_n_entries: videoMetadata.playlist_count || videoMetadata.n_entries,
+                        playlist_channel: videoMetadata.playlist_channel || null,
+                        resolution: resumeState?.resolution || null,
+                        ext: resumeState?.ext || null,
+                        abr: resumeState?.abr || overrideOptions?.tbr/2 || null,
+                        vbr: resumeState?.vbr || overrideOptions?.tbr/2 || null,
+                        acodec: resumeState?.acodec || null,
+                        vcodec: resumeState?.vcodec || null,
+                        dynamic_range: resumeState?.dynamic_range || null,
+                        process_id: resumeState?.process_id || null,
+                        status: resumeState?.status || null,
+                        item: resumeState?.item || null,
+                        progress: resumeState?.progress || null,
+                        total: resumeState?.total || null,
+                        downloaded: resumeState?.downloaded || null,
+                        speed: resumeState?.speed || null,
+                        eta: resumeState?.eta || null,
+                        filepath: downloadFilePath,
+                        filetype: resumeState?.filetype || null,
+                        filesize: resumeState?.filesize || overrideOptions?.filesize || null,
+                        output_format: resumeState?.output_format || null,
+                        embed_metadata: resumeState?.embed_metadata || 0,
+                        embed_thumbnail: resumeState?.embed_thumbnail || 0,
+                        square_crop_thumbnail: resumeState?.square_crop_thumbnail || 0,
+                        sponsorblock_remove: resumeState?.sponsorblock_remove || null,
+                        sponsorblock_mark: resumeState?.sponsorblock_mark || null,
+                        use_aria2: resumeState?.use_aria2 || 0,
+                        custom_command: resumeState?.custom_command || null,
+                        queue_config: resumeState?.queue_config || ((!ongoingDownloads || ongoingDownloads && ongoingDownloads?.length < MAX_PARALLEL_DOWNLOADS) ? null : JSON.stringify(downloadConfig))
+                    }
+                    downloadStateSaver.mutate(state, {
+                        onSuccess: (data) => {
+                            console.log("Download State saved successfully:", data);
+                            queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                        },
+                        onError: (error) => {
+                            console.error("Failed to save download state:", error);
+                        }
+                    });
+                },
+                onError: (error) => {
+                    console.error("Failed to save video info:", error);
+                }
+            });
+
+            if (!ongoingDownloads || ongoingDownloads && ongoingDownloads?.length < MAX_PARALLEL_DOWNLOADS) {
+                LOG.info('NEODLP', `Starting yt-dlp download with args: ${args.join(' ')}`);
+                if (!DEBUG_MODE || (DEBUG_MODE && !LOG_PROGRESS)) LOG.warning('NEODLP', `Progress logs are hidden. Enable 'Debug Mode > Log Progress' in Settings to unhide.`);
+                const child = await command.spawn();
+                processPid = child.pid;
+                return Promise.resolve();
+            } else {
+                console.log("Download is queued, not starting immediately.");
+                LOG.info('NEODLP', `Download queued with id: ${downloadId}`);
+                return Promise.resolve();
+            }
+        } catch (e) {
+            console.error(`Failed to start download: ${e}`);
+            LOG.error('NEODLP', `Failed to start download for URL: ${url} with error: ${e}`);
+            throw e;
+        }
+    };
+
+    const pauseDownload = async (downloadState: DownloadState) => {
+        try {
+            LOG.info('NEODLP', `Pausing yt-dlp download with id: ${downloadState.download_id} (as per user request)`);
+            if ((downloadState.download_status === 'downloading' && downloadState.process_id) || (downloadState.download_status === 'starting' && downloadState.process_id)) {
+                addExpectedErrorDownload(downloadState.download_id); // Mark as error expected to handle UI state
+                console.log("Killing process with PID:", downloadState.process_id);
+                await invoke('kill_all_process', { pid: downloadState.process_id });
+            }
+
+            return new Promise<void>((resolve, reject) => {
+                setTimeout(() => {
+                    downloadStatusUpdater.mutate({ download_id: downloadState.download_id, download_status: 'paused' }, {
+                        onSuccess: (data) => {
+                            console.log("Download status updated successfully:", data);
+                            queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                            // Reset the processing flag to ensure queue can be processed
+                            isProcessingQueueRef.current = false;
+                            // Process the queue after a short delay to ensure state is updated
+                            setTimeout(() => {
+                                processQueuedDownloads();
+                            }, 1000);
+                            resolve();
+                        },
+                        onError: (error) => {
+                            console.error("Failed to update download status:", error);
+                            isProcessingQueueRef.current = false;
+                            reject(error);
+                        }
+                    });
+                }, 1500);
+            });
+        } catch (e) {
+            console.error(`Failed to pause download: ${e}`);
+            LOG.error('NEODLP', `Failed to pause download with id: ${downloadState.download_id} with error: ${e}`);
+            isProcessingQueueRef.current = false;
+            removeExpectedErrorDownload(downloadState.download_id);
+            throw e;
+        }
+    };
+
+    const resumeDownload = async (downloadState: DownloadState) => {
+        try {
+            LOG.info('NEODLP', `Resuming yt-dlp download with id: ${downloadState.download_id} (as per user request)`);
+            await startDownload({
+                url: downloadState.playlist_id && downloadState.playlist_indices ? downloadState.playlist_url : downloadState.url,
+                selectedFormat: downloadState.format_id,
+                downloadConfig: downloadState.queue_config ? JSON.parse(downloadState.queue_config) : {
+                    output_format: null,
+                    embed_metadata: null,
+                    embed_thumbnail: null,
+                    square_crop_thumbnail: null,
+                    sponsorblock: null,
+                    custom_command: null
+                },
+                selectedSubtitles: downloadState.subtitle_id,
+                resumeState: downloadState
+            });
+            return Promise.resolve();
+        } catch (e) {
+            console.error(`Failed to resume download: ${e}`);
+            LOG.error('NEODLP', `Failed to resume download with id: ${downloadState.download_id} with error: ${e}`);
+            throw e;
+        }
+    };
+
+    const cancelDownload = async (downloadState: DownloadState) => {
+        try {
+            LOG.info('NEODLP', `Cancelling yt-dlp download with id: ${downloadState.download_id} (as per user request)`);
+            if ((downloadState.download_status === 'downloading' && downloadState.process_id) || (downloadState.download_status === 'starting' && downloadState.process_id)) {
+                addExpectedErrorDownload(downloadState.download_id); // Mark as error expected to handle UI state
+                console.log("Killing process with PID:", downloadState.process_id);
+                await invoke('kill_all_process', { pid: downloadState.process_id });
+            }
+
+            return new Promise<void>((resolve, reject) => {
+                setTimeout(() => {
+                    downloadStateDeleter.mutate(downloadState.download_id, {
+                        onSuccess: (data) => {
+                            console.log("Download State deleted successfully:", data);
+                            queryClient.invalidateQueries({ queryKey: ['download-states'] });
+                            // Reset processing flag and trigger queue processing
+                            isProcessingQueueRef.current = false;
+
+                            // Process the queue after a short delay
+                            setTimeout(() => {
+                                processQueuedDownloads();
+                            }, 1000);
+                            resolve();
+                        },
+                        onError: (error) => {
+                            console.error("Failed to delete download state:", error);
+                            isProcessingQueueRef.current = false;
+                            reject(error);
+                        }
+                    });
+                }, 1500);
+            });
+        } catch (e) {
+            console.error(`Failed to cancel download: ${e}`);
+            LOG.error('NEODLP', `Failed to cancel download with id: ${downloadState.download_id} with error: ${e}`);
+            isProcessingQueueRef.current = false;
+            removeExpectedErrorDownload(downloadState.download_id);
+            throw e;
+        }
+    }
+
+    const processQueuedDownloads = useCallback(async () => {
+        // Prevent concurrent processing
+        if (isProcessingQueueRef.current) {
+            console.log("Queue processing already in progress, skipping...");
+            return;
+        }
+
+        // Check if we can process more downloads
+        if (!queuedDownloads?.length || ongoingDownloads?.length >= MAX_PARALLEL_DOWNLOADS) {
+            return;
+        }
+
+        try {
+            isProcessingQueueRef.current = true;
+            console.log("Processing download queue...");
+
+            // Get the first download in queue
+            const downloadToStart = queuedDownloads[0];
+
+            // Skip if we just processed this download to prevent loops
+            if (lastProcessedDownloadIdRef.current === downloadToStart.download_id) {
+                console.log("Skipping recently processed download:", downloadToStart.download_id);
+                return;
+            }
+
+            // Double-check current state from global state
+            const currentState = globalDownloadStates.find(
+                state => state.download_id === downloadToStart.download_id
+            );
+
+            if (!currentState || currentState.download_status !== 'queued') {
+                console.log("Download no longer in queued state:", downloadToStart.download_id);
+                return;
+            }
+
+            console.log("Starting queued download:", downloadToStart.download_id);
+            LOG.info('NEODLP', `Starting queued download with id: ${downloadToStart.download_id}`);
+            lastProcessedDownloadIdRef.current = downloadToStart.download_id;
+
+            await downloadStatusUpdater.mutateAsync({
+                download_id: downloadToStart.download_id,
+                download_status: 'starting'
+            });
+
+            await queryClient.invalidateQueries({ queryKey: ['download-states'] });
+
+            await startDownload({
+                url: downloadToStart.url,
+                selectedFormat: downloadToStart.format_id,
+                downloadConfig: downloadToStart.queue_config ? JSON.parse(downloadToStart.queue_config) : {
+                    output_format: null,
+                    embed_metadata: null,
+                    embed_thumbnail: null,
+                    square_crop_thumbnail: null,
+                    sponsorblock: null,
+                    custom_command: null
+                },
+                selectedSubtitles: downloadToStart.subtitle_id,
+                resumeState: downloadToStart
+            });
+        } catch (error) {
+            console.error("Error processing download queue:", error);
+            LOG.error('NEODLP', `Error processing download queue: ${error}`);
+        } finally {
+            // Important: reset the processing flag
+            setTimeout(() => {
+                isProcessingQueueRef.current = false;
+                console.log("Queue processor released lock");
+            }, 1000);
+        }
+    }, [queuedDownloads, ongoingDownloads, globalDownloadStates, queryClient]);
+
+    return { fetchVideoMetadata, startDownload, pauseDownload, resumeDownload, cancelDownload, processQueuedDownloads };
+}

src/helpers/use-settings.ts

@@ -8,6 +8,7 @@ export function useSettings() {
   const queryClient = useQueryClient();
   const setSettingsKey = useSettingsPageStatesStore(state => state.setSettingsKey);
   const resetSettingsState = useSettingsPageStatesStore(state => state.resetSettings);
+  const triggerFormReset = useSettingsPageStatesStore(state => state.triggerFormReset);
   const settingsKeySaver = useSaveSettingsKey();
   const settingsReseter = useResetSettings();
 
@@ -34,6 +35,7 @@ export function useSettings() {
         try {
           await invoke("reset_config");
           resetSettingsState();
+          triggerFormReset();
           console.log("Settings reset successfully");
           queryClient.invalidateQueries({ queryKey: ["settings"] });
           toast.success("Settings reset successfully", {

src/index.css

@@ -1,7 +1,17 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@custom-variant dark (&:is(.dark *));
+@custom-variant dark (&:is(.dark *, .blue-dark *, .green-dark *, .orange-dark *, .red-dark *, .rose-dark *, .violet-dark *, .yellow-dark *));
+@custom-variant light (&:is(:not(.dark):not(.blue-dark):not(.green-dark):not(.orange-dark):not(.red-dark):not(.rose-dark):not(.violet-dark):not(.yellow-dark) *));
+@custom-variant defaultscheme (&:is(:not(.blue):not(.blue-dark):not(.green):not(.green-dark):not(.orange):not(.orange-dark):not(.red):not(.red-dark):not(.rose):not(.rose-dark):not(.violet):not(.violet-dark):not(.yellow):not(.yellow-dark) *));
+@custom-variant customscheme (&:is(.blue *, .blue-dark *, .green *, .green-dark *, .orange *, .orange-dark *, .red *, .red-dark *, .rose *, .rose-dark *, .violet *, .violet-dark *, .yellow *, .yellow-dark *));
+@custom-variant blue (&:is(.blue *, .blue-dark *));
+@custom-variant green (&:is(.green *, .green-dark *));
+@custom-variant orange (&:is(.orange *, .orange-dark *));
+@custom-variant red (&:is(.red *, .red-dark *));
+@custom-variant rose (&:is(.rose *, .rose-dark *));
+@custom-variant violet (&:is(.violet *, .violet-dark *));
+@custom-variant yellow (&:is(.yellow *, .yellow-dark *));
 
 @theme inline {
     --radius-sm: calc(var(--radius) - 4px);
@@ -40,6 +50,27 @@
     --color-sidebar-border: var(--sidebar-border);
     --color-sidebar-ring: var(--sidebar-ring);
 
+    --animate-accordion-down: accordion-down 0.2s ease-out;
+    --animate-accordion-up: accordion-up 0.2s ease-out;
+
+    @keyframes accordion-down {
+        from {
+            height: 0;
+        }
+        to {
+            height: var(--radix-accordion-content-height);
+        }
+    }
+
+    @keyframes accordion-up {
+        from {
+            height: var(--radix-accordion-content-height);
+        }
+        to {
+            height: 0;
+        }
+    }
+
     @keyframes indeterminate-progress {
         0% {
             transform: translateX(0) scaleX(0);
@@ -54,7 +85,7 @@
 }
 
 :root {
-  --radius: 0.625rem;
+    --radius: 0.65rem;
     --background: oklch(1 0 0);
     --foreground: oklch(0.141 0.005 285.823);
     --card: oklch(1 0 0);
@@ -122,6 +153,482 @@
     --sidebar-ring: oklch(0.552 0.016 285.938);
 }
 
+.blue {
+    --background:  oklch(1 0 0);
+    --foreground:  oklch(0.141 0.005 285.823);
+    --card:  oklch(1 0 0);
+    --card-foreground:  oklch(0.141 0.005 285.823);
+    --popover:  oklch(1 0 0);
+    --popover-foreground:  oklch(0.141 0.005 285.823);
+    --primary:  oklch(0.488 0.243 264.376);
+    --primary-foreground:  oklch(0.97 0.014 254.604);
+    --secondary:  oklch(0.967 0.001 286.375);
+    --secondary-foreground:  oklch(0.21 0.006 285.885);
+    --muted:  oklch(0.967 0.001 286.375);
+    --muted-foreground:  oklch(0.552 0.016 285.938);
+    --accent:  oklch(0.967 0.001 286.375);
+    --accent-foreground:  oklch(0.21 0.006 285.885);
+    --destructive:  oklch(0.577 0.245 27.325);
+    --border:  oklch(0.92 0.004 286.32);
+    --input:  oklch(0.92 0.004 286.32);
+    --ring:  oklch(0.708 0 0);
+    --chart-1:  oklch(0.809 0.105 251.813);
+    --chart-2:  oklch(0.623 0.214 259.815);
+    --chart-3:  oklch(0.546 0.245 262.881);
+    --chart-4:  oklch(0.488 0.243 264.376);
+    --chart-5:  oklch(0.424 0.199 265.638);
+    --sidebar:  oklch(0.985 0 0);
+    --sidebar-foreground:  oklch(0.141 0.005 285.823);
+    --sidebar-primary:  oklch(0.546 0.245 262.881);
+    --sidebar-primary-foreground:  oklch(0.97 0.014 254.604);
+    --sidebar-accent:  oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground:  oklch(0.21 0.006 285.885);
+    --sidebar-border:  oklch(0.92 0.004 286.32);
+    --sidebar-ring:  oklch(0.708 0 0);
+}
+
+.blue-dark {
+    --background:  oklch(0.141 0.005 285.823);
+    --foreground:  oklch(0.985 0 0);
+    --card:  oklch(0.21 0.006 285.885);
+    --card-foreground:  oklch(0.985 0 0);
+    --popover:  oklch(0.21 0.006 285.885);
+    --popover-foreground:  oklch(0.985 0 0);
+    --primary:  oklch(0.488 0.243 264.376);
+    --primary-foreground:  oklch(0.97 0.014 254.604);
+    --secondary:  oklch(0.274 0.006 286.033);
+    --secondary-foreground:  oklch(0.985 0 0);
+    --muted:  oklch(0.274 0.006 286.033);
+    --muted-foreground:  oklch(0.705 0.015 286.067);
+    --accent:  oklch(0.274 0.006 286.033);
+    --accent-foreground:  oklch(0.985 0 0);
+    --destructive:  oklch(0.704 0.191 22.216);
+    --border:  oklch(1 0 0 / 10%);
+    --input:  oklch(1 0 0 / 15%);
+    --ring:  oklch(0.556 0 0);
+    --chart-1:  oklch(0.809 0.105 251.813);
+    --chart-2:  oklch(0.623 0.214 259.815);
+    --chart-3:  oklch(0.546 0.245 262.881);
+    --chart-4:  oklch(0.488 0.243 264.376);
+    --chart-5:  oklch(0.424 0.199 265.638);
+    --sidebar:  oklch(0.21 0.006 285.885);
+    --sidebar-foreground:  oklch(0.985 0 0);
+    --sidebar-primary:  oklch(0.623 0.214 259.815);
+    --sidebar-primary-foreground:  oklch(0.97 0.014 254.604);
+    --sidebar-accent:  oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground:  oklch(0.985 0 0);
+    --sidebar-border:  oklch(1 0 0 / 10%);
+    --sidebar-ring:  oklch(0.439 0 0);
+}
+
+.green {
+    --background:  oklch(1 0 0);
+    --foreground:  oklch(0.141 0.005 285.823);
+    --card:  oklch(1 0 0);
+    --card-foreground:  oklch(0.141 0.005 285.823);
+    --popover:  oklch(1 0 0);
+    --popover-foreground:  oklch(0.141 0.005 285.823);
+    --primary:  oklch(0.648 0.2 131.684);
+    --primary-foreground:  oklch(0.986 0.031 120.757);
+    --secondary:  oklch(0.967 0.001 286.375);
+    --secondary-foreground:  oklch(0.21 0.006 285.885);
+    --muted:  oklch(0.967 0.001 286.375);
+    --muted-foreground:  oklch(0.552 0.016 285.938);
+    --accent:  oklch(0.967 0.001 286.375);
+    --accent-foreground:  oklch(0.21 0.006 285.885);
+    --destructive:  oklch(0.577 0.245 27.325);
+    --border:  oklch(0.92 0.004 286.32);
+    --input:  oklch(0.92 0.004 286.32);
+    --ring:  oklch(0.841 0.238 128.85);
+    --chart-1:  oklch(0.871 0.15 154.449);
+    --chart-2:  oklch(0.723 0.219 149.579);
+    --chart-3:  oklch(0.627 0.194 149.214);
+    --chart-4:  oklch(0.527 0.154 150.069);
+    --chart-5:  oklch(0.448 0.119 151.328);
+    --sidebar:  oklch(0.985 0 0);
+    --sidebar-foreground:  oklch(0.141 0.005 285.823);
+    --sidebar-primary:  oklch(0.648 0.2 131.684);
+    --sidebar-primary-foreground:  oklch(0.986 0.031 120.757);
+    --sidebar-accent:  oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground:  oklch(0.21 0.006 285.885);
+    --sidebar-border:  oklch(0.92 0.004 286.32);
+    --sidebar-ring:  oklch(0.841 0.238 128.85);
+}
+
+.green-dark {
+    --background:  oklch(0.141 0.005 285.823);
+    --foreground:  oklch(0.985 0 0);
+    --card:  oklch(0.21 0.006 285.885);
+    --card-foreground:  oklch(0.985 0 0);
+    --popover:  oklch(0.21 0.006 285.885);
+    --popover-foreground:  oklch(0.985 0 0);
+    --primary:  oklch(0.648 0.2 131.684);
+    --primary-foreground:  oklch(0.986 0.031 120.757);
+    --secondary:  oklch(0.274 0.006 286.033);
+    --secondary-foreground:  oklch(0.985 0 0);
+    --muted:  oklch(0.274 0.006 286.033);
+    --muted-foreground:  oklch(0.705 0.015 286.067);
+    --accent:  oklch(0.274 0.006 286.033);
+    --accent-foreground:  oklch(0.985 0 0);
+    --destructive:  oklch(0.704 0.191 22.216);
+    --border:  oklch(1 0 0 / 10%);
+    --input:  oklch(1 0 0 / 15%);
+    --ring:  oklch(0.405 0.101 131.063);
+    --chart-1:  oklch(0.871 0.15 154.449);
+    --chart-2:  oklch(0.723 0.219 149.579);
+    --chart-3:  oklch(0.627 0.194 149.214);
+    --chart-4:  oklch(0.527 0.154 150.069);
+    --chart-5:  oklch(0.448 0.119 151.328);
+    --sidebar:  oklch(0.21 0.006 285.885);
+    --sidebar-foreground:  oklch(0.985 0 0);
+    --sidebar-primary:  oklch(0.768 0.233 130.85);
+    --sidebar-primary-foreground:  oklch(0.986 0.031 120.757);
+    --sidebar-accent:  oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground:  oklch(0.985 0 0);
+    --sidebar-border:  oklch(1 0 0 / 10%);
+    --sidebar-ring:  oklch(0.405 0.101 131.063);
+}
+
+.orange {
+    --background:  oklch(1 0 0);
+    --foreground:  oklch(0.141 0.005 285.823);
+    --card:  oklch(1 0 0);
+    --card-foreground:  oklch(0.141 0.005 285.823);
+    --popover:  oklch(1 0 0);
+    --popover-foreground:  oklch(0.141 0.005 285.823);
+    --primary:  oklch(0.646 0.222 41.116);
+    --primary-foreground:  oklch(0.98 0.016 73.684);
+    --secondary:  oklch(0.967 0.001 286.375);
+    --secondary-foreground:  oklch(0.21 0.006 285.885);
+    --muted:  oklch(0.967 0.001 286.375);
+    --muted-foreground:  oklch(0.552 0.016 285.938);
+    --accent:  oklch(0.967 0.001 286.375);
+    --accent-foreground:  oklch(0.21 0.006 285.885);
+    --destructive:  oklch(0.577 0.245 27.325);
+    --border:  oklch(0.92 0.004 286.32);
+    --input:  oklch(0.92 0.004 286.32);
+    --ring:  oklch(0.75 0.183 55.934);
+    --chart-1:  oklch(0.837 0.128 66.29);
+    --chart-2:  oklch(0.705 0.213 47.604);
+    --chart-3:  oklch(0.646 0.222 41.116);
+    --chart-4:  oklch(0.553 0.195 38.402);
+    --chart-5:  oklch(0.47 0.157 37.304);
+    --sidebar:  oklch(0.985 0 0);
+    --sidebar-foreground:  oklch(0.141 0.005 285.823);
+    --sidebar-primary:  oklch(0.646 0.222 41.116);
+    --sidebar-primary-foreground:  oklch(0.98 0.016 73.684);
+    --sidebar-accent:  oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground:  oklch(0.21 0.006 285.885);
+    --sidebar-border:  oklch(0.92 0.004 286.32);
+    --sidebar-ring:  oklch(0.75 0.183 55.934);
+}
+
+.orange-dark {
+    --background:  oklch(0.141 0.005 285.823);
+    --foreground:  oklch(0.985 0 0);
+    --card:  oklch(0.21 0.006 285.885);
+    --card-foreground:  oklch(0.985 0 0);
+    --popover:  oklch(0.21 0.006 285.885);
+    --popover-foreground:  oklch(0.985 0 0);
+    --primary:  oklch(0.705 0.213 47.604);
+    --primary-foreground:  oklch(0.98 0.016 73.684);
+    --secondary:  oklch(0.274 0.006 286.033);
+    --secondary-foreground:  oklch(0.985 0 0);
+    --muted:  oklch(0.274 0.006 286.033);
+    --muted-foreground:  oklch(0.705 0.015 286.067);
+    --accent:  oklch(0.274 0.006 286.033);
+    --accent-foreground:  oklch(0.985 0 0);
+    --destructive:  oklch(0.704 0.191 22.216);
+    --border:  oklch(1 0 0 / 10%);
+    --input:  oklch(1 0 0 / 15%);
+    --ring:  oklch(0.408 0.123 38.172);
+    --chart-1:  oklch(0.837 0.128 66.29);
+    --chart-2:  oklch(0.705 0.213 47.604);
+    --chart-3:  oklch(0.646 0.222 41.116);
+    --chart-4:  oklch(0.553 0.195 38.402);
+    --chart-5:  oklch(0.47 0.157 37.304);
+    --sidebar:  oklch(0.21 0.006 285.885);
+    --sidebar-foreground:  oklch(0.985 0 0);
+    --sidebar-primary:  oklch(0.705 0.213 47.604);
+    --sidebar-primary-foreground:  oklch(0.98 0.016 73.684);
+    --sidebar-accent:  oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground:  oklch(0.985 0 0);
+    --sidebar-border:  oklch(1 0 0 / 10%);
+    --sidebar-ring:  oklch(0.408 0.123 38.172);
+}
+
+.red {
+    --background:  oklch(1 0 0);
+    --foreground:  oklch(0.141 0.005 285.823);
+    --card:  oklch(1 0 0);
+    --card-foreground:  oklch(0.141 0.005 285.823);
+    --popover:  oklch(1 0 0);
+    --popover-foreground:  oklch(0.141 0.005 285.823);
+    --primary:  oklch(0.577 0.245 27.325);
+    --primary-foreground:  oklch(0.971 0.013 17.38);
+    --secondary:  oklch(0.967 0.001 286.375);
+    --secondary-foreground:  oklch(0.21 0.006 285.885);
+    --muted:  oklch(0.967 0.001 286.375);
+    --muted-foreground:  oklch(0.552 0.016 285.938);
+    --accent:  oklch(0.967 0.001 286.375);
+    --accent-foreground:  oklch(0.21 0.006 285.885);
+    --destructive:  oklch(0.577 0.245 27.325);
+    --border:  oklch(0.92 0.004 286.32);
+    --input:  oklch(0.92 0.004 286.32);
+    --ring:  oklch(0.704 0.191 22.216);
+    --chart-1:  oklch(0.808 0.114 19.571);
+    --chart-2:  oklch(0.637 0.237 25.331);
+    --chart-3:  oklch(0.577 0.245 27.325);
+    --chart-4:  oklch(0.505 0.213 27.518);
+    --chart-5:  oklch(0.444 0.177 26.899);
+    --sidebar:  oklch(0.985 0 0);
+    --sidebar-foreground:  oklch(0.141 0.005 285.823);
+    --sidebar-primary:  oklch(0.577 0.245 27.325);
+    --sidebar-primary-foreground:  oklch(0.971 0.013 17.38);
+    --sidebar-accent:  oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground:  oklch(0.21 0.006 285.885);
+    --sidebar-border:  oklch(0.92 0.004 286.32);
+    --sidebar-ring:  oklch(0.704 0.191 22.216);
+}
+
+.red-dark {
+    --background:  oklch(0.141 0.005 285.823);
+    --foreground:  oklch(0.985 0 0);
+    --card:  oklch(0.21 0.006 285.885);
+    --card-foreground:  oklch(0.985 0 0);
+    --popover:  oklch(0.21 0.006 285.885);
+    --popover-foreground:  oklch(0.985 0 0);
+    --primary:  oklch(0.637 0.237 25.331);
+    --primary-foreground:  oklch(0.971 0.013 17.38);
+    --secondary:  oklch(0.274 0.006 286.033);
+    --secondary-foreground:  oklch(0.985 0 0);
+    --muted:  oklch(0.274 0.006 286.033);
+    --muted-foreground:  oklch(0.705 0.015 286.067);
+    --accent:  oklch(0.274 0.006 286.033);
+    --accent-foreground:  oklch(0.985 0 0);
+    --destructive:  oklch(0.704 0.191 22.216);
+    --border:  oklch(1 0 0 / 10%);
+    --input:  oklch(1 0 0 / 15%);
+    --ring:  oklch(0.396 0.141 25.723);
+    --chart-1:  oklch(0.808 0.114 19.571);
+    --chart-2:  oklch(0.637 0.237 25.331);
+    --chart-3:  oklch(0.577 0.245 27.325);
+    --chart-4:  oklch(0.505 0.213 27.518);
+    --chart-5:  oklch(0.444 0.177 26.899);
+    --sidebar:  oklch(0.21 0.006 285.885);
+    --sidebar-foreground:  oklch(0.985 0 0);
+    --sidebar-primary:  oklch(0.637 0.237 25.331);
+    --sidebar-primary-foreground:  oklch(0.971 0.013 17.38);
+    --sidebar-accent:  oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground:  oklch(0.985 0 0);
+    --sidebar-border:  oklch(1 0 0 / 10%);
+    --sidebar-ring:  oklch(0.396 0.141 25.723);
+}
+
+.rose {
+    --background:  oklch(1 0 0);
+    --foreground:  oklch(0.141 0.005 285.823);
+    --card:  oklch(1 0 0);
+    --card-foreground:  oklch(0.141 0.005 285.823);
+    --popover:  oklch(1 0 0);
+    --popover-foreground:  oklch(0.141 0.005 285.823);
+    --primary:  oklch(0.586 0.253 17.585);
+    --primary-foreground:  oklch(0.969 0.015 12.422);
+    --secondary:  oklch(0.967 0.001 286.375);
+    --secondary-foreground:  oklch(0.21 0.006 285.885);
+    --muted:  oklch(0.967 0.001 286.375);
+    --muted-foreground:  oklch(0.552 0.016 285.938);
+    --accent:  oklch(0.967 0.001 286.375);
+    --accent-foreground:  oklch(0.21 0.006 285.885);
+    --destructive:  oklch(0.577 0.245 27.325);
+    --border:  oklch(0.92 0.004 286.32);
+    --input:  oklch(0.92 0.004 286.32);
+    --ring:  oklch(0.712 0.194 13.428);
+    --chart-1:  oklch(0.81 0.117 11.638);
+    --chart-2:  oklch(0.645 0.246 16.439);
+    --chart-3:  oklch(0.586 0.253 17.585);
+    --chart-4:  oklch(0.514 0.222 16.935);
+    --chart-5:  oklch(0.455 0.188 13.697);
+    --sidebar:  oklch(0.985 0 0);
+    --sidebar-foreground:  oklch(0.141 0.005 285.823);
+    --sidebar-primary:  oklch(0.586 0.253 17.585);
+    --sidebar-primary-foreground:  oklch(0.969 0.015 12.422);
+    --sidebar-accent:  oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground:  oklch(0.21 0.006 285.885);
+    --sidebar-border:  oklch(0.92 0.004 286.32);
+    --sidebar-ring:  oklch(0.712 0.194 13.428);
+}
+
+.rose-dark {
+    --background:  oklch(0.141 0.005 285.823);
+    --foreground:  oklch(0.985 0 0);
+    --card:  oklch(0.21 0.006 285.885);
+    --card-foreground:  oklch(0.985 0 0);
+    --popover:  oklch(0.21 0.006 285.885);
+    --popover-foreground:  oklch(0.985 0 0);
+    --primary:  oklch(0.645 0.246 16.439);
+    --primary-foreground:  oklch(0.969 0.015 12.422);
+    --secondary:  oklch(0.274 0.006 286.033);
+    --secondary-foreground:  oklch(0.985 0 0);
+    --muted:  oklch(0.274 0.006 286.033);
+    --muted-foreground:  oklch(0.705 0.015 286.067);
+    --accent:  oklch(0.274 0.006 286.033);
+    --accent-foreground:  oklch(0.985 0 0);
+    --destructive:  oklch(0.704 0.191 22.216);
+    --border:  oklch(1 0 0 / 10%);
+    --input:  oklch(1 0 0 / 15%);
+    --ring:  oklch(0.41 0.159 10.272);
+    --chart-1:  oklch(0.81 0.117 11.638);
+    --chart-2:  oklch(0.645 0.246 16.439);
+    --chart-3:  oklch(0.586 0.253 17.585);
+    --chart-4:  oklch(0.514 0.222 16.935);
+    --chart-5:  oklch(0.455 0.188 13.697);
+    --sidebar:  oklch(0.21 0.006 285.885);
+    --sidebar-foreground:  oklch(0.985 0 0);
+    --sidebar-primary:  oklch(0.645 0.246 16.439);
+    --sidebar-primary-foreground:  oklch(0.969 0.015 12.422);
+    --sidebar-accent:  oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground:  oklch(0.985 0 0);
+    --sidebar-border:  oklch(1 0 0 / 10%);
+    --sidebar-ring:  oklch(0.41 0.159 10.272);
+}
+
+.violet {
+    --background:  oklch(1 0 0);
+    --foreground:  oklch(0.141 0.005 285.823);
+    --card:  oklch(1 0 0);
+    --card-foreground:  oklch(0.141 0.005 285.823);
+    --popover:  oklch(1 0 0);
+    --popover-foreground:  oklch(0.141 0.005 285.823);
+    --primary:  oklch(0.541 0.281 293.009);
+    --primary-foreground:  oklch(0.969 0.016 293.756);
+    --secondary:  oklch(0.967 0.001 286.375);
+    --secondary-foreground:  oklch(0.21 0.006 285.885);
+    --muted:  oklch(0.967 0.001 286.375);
+    --muted-foreground:  oklch(0.552 0.016 285.938);
+    --accent:  oklch(0.967 0.001 286.375);
+    --accent-foreground:  oklch(0.21 0.006 285.885);
+    --destructive:  oklch(0.577 0.245 27.325);
+    --border:  oklch(0.92 0.004 286.32);
+    --input:  oklch(0.92 0.004 286.32);
+    --ring:  oklch(0.702 0.183 293.541);
+    --chart-1:  oklch(0.811 0.111 293.571);
+    --chart-2:  oklch(0.606 0.25 292.717);
+    --chart-3:  oklch(0.541 0.281 293.009);
+    --chart-4:  oklch(0.491 0.27 292.581);
+    --chart-5:  oklch(0.432 0.232 292.759);
+    --sidebar:  oklch(0.985 0 0);
+    --sidebar-foreground:  oklch(0.141 0.005 285.823);
+    --sidebar-primary:  oklch(0.541 0.281 293.009);
+    --sidebar-primary-foreground:  oklch(0.969 0.016 293.756);
+    --sidebar-accent:  oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground:  oklch(0.21 0.006 285.885);
+    --sidebar-border:  oklch(0.92 0.004 286.32);
+    --sidebar-ring:  oklch(0.702 0.183 293.541);
+}
+
+.violet-dark {
+    --background:  oklch(0.141 0.005 285.823);
+    --foreground:  oklch(0.985 0 0);
+    --card:  oklch(0.21 0.006 285.885);
+    --card-foreground:  oklch(0.985 0 0);
+    --popover:  oklch(0.21 0.006 285.885);
+    --popover-foreground:  oklch(0.985 0 0);
+    --primary:  oklch(0.606 0.25 292.717);
+    --primary-foreground:  oklch(0.969 0.016 293.756);
+    --secondary:  oklch(0.274 0.006 286.033);
+    --secondary-foreground:  oklch(0.985 0 0);
+    --muted:  oklch(0.274 0.006 286.033);
+    --muted-foreground:  oklch(0.705 0.015 286.067);
+    --accent:  oklch(0.274 0.006 286.033);
+    --accent-foreground:  oklch(0.985 0 0);
+    --destructive:  oklch(0.704 0.191 22.216);
+    --border:  oklch(1 0 0 / 10%);
+    --input:  oklch(1 0 0 / 15%);
+    --ring:  oklch(0.38 0.189 293.745);
+    --chart-1:  oklch(0.811 0.111 293.571);
+    --chart-2:  oklch(0.606 0.25 292.717);
+    --chart-3:  oklch(0.541 0.281 293.009);
+    --chart-4:  oklch(0.491 0.27 292.581);
+    --chart-5:  oklch(0.432 0.232 292.759);
+    --sidebar:  oklch(0.21 0.006 285.885);
+    --sidebar-foreground:  oklch(0.985 0 0);
+    --sidebar-primary:  oklch(0.606 0.25 292.717);
+    --sidebar-primary-foreground:  oklch(0.969 0.016 293.756);
+    --sidebar-accent:  oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground:  oklch(0.985 0 0);
+    --sidebar-border:  oklch(1 0 0 / 10%);
+    --sidebar-ring:  oklch(0.38 0.189 293.745);
+}
+
+.yellow {
+    --background:  oklch(1 0 0);
+    --foreground:  oklch(0.141 0.005 285.823);
+    --card:  oklch(1 0 0);
+    --card-foreground:  oklch(0.141 0.005 285.823);
+    --popover:  oklch(1 0 0);
+    --popover-foreground:  oklch(0.141 0.005 285.823);
+    --primary:  oklch(0.852 0.199 91.936);
+    --primary-foreground:  oklch(0.421 0.095 57.708);
+    --secondary:  oklch(0.967 0.001 286.375);
+    --secondary-foreground:  oklch(0.21 0.006 285.885);
+    --muted:  oklch(0.967 0.001 286.375);
+    --muted-foreground:  oklch(0.552 0.016 285.938);
+    --accent:  oklch(0.967 0.001 286.375);
+    --accent-foreground:  oklch(0.21 0.006 285.885);
+    --destructive:  oklch(0.577 0.245 27.325);
+    --border:  oklch(0.92 0.004 286.32);
+    --input:  oklch(0.92 0.004 286.32);
+    --ring:  oklch(0.852 0.199 91.936);
+    --chart-1:  oklch(0.905 0.182 98.111);
+    --chart-2:  oklch(0.795 0.184 86.047);
+    --chart-3:  oklch(0.681 0.162 75.834);
+    --chart-4:  oklch(0.554 0.135 66.442);
+    --chart-5:  oklch(0.476 0.114 61.907);
+    --sidebar:  oklch(0.985 0 0);
+    --sidebar-foreground:  oklch(0.141 0.005 285.823);
+    --sidebar-primary:  oklch(0.681 0.162 75.834);
+    --sidebar-primary-foreground:  oklch(0.987 0.026 102.212);
+    --sidebar-accent:  oklch(0.967 0.001 286.375);
+    --sidebar-accent-foreground:  oklch(0.21 0.006 285.885);
+    --sidebar-border:  oklch(0.92 0.004 286.32);
+    --sidebar-ring:  oklch(0.852 0.199 91.936);
+}
+
+.yellow-dark {
+    --background:  oklch(0.141 0.005 285.823);
+    --foreground:  oklch(0.985 0 0);
+    --card:  oklch(0.21 0.006 285.885);
+    --card-foreground:  oklch(0.985 0 0);
+    --popover:  oklch(0.21 0.006 285.885);
+    --popover-foreground:  oklch(0.985 0 0);
+    --primary:  oklch(0.795 0.184 86.047);
+    --primary-foreground:  oklch(0.421 0.095 57.708);
+    --secondary:  oklch(0.274 0.006 286.033);
+    --secondary-foreground:  oklch(0.985 0 0);
+    --muted:  oklch(0.274 0.006 286.033);
+    --muted-foreground:  oklch(0.705 0.015 286.067);
+    --accent:  oklch(0.274 0.006 286.033);
+    --accent-foreground:  oklch(0.985 0 0);
+    --destructive:  oklch(0.704 0.191 22.216);
+    --border:  oklch(1 0 0 / 10%);
+    --input:  oklch(1 0 0 / 15%);
+    --ring:  oklch(0.421 0.095 57.708);
+    --chart-1:  oklch(0.905 0.182 98.111);
+    --chart-2:  oklch(0.795 0.184 86.047);
+    --chart-3:  oklch(0.681 0.162 75.834);
+    --chart-4:  oklch(0.554 0.135 66.442);
+    --chart-5:  oklch(0.476 0.114 61.907);
+    --sidebar:  oklch(0.21 0.006 285.885);
+    --sidebar-foreground:  oklch(0.985 0 0);
+    --sidebar-primary:  oklch(0.795 0.184 86.047);
+    --sidebar-primary-foreground:  oklch(0.987 0.026 102.212);
+    --sidebar-accent:  oklch(0.274 0.006 286.033);
+    --sidebar-accent-foreground:  oklch(0.985 0 0);
+    --sidebar-border:  oklch(1 0 0 / 10%);
+    --sidebar-ring:  oklch(0.421 0.095 57.708);
+}
+
 @layer base {
     * {
         @apply border-border outline-ring/50;

src/pages/library.tsx

@@ -1,51 +1,26 @@
-import { IndeterminateProgress } from "@/components/custom/indeterminateProgress";
-import { ProxyImage } from "@/components/custom/proxyImage";
-import { AspectRatio } from "@/components/ui/aspect-ratio";
 import { Button } from "@/components/ui/button";
-import { Progress } from "@/components/ui/progress";
-import { Separator } from "@/components/ui/separator";
 import { toast } from "sonner";
 import { useAppContext } from "@/providers/appContextProvider";
-import { useCurrentVideoMetadataStore, useDownloadActionStatesStore, useDownloadStatesStore, useLibraryPageStatesStore, useSettingsPageStatesStore } from "@/services/store";
+import { useDownloadActionStatesStore, useDownloadStatesStore, useLibraryPageStatesStore } from "@/services/store";
-import { formatBitrate, formatCodec, formatDurationString, formatFileSize, formatSecToTimeString, formatSpeed } from "@/utils";
+import { Square } from "lucide-react";
-import { AudioLines, Clock, File, FileAudio2, FileQuestion, FileVideo2, FolderInput, ListVideo, Loader2, Music, Pause, Play, Search, Square, 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";
-import { useQueryClient } from "@tanstack/react-query";
-import { useDeleteDownloadState } from "@/services/mutations";
 import { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle, AlertDialogTrigger } from "@/components/ui/alert-dialog";
-import { Checkbox } from "@/components/ui/checkbox";
-import { Label } from "@/components/ui/label";
 import Heading from "@/components/heading";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { Badge } from "@/components/ui/badge";
-import { useNavigate } from "react-router-dom";
+import { CompletedDownloads } from "@/components/pages/library/completedDownloads";
-import { useLogger } from "@/helpers/use-logger";
+import { IncompleteDownloads } from "@/components/pages/library/incompleteDownloads";
 
 export default function LibraryPage() {
     const activeTab = useLibraryPageStatesStore(state => state.activeTab);
     const setActiveTab = useLibraryPageStatesStore(state => state.setActiveTab);
 
     const downloadStates = useDownloadStatesStore(state => state.downloadStates);
-    const downloadActions = useDownloadActionStatesStore(state => state.downloadActions);
-    const setIsResumingDownload = useDownloadActionStatesStore(state => state.setIsResumingDownload);
     const setIsPausingDownload = useDownloadActionStatesStore(state => state.setIsPausingDownload);
-    const setIsCancelingDownload = useDownloadActionStatesStore(state => state.setIsCancelingDownload);
-    const setIsDeleteFileChecked = useDownloadActionStatesStore(state => state.setIsDeleteFileChecked);
 
-    const debugMode = useSettingsPageStatesStore(state => state.settings.debug_mode);
+    const { pauseDownload } = useAppContext();
-
-    const { pauseDownload, resumeDownload, cancelDownload } = useAppContext()
-
-    const queryClient = useQueryClient();
-    const downloadStateDeleter = useDeleteDownloadState();
-    const navigate = useNavigate();
-    const LOG = useLogger();
 
     const incompleteDownloads = downloadStates.filter(state => state.download_status !== 'completed');
-    const completedDownloads = downloadStates.filter(state => state.download_status === 'completed')
+    const completedDownloads = downloadStates.filter(state => state.download_status === 'completed').sort((a, b) => {
-    .sort((a, b) => {
         // Latest updated first
         const dateA = a.updated_at ? new Date(a.updated_at).getTime() : 0;
         const dateB = b.updated_at ? new Date(b.updated_at).getTime() : 0;
@@ -55,57 +30,6 @@ export default function LibraryPage() {
         ['starting', 'downloading', 'queued'].includes(state.download_status)
     );
 
-    const openFile = async (filePath: string | null, app: string | null) => {
-        if (filePath && await fs.exists(filePath)) {
-            try {
-                await invoke('open_file_with_app', { filePath: filePath, appName: app }).then(() => {
-                    toast.info(`${app === 'explorer' ? 'Revealing' : 'Opening'} file`, {
-                        description: `${app === 'explorer' ? 'Revealing' : 'Opening'} the file ${app === 'explorer' ? 'in' : 'with'} ${app ? app : 'default app'}.`,
-                    })
-                });
-            } catch (e) {
-                console.error(e);
-                toast.error(`Failed to ${app === 'explorer' ? 'reveal' : 'open'} file`, {
-                    description: `An error occurred while trying to ${app === 'explorer' ? 'reveal' : 'open'} the file.`,
-                })
-            }
-        } else {
-            toast.info("File unavailable", {
-                description: `The file you are trying to ${app === 'explorer' ? 'reveal' : 'open'} does not exist.`,
-            })
-        }
-    }
-
-    const removeFromDownloads = async (downloadState: DownloadState, delete_file: boolean) => {
-        if (delete_file && downloadState.filepath) {
-            try {
-                if (await fs.exists(downloadState.filepath)) {
-                    await fs.remove(downloadState.filepath);
-                } else {
-                    console.error(`File not found: ${downloadState.filepath}`);
-                }
-            } catch (e) {
-                console.error(e);
-            }
-        }
-
-        downloadStateDeleter.mutate(downloadState.download_id, {
-            onSuccess: (data) => {
-                console.log("Download State deleted successfully:", data);
-                queryClient.invalidateQueries({ queryKey: ['download-states'] });
-                toast.success("Removed from downloads", {
-                    description: "The download has been removed successfully.",
-                });
-            },
-            onError: (error) => {
-                console.error("Failed to delete download state:", error);
-                toast.error("Failed to remove download", {
-                    description: "An error occurred while trying to remove the download.",
-                });
-            }
-        })
-    }
-
     const stopOngoingDownloads = async () => {
         if (ongoingDownloads.length > 0) {
             for (const state of ongoingDownloads) {
@@ -133,24 +57,6 @@ export default function LibraryPage() {
         }
     }
 
-    const handleSearch = async (url: string, isPlaylist: boolean) => {
-        try {
-            LOG.info('NEODLP', `Received search request from library for URL: ${url}`);
-            navigate('/');
-            const { setRequestedUrl, setAutoSubmitSearch } = useCurrentVideoMetadataStore.getState();
-            setRequestedUrl(url);
-            setAutoSubmitSearch(true);
-            toast.info(`Initiating ${isPlaylist ? 'Playlist' : 'Video'} Search`, {
-                description: `Initiating search for the selected ${isPlaylist ? 'playlist' : 'video'}.`,
-            });
-        } catch (e) {
-            console.error(e);
-            toast.error("Failed to initiate search", {
-                description: "An error occurred while trying to initiate the search.",
-            });
-        }
-    }
-
     return (
         <div className="container mx-auto p-4 space-y-4">
             <Heading title="Library" description="Manage all your downloads in one place" />
@@ -158,7 +64,7 @@ export default function LibraryPage() {
                 <div className="w-full flex items-center justify-between mb-4">
                     <TabsList>
                         <TabsTrigger value="completed">Completed {completedDownloads.length > 0 && (`(${completedDownloads.length})`)}</TabsTrigger>
-                        <TabsTrigger value="incomplete">Incomplete {(incompleteDownloads.length > 0 && ongoingDownloads.length <= 0) && (`(${incompleteDownloads.length})`)} {ongoingDownloads.length > 0 && (<Badge className="h-4 min-w-4 rounded-full px-1 font-mono tabular-nums ml-1">{ongoingDownloads.length}</Badge>)}</TabsTrigger>
+                        <TabsTrigger value="incomplete">Incomplete {(incompleteDownloads.length > 0 && ongoingDownloads.length <= 0) && (`(${incompleteDownloads.length})`)} {ongoingDownloads.length > 0 && (<Badge className="h-4 min-w-4 rounded-full px-1 font-mono tabular-nums ml-1.5 mt-0.5">{ongoingDownloads.length}</Badge>)}</TabsTrigger>
                     </TabsList>
                     <AlertDialog>
                         <AlertDialogTrigger asChild>
@@ -189,317 +95,10 @@ export default function LibraryPage() {
                     </AlertDialog>
                 </div>
                 <TabsContent value="completed">
-                    <div className="w-full flex flex-col gap-2">
+                    <CompletedDownloads downloads={completedDownloads} />
-                        {completedDownloads.length > 0 ? (
-                            completedDownloads.map((state) => {
-                                const itemActionStates = downloadActions[state.download_id] || {
-                                    isResuming: false,
-                                    isPausing: false,
-                                    isCanceling: false,
-                                    isDeleteFileChecked: false,
-                                };
-                                return (
-                                    <div className="p-4 border border-border rounded-lg flex gap-4" key={state.download_id}>
-                                        <div className="w-[30%] flex flex-col justify-between gap-2">
-                                            <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border mb-2">
-                                                <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
-                                            </AspectRatio>
-                                            <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
-                                                {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
-                                                    <Video className="w-4 h-4 mr-2" />
-                                                )}
-                                                {state.filetype && state.filetype === 'audio' && (
-                                                    <Music className="w-4 h-4 mr-2" />
-                                                )}
-                                                {(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
-                                                    <File className="w-4 h-4 mr-2" />
-                                                )}
-                                                {state.ext?.toUpperCase()} {state.resolution ? `(${state.resolution})` : null}
-                                            </span>
-                                        </div>
-                                        <div className="w-full flex flex-col justify-between gap-2">
-                                            <div className="flex flex-col gap-1">
-                                                <h4 className="">{state.title}</h4>
-                                                <p className="text-xs text-muted-foreground">{state.channel ? state.channel : 'unknown'} {state.host ? `• ${state.host}` : 'unknown'}</p>
-                                                <div className="flex items-center mt-1">
-                                                    <span className="text-xs text-muted-foreground flex items-center pr-3"><Clock className="w-4 h-4 mr-2"/> {state.duration_string ? formatDurationString(state.duration_string) : 'unknown'}</span>
-                                                    <Separator orientation="vertical" />
-                                                    <span className="text-xs text-muted-foreground flex items-center px-3">
-                                                    {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
-                                                        <FileVideo2 className="w-4 h-4 mr-2"/>
-                                                    )}
-                                                    {state.filetype && state.filetype === 'audio' && (
-                                                        <FileAudio2 className="w-4 h-4 mr-2" />
-                                                    )}
-                                                    {(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
-                                                        <FileQuestion className="w-4 h-4 mr-2" />
-                                                    )}
-                                                    {state.filesize ? formatFileSize(state.filesize) : 'unknown'}
-                                                    </span>
-                                                    <Separator orientation="vertical" />
-                                                    <span className="text-xs text-muted-foreground flex items-center pl-3"><AudioLines className="w-4 h-4 mr-2"/>
-                                                    {state.vbr && state.abr ? (
-                                                        formatBitrate(state.vbr + state.abr)
-                                                    ) : state.vbr ? (
-                                                        formatBitrate(state.vbr)
-                                                    ) : state.abr ? (
-                                                        formatBitrate(state.abr)
-                                                    ) : (
-                                                        'unknown'
-                                                    )}
-                                                    </span>
-                                                </div>
-                                                <div className="hidden xl:flex items-center mt-1 gap-2 flex-wrap text-xs">
-                                                    {state.playlist_id && state.playlist_index && (
-                                                        <span
-                                                        className="border border-border py-1 px-2 rounded flex items-center cursor-pointer"
-                                                        title={`${state.playlist_title ?? 'UNKNOWN PLAYLIST'}` + ' by ' + `${state.playlist_channel ?? 'UNKNOWN CHANNEL'}`}
-                                                        >
-                                                            <ListVideo className="w-4 h-4 mr-2" /> Playlist ({state.playlist_index} of {state.playlist_n_entries})
-                                                        </span>
-                                                    )}
-                                                    {state.vcodec && (
-                                                        <span className="border border-border py-1 px-2 rounded">{formatCodec(state.vcodec)}</span>
-                                                    )}
-                                                    {state.acodec && (
-                                                        <span className="border border-border py-1 px-2 rounded">{formatCodec(state.acodec)}</span>
-                                                    )}
-                                                    {state.dynamic_range && state.dynamic_range !== 'SDR' && (
-                                                        <span className="border border-border py-1 px-2 rounded">{state.dynamic_range}</span>
-                                                    )}
-                                                    {state.subtitle_id && (
-                                                        <span
-                                                        className="border border-border py-1 px-2 rounded cursor-pointer"
-                                                        title={`EMBEDED SUBTITLE (${state.subtitle_id})`}
-                                                        >
-                                                            ESUB
-                                                        </span>
-                                                    )}
-                                                </div>
-                                            </div>
-                                            <div className="w-full flex items-center gap-2">
-                                                <Button size="sm" onClick={() => openFile(state.filepath, null)}>
-                                                    <Play className="w-4 h-4" />
-                                                    Open
-                                                </Button>
-                                                <Button size="sm" variant="outline" onClick={() => openFile(state.filepath, 'explorer')}>
-                                                    <FolderInput className="w-4 h-4" />
-                                                    Reveal
-                                                </Button>
-                                                <Button size="sm" variant="outline" onClick={() => handleSearch(state.url, state.playlist_id ? true : false)}>
-                                                    <Search className="w-4 h-4" />
-                                                    Search
-                                                </Button>
-                                                <AlertDialog>
-                                                    <AlertDialogTrigger asChild>
-                                                        <Button size="sm" variant="destructive">
-                                                            <Trash2 className="w-4 h-4" />
-                                                            Remove
-                                                        </Button>
-                                                    </AlertDialogTrigger>
-                                                    <AlertDialogContent>
-                                                        <AlertDialogHeader>
-                                                            <AlertDialogTitle>Remove from library?</AlertDialogTitle>
-                                                            <AlertDialogDescription>
-                                                                Are you sure you want to remove this download from the library? You can also delete the downloaded file by cheking the box below. This action cannot be undone.
-                                                            </AlertDialogDescription>
-                                                            <div className="flex items-center space-x-2">
-                                                                <Checkbox id="delete-file" checked={itemActionStates.isDeleteFileChecked} onCheckedChange={() => {setIsDeleteFileChecked(state.download_id, !itemActionStates.isDeleteFileChecked)}} />
-                                                                <Label htmlFor="delete-file">Delete the downloaded file</Label>
-                                                            </div>
-                                                        </AlertDialogHeader>
-                                                        <AlertDialogFooter>
-                                                            <AlertDialogCancel>Cancel</AlertDialogCancel>
-                                                            <AlertDialogAction onClick={
-                                                                () => removeFromDownloads(state, itemActionStates.isDeleteFileChecked).then(() => {
-                                                                    setIsDeleteFileChecked(state.download_id, false);
-                                                                })
-                                                            }>Remove</AlertDialogAction>
-                                                        </AlertDialogFooter>
-                                                    </AlertDialogContent>
-                                                </AlertDialog>
-                                            </div>
-                                        </div>
-                                    </div>
-                                )
-                            })
-                        ) : (
-                            <div className="w-full flex flex-col items-center gap-2 justify-center mt-27">
-                                <h4 className="text-4xl font-bold text-muted-foreground/80 dark:text-muted">Nothing!</h4>
-                                <p className="text-lg font-semibold text-muted-foreground/50">No Completed Downloads</p>
-                                <p className="max-w-[50%] text-center text-xs text-muted-foreground/70">You have not completed any downloads yet. Complete downloading something to see here :)</p>
-                            </div>
-                        )}
-                    </div>
                 </TabsContent>
                 <TabsContent value="incomplete">
-                    <div className="w-full flex flex-col gap-2">
+                    <IncompleteDownloads downloads={incompleteDownloads} />
-                        {incompleteDownloads.length > 0 ? (
-                            incompleteDownloads.map((state) => {
-                                const itemActionStates = downloadActions[state.download_id] || {
-                                    isResuming: false,
-                                    isPausing: false,
-                                    isCanceling: false,
-                                    isDeleteFileChecked: false,
-                                };
-                                return (
-                                    <div className="p-4 border border-border rounded-lg flex gap-4" key={state.download_id}>
-                                        <div className="w-[30%] flex flex-col justify-between gap-2">
-                                            <AspectRatio ratio={16 / 9} className="w-full rounded-lg overflow-hidden border border-border">
-                                                <ProxyImage src={state.thumbnail || ""} alt="thumbnail" className="" />
-                                            </AspectRatio>
-                                            {state.ext && (
-                                                <span className="w-full flex items-center justify-center text-xs border border-border py-1 px-2 rounded">
-                                                    {state.filetype && (state.filetype === 'video' || state.filetype === 'video+audio') && (
-                                                        <Video className="w-4 h-4 mr-2" />
-                                                    )}
-                                                    {state.filetype && state.filetype === 'audio' && (
-                                                        <Music className="w-4 h-4 mr-2" />
-                                                    )}
-                                                    {(!state.filetype) || (state.filetype && state.filetype !== 'video' && state.filetype !== 'audio' && state.filetype !== 'video+audio') && (
-                                                        <File className="w-4 h-4 mr-2" />
-                                                    )}
-                                                    {state.ext.toUpperCase()} {state.resolution ? `(${state.resolution})` : null}
-                                                </span>
-                                            )}
-                                        </div>
-                                        <div className="w-full flex flex-col justify-between">
-                                            <div className="flex flex-col gap-1">
-                                                <h4>{state.title}</h4>
-                                                {((state.download_status === 'starting') || (state.download_status === 'downloading' && state.status === 'finished')) && (
-                                                    <IndeterminateProgress indeterminate={true} className="w-full" />
-                                                )}
-                                                {(state.download_status === 'downloading' || state.download_status === 'paused') && state.progress && state.status !== 'finished' && (
-                                                    <div className="w-full flex items-center gap-2">
-                                                        <span className="text-sm text-nowrap">{state.progress}%</span>
-                                                        <Progress value={state.progress} />
-                                                        <span className="text-sm text-nowrap">{
-                                                            state.downloaded && state.total
-                                                            ? `(${formatFileSize(state.downloaded)} / ${formatFileSize(state.total)})`
-                                                            : null
-                                                        }</span>
-                                                    </div>
-                                                )}
-                                                <div className="text-xs text-muted-foreground">{ state.download_status && (
-                                                    `${state.download_status === 'downloading' && state.status === 'finished' ? 'Processing' : state.download_status.charAt(0).toUpperCase() + state.download_status.slice(1)} ${debugMode && state.download_id ? `• ID: ${state.download_id.toUpperCase()}` : ""} ${state.download_status === 'downloading' && state.status !== 'finished' && state.speed ? `• Speed: ${formatSpeed(state.speed)}` : ""} ${state.download_status === 'downloading' && state.eta ? `• ETA: ${formatSecToTimeString(state.eta)}` : ""}`
-                                                )}</div>
-                                            </div>
-                                            <div className="w-full flex items-center gap-2 mt-2">
-                                                {state.download_status === 'paused' ? (
-                                                    <Button
-                                                    size="sm"
-                                                    className="w-fill"
-                                                    onClick={async () => {
-                                                        setIsResumingDownload(state.download_id, true);
-                                                        try {
-                                                            await resumeDownload(state)
-                                                            // toast.success("Resumed Download", {
-                                                            //     description: "Download resumed, it will re-start shortly.",
-                                                            // })
-                                                        } catch (e) {
-                                                            console.error(e);
-                                                            toast.error("Failed to Resume Download", {
-                                                                description: "An error occurred while trying to resume the download.",
-                                                            })
-                                                        } finally {
-                                                            setIsResumingDownload(state.download_id, false);
-                                                        }
-                                                    }}
-                                                    disabled={itemActionStates.isResuming || itemActionStates.isCanceling}
-                                                    >
-                                                        {itemActionStates.isResuming ? (
-                                                            <>
-                                                                <Loader2 className="h-4 w-4 animate-spin" />
-                                                                Resuming
-                                                            </>
-                                                        ) : (
-                                                            <>
-                                                                <Play className="w-4 h-4" />
-                                                                Resume
-                                                            </>
-                                                        )}
-                                                    </Button>
-                                                ) : (
-                                                    <Button
-                                                    size="sm"
-                                                    className="w-fill"
-                                                    onClick={async () => {
-                                                        setIsPausingDownload(state.download_id, true);
-                                                        try {
-                                                            await pauseDownload(state)
-                                                            // toast.success("Paused Download", {
-                                                            //     description: "Download paused successfully.",
-                                                            // })
-                                                        } catch (e) {
-                                                            console.error(e);
-                                                            toast.error("Failed to Pause Download", {
-                                                                description: "An error occurred while trying to pause the download."
-                                                            })
-                                                        } finally {
-                                                            setIsPausingDownload(state.download_id, false);
-                                                        }
-                                                    }}
-                                                    disabled={itemActionStates.isPausing || itemActionStates.isCanceling || state.download_status !== 'downloading' || (state.download_status === 'downloading' && state.status === 'finished')}
-                                                    >
-                                                        {itemActionStates.isPausing ? (
-                                                            <>
-                                                                <Loader2 className="h-4 w-4 animate-spin" />
-                                                                Pausing
-                                                            </>
-                                                        ) : (
-                                                            <>
-                                                                <Pause className="w-4 h-4" />
-                                                                Pause
-                                                            </>
-                                                        )}
-                                                    </Button>
-                                                )}
-                                                <Button
-                                                size="sm"
-                                                variant="destructive"
-                                                onClick={async () => {
-                                                    setIsCancelingDownload(state.download_id, true);
-                                                    try {
-                                                        await cancelDownload(state)
-                                                        toast.success("Canceled Download", {
-                                                            description: "Download canceled successfully.",
-                                                        })
-                                                    } catch (e) {
-                                                        console.error(e);
-                                                        toast.error("Failed to Cancel Download", {
-                                                            description: "An error occurred while trying to cancel the download.",
-                                                        })
-                                                    } finally {
-                                                        setIsCancelingDownload(state.download_id, false);
-                                                    }
-                                                }}
-                                                disabled={itemActionStates.isCanceling || itemActionStates.isResuming || itemActionStates.isPausing || state.download_status === 'starting' || (state.download_status === 'downloading' && state.status === 'finished')}
-                                                >
-                                                    {itemActionStates.isCanceling ? (
-                                                        <>
-                                                            <Loader2 className="h-4 w-4 animate-spin" />
-                                                            Canceling
-                                                        </>
-                                                    ) : (
-                                                        <>
-                                                            <X className="w-4 h-4" />
-                                                            Cancel
-                                                        </>
-                                                    )}
-                                                </Button>
-                                            </div>
-                                        </div>
-                                    </div>
-                                )
-                            })
-                        ) : (
-                            <div className="w-full flex flex-col items-center gap-2 justify-center mt-27">
-                                <h4 className="text-4xl font-bold text-muted-foreground/80 dark:text-muted">Nothing!</h4>
-                                <p className="text-lg font-semibold text-muted-foreground/50">No Incomplete Downloads</p>
-                                <p className="max-w-[50%] text-center text-xs text-muted-foreground/70">You have all caught up! Sit back and relax or just spin up a new download to see here :)</p>
-                            </div>
-                        )}
-                    </div>
                 </TabsContent>
             </Tabs>
         </div>

src/providers/appContextProvider.tsx

@@ -3,9 +3,30 @@ import { DownloadConfiguration } from '@/types/settings';
 import { RawVideoInfo } from '@/types/video';
 import { createContext, useContext } from 'react';
 
+export interface FetchVideoMetadataParams {
+    url: string;
+    formatId?: string;
+    playlistIndices?: string;
+    selectedSubtitles?: string | null;
+    resumeState?: DownloadState;
+    downloadConfig?: DownloadConfiguration;
+};
+
+export interface StartDownloadParams {
+    url: string;
+    selectedFormat: string;
+    downloadConfig: DownloadConfiguration;
+    selectedSubtitles?: string | null;
+    resumeState?: DownloadState;
+    playlistItems?: string;
+    overrideOptions?: {
+        [key: string]: any;
+    }
+};
+
 interface AppContextType {
-  fetchVideoMetadata: (url: string, formatId?: string, playlistIndex?: string, selectedSubtitles?: string | null, resumeState?: DownloadState, downloadConfig?: DownloadConfiguration) => Promise<RawVideoInfo | null>;
+    fetchVideoMetadata: (params: FetchVideoMetadataParams) => Promise<RawVideoInfo | null>;
-  startDownload: (url: string, selectedFormat: string, downloadConfig: DownloadConfiguration, selectedSubtitles?: string | null, resumeState?: DownloadState, playlistItems?: string) => Promise<void>;
+    startDownload: (params: StartDownloadParams) => Promise<void>;
     pauseDownload: (state: DownloadState) => Promise<void>;
     resumeDownload: (state: DownloadState) => Promise<void>;
     cancelDownload: (state: DownloadState) => Promise<void>;

src/providers/tanstackProvider.tsx

@@ -1,13 +1,41 @@
-import React from 'react'
+import React from 'react';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { TanStackDevtools } from '@tanstack/react-devtools';
-import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools';
+import { PacerDevtoolsPanel } from '@tanstack/react-pacer-devtools';
 
 const TanstackProvider = ({children}: {children: React.ReactNode}) => {
-  const queryClient = new QueryClient();
+    const queryClient = new QueryClient({
+        defaultOptions: {
+            queries: {
+                networkMode: 'always',
+            },
+            mutations: {
+                networkMode: 'always',
+            }
+        }
+    });
+
     return (
         <QueryClientProvider client={queryClient}>
             {children}
-      <ReactQueryDevtools initialIsOpen={false} />
+            <TanStackDevtools
+                eventBusConfig={{
+                    debug: false,
+                }}
+                plugins={[
+                    {
+                        name: 'TanStack Query',
+                        render: <ReactQueryDevtoolsPanel />,
+                        defaultOpen: true
+                    },
+                    {
+                        name: 'TanStack Pacer',
+                        render: <PacerDevtoolsPanel />,
+                        defaultOpen: false
+                    },
+                ]}
+            />
         </QueryClientProvider>
     )
 }

src/providers/themeProvider.tsx

@@ -1,20 +1,25 @@
 import { createContext, useContext, useEffect, useState } from "react"
 
-type Theme = "dark" | "light" | "system"
+export type Theme = "dark" | "light" | "system"
+export type ColorScheme = "default" | "blue" | "green" | "orange" | "red" | "rose" | "violet" | "yellow"
 
 type ThemeProviderProps = {
   children: React.ReactNode
   defaultTheme?: Theme
-  storageKey?: string
+  defaultColorScheme?: ColorScheme
+  themeStorageKey?: string
+  colorSchemeStorageKey?: string
 }
 
 type ThemeProviderState = {
   theme: Theme
-  setTheme: (theme: Theme) => void
+  colorScheme: ColorScheme
+  setTheme: (theme: Theme, colorScheme: ColorScheme) => void
 }
 
 const initialState: ThemeProviderState = {
   theme: "system",
+  colorScheme: "default",
   setTheme: () => null,
 }
 
@@ -23,36 +28,56 @@ const ThemeProviderContext = createContext<ThemeProviderState>(initialState)
 export function ThemeProvider({
   children,
   defaultTheme = "system",
-  storageKey = "vite-ui-theme",
+  defaultColorScheme = "default",
+  themeStorageKey = "vite-ui-theme",
+  colorSchemeStorageKey = "vite-ui-color-scheme",
   ...props
 }: ThemeProviderProps) {
   const [theme, setTheme] = useState<Theme>(
-    () => (localStorage.getItem(storageKey) as Theme) || defaultTheme
+    () => (localStorage.getItem(themeStorageKey) as Theme) || defaultTheme
+  )
+  const [colorScheme, setColorScheme] = useState<ColorScheme>(
+    () => (localStorage.getItem(colorSchemeStorageKey) as ColorScheme) || defaultColorScheme
   )
 
   useEffect(() => {
     const root = window.document.documentElement
 
-    root.classList.remove("light", "dark")
+    root.classList.remove("light", "dark", "blue", "blue-dark", "green", "green-dark", "orange", "orange-dark", "red", "red-dark", "rose", "rose-dark", "violet", "violet-dark", "yellow", "yellow-dark")
 
     if (theme === "system") {
       const systemTheme = window.matchMedia("(prefers-color-scheme: dark)")
         .matches
+        ? colorScheme === "default"
           ? "dark"
-        : "light"
+          : `${colorScheme}-dark`
+        : colorScheme === "default"
+          ? "light"
+          : colorScheme
 
       root.classList.add(systemTheme)
       return
     }
 
-    root.classList.add(theme)
+    if (theme === "dark") {
-  }, [theme])
+      root.classList.add(colorScheme === "default" ? "dark" : `${colorScheme}-dark`)
+      return
+    }
+
+    if (theme === "light") {
+      root.classList.add(colorScheme === "default" ? "light" : colorScheme)
+      return
+    }
+  }, [theme, colorScheme])
 
   const value = {
     theme,
-    setTheme: (theme: Theme) => {
+    colorScheme,
-      localStorage.setItem(storageKey, theme)
+    setTheme: (theme: Theme, colorScheme: ColorScheme) => {
+      localStorage.setItem(themeStorageKey, theme)
+      localStorage.setItem(colorSchemeStorageKey, colorScheme)
       setTheme(theme)
+      setColorScheme(colorScheme)
     },
   }
 

src/services/database.ts

@@ -1,77 +1,26 @@
-import { Download, DownloadState } from '@/types/download'
+import { DownloadState } from '@/types/download'
 import { KvStoreTable } from '@/types/kvStore'
 import { PlaylistInfo } from '@/types/playlist'
 import { SettingsTable } from '@/types/settings'
 import { VideoInfo } from '@/types/video'
 import Database from '@tauri-apps/plugin-sql'
 
-// ------  Database schema  ------
-// CREATE TABLE IF NOT EXISTS video_info (
-//     id INTEGER PRIMARY KEY NOT NULL,
-//     video_id TEXT UNIQUE NOT NULL,
-//     title TEXT NOT NULL,
-//     url TEXT NOT NULL,
-//     host TEXT NOT NULL,
-//     thumbnail TEXT,
-//     channel TEXT,
-//     duration_string TEXT,
-//     release_date TEXT,
-//     view_count INTEGER,
-//     like_count INTEGER
-// );
-// CREATE TABLE IF NOT EXISTS playlist_info (
-//     id INTEGER PRIMARY KEY NOT NULL,
-//     playlist_id TEXT UNIQUE NOT NULL,
-//     playlist_title TEXT NOT NULL,
-//     playlist_url TEXT NOT NULL,
-//     playlist_n_entries INTEGER NOT NULL,
-//     playlist_channel TEXT,
-// );
-// CREATE TABLE IF NOT EXISTS downloads (
-//     id INTEGER PRIMARY KEY NOT NULL,
-//     download_id TEXT UNIQUE NOT NULL,
-//     download_status TEXT NOT NULL,
-//     video_id TEXT NOT NULL,
-//     format_id TEXT NOT NULL,
-//     subtitle_id TEXT,
-//     queue_index INTEGER,
-//     playlist_id TEXT,
-//     playlist_index INTEGER,
-//     resolution TEXT,
-//     ext TEXT,
-//     abr REAL,
-//     vbr REAL,
-//     acodec TEXT,
-//     vcodec TEXT,
-//     dynamic_range TEXT,
-//     process_id INTEGER,
-//     status TEXT,
-//     progress REAL,
-//     total INTEGER,
-//     downloaded INTEGER,
-//     speed REAL,
-//     eta INTEGER,
-//     filepath TEXT,
-//     filetype TEXT,
-//     filesize INTEGER,
-//     FOREIGN KEY (video_id) REFERENCES video_info (video_id)
-//     FOREIGN KEY (playlist_id) REFERENCES playlist_info (playlist_id)
-// );
-// CREATE TABLE IF NOT EXISTS settings (
-//     id INTEGER PRIMARY KEY NOT NULL,
-//     key TEXT UNIQUE NOT NULL,
-//     value TEXT
-// );
-
 export const saveVideoInfo = async (videoInfo: VideoInfo) => {
     const db = await Database.load('sqlite:database.db')
-    const result = await db.select<VideoInfo[]>(
-        'SELECT * FROM video_info WHERE video_id = $1',
-        [videoInfo.video_id]
-    )
-    if (result.length > 0) {
     return await db.execute(
-            `UPDATE video_info SET
+        `INSERT INTO video_info (
+            video_id,
+            title,
+            url,
+            host,
+            thumbnail,
+            channel,
+            duration_string,
+            release_date,
+            view_count,
+            like_count
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)
+        ON CONFLICT(video_id) DO UPDATE SET
             title = $2,
             url = $3,
             host = $4,
@@ -80,34 +29,7 @@ export const saveVideoInfo = async (videoInfo: VideoInfo) => {
             duration_string = $7,
             release_date = $8,
             view_count = $9,
-                like_count = $10
+            like_count = $10`,
-            WHERE video_id = $1`,
-            [
-                videoInfo.video_id,
-                videoInfo.title,
-                videoInfo.url,
-                videoInfo.host,
-                videoInfo.thumbnail,
-                videoInfo.channel,
-                videoInfo.duration_string,
-                videoInfo.release_date,
-                videoInfo.view_count,
-                videoInfo.like_count
-            ]
-        )
-    }
-    return await db.execute(
-        `INSERT INTO video_info (
-            video_id,
-            title, url,
-            host,
-            thumbnail,
-            channel,
-            duration_string,
-            release_date,
-            view_count,
-            like_count
-        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10)`,
         [
             videoInfo.video_id,
             videoInfo.title,
@@ -125,27 +47,6 @@ export const saveVideoInfo = async (videoInfo: VideoInfo) => {
 
 export const savePlaylistInfo = async (playlistInfo: PlaylistInfo) => {
     const db = await Database.load('sqlite:database.db')
-    const result = await db.select<PlaylistInfo[]>(
-        'SELECT * FROM playlist_info WHERE playlist_id = $1',
-        [playlistInfo.playlist_id]
-    )
-    if (result.length > 0) {
-        return await db.execute(
-            `UPDATE playlist_info SET
-                playlist_title = $2,
-                playlist_url = $3,
-                playlist_n_entries = $4,
-                playlist_channel = $5
-            WHERE playlist_id = $1`,
-            [
-                playlistInfo.playlist_id,
-                playlistInfo.playlist_title,
-                playlistInfo.playlist_url,
-                playlistInfo.playlist_n_entries,
-                playlistInfo.playlist_channel
-            ]
-        )
-    }
     return await db.execute(
         `INSERT INTO playlist_info (
             playlist_id,
@@ -153,7 +54,12 @@ export const savePlaylistInfo = async (playlistInfo: PlaylistInfo) => {
             playlist_url,
             playlist_n_entries,
             playlist_channel
-        ) VALUES ($1, $2, $3, $4, $5)`,
+        ) VALUES ($1, $2, $3, $4, $5)
+        ON CONFLICT(playlist_id) DO UPDATE SET
+            playlist_title = $2,
+            playlist_url = $3,
+            playlist_n_entries = $4,
+            playlist_channel = $5`,
         [
             playlistInfo.playlist_id,
             playlistInfo.playlist_title,
@@ -166,83 +72,6 @@ export const savePlaylistInfo = async (playlistInfo: PlaylistInfo) => {
 
 export const saveDownloadState = async (downloadState: DownloadState) => {
     const db = await Database.load('sqlite:database.db')
-    const result = await db.select<Download[]>(
-        'SELECT * FROM downloads WHERE download_id = $1',
-        [downloadState.download_id]
-    )
-    if (result.length > 0) {
-        return await db.execute(
-            `UPDATE downloads SET
-                download_status = $2,
-                video_id = $3,
-                format_id = $4,
-                subtitle_id = $5,
-                queue_index = $6,
-                playlist_id = $7,
-                playlist_index = $8,
-                process_id = $9,
-                resolution = $10,
-                ext = $11,
-                abr = $12,
-                vbr = $13,
-                acodec = $14,
-                vcodec = $15,
-                dynamic_range = $16,
-                status = $17,
-                progress = $18,
-                total = $19,
-                downloaded = $20,
-                speed = $21,
-                eta = $22,
-                filepath = $23,
-                filetype = $24,
-                filesize = $25,
-                output_format = $26,
-                embed_metadata = $27,
-                embed_thumbnail = $28,
-                sponsorblock_remove = $29,
-                sponsorblock_mark = $30,
-                use_aria2 = $31,
-                custom_command = $32,
-                queue_config = $33
-            WHERE download_id = $1`,
-            [
-                downloadState.download_id,
-                downloadState.download_status,
-                downloadState.video_id,
-                downloadState.format_id,
-                downloadState.subtitle_id,
-                downloadState.queue_index,
-                downloadState.playlist_id,
-                downloadState.playlist_index,
-                downloadState.process_id,
-                downloadState.resolution,
-                downloadState.ext,
-                downloadState.abr,
-                downloadState.vbr,
-                downloadState.acodec,
-                downloadState.vcodec,
-                downloadState.dynamic_range,
-                downloadState.status,
-                downloadState.progress,
-                downloadState.total,
-                downloadState.downloaded,
-                downloadState.speed,
-                downloadState.eta,
-                downloadState.filepath,
-                downloadState.filetype,
-                downloadState.filesize,
-                downloadState.output_format,
-                downloadState.embed_metadata,
-                downloadState.embed_thumbnail,
-                downloadState.sponsorblock_remove,
-                downloadState.sponsorblock_mark,
-                downloadState.use_aria2,
-                downloadState.custom_command,
-                downloadState.queue_config
-            ]
-        )
-    }
     return await db.execute(
         `INSERT INTO downloads (
             download_id,
@@ -251,7 +80,7 @@ export const saveDownloadState = async (downloadState: DownloadState) => {
             subtitle_id,
             queue_index,
             playlist_id,
-            playlist_index,
+            playlist_indices,
             process_id,
             resolution,
             ext,
@@ -261,6 +90,7 @@ export const saveDownloadState = async (downloadState: DownloadState) => {
             vcodec,
             dynamic_range,
             status,
+            item,
             progress,
             total,
             downloaded,
@@ -272,12 +102,48 @@ export const saveDownloadState = async (downloadState: DownloadState) => {
             output_format,
             embed_metadata,
             embed_thumbnail,
+            square_crop_thumbnail,
             sponsorblock_remove,
             sponsorblock_mark,
             use_aria2,
             custom_command,
             queue_config
-        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21, $22, $23, $24, $25, $26, $27, $28, $29, $30, $31, $32, $33)`,
+        ) VALUES ($1, $2, $3, $4, $5, $6, $7, $8, $9, $10, $11, $12, $13, $14, $15, $16, $17, $18, $19, $20, $21, $22, $23, $24, $25, $26, $27, $28, $29, $30, $31, $32, $33, $34, $35)
+        ON CONFLICT(download_id) DO UPDATE SET
+            download_status = $2,
+            video_id = $3,
+            format_id = $4,
+            subtitle_id = $5,
+            queue_index = $6,
+            playlist_id = $7,
+            playlist_indices = $8,
+            process_id = $9,
+            resolution = $10,
+            ext = $11,
+            abr = $12,
+            vbr = $13,
+            acodec = $14,
+            vcodec = $15,
+            dynamic_range = $16,
+            status = $17,
+            item = $18,
+            progress = $19,
+            total = $20,
+            downloaded = $21,
+            speed = $22,
+            eta = $23,
+            filepath = $24,
+            filetype = $25,
+            filesize = $26,
+            output_format = $27,
+            embed_metadata = $28,
+            embed_thumbnail = $29,
+            square_crop_thumbnail = $30,
+            sponsorblock_remove = $31,
+            sponsorblock_mark = $32,
+            use_aria2 = $33,
+            custom_command = $34,
+            queue_config = $35`,
         [
             downloadState.download_id,
             downloadState.download_status,
@@ -286,7 +152,7 @@ export const saveDownloadState = async (downloadState: DownloadState) => {
             downloadState.subtitle_id,
             downloadState.queue_index,
             downloadState.playlist_id,
-            downloadState.playlist_index,
+            downloadState.playlist_indices,
             downloadState.process_id,
             downloadState.resolution,
             downloadState.ext,
@@ -296,6 +162,7 @@ export const saveDownloadState = async (downloadState: DownloadState) => {
             downloadState.vcodec,
             downloadState.dynamic_range,
             downloadState.status,
+            downloadState.item,
             downloadState.progress,
             downloadState.total,
             downloadState.downloaded,
@@ -307,6 +174,7 @@ export const saveDownloadState = async (downloadState: DownloadState) => {
             downloadState.output_format,
             downloadState.embed_metadata,
             downloadState.embed_thumbnail,
+            downloadState.square_crop_thumbnail,
             downloadState.sponsorblock_remove,
             downloadState.sponsorblock_mark,
             downloadState.use_aria2,
@@ -332,6 +200,14 @@ export const updateDownloadFilePath = async (download_id: string, filepath: stri
     )
 }
 
+export const updateDownloadPlaylistItem = async (download_id: string, item: string) => {
+    const db = await Database.load('sqlite:database.db')
+    return await db.execute(
+        'UPDATE downloads SET item = $2 WHERE download_id = $1',
+        [download_id, item]
+    )
+}
+
 export const deleteDownloadState = async (download_id: string) => {
     const db = await Database.load('sqlite:database.db')
     return await db.execute(
@@ -368,6 +244,36 @@ export const fetchAllDownloadStates = async () => {
     )
 }
 
+export const fetchDownloadStateById = async (download_id: string) => {
+    const db = await Database.load('sqlite:database.db')
+    const result = await db.select<DownloadState[]>(
+        `SELECT
+            downloads.*,
+            video_info.title,
+            video_info.url,
+            video_info.host,
+            video_info.thumbnail,
+            video_info.channel,
+            video_info.duration_string,
+            video_info.release_date,
+            video_info.view_count,
+            video_info.like_count,
+            playlist_info.playlist_title,
+            playlist_info.playlist_url,
+            playlist_info.playlist_n_entries,
+            playlist_info.playlist_channel
+        FROM downloads
+        INNER JOIN video_info
+            ON downloads.video_id = video_info.video_id
+        LEFT JOIN playlist_info
+            ON downloads.playlist_id = playlist_info.playlist_id
+            AND downloads.playlist_id IS NOT NULL
+        WHERE downloads.download_id = $1`,
+        [download_id]
+    )
+    return result.length > 0 ? result[0] : null
+}
+
 export const fetchAllSettings = async () => {
     const db = await Database.load('sqlite:database.db')
     const result = await db.select<SettingsTable[]>(
@@ -388,19 +294,14 @@ export const fetchAllSettings = async () => {
 
 export const saveSettingsKey = async (key: string, value: unknown) => {
     const db = await Database.load('sqlite:database.db')
-    const result = await db.select<SettingsTable[]>(
-        'SELECT * FROM settings WHERE key = $1',
-        [key]
-    )
     const jsonValue = JSON.stringify(value)
-    if (result.length > 0) {
     return await db.execute(
-            `UPDATE settings SET value = json_object('value', json($2)) WHERE key = $1`,
+        `INSERT INTO settings (
-            [key, jsonValue]
+            key,
-        )
+            value
-    }
+        ) VALUES ($1, json_object('value', json($2)))
-    return await db.execute(
+        ON CONFLICT(key) DO UPDATE SET
-        `INSERT INTO settings (key, value) VALUES ($1, json_object('value', json($2)))`,
+            value = json_object('value', json($2))`,
         [key, jsonValue]
     )
 }
@@ -432,19 +333,14 @@ export const fetchAllKvPairs = async () => {
 
 export const saveKvPair = async (key: string, value: unknown) => {
     const db = await Database.load('sqlite:database.db')
-    const result = await db.select<KvStoreTable[]>(
-        'SELECT * FROM kv_store WHERE key = $1',
-        [key]
-    )
     const jsonValue = JSON.stringify(value)
-    if (result.length > 0) {
     return await db.execute(
-            `UPDATE kv_store SET value = json_object('value', json($2)) WHERE key = $1`,
+        `INSERT INTO kv_store (
-            [key, jsonValue]
+            key,
-        )
+            value
-    }
+        ) VALUES ($1, json_object('value', json($2)))
-    return await db.execute(
+        ON CONFLICT(key) DO UPDATE SET
-        `INSERT INTO kv_store (key, value) VALUES ($1, json_object('value', json($2)))`,
+            value = json_object('value', json($2))`,
         [key, jsonValue]
     )
 }

src/services/mutations.ts

@@ -1,6 +1,6 @@
 import { VideoInfo } from "@/types/video";
 import { useMutation } from "@tanstack/react-query";
-import { deleteDownloadState, deleteKvPair, resetSettings, saveDownloadState, saveKvPair, savePlaylistInfo, saveSettingsKey, saveVideoInfo, updateDownloadFilePath, updateDownloadStatus } from "@/services/database";
+import { deleteDownloadState, deleteKvPair, resetSettings, saveDownloadState, saveKvPair, savePlaylistInfo, saveSettingsKey, saveVideoInfo, updateDownloadFilePath, updateDownloadPlaylistItem, updateDownloadStatus } from "@/services/database";
 import { DownloadState } from "@/types/download";
 import { PlaylistInfo } from "@/types/playlist";
 
@@ -36,6 +36,13 @@ export function useUpdateDownloadFilePath() {
     })
 }
 
+export function useUpdateDownloadPlaylistItem() {
+    return useMutation({
+        mutationFn: (data: { download_id: string; item: string }) =>
+        updateDownloadPlaylistItem(data.download_id, data.item)
+    })
+}
+
 export function useDeleteDownloadState() {
     return useMutation({
         mutationFn: (data: string) => deleteDownloadState(data)

src/services/store.ts

@@ -51,27 +51,29 @@ export const useDownloaderPageStatesStore = create<DownloaderPageStatesStore>((s
     isStartingDownload: false,
     selectedDownloadFormat: 'best',
     selectedCombinableVideoFormat: '',
-    selectedCombinableAudioFormat: '',
+    selectedCombinableAudioFormats: [],
     selectedSubtitles: [],
-    selectedPlaylistVideoIndex: '1',
+    selectedPlaylistVideos: ["1"],
     downloadConfiguration: {
         output_format: null,
         embed_metadata: null,
         embed_thumbnail: null,
+        square_crop_thumbnail: null,
         sponsorblock: null,
         custom_command: null
     },
-    isErrored: false,
+    erroredDownloadIds: new Set(),
-    isErrorExpected: false,
+    expectedErrorDownloadIds: new Set(),
-    erroredDownloadId: null,
+    videoPanelSizes: [35, 65],
+    playlistPanelSizes: [45, 55],
     setActiveDownloadModeTab: (tab) => set(() => ({ activeDownloadModeTab: tab })),
     setActiveDownloadConfigurationTab: (tab) => set(() => ({ activeDownloadConfigurationTab: tab })),
     setIsStartingDownload: (isStarting) => set(() => ({ isStartingDownload: isStarting })),
     setSelectedDownloadFormat: (format) => set(() => ({ selectedDownloadFormat: format })),
     setSelectedCombinableVideoFormat: (format) => set(() => ({ selectedCombinableVideoFormat: format })),
-    setSelectedCombinableAudioFormat: (format) => set(() => ({ selectedCombinableAudioFormat: format })),
+    setSelectedCombinableAudioFormats: (formats) => set(() => ({ selectedCombinableAudioFormats: formats })),
     setSelectedSubtitles: (subtitles) => set(() => ({ selectedSubtitles: subtitles })),
-    setSelectedPlaylistVideoIndex: (index) => set(() => ({ selectedPlaylistVideoIndex: index })),
+    setSelectedPlaylistVideos: (indices) => set(() => ({ selectedPlaylistVideos: indices })),
     setDownloadConfigurationKey: (key, value) => set((state) => ({
         downloadConfiguration: {
             ...state.downloadConfiguration,
@@ -84,18 +86,37 @@ export const useDownloaderPageStatesStore = create<DownloaderPageStatesStore>((s
             output_format: null,
             embed_metadata: null,
             embed_thumbnail: null,
+            square_crop_thumbnail: null,
             sponsorblock: null,
             custom_command: null
         }
     })),
-    setIsErrored: (isErrored) => set(() => ({ isErrored: isErrored })),
+    addErroredDownload: (downloadId) => set((state) => ({
-    setIsErrorExpected: (isErrorExpected) => set(() => ({ isErrorExpected: isErrorExpected })),
+        erroredDownloadIds: new Set(state.erroredDownloadIds).add(downloadId)
-    setErroredDownloadId: (downloadId) => set(() => ({ erroredDownloadId: downloadId })),
+    })),
+    removeErroredDownload: (downloadId) => set((state) => {
+        const newSet = new Set(state.erroredDownloadIds);
+        newSet.delete(downloadId);
+        return { erroredDownloadIds: newSet };
+    }),
+    addExpectedErrorDownload: (downloadId) => set((state) => ({
+        expectedErrorDownloadIds: new Set(state.expectedErrorDownloadIds).add(downloadId)
+    })),
+    removeExpectedErrorDownload: (downloadId) => set((state) => {
+        const newSet = new Set(state.expectedErrorDownloadIds);
+        newSet.delete(downloadId);
+        return { expectedErrorDownloadIds: newSet };
+    }),
+    clearErrorStates: () => set({ erroredDownloadIds: new Set(), expectedErrorDownloadIds: new Set() }),
+    setVideoPanelSizes: (sizes) => set(() => ({ videoPanelSizes: sizes })),
+    setPlaylistPanelSizes: (sizes) => set(() => ({ playlistPanelSizes: sizes }))
 }));
 
 export const useLibraryPageStatesStore = create<LibraryPageStatesStore>((set) => ({
     activeTab: 'completed',
-    setActiveTab: (tab) => set(() => ({ activeTab: tab }))
+    activeCompletedDownloadsPage: 1,
+    setActiveTab: (tab) => set(() => ({ activeTab: tab })),
+    setActiveCompletedDownloadsPage: (page) => set(() => ({ activeCompletedDownloadsPage: page }))
 }));
 
 export const useDownloadActionStatesStore = create<DownloadActionStatesStore>((set) => ({
@@ -151,6 +172,7 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
         ytdlp_update_channel: 'nightly',
         ytdlp_auto_update: true,
         theme: 'system',
+        color_scheme: 'default',
         download_dir: '',
         prefer_video_over_playlist: true,
         strict_downloadablity_check: false,
@@ -164,9 +186,9 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
         audio_format: 'auto',
         always_reencode_video: false,
         embed_video_metadata: false,
-        embed_audio_metadata: true,
+        embed_audio_metadata: false,
         embed_video_thumbnail: false,
-        embed_audio_thumbnail: true,
+        embed_audio_thumbnail: false,
         use_cookies: false,
         import_cookies_from: 'browser',
         cookies_browser: 'firefox',
@@ -182,10 +204,9 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
         force_internet_protocol: 'ipv4',
         use_custom_commands: false,
         custom_commands: [],
-        filename_template: '%(title)s_%(resolution|unknown)s',
+        filename_template: '%(title|Unknown)s_%(resolution|unknown)s',
         debug_mode: false,
         log_verbose: true,
-        log_warning: true,
         log_progress: false,
         enable_notifications: false,
         update_notification: true,
@@ -200,6 +221,8 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
     appUpdate: null,
     isUpdatingApp: false,
     appUpdateDownloadProgress: 0,
+    formResetTrigger: 0,
+    resetAcknowledgements: 0,
     setActiveTab: (tab) => set(() => ({ activeTab: tab })),
     setActiveSubAppTab: (tab) => set(() => ({ activeSubAppTab: tab })),
     setActiveSubExtTab: (tab) => set(() => ({ activeSubExtTab: tab })),
@@ -220,6 +243,7 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
             ytdlp_update_channel: 'nightly',
             ytdlp_auto_update: true,
             theme: 'system',
+            color_scheme: 'default',
             download_dir: '',
             prefer_video_over_playlist: true,
             strict_downloadablity_check: false,
@@ -233,9 +257,9 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
             audio_format: 'auto',
             always_reencode_video: false,
             embed_video_metadata: false,
-            embed_audio_metadata: true,
+            embed_audio_metadata: false,
             embed_video_thumbnail: false,
-            embed_audio_thumbnail: true,
+            embed_audio_thumbnail: false,
             use_cookies: false,
             import_cookies_from: 'browser',
             cookies_browser: 'firefox',
@@ -251,10 +275,9 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
             force_internet_protocol: 'ipv4',
             use_custom_commands: false,
             custom_commands: [],
-            filename_template: '%(title)s_%(resolution|unknown)s',
+            filename_template: '%(title|Unknown)s_%(resolution|unknown)s',
             debug_mode: false,
             log_verbose: true,
-            log_warning: true,
             log_progress: false,
             enable_notifications: false,
             update_notification: true,
@@ -270,7 +293,14 @@ export const useSettingsPageStatesStore = create<SettingsPageStatesStore>((set)
     setIsCheckingAppUpdate: (isChecking) => set(() => ({ isCheckingAppUpdate: isChecking })),
     setAppUpdate: (update) => set(() => ({ appUpdate: update })),
     setIsUpdatingApp: (isUpdating) => set(() => ({ isUpdatingApp: isUpdating })),
-    setAppUpdateDownloadProgress: (progress) => set(() => ({ appUpdateDownloadProgress: progress }))
+    setAppUpdateDownloadProgress: (progress) => set(() => ({ appUpdateDownloadProgress: progress })),
+    triggerFormReset: () => set((state) => ({
+        formResetTrigger: state.formResetTrigger + 1,
+        resetAcknowledgements: 0
+    })),
+    acknowledgeFormReset: () => set((state) => ({
+        resetAcknowledgements: state.resetAcknowledgements + 1
+    })),
 }));
 
 export const useKvPairsStatesStore = create<KvPairsStatesStore>((set) => ({

src/types/download.ts

@@ -6,7 +6,7 @@ export interface DownloadState {
     subtitle_id: string | null;
     queue_index: number | null;
     playlist_id: string | null;
-    playlist_index: number | null;
+    playlist_indices: string | null;
     title: string;
     url: string;
     host: string;
@@ -29,6 +29,7 @@ export interface DownloadState {
     dynamic_range: string | null;
     process_id: number | null;
     status: string | null;
+    item: string | null;
     progress: number | null;
     total: number | null;
     downloaded: number | null;
@@ -40,6 +41,7 @@ export interface DownloadState {
     output_format: string | null;
     embed_metadata: number;
     embed_thumbnail: number;
+    square_crop_thumbnail: number;
     sponsorblock_remove: string | null;
     sponsorblock_mark: string | null;
     use_aria2: number;
@@ -57,7 +59,7 @@ export interface Download {
     subtitle_id: string | null;
     queue_index: number | null;
     playlist_id: string | null;
-    playlist_index: number | null;
+    playlist_indices: string | null;
     resolution: string | null;
     ext: string | null;
     abr: number | null;
@@ -67,6 +69,7 @@ export interface Download {
     dynamic_range: string | null;
     process_id: number | null;
     status: string | null;
+    item: string | null;
     progress: number | null;
     total: number | null;
     downloaded: number | null;
@@ -78,6 +81,7 @@ export interface Download {
     output_format: string | null;
     embed_metadata: number;
     embed_thumbnail: number;
+    square_crop_thumbnail: number;
     sponsorblock_remove: string | null;
     sponsorblock_mark: string | null;
     use_aria2: number;
@@ -89,9 +93,28 @@ export interface Download {
 
 export interface DownloadProgress {
     status: string | null;
+    item: string | null;
     progress: number | null;
     speed: number | null;
     downloaded: number | null;
     total: number | null;
     eta: number | null;
 }
+
+export interface Paginated<T = any> {
+    current_page: number;
+    from: number;
+    first_page: number;
+    last_page: number;
+    pages: Array<{
+        label: string;
+        page: number;
+        active: boolean;
+    }>;
+    next_page: number | null;
+    per_page: number;
+    prev_page: number | null;
+    to: number;
+    total: number;
+    data: T[];
+}

src/types/settings.ts

@@ -1,3 +1,5 @@
+import { ColorScheme, Theme } from "@/providers/themeProvider";
+
 export interface SettingsTable {
     key: string;
     value: string;
@@ -12,7 +14,8 @@ export interface CustomCommand {
 export interface Settings {
     ytdlp_update_channel: string;
     ytdlp_auto_update: boolean;
-    theme: 'dark' | 'light' | 'system';
+    theme: Theme;
+    color_scheme: ColorScheme;
     download_dir: string;
     max_parallel_downloads: number;
     max_retries: number;
@@ -47,7 +50,6 @@ export interface Settings {
     filename_template: string;
     debug_mode: boolean;
     log_verbose: boolean;
-    log_warning: boolean;
     log_progress: boolean;
     enable_notifications: boolean;
     update_notification: boolean;
@@ -60,6 +62,7 @@ export interface DownloadConfiguration {
     output_format: string | null;
     embed_metadata: boolean | null;
     embed_thumbnail: boolean | null;
+    square_crop_thumbnail: boolean | null;
     sponsorblock: string | null;
     custom_command: string | null;
 }

src/types/store.ts

@@ -41,32 +41,39 @@ export interface DownloaderPageStatesStore {
     isStartingDownload: boolean;
     selectedDownloadFormat: string;
     selectedCombinableVideoFormat: string;
-    selectedCombinableAudioFormat: string;
+    selectedCombinableAudioFormats: string[];
     selectedSubtitles: string[];
-    selectedPlaylistVideoIndex: string;
+    selectedPlaylistVideos: string[];
     downloadConfiguration: DownloadConfiguration;
-    isErrored: boolean;
+    erroredDownloadIds: Set<string>;
-    isErrorExpected: boolean;
+    expectedErrorDownloadIds: Set<string>;
-    erroredDownloadId: string | null;
+    videoPanelSizes: number[];
+    playlistPanelSizes: number[];
     setActiveDownloadModeTab: (tab: string) => void;
     setActiveDownloadConfigurationTab: (tab: string) => void;
     setIsStartingDownload: (isStarting: boolean) => void;
     setSelectedDownloadFormat: (format: string) => void;
     setSelectedCombinableVideoFormat: (format: string) => void;
-    setSelectedCombinableAudioFormat: (format: string) => void;
+    setSelectedCombinableAudioFormats: (formats: string[]) => void;
     setSelectedSubtitles: (subtitles: string[]) => void;
-    setSelectedPlaylistVideoIndex: (index: string) => void;
+    setSelectedPlaylistVideos: (indices: string[]) => void;
     setDownloadConfigurationKey: (key: string, value: unknown) => void;
     setDownloadConfiguration: (config: DownloadConfiguration) => void;
     resetDownloadConfiguration: () => void;
-    setIsErrored: (isErrored: boolean) => void;
+    addErroredDownload: (downloadId: string) => void;
-    setIsErrorExpected: (isErrorExpected: boolean) => void;
+    removeErroredDownload: (downloadId: string) => void;
-    setErroredDownloadId: (downloadId: string | null) => void;
+    addExpectedErrorDownload: (downloadId: string) => void;
+    removeExpectedErrorDownload: (downloadId: string) => void;
+    clearErrorStates: () => void;
+    setVideoPanelSizes: (sizes: number[]) => void;
+    setPlaylistPanelSizes: (sizes: number[]) => void;
 }
 
 export interface LibraryPageStatesStore {
     activeTab: string;
+    activeCompletedDownloadsPage: number;
     setActiveTab: (tab: string) => void;
+    setActiveCompletedDownloadsPage: (page: number) => void;
 }
 
 export interface DownloadActionStatesStore {
@@ -101,6 +108,8 @@ export interface SettingsPageStatesStore {
     appUpdate: Update | null;
     isUpdatingApp: boolean;
     appUpdateDownloadProgress: number;
+    formResetTrigger: number;
+    resetAcknowledgements: number;
     setActiveTab: (tab: string) => void;
     setActiveSubAppTab: (tab: string) => void;
     setActiveSubExtTab: (tab: string) => void;
@@ -119,6 +128,8 @@ export interface SettingsPageStatesStore {
     setAppUpdate: (update: Update | null) => void;
     setIsUpdatingApp: (isUpdating: boolean) => void;
     setAppUpdateDownloadProgress: (progress: number) => void;
+    triggerFormReset: () => void;
+    acknowledgeFormReset: () => void;
 }
 
 export interface KvPairsStatesStore {