feat(add): add validator and more (#14)

Author: CodeMeAPixel

CHANGELOG.md

@@ -5,6 +5,44 @@ All notable changes to FixFX will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.2.0] - 2026-02-14
+
+### Added
+
+#### JSON Validator
+
+- **Validator Page** (`/validator`) - Full-featured JSON validator with txAdmin support
+  - Generic JSON syntax validation with formatted output
+  - txAdmin Discord embed JSON validation with field-level issue reporting
+  - txAdmin embed config JSON validation (status strings, colors, buttons)
+  - Collapsible sidebar with validation mode selector, quick templates, and txAdmin placeholder reference
+  - Click-to-insert txAdmin placeholders (`{{serverName}}`, `{{statusString}}`, etc.)
+  - Format/prettify and clear actions with keyboard shortcut (Ctrl+Enter)
+  - Client-side fallback validation when the backend API is unreachable
+  - Mobile-responsive layout with dropdown validation type selector
+  - Suspense loading state with progress indicator
+- **Validator Layout** - SEO metadata for `/validator` with Open Graph tags
+- **Navigation** - Added JSON Validator to the Resources menu in the nav bar with Braces icon
+- **API Route Documentation** - Added validator endpoint to the API index route
+
+### Changed
+
+#### Data Fetching & Artifacts
+
+- **`useFetch` Hook** - Migrated from manual `useState`/`useEffect`/`AbortController` to TanStack Query (`useQuery`)
+  - Automatic request deduplication, caching, and background refetching
+  - Simplified error handling with typed errors (`E = Error`)
+  - Query keys derived from URL and dependency array for proper cache invalidation
+  - Removed manual abort controller management (handled by TanStack Query)
+- **`GitHubFetcher`** - Migrated from Axios to native `fetch` API
+  - Removed `axios` dependency entirely
+  - Consolidated request logic into a single private `request<T>()` method
+  - Uses native `AbortController` with configurable timeout
+  - Proper rate limit tracking via `Headers.get()` instead of raw header objects
+  - Improved error handling for 304 Not Modified responses
+  - Cleaner POST/PUT/DELETE methods delegating to the shared request method
+- **Query Provider** - Added TanStack Query provider for `useFetch` integration
+
 ## [1.1.0] - 2026-01-26
 
 ### Added

app/api/route.ts

@@ -19,6 +19,11 @@ export async function GET() {
         path: "/api/artifacts?platform=windows&product=fivem",
         description: "FiveM/RedM server artifacts",
       },
+      {
+        name: "validator",
+        path: "/api/validator/validate",
+        description: "JSON validator with txAdmin embed support",
+      },
     ],
   });
 }

app/layout.config.tsx

@@ -11,6 +11,7 @@ import {
   X,
   Server,
   Palette,
+  Braces,
 } from "lucide-react";
 
 export const baseOptions: HomeLayoutProps = {
@@ -258,6 +259,23 @@ export const baseOptions: HomeLayoutProps = {
             "Download official FixFX logos, icons, and brand guidelines.",
           url: "/brand",
         },
+        {
+          menu: {
+            banner: (
+              <div className="flex h-20 w-full items-center justify-center gap-x-1">
+                <FixFXIcon className="size-6" stroke="#f59e0b" />
+                <h1 className="text-fd-foreground text-2xl font-bold">
+                  JSON Validator
+                </h1>
+              </div>
+            ),
+          },
+          icon: <Braces className="size-6" stroke="#f59e0b" />,
+          text: "JSON Validator",
+          description:
+            "Validate JSON syntax and txAdmin Discord bot embed configurations.",
+          url: "/validator",
+        },
       ],
     },
   ],

app/validator/layout.tsx

@@ -0,0 +1,34 @@
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "JSON Validator | FixFX",
+  description:
+    "Validate JSON syntax and txAdmin Discord bot embed configurations. Check your embed JSON and config JSON for errors before deploying.",
+  keywords: [
+    "JSON validator",
+    "txAdmin",
+    "Discord embed",
+    "FiveM",
+    "txAdmin Discord bot",
+    "embed config",
+    "JSON syntax checker",
+  ],
+  alternates: {
+    canonical: "https://fixfx.wiki/validator",
+  },
+  openGraph: {
+    title: "JSON Validator | FixFX",
+    description:
+      "Validate JSON syntax and txAdmin Discord bot embed configurations.",
+    url: "https://fixfx.wiki/validator",
+    type: "website",
+  },
+};
+
+export default function ValidatorLayout({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  return <div className="h-screen overflow-hidden">{children}</div>;
+}

app/validator/page.tsx

@@ -0,0 +1,27 @@
+"use client";
+
+import { Suspense } from "react";
+import { ValidatorContent } from "@ui/core/validator/validator-content";
+import { Card } from "@ui/components/card";
+import { Progress } from "@ui/components/progress";
+
+export default function ValidatorPage() {
+  return (
+    <Suspense
+      fallback={
+        <div className="flex items-center justify-center min-h-screen">
+          <Card className="p-8 w-full max-w-md mx-4">
+            <Progress value={undefined} className="w-full" />
+            <p className="text-center mt-4 text-muted-foreground">
+              Loading validator...
+            </p>
+          </Card>
+        </div>
+      }
+    >
+      <ValidatorContent />
+    </Suspense>
+  );
+}
+
+export const dynamic = "force-dynamic";