From fe21cc5c65e4789375abbe9e9273ec08a84d1863 Mon Sep 17 00:00:00 2001
From: typist <git@mail.typist.cc>
Date: Tue, 28 Oct 2025 03:31:45 +0800
Subject: [PATCH 1/5] feat: add Textarea component

- Introduced a new Textarea component for enhanced text input functionality.
- Utilized utility functions for styling and accessibility features.
---
 src/components/ui/textarea.tsx | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 src/components/ui/textarea.tsx

diff --git a/src/components/ui/textarea.tsx b/src/components/ui/textarea.tsx
new file mode 100644
index 0000000..7f21b5e
--- /dev/null
+++ b/src/components/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+function Textarea({ className, ...props }: React.ComponentProps<"textarea">) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        "border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Textarea }
-- 
2.49.1


From cd9e0c1f666e128f85f5375aa94208dd2e9ff7a3 Mon Sep 17 00:00:00 2001
From: typist <git@mail.typist.cc>
Date: Tue, 28 Oct 2025 03:34:08 +0800
Subject: [PATCH 2/5] feat: add Alert component with title and description

- Introduced a new Alert component for displaying notifications.
- Added AlertTitle and AlertDescription subcomponents for structured content.
- Utilized class-variance-authority for styling variants.
---
 src/components/ui/alert.tsx | 66 +++++++++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 src/components/ui/alert.tsx

diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
new file mode 100644
index 0000000..1421354
--- /dev/null
+++ b/src/components/ui/alert.tsx
@@ -0,0 +1,66 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
+  {
+    variants: {
+      variant: {
+        default: "bg-card text-card-foreground",
+        destructive:
+          "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  )
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        "col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        "text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Alert, AlertTitle, AlertDescription }
-- 
2.49.1


From 9009b9a1c69279720a722339c25ba007c813bb9c Mon Sep 17 00:00:00 2001
From: typist <git@mail.typist.cc>
Date: Tue, 28 Oct 2025 03:41:26 +0800
Subject: [PATCH 3/5] feat: add JSON Formatter tool component

- Introduced a new JSON Formatter tool for formatting and validating JSON input.
- Added functionality for minifying and prettifying JSON.
- Updated tools list to include the new JSON Formatter with appropriate icon and description.
---
 src/components/tool/index.tsx | 10 +++++-
 src/components/tool/json.tsx  | 59 +++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/components/tool/json.tsx

diff --git a/src/components/tool/index.tsx b/src/components/tool/index.tsx
index 64aa641..44e56ac 100644
--- a/src/components/tool/index.tsx
+++ b/src/components/tool/index.tsx
@@ -1,7 +1,8 @@
 import type { ReactNode } from 'react';
-import { Hash } from 'lucide-react'
+import { FileJson, Hash } from 'lucide-react'
 
 import UUID from './uuid'
+import JSON from './json'
 
 export interface Tool {
   path: string;
@@ -18,5 +19,12 @@ export const tools: Tool[] = [
     description: "Generate a UUID",
     icon: <Hash />,
     component: <UUID />,
+  },
+  {
+    path: "json",
+    name: "JSON Formatter",
+    description: "Format and validate JSON",
+    icon: <FileJson />,
+    component: <JSON />,
   }
 ];
\ No newline at end of file
diff --git a/src/components/tool/json.tsx b/src/components/tool/json.tsx
new file mode 100644
index 0000000..206c6c5
--- /dev/null
+++ b/src/components/tool/json.tsx
@@ -0,0 +1,59 @@
+import { useState, type FC } from "react";
+import { Textarea } from "@/components/ui/textarea";
+import { Button } from "@/components/ui/button";
+import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+
+const Tool: FC = () => {
+  const [json, setJson] = useState<string>("");
+  const [error, setError] = useState<string>("");
+
+  const validateJson = () => {
+    try {
+      JSON.parse(json);
+      setError("");
+      return true;
+    } catch (error: unknown) {
+      if (error instanceof Error) {
+        setError(error.message);
+      } else {
+        setError("Invalid JSON");
+      }
+      return false;
+    }
+  };
+
+  const minifyJson = () => {
+    if (!validateJson()) return;
+    const formattedJson = JSON.stringify(JSON.parse(json), null, 0);
+    setJson(formattedJson);
+  };
+
+  const prettifyJson = () => {
+    if (!validateJson()) return;
+    const formattedJson = JSON.stringify(JSON.parse(json), null, 2);
+    setJson(formattedJson);
+  };
+
+  return (
+    <div className="h-full flex flex-col gap-4">
+      <Textarea className="flex-1 w-full resize-none" placeholder="Enter your JSON here" value={json} onChange={(e) => {
+        setJson(e.target.value);
+        setError("");
+      }} />
+      <div className="flex flex-row gap-2">
+        <Button onClick={validateJson}>Validate</Button>
+        <Button onClick={minifyJson}>Minify</Button>
+        <Button onClick={prettifyJson}>Pretty</Button>
+      </div>
+
+      {error && (
+        <Alert variant="destructive">
+          <AlertTitle>Error</AlertTitle>
+          <AlertDescription>{error}</AlertDescription>
+        </Alert>
+      )}
+    </div>
+  );
+};
+
+export default Tool;
-- 
2.49.1


From 1bc10d5272601b0eb18c0c19620567c96c6adc91 Mon Sep 17 00:00:00 2001
From: typist <git@mail.typist.cc>
Date: Tue, 28 Oct 2025 03:42:31 +0800
Subject: [PATCH 4/5] feat: add Sonner Toaster component and update
 dependencies

- Introduced a new Toaster component using Sonner for notifications.
- Integrated Toaster into the main application layout.
- Added 'next-themes' and 'sonner' dependencies in package.json and updated pnpm-lock.yaml.
---
 package.json                 |  2 ++
 pnpm-lock.yaml               | 28 ++++++++++++++++++++++++++
 src/components/ui/sonner.tsx | 38 ++++++++++++++++++++++++++++++++++++
 src/main.tsx                 |  4 ++++
 4 files changed, 72 insertions(+)
 create mode 100644 src/components/ui/sonner.tsx

diff --git a/package.json b/package.json
index 019aa26..9b221bc 100644
--- a/package.json
+++ b/package.json
@@ -19,9 +19,11 @@
     "clsx": "^2.1.1",
     "lucide-react": "^0.548.0",
     "nanoid": "^5.1.6",
+    "next-themes": "^0.4.6",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router-dom": "^7.9.4",
+    "sonner": "^2.0.7",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.16",
     "uuid": "^13.0.0"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index bca26d2..b195b49 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       nanoid:
         specifier: ^5.1.6
         version: 5.1.6
+      next-themes:
+        specifier: ^0.4.6
+        version: 0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       react:
         specifier: ^19.1.1
         version: 19.2.0
@@ -47,6 +50,9 @@ importers:
       react-router-dom:
         specifier: ^7.9.4
         version: 7.9.4(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
+      sonner:
+        specifier: ^2.0.7
+        version: 2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0)
       tailwind-merge:
         specifier: ^3.3.1
         version: 3.3.1
@@ -1280,6 +1286,12 @@ packages:
   natural-compare@1.4.0:
     resolution: {integrity: sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==}
 
+  next-themes@0.4.6:
+    resolution: {integrity: sha512-pZvgD5L0IEvX5/9GWyHMf3m8BKiVQwsCMHfoFosXtXBMnaS0ZnIJ9ST4b4NqLVKDEm8QBxoNNGNaBv2JNF6XNA==}
+    peerDependencies:
+      react: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+      react-dom: ^16.8 || ^17 || ^18 || ^19 || ^19.0.0-rc
+
   node-releases@2.0.26:
     resolution: {integrity: sha512-S2M9YimhSjBSvYnlr5/+umAnPHE++ODwt5e2Ij6FoX45HA/s4vHdkDx1eax2pAPeAOqu4s9b7ppahsyEFdVqQA==}
 
@@ -1472,6 +1484,12 @@ packages:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
 
+  sonner@2.0.7:
+    resolution: {integrity: sha512-W6ZN4p58k8aDKA4XPcx2hpIQXBRAgyiWVkYhT7CvK6D3iAu7xjvVyhQHg2/iaKJZ1XVJ4r7XuwGL+WGEK37i9w==}
+    peerDependencies:
+      react: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+      react-dom: ^18.0.0 || ^19.0.0 || ^19.0.0-rc
+
   source-map-js@1.2.1:
     resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==}
     engines: {node: '>=0.10.0'}
@@ -2702,6 +2720,11 @@ snapshots:
 
   natural-compare@1.4.0: {}
 
+  next-themes@0.4.6(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
   node-releases@2.0.26: {}
 
   optionator@0.9.4:
@@ -2854,6 +2877,11 @@ snapshots:
 
   shebang-regex@3.0.0: {}
 
+  sonner@2.0.7(react-dom@19.2.0(react@19.2.0))(react@19.2.0):
+    dependencies:
+      react: 19.2.0
+      react-dom: 19.2.0(react@19.2.0)
+
   source-map-js@1.2.1: {}
 
   strip-json-comments@3.1.1: {}
diff --git a/src/components/ui/sonner.tsx b/src/components/ui/sonner.tsx
new file mode 100644
index 0000000..9f46e06
--- /dev/null
+++ b/src/components/ui/sonner.tsx
@@ -0,0 +1,38 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  )
+}
+
+export { Toaster }
diff --git a/src/main.tsx b/src/main.tsx
index 72ea416..b5a9d99 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,14 @@
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
+
+import { Toaster } from '@/components/ui/sonner'
+
 import './index.css'
 import { AppRouter } from './router'
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
     <AppRouter />
+    <Toaster />
   </StrictMode>
 )
-- 
2.49.1


From 3aa825d75bd9eb59eae69038b77d45bd250c394c Mon Sep 17 00:00:00 2001
From: typist <git@mail.typist.cc>
Date: Tue, 28 Oct 2025 03:45:11 +0800
Subject: [PATCH 5/5] feat: integrate Sonner for error handling in JSON tool

- Replaced error state management with Sonner toast notifications for JSON validation feedback.
- Added success notifications for minifying and prettifying JSON.
- Cleaned up the code by removing the Alert component related to error display.
---
 src/components/tool/json.tsx | 22 ++++++----------------
 1 file changed, 6 insertions(+), 16 deletions(-)

diff --git a/src/components/tool/json.tsx b/src/components/tool/json.tsx
index 206c6c5..d7760a5 100644
--- a/src/components/tool/json.tsx
+++ b/src/components/tool/json.tsx
@@ -2,21 +2,20 @@ import { useState, type FC } from "react";
 import { Textarea } from "@/components/ui/textarea";
 import { Button } from "@/components/ui/button";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
+import { toast } from "sonner";
 
 const Tool: FC = () => {
   const [json, setJson] = useState<string>("");
-  const [error, setError] = useState<string>("");
 
   const validateJson = () => {
     try {
       JSON.parse(json);
-      setError("");
       return true;
     } catch (error: unknown) {
       if (error instanceof Error) {
-        setError(error.message);
+        toast.error(error.message);
       } else {
-        setError("Invalid JSON");
+        toast.error("Invalid JSON");
       }
       return false;
     }
@@ -26,32 +25,23 @@ const Tool: FC = () => {
     if (!validateJson()) return;
     const formattedJson = JSON.stringify(JSON.parse(json), null, 0);
     setJson(formattedJson);
+    toast.success("Minified successfully");
   };
 
   const prettifyJson = () => {
     if (!validateJson()) return;
     const formattedJson = JSON.stringify(JSON.parse(json), null, 2);
     setJson(formattedJson);
+    toast.success("JSON prettified successfully");
   };
 
   return (
     <div className="h-full flex flex-col gap-4">
-      <Textarea className="flex-1 w-full resize-none" placeholder="Enter your JSON here" value={json} onChange={(e) => {
-        setJson(e.target.value);
-        setError("");
-      }} />
+      <Textarea className="flex-1 w-full resize-none" placeholder="Enter your JSON here" value={json} onChange={(e) => setJson(e.target.value)} />
       <div className="flex flex-row gap-2">
-        <Button onClick={validateJson}>Validate</Button>
         <Button onClick={minifyJson}>Minify</Button>
         <Button onClick={prettifyJson}>Pretty</Button>
       </div>
-
-      {error && (
-        <Alert variant="destructive">
-          <AlertTitle>Error</AlertTitle>
-          <AlertDescription>{error}</AlertDescription>
-        </Alert>
-      )}
     </div>
   );
 };
-- 
2.49.1