├── brandbook
    ├── og.png
    └── logo.png
├── public
    ├── logo.png
    ├── github.svg
    └── discord.svg
├── src
    ├── app
    │   ├── favicon.ico
    │   ├── robots.txt
    │   ├── opengraph-image.png
    │   ├── sitemap.ts
    │   ├── manifest.webmanifest
    │   ├── layout.tsx
    │   ├── globals.css
    │   └── page.tsx
    ├── lib
    │   └── utils.ts
    └── components
    │   ├── ui
    │       ├── label.tsx
    │       ├── grid.tsx
    │       ├── separator.tsx
    │       ├── textarea.tsx
    │       ├── input.tsx
    │       ├── sonner.tsx
    │       ├── switch.tsx
    │       ├── avatar.tsx
    │       ├── popover.tsx
    │       ├── scroll-area.tsx
    │       ├── tooltip.tsx
    │       ├── tabs.tsx
    │       ├── card.tsx
    │       └── button.tsx
    │   ├── embed-preview.tsx
    │   ├── color-picker.tsx
    │   └── webhook-history.tsx
├── postcss.config.mjs
├── next.config.ts
├── .github
    ├── workflows
    │   ├── autofix.yml
    │   ├── eslint.yml
    │   ├── moderator.yml
    │   └── nextjs.yml
    ├── dependabot.yml
    └── ISSUE_TEMPLATE
    │   ├── feature_request.md
    │   └── bug_report.md
├── .gitignore
├── components.json
├── eslint.config.mjs
├── tsconfig.json
├── README.md
├── package.json
├── LICENSE
└── CODE_OF_CONDUCT.md


/brandbook/og.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Uncover-it/webhook-multitool/HEAD/brandbook/og.png


--------------------------------------------------------------------------------
/public/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Uncover-it/webhook-multitool/HEAD/public/logo.png


--------------------------------------------------------------------------------
/brandbook/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Uncover-it/webhook-multitool/HEAD/brandbook/logo.png


--------------------------------------------------------------------------------
/src/app/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Uncover-it/webhook-multitool/HEAD/src/app/favicon.ico


--------------------------------------------------------------------------------
/src/app/robots.txt:
--------------------------------------------------------------------------------
1 | User-Agent: *
2 | Allow: /
3 | 
4 | Sitemap: https://webhook.uncoverit.org/sitemap.xml
5 | 


--------------------------------------------------------------------------------
/src/app/opengraph-image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Uncover-it/webhook-multitool/HEAD/src/app/opengraph-image.png


--------------------------------------------------------------------------------
/postcss.config.mjs:
--------------------------------------------------------------------------------
1 | const config = {
2 |   plugins: {
3 |     "@tailwindcss/postcss": {},
4 |   },
5 | };
6 | 
7 | export default config;
8 | 


--------------------------------------------------------------------------------
/next.config.ts:
--------------------------------------------------------------------------------
1 | import type { NextConfig } from "next";
2 | 
3 | const nextConfig: NextConfig = {
4 |   output: "export"
5 | };
6 | 
7 | export default nextConfig;
8 | 


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
1 | import { clsx, type ClassValue } from "clsx"
2 | import { twMerge } from "tailwind-merge"
3 | 
4 | export function cn(...inputs: ClassValue[]) {
5 |   return twMerge(clsx(inputs))
6 | }
7 | 


--------------------------------------------------------------------------------
/src/app/sitemap.ts:
--------------------------------------------------------------------------------
 1 | import type { MetadataRoute } from "next";
 2 | export const dynamic = "force-static"
 3 | 
 4 | export default function sitemap(): MetadataRoute.Sitemap {
 5 |   return [
 6 |     {
 7 |       url: "https://webhook.uncoverit.org",
 8 |       lastModified: new Date(),
 9 |       changeFrequency: "monthly",
10 |       priority: 1,
11 |     },
12 |   ];
13 | }
14 | 


--------------------------------------------------------------------------------
/.github/workflows/autofix.yml:
--------------------------------------------------------------------------------
 1 | name: autofix.ci  # needed to securely identify the workflow
 2 | 
 3 | on:
 4 |   pull_request:
 5 |   push:
 6 |     branches: [ "main" ]
 7 | permissions:
 8 |   contents: read
 9 | 
10 | jobs:
11 |   autofix:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - uses: actions/checkout@v4
15 | 
16 |       # TODO: add all code-fixing here.
17 | 
18 |       - uses: autofix-ci/action@v1
19 | 


--------------------------------------------------------------------------------
/src/app/manifest.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Webhook Multi-Tool",
 3 |   "short_name": "Webhook Tool",
 4 |   "description": "Download the Webhook Multi-Tool app to manage Discord webhooks easily.",
 5 |   "start_url": "/",
 6 |   "display": "standalone",
 7 |   "background_color": "#0a0a0a",
 8 |   "theme_color": "#0a0a0a",
 9 |   "icons": [
10 |     {
11 |       "src": "/logo.png",
12 |       "sizes": "any",
13 |       "type": "image/png"
14 |     }
15 |   ]
16 | }
17 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | package-lock.json
 6 | 
 7 | # next.js
 8 | /.next/
 9 | /out/
10 | 
11 | # production
12 | /build
13 | 
14 | # debug
15 | npm-debug.log*
16 | yarn-debug.log*
17 | yarn-error.log*
18 | .pnpm-debug.log*
19 | 
20 | # env files
21 | .env*
22 | 
23 | # vercel
24 | .vercel
25 | 
26 | # typescript
27 | *.tsbuildinfo
28 | next-env.d.ts
29 | certificates


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": true,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "",
 8 |     "css": "src/app/globals.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   },
20 |   "iconLibrary": "lucide"
21 | }


--------------------------------------------------------------------------------
/eslint.config.mjs:
--------------------------------------------------------------------------------
 1 | import { defineConfig, globalIgnores } from "eslint/config";
 2 | import nextVitals from "eslint-config-next/core-web-vitals";
 3 | import nextTs from "eslint-config-next/typescript";
 4 | 
 5 | const eslintConfig = defineConfig([
 6 |   ...nextVitals,
 7 |   ...nextTs,
 8 |   // Override default ignores of eslint-config-next.
 9 |   globalIgnores([
10 |     // Default ignores of eslint-config-next:
11 |     ".next/**",
12 |     "out/**",
13 |     "build/**",
14 |     "next-env.d.ts",
15 |   ]),
16 | ]);
17 | 
18 | export default eslintConfig;
19 | 


--------------------------------------------------------------------------------
/.github/workflows/eslint.yml:
--------------------------------------------------------------------------------
 1 | name: ESLint Check on PR's
 2 | 
 3 | on:
 4 |   pull_request:
 5 |   push:
 6 |     branches: ["main"]
 7 | permissions:
 8 |   contents: read
 9 | 
10 | jobs:
11 |   lint:
12 |     runs-on: ubuntu-latest
13 |     steps:
14 |       - name: Checkout
15 |         uses: actions/checkout@v4
16 | 
17 |       - name: Install Bun
18 |         uses: oven-sh/setup-bun@v2
19 |         with:
20 |           bun-version: latest
21 | 
22 |       - name: Install dependencies
23 |         run: bun install
24 | 
25 |       - name: Run ESLint
26 |         run: bun lint
27 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
 1 | # To get started with Dependabot version updates, you'll need to specify which
 2 | # package ecosystems to update and where the package manifests are located.
 3 | # Please see the documentation for all configuration options:
 4 | # https://docs.github.com/code-security/dependabot/dependabot-version-updates/configuration-options-for-the-dependabot.yml-file
 5 | 
 6 | version: 2
 7 | updates:
 8 |   - package-ecosystem: "bun" # See documentation for possible values
 9 |     directory: "/" # Location of package manifests
10 |     schedule:
11 |       interval: "daily"
12 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Feature request
 3 | about: Suggest an idea for this project
 4 | title: ""
 5 | labels: ""
 6 | assignees: ""
 7 | ---
 8 | 
 9 | **Is your feature request related to a problem? Please describe.**
10 | A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
11 | 
12 | **Describe the solution you'd like**
13 | A clear and concise description of what you want to happen.
14 | 
15 | **Describe alternatives you've considered**
16 | A clear and concise description of any alternative solutions or features you've considered.
17 | 
18 | **Additional context**
19 | Add any other context or screenshots about the feature request here.
20 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Label as LabelPrimitive } from "radix-ui"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Label({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof LabelPrimitive.Root>) {
12 |   return (
13 |     <LabelPrimitive.Root
14 |       data-slot="label"
15 |       className={cn(
16 |         "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",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | export { Label }
25 | 


--------------------------------------------------------------------------------
/src/components/ui/grid.tsx:
--------------------------------------------------------------------------------
 1 | // Modified from: https://ui.aceternity.com/components/grid-and-dot-backgrounds
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | import React from "react";
 5 | 
 6 | export function Grid() {
 7 |   return (
 8 |     <div className="relative flex h-full min-h-screen w-full items-center justify-center bg-[#fafafa] dark:bg-[#000000]">
 9 |       <div
10 |         className={cn(
11 |           "absolute inset-0",
12 |           "[background-size:40px_40px]",
13 |           "[background-image:linear-gradient(to_right,#ebebeb_1px,transparent_1px),linear-gradient(to_bottom,#ebebeb_1px,transparent_1px)]",
14 |           "dark:[background-image:linear-gradient(to_right,#111111_1px,transparent_1px),linear-gradient(to_bottom,#111111_1px,transparent_1px)]"
15 |         )}
16 |       />
17 |     </div>
18 |   );
19 | }
20 | 


--------------------------------------------------------------------------------
/src/components/ui/separator.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Separator as SeparatorPrimitive } from "radix-ui"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Separator({
 9 |   className,
10 |   orientation = "horizontal",
11 |   decorative = true,
12 |   ...props
13 | }: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
14 |   return (
15 |     <SeparatorPrimitive.Root
16 |       data-slot="separator"
17 |       decorative={decorative}
18 |       orientation={orientation}
19 |       className={cn(
20 |         "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
21 |         className
22 |       )}
23 |       {...props}
24 |     />
25 |   )
26 | }
27 | 
28 | export { Separator }
29 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
 6 |   return (
 7 |     <textarea
 8 |       data-slot="textarea"
 9 |       className={cn(
10 |         "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",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | export { Textarea }
19 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2017",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "noEmit": true,
 9 |     "esModuleInterop": true,
10 |     "module": "esnext",
11 |     "moduleResolution": "bundler",
12 |     "resolveJsonModule": true,
13 |     "isolatedModules": true,
14 |     "jsx": "react-jsx",
15 |     "incremental": true,
16 |     "plugins": [
17 |       {
18 |         "name": "next"
19 |       }
20 |     ],
21 |     "paths": {
22 |       "@/*": ["./src/*"]
23 |     }
24 |   },
25 |   "include": [
26 |     "next-env.d.ts",
27 |     "**/*.ts",
28 |     "**/*.tsx",
29 |     ".next/types/**/*.ts",
30 |     ".next\\dev/types/**/*.ts",
31 |     ".next\\dev/types/**/*.ts",
32 |     ".next/dev/types/**/*.ts"
33 |   ],
34 |   "exclude": ["node_modules"]
35 | }
36 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org) project bootstrapped with [`create-next-app`](https://nextjs.org/docs/app/api-reference/cli/create-next-app).
 2 | 
 3 | # Self-hosting
 4 | First, clone the repository:
 5 | 
 6 | ```bash
 7 | git clone https://github.com/WarFiN123/webhook-multitool && cd webhook-multitool
 8 | ```
 9 | 
10 | Then, install all dependencies:
11 | 
12 | ```bash
13 | bun install
14 | ```
15 | 
16 | ## Running the development server (if you are editing the source code and want to see the changes real-time)
17 | 
18 | ```bash
19 | bun run dev
20 | ```
21 | 
22 | ## Production Build (if you want to publish the site)
23 | 
24 | Building:
25 | ```bash
26 | bun run build
27 | ```
28 | 
29 | Running:
30 | ```bash
31 | bun run start
32 | ```
33 | 
34 | ## Similar Projects
35 | 
36 | - [koalahook](https://github.com/infamouskoala/koalahook) by [infamouskoala](https://github.com/infamouskoala)
37 | 


--------------------------------------------------------------------------------
/public/github.svg:
--------------------------------------------------------------------------------
1 | <svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/.github/workflows/moderator.yml:
--------------------------------------------------------------------------------
 1 | name: AI Moderator
 2 | on:
 3 |   issues:
 4 |     types: [opened]
 5 |   issue_comment:
 6 |     types: [created]
 7 |   pull_request_review_comment:
 8 |     types: [created]
 9 | 
10 | jobs:
11 |   spam-detection:
12 |     runs-on: ubuntu-latest
13 |     permissions:
14 |       issues: write
15 |       pull-requests: write
16 |       models: read
17 |       contents: read
18 |     steps:
19 |       - uses: actions/checkout@v4
20 |       - uses: github/ai-moderator@v1
21 |         with:
22 |           token: ${{ secrets.GITHUB_TOKEN }}
23 |           spam-label: 'spam'
24 |           ai-label: 'ai-generated'
25 |           minimize-detected-comments: true
26 |           # Built-in prompt configuration (all enabled by default)
27 |           enable-spam-detection: true
28 |           enable-link-spam-detection: true
29 |           enable-ai-detection: true
30 |           # custom-prompt-path: '.github/prompts/my-custom.prompt.yml'  # Optional
31 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: ""
 5 | labels: ""
 6 | assignees: ""
 7 | ---
 8 | 
 9 | **Describe the bug**
10 | A clear and concise description of what the bug is.
11 | 
12 | **To Reproduce**
13 | Steps to reproduce the behavior:
14 | 
15 | 1. Go to '...'
16 | 2. Click on '....'
17 | 3. Scroll down to '....'
18 | 4. See error
19 | 
20 | **Expected behavior**
21 | A clear and concise description of what you expected to happen.
22 | 
23 | **Screenshots**
24 | If applicable, add screenshots to help explain your problem.
25 | 
26 | **Desktop (please complete the following information):**
27 | 
28 | - OS: [e.g. iOS]
29 | - Browser [e.g. chrome, safari]
30 | - Version [e.g. 22]
31 | 
32 | **Smartphone (please complete the following information):**
33 | 
34 | - Device: [e.g. iPhone6]
35 | - OS: [e.g. iOS8.1]
36 | - Browser [e.g. stock browser, safari]
37 | - Version [e.g. 22]
38 | 
39 | **Additional context**
40 | Add any other context about the problem here.
41 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Input({ className, type, ...props }: React.ComponentProps<"input">) {
 6 |   return (
 7 |     <input
 8 |       type={type}
 9 |       data-slot="input"
10 |       className={cn(
11 |         "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input 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",
12 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
13 |         "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
14 |         className
15 |       )}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | export { Input }
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "webhook-multitool",
 3 |   "version": "1.1.4",
 4 |   "license": "MIT",
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "eslint ."
10 |   },
11 |   "dependencies": {
12 |     "@next/third-parties": "16.1.0",
13 |     "class-variance-authority": "^0.7.1",
14 |     "clsx": "^2.1.1",
15 |     "lucide-react": "^0.561.0",
16 |     "next": "16.1.0",
17 |     "next-themes": "^0.4.6",
18 |     "radix-ui": "^1.4.3",
19 |     "react": "19.2.3",
20 |     "react-dom": "19.2.3",
21 |     "sonner": "^2.0.7",
22 |     "tailwind-merge": "^3.4.0"
23 |   },
24 |   "devDependencies": {
25 |     "@tailwindcss/postcss": "^4.1.18",
26 |     "@types/node": "^25.0.3",
27 |     "@types/react": "19.2.7",
28 |     "@types/react-dom": "19.2.3",
29 |     "eslint": "^9.39.2",
30 |     "eslint-config-next": "16.0.10",
31 |     "tailwindcss": "^4.1.18",
32 |     "tw-animate-css": "^1.4.0",
33 |     "typescript": "^5.9.3"
34 |   },
35 |   "trustedDependencies": [
36 |     "@tailwindcss/oxide",
37 |     "oxc-resolver",
38 |     "unrs-resolver"
39 |   ]
40 | }
41 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 WarFiN123
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/public/discord.svg:
--------------------------------------------------------------------------------
1 | <?xml version="1.0" encoding="UTF-8"?><svg id="Discord-Logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 126.644 96"><defs><style>.cls-1{fill:#fff;}</style></defs><path id="Discord-Symbol-White" class="cls-1" d="M81.15,0c-1.2376,2.1973-2.3489,4.4704-3.3591,6.794-9.5975-1.4396-19.3718-1.4396-28.9945,0-.985-2.3236-2.1216-4.5967-3.3591-6.794-9.0166,1.5407-17.8059,4.2431-26.1405,8.0568C2.779,32.5304-1.6914,56.3725.5312,79.8863c9.6732,7.1476,20.5083,12.603,32.0505,16.0884,2.6014-3.4854,4.8998-7.1981,6.8698-11.0623-3.738-1.3891-7.3497-3.1318-10.8098-5.1523.9092-.6567,1.7932-1.3386,2.6519-1.9953,20.281,9.547,43.7696,9.547,64.0758,0,.8587.7072,1.7427,1.3891,2.6519,1.9953-3.4601,2.0457-7.0718,3.7632-10.835,5.1776,1.97,3.8642,4.2683,7.5769,6.8698,11.0623,11.5419-3.4854,22.3769-8.9156,32.0509-16.0631,2.626-27.2771-4.496-50.9172-18.817-71.8548C98.9811,4.2684,90.1918,1.5659,81.1752.0505l-.0252-.0505ZM42.2802,65.4144c-6.2383,0-11.4159-5.6575-11.4159-12.6535s4.9755-12.6788,11.3907-12.6788,11.5169,5.708,11.4159,12.6788c-.101,6.9708-5.026,12.6535-11.3907,12.6535ZM84.3576,65.4144c-6.2637,0-11.3907-5.6575-11.3907-12.6535s4.9755-12.6788,11.3907-12.6788,11.4917,5.708,11.3906,12.6788c-.101,6.9708-5.026,12.6535-11.3906,12.6535Z"/></svg>


--------------------------------------------------------------------------------
/src/components/ui/sonner.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import {
 4 |   CircleCheckIcon,
 5 |   InfoIcon,
 6 |   Loader2Icon,
 7 |   OctagonXIcon,
 8 |   TriangleAlertIcon,
 9 | } from "lucide-react"
10 | import { useTheme } from "next-themes"
11 | import { Toaster as Sonner, type ToasterProps } from "sonner"
12 | 
13 | const Toaster = ({ ...props }: ToasterProps) => {
14 |   const { theme = "system" } = useTheme()
15 | 
16 |   return (
17 |     <Sonner
18 |       theme={theme as ToasterProps["theme"]}
19 |       className="toaster group"
20 |       icons={{
21 |         success: <CircleCheckIcon className="size-4" />,
22 |         info: <InfoIcon className="size-4" />,
23 |         warning: <TriangleAlertIcon className="size-4" />,
24 |         error: <OctagonXIcon className="size-4" />,
25 |         loading: <Loader2Icon className="size-4 animate-spin" />,
26 |       }}
27 |       style={
28 |         {
29 |           "--normal-bg": "var(--popover)",
30 |           "--normal-text": "var(--popover-foreground)",
31 |           "--normal-border": "var(--border)",
32 |           "--border-radius": "var(--radius)",
33 |         } as React.CSSProperties
34 |       }
35 |       {...props}
36 |     />
37 |   )
38 | }
39 | 
40 | export { Toaster }
41 | 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Switch as SwitchPrimitive } from "radix-ui"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Switch({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof SwitchPrimitive.Root>) {
12 |   return (
13 |     <SwitchPrimitive.Root
14 |       data-slot="switch"
15 |       className={cn(
16 |         "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",
17 |         className
18 |       )}
19 |       {...props}
20 |     >
21 |       <SwitchPrimitive.Thumb
22 |         data-slot="switch-thumb"
23 |         className={cn(
24 |           "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"
25 |         )}
26 |       />
27 |     </SwitchPrimitive.Root>
28 |   )
29 | }
30 | 
31 | export { Switch }
32 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Avatar as AvatarPrimitive } from "radix-ui"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Avatar({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof AvatarPrimitive.Root>) {
12 |   return (
13 |     <AvatarPrimitive.Root
14 |       data-slot="avatar"
15 |       className={cn(
16 |         "relative flex size-8 shrink-0 overflow-hidden rounded-full",
17 |         className
18 |       )}
19 |       {...props}
20 |     />
21 |   )
22 | }
23 | 
24 | function AvatarImage({
25 |   className,
26 |   ...props
27 | }: React.ComponentProps<typeof AvatarPrimitive.Image>) {
28 |   return (
29 |     <AvatarPrimitive.Image
30 |       data-slot="avatar-image"
31 |       className={cn("aspect-square size-full", className)}
32 |       {...props}
33 |     />
34 |   )
35 | }
36 | 
37 | function AvatarFallback({
38 |   className,
39 |   ...props
40 | }: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {
41 |   return (
42 |     <AvatarPrimitive.Fallback
43 |       data-slot="avatar-fallback"
44 |       className={cn(
45 |         "bg-muted flex size-full items-center justify-center rounded-full",
46 |         className
47 |       )}
48 |       {...props}
49 |     />
50 |   )
51 | }
52 | 
53 | export { Avatar, AvatarImage, AvatarFallback }
54 | 


--------------------------------------------------------------------------------
/src/components/ui/popover.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Popover as PopoverPrimitive } from "radix-ui"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function Popover({
 9 |   ...props
10 | }: React.ComponentProps<typeof PopoverPrimitive.Root>) {
11 |   return <PopoverPrimitive.Root data-slot="popover" {...props} />
12 | }
13 | 
14 | function PopoverTrigger({
15 |   ...props
16 | }: React.ComponentProps<typeof PopoverPrimitive.Trigger>) {
17 |   return <PopoverPrimitive.Trigger data-slot="popover-trigger" {...props} />
18 | }
19 | 
20 | function PopoverContent({
21 |   className,
22 |   align = "center",
23 |   sideOffset = 4,
24 |   ...props
25 | }: React.ComponentProps<typeof PopoverPrimitive.Content>) {
26 |   return (
27 |     <PopoverPrimitive.Portal>
28 |       <PopoverPrimitive.Content
29 |         data-slot="popover-content"
30 |         align={align}
31 |         sideOffset={sideOffset}
32 |         className={cn(
33 |           "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",
34 |           className
35 |         )}
36 |         {...props}
37 |       />
38 |     </PopoverPrimitive.Portal>
39 |   )
40 | }
41 | 
42 | function PopoverAnchor({
43 |   ...props
44 | }: React.ComponentProps<typeof PopoverPrimitive.Anchor>) {
45 |   return <PopoverPrimitive.Anchor data-slot="popover-anchor" {...props} />
46 | }
47 | 
48 | export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor }
49 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { ScrollArea as ScrollAreaPrimitive } from "radix-ui"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function ScrollArea({
 9 |   className,
10 |   children,
11 |   ...props
12 | }: React.ComponentProps<typeof ScrollAreaPrimitive.Root>) {
13 |   return (
14 |     <ScrollAreaPrimitive.Root
15 |       data-slot="scroll-area"
16 |       className={cn("relative", className)}
17 |       {...props}
18 |     >
19 |       <ScrollAreaPrimitive.Viewport
20 |         data-slot="scroll-area-viewport"
21 |         className="focus-visible:ring-ring/50 size-full rounded-[inherit] transition-[color,box-shadow] outline-none focus-visible:ring-[3px] focus-visible:outline-1"
22 |       >
23 |         {children}
24 |       </ScrollAreaPrimitive.Viewport>
25 |       <ScrollBar />
26 |       <ScrollAreaPrimitive.Corner />
27 |     </ScrollAreaPrimitive.Root>
28 |   )
29 | }
30 | 
31 | function ScrollBar({
32 |   className,
33 |   orientation = "vertical",
34 |   ...props
35 | }: React.ComponentProps<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>) {
36 |   return (
37 |     <ScrollAreaPrimitive.ScrollAreaScrollbar
38 |       data-slot="scroll-area-scrollbar"
39 |       orientation={orientation}
40 |       className={cn(
41 |         "flex touch-none p-px transition-colors select-none",
42 |         orientation === "vertical" &&
43 |           "h-full w-2.5 border-l border-l-transparent",
44 |         orientation === "horizontal" &&
45 |           "h-2.5 flex-col border-t border-t-transparent",
46 |         className
47 |       )}
48 |       {...props}
49 |     >
50 |       <ScrollAreaPrimitive.ScrollAreaThumb
51 |         data-slot="scroll-area-thumb"
52 |         className="bg-border relative flex-1 rounded-full"
53 |       />
54 |     </ScrollAreaPrimitive.ScrollAreaScrollbar>
55 |   )
56 | }
57 | 
58 | export { ScrollArea, ScrollBar }
59 | 


--------------------------------------------------------------------------------
/src/components/ui/tooltip.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import { Tooltip as TooltipPrimitive } from "radix-ui"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | function TooltipProvider({
 9 |   delayDuration = 0,
10 |   ...props
11 | }: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
12 |   return (
13 |     <TooltipPrimitive.Provider
14 |       data-slot="tooltip-provider"
15 |       delayDuration={delayDuration}
16 |       {...props}
17 |     />
18 |   )
19 | }
20 | 
21 | function Tooltip({
22 |   ...props
23 | }: React.ComponentProps<typeof TooltipPrimitive.Root>) {
24 |   return (
25 |     <TooltipProvider>
26 |       <TooltipPrimitive.Root data-slot="tooltip" {...props} />
27 |     </TooltipProvider>
28 |   )
29 | }
30 | 
31 | function TooltipTrigger({
32 |   ...props
33 | }: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
34 |   return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />
35 | }
36 | 
37 | function TooltipContent({
38 |   className,
39 |   sideOffset = 0,
40 |   children,
41 |   ...props
42 | }: React.ComponentProps<typeof TooltipPrimitive.Content>) {
43 |   return (
44 |     <TooltipPrimitive.Portal>
45 |       <TooltipPrimitive.Content
46 |         data-slot="tooltip-content"
47 |         sideOffset={sideOffset}
48 |         className={cn(
49 |           "bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
50 |           className
51 |         )}
52 |         {...props}
53 |       >
54 |         {children}
55 |         <TooltipPrimitive.Arrow className="bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" />
56 |       </TooltipPrimitive.Content>
57 |     </TooltipPrimitive.Portal>
58 |   )
59 | }
60 | 
61 | export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider }
62 | 


--------------------------------------------------------------------------------
/src/components/ui/tabs.tsx:
--------------------------------------------------------------------------------
 1 | "use client";
 2 | 
 3 | import * as React from "react";
 4 | import { Tabs as TabsPrimitive } from "radix-ui";;
 5 | 
 6 | import { cn } from "@/lib/utils";
 7 | 
 8 | function Tabs({
 9 |   className,
10 |   ...props
11 | }: React.ComponentProps<typeof TabsPrimitive.Root>) {
12 |   return (
13 |     <TabsPrimitive.Root
14 |       data-slot="tabs"
15 |       className={cn("flex flex-col gap-2", className)}
16 |       {...props}
17 |     />
18 |   );
19 | }
20 | 
21 | function TabsList({
22 |   className,
23 |   ...props
24 | }: React.ComponentProps<typeof TabsPrimitive.List>) {
25 |   return (
26 |     <TabsPrimitive.List
27 |       data-slot="tabs-list"
28 |       className={cn(
29 |         "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
30 |         className,
31 |       )}
32 |       {...props}
33 |     />
34 |   );
35 | }
36 | 
37 | function TabsTrigger({
38 |   className,
39 |   ...props
40 | }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {
41 |   return (
42 |     <TabsPrimitive.Trigger
43 |       data-slot="tabs-trigger"
44 |       className={cn(
45 |         "dark:text-white text-black dark:data-[state=active]:bg-black data-[state=active]:bg-white dark:data-[state=active]:border-black" ,
46 |         "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring 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",
47 |         className,
48 |       )}
49 |       {...props}
50 |     />
51 |   );
52 | }
53 | 
54 | function TabsContent({
55 |   className,
56 |   ...props
57 | }: React.ComponentProps<typeof TabsPrimitive.Content>) {
58 |   return (
59 |     <TabsPrimitive.Content
60 |       data-slot="tabs-content"
61 |       className={cn("flex-1 outline-none", className)}
62 |       {...props}
63 |     />
64 |   );
65 | }
66 | 
67 | export { Tabs, TabsList, TabsTrigger, TabsContent };
68 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | function Card({ className, ...props }: React.ComponentProps<"div">) {
 6 |   return (
 7 |     <div
 8 |       data-slot="card"
 9 |       className={cn(
10 |         "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
11 |         className
12 |       )}
13 |       {...props}
14 |     />
15 |   )
16 | }
17 | 
18 | function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
19 |   return (
20 |     <div
21 |       data-slot="card-header"
22 |       className={cn(
23 |         "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
24 |         className
25 |       )}
26 |       {...props}
27 |     />
28 |   )
29 | }
30 | 
31 | function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
32 |   return (
33 |     <div
34 |       data-slot="card-title"
35 |       className={cn("leading-none font-semibold", className)}
36 |       {...props}
37 |     />
38 |   )
39 | }
40 | 
41 | function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
42 |   return (
43 |     <div
44 |       data-slot="card-description"
45 |       className={cn("text-muted-foreground text-sm", className)}
46 |       {...props}
47 |     />
48 |   )
49 | }
50 | 
51 | function CardAction({ className, ...props }: React.ComponentProps<"div">) {
52 |   return (
53 |     <div
54 |       data-slot="card-action"
55 |       className={cn(
56 |         "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
57 |         className
58 |       )}
59 |       {...props}
60 |     />
61 |   )
62 | }
63 | 
64 | function CardContent({ className, ...props }: React.ComponentProps<"div">) {
65 |   return (
66 |     <div
67 |       data-slot="card-content"
68 |       className={cn("px-6", className)}
69 |       {...props}
70 |     />
71 |   )
72 | }
73 | 
74 | function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
75 |   return (
76 |     <div
77 |       data-slot="card-footer"
78 |       className={cn("flex items-center px-6 [.border-t]:pt-6", className)}
79 |       {...props}
80 |     />
81 |   )
82 | }
83 | 
84 | export {
85 |   Card,
86 |   CardHeader,
87 |   CardFooter,
88 |   CardTitle,
89 |   CardAction,
90 |   CardDescription,
91 |   CardContent,
92 | }
93 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot as SlotPrimitive } from "radix-ui"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "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",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default: "bg-primary text-primary-foreground hover:bg-primary/90",
13 |         destructive:
14 |           "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
15 |         outline:
16 |           "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
17 |         secondary:
18 |           "bg-secondary text-secondary-foreground hover:bg-secondary/80",
19 |         ghost:
20 |           "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2 has-[>svg]:px-3",
25 |         sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
26 |         lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
27 |         icon: "size-9",
28 |         "icon-sm": "size-8",
29 |         "icon-lg": "size-10",
30 |       },
31 |     },
32 |     defaultVariants: {
33 |       variant: "default",
34 |       size: "default",
35 |     },
36 |   }
37 | )
38 | 
39 | function Button({
40 |   className,
41 |   variant,
42 |   size,
43 |   asChild = false,
44 |   ...props
45 | }: React.ComponentProps<"button"> &
46 |   VariantProps<typeof buttonVariants> & {
47 |     asChild?: boolean
48 |   }) {
49 |   const Comp = asChild ? SlotPrimitive.Slot : "button"
50 | 
51 |   return (
52 |     <Comp
53 |       data-slot="button"
54 |       className={cn(buttonVariants({ variant, size, className }))}
55 |       {...props}
56 |     />
57 |   )
58 | }
59 | 
60 | export { Button, buttonVariants }
61 | 


--------------------------------------------------------------------------------
/.github/workflows/nextjs.yml:
--------------------------------------------------------------------------------
 1 | # Sample workflow for building and deploying a Next.js site to GitHub Pages
 2 | #
 3 | # To get started with Next.js see: https://nextjs.org/docs/getting-started
 4 | #
 5 | name: Deploy Next.js site to Pages
 6 | 
 7 | on:
 8 |   # Runs on pushes targeting the default branch
 9 |   push:
10 |     branches: ["main"]
11 | 
12 |   # Allows you to run this workflow manually from the Actions tab
13 |   workflow_dispatch:
14 | 
15 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
16 | permissions:
17 |   contents: read
18 |   pages: write
19 |   id-token: write
20 | 
21 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued.
22 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete.
23 | concurrency:
24 |   group: "pages"
25 |   cancel-in-progress: false
26 | 
27 | jobs:
28 |   # Build job
29 |   build:
30 |     runs-on: ubuntu-latest
31 |     steps:
32 |       - name: Checkout
33 |         uses: actions/checkout@v4
34 |       - uses: oven-sh/setup-bun@v2
35 |         name: Install bun
36 |         with:
37 |           bun-version: latest
38 |       - name: Setup Pages
39 |         uses: actions/configure-pages@v5
40 |         with:
41 |           # Automatically inject basePath in your Next.js configuration file and disable
42 |           # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
43 |           #
44 |           # You may remove this line if you want to manage the configuration yourself.
45 |           static_site_generator: next
46 |       - name: Restore cache
47 |         uses: actions/cache@v4
48 |         with:
49 |           path: |
50 |             .next/cache
51 |           # Generate a new cache whenever packages or source files change.
52 |           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
53 |           # If source files changed but packages didn't, rebuild from a prior cache.
54 |           restore-keys: |
55 |             ${{ runner.os }}-nextjs-${{ hashFiles('**/bun.lock') }}-
56 |       - name: Install dependencies
57 |         run: bun install
58 |       - name: Build with Next.js
59 |         run: bun run build
60 |       - name: Upload artifact
61 |         uses: actions/upload-pages-artifact@v4
62 |         with:
63 |           path: ./out
64 | 
65 |   # Deployment job
66 |   deploy:
67 |     environment:
68 |       name: github-pages
69 |       url: ${{ steps.deployment.outputs.page_url }}
70 |     runs-on: ubuntu-latest
71 |     needs: build
72 |     steps:
73 |       - name: Deploy to GitHub Pages
74 |         id: deployment
75 |         uses: actions/deploy-pages@v4
76 | 


--------------------------------------------------------------------------------
/src/components/embed-preview.tsx:
--------------------------------------------------------------------------------
 1 | import Image from "next/image";
 2 | 
 3 | interface EmbedPreviewProps {
 4 |   title?: string;
 5 |   description?: string;
 6 |   color?: string;
 7 |   author?: string;
 8 |   authorIcon?: string;
 9 |   footer?: string;
10 |   footerIcon?: string;
11 |   thumbnail?: string;
12 |   image?: string;
13 | }
14 | 
15 | export function EmbedPreview({
16 |   title,
17 |   description,
18 |   color = "#5865F2",
19 |   author,
20 |   authorIcon,
21 |   footer,
22 |   footerIcon,
23 |   thumbnail,
24 |   image,
25 | }: EmbedPreviewProps) {
26 |   return (
27 |     <div
28 |       className="rounded-md overflow-hidden max-w-[520px]"
29 |       style={{ borderLeft: `4px solid ${color}` }}
30 |     >
31 |       <div className="bg-[#2f3136] p-3 rounded-tr-md rounded-br-md">
32 |         {author && (
33 |           <div className="flex items-center gap-2 mb-2">
34 |             {authorIcon && (
35 |               <Image src={authorIcon} alt="" className="rounded-full" height={6} width={6}/>
36 |             )}
37 |             <span className="text-sm font-medium">{author}</span>
38 |           </div>
39 |         )}
40 | 
41 |         <div className="flex">
42 |           <div className="flex-1" style={{ wordBreak: "break-word" }}>
43 |             {title && <div className="font-semibold mb-1">{title}</div>}
44 |             {description && (
45 |               <div
46 |                 className="text-sm text-gray-300 whitespace-pre-wrap"
47 |               >
48 |                 {description}
49 |               </div>
50 |             )}
51 | 
52 |             {image && (
53 |               <div className="mt-3">
54 |                 <Image
55 |                   src={image}
56 |                   alt=""
57 |                   className="max-w-full rounded-md max-h-[300px] object-contain"
58 |                 />
59 |               </div>
60 |             )}
61 | 
62 |             {footer && (
63 |               <div className="flex items-center gap-2 mt-3 text-xs text-gray-400">
64 |                 {footerIcon && (
65 |                   <Image
66 |                     src={footerIcon}
67 |                     alt=""
68 |                     className="rounded-full"
69 |                     width={5}
70 |                     height={5}
71 |                   />
72 |                 )}
73 |                 <span>{footer}</span>
74 |               </div>
75 |             )}
76 |           </div>
77 | 
78 |           {thumbnail && (
79 |             <div className="ml-4">
80 |               <Image
81 |                 src={thumbnail}
82 |                 alt=""
83 |                 className="object-cover rounded-md"
84 |                 height={20}
85 |                 width={20}
86 |               />
87 |             </div>
88 |           )}
89 |         </div>
90 |       </div>
91 |     </div>
92 |   );
93 | }
94 | 


--------------------------------------------------------------------------------
/src/app/layout.tsx:
--------------------------------------------------------------------------------
  1 | import type { Metadata } from "next";
  2 | import { ThemeProvider } from "next-themes";
  3 | import { Toaster } from "@/components/ui/sonner";
  4 | import { GoogleAnalytics } from "@next/third-parties/google";
  5 | import "./globals.css";
  6 | import { Grid } from "@/components/ui/grid";
  7 | import Script from "next/script";
  8 | 
  9 | export const metadata: Metadata = {
 10 |   metadataBase: new URL("https://webhook.uncoverit.org"),
 11 |   alternates: { canonical: "/" },
 12 |   title: {
 13 |     default: "Discord Webhook Multi-Tool",
 14 |     template: "Discord Webhook Multi-Tool",
 15 |   },
 16 |   description:
 17 |     "Take control of Discord webhooks online. Text-to-speech, spam messages, view webhook details, and delete unwanted webhooks easily with our multitool.",
 18 |   keywords: [
 19 |     "discord",
 20 |     "webhook",
 21 |     "multitool",
 22 |     "delete",
 23 |     "send",
 24 |     "spam",
 25 |     "info",
 26 |     "webhook spam",
 27 |     "webhook deleter",
 28 |     "discord webhooks",
 29 |     "discord webhook spammer",
 30 |     "discord webhook deleter",
 31 |     "discord multitool",
 32 |     "uncover it webhook",
 33 |     "uncover it webhook spammer",
 34 |     "uncover it spammer",
 35 |     "webhook uncover it",
 36 |     "webhook uncoverit",
 37 |     "uncoverit webhook",
 38 |     "uncoverit",
 39 |     "uncover it",
 40 |     "disco with me",
 41 |     "disco w me",
 42 |     "discord spam",
 43 |     "uncover it webhook spammer",
 44 |     "discord webhook",
 45 |     "online",
 46 |     "customize",
 47 |     "webhook spammer",
 48 |     "webhook spammer online",
 49 |     "disco with me discord",
 50 |     "disco with me webhook",
 51 |     "disco with me uncover it",
 52 |     "webhook tools",
 53 |     "online webhook tool",
 54 |     "webhook",
 55 |   ],
 56 |   openGraph: {
 57 |     title: "Discord Webhook Multi-Tool",
 58 |     description:
 59 |       "Take control of Discord webhooks online. Text-to-speech, spam messages, view webhook details, and delete unwanted webhooks easily with our multitool.",
 60 |     url: "https://webhook.uncoverit.org",
 61 |     siteName: "Discord Webhook Multi-Tool",
 62 |     locale: "en_US",
 63 |     type: "website",
 64 |   },
 65 |   robots: {
 66 |     index: true,
 67 |     follow: true,
 68 |     googleBot: {
 69 |       index: true,
 70 |       follow: true,
 71 |       "max-video-preview": -1,
 72 |       "max-image-preview": "large" as const,
 73 |       "max-snippet": -1,
 74 |     },
 75 |   },
 76 |   twitter: {
 77 |     title: "Discord Webhook Multi-Tool",
 78 |     card: "summary_large_image",
 79 |     description:
 80 |       "Take control of Discord webhooks online. Text-to-speech, spam messages, view webhook details, and delete unwanted webhooks easily with our multitool.",
 81 |   },
 82 | };
 83 | 
 84 | export default function RootLayout({
 85 |   children,
 86 | }: {
 87 |   children: React.ReactNode;
 88 | }) {
 89 |   return (
 90 |     <html lang="en" suppressHydrationWarning>
 91 |       <body className="font-sans">
 92 |         <ThemeProvider attribute="class" disableTransitionOnChange enableSystem>
 93 |           <div
 94 |             style={{ position: "fixed", inset: 0, zIndex: -1 }}
 95 |             aria-hidden="true"
 96 |           >
 97 |             <Grid />
 98 |           </div>
 99 |           {children}
100 |           <Toaster position="top-right" />
101 |         </ThemeProvider>
102 |       </body>
103 |       <GoogleAnalytics gaId="G-T1PPWT7NT4" />
104 |       <Script src="https://api.instatus.com/widget?host=status.uncoverit.org&code=4f0eef87&locale=en" />
105 |     </html>
106 |   );
107 | }
108 | 


--------------------------------------------------------------------------------
/src/app/globals.css:
--------------------------------------------------------------------------------
  1 | @import "tailwindcss";
  2 | @import "tw-animate-css";
  3 | 
  4 | @custom-variant dark (&:is(.dark *));
  5 | 
  6 | @theme inline {
  7 |   --color-background: var(--background);
  8 |   --color-foreground: var(--foreground);
  9 | 
 10 |   --color-card: var(--card);
 11 |   --color-card-foreground: var(--card-foreground);
 12 | 
 13 |   --color-popover: var(--popover);
 14 |   --color-popover-foreground: var(--popover-foreground);
 15 | 
 16 |   --color-primary: var(--primary);
 17 |   --color-primary-foreground: var(--primary-foreground);
 18 | 
 19 |   --color-secondary: var(--secondary);
 20 |   --color-secondary-foreground: var(--secondary-foreground);
 21 | 
 22 |   --color-muted: var(--muted);
 23 |   --color-muted-foreground: var(--muted-foreground);
 24 | 
 25 |   --color-accent: var(--accent);
 26 |   --color-accent-foreground: var(--accent-foreground);
 27 | 
 28 |   --color-destructive: var(--destructive);
 29 |   --color-destructive-foreground: var(--destructive-foreground);
 30 | 
 31 |   --color-border: var(--border);
 32 |   --color-input: var(--input);
 33 |   --color-ring: var(--ring);
 34 | 
 35 |   --color-chart-1: var(--chart-1);
 36 |   --color-chart-2: var(--chart-2);
 37 |   --color-chart-3: var(--chart-3);
 38 |   --color-chart-4: var(--chart-4);
 39 |   --color-chart-5: var(--chart-5);
 40 | 
 41 |   --radius-lg: var(--radius);
 42 |   --radius-md: calc(var(--radius) - 2px);
 43 |   --radius-sm: calc(var(--radius) - 4px);
 44 |   --color-sidebar-ring: var(--sidebar-ring);
 45 |   --color-sidebar-border: var(--sidebar-border);
 46 |   --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
 47 |   --color-sidebar-accent: var(--sidebar-accent);
 48 |   --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
 49 |   --color-sidebar-primary: var(--sidebar-primary);
 50 |   --color-sidebar-foreground: var(--sidebar-foreground);
 51 |   --color-sidebar: var(--sidebar);
 52 | }
 53 | 
 54 | :root {
 55 |   --background: hsl(0, 0%, 98%);
 56 |   --foreground: hsl(0 0% 3.9%);
 57 |   --card: hsl(0, 0%, 98%);
 58 |   --card-foreground: hsl(0 0% 3.9%);
 59 |   --popover: hsl(0, 0%, 98%);
 60 |   --popover-foreground: hsl(0 0% 3.9%);
 61 |   --primary: hsl(0 0% 9%);
 62 |   --primary-foreground: hsl(0 0% 98%);
 63 |   --secondary: hsl(0, 0%, 94%);
 64 |   --secondary-foreground: hsl(0 0% 9%);
 65 |   --muted: hsl(0, 0%, 94%);
 66 |   --muted-foreground: hsl(0 0% 45.1%);
 67 |   --accent: hsl(0, 0%, 94%);
 68 |   --accent-foreground: hsl(0 0% 9%);
 69 |   --destructive: hsl(0, 100%, 47%);
 70 |   --destructive-foreground: hsl(0 0% 98%);
 71 |   --border: hsl(0 0% 89.8%);
 72 |   --input: hsl(0 0% 89.8%);
 73 |   --ring: hsl(0 0% 3.9%);
 74 |   --chart-1: hsl(12 76% 61%);
 75 |   --chart-2: hsl(173 58% 39%);
 76 |   --chart-3: hsl(197 37% 24%);
 77 |   --chart-4: hsl(43 74% 66%);
 78 |   --chart-5: hsl(27 87% 67%);
 79 |   --radius: 0.5rem;
 80 |   --sidebar-background: hsl(0 0% 98%);
 81 |   --sidebar-foreground: hsl(240 5.3% 26.1%);
 82 |   --sidebar-primary: hsl(240 5.9% 10%);
 83 |   --sidebar-primary-foreground: hsl(0 0% 98%);
 84 |   --sidebar-accent: hsl(240 4.8% 95.9%);
 85 |   --sidebar-accent-foreground: hsl(240 5.9% 10%);
 86 |   --sidebar-border: hsl(220 13% 91%);
 87 |   --sidebar-ring: hsl(217.2 91.2% 59.8%);
 88 | }
 89 | 
 90 | .dark {
 91 |   --background: hsl(0, 0%, 0%);
 92 |   --foreground: hsl(0, 0%, 93%);
 93 |   --card: hsl(0, 0%, 0%);
 94 |   --card-foreground: hsl(0, 0%, 93%);
 95 |   --popover: hsl(0, 0%, 0%);
 96 |   --popover-foreground: hsl(0, 0%, 93%);
 97 |   --primary: hsl(0, 0%, 93%);
 98 |   --primary-foreground: hsl(0, 0%, 9%);
 99 |   --secondary: hsl(0, 0%, 15%);
100 |   --secondary-foreground: hsl(0, 0%, 93%);
101 |   --muted: hsl(0, 0%, 15%);
102 |   --muted-foreground: hsl(0, 0%, 63.9%);
103 |   --accent: hsl(0, 0%, 15%);
104 |   --accent-foreground: hsl(0, 0%, 93%);
105 |   --destructive: hsl(0, 100%, 50%);
106 |   --destructive-foreground: hsl(0, 0%, 93%);
107 |   --border: hsl(0, 0%, 15%);
108 |   --input: hsl(0, 0%, 15%);
109 |   --ring: hsl(0, 0%, 83.1%);
110 |   --chart-1: hsl(220, 70%, 50%);
111 |   --chart-2: hsl(160, 60%, 45%);
112 |   --chart-3: hsl(30, 80%, 55%);
113 |   --chart-4: hsl(280, 65%, 60%);
114 |   --chart-5: hsl(340, 75%, 55%);
115 |   --sidebar-background: hsl(240, 5.9%, 10%);
116 |   --sidebar-foreground: hsl(240, 4.8%, 95.9%);
117 |   --sidebar-primary: hsl(224.3, 76.3%, 48%);
118 |   --sidebar-primary-foreground: hsl(0, 0%, 100%);
119 |   --sidebar-accent: hsl(240, 3.7%, 15.9%);
120 |   --sidebar-accent-foreground: hsl(240, 4.8%, 95.9%);
121 |   --sidebar-border: hsl(240, 3.7%, 15.9%);
122 |   --sidebar-ring: hsl(217.2, 91.2%, 59.8%);
123 |   --radius: 0.5rem;
124 | }
125 | 
126 | @layer utilities {
127 |   .text-balance {
128 |     text-wrap: balance;
129 |   }
130 | }
131 | 
132 | @utility container {  margin-inline: auto;  padding-inline: 2rem;}
133 | 
134 | @layer base {
135 |   * {
136 |     @apply border-border;
137 |   }
138 |   body {
139 |     font-family: Arial, Helvetica, sans-serif;
140 |     @apply bg-background text-foreground;
141 |   }
142 | }
143 | 
144 | @layer utilities {
145 |   * {
146 |     scrollbar-width: thin;
147 |   }
148 | }
149 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | warfin@uncoverit.org.
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/src/components/color-picker.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import type React from "react";
  4 | import { useState, useEffect, useRef, useCallback } from "react";
  5 | import { Input } from "@/components/ui/input";
  6 | import { Button } from "@/components/ui/button";
  7 | import {
  8 |   Popover,
  9 |   PopoverContent,
 10 |   PopoverTrigger,
 11 | } from "@/components/ui/popover";
 12 | 
 13 | interface ColorPickerProps {
 14 |   color: string;
 15 |   onChange: (color: string) => void;
 16 | }
 17 | 
 18 | /** Discord-themed preset colors */
 19 | const discordColors = [
 20 |   "#5865F2", // Blurple
 21 |   "#57F287", // Green
 22 |   "#FEE75C", // Yellow
 23 |   "#EB459E", // Fuchsia
 24 |   "#ED4245", // Red
 25 |   "#000000", // Black
 26 |   "#FFFFFF", // White
 27 |   "#1E1F22", // Dark
 28 |   "#2B2D31", // Dark but not as dark
 29 |   "#313338", // Even less dark
 30 |   "#F2F3F5", // Light
 31 |   "#E3E5E8", // Less light
 32 | ];
 33 | 
 34 | export function ColorPicker({ color, onChange }: ColorPickerProps) {
 35 |   const [inputValue, setInputValue] = useState(color);
 36 |   const [isOpen, setIsOpen] = useState(false);
 37 |   const canvasRef = useRef<HTMLCanvasElement>(null);
 38 | 
 39 |   /* --------------------------------------------------------------------- *
 40 |    *  Draw the HSV-style gradient on the canvas
 41 |    * --------------------------------------------------------------------- */
 42 |   const drawColorGradient = useCallback(() => {
 43 |     const canvas = canvasRef.current;
 44 |     if (!canvas) return;
 45 | 
 46 |     const ctx = canvas.getContext("2d");
 47 |     if (!ctx) return;
 48 | 
 49 |     // Clear
 50 |     ctx.clearRect(0, 0, canvas.width, canvas.height);
 51 | 
 52 |     // Horizontal hue gradient
 53 |     const gradH = ctx.createLinearGradient(0, 0, canvas.width, 0);
 54 |     gradH.addColorStop(0, "#FF0000");
 55 |     gradH.addColorStop(1 / 6, "#FFFF00");
 56 |     gradH.addColorStop(2 / 6, "#00FF00");
 57 |     gradH.addColorStop(3 / 6, "#00FFFF");
 58 |     gradH.addColorStop(4 / 6, "#0000FF");
 59 |     gradH.addColorStop(5 / 6, "#FF00FF");
 60 |     gradH.addColorStop(1, "#FF0000");
 61 | 
 62 |     ctx.fillStyle = gradH;
 63 |     ctx.fillRect(0, 0, canvas.width, canvas.height);
 64 | 
 65 |     // Vertical white→transparent→black overlay (saturation/value)
 66 |     const gradV = ctx.createLinearGradient(0, 0, 0, canvas.height);
 67 |     gradV.addColorStop(0, "rgba(255,255,255,1)");
 68 |     gradV.addColorStop(0.5, "rgba(255,255,255,0)");
 69 |     gradV.addColorStop(0.5, "rgba(0,0,0,0)");
 70 |     gradV.addColorStop(1, "rgba(0,0,0,1)");
 71 | 
 72 |     ctx.fillStyle = gradV;
 73 |     ctx.fillRect(0, 0, canvas.width, canvas.height);
 74 |   }, []);
 75 | 
 76 |   /* --------------------------------------------------------------------- *
 77 |    *  Redraw when the popover opens (give the canvas time to mount)
 78 |    * --------------------------------------------------------------------- */
 79 |   useEffect(() => {
 80 |     if (!isOpen) return;
 81 | 
 82 |     const timer = setTimeout(() => {
 83 |       drawColorGradient();
 84 |     }, 50);
 85 | 
 86 |     return () => clearTimeout(timer);
 87 |   }, [isOpen, drawColorGradient]);
 88 | 
 89 |   /* --------------------------------------------------------------------- *
 90 |    *  Keep the input in sync with the prop
 91 |    * --------------------------------------------------------------------- */
 92 |   useEffect(() => {
 93 |     setInputValue(color);
 94 |   }, [color]);
 95 | 
 96 |   /* --------------------------------------------------------------------- *
 97 |    *  Click → sample color from canvas
 98 |    * --------------------------------------------------------------------- */
 99 |   const handleCanvasClick = (e: React.MouseEvent<HTMLCanvasElement>) => {
100 |     const canvas = canvasRef.current;
101 |     if (!canvas) return;
102 | 
103 |     const rect = canvas.getBoundingClientRect();
104 |     const x = Math.min(Math.max(0, e.clientX - rect.left), canvas.width - 1);
105 |     const y = Math.min(Math.max(0, e.clientY - rect.top), canvas.height - 1);
106 | 
107 |     const ctx = canvas.getContext("2d");
108 |     if (!ctx) return;
109 | 
110 |     const [r, g, b] = ctx.getImageData(x, y, 1, 1).data;
111 |     const hex = `#${[r, g, b]
112 |       .map((c) => c.toString(16).padStart(2, "0"))
113 |       .join("")}`;
114 | 
115 |     onChange(hex);
116 |     setInputValue(hex);
117 |   };
118 | 
119 |   /* --------------------------------------------------------------------- *
120 |    *  Manual hex input
121 |    * --------------------------------------------------------------------- */
122 |   const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
123 |     const val = e.target.value;
124 |     setInputValue(val);
125 | 
126 |     if (/^#[0-9A-F]{6}$/i.test(val)) {
127 |       onChange(val);
128 |     }
129 |   };
130 | 
131 |   return (
132 |     <div className="flex gap-2">
133 |       <Popover open={isOpen} onOpenChange={setIsOpen}>
134 |         <PopoverTrigger asChild>
135 |           <Button
136 |             variant="outline"
137 |             className="w-10 h-10 p-0 border-2"
138 |             style={{ backgroundColor: color }}
139 |           >
140 |             <span className="sr-only">Pick a color</span>
141 |           </Button>
142 |         </PopoverTrigger>
143 | 
144 |         <PopoverContent className="w-64">
145 |           <div className="space-y-4">
146 |             {/* Canvas picker */}
147 |             <div className="relative w-full h-40 rounded-md overflow-hidden border border-input">
148 |               <canvas
149 |                 ref={canvasRef}
150 |                 width={200}
151 |                 height={200}
152 |                 className="absolute inset-0 w-full h-full cursor-crosshair"
153 |                 onClick={handleCanvasClick}
154 |               />
155 |             </div>
156 | 
157 |             {/* Discord preset swatches */}
158 |             <div className="grid grid-cols-6 gap-2">
159 |               {discordColors.map((c) => (
160 |                 <Button
161 |                   key={c}
162 |                   variant="outline"
163 |                   className="w-8 h-8 p-0 rounded-md border"
164 |                   style={{ backgroundColor: c }}
165 |                   onClick={() => {
166 |                     onChange(c);
167 |                     setInputValue(c);
168 |                   }}
169 |                 >
170 |                   <span className="sr-only">Select {c}</span>
171 |                 </Button>
172 |               ))}
173 |             </div>
174 |           </div>
175 |         </PopoverContent>
176 |       </Popover>
177 | 
178 |       {/* Hex input */}
179 |       <Input
180 |         value={inputValue}
181 |         onChange={handleInputChange}
182 |         className="font-mono"
183 |         maxLength={7}
184 |       />
185 |     </div>
186 |   );
187 | }
188 | 


--------------------------------------------------------------------------------
/src/components/webhook-history.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Image from "next/image";
  4 | import { useState } from "react";
  5 | import {
  6 |   Card,
  7 |   CardContent,
  8 |   CardDescription,
  9 |   CardHeader,
 10 |   CardTitle,
 11 | } from "@/components/ui/card";
 12 | import { ScrollArea } from "@/components/ui/scroll-area";
 13 | import { Button } from "@/components/ui/button";
 14 | import { Trash2, Copy, Send } from "lucide-react";
 15 | import { toast } from "sonner";
 16 | import { EmbedPreview } from "@/components/embed-preview";
 17 | 
 18 | interface WebhookEmbed {
 19 |   title?: string;
 20 |   description?: string;
 21 |   color?: number;
 22 |   author?: { name: string; icon_url?: string };
 23 |   footer?: { text: string; icon_url?: string };
 24 |   thumbnail?: { url: string };
 25 |   image?: { url: string };
 26 | }
 27 | 
 28 | interface WebhookPayload {
 29 |   username?: string;
 30 |   avatar_url?: string;
 31 |   content?: string;
 32 |   embeds?: WebhookEmbed[];
 33 |   tts?: boolean;
 34 | }
 35 | 
 36 | interface WebhookHistoryItem {
 37 |   timestamp: string;
 38 |   payload: WebhookPayload;
 39 |   webhookUrl: string;
 40 | }
 41 | 
 42 | interface WebhookHistoryProps {
 43 |   history: WebhookHistoryItem[];
 44 | }
 45 | 
 46 | export function WebhookHistory({ history }: WebhookHistoryProps) {
 47 |   const [loading, setLoading] = useState<Record<number, boolean>>({});
 48 | 
 49 |   const formatDate = (dateString: string) => {
 50 |     const date = new Date(dateString);
 51 |     return new Intl.DateTimeFormat("en-US", {
 52 |       month: "short",
 53 |       day: "numeric",
 54 |       year: "numeric",
 55 |       hour: "numeric",
 56 |       minute: "numeric",
 57 |       hour12: true,
 58 |     }).format(date);
 59 |   };
 60 | 
 61 |   const copyPayload = (payload: WebhookPayload) => {
 62 |     navigator.clipboard.writeText(JSON.stringify(payload, null, 2));
 63 |     toast.info("Copied", {
 64 |       description: "Webhook payload copied to clipboard",
 65 |     });
 66 |   };
 67 | 
 68 |   const resendWebhook = async (
 69 |     index: number,
 70 |     webhookUrl: string,
 71 |     payload: WebhookPayload
 72 |   ) => {
 73 |     setLoading((prev) => ({ ...prev, [index]: true }));
 74 | 
 75 |     try {
 76 |       const response = await fetch(webhookUrl, {
 77 |         method: "POST",
 78 |         headers: {
 79 |           "Content-Type": "application/json",
 80 |         },
 81 |         body: JSON.stringify(payload),
 82 |       });
 83 | 
 84 |       if (!response.ok) {
 85 |         throw new Error(`Error: ${response.status} ${response.statusText}`);
 86 |       }
 87 | 
 88 |       toast.success("Webhook resent", {
 89 |         description: "Your message has been sent successfully",
 90 |       });
 91 |     } catch (error) {
 92 |       console.error("Error sending webhook:", error);
 93 |       toast.error("Error sending webhook", {
 94 |         description:
 95 |           error instanceof Error ? error.message : "Unknown error occurred",
 96 |       });
 97 |     } finally {
 98 |       setLoading((prev) => ({ ...prev, [index]: false }));
 99 |     }
100 |   };
101 | 
102 |   const clearHistory = () => {
103 |     localStorage.removeItem("webhookHistory");
104 |     window.location.reload();
105 |   };
106 | 
107 |   return (
108 |     <Card>
109 |       <CardHeader className="flex flex-row items-center justify-between">
110 |         <div>
111 |           <CardTitle>Webhook History</CardTitle>
112 |           <CardDescription>
113 |             Your previously sent webhook messages
114 |           </CardDescription>
115 |         </div>
116 |         {history.length > 0 && (
117 |           <Button variant="destructive" onClick={clearHistory}>
118 |             <Trash2 className="mr-2 h-4 w-4" />
119 |             Clear History
120 |           </Button>
121 |         )}
122 |       </CardHeader>
123 |       <CardContent>
124 |         {history.length === 0 ? (
125 |           <p className="text-muted-foreground">
126 |             No webhook history yet. Send a webhook to see it here.
127 |           </p>
128 |         ) : (
129 |           <ScrollArea className="h-[600px]">
130 |             <div className="space-y-4">
131 |               {history.map((item, index) => (
132 |                 <Card key={index} className="border-muted">
133 |                   <CardHeader className="p-4 pb-2">
134 |                     <div className="flex justify-between items-center">
135 |                       <CardTitle className="text-sm font-medium">
136 |                         {formatDate(item.timestamp)}
137 |                       </CardTitle>
138 |                       <div className="flex gap-2">
139 |                         <Button
140 |                           variant="outline"
141 |                           size="icon"
142 |                           onClick={() => copyPayload(item.payload)}
143 |                         >
144 |                           <Copy className="h-4 w-4" />
145 |                         </Button>
146 |                         <Button
147 |                           variant="outline"
148 |                           size="icon"
149 |                           onClick={() =>
150 |                             resendWebhook(index, item.webhookUrl, item.payload)
151 |                           }
152 |                           disabled={loading[index]}
153 |                         >
154 |                           <Send className="h-4 w-4" />
155 |                         </Button>
156 |                       </div>
157 |                     </div>
158 |                     <CardDescription className="truncate text-xs">
159 |                       {item.webhookUrl}
160 |                     </CardDescription>
161 |                   </CardHeader>
162 |                   <CardContent className="p-4 pt-2">
163 |                     <div className="bg-[#36393f] text-white rounded-md p-3">
164 |                       {item.payload.username && (
165 |                         <div className="flex items-center gap-2 mb-2">
166 |                           {item.payload.avatar_url ? (
167 |                             <div className="w-6 h-6 rounded-full overflow-hidden">
168 |                               <Image
169 |                                 src={item.payload.avatar_url}
170 |                                 alt="Avatar"
171 |                                 className="w-full h-full object-cover"
172 |                               />
173 |                             </div>
174 |                           ) : (
175 |                             <div className="w-6 h-6 rounded-full bg-gray-600"></div>
176 |                           )}
177 |                           <span className="font-semibold text-sm">
178 |                             {item.payload.username}
179 |                           </span>
180 |                         </div>
181 |                       )}
182 | 
183 |                       {item.payload.content && (
184 |                         <p className="text-sm mb-2 break-words">
185 |                           {item.payload.content}
186 |                         </p>
187 |                       )}
188 | 
189 |                       {item.payload.embeds &&
190 |                         item.payload.embeds.length > 0 && (
191 |                           <div className="space-y-2">
192 |                             {item.payload.embeds.map(
193 |                               (embed: WebhookEmbed, embedIndex: number) => (
194 |                                 <EmbedPreview
195 |                                   key={embedIndex}
196 |                                   title={embed.title}
197 |                                   description={embed.description}
198 |                                   color={
199 |                                     embed.color
200 |                                       ? `#${embed.color
201 |                                           .toString(16)
202 |                                           .padStart(6, "0")}`
203 |                                       : undefined
204 |                                   }
205 |                                   author={embed.author?.name}
206 |                                   authorIcon={embed.author?.icon_url}
207 |                                   footer={embed.footer?.text}
208 |                                   footerIcon={embed.footer?.icon_url}
209 |                                   thumbnail={embed.thumbnail?.url}
210 |                                   image={embed.image?.url}
211 |                                 />
212 |                               )
213 |                             )}
214 |                           </div>
215 |                         )}
216 |                     </div>
217 |                   </CardContent>
218 |                 </Card>
219 |               ))}
220 |             </div>
221 |           </ScrollArea>
222 |         )}
223 |       </CardContent>
224 |     </Card>
225 |   );
226 | }
227 | 


--------------------------------------------------------------------------------
/src/app/page.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import Image from "next/image";
  4 | import Link from "next/link";
  5 | import { useState, useEffect, useRef } from "react";
  6 | import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
  7 | import {
  8 |   Card,
  9 |   CardContent,
 10 |   CardDescription,
 11 |   CardFooter,
 12 |   CardHeader,
 13 |   CardTitle,
 14 | } from "@/components/ui/card";
 15 | import { Button, buttonVariants } from "@/components/ui/button";
 16 | import { Input } from "@/components/ui/input";
 17 | import { Label } from "@/components/ui/label";
 18 | import { Textarea } from "@/components/ui/textarea";
 19 | import { Switch } from "@/components/ui/switch";
 20 | import {
 21 |   Check,
 22 |   Copy,
 23 |   Save,
 24 |   Send,
 25 |   Trash2,
 26 |   MoonStar,
 27 |   Sun,
 28 |   CircleStop,
 29 |   Play,
 30 | } from "lucide-react";
 31 | import { ScrollArea } from "@/components/ui/scroll-area";
 32 | import { Separator } from "@/components/ui/separator";
 33 | import { toast } from "sonner";
 34 | import { ColorPicker } from "@/components/color-picker";
 35 | import { WebhookHistory } from "@/components/webhook-history";
 36 | import { EmbedPreview } from "@/components/embed-preview";
 37 | import {
 38 |   Popover,
 39 |   PopoverContent,
 40 |   PopoverTrigger,
 41 | } from "@/components/ui/popover";
 42 | import { useTheme } from "next-themes";
 43 | import {
 44 |   Tooltip,
 45 |   TooltipContent,
 46 |   TooltipProvider,
 47 |   TooltipTrigger,
 48 | } from "@/components/ui/tooltip";
 49 | import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
 50 | import github from "@/../public/github.svg"
 51 | import discord from "@/../public/discord.svg"
 52 | 
 53 | interface WebhookEmbed {
 54 |   title?: string;
 55 |   description?: string;
 56 |   color?: number;
 57 |   author?: { name: string; icon_url?: string };
 58 |   footer?: { text: string; icon_url?: string };
 59 |   thumbnail?: { url: string };
 60 |   image?: { url: string };
 61 | }
 62 | 
 63 | interface WebhookPayload {
 64 |   username?: string;
 65 |   avatar_url?: string;
 66 |   content?: string;
 67 |   embeds?: WebhookEmbed[];
 68 |   tts?: boolean;
 69 | }
 70 | 
 71 | interface WebhookHistoryItem {
 72 |   timestamp: string;
 73 |   payload: WebhookPayload;
 74 |   webhookUrl: string;
 75 | }
 76 | 
 77 | interface WebhookEditPayload {
 78 |   name?: string;
 79 |   avatar?: string;
 80 | }
 81 | 
 82 | export default function WebhookTool() {
 83 |   const [webhookUrl, setWebhookUrl] = useState("");
 84 |   const [savedWebhooks, setSavedWebhooks] = useState<
 85 |     { name: string; url: string }[]
 86 |   >([]);
 87 |   const [webhookName, setWebhookName] = useState("");
 88 |   const [username, setUsername] = useState("");
 89 |   const [avatarUrl, setAvatarUrl] = useState("");
 90 |   const [content, setContent] = useState("");
 91 |   const [embedTitle, setEmbedTitle] = useState("");
 92 |   const [embedDescription, setEmbedDescription] = useState("");
 93 |   const [embedColor, setEmbedColor] = useState("#5865F2");
 94 |   const [embedAuthor, setEmbedAuthor] = useState("");
 95 |   const [embedAuthorIcon, setEmbedAuthorIcon] = useState("");
 96 |   const [embedFooter, setEmbedFooter] = useState("");
 97 |   const [embedFooterIcon, setEmbedFooterIcon] = useState("");
 98 |   const [embedThumbnail, setEmbedThumbnail] = useState("");
 99 |   const [embedImage, setEmbedImage] = useState("");
100 |   const [useEmbed, setUseEmbed] = useState(false);
101 |   const [useTTS, setUseTTS] = useState(false);
102 |   const [loading, setLoading] = useState(false);
103 |   const [history, setHistory] = useState<WebhookHistoryItem[]>([]);
104 |   const [activeTab, setActiveTab] = useState("message");
105 |   const [isSpamming, setIsSpamming] = useState(false);
106 |   const [useSpam, setUseSpam] = useState(false);
107 |   const spamRef = useRef<{ stop: boolean }>({ stop: false });
108 | 
109 |   useEffect(() => {
110 |     const saved = localStorage.getItem("savedWebhooks");
111 |     if (saved) {
112 |       setSavedWebhooks(JSON.parse(saved));
113 |     }
114 | 
115 |     const historyData = localStorage.getItem("webhookHistory");
116 |     if (historyData) {
117 |       setHistory(JSON.parse(historyData));
118 |     }
119 |   }, []);
120 | 
121 |   const { theme, setTheme } = useTheme();
122 |   const saveWebhook = () => {
123 |     if (!webhookUrl || !webhookName) {
124 |       toast.error("Error", {
125 |         description: "Please provide both a name and URL for the webhook",
126 |       });
127 |       return;
128 |     }
129 | 
130 |     const newWebhooks = [
131 |       ...savedWebhooks,
132 |       { name: webhookName, url: webhookUrl },
133 |     ];
134 |     setSavedWebhooks(newWebhooks);
135 |     localStorage.setItem("savedWebhooks", JSON.stringify(newWebhooks));
136 | 
137 |     toast.success("Webhook saved", {
138 |       description: `Webhook "${webhookName}" has been saved`,
139 |     });
140 | 
141 |     setWebhookName("");
142 |   };
143 | 
144 |   const deleteWebhook = (index: number) => {
145 |     const newWebhooks = [...savedWebhooks];
146 |     newWebhooks.splice(index, 1);
147 |     setSavedWebhooks(newWebhooks);
148 |     localStorage.setItem("savedWebhooks", JSON.stringify(newWebhooks));
149 | 
150 |     toast.success("Webhook deleted", {
151 |       description: "The webhook has been removed from your saved list",
152 |     });
153 |   };
154 | 
155 |   const selectWebhook = (url: string) => {
156 |     setWebhookUrl(url);
157 |   };
158 | 
159 |   const editWebhook = async () => {
160 |     setLoading(true);
161 | 
162 |     try {
163 |       const payload: WebhookEditPayload = {};
164 |       if (username) payload.name = username;
165 |       if (avatarUrl) {
166 |         const res = await fetch(avatarUrl);
167 |         const blob = await res.blob();
168 |         const reader = new FileReader();
169 |         const base64 = await new Promise<string>((resolve, reject) => {
170 |           reader.onloadend = () => resolve(reader.result as string);
171 |           reader.onerror = reject;
172 |           reader.readAsDataURL(blob);
173 |         });
174 |         payload.avatar = base64;
175 |       }
176 | 
177 |       const response = await fetch(webhookUrl, {
178 |         method: "PATCH",
179 |         headers: {
180 |           "Content-Type": "application/json",
181 |         },
182 |         body: JSON.stringify(payload),
183 |       });
184 | 
185 |       if (!response.ok) {
186 |         const error = await response.json();
187 |         throw new Error(error.message);
188 |       }
189 | 
190 |       toast.success("Webhook edited", {
191 |         description: "The webhook has been updated successfully",
192 |       });
193 |     } catch (error) {
194 |       toast.error("Error editing webhook", {
195 |         description: error instanceof Error ? error.message : String(error),
196 |       });
197 |     } finally {
198 |       setLoading(false);
199 |     }
200 |   };
201 | 
202 |   const sendWebhook = async () => {
203 |     setLoading(true);
204 | 
205 |     try {
206 |       const payload: WebhookPayload = {};
207 | 
208 |       if (username) payload.username = username;
209 |       if (avatarUrl) payload.avatar_url = avatarUrl;
210 |       if (content) payload.content = content;
211 | 
212 |       if (useEmbed) {
213 |         const embed: WebhookEmbed = {};
214 |         if (embedTitle) embed.title = embedTitle;
215 |         if (embedDescription) embed.description = embedDescription;
216 |         if (embedColor)
217 |           embed.color = Number.parseInt(embedColor.replace("#", ""), 16);
218 | 
219 |         if (embedAuthor) {
220 |           embed.author = { name: embedAuthor };
221 |           if (embedAuthorIcon) embed.author.icon_url = embedAuthorIcon;
222 |         }
223 | 
224 |         if (embedFooter) {
225 |           embed.footer = { text: embedFooter };
226 |           if (embedFooterIcon) embed.footer.icon_url = embedFooterIcon;
227 |         }
228 | 
229 |         if (embedThumbnail) embed.thumbnail = { url: embedThumbnail };
230 |         if (embedImage) embed.image = { url: embedImage };
231 | 
232 |         payload.embeds = [embed];
233 |       }
234 | 
235 |       const response = await fetch(webhookUrl, {
236 |         method: "POST",
237 |         headers: {
238 |           "Content-Type": "application/json",
239 |         },
240 |         body: JSON.stringify(useTTS ? { ...payload, tts: true } : payload),
241 |       });
242 | 
243 |       if (!response.ok) {
244 |         const error = await response.json();
245 |         throw new Error(error.message);
246 |       }
247 | 
248 |       const historyItem: WebhookHistoryItem = {
249 |         timestamp: new Date().toISOString(),
250 |         payload,
251 |         webhookUrl,
252 |       };
253 | 
254 |       const newHistory = [historyItem, ...history].slice(0, 50);
255 |       setHistory(newHistory);
256 |       localStorage.setItem("webhookHistory", JSON.stringify(newHistory));
257 | 
258 |       toast.success("Webhook sent", {
259 |         description: "Your message has been sent successfully",
260 |       });
261 |     } catch (error) {
262 |       toast.error("Error sending webhook", {
263 |         description: error instanceof Error ? error.message : String(error),
264 |       });
265 |     } finally {
266 |       setLoading(false);
267 |     }
268 |   };
269 | 
270 |   const startSpam = async () => {
271 |     setIsSpamming(true);
272 |     spamRef.current.stop = false;
273 |     const payload: WebhookPayload = {};
274 |     if (username) payload.username = username;
275 |     if (avatarUrl) payload.avatar_url = avatarUrl;
276 |     if (content) payload.content = content;
277 |     if (useEmbed) {
278 |       const embed: WebhookEmbed = {};
279 |       if (embedTitle) embed.title = embedTitle;
280 |       if (embedDescription) embed.description = embedDescription;
281 |       if (embedColor)
282 |         embed.color = Number.parseInt(embedColor.replace("#", ""), 16);
283 |       if (embedAuthor) {
284 |         embed.author = { name: embedAuthor };
285 |         if (embedAuthorIcon) embed.author.icon_url = embedAuthorIcon;
286 |       }
287 |       if (embedFooter) {
288 |         embed.footer = { text: embedFooter };
289 |         if (embedFooterIcon) embed.footer.icon_url = embedFooterIcon;
290 |       }
291 |       if (embedThumbnail) embed.thumbnail = { url: embedThumbnail };
292 |       if (embedImage) embed.image = { url: embedImage };
293 |       payload.embeds = [embed];
294 |     }
295 |     const spam = async () => {
296 |       toast.info("Spamming started", {
297 |         description: "Spamming the webhook.",
298 |       });
299 |       while (!spamRef.current.stop) {
300 |         let response: Response | undefined;
301 |         try {
302 |           response = await fetch(webhookUrl, {
303 |             method: "POST",
304 |             headers: { "Content-Type": "application/json" },
305 |             body: JSON.stringify(useTTS ? { ...payload, tts: true } : payload),
306 |           });
307 | 
308 |           if (!response.ok) {
309 |             const error = await response.json();
310 |             throw new Error(error.message);
311 |           }
312 |         } catch (error) {
313 |           if (!response || response.status !== 429) {
314 |             toast.error("Error sending webhook", {
315 |               description:
316 |                 error instanceof Error ? error.message : String(error),
317 |             });
318 |             spamRef.current.stop = true;
319 |             setIsSpamming(false);
320 |           }
321 |         }
322 |       }
323 |     };
324 |     spam();
325 |   };
326 | 
327 |   const stopSpam = () => {
328 |     spamRef.current.stop = true;
329 |     setIsSpamming(false);
330 |     toast.info("Spam stopped", {
331 |       description: "Stopped spamming the webhook.",
332 |     });
333 |   };
334 | 
335 |   const clearForm = () => {
336 |     setContent("");
337 |     setEmbedTitle("");
338 |     setEmbedDescription("");
339 |     setEmbedColor("#5865F2");
340 |     setEmbedAuthor("");
341 |     setEmbedAuthorIcon("");
342 |     setEmbedFooter("");
343 |     setEmbedFooterIcon("");
344 |     setEmbedThumbnail("");
345 |     setEmbedImage("");
346 |   };
347 | 
348 |   return (
349 |     <div className="container mx-auto py-8 px-4 relative">
350 |       <h1 className="text-3xl font-bold mb-6 text-center">
351 |         Discord Webhook Multi-Tool
352 |       </h1>
353 | 
354 |       <Tabs
355 |         defaultValue="message"
356 |         value={activeTab}
357 |         onValueChange={setActiveTab}
358 |         className="w-full"
359 |       >
360 |         <TabsList className="grid w-full grid-cols-4">
361 |           <TabsTrigger value="message">Message</TabsTrigger>
362 |           <TabsTrigger value="edit">Edit</TabsTrigger>
363 |           <TabsTrigger value="webhooks">Webhooks</TabsTrigger>
364 |           <TabsTrigger value="history">History</TabsTrigger>
365 |         </TabsList>
366 | 
367 |         <TabsContent value="message" className="space-y-4 mt-4">
368 |           <Card>
369 |             <CardHeader>
370 |               <CardTitle>Webhook Configuration</CardTitle>
371 |               <CardDescription>
372 |                 Enter your webhook URL and customize the sender
373 |               </CardDescription>
374 |             </CardHeader>
375 |             <CardContent className="space-y-4">
376 |               <div className="space-y-2">
377 |                 <Label htmlFor="webhook-url">Webhook URL</Label>
378 |                 <div className="flex gap-2">
379 |                   <Input
380 |                     id="webhook-url"
381 |                     placeholder="https://discord.com/api/webhooks/..."
382 |                     value={webhookUrl}
383 |                     onChange={(e) => setWebhookUrl(e.target.value)}
384 |                     disabled={isSpamming}
385 |                   />
386 |                   <TooltipProvider>
387 |                     <Tooltip>
388 |                       <TooltipTrigger asChild>
389 |                         <Button
390 |                           aria-label="Delete Webhook"
391 |                           variant="destructive"
392 |                           size="icon"
393 |                           {...(webhookUrl ? {} : { disabled: true })}
394 |                           onClick={async () => {
395 |                             if (!webhookUrl) return;
396 |                             try {
397 |                               const response = await fetch(webhookUrl, {
398 |                                 method: "DELETE",
399 |                               });
400 |                               if (response.ok) {
401 |                                 setWebhookUrl("");
402 |                                 toast.success("Webhook deleted", {
403 |                                   description:
404 |                                     "The webhook has been deleted from Discord.",
405 |                                 });
406 |                               } else {
407 |                                 toast.error("Failed to delete webhook", {
408 |                                   description: `Error: ${response.status} ${response.statusText}`,
409 |                                 });
410 |                               }
411 |                             } catch (error) {
412 |                               toast.error("Error deleting webhook", {
413 |                                 description:
414 |                                   error instanceof Error
415 |                                     ? error.message
416 |                                     : "Unknown error occurred",
417 |                               });
418 |                             }
419 |                           }}
420 |                         >
421 |                           <Trash2 />
422 |                         </Button>
423 |                       </TooltipTrigger>
424 |                       <TooltipContent>
425 |                         <p>Delete Webhook</p>
426 |                       </TooltipContent>
427 |                     </Tooltip>
428 |                   </TooltipProvider>
429 |                   {savedWebhooks.length > 0 && (
430 |                     <div className="relative">
431 |                       <Popover>
432 |                         <PopoverTrigger asChild>
433 |                           <Button variant="outline" className="w-full">
434 |                             Saved
435 |                           </Button>
436 |                         </PopoverTrigger>
437 |                         <PopoverContent className="w-56 p-0">
438 |                           <div className="max-h-[300px] overflow-auto">
439 |                             {savedWebhooks.map((webhook, index) => (
440 |                               <div
441 |                                 key={index}
442 |                                 className="flex items-center justify-between p-2 hover:bg-muted cursor-pointer"
443 |                                 onClick={() => selectWebhook(webhook.url)}
444 |                               >
445 |                                 <span className="truncate">{webhook.name}</span>
446 |                                 <Button
447 |                                   variant="ghost"
448 |                                   size="icon"
449 |                                   onClick={(e) => {
450 |                                     e.stopPropagation();
451 |                                     deleteWebhook(index);
452 |                                   }}
453 |                                 >
454 |                                   <Trash2 className="size-4" />
455 |                                 </Button>
456 |                               </div>
457 |                             ))}
458 |                           </div>
459 |                         </PopoverContent>
460 |                       </Popover>
461 |                     </div>
462 |                   )}
463 |                 </div>
464 |               </div>
465 | 
466 |               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
467 |                 <div className="space-y-2">
468 |                   <Label htmlFor="username">Override Username (optional)</Label>
469 |                   <Input
470 |                     id="username"
471 |                     placeholder="Custom Bot Name"
472 |                     value={username}
473 |                     onChange={(e) => setUsername(e.target.value)}
474 |                     disabled={isSpamming}
475 |                   />
476 |                 </div>
477 |                 <div className="space-y-2">
478 |                   <Label htmlFor="avatar-url">Avatar URL (optional)</Label>
479 |                   <Input
480 |                     id="avatar-url"
481 |                     placeholder="https://example.com/avatar.png"
482 |                     value={avatarUrl}
483 |                     onChange={(e) => setAvatarUrl(e.target.value)}
484 |                     disabled={isSpamming}
485 |                   />
486 |                 </div>
487 |               </div>
488 |             </CardContent>
489 |           </Card>
490 | 
491 |           <div className="grid grid-cols-1 lg:grid-cols-2 gap-4">
492 |             <div className="space-y-4">
493 |               <Card>
494 |                 <CardHeader>
495 |                   <CardTitle>Message Content</CardTitle>
496 |                   <CardDescription>
497 |                     Compose your webhook message
498 |                   </CardDescription>
499 |                 </CardHeader>
500 |                 <CardContent className="space-y-4">
501 |                   <div className="space-y-2">
502 |                     <Label htmlFor="content">Text Message</Label>
503 |                     <Textarea
504 |                       id="content"
505 |                       placeholder="Enter your message here..."
506 |                       className="min-h-[100px]"
507 |                       value={content}
508 |                       onChange={(e) => setContent(e.target.value)}
509 |                       disabled={isSpamming}
510 |                     />
511 |                   </div>
512 | 
513 |                   <div className="flex items-center space-x-2">
514 |                     <Switch
515 |                       id="use-embed"
516 |                       checked={useEmbed}
517 |                       onCheckedChange={setUseEmbed}
518 |                       disabled={isSpamming}
519 |                     />
520 |                     <Label htmlFor="use-embed">Include Embed</Label>
521 |                   </div>
522 | 
523 |                   <div className="flex items-center space-x-2">
524 |                     <Switch
525 |                       id="use-tts"
526 |                       checked={useTTS}
527 |                       onCheckedChange={setUseTTS}
528 |                       disabled={isSpamming}
529 |                     />
530 |                     <Label htmlFor="use-tts">TTS</Label>
531 |                   </div>
532 | 
533 |                   <div className="flex items-center space-x-2">
534 |                     <Switch
535 |                       id="spam"
536 |                       checked={useSpam}
537 |                       onCheckedChange={setUseSpam}
538 |                       disabled={isSpamming}
539 |                     />
540 |                     <Label htmlFor="spam">Spam</Label>
541 |                   </div>
542 | 
543 |                   {useEmbed && (
544 |                     <div className="space-y-4 pt-2">
545 |                       <div className="space-y-2">
546 |                         <Label htmlFor="embed-title">Embed Title</Label>
547 |                         <Input
548 |                           id="embed-title"
549 |                           placeholder="Embed Title"
550 |                           value={embedTitle}
551 |                           onChange={(e) => setEmbedTitle(e.target.value)}
552 |                           disabled={isSpamming}
553 |                         />
554 |                       </div>
555 | 
556 |                       <div className="space-y-2">
557 |                         <Label htmlFor="embed-description">
558 |                           Embed Description
559 |                         </Label>
560 |                         <Textarea
561 |                           id="embed-description"
562 |                           placeholder="Embed description..."
563 |                           className="min-h-[100px]"
564 |                           value={embedDescription}
565 |                           onChange={(e) => setEmbedDescription(e.target.value)}
566 |                           disabled={isSpamming}
567 |                         />
568 |                       </div>
569 | 
570 |                       <div className="space-y-2">
571 |                         <Label htmlFor="embed-color">Embed Color</Label>
572 |                         <ColorPicker
573 |                           color={embedColor}
574 |                           onChange={setEmbedColor}
575 |                         />
576 |                       </div>
577 | 
578 |                       <Separator />
579 | 
580 |                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
581 |                         <div className="space-y-2">
582 |                           <Label htmlFor="embed-author">Author Name</Label>
583 |                           <Input
584 |                             id="embed-author"
585 |                             placeholder="Author name"
586 |                             value={embedAuthor}
587 |                             onChange={(e) => setEmbedAuthor(e.target.value)}
588 |                             disabled={isSpamming}
589 |                           />
590 |                         </div>
591 |                         <div className="space-y-2">
592 |                           <Label htmlFor="embed-author-icon">
593 |                             Author Icon URL
594 |                           </Label>
595 |                           <Input
596 |                             id="embed-author-icon"
597 |                             placeholder="https://example.com/icon.png"
598 |                             value={embedAuthorIcon}
599 |                             onChange={(e) => setEmbedAuthorIcon(e.target.value)}
600 |                             disabled={isSpamming}
601 |                           />
602 |                         </div>
603 |                       </div>
604 | 
605 |                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
606 |                         <div className="space-y-2">
607 |                           <Label htmlFor="embed-footer">Footer Text</Label>
608 |                           <Input
609 |                             id="embed-footer"
610 |                             placeholder="Footer text"
611 |                             value={embedFooter}
612 |                             onChange={(e) => setEmbedFooter(e.target.value)}
613 |                             disabled={isSpamming}
614 |                           />
615 |                         </div>
616 |                         <div className="space-y-2">
617 |                           <Label htmlFor="embed-footer-icon">
618 |                             Footer Icon URL
619 |                           </Label>
620 |                           <Input
621 |                             id="embed-footer-icon"
622 |                             placeholder="https://example.com/icon.png"
623 |                             value={embedFooterIcon}
624 |                             onChange={(e) => setEmbedFooterIcon(e.target.value)}
625 |                             disabled={isSpamming}
626 |                           />
627 |                         </div>
628 |                       </div>
629 | 
630 |                       <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
631 |                         <div className="space-y-2">
632 |                           <Label htmlFor="embed-thumbnail">Thumbnail URL</Label>
633 |                           <Input
634 |                             id="embed-thumbnail"
635 |                             placeholder="https://example.com/thumbnail.png"
636 |                             value={embedThumbnail}
637 |                             onChange={(e) => setEmbedThumbnail(e.target.value)}
638 |                             disabled={isSpamming}
639 |                           />
640 |                         </div>
641 |                         <div className="space-y-2">
642 |                           <Label htmlFor="embed-image">Image URL</Label>
643 |                           <Input
644 |                             id="embed-image"
645 |                             placeholder="https://example.com/image.png"
646 |                             value={embedImage}
647 |                             onChange={(e) => setEmbedImage(e.target.value)}
648 |                             disabled={isSpamming}
649 |                           />
650 |                         </div>
651 |                       </div>
652 |                     </div>
653 |                   )}
654 |                 </CardContent>
655 |                 <CardFooter className="flex justify-between">
656 |                   <Button
657 |                     variant="outline"
658 |                     onClick={clearForm}
659 |                     disabled={isSpamming}
660 |                   >
661 |                     Clear
662 |                   </Button>
663 |                   {useSpam ? (
664 |                     isSpamming ? (
665 |                       <Button variant="destructive" onClick={stopSpam}>
666 |                         <CircleStop className="size-4" />
667 |                         Stop Spam
668 |                       </Button>
669 |                     ) : (
670 |                       <Button
671 |                         onClick={startSpam}
672 |                         disabled={loading || !webhookUrl || !content}
673 |                       >
674 |                         <Play className="size-4" />
675 |                         Start Spam
676 |                       </Button>
677 |                     )
678 |                   ) : (
679 |                     <Button
680 |                       onClick={sendWebhook}
681 |                       disabled={loading || !webhookUrl || !content}
682 |                     >
683 |                       <Send className="size-4" />
684 |                       {loading ? "Sending..." : "Send Webhook"}
685 |                     </Button>
686 |                   )}
687 |                 </CardFooter>
688 |               </Card>
689 |             </div>
690 | 
691 |             <div className="space-y-4">
692 |               <Card className="h-full">
693 |                 <CardHeader>
694 |                   <CardTitle>Preview</CardTitle>
695 |                   <CardDescription>
696 |                     How your message will appear in Discord
697 |                   </CardDescription>
698 |                 </CardHeader>
699 |                 <CardContent>
700 |                   <div className="bg-[#36393f] text-white rounded-md p-4 min-h-[300px]">
701 |                     {username && (
702 |                       <div className="flex items-center gap-2 mb-2">
703 |                         <div className="w-8 h-8 rounded-full overflow-hidden bg-gray-600 flex items-center justify-center">
704 |                           {avatarUrl ? (
705 |                             <Avatar className="w-8 h-8">
706 |                               <AvatarImage src={avatarUrl} alt="Avatar" />
707 |                               <AvatarFallback>
708 |                                 {username
709 |                                   ? username.charAt(0).toUpperCase()
710 |                                   : "D"}
711 |                               </AvatarFallback>
712 |                             </Avatar>
713 |                           ) : (
714 |                             <span className="text-white text-xs font-bold">
715 |                               {username.charAt(0).toUpperCase()}
716 |                             </span>
717 |                           )}
718 |                         </div>
719 |                         <span className="font-semibold">{username}</span>
720 |                       </div>
721 |                     )}
722 | 
723 |                     {content && <p className="mb-2 break-words">{content}</p>}
724 | 
725 |                     {useEmbed && (
726 |                       <EmbedPreview
727 |                         title={embedTitle}
728 |                         description={embedDescription}
729 |                         color={embedColor}
730 |                         author={embedAuthor}
731 |                         authorIcon={embedAuthorIcon}
732 |                         footer={embedFooter}
733 |                         footerIcon={embedFooterIcon}
734 |                         thumbnail={embedThumbnail}
735 |                         image={embedImage}
736 |                       />
737 |                     )}
738 |                   </div>
739 |                 </CardContent>
740 |               </Card>
741 |             </div>
742 |           </div>
743 |         </TabsContent>
744 | 
745 |         <TabsContent value="edit" className="space-y-4 mt-4">
746 |           <Card>
747 |             <CardHeader>
748 |               <CardTitle>Edit Webhook</CardTitle>
749 |               <CardDescription>
750 |                 Modify the webhook&apos;s settings
751 |               </CardDescription>
752 |             </CardHeader>
753 |             <CardContent className="space-y-4">
754 |               <div className="space-y-2">
755 |                 <Label htmlFor="webhook-url">Webhook URL</Label>
756 |                 <div className="flex gap-2">
757 |                   <Input
758 |                     id="webhook-url"
759 |                     placeholder="https://discord.com/api/webhooks/..."
760 |                     value={webhookUrl}
761 |                     onChange={(e) => setWebhookUrl(e.target.value)}
762 |                     disabled={isSpamming}
763 |                   />
764 |                 </div>
765 |               </div>
766 | 
767 |               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
768 |                 <div className="space-y-2">
769 |                   <Label htmlFor="username">Edit Username</Label>
770 |                   <Input
771 |                     id="username"
772 |                     placeholder="Custom Bot Name"
773 |                     value={username}
774 |                     onChange={(e) => setUsername(e.target.value)}
775 |                     disabled={isSpamming}
776 |                   />
777 |                 </div>
778 |                 <div className="space-y-2">
779 |                   <Label htmlFor="avatar-url">Avatar URL</Label>
780 |                   <div className="flex gap-2">
781 |                     <Input
782 |                       id="avatar-url"
783 |                       placeholder="https://example.com/avatar.png"
784 |                       value={avatarUrl}
785 |                       onChange={(e) => setAvatarUrl(e.target.value)}
786 |                       disabled={isSpamming}
787 |                     />
788 |                     <Avatar>
789 |                       <AvatarImage src={avatarUrl} alt="Avatar" />
790 |                       <AvatarFallback>
791 |                         {username ? username.charAt(0).toUpperCase() : "D"}
792 |                       </AvatarFallback>
793 |                     </Avatar>
794 |                   </div>
795 |                 </div>
796 |               </div>
797 |             </CardContent>
798 |             <CardFooter className="flex justify-end">
799 |               <Button
800 |                 onClick={editWebhook}
801 |                 disabled={loading || !webhookUrl || (!username && !avatarUrl)}
802 |                 className="md:w-min w-full"
803 |               >
804 |                 <Save className="size-4" />
805 |                 {loading ? "Saving..." : "Save Changes"}
806 |               </Button>
807 |             </CardFooter>
808 |           </Card>
809 |         </TabsContent>
810 | 
811 |         <TabsContent value="webhooks" className="space-y-4 mt-4">
812 |           <Card>
813 |             <CardHeader>
814 |               <CardTitle>Saved Webhooks</CardTitle>
815 |               <CardDescription>
816 |                 Manage your saved Discord webhooks
817 |               </CardDescription>
818 |             </CardHeader>
819 |             <CardContent className="space-y-4">
820 |               <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
821 |                 <div className="space-y-2">
822 |                   <Label htmlFor="webhook-name">Webhook Name</Label>
823 |                   <Input
824 |                     id="webhook-name"
825 |                     placeholder="My Server Webhook"
826 |                     value={webhookName}
827 |                     onChange={(e) => setWebhookName(e.target.value)}
828 |                   />
829 |                 </div>
830 |                 <div className="space-y-2">
831 |                   <Label htmlFor="webhook-url-save">Webhook URL</Label>
832 |                   <Input
833 |                     id="webhook-url-save"
834 |                     placeholder="https://discord.com/api/webhooks/..."
835 |                     value={webhookUrl}
836 |                     onChange={(e) => setWebhookUrl(e.target.value)}
837 |                   />
838 |                 </div>
839 |               </div>
840 | 
841 |               <Button onClick={saveWebhook} className="w-full">
842 |                 <Save className="size-4" />
843 |                 Save Webhook
844 |               </Button>
845 | 
846 |               <Separator />
847 | 
848 |               <div className="space-y-2">
849 |                 <h3 className="text-lg font-medium">Your Saved Webhooks</h3>
850 |                 {savedWebhooks.length === 0 ? (
851 |                   <p className="text-muted-foreground">
852 |                     No webhooks saved yet. Add one above.
853 |                   </p>
854 |                 ) : (
855 |                   <ScrollArea className="h-full">
856 |                     <div className="space-y-2">
857 |                       {savedWebhooks.map((webhook, index) => (
858 |                         <Card key={index}>
859 |                           <CardContent>
860 |                             <div className="flex items-center justify-between">
861 |                               <div>
862 |                                 <h4 className="font-medium">{webhook.name}</h4>
863 |                                 <p className="text-sm text-muted-foreground truncate max-w-[300px]">
864 |                                   {webhook.url}
865 |                                 </p>
866 |                               </div>
867 |                               <div className="flex gap-2">
868 |                                 <Button
869 |                                   variant="outline"
870 |                                   size="icon"
871 |                                   onClick={() => {
872 |                                     navigator.clipboard.writeText(webhook.url);
873 |                                     toast.info("Copied", {
874 |                                       description:
875 |                                         "Webhook URL copied to clipboard",
876 |                                     });
877 |                                   }}
878 |                                 >
879 |                                   <Copy className="size-4" />
880 |                                 </Button>
881 |                                 <Button
882 |                                   variant="outline"
883 |                                   size="icon"
884 |                                   onClick={() => {
885 |                                     setWebhookUrl(webhook.url);
886 |                                     setActiveTab("message");
887 |                                   }}
888 |                                 >
889 |                                   <Check className="size-4" />
890 |                                 </Button>
891 |                                 <Button
892 |                                   variant="destructive"
893 |                                   size="icon"
894 |                                   onClick={() => deleteWebhook(index)}
895 |                                 >
896 |                                   <Trash2 />
897 |                                 </Button>
898 |                               </div>
899 |                             </div>
900 |                           </CardContent>
901 |                         </Card>
902 |                       ))}
903 |                     </div>
904 |                   </ScrollArea>
905 |                 )}
906 |               </div>
907 |             </CardContent>
908 |           </Card>
909 |         </TabsContent>
910 | 
911 |         <TabsContent value="history" className="space-y-4 mt-4">
912 |           <WebhookHistory history={history} />
913 |         </TabsContent>
914 |       </Tabs>
915 |       <footer className="mt-8 text-right flex justify-end gap-2">
916 |         <Link
917 |           target="_blank"
918 |           href="https://discord.com/servers/uncover-it-1298592315694387220"
919 |           className={buttonVariants({ variant: "outline", size: "icon" })}
920 |         >
921 |           <Image
922 |             src={discord}
923 |             alt="Discord"
924 |             width="19"
925 |             height="19"
926 |             className="dark:brightness-100 brightness-0"
927 |           />
928 |         </Link>
929 |         <Link
930 |           target="_blank"
931 |           href="https://github.com/Uncover-it/webhook-multitool"
932 |           className={buttonVariants({ variant: "outline", size: "icon" })}
933 |         >
934 |           <Image
935 |             src={github}
936 |             alt="GitHub"
937 |             width="19"
938 |             height="19"
939 |             className="dark:brightness-100 brightness-0"
940 |           />
941 |         </Link>
942 |         <Button
943 |           variant="outline"
944 |           size="sm"
945 |           onClick={() =>
946 |             theme === "light" ? setTheme("dark") : setTheme("light")
947 |           }
948 |         >
949 |           <Sun className="dark:hidden block" />
950 |           <MoonStar className="dark:block hidden" />
951 |         </Button>
952 |       </footer>
953 |     </div>
954 |   );
955 | }
956 | 


--------------------------------------------------------------------------------