chore: version upgrade v3.2.0

feat: add go struct generator

.dockerignore

@@ -0,0 +1,14 @@
+# Ignore node modules as they will be installed in the Dockerfile
+node_modules/
+
+# Ignore local configuration and cache files
+.cache/
+.config/
+.DS_Store
+
+# Ignore logs
+*.log
+
+# Ignore test and development files
+*.md
+*.test.js

.env.development

@@ -1,3 +1,5 @@
 NEXT_PUBLIC_BASE_URL=http://localhost:3000
-NEXT_PUBLIC_ALTOGIC_ENV_URL=https://jsoncrack.c5-na.altogic.com
-NEXT_PUBLIC_ALTOGIC_CLIENT_KEY=f1e92022789f4ccf91273a345ab2bdf8
+NEXT_PUBLIC_PAYMENT_URL=https://herowand.lemonsqueezy.com/checkout/buy/ce30521f-c7cc-44f3-9435-995d3260ba22
+NEXT_PUBLIC_GA_ID=G-JKZEHMJBMH
+NEXT_PUBLIC_SUPABASE_URL=https://bxkgqurwqjmvrqekcbws.supabase.co
+NEXT_PUBLIC_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJ4a2dxdXJ3cWptdnJxZWtjYndzIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTA2NDU0MjUsImV4cCI6MjAwNjIyMTQyNX0.3nZ0yhuFjnI3yHbAL8S9UtK-Ny-6F5AylNHgo1tymTU

.env.production

@@ -1,3 +1,5 @@
 NEXT_PUBLIC_BASE_URL=https://jsoncrack.com
-NEXT_PUBLIC_ALTOGIC_ENV_URL=https://jsoncrack.c5-na.altogic.com
-NEXT_PUBLIC_ALTOGIC_CLIENT_KEY=f1e92022789f4ccf91273a345ab2bdf8
+NEXT_PUBLIC_PAYMENT_URL=https://herowand.lemonsqueezy.com/checkout/buy/ce30521f-c7cc-44f3-9435-995d3260ba22
+NEXT_PUBLIC_GA_ID=G-JKZEHMJBMH
+NEXT_PUBLIC_SUPABASE_URL=https://bxkgqurwqjmvrqekcbws.supabase.co
+NEXT_PUBLIC_SUPABASE_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6ImJ4a2dxdXJ3cWptdnJxZWtjYndzIiwicm9sZSI6ImFub24iLCJpYXQiOjE2OTA2NDU0MjUsImV4cCI6MjAwNjIyMTQyNX0.3nZ0yhuFjnI3yHbAL8S9UtK-Ny-6F5AylNHgo1tymTU

.eslintrc.json

@@ -1,8 +1,27 @@
 {
   "rules": {
     "@next/next/no-img-element": "off",
-    "unused-imports/no-unused-imports": "error"
+    "unused-imports/no-unused-imports": "error",
+    "prettier/prettier": "error",
+    "space-in-parens": "error",
+    "no-empty": "error",
+    "no-multiple-empty-lines": "error",
+    "no-irregular-whitespace": "error",
+    "strict": ["error", "never"],
+    "linebreak-style": ["error", "unix"],
+    "quotes": ["error", "double", { "avoidEscape": true }],
+    "semi": ["error", "always"],
+    "prefer-const": "error",
+    "space-before-function-paren": [
+      "error",
+      {
+        "anonymous": "always",
+        "named": "never",
+        "asyncArrow": "always"
+      }
+    ]
   },
-  "extends": ["next/core-web-vitals"],
-  "plugins": ["unused-imports"]
+  "extends": ["next/core-web-vitals", "prettier"],
+  "plugins": ["prettier", "unused-imports"],
+  "ignorePatterns": ["src/enums"]
 }

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -25,7 +25,6 @@ body:
     attributes:
       label: Media & Screenshots
       description: Include screenshots or video of reproduction as much as possible
-      render: md
   - type: textarea
     id: os
     attributes:

.github/workflows/deploy.yml

@@ -1,56 +1,39 @@
-# Sample workflow for building and deploying a Next.js site to GitHub Pages
-#
-# To get started with Next.js see: https://nextjs.org/docs/getting-started
-#
 name: Deploy Next.js site to Pages
 
 on:
-  # Runs on pushes targeting the default branch
   push:
     branches: ["main"]
 
-  # Allows you to run this workflow manually from the Actions tab
   workflow_dispatch:
 
-# Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages
 permissions:
   contents: read
   pages: write
   id-token: write
 
-# Allow one concurrent deployment
 concurrency:
   group: "pages"
   cancel-in-progress: true
 
 jobs:
-  # Build job
   build:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
       - name: Detect package manager
         id: detect-package-manager
         run: |
-          if [ -f "${{ github.workspace }}/yarn.lock" ]; then
-            echo "manager=yarn" >> $GITHUB_OUTPUT
-            echo "command=install --frozen-lockfile" >> $GITHUB_OUTPUT
-            echo "runner=yarn" >> $GITHUB_OUTPUT
-            exit 0
-          elif [ -f "${{ github.workspace }}/package.json" ]; then
-            echo "manager=npm" >> $GITHUB_OUTPUT
-            echo "command=ci" >> $GITHUB_OUTPUT
-            echo "runner=npx --no-install" >> $GITHUB_OUTPUT
-            exit 0
-          else
-            echo "Unable to determine packager manager"
-            exit 1
-          fi
+          echo "manager=yarn" >> $GITHUB_OUTPUT
+          echo "command=install --frozen-lockfile" >> $GITHUB_OUTPUT
+          echo "runner=yarn" >> $GITHUB_OUTPUT
+          exit 0
       - name: Setup Node
         uses: actions/setup-node@v3
         with:
-          node-version: "16"
+          node-version: "18"
           cache: ${{ steps.detect-package-manager.outputs.manager }}
       - name: Cache node_modules
         uses: actions/cache@v3
@@ -63,31 +46,63 @@ jobs:
       - name: Setup Pages
         uses: actions/configure-pages@v3
         with:
-          # Automatically inject basePath in your Next.js configuration file and disable
-          # server side image optimization (https://nextjs.org/docs/api-reference/next/image#unoptimized).
-          #
-          # You may remove this line if you want to manage the configuration yourself.
           static_site_generator: next
       - name: Restore cache
         uses: actions/cache@v3
         with:
           path: |
             .next/cache
-          # Generate a new cache whenever packages or source files change.
           key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
-          # If source files changed but packages didn't, rebuild from a prior cache.
           restore-keys: |
             ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-
       - name: Install dependencies
         run: ${{ steps.detect-package-manager.outputs.manager }} ${{ steps.detect-package-manager.outputs.command }}
       - name: Build with Next.js
         run: ${{ steps.detect-package-manager.outputs.runner }} next build
-      - name: Static HTML export with Next.js
-        run: ${{ steps.detect-package-manager.outputs.runner }} next export
+      - name: Upload Build Artifacts
+        uses: actions/upload-artifact@v2
+        with:
+          name: build-files
+          path: ./out/_next/static/chunks
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v1
         with:
-          path: ./out
+          path: './out'
+
+
+  # Sentry job
+  sentry: 
+    needs: build
+    runs-on: ubuntu-latest
+    env:
+      SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+      SENTRY_ORG: ${{ secrets.SENTRY_ORG }}
+      SENTRY_PROJECT: ${{ secrets.SENTRY_PROJECT }}
+      SENTRY_RELEASE: ${{ github.sha }}
+      SENTRY_SOURCEMAP_PATH: "./"
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      - uses: actions/download-artifact@v2
+        with:
+          name: build-files
+      - name: Download sentry-cli
+        run: curl -sL https://sentry.io/get-cli/ | SENTRY_CLI_VERSION="2.20.0" sh
+      - name: Create Release
+        run: sentry-cli releases new $SENTRY_RELEASE
+      - name: Inject Debug IDs to source files
+        run: sentry-cli sourcemaps inject $SENTRY_SOURCEMAP_PATH
+      - name: Upload Source Files
+        run: sentry-cli sourcemaps upload --validate -r=$SENTRY_RELEASE $SENTRY_SOURCEMAP_PATH
+      - name: Set Release Commits
+        run: sentry-cli releases set-commits $SENTRY_RELEASE --auto
+      - name: Deploy to Sentry
+        run: sentry-cli releases deploys $SENTRY_RELEASE new -e production
+      - name: Finalize Sentry Release
+        run: sentry-cli releases finalize $SENTRY_RELEASE
+          
 
   # Deployment job
   deploy:
@@ -100,3 +115,4 @@ jobs:
       - name: Deploy to GitHub Pages
         id: deployment
         uses: actions/deploy-pages@v1
+

.github/workflows/pull-request.yml

@@ -6,12 +6,10 @@ on:
 
 jobs:
   build:
-
     runs-on: ubuntu-latest
-
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [18.x]
         # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
 
     steps:
@@ -20,7 +18,7 @@ jobs:
       uses: actions/setup-node@v3
       with:
         node-version: ${{ matrix.node-version }}
-        cache: 'npm'
-    - run: npm install
-    - run: npm run lint
-    - run: npm run build
+        cache: 'yarn'
+    - run: yarn install
+    - run: yarn lint
+    - run: yarn build

.gitignore

@@ -39,4 +39,8 @@ yarn-error.log*
 # PWA workers
 **/public/workbox-*.js
 **/public/sw.js
-**/public/fallback-*.js
+**/public/fallback-*.js
+# Sentry Auth Token
+.sentryclirc
+
+/src/migration

.npmrc

@@ -1 +0,0 @@
-legacy-peer-deps=true

.prettierignore

@@ -4,4 +4,4 @@ node_modules/
 out
 public
 *-lock.json
-tsconfig.json
+tsconfig.json

.prettierrc

@@ -7,11 +7,11 @@
   "importOrder": [
     "^(react/(.*)$)|^(react$)",
     "^(next/(.*)$)|^(next$)",
+    "styled",
     "<THIRD_PARTY_MODULES>",
-    "^components/(.*)$",
-    "^utils/(.*)$",
-    "^assets/(.*)$",
+    "^src/(.*)$",
     "^[./]"
   ],
-  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"]
+  "importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
+  "plugins": ["@trivago/prettier-plugin-sort-imports"]
 }

CONTRIBUTING.md

@@ -7,13 +7,12 @@ Read our [Code of Conduct](./CODE_OF_CONDUCT.md) to keep our community approacha
 In this guide you will get an overview of the contribution workflow from opening an issue, creating a PR, reviewing, and merging the PR.
 
 ## Getting Started
-JSON Crack is built with React, Reaflow for visualization, Mantine UI for components, Zustand for state management, and Altogic for backend integration. If you are not familiar with these technologies, we recommend you to read their documentation to get started. You can find the links to the respective documentations below:
+JSON Crack is built with React, Reaflow for visualization, Mantine UI for components, Zustand for state management, and Supabase for backend integration. If you are not familiar with these technologies, we recommend you to read their documentation to get started. You can find the links to the respective documentations below:
 
 * [React](https://reactjs.org/docs/getting-started.html)
 * [Reaflow](https://github.com/reaviz/reaflow)
 * [Mantine UI](https://mantine.dev/)
 * [Zustand](https://github.com/pmndrs/zustand)
-* [Altogic](https://www.altogic.com/)
 
 Once you are familiar with these technologies, you can clone the JSON Crack repository by running the following command:
 

Dockerfile

@@ -1,8 +1,14 @@
 # Builder
-FROM node:14-alpine as builder
+FROM node:18-alpine as builder
 WORKDIR /src
+
+# Cache dependencies first
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Copy other files and build
 COPY . /src/
-RUN yarn install --frozen-lockfile && yarn build
+RUN yarn build
 
 # App
 FROM nginxinc/nginx-unprivileged

LICENSE

@@ -631,8 +631,8 @@ to attach them to the start of each source file to most effectively
 state the exclusion of warranty; and each file should have at least
 the "copyright" line and a pointer to where the full notice is found.
 
-    <one line to give the program's name and a brief idea of what it does.>
-    Copyright (C) <year>  <name of author>
+    JSON Crack
+    Copyright (C) 2023 Aykut Saraç
 
     This program is free software: you can redistribute it and/or modify
     it under the terms of the GNU General Public License as published by
@@ -652,7 +652,7 @@ Also add information on how to contact you by electronic and paper mail.
   If the program does terminal interaction, make it output a short
 notice like this when it starts in an interactive mode:
 
-    <program>  Copyright (C) <year>  <name of author>
+    JSON Crack  Copyright (C) 2023  Aykut Saraç
     This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
     This is free software, and you are welcome to redistribute it
     under certain conditions; type `show c' for details.

README.md

@@ -1,58 +1,92 @@
-<div align="center" style="display:flex;flex-direction:column;">
-  <a href="https://jsoncrack.com">
-    <img width="700" alt="jsoncrack" src="https://user-images.githubusercontent.com/47941171/206401172-74c21f7f-0a32-4532-96cc-4cf6b493c837.png">
-  </a>
-  <h3>“Explore, analyze and understand even most complex JSON structures.”</br>Unlock the full potential of your data.</h3>
-  <p align="center">
+<a href="https://jsoncrack.com/" target="_blank" rel="noopener">
+    <img alt="JSON Crack" w src="https://user-images.githubusercontent.com/47941171/236689277-0fa9e50a-3106-4854-a2d4-bb5722f16d48.png" />
+</a>
+
+
+<h4 align="center">
+  <a href="https://jsoncrack.com">JSON Crack</a> |
+  <a href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode">VS Code Extension</a> |
+  <a href="https://jsoncrack.com/docs">Documentation</a> 
+</h4>
+
+<div align="center">
+  <h2>
+    An innovative, open source data visualization app.
+    <br />
+    Brings data to life through captivating graphs.
+  </h2>
+</div>
+
+<br />
+<p align="center">
   <a href="https://www.producthunt.com/posts/json-crack?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-json&#0045;crack" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=332281&theme=light" alt="JSON&#0032;Crack - Simple&#0032;visualization&#0032;tool&#0032;for&#0032;your&#0032;JSON&#0032;data&#0046; | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
     <a href="https://discord.gg/yVyTtCRueq" target="_blank"><img src="https://user-images.githubusercontent.com/47941171/206397224-94da03a4-59d0-48cd-aafc-512624a768d6.png" "style=" height: 54px;" height="54" /></a>
     </br>
     <a href="https://github.com/sponsors/AykutSarac" target="_blank"><img src="https://user-images.githubusercontent.com/47941171/206397875-a4e73f02-5d8f-4db0-902b-9a4bc2b22d90.png" "style=" height: 54px;" height="54" /></a>
   </p>
-</div>
 
-  <p align="center">
-      <img width="800" src="./public/assets/jsoncrack-screenshot.webp" alt="preview 1" />
-  </p>
+<p align="center">
+  <img src="./public/assets/jsoncrack-screenshot.webp" alt="Product Preview" />
+</p>
 
 # JSON Crack (jsoncrack.com)
 
-Introducing JSON Crack – the open-source, free JSON visualization app that will revolutionize the way you work with data. With its intuitive and user-friendly interface, JSON Crack makes it easy to explore, analyze, and understand even the most complex JSON structures. Whether you're a developer working on a large-scale project or a data enthusiast looking to uncover hidden insights, JSON Crack has the tools and features you need to unlock the full potential of your data. Best of all, because JSON Crack is open-source and free, you can use it without breaking the bank. Try JSON Crack today and experience the power of data visualization like never before.
+JSON Crack is a free, open-source data visualization app capable of visualizing data formats such as JSON, YAML, XML, CSV and more, into interactive graphs. With its intuitive and user-friendly interface, JSON Crack makes it easy to explore, analyze, and understand even the most complex data structures. Whether you're a developer working on a large-scale project or a data enthusiast looking to uncover hidden insights, JSON Crack has the tools and features you need to unlock the full potential of your data.
 
-> <b><a href="https://jsoncrack.com">JSON Crack - Crack your data into pieces</a></b>
+## Features
+- 💯 Free & open-source.
+- 🌓 Dark mode.
+- 🖼️ Export to PNG, SVG, JPEG & clipboard.
+- 🔍 Zoom and panning support with touch gestures.
+- 🛠 Wide range of tools - search, json path, node contents, expand/toggle, auto format...
+- 🔗 Share/Import/Fetch
+- 🧱 Embeddable iframe widgets.
 
-## ⚡️ Key Features
+## Contributing
 
-- Search Nodes
-- Share links & Create Embed Widgets
-- Download/Clipboard as image
-- Upload JSON locally or fetch from URL
-- User-friendly Interface
-- Light/Dark Mode
+- Missing something or found a bug? [Report here](https://github.com/AykutSarac/jsoncrack.com/issues).
+- Want to contribute? Check out our [contribution guide](https://github.com/AykutSarac/jsoncrack.com/blob/main/CONTRIBUTING.md) or let us know on [Discord](https://discord.gg/yVyTtCRueq).
 
-## ⭐️ Embedding Into Your Website
+## Sponsors & support
 
-You can use the JSON Crack to visualize your JSON **at your products or websites**, see our very simple guide: https://jsoncrack.com/docs
-You can choose to **[partner us](https://github.com/sponsors/AykutSarac)** to remove attribute for your commercial products.
+If you like the project, you can become a sponsor at [GitHub Sponsors](https://github.com/sponsors/AykutSarac) or use [Premium](https://jsoncrack.com/pricing).
 
-<img width="291" alt="Screenshot_2022-12-08_at_11 46 02-removebg-preview" src="https://user-images.githubusercontent.com/47941171/206400503-150f60b6-f4b3-4649-854d-be4a7b826275.png">
-
-## 🛠 Development Setup
+## Running Locally
+ 
+### Local
 
+After cloning the repository, run the following commands:
 ```console
-  npm install
-  npm run dev
+# Install the packages
+yarn install
+
+# Start development server
+# Then the development server will run at http://localhost:3000
+yarn dev
 ```
 
-## 🐳 Docker
+### Docker
 
-A [`Dockerfile`](Dockerfile) is provided in the root of the repository.
+🐳 A [`Dockerfile`](Dockerfile) is provided in the root of the repository.
 If you want to run JSON Crack locally:
 
-* Build a Docker image with `docker build -t jsoncrack .`
-* Run locally with `docker run -p 8888:8080 jsoncrack`
-* Go to http://localhost:8888
+```console
+# Build a Docker image with:
+docker build -t jsoncrack .
 
-## License
+# Run locally with `docker run`
+docker run -p 8888:8080 jsoncrack
 
-This project is open source and available under the [GNU General Public License v3.0](LICENSE).
+# Run locally with `docker-compose`
+docker-compose up -d
+
+# Go to http://localhost:8888
+```
+
+## Thank you for supporting JSON Crack
+
+Last but not least, we're thankful to these companies for offering their services for free:
+
+<a href="https://sentry.io">
+  <img height="30" src="https://user-images.githubusercontent.com/47941171/236691121-717c7975-809f-4508-b58e-5ada2f7e8c7c.png" alt="Sentry" />
+</a>

default.conf

@@ -14,4 +14,25 @@ server {
     location /embed {
         try_files $uri /embed.html;
     }
+
+
+    location /docs {
+        try_files $uri /docs.html;
+    }
+
+    location /oss {
+        try_files $uri /oss.html;
+    }
+
+    location /pricing {
+        try_files $uri /pricing.html;
+    }
+
+    location /forgot-password {
+        try_files $uri /forgot-password.html;
+    }
+
+    location /sign-in {
+        try_files $uri /sign-in.html;
+    }
 }

docker-compose.yml

@@ -0,0 +1,10 @@
+version: '3.9'
+services:
+  jsoncrack:
+    image: jsoncrack
+    container_name: jsoncrack
+    build: 
+      context: .
+      dockerfile: Dockerfile
+    ports:
+      - "8888:8080"

next.config.js

@@ -1,19 +1,40 @@
-const withBundleAnalyzer =
-  process.env.ANALYZE === "true"
-    ? require("@next/bundle-analyzer")({
-        enabled: process.env.ANALYZE === "true",
-      })()
-    : x => x;
+const { withSentryConfig } = require("@sentry/nextjs");
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
+});
 
 /**
  * @type {import('next').NextConfig}
  */
 const config = {
+  output: "export",
   reactStrictMode: false,
   productionBrowserSourceMaps: true,
   compiler: {
     styledComponents: true,
   },
+  webpack: config => {
+    config.resolve.fallback = { fs: false };
+
+    return config;
+  },
 };
 
-module.exports = withBundleAnalyzer(config);
+const bundleAnalyzerConfig = withBundleAnalyzer(config);
+
+const sentryConfig = withSentryConfig(
+  config,
+  {
+    silent: true,
+    org: "aykut-sarac",
+    project: "json-crack",
+  },
+  {
+    widenClientFileUpload: true,
+    hideSourceMaps: true,
+    disableLogger: true,
+    disableServerWebpackPlugin: true,
+  }
+);
+
+module.exports = process.env.ANALYZE === "true" ? bundleAnalyzerConfig : sentryConfig;

package.json

@@ -1,64 +1,80 @@
 {
   "name": "json-crack",
   "private": true,
-  "version": "v2.8.0",
+  "version": "v3.2.0",
+  "license": "GPL-3.0",
   "author": "https://github.com/AykutSarac",
   "homepage": "https://jsoncrack.com",
   "scripts": {
     "dev": "next dev",
-    "build": "next build && next export",
+    "build": "next build",
     "start": "next start",
-    "lint": "tsc && next lint",
-    "lint:fix": "prettier --write \"./**/*.{ts,tsx,json}\"",
-    "deploy": "gh-pages -d out -t true"
+    "lint": "tsc --project tsconfig.json && eslint src && prettier --check src",
+    "lint:fix": "eslint --fix src & prettier --write src",
+    "analyze": "ANALYZE=true npm run build"
   },
   "dependencies": {
-    "@emotion/react": "^11.10.6",
-    "@emotion/server": "^11.10.0",
-    "@mantine/core": "^6.0.1",
-    "@mantine/hooks": "^6.0.1",
-    "@mantine/next": "^6.0.1",
-    "@mantine/prism": "^6.0.1",
-    "@monaco-editor/react": "^4.4.6",
-    "@sentry/nextjs": "^7.42.0",
-    "@tanstack/react-query": "^4.26.1",
-    "allotment": "^1.18.1",
-    "altogic": "^2.3.9",
-    "axios": "^1.3.4",
-    "dayjs": "^1.11.7",
+    "@emotion/react": "^11.11.1",
+    "@emotion/server": "^11.11.0",
+    "@mantine/core": "^6.0.17",
+    "@mantine/hooks": "^6.0.17",
+    "@mantine/next": "^6.0.21",
+    "@mantine/prism": "^6.0.21",
+    "@monaco-editor/react": "^4.5.2",
+    "@sentry/nextjs": "^7.72.0",
+    "@supabase/auth-helpers-nextjs": "^0.8.1",
+    "@supabase/auth-helpers-react": "^0.4.2",
+    "@supabase/supabase-js": "^2.36.0",
+    "@tanstack/react-query": "^4.35.3",
+    "allotment": "^1.19.3",
+    "axios": "^1.5.0",
+    "dayjs": "^1.11.10",
+    "gofmt.js": "^0.0.2",
     "html-to-image": "^1.11.11",
+    "jq-in-the-browser": "^0.7.2",
+    "jq-web": "^0.5.1",
+    "json-2-csv": "^5.0.1",
+    "json-to-ts": "^1.7.0",
     "jsonc-parser": "^3.2.0",
+    "jsonwebtoken": "^9.0.2",
+    "jxon": "^2.0.0-beta.5",
     "lodash.debounce": "^4.0.8",
-    "lz-string": "^1.5.0",
-    "next": "^13.2.3",
+    "lodash.get": "^4.4.2",
+    "lodash.set": "^4.3.2",
+    "maketypes": "^1.1.2",
+    "next": "13.4.12",
     "react": "^18.2.0",
-    "react-color": "^2.19.3",
     "react-dom": "^18.2.0",
-    "react-hot-toast": "^2.4.0",
-    "react-icons": "^4.8.0",
+    "react-ga4": "^2.1.0",
+    "react-hot-toast": "^2.4.1",
+    "react-icons": "^4.12.0",
+    "react-json-tree": "^0.18.0",
     "react-linkify-it": "^1.0.7",
-    "react-syntax-highlighter": "^15.5.0",
-    "react-zoom-pan-pinch": "^3.0.2",
-    "reaflow": "^5.1.2",
-    "styled-components": "^5.3.8",
-    "zustand": "^4.3.6"
+    "react-simple-typewriter": "^5.0.1",
+    "react-zoomable-ui": "^0.11.0",
+    "reaflow": "5.2.8",
+    "styled-components": "^6.1.1",
+    "toml": "^3.0.0",
+    "use-long-press": "^3.1.5",
+    "zustand": "^4.4.7"
   },
   "devDependencies": {
-    "@next/bundle-analyzer": "^13.2.3",
-    "@testing-library/react": "^14.0.0",
-    "@trivago/prettier-plugin-sort-imports": "^4.1.1",
-    "@types/lodash.debounce": "^4.0.7",
-    "@types/lz-string": "^1.3.34",
-    "@types/node": "^18.15.0",
-    "@types/react": "18.0.28",
-    "@types/react-color": "^3.0.6",
-    "@types/react-syntax-highlighter": "^15.5.6",
-    "@types/styled-components": "^5.1.26",
-    "eslint": "8.35.0",
-    "eslint-config-next": "13.2.3",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "prettier": "^2.8.4",
+    "@next/bundle-analyzer": "^13.4.12",
+    "@trivago/prettier-plugin-sort-imports": "^4.3.0",
+    "@types/jsonwebtoken": "^9.0.5",
+    "@types/jxon": "^2.0.5",
+    "@types/lodash.debounce": "^4.0.9",
+    "@types/lodash.get": "^4.4.9",
+    "@types/lodash.set": "^4.3.9",
+    "@types/node": "^20.4.7",
+    "@types/react": "18.2.18",
+    "eslint": "8.56.0",
+    "eslint-config-next": "13.4.12",
+    "eslint-config-prettier": "^8.10.0",
+    "eslint-plugin-prettier": "^5.0.0",
+    "eslint-plugin-unused-imports": "^3.0.0",
+    "prettier": "^3.1.1",
     "ts-node": "^10.9.1",
-    "typescript": "4.9.5"
+    "typescript": "5.1.6"
   }
 }

public/assets/taken.svg

@@ -0,0 +1,229 @@
+ <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
+<svg id="ab01b6ca-fda4-4c55-a447-43113c79b51e" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="865.76" height="682.89" viewBox="0 0 865.76 682.89">
+
+<defs>
+
+<style xmlns="http://www.w3.org/1999/xhtml">*, ::after, ::before { box-sizing: border-box; }
+img, svg { vertical-align: middle; }
+</style>
+
+<style xmlns="http://www.w3.org/1999/xhtml">*, body, html { -webkit-font-smoothing: antialiased; }
+img, svg { max-width: 100%; }
+</style>
+
+</defs>
+
+<g id="aacbc6a0-2124-4f6c-b34d-11346ed3b501" data-name="freepik--background-simple--inject-2">
+
+<path d="M732.32,286.81s19.57-46.27,1.78-119.22S634.47,91.07,565,82.18,490.32,28.8,415.6,23.46s-138.76,40.93-151.24,89,1.78,72.95-51.58,110.32-105,69.39-83.65,138.79,74.73,69.39,83.63,115.65,71.17,103.15,144.13,126.34,122.77-41,190.38-37.37S679,564.37,711,512.78s-14.24-101.43-5.34-137S725.29,320.6,732.32,286.81Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M732.32,286.81s19.57-46.27,1.78-119.22S634.47,91.07,565,82.18,490.32,28.8,415.6,23.46s-138.76,40.93-151.24,89,1.78,72.95-51.58,110.32-105,69.39-83.65,138.79,74.73,69.39,83.63,115.65,71.17,103.15,144.13,126.34,122.77-41,190.38-37.37S679,564.37,711,512.78s-14.24-101.43-5.34-137S725.29,320.6,732.32,286.81Z" fill="#fff" opacity="0.7" style="isolation:isolate"/>
+
+</g>
+
+<g id="a4889a5a-1504-4c3e-a144-1f84ee95c415" data-name="freepik--Mountains--inject-2">
+
+<path d="M711,512.78c14.33-23.14,13-45.85,7.89-67.2-2.62-.2-5.53-.34-8.85-.34-21.25,0-26.25,36.26-38.68,37.51S640.07,464,618.82,464s-48.71,86.25-58.74,92.51-17.51-5-38.76-13.75-48.71,18.75-73.75,27.49-52.5-6.24-61.25-22.49S357.56,484,340.07,485.24s-35,13.75-45,2.51S251.31,385.24,238.82,384c-8.16-.82-45.56,21.78-70.59,37.58,19.78,17.77,39.44,29.23,44.53,55.62,8.89,46.26,71.17,103.15,144.13,126.34s122.77-41,190.38-37.37S679,564.37,711,512.78Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M711,512.78c14.33-23.14,13-45.85,7.89-67.2-2.62-.2-5.53-.34-8.85-.34-21.25,0-26.25,36.26-38.68,37.51S640.07,464,618.82,464s-48.71,86.25-58.74,92.51-17.51-5-38.76-13.75-48.71,18.75-73.75,27.49-52.5-6.24-61.25-22.49S357.56,484,340.07,485.24s-35,13.75-45,2.51S251.31,385.24,238.82,384c-8.16-.82-45.56,21.78-70.59,37.58,19.78,17.77,39.44,29.23,44.53,55.62,8.89,46.26,71.17,103.15,144.13,126.34s122.77-41,190.38-37.37S679,564.37,711,512.78Z" fill="#fff" opacity="0.5" style="isolation:isolate"/>
+
+</g>
+
+<g id="b373a570-594e-4f19-bd18-202c80330dc7" data-name="freepik--Stars--inject-2">
+
+<path d="M661.74,264.26a6.53,6.53,0,1,0,6.52,6.54h0A6.52,6.52,0,0,0,661.74,264.26Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M606.89,271.38a3.27,3.27,0,1,0,3.25,3.28v0A3.26,3.26,0,0,0,606.89,271.38Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M673.91,211.17a3.27,3.27,0,1,0,3.25,3.28h0A3.27,3.27,0,0,0,673.91,211.17Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M713.35,266.05a3.27,3.27,0,1,0,3.25,3.28v0A3.26,3.26,0,0,0,713.35,266.05Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M614.32,344.57a6.52,6.52,0,1,0,9,2.25,6.52,6.52,0,0,0-9-2.25Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M584.51,302.29a3.25,3.25,0,1,0,4.47,1.12A3.26,3.26,0,0,0,584.51,302.29Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M670.58,328.86a3.25,3.25,0,1,0,4.47,1.12,3.25,3.25,0,0,0-4.47-1.12Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M643.79,390.88a3.27,3.27,0,1,0,4.48,1.13h0A3.27,3.27,0,0,0,643.79,390.88Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M243.6,284.43a6.52,6.52,0,1,0,9,2.25A6.52,6.52,0,0,0,243.6,284.43Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M213.8,242.13a3.27,3.27,0,1,0,4.48,1.15h0A3.28,3.28,0,0,0,213.8,242.13Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M299.87,268.7a3.27,3.27,0,1,0,4.47,1.14h0A3.26,3.26,0,0,0,299.87,268.7Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M273.06,330.73a3.25,3.25,0,1,0,4.48,1.12,3.25,3.25,0,0,0-4.48-1.12Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M182.8,344.37a6.52,6.52,0,1,0,8.95,2.25,6.53,6.53,0,0,0-8.95-2.25Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M153,302.09a3.26,3.26,0,1,0,4.47,1.12,3.27,3.27,0,0,0-4.47-1.12Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M239.06,328.66a3.25,3.25,0,1,0,4.48,1.11,3.26,3.26,0,0,0-4.48-1.11Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M212.27,390.62a3.26,3.26,0,1,0,4.48,1.13h0A3.27,3.27,0,0,0,212.27,390.62Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M330.41,52.07a6.52,6.52,0,1,0,8.72,3h0A6.53,6.53,0,0,0,330.41,52.07Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M379.45,27.47A3.25,3.25,0,1,0,383.79,29a.36.36,0,0,0,0-.09A3.26,3.26,0,0,0,379.45,27.47Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M345.61,96.73a3.16,3.16,0,1,0,.11-.06Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M286.11,79a3.27,3.27,0,1,0,4.38,1.46v0A3.27,3.27,0,0,0,286.11,79Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M625.1,135.32a6.52,6.52,0,1,0,2.47,8.89v0A6.53,6.53,0,0,0,625.1,135.32Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M573.83,114.55a3.25,3.25,0,1,0,1.23,4.44,3.25,3.25,0,0,0-1.23-4.44Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M650.07,103.16a3.25,3.25,0,1,0,1.23,4.44,3.25,3.25,0,0,0-1.23-4.44Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M665.94,167.93a3.27,3.27,0,1,0-1.22-4.45h0A3.29,3.29,0,0,0,665.94,167.93Z" fill="#014D4E" data-primary="true"/>
+
+<g opacity="0.3">
+
+<path d="M661.74,264.26a6.53,6.53,0,1,0,6.52,6.54h0A6.52,6.52,0,0,0,661.74,264.26Z" fill="#fff"/>
+
+<path d="M606.89,271.38a3.27,3.27,0,1,0,3.25,3.28v0A3.26,3.26,0,0,0,606.89,271.38Z" fill="#fff"/>
+
+<path d="M673.91,211.17a3.27,3.27,0,1,0,3.25,3.28h0A3.27,3.27,0,0,0,673.91,211.17Z" fill="#fff"/>
+
+<path d="M713.35,266.05a3.27,3.27,0,1,0,3.25,3.28v0A3.26,3.26,0,0,0,713.35,266.05Z" fill="#fff"/>
+
+<path d="M614.32,344.57a6.52,6.52,0,1,0,9,2.25,6.52,6.52,0,0,0-9-2.25Z" fill="#fff"/>
+
+<path d="M584.51,302.29a3.25,3.25,0,1,0,4.47,1.12A3.26,3.26,0,0,0,584.51,302.29Z" fill="#fff"/>
+
+<path d="M670.58,328.86a3.25,3.25,0,1,0,4.47,1.12,3.25,3.25,0,0,0-4.47-1.12Z" fill="#fff"/>
+
+<path d="M643.79,390.88a3.27,3.27,0,1,0,4.48,1.13h0A3.27,3.27,0,0,0,643.79,390.88Z" fill="#fff"/>
+
+<path d="M243.6,284.43a6.52,6.52,0,1,0,9,2.25A6.52,6.52,0,0,0,243.6,284.43Z" fill="#fff"/>
+
+<path d="M213.8,242.13a3.27,3.27,0,1,0,4.48,1.15h0A3.28,3.28,0,0,0,213.8,242.13Z" fill="#fff"/>
+
+<path d="M299.87,268.7a3.27,3.27,0,1,0,4.47,1.14h0A3.26,3.26,0,0,0,299.87,268.7Z" fill="#fff"/>
+
+<path d="M273.06,330.73a3.25,3.25,0,1,0,4.48,1.12,3.25,3.25,0,0,0-4.48-1.12Z" fill="#fff"/>
+
+<path d="M182.8,344.37a6.52,6.52,0,1,0,8.95,2.25,6.53,6.53,0,0,0-8.95-2.25Z" fill="#fff"/>
+
+<path d="M153,302.09a3.26,3.26,0,1,0,4.47,1.12,3.27,3.27,0,0,0-4.47-1.12Z" fill="#fff"/>
+
+<path d="M239.06,328.66a3.25,3.25,0,1,0,4.48,1.11,3.26,3.26,0,0,0-4.48-1.11Z" fill="#fff"/>
+
+<path d="M212.27,390.62a3.26,3.26,0,1,0,4.48,1.13h0A3.27,3.27,0,0,0,212.27,390.62Z" fill="#fff"/>
+
+<path d="M330.41,52.07a6.52,6.52,0,1,0,8.72,3h0A6.53,6.53,0,0,0,330.41,52.07Z" fill="#fff"/>
+
+<path d="M379.45,27.47A3.25,3.25,0,1,0,383.79,29a.36.36,0,0,0,0-.09A3.26,3.26,0,0,0,379.45,27.47Z" fill="#fff"/>
+
+<path d="M345.61,96.73a3.16,3.16,0,1,0,.11-.06Z" fill="#fff"/>
+
+<path d="M286.11,79a3.27,3.27,0,1,0,4.38,1.46v0A3.27,3.27,0,0,0,286.11,79Z" fill="#fff"/>
+
+<path d="M625.1,135.32a6.52,6.52,0,1,0,2.47,8.89v0A6.53,6.53,0,0,0,625.1,135.32Z" fill="#fff"/>
+
+<path d="M573.83,114.55a3.25,3.25,0,1,0,1.23,4.44,3.25,3.25,0,0,0-1.23-4.44Z" fill="#fff"/>
+
+<path d="M650.07,103.16a3.25,3.25,0,1,0,1.23,4.44,3.25,3.25,0,0,0-1.23-4.44Z" fill="#fff"/>
+
+<path d="M665.94,167.93a3.27,3.27,0,1,0-1.22-4.45h0A3.29,3.29,0,0,0,665.94,167.93Z" fill="#fff"/>
+
+</g>
+
+</g>
+
+<ellipse cx="441.92" cy="141.46" rx="82.81" ry="64.64" fill="#2f2e41" data-secondary="true"/>
+
+<path d="M500.35,100.85c12.32,10.79,19.81,25,19.81,40.61,0,33.72-35,61.06-78.21,61.06s-78.21-27.34-78.21-61.06c0-21.08,13.68-39.65,34.48-50.62" fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.24"/>
+
+<path d="M408,86.42a94.3,94.3,0,0,1,19.5-5" fill="#263238" stroke="#fff" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.24"/>
+
+<ellipse cx="441.92" cy="156.71" rx="133.93" ry="44.44" fill="#014D4E" data-primary="true"/>
+
+<ellipse cx="441.92" cy="172.73" rx="190.83" ry="44.44" fill="#014D4E" data-primary="true"/>
+
+<ellipse cx="441.92" cy="172.73" rx="190.83" ry="44.44" opacity="0.2"/>
+
+<ellipse cx="441.92" cy="184.58" rx="220.45" ry="44.44" fill="#2f2e41" data-secondary="true"/>
+
+<ellipse cx="442.04" cy="184.57" rx="165.11" ry="31.06" fill="#014D4E" data-primary="true"/>
+
+<ellipse cx="441.92" cy="184.58" rx="73.48" ry="14.81" fill="#263238" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.24"/>
+
+<ellipse cx="442.04" cy="151.03" rx="17.51" ry="3.84" fill="#fff"/>
+
+<path d="M279.81,184.31c0,1.43-5.36,2.64-12,2.64s-12-1.19-12-2.64,5.37-2.64,12-2.64S279.81,182.88,279.81,184.31Z" fill="#fff"/>
+
+<path d="M631.73,184.31c0,1.43-5.37,2.64-12,2.64s-11.94-1.21-11.94-2.64,5.36-2.64,12-2.64S631.73,182.88,631.73,184.31Z" fill="#fff"/>
+
+<ellipse cx="550.15" cy="163.31" rx="16.36" ry="3.6" fill="#fff"/>
+
+<ellipse cx="346.72" cy="163.31" rx="16.36" ry="3.6" fill="#fff"/>
+
+<ellipse cx="550.15" cy="205.4" rx="11.98" ry="2.64" fill="#fff"/>
+
+<ellipse cx="346.72" cy="205.4" rx="11.98" ry="2.64" fill="#fff"/>
+
+<path d="M305.25,397.67l-.15,0a.54.54,0,0,1-.37-.67l4-14a.55.55,0,0,1,.68-.37.54.54,0,0,1,.37.67l-4.06,14A.53.53,0,0,1,305.25,397.67Z" fill="#2f2e41" data-secondary="true"/>
+
+<path d="M313.51,369.3a.41.41,0,0,1-.16,0,.54.54,0,0,1-.37-.67l32-110a.54.54,0,1,1,1,.3L314,368.91A.54.54,0,0,1,313.51,369.3Z" fill="#2f2e41" data-secondary="true"/>
+
+<path d="M349,247.28l-.15,0a.55.55,0,0,1-.37-.68L364.56,191a.53.53,0,0,1,.67-.37.55.55,0,0,1,.38.67l-16.14,55.57A.55.55,0,0,1,349,247.28Z" fill="#2f2e41" data-secondary="true"/>
+
+<path d="M584.64,390.55a.55.55,0,0,1-.52-.37L514.89,184.76a.54.54,0,0,1,1-.35l69.23,205.42a.54.54,0,0,1-.34.69Z" fill="#2f2e41" data-secondary="true"/>
+
+<path d="M382.35,293h-.1a.55.55,0,0,1-.44-.63l16.11-89.75a.54.54,0,0,1,1.07.19l-16.11,89.75A.54.54,0,0,1,382.35,293Z" fill="#2f2e41" data-secondary="true"/>
+
+<path d="M523.87,363.16a.54.54,0,0,1-.53-.45L494.57,202.77a.54.54,0,0,1,.44-.63.54.54,0,0,1,.63.44l28.77,159.94a.55.55,0,0,1-.44.63Z" fill="#2f2e41" data-secondary="true"/>
+
+<line x1="441.92" y1="391.38" x2="441.92" y2="409.79" fill="none" stroke="#263238" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.24"/>
+
+<path d="M441.92,169.77a309.57,309.57,0,0,0-42.05,2.66c4.05,8.4,21.78,14.73,43,14.73s38.6-6.2,42.88-14.47A302.76,302.76,0,0,0,441.92,169.77Z" fill="#fff" stroke="#263238" stroke-miterlimit="10" stroke-width="1.24"/>
+
+<path d="M448,618.07l-7.66,8.64s-3,4,2,9.59L458,651.7s12.62,12.12,18.68,6.82c0,0,3-1.52-2.77-9.6,0,0-10.22-9.17-6.5-19.7C467.44,629.22,460.49,626.6,448,618.07Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M411.28,602.79s-11.3,8.78-8,14.08l9.34,9.34a34,34,0,0,0,11.11,9.84s9.08,6.56,11.86,7.32c0,0,4-.23,2.27-4.4,0,0-9.95-20.16-8.55-26.21C429.29,612.76,421.57,611.69,411.28,602.79Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M442.09,332.82a10.72,10.72,0,0,0,1,7.14l2.95,5.72-5.83,8.42-20.54,4.41-1.6-6.55,5.6-16.27,15.74-2.87Z" fill="#f9b499"/>
+
+<path d="M442.09,332.82a7.52,7.52,0,0,1-4.79,2.87s1.92,3.22,5.24,3.11C442.54,338.8,441.22,335.22,442.09,332.82Z" fill="#f7a48b"/>
+
+<path d="M424.71,416.6c-1.32.2-4.39,6.69-7.83,15.11-6.57,16-14.53,39.06-14.53,39.06-2.11,5.15-11.46,0-11.46,0-3-.47-2.81-1.87-2.81-1.87l4-14.5c4.91-23.16,8.65-31.34,8.65-31.34,2.57-5.62,4.92-21.76,4.92-21.76-.1-3.19.07-7.37.31-11.24.34-5.78.85-10.85.85-10.85l.14,1.16a18.23,18.23,0,0,0,.73,3S417.68,408.76,424.71,416.6Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M390.89,470.77s-5.14,8.65-1.4,16.37c0,0,2.85,8.44,10.44,7a1.42,1.42,0,0,0,.49-2.59,15.68,15.68,0,0,0-2.75-1.34,4.83,4.83,0,0,1-1.78-4.82.81.81,0,0,1,1.13-.57,2.13,2.13,0,0,0,2.23-.33.87.87,0,0,0,.23-1.25,6.34,6.34,0,0,1-1.34-5l.24-5.14S393.7,472.64,390.89,470.77Z" fill="#f9b499"/>
+
+<path d="M442,452.86a221,221,0,0,0,2.77,31.62s-2.12,30.88-2.77,37.74c0,0-3.15,3.12-2.84,10,0,0-14.18,11.16-20.58,51a6.47,6.47,0,0,1-1.19,2.86,8.73,8.73,0,0,0-1.56,4.27,3.13,3.13,0,0,1-1,2c-.45.38-.91,1.43-1,4.11a9.69,9.69,0,0,1-2.59,6.34h0s9.81,9,16.82,9.71c0,0,3.83,2.68,2.59-5.78,0,0,4.33-3.93,1-10.74,0,0-.21-3.1,2.48-4.13,0,0,2.61-.75,3.22-9.88a12.2,12.2,0,0,1,.59-3.05,181.91,181.91,0,0,1,8.11-20.57,37.34,37.34,0,0,1,9.12-12c2.91-2.51,7.59-8.29,9.51-20.4,0,0,3.72,9.5-3.92,27.87A154.37,154.37,0,0,0,453,599.93a10.82,10.82,0,0,1-1.35,5.16c-1.09,2-2.3,5.06-1.23,7.68,0,0,2.38.76-2.37,5.3,0,0,11.36,8,19.41,11.15,0,0,2.06,3.1,1.24-4.33,0,0,.2-5,2.47-6.2,0,0,3.51-4.54,0-10.53,0,0-1.21-4.95,1.56-7.64,0,0,1.52-.18,1.56-5.21a6.28,6.28,0,0,1,.44-2.31c1.86-4.58,8.65-22,8.83-32.74,0,0,2.89-.62,1.65-5,0,0,3.51-2.69,3.51-9.71,0,0,2.37-5.16,2.94-19.4,0,0,5.26-10.13,10.24-43.67,0,0,2.58-19.84-2.41-37.64l-5.81-7.47L450.4,450.63l-6.29-4.13Z" fill="#2f2e41" data-secondary="true"/>
+
+<path d="M437.3,335.69l-13.75-.83-6.77-.4s-8.57-15.58-7.76-15.84,5.4-3.24,5.4-3.24.66-.12,1.63-.25c1.94-.24,5.16-.48,7.11.25,0,0,4-3.43,6.67,2.17,0,0,11.2,2.93,13.07,9.07C442.9,326.62,444.77,334.62,437.3,335.69Z" fill="#f9b499"/>
+
+<path d="M431.7,340a7.87,7.87,0,0,1,1.22,3.94,2.47,2.47,0,0,0,2.38,2.32,32.39,32.39,0,0,0,6-.55l-13.58,10.2-6.66-.31s-.77-8.37,0-8.52,5.62-9.42,5.62-9.42S427.75,339.69,431.7,340Z" fill="#f7a48b"/>
+
+<path d="M424.71,416.6c-1.32.2-4.39,6.69-7.83,15.11-2.16-2.71-6.67-10-5.6-22.68,0,0,.41-12.48-5.34-18.94v0c.34-5.78.85-10.85.85-10.85l.14,1.16a18.23,18.23,0,0,0,.73,3S417.68,408.76,424.71,416.6Z" opacity="0.3"/>
+
+<path d="M456.91,459.58a12,12,0,0,0-1.54,8,13,13,0,0,0,4.06,7.05c1,.95,2.15,1.7,3.21,2.72a10.58,10.58,0,0,1,2.41,3.57,10.15,10.15,0,0,1,.76,4.24,16.34,16.34,0,0,1-.62,4.24c-1.53,5.35-1.44,11.06-.7,16.57.11.68.21,1.38.34,2.06l.39,2.07a8.46,8.46,0,0,1-.4,4.24,12.89,12.89,0,0,0,.14,8.21,12.76,12.76,0,0,1-.48-8.3,8.18,8.18,0,0,0,.29-4.07l-.44-2c-.14-.69-.26-1.39-.39-2.08a47.61,47.61,0,0,1-.61-8.44,33.63,33.63,0,0,1,1.16-8.4,15.62,15.62,0,0,0,.63-4.06,9.32,9.32,0,0,0-.68-4,10,10,0,0,0-2.24-3.38c-1-.93-2.15-1.77-3.16-2.77a13.52,13.52,0,0,1-4-7.38A12,12,0,0,1,456.91,459.58Z" opacity="0.3"/>
+
+<path d="M496.4,446.63c-14.61,5.14-54.37,6.23-54.37,6.23-1.8-9.49-1.43-15.71-.85-19.15a3,3,0,0,0-2.3-3.36c-7.33-1.73-14.17-13.75-14.17-13.75-7-7.84-17-33.27-17-33.27a17.31,17.31,0,0,1-.74-3c-1.87-11.82,9.93-19.22,9.93-19.22-.8-2.17,1.63-4.33,1.63-4.33,2.1-1.11,4.16-2.08,5.86-2.84a42,42,0,0,0,7-4.08c6.66-4.65,12.25-4.45,12.25-4.45,1.9-1.62,6.75,4.06,6.75,4.06a26.25,26.25,0,0,1,14.08,7.31c13.8,15.15,18.4,36.52,18.4,36.52,9.19,16.77,18.12,43.55,18.12,43.55C504.52,443.93,496.4,446.63,496.4,446.63Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M466.65,472.49s1.35,12.29,8.92,16.35a22.62,22.62,0,0,0,12,4.78,3.79,3.79,0,0,0,3.93-2.45,3.57,3.57,0,0,0-1.16-3.84s-9.21-7.25-9.24-15.07a.42.42,0,0,1,.81-.16c1.24,3.35,4.23,10.14,8,9.86,0,0,2.48-.36.93-3,0,0-3.25-3.87-3.72-7.59,0,0-1.37-5.57-5.8-8.51C481.25,462.87,469.78,461.21,466.65,472.49Z" fill="#f9b499"/>
+
+<path d="M489,493.46a23.68,23.68,0,0,1-4-2.45,28.5,28.5,0,0,1-3.55-3.13c-.56-.56-1.07-1.17-1.59-1.76s-1-1.23-1.4-1.91a22.14,22.14,0,0,1-2.25-4.14c.46.63.83,1.32,1.31,1.94l.67.95c.23.32.48.62.72.92a40.77,40.77,0,0,0,3.06,3.5,44.38,44.38,0,0,0,3.38,3.19c.58.51,1.19,1,1.81,1.48S488.38,493,489,493.46Z" fill="#f7a48b"/>
+
+<path d="M471.74,451s11.44-1,17.28-2.41c0,0-14.68-31.27-16.44-49.54L459,409.92Z" opacity="0.2"/>
+
+<path d="M426.09,332.76l-2.54,2.1-6.77-.4s-8.57-15.58-7.76-15.84,5.4-3.24,5.4-3.24.66-.12,1.63-.25c0,0,1.9,3.88,2,6C418.09,321.16,428.88,317.44,426.09,332.76Z" fill="#f7a48b"/>
+
+<path d="M403.49,315.2c-3.31,4.85-13.15,21.44-2.74,34.1,0,0,8.54,8.11,17.74,7.52l5.86-2.84,5.29-8.19a3.71,3.71,0,0,0-.22-4.33c-1.86-2.29-4.38-6.07-3.33-8.71,0,0,1.34-14.67-9.6-9.6,0,0-1.84-16.34-10-11A10.78,10.78,0,0,0,403.49,315.2Z" fill="#2f2e41" data-secondary="true"/>
+
+<ellipse cx="431.04" cy="335.69" rx="5.6" ry="4.27" fill="#f9b499"/>
+
+<ellipse cx="431.04" cy="335.69" rx="1.94" ry="1.39" fill="#f7a48b"/>
+
+<path d="M466.65,472.49c.84-2.95,4-10.27,14.6-9.62a138.92,138.92,0,0,1-7.44-30.57s-1.21-25.63-1.48-45.45c0,0,2.3-24.6-9.43-28a8.69,8.69,0,0,0-5.77.42c-4.46,1.88-13.15,7.62-10.61,23.53a41.72,41.72,0,0,1,.57,7c-.08,9.08.43,32.93,7.22,50.13,0,0,6.83,23.77,11.45,32.7A.48.48,0,0,0,466.65,472.49Z" fill="#014D4E" data-primary="true"/>
+
+<path d="M466.65,472.49c.84-2.95,4-10.27,14.6-9.62a138.92,138.92,0,0,1-7.44-30.57s-1.21-25.63-1.48-45.45c0,0,2.3-24.6-9.43-28a8.69,8.69,0,0,0-5.77.42c-4.46,1.88-13.15,7.62-10.61,23.53a41.72,41.72,0,0,1,.57,7c-.08,9.08.43,32.93,7.22,50.13,0,0,6.83,23.77,11.45,32.7A.48.48,0,0,0,466.65,472.49Z" opacity="0.3"/>
+
+<path d="M397.49,493.63a9.79,9.79,0,0,1-2.74-1.91,11.9,11.9,0,0,1-2.06-2.67,12.74,12.74,0,0,1-.73-1.54,9.53,9.53,0,0,1-.46-1.64,8.94,8.94,0,0,1-.05-3.34,25.66,25.66,0,0,0,.85,3.13,16.84,16.84,0,0,0,1.3,2.87A26,26,0,0,0,397.49,493.63Z" fill="#f7a48b"/>
+
+</svg>

public/assets/undraw_to_the_stars_re_wq2x.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="809.16369" height="657.27702" viewBox="0 0 809.16369 657.27702" xmlns:xlink="http://www.w3.org/1999/xlink"><path d="M886.05077,723.25123v49.04a7.00763,7.00763,0,0,1-7,7h-556a7.01521,7.01521,0,0,1-7-7v-62.12c.66-.69995,1.32-1.38995,2-2.07995a384.97527,384.97527,0,0,1,566,12.88C884.73076,721.72126,885.3908,722.49122,886.05077,723.25123Z" transform="translate(-193.54052 -122.01419)" fill="#6c63ff"/><path d="M702.55077,185.28126q-.84-.51-1.68-.99h-58.44c-.42.66-.82,1.33-1.21,2h63.01C703.67076,185.95124,703.11077,185.62122,702.55077,185.28126Zm-386.5,197.47v14.9c.25.02.51.02.76.03l-.5,28.64-.26-.14v2.82l.21.11-.21,12.01v41.4h2v-106.52Q317.21077,379.24128,316.05077,382.75123Zm386.5-197.47q-.84-.51-1.68-.99h-58.44c-.42.66-.82,1.33-1.21,2h63.01C703.67076,185.95124,703.11077,185.62122,702.55077,185.28126Zm176.5-.99h-556a7.0077,7.0077,0,0,0-7,7v581a7.01521,7.01521,0,0,0,7,7h556a7.00763,7.00763,0,0,0,7-7v-581A7.00766,7.00766,0,0,0,879.05077,184.29121Zm5,588a5.00181,5.00181,0,0,1-5,5h-556a5.00185,5.00185,0,0,1-5-5v-581a5.00828,5.00828,0,0,1,5-5h556a5.00824,5.00824,0,0,1,5,5Z" transform="translate(-193.54052 -122.01419)" fill="#3f3d56"/><path d="M546.57954,700.70834l-19.83221.5476a13.81233,13.81233,0,0,1-8.48582-2.37891c-2.15367-1.602-3.14159-3.76763-2.70847-5.94251l3.90258-19.61285c.73546-3.7,5.26958-6.49709,10.77994-6.6493l10.95246-.30244c5.51034-.15215,10.19188,2.39045,11.1305,6.04428l4.979,19.36762c.55248,2.14764-.31449,4.36453-2.37642,6.08292A13.81231,13.81231,0,0,1,546.57954,700.70834Z" transform="translate(-193.54052 -122.01419)" fill="#3f3d56"/><path d="M667.20992,700.14778l-19.83215.54763a13.81226,13.81226,0,0,1-8.48582-2.37891c-2.15362-1.602-3.14159-3.76763-2.70848-5.94251l3.90259-19.61285c.73546-3.7,5.2696-6.49714,10.77993-6.6493l10.95246-.30243c5.5104-.15214,10.19189,2.39044,11.1305,6.04427l4.979,19.36762c.55246,2.1477-.31448,4.36453-2.37641,6.08293A13.81223,13.81223,0,0,1,667.20992,700.14778Z" transform="translate(-193.54052 -122.01419)" fill="#3f3d56"/><path d="M477.71428,533.6434a4.33143,4.33143,0,0,1,1.595-8.30761L704.777,519.11a4.33,4.33,0,0,1,4.4488,4.208l0,.00038a4.33573,4.33573,0,0,1-4.20924,4.44844l-.00045-.00019L479.54839,533.9923A4.30673,4.30673,0,0,1,477.71428,533.6434Z" transform="translate(-193.54052 -122.01419)" fill="#3f3d56"/><rect x="499.4665" y="459.85109" width="64.47382" height="217.68039" transform="translate(-209.03562 -107.12078) rotate(-1.58175)" fill="#e6e6e6"/><polygon points="369.018 333.079 356.629 366.828 356.64 520.587 371.736 524.916 369.018 333.079" fill="#ccc"/><path d="M528.363,402.136c-12.05744.34245-21.2569,21.20913-21.03568,29.35186l.40705,14.74161,43.65914-1.20557-.40705-14.74161C550.75786,422.1398,540.42089,401.81259,528.363,402.136Z" transform="translate(-193.54052 -122.01419)" fill="#3f3d56"/><path d="M497.31046,550.89488a8.50984,8.50984,0,0,1-8.73142-8.26213l-.66249-23.99087a8.5,8.5,0,1,1,16.99353-.46923l.66248,23.99087A8.50981,8.50981,0,0,1,497.31046,550.89488Z" transform="translate(-193.54052 -122.01419)" fill="#3f3d56"/><polyline points="320.125 339.284 319.82 323.429 323.978 323.326 324.283 339.13 328.052 569.476 323.893 569.591" fill="#3f3d56"/><path d="M568.3137,498.37505l-74.73857,2.0638c-7.13852-8.70518-7.78692-45.79259,7.11089-52.85111l5.8423-9.92024,45.04258-2.19882,5.26415,10.44507C564.24572,452.21964,568.06692,489.07551,568.3137,498.37505Z" transform="translate(-193.54052 -122.01419)" fill="#e6e6e6"/><path d="M540.18331,480.58758l-18.90006.52192c-3.64714.10071-6.74794-4.631-6.91129-10.54634s2.67166-10.811,6.3188-10.91168l18.90007-.52192c3.64714-.10071,6.74793,4.631,6.91128,10.54634S543.83045,480.48687,540.18331,480.58758Z" transform="translate(-193.54052 -122.01419)" fill="#6c63ff"/><polygon points="310.043 465.568 271.084 493.088 264.278 555.138 309.726 539.953 310.043 465.568" fill="#e6e6e6"/><rect x="623.87687" y="457.18614" width="64.47382" height="217.68039" transform="translate(-208.91465 -103.68767) rotate(-1.58175)" fill="#e6e6e6"/><polygon points="428.888 333.806 442.149 367.222 446.128 520.93 431.149 525.649 428.888 333.806" fill="#ccc"/><ellipse cx="524.02404" cy="262.58361" rx="8.44737" ry="11.32747" fill="#e6e6e6"/><ellipse cx="568.18345" cy="428.88373" rx="8.44737" ry="11.32747" fill="#e6e6e6"/><ellipse cx="239.47141" cy="397.09412" rx="8.44737" ry="11.32747" fill="#e6e6e6"/><path d="M651.51553,399.50588c-12.05744.34245-21.25689,21.20914-21.03567,29.35186l.407,14.74162,43.65913-1.20558-.407-14.74161C673.91039,419.50962,663.57349,399.1824,651.51553,399.50588Z" transform="translate(-193.54052 -122.01419)" fill="#3f3d56"/><polyline points="470.459 344.247 470.154 328.392 474.312 328.288 474.617 344.093 478.386 574.439 474.227 574.554" fill="#3f3d56"/><path d="M691.46628,495.74489l-74.73849,2.0638c-1.30315-7.87682.38259-44.63292,7.11089-52.85111l5.84229-9.92024,45.04259-2.19882,5.26415,10.44507C693.28642,444.36732,697.93794,480.48676,691.46628,495.74489Z" transform="translate(-Line truncated

public/manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "JSON Crack",
   "short_name": "JSON Crack",
-  "description": "Visualize your JSON data onto graphs seamlessly.",
+  "description": "Innovative and open-source visualization application that transforms various data formats, such as JSON, YAML, XML, CSV and more, into interactive graphs.",
   "theme_color": "#36393e",
   "background_color": "#36393e",
   "display": "standalone",

public/robots.txt

@@ -1,4 +1,10 @@
+# Allow all crawlers
 User-agent: *
 Allow: /
+
+
+# Block all crawlers for /accounts
+User-agent: *
 Disallow: /*?*
+Disallow: /forgot-password
 Disallow: /widget

public/sitemap.txt

@@ -1,4 +1,6 @@
 https://jsoncrack.com
+https://jsoncrack.com/sign-in
 https://jsoncrack.com/editor
 https://jsoncrack.com/docs
-https://jsoncrack.com/pricing
+https://jsoncrack.com/legal/terms
+https://jsoncrack.com/legal/privacy

sentry.client.config.ts

@@ -0,0 +1,21 @@
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+import * as Sentry from "@sentry/nextjs";
+
+if (process.env.NODE_ENV === "production") {
+  Sentry.init({
+    dsn: "https://d3345591295d4dd1b8c579b62003d939@o1284435.ingest.sentry.io/6495191",
+    tracesSampleRate: 0.2,
+    debug: false,
+    release: `${process.env.SENTRY_RELEASE || "production"}`,
+    allowUrls: ["https://jsoncrack.com/editor"],
+    replaysOnErrorSampleRate: 1.0,
+    replaysSessionSampleRate: 0.1,
+    integrations: [
+      new Sentry.BrowserTracing(),
+      new Sentry.Replay({
+        maskAllText: true,
+        blockAllMedia: true,
+      }),
+    ],
+  });
+}

sentry.edge.config.ts

@@ -0,0 +1,3 @@
+{
+  /* empty */
+}

sentry.server.config.ts

@@ -0,0 +1,3 @@
+{
+  /* empty */
+}

src/api/altogic.ts

@@ -1,13 +0,0 @@
-import { APIError, createClient } from "altogic";
-
-let envUrl = process.env.NEXT_PUBLIC_ALTOGIC_ENV_URL as string;
-let clientKey = process.env.NEXT_PUBLIC_ALTOGIC_CLIENT_KEY as string;
-
-const altogic = createClient(envUrl, clientKey);
-
-export interface AltogicResponse<T> {
-  data: T;
-  errors: APIError | null;
-}
-
-export { altogic };

src/components/AdTest/index.tsx

@@ -45,13 +45,17 @@ const AdWrapper = styled.div`
     background: #fff;
     box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.15);
     opacity: 0;
-    transition: transform 0.2s ease-in-out, opacity 0.1s ease-in-out;
+    transition:
+      transform 0.2s ease-in-out,
+      opacity 0.1s ease-in-out;
     transform: scale(1) translateY(-50px);
   }
 
   & #native-button:checked + .native-overlay {
     opacity: 1;
-    transition: transform 0.2s ease-in-out, opacity 0.4s ease-in-out;
+    transition:
+      transform 0.2s ease-in-out,
+      opacity 0.4s ease-in-out;
     transform: scale(1) translateY(0);
   }
 
@@ -119,6 +123,7 @@ export const AdTest = () => {
     if (window.innerWidth < 660) return;
     ref.current.innerHTML = "";
     const s = document.createElement("script");
+
     s.id = "_carbonads_js";
     s.innerHTML = `(function() {
         if (typeof _bsa !== 'undefined' && _bsa) {

src/components/CarbonAds/index.tsx

@@ -1,65 +1,22 @@
 import React from "react";
-import styled from "styled-components";
-
-const StyledCloseBtn = styled.button`
-  display: none;
-  width: 3vw;
-  height: 3vw;
-  opacity: 0.8;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  top: 0;
-  right: 0;
-  border-radius: 0;
-  background: ${({ theme }) => theme.DANGER};
-`;
-
-const StyledWrapper = styled.span<{ editor?: boolean }>`
-  position: relative;
-
-  #carbonads {
-    width: 100%;
-    display: flex;
-  }
-
-  ${({ theme, editor }) =>
-    editor &&
-    `
-    #carbonads {
-      border-radius: 0;
-      border-top: 1px solid ${theme.BACKGROUND_MODIFIER_ACCENT};
-    }
-
-    #carbonads > span {
-      max-width: 100%;
-      width: 100%;
-  }
-  `};
-
-  &:hover {
-    ${StyledCloseBtn} {
-      display: flex;
-    }
-  }
-
-  @media all and (display-mode: standalone) {
-    #carbonads {
-      display: none;
-    }
-  }
-`;
+import useUser from "src/store/useUser";
 
 export const CarbonAds = () => {
   const ref = React.useRef<HTMLDivElement>(null!);
+  const premium = useUser(state => state.premium);
 
   React.useEffect(() => {
-    ref.current.innerHTML = "";
-    const s = document.createElement("script");
-    s.id = "_carbonads_js";
-    s.src = `//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsoncrackcom`;
-    ref.current.appendChild(s);
-  }, []);
+    if (!premium) {
+      ref.current.innerHTML = "";
+      const s = document.createElement("script");
+
+      s.id = "_carbonads_js";
+      s.src = "//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsoncrackcom";
+      ref.current.appendChild(s);
+    }
+  }, [premium]);
+
+  if (premium) return null;
 
   return <div ref={ref} className="carbon-outer" />;
 };

src/components/CustomNode/ObjectNode.tsx

@@ -1,37 +0,0 @@
-import React from "react";
-import { CustomNodeProps } from "src/components/CustomNode";
-import * as Styled from "./styles";
-
-const Node: React.FC<CustomNodeProps> = ({ node, x, y }) => {
-  const { text, width, height, data } = node;
-  const ref = React.useRef(null);
-
-  if (data.isEmpty) return null;
-
-  return (
-    <Styled.StyledForeignObject width={width} height={height} x={0} y={0} ref={ref} isObject>
-      {text.map((val, idx) => {
-        return (
-          <Styled.StyledRow
-            data-key={JSON.stringify(val)}
-            data-type={JSON.stringify(val[1])}
-            data-x={x}
-            data-y={y + idx * 17.8}
-            key={idx}
-          >
-            <Styled.StyledKey objectKey>
-              {JSON.stringify(val[0]).replaceAll('"', "")}:{" "}
-            </Styled.StyledKey>
-            <Styled.StyledLinkItUrl>{JSON.stringify(val[1])}</Styled.StyledLinkItUrl>
-          </Styled.StyledRow>
-        );
-      })}
-    </Styled.StyledForeignObject>
-  );
-};
-
-function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
-  return String(prev.node.text) === String(next.node.text) && prev.node.width === next.node.width;
-}
-
-export const ObjectNode = React.memo(Node, propsAreEqual);

src/components/CustomNode/index.tsx

@@ -1,36 +0,0 @@
-import React from "react";
-import { Node, NodeProps } from "reaflow";
-import { ObjectNode } from "./ObjectNode";
-import { TextNode } from "./TextNode";
-
-export interface CustomNodeProps {
-  node: NodeData;
-  x: number;
-  y: number;
-  hasCollapse?: boolean;
-}
-
-const rootProps = {
-  width: 40,
-  height: 40,
-  rx: 50,
-  ry: 50,
-};
-
-export const CustomNode = (nodeProps: NodeProps) => {
-  const { text, data } = nodeProps.properties;
-
-  return (
-    <Node {...nodeProps} {...(data.isEmpty && rootProps)} label={<React.Fragment />}>
-      {({ node, x, y }) => {
-        if (Array.isArray(text)) {
-          return <ObjectNode node={node as NodeData} x={x} y={y} />;
-        }
-
-        return (
-          <TextNode node={node as NodeData} hasCollapse={data.childrenCount > 0} x={x} y={y} />
-        );
-      }}
-    </Node>
-  );
-};

src/components/CustomNode/styles.tsx

@@ -1,105 +0,0 @@
-import { Roboto_Mono } from "next/font/google";
-import { LinkItUrl } from "react-linkify-it";
-import styled, { DefaultTheme } from "styled-components";
-
-const robotoMono = Roboto_Mono({
-  weight: "500",
-  subsets: ["latin"],
-  display: "swap",
-  fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],
-});
-
-function getTypeColor(value: string, theme: DefaultTheme) {
-  if (!Number.isNaN(+value)) return theme.NODE_COLORS.INTEGER;
-  if (value === "true") return theme.NODE_COLORS.BOOL.TRUE;
-  if (value === "false") return theme.NODE_COLORS.BOOL.FALSE;
-  if (value === "null") return theme.NODE_COLORS.NULL;
-  return theme.NODE_COLORS.NODE_VALUE;
-}
-
-export const StyledLinkItUrl = styled(LinkItUrl)`
-  text-decoration: underline;
-  pointer-events: all;
-`;
-
-export const StyledForeignObject = styled.foreignObject<{
-  hasCollapse?: boolean;
-  isObject?: boolean;
-}>`
-  text-align: ${({ isObject }) => !isObject && "center"};
-  font-size: 12px;
-  overflow: hidden;
-  color: ${({ theme }) => theme.NODE_COLORS.TEXT};
-  pointer-events: none;
-  padding: ${({ isObject }) => isObject && "10px"};
-  font-family: ${robotoMono.style.fontFamily};
-
-  &.searched {
-    border: 2px solid ${({ theme }) => theme.TEXT_POSITIVE};
-    border-radius: 2px;
-    box-sizing: border-box;
-  }
-
-  .highlight {
-    background: rgba(255, 214, 0, 0.3);
-  }
-
-  .renderVisible {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 12px;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    cursor: pointer;
-  }
-`;
-
-function getKeyColor(theme: DefaultTheme, parent: boolean, type: string, objectKey: boolean) {
-  if (parent) {
-    if (type === "array") return theme.NODE_COLORS.PARENT_ARR;
-    return theme.NODE_COLORS.PARENT_OBJ;
-  }
-  if (objectKey) return theme.NODE_COLORS.NODE_KEY;
-  return theme.NODE_COLORS.TEXT;
-}
-
-export const StyledKey = styled.span<{
-  objectKey?: boolean;
-  parent?: boolean;
-  type?: string;
-  value?: string;
-}>`
-  display: inline;
-  flex: 1;
-  font-weight: 500;
-  color: ${({ theme, type = "null", objectKey = false, parent = false }) =>
-    getKeyColor(theme, parent, type, objectKey)};
-  font-size: ${({ parent }) => parent && "14px"};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: ${({ objectKey }) => !objectKey && 10}px;
-`;
-
-export const StyledRow = styled.span.attrs<{
-  "data-type": string;
-  theme: DefaultTheme;
-}>(props => ({
-  style: {
-    color: getTypeColor(props["data-type"], props.theme),
-  },
-}))<{ "data-type": string; theme: DefaultTheme }>`
-  display: block;
-  height: 18px;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  padding: 0 auto;
-`;
-
-export const StyledChildrenCount = styled.span`
-  color: ${({ theme }) => theme.NODE_COLORS.CHILD_COUNT};
-  padding: 10px;
-  margin-left: -15px;
-`;

src/components/ErrorContainer/index.tsx

@@ -1,61 +0,0 @@
-import React from "react";
-import { MdReportGmailerrorred, MdOutlineCheckCircleOutline } from "react-icons/md";
-import useJson from "src/store/useJson";
-import styled from "styled-components";
-
-const StyledErrorWrapper = styled.div`
-  z-index: 1;
-`;
-
-const StyledErrorExpand = styled.div<{ error: boolean }>`
-  position: relative;
-  display: flex;
-  width: 100%;
-  padding: 4px 16px;
-  height: 28px;
-  border-radius: 0;
-  justify-content: space-between;
-  align-items: center;
-  color: ${({ theme, error }) => (error ? theme.TEXT_DANGER : theme.TEXT_POSITIVE)};
-  pointer-events: ${({ error }) => !error && "none"};
-  background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-  box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
-`;
-
-const StyledTitle = styled.span`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-weight: 500;
-  gap: 10px;
-  font-size: 16px;
-`;
-
-const StyledError = styled.pre`
-  color: ${({ theme }) => theme.TEXT_DANGER};
-  border-bottom: 1px solid ${({ theme }) => theme.SILVER_DARK};
-  font-size: 12px;
-  padding: 12px;
-  margin: 0;
-  word-wrap: break-word;
-  white-space: pre-line;
-`;
-
-export const ErrorContainer = () => {
-  const hasError = useJson(state => state.hasError);
-
-  return (
-    <StyledErrorWrapper>
-      <StyledErrorExpand error={hasError}>
-        <StyledTitle>
-          {hasError ? (
-            <MdReportGmailerrorred size={20} />
-          ) : (
-            <MdOutlineCheckCircleOutline size={20} />
-          )}
-          {hasError ? "Invalid JSON" : "JSON Valid"}
-        </StyledTitle>
-      </StyledErrorExpand>
-    </StyledErrorWrapper>
-  );
-};

src/components/Footer/index.tsx

@@ -1,91 +0,0 @@
-import Link from "next/link";
-import { FaDiscord, FaGithub, FaLinkedin, FaTwitter } from "react-icons/fa";
-import styled from "styled-components";
-import pkg from "../../../package.json";
-
-export const StyledFooter = styled.footer`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 80%;
-  margin: 0 auto;
-  padding: 30px 3%;
-  border-top: 1px solid #b4b4b4;
-  opacity: 0.7;
-`;
-
-export const StyledFooterText = styled.p`
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-  color: #b4b4b4;
-`;
-
-export const StyledNavLink = styled.a`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: color 0.2s;
-
-  &:hover {
-    font-weight: 500;
-    color: ${({ theme }) => theme.ORANGE};
-  }
-`;
-
-export const StyledIconLinks = styled.div`
-  display: flex;
-  gap: 20px;
-`;
-
-export const Footer = () => (
-  <StyledFooter>
-    <StyledFooterText>
-      <Link href="/">
-        <img width="120" height="20" src="assets/icon.png" alt="icon" loading="lazy" />
-      </Link>
-      <span>
-        © {new Date().getFullYear()} JSON Crack - {pkg.version}
-      </span>
-    </StyledFooterText>
-    <StyledIconLinks>
-      <StyledNavLink
-        href="https://github.com/AykutSarac/jsoncrack.com"
-        rel="external"
-        target="_blank"
-        aria-label="github"
-      >
-        <FaGithub size={26} />
-      </StyledNavLink>
-
-      <StyledNavLink
-        href="https://www.linkedin.com/in/aykutsarac/"
-        rel="me"
-        target="_blank"
-        aria-label="linkedin"
-      >
-        <FaLinkedin size={26} />
-      </StyledNavLink>
-
-      <StyledNavLink
-        href="https://twitter.com/jsoncrack"
-        rel="me"
-        target="_blank"
-        aria-label="twitter"
-      >
-        <FaTwitter size={26} />
-      </StyledNavLink>
-
-      <StyledNavLink
-        href="https://discord.gg/yVyTtCRueq"
-        rel="noreferrer"
-        target="_blank"
-        aria-label="discord"
-      >
-        <FaDiscord size={26} />
-      </StyledNavLink>
-    </StyledIconLinks>
-  </StyledFooter>
-);

src/components/GoogleAnalytics/index.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-import Script from "next/script";
-
-const isDevelopment = process.env.NODE_ENV === "development";
-
-export const GoogleAnalytics: React.FC = () => {
-  if (isDevelopment) return null;
-
-  return (
-    <>
-      <Script src="https://www.googletagmanager.com/gtag/js?id=G-JKZEHMJBMH" />
-      <Script
-        id="google-analytics"
-        dangerouslySetInnerHTML={{
-          __html: `
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-          gtag('config', 'G-JKZEHMJBMH');
-        `,
-        }}
-      />
-    </>
-  );
-};

src/components/Graph/CustomEdge/index.tsx

@@ -0,0 +1,13 @@
+import React from "react";
+import dynamic from "next/dynamic";
+import { EdgeProps } from "reaflow/dist/symbols/Edge";
+
+const Edge = dynamic(() => import("reaflow").then(r => r.Edge), {
+  ssr: false,
+});
+
+const CustomEdgeWrapper = (props: EdgeProps) => {
+  return <Edge containerClassName={`edge-${props.id}`} {...props} />;
+};
+
+export const CustomEdge = React.memo(CustomEdgeWrapper);

src/components/Graph/CustomNode/ObjectNode.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { CustomNodeProps } from "src/components/Graph/CustomNode";
+import { TextRenderer } from "./TextRenderer";
+import * as Styled from "./styles";
+
+type Value = [string, string];
+
+type RowProps = {
+  val: Value;
+  x: number;
+  y: number;
+  index: number;
+};
+
+const Row = ({ val, x, y, index }: RowProps) => {
+  const key = JSON.stringify(val);
+  const rowKey = JSON.stringify(val[0]).replaceAll('"', "");
+  const rowValue = JSON.stringify(val[1]);
+
+  return (
+    <Styled.StyledRow $value={rowValue} data-key={key} data-x={x} data-y={y + index * 17.8}>
+      <Styled.StyledKey $type="object">{rowKey}: </Styled.StyledKey>
+      <TextRenderer>{rowValue}</TextRenderer>
+    </Styled.StyledRow>
+  );
+};
+
+const Node: React.FC<CustomNodeProps> = ({ node, x, y }) => (
+  <Styled.StyledForeignObject width={node.width} height={node.height} x={0} y={0} $isObject>
+    {(node.text as Value[]).map((val, idx) => (
+      <Row val={val} index={idx} x={x} y={y} key={idx} />
+    ))}
+  </Styled.StyledForeignObject>
+);
+
+function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
+  return String(prev.node.text) === String(next.node.text) && prev.node.width === next.node.width;
+}
+
+export const ObjectNode = React.memo(Node, propsAreEqual);

src/components/Graph/CustomNode/TextNode.tsx

@@ -1,9 +1,12 @@
 import React from "react";
-import { MdLink, MdLinkOff } from "react-icons/md";
-import { CustomNodeProps } from "src/components/CustomNode";
-import useGraph from "src/store/useGraph";
-import useStored from "src/store/useStored";
 import styled from "styled-components";
+import { MdLink, MdLinkOff } from "react-icons/md";
+import { CustomNodeProps } from "src/components/Graph/CustomNode";
+import useToggleHide from "src/hooks/useToggleHide";
+import { isContentImage } from "src/lib/utils/graph/calculateNodeSize";
+import useConfig from "src/store/useConfig";
+import useGraph from "src/store/useGraph";
+import { TextRenderer } from "./TextRenderer";
 import * as Styled from "./styles";
 
 const StyledExpand = styled.button`
@@ -22,9 +25,9 @@ const StyledExpand = styled.button`
   }
 `;
 
-const StyledTextNodeWrapper = styled.span<{ hasCollapse: boolean }>`
+const StyledTextNodeWrapper = styled.span<{ $hasCollapse: boolean }>`
   display: flex;
-  justify-content: ${({ hasCollapse }) => (hasCollapse ? "space-between" : "center")};
+  justify-content: ${({ $hasCollapse }) => ($hasCollapse ? "space-between" : "center")};
   align-items: center;
   height: 100%;
   width: 100%;
@@ -48,55 +51,46 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
     height,
     data: { isParent, childrenCount, type },
   } = node;
-  const ref = React.useRef(null);
-  const hideCollapse = useStored(state => state.hideCollapse);
-  const showChildrenCount = useStored(state => state.childrenCount);
-  const imagePreview = useStored(state => state.imagePreview);
+  const { validateHiddenNodes } = useToggleHide();
+  const collapseButtonVisible = useConfig(state => state.collapseButtonVisible);
+  const childrenCountVisible = useConfig(state => state.childrenCountVisible);
+  const imagePreviewEnabled = useConfig(state => state.imagePreviewEnabled);
   const expandNodes = useGraph(state => state.expandNodes);
   const collapseNodes = useGraph(state => state.collapseNodes);
   const isExpanded = useGraph(state => state.collapsedParents.includes(id));
-  const isImage =
-    !Array.isArray(text) && /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(text) && imagePreview;
-  // const { inViewport } = useInViewport(ref);
+  const isImage = imagePreviewEnabled && isContentImage(text as string);
+  const value = JSON.stringify(text).replaceAll('"', "");
 
   const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
 
     if (!isExpanded) collapseNodes(id);
     else expandNodes(id);
+    validateHiddenNodes();
   };
 
   return (
-    <Styled.StyledForeignObject
-      width={width}
-      height={height}
-      x={0}
-      y={0}
-      hasCollapse={isParent && hasCollapse}
-      ref={ref}
-    >
+    <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
       {isImage ? (
         <StyledImageWrapper>
-          <StyledImage src={text} width="70" height="70" loading="lazy" />
+          <StyledImage src={text as string} width="70" height="70" loading="lazy" />
         </StyledImageWrapper>
       ) : (
         <StyledTextNodeWrapper
-          hasCollapse={isParent && hideCollapse}
           data-x={x}
           data-y={y}
           data-key={JSON.stringify(text)}
+          $hasCollapse={isParent && collapseButtonVisible}
         >
-          <Styled.StyledKey parent={isParent} type={type}>
-            <Styled.StyledLinkItUrl>
-              {JSON.stringify(text).replaceAll('"', "")}
-            </Styled.StyledLinkItUrl>
+          <Styled.StyledKey $value={value} $parent={isParent} $type={type}>
+            <TextRenderer>{value}</TextRenderer>
           </Styled.StyledKey>
-          {isParent && childrenCount > 0 && showChildrenCount && (
+          {isParent && childrenCount > 0 && childrenCountVisible && (
             <Styled.StyledChildrenCount>({childrenCount})</Styled.StyledChildrenCount>
           )}
 
-          {isParent && hasCollapse && hideCollapse && (
-            <StyledExpand onClick={handleExpand}>
+          {isParent && hasCollapse && collapseButtonVisible && (
+            <StyledExpand aria-label="Expand" onClick={handleExpand}>
               {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
             </StyledExpand>
           )}
@@ -107,7 +101,11 @@ const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) =>
 };
 
 function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
-  return prev.node.text === next.node.text && prev.node.width === next.node.width;
+  return (
+    prev.node.text === next.node.text &&
+    prev.node.width === next.node.width &&
+    prev.node.data.childrenCount === next.node.data.childrenCount
+  );
 }
 
 export const TextNode = React.memo(Node, propsAreEqual);

src/components/Graph/CustomNode/TextRenderer.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+import styled from "styled-components";
+import { ColorSwatch } from "@mantine/core";
+import * as Styled from "./styles";
+
+const StyledRow = styled.span`
+  display: inline-flex;
+  align-items: center;
+  overflow: hidden;
+  gap: 4px;
+  vertical-align: middle;
+`;
+
+function isColorFormat(colorString: string) {
+  const hexCodeRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
+  const rgbRegex = /^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/;
+  const rgbaRegex = /^rgba\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*,\s*(0|1|0\.\d+)\s*\)$/;
+
+  return (
+    hexCodeRegex.test(colorString) || rgbRegex.test(colorString) || rgbaRegex.test(colorString)
+  );
+}
+
+const isURL =
+  /(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})/gi;
+
+export const TextRenderer: React.FC<{ children: string }> = ({ children }) => {
+  if (isURL.test(children?.replaceAll('"', ""))) {
+    return <Styled.StyledLinkItUrl>{children}</Styled.StyledLinkItUrl>;
+  }
+
+  if (isColorFormat(children?.replaceAll('"', ""))) {
+    return (
+      <StyledRow>
+        <ColorSwatch radius={4} h={12} w={12} mr={8} color={children?.replaceAll('"', "")} />
+        {children?.replaceAll('"', "")}
+      </StyledRow>
+    );
+  }
+  return <>{children}</>;
+};

src/components/Graph/CustomNode/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import dynamic from "next/dynamic";
+import { NodeProps } from "reaflow";
+import useGraph from "src/store/useGraph";
+import useModal from "src/store/useModal";
+import { NodeData } from "src/types/graph";
+import { ObjectNode } from "./ObjectNode";
+import { TextNode } from "./TextNode";
+
+const Node = dynamic(() => import("reaflow").then(r => r.Node), {
+  ssr: false,
+});
+
+export interface CustomNodeProps {
+  node: NodeData;
+  x: number;
+  y: number;
+  hasCollapse?: boolean;
+}
+
+const rootProps = {
+  rx: 50,
+  ry: 50,
+};
+
+const CustomNodeWrapper = (nodeProps: NodeProps<NodeData["data"]>) => {
+  const data = nodeProps.properties.data;
+  const setSelectedNode = useGraph(state => state.setSelectedNode);
+  const setVisible = useModal(state => state.setVisible);
+
+  const handleNodeClick = React.useCallback(
+    (_: React.MouseEvent<SVGGElement, MouseEvent>, data: NodeData) => {
+      if (setSelectedNode) setSelectedNode(data);
+      setVisible("node")(true);
+    },
+    [setSelectedNode, setVisible]
+  );
+
+  return (
+    <Node
+      {...nodeProps}
+      {...(data?.isEmpty && rootProps)}
+      onClick={handleNodeClick as any}
+      animated={false}
+      label={null as any}
+    >
+      {({ node, x, y }) => {
+        if (Array.isArray(nodeProps.properties.text)) {
+          if (data?.isEmpty) return null;
+          return <ObjectNode node={node as NodeData} x={x} y={y} />;
+        }
+
+        return <TextNode node={node as NodeData} hasCollapse={!!data?.childrenCount} x={x} y={y} />;
+      }}
+    </Node>
+  );
+};
+
+export const CustomNode = React.memo(CustomNodeWrapper);

src/components/Graph/CustomNode/styles.tsx

@@ -0,0 +1,99 @@
+import styled, { DefaultTheme } from "styled-components";
+import { LinkItUrl } from "react-linkify-it";
+import { firaMono } from "src/constants/fonts";
+
+type TextColorFn = {
+  theme: DefaultTheme;
+  $type?: string;
+  $value?: string;
+  $parent?: boolean;
+};
+
+function getTextColor({ $value, $type, $parent, theme }: TextColorFn) {
+  // per type
+  if ($parent && $type === "array") return theme.NODE_COLORS.PARENT_ARR;
+  if ($parent && $type === "object") return theme.NODE_COLORS.PARENT_OBJ;
+  if ($type === "object") return theme.NODE_COLORS.NODE_KEY;
+  if ($type === "array") return theme.NODE_COLORS.NODE_VALUE;
+
+  // per value
+  if ($value && !Number.isNaN(+$value)) return theme.NODE_COLORS.INTEGER;
+  if ($value === "true") return theme.NODE_COLORS.BOOL.TRUE;
+  if ($value === "false") return theme.NODE_COLORS.BOOL.FALSE;
+  if ($value === "null") return theme.NODE_COLORS.NULL;
+
+  // default
+  return theme.NODE_COLORS.NODE_VALUE;
+}
+
+export const StyledLinkItUrl = styled(LinkItUrl)`
+  text-decoration: underline;
+  pointer-events: all;
+`;
+
+export const StyledForeignObject = styled.foreignObject<{ $isObject?: boolean }>`
+  text-align: ${({ $isObject }) => !$isObject && "center"};
+  color: ${({ theme }) => theme.NODE_COLORS.TEXT};
+  font-family: ${firaMono.style.fontFamily};
+  font-size: 12px;
+  font-weight: 500;
+  overflow: hidden;
+  pointer-events: none;
+
+  &.searched {
+    background: rgba(27, 255, 0, 0.1);
+    border: 2px solid ${({ theme }) => theme.TEXT_POSITIVE};
+    border-radius: 2px;
+    box-sizing: border-box;
+  }
+
+  .highlight {
+    background: rgba(255, 214, 0, 0.3);
+  }
+
+  .renderVisible {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 12px;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+    cursor: pointer;
+  }
+`;
+
+export const StyledKey = styled.span<{ $parent?: boolean; $type: string; $value?: string }>`
+  display: inline;
+  flex: 1;
+  color: ${({ theme, $type, $parent = false, $value = "" }) =>
+    getTextColor({ $parent, $type, $value, theme })};
+  font-size: ${({ $parent }) => $parent && "14px"};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  padding: ${({ $type }) => $type !== "object" && "10px"};
+  white-space: nowrap;
+`;
+
+export const StyledRow = styled.span<{ $value: string }>`
+  padding: 0 10px;
+  color: ${({ theme, $value }) => getTextColor({ $value, theme })};
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  &:first-of-type {
+    padding-top: 10px;
+  }
+
+  &:last-of-type {
+    padding-bottom: 10px;
+  }
+`;
+
+export const StyledChildrenCount = styled.span`
+  color: ${({ theme }) => theme.NODE_COLORS.CHILD_COUNT};
+  padding: 10px;
+  margin-left: -15px;
+`;

src/components/Graph/PremiumView.tsx

@@ -1,27 +1,134 @@
 import React from "react";
-import { Button } from "@mantine/core";
 import styled from "styled-components";
+import { Button, Image, List, ThemeIcon, Title } from "@mantine/core";
+import { BsCheck } from "react-icons/bs";
+import { paymentURL } from "src/constants/data";
 
 const StyledPremiumView = styled.div`
+  position: relative;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
+  background: #020015;
 
   img {
-    filter: drop-shadow(2px 4px 6px black);
+    filter: drop-shadow(2px 2px 1px black);
   }
-`;
 
-const StyledTitle = styled.h2`
-  font-size: 48px;
-  margin-bottom: 0;
-  background: linear-gradient(to right, #cf0642 0%, #9344cf 100%);
-  -webkit-text-fill-color: transparent;
-  -webkit-text-stroke: 3px black;
-  -webkit-background-clip: text;
+  .glowing {
+    position: relative;
+    min-width: 700px;
+    height: 550px;
+    margin: -150px;
+    transform-origin: right;
+    animation: colorChange 5s linear infinite;
+  }
+
+  .glowing:nth-child(even) {
+    transform-origin: left;
+  }
+
+  @keyframes colorChange {
+    0% {
+      filter: hue-rotate(0deg);
+      transform: rotate(0deg);
+    }
+    100% {
+      filter: hue-rotate(360deg);
+      transform: rotate(360deg);
+    }
+  }
+
+  .glowing span {
+    --i: 1;
+    position: absolute;
+    top: calc(80px * var(--i));
+    left: calc(80px * var(--i));
+    bottom: calc(80px * var(--i));
+    right: calc(80px * var(--i));
+  }
+
+  .glowing span::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: -8px;
+    width: 15px;
+    height: 15px;
+    background: #f00;
+    border-radius: 50%;
+  }
+
+  .glowing span:nth-child(3n + 1)::before {
+    background: rgba(134, 255, 0, 1);
+    box-shadow:
+      0 0 20px rgba(134, 255, 0, 1),
+      0 0 40px rgba(134, 255, 0, 1),
+      0 0 60px rgba(134, 255, 0, 1),
+      0 0 80px rgba(134, 255, 0, 1),
+      0 0 0 8px rgba(134, 255, 0, 0.1);
+  }
+
+  .glowing span:nth-child(3n + 2)::before {
+    background: rgba(255, 214, 0, 1);
+    box-shadow:
+      0 0 20px rgba(255, 214, 0, 1),
+      0 0 40px rgba(255, 214, 0, 1),
+      0 0 60px rgba(255, 214, 0, 1),
+      0 0 80px rgba(255, 214, 0, 1),
+      0 0 0 8px rgba(255, 214, 0, 0.1);
+  }
+
+  .glowing span:nth-child(3n + 3)::before {
+    background: rgba(0, 226, 255, 1);
+    box-shadow:
+      0 0 20px rgba(0, 226, 255, 1),
+      0 0 40px rgba(0, 226, 255, 1),
+      0 0 60px rgba(0, 226, 255, 1),
+      0 0 80px rgba(0, 226, 255, 1),
+      0 0 0 8px rgba(0, 226, 255, 0.1);
+  }
+
+  .glowing span:nth-child(3n + 1) {
+    animation: animate 10s alternate infinite;
+  }
+
+  .glowing span:nth-child(3n + 2) {
+    animation: animate-reverse 3s alternate infinite;
+  }
+
+  .glowing span:nth-child(3n + 3) {
+    animation: animate 8s alternate infinite;
+  }
+
+  @keyframes animate {
+    0% {
+      transform: rotate(180deg);
+    }
+    50% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes animate-reverse {
+    0% {
+      transform: rotate(360deg);
+    }
+
+    50% {
+      transform: rotate(180deg);
+    }
+
+    100% {
+      transform: rotate(0deg);
+    }
+  }
 `;
 
 const StyledInfo = styled.p`
@@ -32,23 +139,66 @@ const StyledInfo = styled.p`
   color: ${({ theme }) => theme.TEXT_NORMAL};
 `;
 
+const StyledContent = styled.div`
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+
+  background: rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(15px);
+  -webkit-backdrop-filter: blur(15px);
+`;
+
 export const PremiumView = () => (
   <StyledPremiumView>
-    <StyledTitle>PLAY BIG!</StyledTitle>
-    <StyledInfo>
-      Upgrade JSON Crack to premium and explore & unlock full potantial of your data!
-    </StyledInfo>
-    <Button
-      size="lg"
-      component="a"
-      variant="gradient"
-      gradient={{ from: "purple", to: "pink" }}
-      href="https://www.patreon.com/jsoncrack"
-      target="_blank"
-      style={{ border: "2px solid black" }}
-    >
-      DO IT!
-    </Button>
-    <img src="/assets/undraw_to_the_stars_re_wq2x.svg" width="300" height="300" alt="oops" />
+    <StyledContent>
+      <Title align="center">
+        <Image width="400" src="assets/icon.png" alt="JSON Crack" />
+      </Title>
+      <StyledInfo>
+        Upgrade JSON Crack to premium and explore full potantial of your data!
+      </StyledInfo>
+
+      <List
+        spacing="xs"
+        size="md"
+        center
+        icon={
+          <ThemeIcon color="teal" size={20} radius="xl">
+            <BsCheck size="1rem" />
+          </ThemeIcon>
+        }
+      >
+        <List.Item>Edit directly on graph</List.Item>
+        <List.Item>JSON Schema support</List.Item>
+        <List.Item>Visualize data at full capability</List.Item>
+        <List.Item>Save & share up to 200 files</List.Item>
+      </List>
+
+      <Button
+        mt="lg"
+        size="lg"
+        component="a"
+        variant="gradient"
+        gradient={{ from: "blue", to: "teal" }}
+        href={paymentURL()}
+        target="_blank"
+      >
+        UPGRADE TO PREMIUM
+      </Button>
+    </StyledContent>
+
+    <div className="glowing">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
   </StyledPremiumView>
 );

src/components/Graph/index.tsx

@@ -1,28 +1,58 @@
 import React from "react";
-import { ReactZoomPanPinchRef, TransformComponent, TransformWrapper } from "react-zoom-pan-pinch";
-import { Canvas, Edge, EdgeProps, ElkRoot, NodeProps } from "reaflow";
-import { CustomNode } from "src/components/CustomNode";
+import dynamic from "next/dynamic";
+import styled from "styled-components";
+import { toast } from "react-hot-toast";
+import { Space } from "react-zoomable-ui";
+import { ElkRoot } from "reaflow/dist/layout/useLayout";
+import { useLongPress } from "use-long-press";
+import { CustomNode } from "src/components/Graph/CustomNode";
+import { ViewMode } from "src/enums/viewMode.enum";
+import useToggleHide from "src/hooks/useToggleHide";
+import { Loading } from "src/layout/Loading";
+import useConfig from "src/store/useConfig";
 import useGraph from "src/store/useGraph";
 import useUser from "src/store/useUser";
-import { getNodePath } from "src/utils/getNodePath";
-import styled from "styled-components";
-import { Loading } from "../Loading";
+import { NodeData } from "src/types/graph";
+import { CustomEdge } from "./CustomEdge";
 import { ErrorView } from "./ErrorView";
 import { PremiumView } from "./PremiumView";
 
+const Canvas = dynamic(() => import("reaflow").then(r => r.Canvas), {
+  ssr: false,
+});
+
 interface GraphProps {
   isWidget?: boolean;
-  openNodeModal: () => void;
 }
 
-const StyledEditorWrapper = styled.div<{ widget: boolean }>`
+const StyledEditorWrapper = styled.div<{ $widget: boolean; $showRulers: boolean }>`
   position: absolute;
   width: 100%;
-  height: ${({ widget }) => (widget ? "calc(100vh - 36px)" : "calc(100vh - 65px)")};
-  background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-  background-image: ${({ theme }) =>
-    `radial-gradient(#505050 1px, ${theme.BACKGROUND_SECONDARY} 1px)`};
-  background-size: 25px 25px;
+  height: ${({ $widget }) => ($widget ? "calc(100vh - 36px)" : "calc(100vh - 63px)")};
+
+  --bg-color: ${({ theme }) => theme.GRID_BG_COLOR};
+  --line-color-1: ${({ theme }) => theme.GRID_COLOR_PRIMARY};
+  --line-color-2: ${({ theme }) => theme.GRID_COLOR_SECONDARY};
+
+  background-color: var(--bg-color);
+  ${({ $showRulers }) =>
+    $showRulers &&
+    `
+    background-image: linear-gradient(var(--line-color-1) 1.5px, transparent 1.5px),
+      linear-gradient(90deg, var(--line-color-1) 1.5px, transparent 1.5px),
+      linear-gradient(var(--line-color-2) 1px, transparent 1px),
+      linear-gradient(90deg, var(--line-color-2) 1px, transparent 1px);
+    background-position:
+      -1.5px -1.5px,
+      -1.5px -1.5px,
+      -1px -1px,
+      -1px -1px;
+    background-size:
+      100px 100px,
+      100px 100px,
+      20px 20px,
+      20px 20px;
+  `};
 
   :active {
     cursor: move;
@@ -37,10 +67,8 @@ const StyledEditorWrapper = styled.div<{ widget: boolean }>`
     fill: ${({ theme }) => theme.BACKGROUND_NODE};
   }
 
-  @media only screen and (max-width: 1440px) {
-    background-image: ${({ theme }) =>
-      `radial-gradient(#505050 0.5px, ${theme.BACKGROUND_SECONDARY} 0.5px)`};
-    background-size: 15px 15px;
+  @media only screen and (max-width: 768px) {
+    height: ${({ $widget }) => ($widget ? "calc(100vh - 36px)" : "100vh")};
   }
 
   @media only screen and (max-width: 320px) {
@@ -48,151 +76,138 @@ const StyledEditorWrapper = styled.div<{ widget: boolean }>`
   }
 `;
 
-export const Graph = ({ isWidget = false, openNodeModal }: GraphProps) => {
-  const isPremium = useUser(state => state.isPremium);
-  const setLoading = useGraph(state => state.setLoading);
-  const setZoomPanPinch = useGraph(state => state.setZoomPanPinch);
-  const centerView = useGraph(state => state.centerView);
-  const setSelectedNode = useGraph(state => state.setSelectedNode);
+const layoutOptions = {
+  "elk.layered.compaction.postCompaction.strategy": "EDGE_LENGTH",
+  "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+};
 
-  const loading = useGraph(state => state.loading);
+const PREMIUM_LIMIT = 200;
+const ERROR_LIMIT_TREE = 5_000;
+const ERROR_LIMIT = 10_000;
+
+const GraphCanvas = ({ isWidget }: GraphProps) => {
+  const { validateHiddenNodes } = useToggleHide();
+  const setLoading = useGraph(state => state.setLoading);
+  const centerView = useGraph(state => state.centerView);
   const direction = useGraph(state => state.direction);
   const nodes = useGraph(state => state.nodes);
   const edges = useGraph(state => state.edges);
 
-  const collapsedNodes = useGraph(state => state.collapsedNodes);
-  const collapsedEdges = useGraph(state => state.collapsedEdges);
-
-  React.useEffect(() => {
-    const nodeList = collapsedNodes.map(id => `[id$="node-${id}"]`);
-    const edgeList = collapsedEdges.map(id => `[class$="edge-${id}"]`);
-
-    const hiddenItems = document.querySelectorAll(".hide");
-    hiddenItems.forEach(item => item.classList.remove("hide"));
-
-    if (nodeList.length) {
-      const selectedNodes = document.querySelectorAll(nodeList.join(","));
-      selectedNodes.forEach(node => node.classList.add("hide"));
-    }
-
-    if (edgeList.length) {
-      const selectedEdges = document.querySelectorAll(edgeList.join(","));
-      selectedEdges.forEach(edge => edge.classList.add("hide"));
-    }
-  }, [collapsedNodes, collapsedEdges]);
-
-  const [size, setSize] = React.useState({
-    width: 1,
-    height: 1,
-  });
-
-  const handleNodeClick = React.useCallback(
-    (_: React.MouseEvent<SVGElement>, data: NodeData) => {
-      if (setSelectedNode)
-        setSelectedNode({ nodeData: data, path: getNodePath(nodes, edges, data.id) });
-      if (openNodeModal) openNodeModal();
-    },
-    [edges, nodes, openNodeModal, setSelectedNode]
-  );
-
-  const onInit = React.useCallback(
-    (ref: ReactZoomPanPinchRef) => {
-      setZoomPanPinch(ref);
-    },
-    [setZoomPanPinch]
-  );
+  const [paneWidth, setPaneWidth] = React.useState(2000);
+  const [paneHeight, setPaneHeight] = React.useState(2000);
 
   const onLayoutChange = React.useCallback(
     (layout: ElkRoot) => {
       if (layout.width && layout.height) {
         const areaSize = layout.width * layout.height;
-        const changeRatio = Math.abs((areaSize * 100) / (size.width * size.height) - 100);
+        const changeRatio = Math.abs((areaSize * 100) / (paneWidth * paneHeight) - 100);
 
-        setSize({
-          width: (layout.width as number) + 400,
-          height: (layout.height as number) + 400,
-        });
+        setPaneWidth(layout.width + 50);
+        setPaneHeight((layout.height as number) + 50);
 
         setTimeout(() => {
-          setLoading(false);
+          validateHiddenNodes();
           window.requestAnimationFrame(() => {
             if (changeRatio > 70 || isWidget) centerView();
+            setLoading(false);
           });
         });
       }
     },
-    [centerView, isWidget, setLoading, size.height, size.width]
+    [isWidget, paneHeight, paneWidth, centerView, setLoading, validateHiddenNodes]
   );
 
-  const onCanvasClick = React.useCallback(() => {
-    const input = document.querySelector("input:focus") as HTMLInputElement;
-    if (input) input.blur();
+  return (
+    <Canvas
+      className="jsoncrack-canvas"
+      onLayoutChange={onLayoutChange}
+      node={p => <CustomNode {...p} />}
+      edge={p => <CustomEdge {...p} />}
+      nodes={nodes}
+      edges={edges}
+      maxHeight={paneHeight}
+      maxWidth={paneWidth}
+      height={paneHeight}
+      width={paneWidth}
+      direction={direction}
+      layoutOptions={layoutOptions}
+      key={direction}
+      pannable={false}
+      zoomable={false}
+      animated={false}
+      readonly={true}
+      dragEdge={null}
+      dragNode={null}
+      fit={true}
+    />
+  );
+};
+
+function getViewType(nodes: NodeData[]) {
+  if (nodes.length > ERROR_LIMIT) return "error";
+  if (nodes.length > ERROR_LIMIT_TREE) return "tree";
+  if (nodes.length > PREMIUM_LIMIT) return "premium";
+  return "graph";
+}
+
+export const Graph = ({ isWidget = false }: GraphProps) => {
+  const setViewPort = useGraph(state => state.setViewPort);
+  const loading = useGraph(state => state.loading);
+  const isPremium = useUser(state => state.premium);
+  const viewType = useGraph(state => getViewType(state.nodes));
+  const gesturesEnabled = useConfig(state => state.gesturesEnabled);
+  const rulersEnabled = useConfig(state => state.rulersEnabled);
+  const setViewMode = useConfig(state => state.setViewMode);
+
+  const callback = React.useCallback(() => {
+    const canvas = document.querySelector(".jsoncrack-canvas") as HTMLDivElement | null;
+    canvas?.classList.add("dragging");
   }, []);
 
-  const memoizedNode = React.useCallback(
-    (props: JSX.IntrinsicAttributes & NodeProps<any>) => (
-      <CustomNode {...props} onClick={handleNodeClick} animated={false} />
-    ),
-    [handleNodeClick]
-  );
+  const bindLongPress = useLongPress(callback, {
+    threshold: 150,
+    onFinish: () => {
+      const canvas = document.querySelector(".jsoncrack-canvas") as HTMLDivElement | null;
+      canvas?.classList.remove("dragging");
+    },
+  });
 
-  const memoizedEdge = React.useCallback(
-    (props: JSX.IntrinsicAttributes & Partial<EdgeProps>) => (
-      <Edge {...props} containerClassName={`edge-${props.id}`} />
-    ),
-    []
-  );
+  const blurOnClick = React.useCallback(() => {
+    if ("activeElement" in document) (document.activeElement as HTMLElement)?.blur();
+  }, []);
 
-  if (nodes.length > 8_000) return <ErrorView />;
+  if (viewType === "error") {
+    return <ErrorView />;
+  }
 
-  if (nodes.length > 1_000 && !isWidget) {
-    if (!isPremium()) return <PremiumView />;
+  if (viewType === "tree") {
+    setViewMode(ViewMode.Tree);
+    toast("This document is too large to display as a graph. Switching to tree view.");
+  }
+
+  if (viewType === "premium" && !isWidget) {
+    if (!isPremium) return <PremiumView />;
   }
 
   return (
     <>
-      <Loading message="Painting graph..." loading={loading} />
-      <StyledEditorWrapper onContextMenu={e => e.preventDefault()} widget={isWidget}>
-        <TransformWrapper
-          maxScale={2}
-          minScale={0.05}
-          initialScale={0.4}
-          wheel={{ step: 0.08 }}
-          zoomAnimation={{ animationType: "linear" }}
-          doubleClick={{ disabled: true }}
-          onInit={onInit}
-          onPanning={ref => ref.instance.wrapperComponent?.classList.add("dragging")}
-          onPanningStop={ref => ref.instance.wrapperComponent?.classList.remove("dragging")}
+      <Loading loading={loading} message="Painting graph..." />
+      <StyledEditorWrapper
+        $widget={isWidget}
+        onContextMenu={e => e.preventDefault()}
+        onClick={blurOnClick}
+        key={String(gesturesEnabled)}
+        $showRulers={rulersEnabled}
+        {...bindLongPress()}
+      >
+        <Space
+          onCreate={setViewPort}
+          onContextMenu={e => e.preventDefault()}
+          treatTwoFingerTrackPadGesturesLikeTouch={gesturesEnabled}
+          pollForElementResizing
         >
-          <TransformComponent
-            wrapperStyle={{
-              width: "100%",
-              height: "100%",
-              overflow: "hidden",
-              display: loading ? "none" : "block",
-            }}
-          >
-            <Canvas
-              className="jsoncrack-canvas"
-              nodes={nodes}
-              edges={edges}
-              maxWidth={size.width}
-              maxHeight={size.height}
-              direction={direction}
-              onLayoutChange={onLayoutChange}
-              onCanvasClick={onCanvasClick}
-              node={memoizedNode}
-              edge={memoizedEdge}
-              key={direction}
-              zoomable={false}
-              animated={false}
-              readonly={true}
-              dragEdge={null}
-              dragNode={null}
-              fit={true}
-            />
-          </TransformComponent>
-        </TransformWrapper>
+          <GraphCanvas isWidget={isWidget} />
+        </Space>
       </StyledEditorWrapper>
     </>
   );

src/components/HovercardAds/index.tsx

@@ -0,0 +1,20 @@
+import React from "react";
+import { useRouter } from "next/router";
+
+export const HovercardAds = () => {
+  const router = useRouter();
+
+  React.useEffect(() => {
+    const isAvailable = document.querySelectorAll("#_hellobar_")[0];
+
+    if (typeof window._bsa !== "undefined" && window._bsa && !!!isAvailable) {
+      window._bsa.init("hellobar", "CE7IPKQL", "placement:jsoncrackcom");
+    }
+
+    if (isAvailable) {
+      window._bsa.reload("#_hellobar_");
+    }
+  }, [router.asPath]);
+
+  return <div id="hellobarContainer"></div>;
+};

src/components/Loading/index.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { Center, Image, Stack, Title } from "@mantine/core";
-import styled, { keyframes } from "styled-components";
-
-interface LoadingProps {
-  loading?: boolean;
-  message?: string;
-}
-
-const fadeIn = keyframes`
- 99% {
-    visibility: hidden;
-  }
-  100% {
-    visibility: visible;
-  }
-`;
-
-const StyledLoading = styled.div<{ visible: boolean }>`
-  display: ${({ visible }) => (visible ? "grid" : "none")};
-  position: fixed;
-  top: 0;
-  left: 0;
-  place-content: center;
-  width: 100%;
-  height: 100vh;
-  text-align: center;
-  background: rgba(30, 30, 30, 0.8);
-  z-index: 100;
-  pointer-events: visiblePainted;
-  cursor: wait;
-  animation: 0.2s ${fadeIn};
-  animation-fill-mode: forwards;
-  visibility: hidden;
-
-  img {
-    transform: rotate(45deg) translate(100px, -70px);
-  }
-`;
-
-const StyledText = styled.span`
-  color: #faa81a;
-`;
-
-const StyledMessage = styled.div`
-  color: #b9bbbe;
-  font-size: 32px;
-  font-weight: 600;
-`;
-
-export const Loading: React.FC<LoadingProps> = ({ loading = true, message }) => (
-  <Center mx="auto">
-    <StyledLoading visible={loading}>
-      <Stack>
-        <Image maw={150} src="./assets/rocket_ship.webp" alt="loading image" />
-        <Title size="4rem">
-          <StyledText>JSON</StyledText> Crack
-        </Title>
-        <StyledMessage>{message ?? "Preparing the environment for you..."}</StyledMessage>
-      </Stack>
-    </StyledLoading>
-  </Center>
-);

src/components/MonacoEditor/index.tsx

@@ -1,10 +1,9 @@
 import React from "react";
-import Editor, { loader, Monaco } from "@monaco-editor/react";
-import debounce from "lodash.debounce";
-import { Loading } from "src/components/Loading";
-import useJson from "src/store/useJson";
-import useStored from "src/store/useStored";
 import styled from "styled-components";
+import Editor, { loader, useMonaco } from "@monaco-editor/react";
+import { Loading } from "src/layout/Loading";
+import useConfig from "src/store/useConfig";
+import useFile from "src/store/useFile";
 
 loader.config({
   paths: {
@@ -14,6 +13,7 @@ loader.config({
 
 const editorOptions = {
   formatOnPaste: true,
+  formatOnType: true,
   minimap: {
     enabled: false,
   },
@@ -21,62 +21,36 @@ const editorOptions = {
 
 const StyledWrapper = styled.div`
   display: grid;
-  height: calc(100vh - 36px);
+  height: calc(100vh - 63px);
   grid-template-columns: 100%;
   grid-template-rows: minmax(0, 1fr);
 `;
 
 export const MonacoEditor = () => {
-  const json = useJson(state => state.json);
-  const setJson = useJson(state => state.setJson);
-  const setError = useJson(state => state.setError);
-  const [loaded, setLoaded] = React.useState(false);
-  const [value, setValue] = React.useState<string | undefined>(json);
-
-  const hasError = useJson(state => state.hasError);
-  const getHasChanges = useJson(state => state.getHasChanges);
-  const lightmode = useStored(state => (state.lightmode ? "light" : "vs-dark"));
-
-  const handleEditorWillMount = React.useCallback(
-    (monaco: Monaco) => {
-      monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-        allowComments: true,
-        comments: "ignore",
-      });
-
-      monaco.editor.onDidChangeMarkers(([uri]) => {
-        const markers = monaco.editor.getModelMarkers({ resource: uri });
-        setError(!!markers.length);
-      });
-    },
-    [setError]
-  );
-
-  const debouncedSetJson = React.useMemo(
-    () =>
-      debounce(value => {
-        if (hasError) return;
-        setJson(value || "[]");
-      }, 1200),
-    [hasError, setJson]
-  );
+  const monaco = useMonaco();
+  const contents = useFile(state => state.contents);
+  const setContents = useFile(state => state.setContents);
+  const setError = useFile(state => state.setError);
+  const jsonSchema = useFile(state => state.jsonSchema);
+  const getHasChanges = useFile(state => state.getHasChanges);
+  const theme = useConfig(state => (state.darkmodeEnabled ? "vs-dark" : "light"));
+  const fileType = useFile(state => state.format);
 
   React.useEffect(() => {
-    if ((value || !hasError) && loaded) debouncedSetJson(value);
-    setLoaded(true);
-
-    return () => debouncedSetJson.cancel();
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [debouncedSetJson, hasError, value]);
-
-  const handleChange = React.useCallback((value?: string) => {
-    try {
-      const parsedJson = JSON.stringify(JSON.parse(value!), null, 2);
-      setValue(parsedJson);
-    } catch (error) {
-      setValue(value);
-    }
-  }, []);
+    monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      allowComments: true,
+      enableSchemaRequest: true,
+      ...(jsonSchema && {
+        schemas: [
+          {
+            fileMatch: ["*"],
+            schema: jsonSchema,
+          },
+        ],
+      }),
+    });
+  }, [jsonSchema, monaco?.languages.json.jsonDefaults]);
 
   React.useEffect(() => {
     const beforeunload = (e: BeforeUnloadEvent) => {
@@ -99,14 +73,14 @@ export const MonacoEditor = () => {
   return (
     <StyledWrapper>
       <Editor
-        value={json}
-        theme={lightmode}
-        options={editorOptions}
-        onChange={handleChange}
-        loading={<Loading message="Loading Editor..." />}
-        beforeMount={handleEditorWillMount}
-        defaultLanguage="json"
         height="100%"
+        language={fileType}
+        theme={theme}
+        value={contents}
+        options={editorOptions}
+        onValidate={errors => setError(errors[0]?.message)}
+        onChange={contents => setContents({ contents, skipUpdate: true })}
+        loading={<Loading message="Loading Editor..." />}
       />
     </StyledWrapper>
   );

src/components/Navbar/index.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import styled from "styled-components";
-
-const StyledNavbar = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  gap: 20px;
-  padding: 16px 48px;
-
-  @media only screen and (max-width: 768px) {
-    justify-content: center;
-
-    a:first-of-type {
-      display: none;
-    }
-  }
-`;
-
-const StyledLinkWrapper = styled.nav`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 20px;
-`;
-
-const StyledNavLink = styled(Link)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: color 0.2s;
-
-  &:hover {
-    font-weight: 500;
-    color: ${({ theme }) => theme.ORANGE};
-  }
-
-  @media only screen and (max-width: 568px) {
-    &.mobileHide {
-      display: none;
-    }
-  }
-`;
-
-export const Navbar = () => (
-  <StyledNavbar>
-    <Link href="/">
-      <img src="assets/icon.png" alt="json crack" width="120" />
-    </Link>
-    <StyledLinkWrapper>
-      <StyledNavLink className="mobileHide" href="https://pro.jsoncrack.com">
-        Pro
-      </StyledNavLink>
-      <StyledNavLink href="/editor">Editor</StyledNavLink>
-      <StyledNavLink href="#features">Features</StyledNavLink>
-      <StyledNavLink className="mobileHide" href="#sponsor">
-        Sponsor
-      </StyledNavLink>
-      <StyledNavLink
-        href="https://github.com/AykutSarac/jsoncrack.com"
-        target="_blank"
-        rel="external"
-      >
-        GitHub
-      </StyledNavLink>
-      <StyledNavLink className="mobileHide" href="docs">
-        Documentation
-      </StyledNavLink>
-    </StyledLinkWrapper>
-  </StyledNavbar>
-);

src/components/SearchInput/index.tsx

@@ -1,95 +1,32 @@
 import React from "react";
+import { Flex, Input, Text } from "@mantine/core";
+import { getHotkeyHandler } from "@mantine/hooks";
+import ReactGA from "react-ga4";
 import { AiOutlineSearch } from "react-icons/ai";
-import { IoCloseSharp } from "react-icons/io5";
 import { useFocusNode } from "src/hooks/useFocusNode";
-import styled from "styled-components";
-
-const StyledInputWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  border-radius: 4px;
-  height: 25px;
-`;
-
-const StyledForm = styled.form`
-  display: flex;
-  align-items: center;
-  padding: 4px 6px;
-`;
-
-const StyledInput = styled.input<{ hasInput: boolean }>`
-  background: none;
-  color: ${({ theme }) => theme.TEXT_NORMAL};
-  outline: none;
-  border: none;
-  width: 112px;
-  font-size: 14px;
-  font-weight: 500;
-  transition: width 0.3s;
-
-  &::-webkit-search-decoration,
-  &::-webkit-search-cancel-button,
-  &::-webkit-search-results-button,
-  &::-webkit-search-results-decoration {
-    display: none;
-  }
-
-  &:focus {
-    width: ${({ hasInput }) => hasInput && "165px"};
-  }
-`;
-
-const StyledSearchButton = styled.button`
-  display: grid;
-  background: none;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-  padding: 0;
-  min-height: unset;
-
-  &:hover {
-    box-shadow: none;
-  }
-`;
-
-const StyledCountInfo = styled.span`
-  font-size: 14px;
-  letter-spacing: 2px;
-  padding: 0 6px;
-  opacity: 0.5;
-`;
 
 export const SearchInput: React.FC = () => {
-  const [content, setContent, skip, nodeCount, currentNode] = useFocusNode();
-
-  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-    e.preventDefault();
-    skip();
-  };
-
-  const handleClear = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-    setContent({ value: "", debounced: "" });
-  };
+  const [searchValue, setValue, skip, nodeCount, currentNode] = useFocusNode();
 
   return (
-    <StyledInputWrapper>
-      <StyledForm onSubmit={onSubmit}>
-        <StyledInput
-          type="search"
-          value={content.value}
-          onChange={e => setContent(val => ({ ...val, value: e.target.value }))}
-          placeholder="Search Node"
-          hasInput={!!content.value.length}
-        />
-        <StyledCountInfo>
-          {content.value && `${nodeCount}/${nodeCount > 0 ? currentNode + 1 : "0"}`}
-        </StyledCountInfo>
-        <StyledSearchButton type="reset" aria-label="search" onClick={handleClear}>
-          {content.value ? <IoCloseSharp size={18} /> : <AiOutlineSearch size={18} />}
-        </StyledSearchButton>
-      </StyledForm>
-    </StyledInputWrapper>
+    <Input
+      type="search"
+      size="xs"
+      id="search-node"
+      w={180}
+      value={searchValue}
+      onChange={e => setValue(e.currentTarget.value)}
+      onFocus={() => ReactGA.event({ action: "focus_node_search", category: "User" })}
+      placeholder="Search Node"
+      onKeyDown={getHotkeyHandler([["Enter", skip]])}
+      icon={<AiOutlineSearch />}
+      rightSection={
+        <Flex h={30} align="center" gap="sm">
+          <Text size="xs" color="dimmed">
+            {searchValue && `${nodeCount}/${nodeCount > 0 ? currentNode + 1 : "0"}`}
+          </Text>
+        </Flex>
+      }
+    />
   );
 };

src/components/Sidebar/index.tsx

@@ -1,267 +0,0 @@
-import React from "react";
-import { Tooltip } from "@mantine/core";
-import toast from "react-hot-toast";
-import { AiOutlineDelete, AiOutlineSave, AiOutlineFileAdd, AiOutlineEdit } from "react-icons/ai";
-import { CgArrowsMergeAltH, CgArrowsShrinkH } from "react-icons/cg";
-import { TiFlowMerge } from "react-icons/ti";
-import {
-  VscAccount,
-  VscCloud,
-  VscCollapseAll,
-  VscExpandAll,
-  VscSettingsGear,
-} from "react-icons/vsc";
-import useGraph from "src/store/useGraph";
-import useJson from "src/store/useJson";
-import useModal from "src/store/useModal";
-import { getNextDirection } from "src/utils/getNextDirection";
-import styled from "styled-components";
-
-const StyledSidebar = styled.div`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: center;
-  width: fit-content;
-  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  padding: 4px;
-  border-right: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
-
-  @media only screen and (max-width: 768px) {
-    flex-direction: row;
-    width: 100%;
-  }
-`;
-
-const StyledElement = styled.button`
-  position: relative;
-  display: flex;
-  justify-content: center;
-  text-align: center;
-  font-size: 24px;
-  font-weight: 600;
-  width: fit-content;
-  color: ${({ theme }) => theme.SIDEBAR_ICONS};
-  cursor: pointer;
-
-  svg {
-    padding: 12px 8px;
-    vertical-align: middle;
-  }
-
-  a {
-    display: flex;
-  }
-
-  &:hover :is(a, svg) {
-    color: ${({ theme }) => theme.INTERACTIVE_HOVER};
-  }
-
-  @media only screen and (max-width: 768px) {
-    font-size: 22px;
-
-    svg {
-      padding: 8px 4px;
-      vertical-align: middle;
-    }
-  }
-`;
-
-const StyledText = styled.span<{ secondary?: boolean }>`
-  color: ${({ theme, secondary }) => (secondary ? theme.INTERACTIVE_HOVER : theme.ORANGE)};
-`;
-
-const StyledFlowIcon = styled(TiFlowMerge)<{ rotate: number }>`
-  transform: rotate(${({ rotate }) => `${rotate}deg`});
-`;
-
-const StyledTopWrapper = styled.nav`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-
-  .mobile {
-    display: none;
-  }
-
-  @media only screen and (max-width: 768px) {
-    justify-content: space-evenly;
-    flex-direction: row;
-
-    .mobile {
-      display: initial;
-    }
-
-    .desktop {
-      display: none;
-    }
-  }
-`;
-
-const StyledBottomWrapper = styled.nav`
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-
-  @media only screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-const StyledLogo = styled.a`
-  color: ${({ theme }) => theme.FULL_WHITE};
-  padding: 8px 4px;
-  border-bottom: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
-
-  @media only screen and (max-width: 768px) {
-    border-bottom: 0;
-  }
-`;
-
-function rotateLayout(direction: "LEFT" | "RIGHT" | "DOWN" | "UP") {
-  if (direction === "LEFT") return 90;
-  if (direction === "UP") return 180;
-  if (direction === "RIGHT") return 270;
-  return 360;
-}
-
-const SidebarButton: React.FC<{
-  onClick: () => void;
-  deviceDisplay?: "desktop" | "mobile";
-  title: string;
-  component: React.ReactNode;
-}> = ({ onClick, deviceDisplay, title, component }) => {
-  return (
-    <Tooltip className={deviceDisplay} label={title} color="gray" position="right" withArrow>
-      <StyledElement onClick={onClick}>{component}</StyledElement>
-    </Tooltip>
-  );
-};
-
-export const Sidebar: React.FC = () => {
-  const setVisible = useModal(state => state.setVisible);
-  const setDirection = useGraph(state => state.setDirection);
-  const getJson = useJson(state => state.getJson);
-
-  const collapseGraph = useGraph(state => state.collapseGraph);
-  const expandGraph = useGraph(state => state.expandGraph);
-  const toggleFold = useGraph(state => state.toggleFold);
-  const toggleFullscreen = useGraph(state => state.toggleFullscreen);
-
-  const direction = useGraph(state => state.direction);
-  const foldNodes = useGraph(state => state.foldNodes);
-  const fullscreen = useGraph(state => state.fullscreen);
-  const graphCollapsed = useGraph(state => state.graphCollapsed);
-
-  const handleSave = () => {
-    const a = document.createElement("a");
-    const file = new Blob([getJson()], { type: "text/plain" });
-
-    a.href = window.URL.createObjectURL(file);
-    a.download = "jsoncrack.json";
-    a.click();
-  };
-
-  const toggleFoldNodes = () => {
-    toggleFold(!foldNodes);
-    toast(`${foldNodes ? "Unfolded" : "Folded"} nodes`);
-  };
-
-  const toggleDirection = () => {
-    const nextDirection = getNextDirection(direction);
-    setDirection(nextDirection);
-  };
-
-  const toggleExpandCollapseGraph = () => {
-    if (graphCollapsed) expandGraph();
-    else collapseGraph();
-
-    toast(`${graphCollapsed ? "Expanded" : "Collapsed"} graph.`);
-  };
-
-  return (
-    <StyledSidebar>
-      <StyledTopWrapper>
-        <StyledElement href="/" as={StyledLogo}>
-          <StyledText>J</StyledText>
-          <StyledText secondary>C</StyledText>
-        </StyledElement>
-
-        <SidebarButton
-          title="Edit JSON"
-          deviceDisplay="mobile"
-          onClick={() => toggleFullscreen(!fullscreen)}
-          component={<AiOutlineEdit />}
-        />
-
-        <SidebarButton
-          title="Import File"
-          onClick={() => setVisible("import")(true)}
-          component={<AiOutlineFileAdd />}
-        />
-
-        <SidebarButton
-          title="Rotate Layout"
-          onClick={toggleDirection}
-          component={<StyledFlowIcon rotate={rotateLayout(direction)} />}
-        />
-
-        <SidebarButton
-          title={foldNodes ? "Unfold Nodes" : "Fold Nodes"}
-          deviceDisplay="desktop"
-          onClick={toggleFoldNodes}
-          component={foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
-        />
-
-        <SidebarButton
-          title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}
-          onClick={toggleExpandCollapseGraph}
-          component={graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
-        />
-
-        <SidebarButton
-          title="Download JSON"
-          deviceDisplay="desktop"
-          onClick={handleSave}
-          component={<AiOutlineSave />}
-        />
-
-        <SidebarButton
-          title="Delete JSON"
-          onClick={() => setVisible("clear")(true)}
-          component={<AiOutlineDelete />}
-        />
-
-        <SidebarButton
-          title="View Cloud"
-          deviceDisplay="desktop"
-          onClick={() => setVisible("cloud")(true)}
-          component={<VscCloud />}
-        />
-
-        <SidebarButton
-          title="Settings"
-          deviceDisplay="mobile"
-          onClick={() => setVisible("settings")(true)}
-          component={<VscSettingsGear />}
-        />
-      </StyledTopWrapper>
-      <StyledBottomWrapper>
-        <SidebarButton
-          title="Account"
-          onClick={() => setVisible("account")(true)}
-          component={<VscAccount />}
-        />
-        <SidebarButton
-          title="Settings"
-          onClick={() => setVisible("settings")(true)}
-          component={<VscSettingsGear />}
-        />
-      </StyledBottomWrapper>
-    </StyledSidebar>
-  );
-};

src/components/Sponsors/index.tsx

@@ -1,101 +0,0 @@
-import React from "react";
-import { Avatar, Tooltip, UnstyledButton } from "@mantine/core";
-import useStored from "src/store/useStored";
-import styled from "styled-components";
-
-async function getSponsors() {
-  try {
-    const res = await fetch("https://ghs.vercel.app/sponsors/aykutsarac");
-    const data = await res.json();
-
-    if (data.sponsors) {
-      return data.sponsors.map(user => ({
-        handle: user.handle,
-        avatar: user.avatar,
-        profile: user.profile,
-      }));
-    }
-
-    return [];
-  } catch (error) {
-    console.error(error);
-    return [];
-  }
-}
-
-const StyledSponsorsWrapper = styled.ul`
-  display: flex;
-  width: 70%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  gap: 10px;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-`;
-
-const StyledSponsor = styled.li<{ handle: string }>`
-  display: flex;
-  justify-content: center;
-  position: relative;
-
-  &:hover {
-    &::before {
-      content: "${({ handle }) => handle}";
-      position: absolute;
-      top: 0;
-      background: ${({ theme }) => theme.BACKGROUND_PRIMARY};
-      transform: translateY(-130%);
-      padding: 6px 8px;
-      border-radius: 4px;
-      font-weight: 500;
-      font-size: 14px;
-      color: ${({ theme }) => theme.TEXT_NORMAL};
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      transform: translateY(-110%);
-      border-width: 5px;
-      border-style: solid;
-      border-color: ${({ theme }) => theme.BACKGROUND_PRIMARY} transparent transparent transparent;
-    }
-  }
-
-  img {
-    border-radius: 100%;
-  }
-`;
-
-export const Sponsors = () => {
-  const { sponsors, setSponsors } = useStored();
-
-  React.useEffect(() => {
-    if (!sponsors?.nextDate || sponsors?.nextDate < Date.now()) {
-      getSponsors().then(setSponsors);
-    }
-  }, [setSponsors, sponsors?.nextDate]);
-
-  if (!sponsors?.users?.length) return null;
-
-  return (
-    <StyledSponsorsWrapper>
-      {sponsors.users.map(user => (
-        <Tooltip label={user.handle} key={user.handle}>
-          <UnstyledButton
-            component="a"
-            href={user.profile}
-            variant="subtle"
-            target="_blank"
-            rel="noreferrer"
-          >
-            <Avatar radius="md" src={user.avatar} alt={user.handle} />
-          </UnstyledButton>
-        </Tooltip>
-      ))}
-    </StyledSponsorsWrapper>
-  );
-};

src/components/SupportButton/index.tsx

@@ -1,53 +0,0 @@
-import React from "react";
-import { HiHeart } from "react-icons/hi";
-import styled from "styled-components";
-
-const StyledText = styled.span`
-  white-space: nowrap;
-  opacity: 0;
-  width: 0px;
-  transition: 0.2s;
-  font-weight: 600;
-`;
-
-const StyledSupportButton = styled.a`
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  right: 15px;
-  bottom: 15px;
-  border-radius: 50%;
-  width: 24px;
-  padding: 8px;
-  height: 24px;
-  background: ${({ theme }) => theme.DANGER};
-  transition: all 0.5s;
-  overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
-    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07),
-    0 32px 64px rgba(0, 0, 0, 0.07);
-  opacity: 0.7;
-  box-sizing: content-box !important;
-
-  &:hover {
-    width: 180px;
-    border-radius: 6px;
-
-    ${StyledText} {
-      opacity: 1;
-      width: fit-content;
-      margin-right: 8px;
-    }
-  }
-`;
-
-export const SupportButton = () => {
-  return (
-    <StyledSupportButton href="https://github.com/sponsors/AykutSarac" target="_blank" rel="me">
-      <StyledText>Support JSON Crack</StyledText>
-      <HiHeart size={25} />
-    </StyledSupportButton>
-  );
-};

src/constants/data.ts

@@ -1,4 +1,14 @@
-export const baseURL = process.env.NEXT_PUBLIC_BASE_URL;
+import useUser from "src/store/useUser";
+
+export const baseURL = process.env.NEXT_PUBLIC_BASE_URL as string;
+
+export const paymentURL = () => {
+  const email = useUser.getState().user?.email;
+  let url = process.env.NEXT_PUBLIC_PAYMENT_URL as string;
+
+  if (email) url += `?checkout[email]=${email}`;
+  return url;
+};
 
 // Example taken from https://mdn.github.io/learning-area/javascript/oojs/json/superheroes.json
 const sampleJson = Object.freeze({

src/constants/fonts.ts

@@ -0,0 +1,18 @@
+import { Fira_Mono } from "next/font/google";
+import localFont from "next/font/local";
+
+const monaSans = localFont({
+  src: "../assets/fonts/Mona-Sans.woff2",
+  variable: "--mona-sans",
+  display: "swap",
+  fallback: ["Futura, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],
+});
+
+const firaMono = Fira_Mono({
+  weight: ["500"],
+  subsets: ["latin"],
+  display: "swap",
+  fallback: ["Menlo, Monaco, monospace", "Consolas, Courier New, monospace"],
+});
+
+export { monaSans, firaMono };

src/constants/globalStyle.ts

@@ -1,28 +1,12 @@
-import localFont from "next/font/local";
 import { createGlobalStyle } from "styled-components";
 
-const monaSans = localFont({
-  src: "../pages/Mona-Sans.woff2",
-  variable: "--mona-sans",
-  display: "swap",
-  fallback: ["Arial, Helvetica, sans-serif", "Tahoma, Verdana, sans-serif"],
-});
-
 const GlobalStyle = createGlobalStyle`
   html, body {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    color: ${({ theme }) => theme.FULL_WHITE};
-    font-family: var(--mona-sans);
+    color: ${({ theme }) => theme.FULL_WHITE} !important;
     font-weight: 400;
     font-size: 16px;
-    height: 100%;
-    background-color: #000000;
-    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.3'%3E%3Ccircle fill='%23000000' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23110718' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23220e30' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23331447' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23441b5f' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23552277' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
-    background-attachment: fixed;
-    background-size: cover;
-    font-family: ${monaSans.style.fontFamily};
+    background: rgb(246,249,253) !important;
+    background: radial-gradient(circle, rgb(245 245 245) 33%, rgb(252 252 255) 100%) !important;
 
     @media only screen and (max-width: 768px) {
       background-position: right;
@@ -38,6 +22,10 @@ const GlobalStyle = createGlobalStyle`
     display: none;
   }
 
+  /* g {
+    opacity: 1 !important;
+  } */
+
   .mantine-Modal-inner {
     padding: 0;
   }
@@ -46,12 +34,9 @@ const GlobalStyle = createGlobalStyle`
     vertical-align: text-top;
   }
 
-  
   a {
-    text-decoration: none;
     color: unset;
-    padding: 0;
-    margin: 0;
+    text-decoration: none;
   }
 
   button {
@@ -73,12 +58,12 @@ const GlobalStyle = createGlobalStyle`
   #carbonads {
     --carbon-font-size: 16px;
     --carbon-padding-size: 12px;
-    border-radius: 4px;
-    overflow: hidden;
   }
 
   #carbonads {
-    display: inline-block;
+    width: 100%;
+    z-index: 100;
+    display: block;
 
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI',
       Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue',
@@ -88,9 +73,8 @@ const GlobalStyle = createGlobalStyle`
 
   #carbonads > span {
     min-width: 18.75em;
-    max-width: clamp(18.75em, 22.5em, 24.5em);
     min-height: 100px;
-    background-color: ${({ theme }) => theme.BACKGROUND_SECONDARY};
+    background-color: hsl(0, 0%, 10%);
     box-shadow: 0 0 1px hsl(0deg 0% 0% / 0.085),
       0 0 2px hsl(0deg 0% 0% / 0.085),
       0 0 4px hsl(0deg 0% 0% / 0.085),
@@ -99,11 +83,11 @@ const GlobalStyle = createGlobalStyle`
 
   #carbonads a {
     text-decoration: none;
-    color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+    color: #ddd;
   }
 
   #carbonads a:hover {
-    color: ${({ theme }) => theme.INTERACTIVE_HOVER};
+    color: #ddd;
   }
 
   #carbonads span {
@@ -136,8 +120,8 @@ const GlobalStyle = createGlobalStyle`
   #carbonads .carbon-poweredby {
     display: block;
     padding: 6px 8px;
-    color: ${({ theme }) => theme.TEXT_NORMAL};
-    background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
+    color: #aaa;
+    background: #1e2021;
     text-align: center;
     text-transform: uppercase;
     letter-spacing: 0.1ch;
@@ -149,6 +133,7 @@ const GlobalStyle = createGlobalStyle`
     bottom: 0;
     right: 0;
   }
+
 `;
 
 export default GlobalStyle;

src/constants/previewSection.ts

@@ -1,91 +0,0 @@
-import { defaultJson } from "./data";
-
-export const TABS = [
-  {
-    id: 0,
-    name: "Standard JSON",
-    json: defaultJson,
-  },
-  {
-    id: 1,
-    name: "Gallery",
-    json: JSON.stringify(
-      {
-        "cats! 🐾": [
-          "https://gifimage.net/wp-content/uploads/2017/10/cool-cat-gif-1.gif",
-          "https://media.tenor.com/vRHYVqQCMQAAAAAM/cool-cat-chilling.gif",
-          "https://media.tenor.com/k6B6P_kvBSYAAAAM/awesome-cat.gif",
-        ],
-      },
-      null,
-      2
-    ),
-  },
-  {
-    id: 2,
-    name: "Nested JSON",
-    json: JSON.stringify(
-      [
-        {
-          id: "0001",
-          type: "donut",
-          name: "Cake",
-          ppu: 0.55,
-          batters: {
-            batter: [
-              { id: "1001", type: "Regular" },
-              { id: "1002", type: "Chocolate" },
-              { id: "1003", type: "Blueberry" },
-              { id: "1004", type: "Devil's Food" },
-            ],
-          },
-          topping: [
-            { id: "5001", type: "None" },
-            { id: "5002", type: "Glazed" },
-            { id: "5005", type: "Sugar" },
-            { id: "5007", type: "Powdered Sugar" },
-            { id: "5006", type: "Chocolate with Sprinkles" },
-            { id: "5003", type: "Chocolate" },
-            { id: "5004", type: "Maple" },
-          ],
-        },
-        {
-          id: "0002",
-          type: "donut",
-          name: "Raised",
-          ppu: 0.55,
-          batters: {
-            batter: [{ id: "1001", type: "Regular" }],
-          },
-          topping: [
-            { id: "5001", type: "None" },
-            { id: "5002", type: "Glazed" },
-            { id: "5005", type: "Sugar" },
-            { id: "5003", type: "Chocolate" },
-            { id: "5004", type: "Maple" },
-          ],
-        },
-        {
-          id: "0003",
-          type: "donut",
-          name: "Old Fashioned",
-          ppu: 0.55,
-          batters: {
-            batter: [
-              { id: "1001", type: "Regular" },
-              { id: "1002", type: "Chocolate" },
-            ],
-          },
-          topping: [
-            { id: "5001", type: "None" },
-            { id: "5002", type: "Glazed" },
-            { id: "5003", type: "Chocolate" },
-            { id: "5004", type: "Maple" },
-          ],
-        },
-      ],
-      null,
-      2
-    ),
-  },
-];

src/constants/theme.ts

@@ -17,10 +17,25 @@ const fixedColors = {
   TEXT_DANGER: "#db662e",
 };
 
+const promptInputColors = {
+  dark: {
+    PROMPT_BG: "#072719",
+    PROMPT_PLACEHOLDER_COLOR: "#15593A",
+    PROMPT_TEXT_COLOR: "#3DCF8E",
+    PROMPT_BORDER_COLOR: "#0C3924",
+  },
+  light: {
+    PROMPT_BG: "#d3ede1",
+    PROMPT_PLACEHOLDER_COLOR: "#77c2a1",
+    PROMPT_TEXT_COLOR: "#289b67",
+    PROMPT_BORDER_COLOR: "#8ad7b3",
+  },
+};
+
 const nodeColors = {
   dark: {
     NODE_COLORS: {
-      TEXT: "#35D073",
+      TEXT: "#DCE5E7",
       NODE_KEY: "#59b8ff",
       NODE_VALUE: "#DCE5E7",
       INTEGER: "#e8c479",
@@ -36,10 +51,10 @@ const nodeColors = {
   },
   light: {
     NODE_COLORS: {
-      TEXT: "#748700",
+      TEXT: "#000",
       NODE_KEY: "#761CEA",
       NODE_VALUE: "#535353",
-      INTEGER: "#A771FE",
+      INTEGER: "#FD0079",
       NULL: "#afafaf",
       BOOL: {
         FALSE: "#FF0000",
@@ -55,6 +70,7 @@ const nodeColors = {
 export const darkTheme = {
   ...fixedColors,
   ...nodeColors.dark,
+  ...promptInputColors.dark,
   BLACK_SECONDARY: "#23272A",
   SILVER_DARK: "#4D4D4D",
   NODE_KEY: "#FAA81A",
@@ -67,16 +83,21 @@ export const darkTheme = {
   BACKGROUND_NODE: "#2B2C3E",
   BACKGROUND_TERTIARY: "#202225",
   BACKGROUND_SECONDARY: "#2f3136",
+  TOOLBAR_BG: "#2f3136",
   BACKGROUND_PRIMARY: "#36393f",
   BACKGROUND_MODIFIER_ACCENT: "rgba(79,84,92,0.48)",
   MODAL_BACKGROUND: "#36393E",
   TEXT_NORMAL: "#dcddde",
   TEXT_POSITIVE: "hsl(139,calc(var(--saturation-factor, 1)*51.6%),52.2%)",
+  GRID_BG_COLOR: "#1C1C1C",
+  GRID_COLOR_PRIMARY: "#2A2A2A",
+  GRID_COLOR_SECONDARY: "#252525",
 };
 
 export const lightTheme = {
   ...fixedColors,
   ...nodeColors.light,
+  ...promptInputColors.light,
   BLACK_SECONDARY: "#F2F2F2",
   SILVER_DARK: "#CCCCCC",
   NODE_KEY: "#DC3790",
@@ -86,14 +107,18 @@ export const lightTheme = {
   INTERACTIVE_NORMAL: "#4f5660",
   INTERACTIVE_HOVER: "#2e3338",
   INTERACTIVE_ACTIVE: "#060607",
-  BACKGROUND_NODE: "#FAFAFA",
+  BACKGROUND_NODE: "#F6F8FA",
   BACKGROUND_TERTIARY: "#e3e5e8",
   BACKGROUND_SECONDARY: "#f2f3f5",
+  TOOLBAR_BG: "#FAFAFA",
   BACKGROUND_PRIMARY: "#FFFFFF",
   BACKGROUND_MODIFIER_ACCENT: "rgba(106,116,128,0.24)",
   MODAL_BACKGROUND: "#FFFFFF",
   TEXT_NORMAL: "#2e3338",
   TEXT_POSITIVE: "#008736",
+  GRID_BG_COLOR: "#f3f3f3",
+  GRID_COLOR_PRIMARY: "#E0E0E0",
+  GRID_COLOR_SECONDARY: "#E4E4E4",
 };
 
 const themeDs = {

src/containers/Editor/BottomBar.tsx

@@ -1,6 +1,8 @@
 import React from "react";
 import Head from "next/head";
 import { useRouter } from "next/router";
+import styled from "styled-components";
+import { Flex, Popover, Text } from "@mantine/core";
 import toast from "react-hot-toast";
 import {
   AiOutlineCloudSync,
@@ -9,15 +11,19 @@ import {
   AiOutlineLock,
   AiOutlineUnlock,
 } from "react-icons/ai";
-import { VscAccount } from "react-icons/vsc";
-import { saveJson, updateJson } from "src/services/db/json";
-import useJson from "src/store/useJson";
+import { BiSolidDockLeft } from "react-icons/bi";
+import { MdOutlineCheckCircleOutline } from "react-icons/md";
+import { TbTransform } from "react-icons/tb";
+import { VscError, VscFeedback, VscSourceControl, VscSync, VscSyncIgnored } from "react-icons/vsc";
+import { documentSvc } from "src/services/document.service";
+import useConfig from "src/store/useConfig";
+import useFile from "src/store/useFile";
+import useGraph from "src/store/useGraph";
 import useModal from "src/store/useModal";
-import useStored from "src/store/useStored";
 import useUser from "src/store/useUser";
-import styled from "styled-components";
 
 const StyledBottomBar = styled.div`
+  position: relative;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -25,9 +31,10 @@ const StyledBottomBar = styled.div`
   background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
   max-height: 27px;
   height: 27px;
-  padding: 0 6px;
+  z-index: 35;
+  padding-right: 6px;
 
-  @media only screen and (max-width: 768px) {
+  @media screen and (max-width: 320px) {
     display: none;
   }
 `;
@@ -37,6 +44,11 @@ const StyledLeft = styled.div`
   align-items: center;
   justify-content: left;
   gap: 4px;
+  padding-left: 8px;
+
+  @media screen and (max-width: 480px) {
+    display: none;
+  }
 `;
 
 const StyledRight = styled.div`
@@ -46,7 +58,7 @@ const StyledRight = styled.div`
   gap: 4px;
 `;
 
-const StyledBottomBarItem = styled.button`
+const StyledBottomBarItem = styled.button<{ $bg?: string }>`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -57,6 +69,10 @@ const StyledBottomBarItem = styled.button`
   font-size: 12px;
   font-weight: 400;
   color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  background: ${({ $bg }) => $bg};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 
   &:hover:not(&:disabled) {
     background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
@@ -64,28 +80,34 @@ const StyledBottomBarItem = styled.button`
   }
 
   &:disabled {
-    opacity: 0.4;
+    opacity: 0.6;
     cursor: default;
   }
 `;
 
-const StyledImg = styled.img<{ light: boolean }>`
-  filter: ${({ light }) => light && "invert(100%)"};
-`;
-
 export const BottomBar = () => {
-  const { replace, query } = useRouter();
-  const data = useJson(state => state.data);
+  const { query, replace } = useRouter();
+  const data = useFile(state => state.fileData);
   const user = useUser(state => state.user);
-  const lightmode = useStored(state => state.lightmode);
-  const hasChanges = useJson(state => state.hasChanges);
+  const toggleLiveTransform = useConfig(state => state.toggleLiveTransform);
+  const liveTransformEnabled = useConfig(state => state.liveTransformEnabled);
+  const hasChanges = useFile(state => state.hasChanges);
+  const error = useFile(state => state.error);
+  const getContents = useFile(state => state.getContents);
+  const setContents = useFile(state => state.setContents);
+  const nodeCount = useGraph(state => state.nodes.length);
+  const fileName = useFile(state => state.fileData?.name);
+  const toggleFullscreen = useGraph(state => state.toggleFullscreen);
+  const fullscreen = useGraph(state => state.fullscreen);
 
-  const getJson = useJson(state => state.getJson);
   const setVisible = useModal(state => state.setVisible);
-  const setHasChanges = useJson(state => state.setHasChanges);
+  const setHasChanges = useFile(state => state.setHasChanges);
+  const getFormat = useFile(state => state.getFormat);
   const [isPrivate, setIsPrivate] = React.useState(false);
   const [isUpdating, setIsUpdating] = React.useState(false);
 
+  const toggleEditor = () => toggleFullscreen(!fullscreen);
+
   React.useEffect(() => {
     setIsPrivate(data?.private ?? true);
   }, [data]);
@@ -93,28 +115,43 @@ export const BottomBar = () => {
   const handleSaveJson = React.useCallback(async () => {
     if (!user) return setVisible("login")(true);
 
-    if (hasChanges) {
+    if (
+      hasChanges &&
+      !error &&
+      (typeof query.json === "string" || typeof query.json === "undefined")
+    ) {
       try {
         setIsUpdating(true);
-        toast.loading("Saving JSON...", { id: "jsonSave" });
-        const res = await saveJson({ id: query.json as string, data: getJson() });
+        toast.loading("Saving document...", { id: "fileSave" });
 
-        if (res.errors && res.errors.items.length > 0) throw res.errors;
-        if (res.data._id) replace({ query: { json: res.data._id } });
+        const { data, error } = await documentSvc.upsert({
+          id: query?.json,
+          contents: getContents(),
+          format: getFormat(),
+        });
 
-        toast.success("JSON saved to cloud", { id: "jsonSave" });
+        if (error) throw error;
+        if (data) replace({ query: { json: data } });
+
+        toast.success("Document saved to cloud", { id: "fileSave" });
         setHasChanges(false);
       } catch (error: any) {
-        if (error?.items?.length > 0) {
-          return toast.error(error.items[0].message, { id: "jsonSave", duration: 5000 });
-        }
-
-        toast.error("Failed to save JSON!", { id: "jsonSave" });
+        toast.error(error.message, { id: "fileSave" });
       } finally {
         setIsUpdating(false);
       }
     }
-  }, [getJson, hasChanges, query.json, replace, setHasChanges, setVisible, user]);
+  }, [
+    error,
+    getContents,
+    getFormat,
+    hasChanges,
+    query.json,
+    replace,
+    setHasChanges,
+    setVisible,
+    user,
+  ]);
 
   const handleLoginClick = () => {
     if (user) return setVisible("account")(true);
@@ -126,14 +163,18 @@ export const BottomBar = () => {
       if (!query.json) return handleSaveJson();
       setIsUpdating(true);
 
-      const res = await updateJson(query.json as string, { private: !isPrivate });
+      const { data: updatedJsonData, error } = await documentSvc.update(query.json as string, {
+        private: !isPrivate,
+      });
 
-      if (!res.errors?.items.length) {
-        setIsPrivate(res.data.private);
+      if (error) return toast.error(error.message);
+
+      if (updatedJsonData[0]) {
+        setIsPrivate(updatedJsonData[0].private);
         toast.success(`Document set to ${isPrivate ? "public" : "private"}.`);
-      } else throw res.errors;
+      } else throw error;
     } catch (error) {
-      toast.error("An error occurred while updating document!");
+      console.error(error);
     } finally {
       setIsUpdating(false);
     }
@@ -147,46 +188,82 @@ export const BottomBar = () => {
         </Head>
       )}
       <StyledLeft>
-        <StyledBottomBarItem onClick={handleLoginClick}>
-          <VscAccount />
-          {user ? user.name : "Login"}
+        <StyledBottomBarItem onClick={toggleEditor}>
+          <BiSolidDockLeft />
         </StyledBottomBarItem>
-        <StyledBottomBarItem onClick={handleSaveJson} disabled={isUpdating}>
-          {hasChanges ? <AiOutlineCloudUpload /> : <AiOutlineCloudSync />}
-          {hasChanges ? "Unsaved Changes" : "Saved"}
+
+        {fileName && (
+          <StyledBottomBarItem onClick={() => setVisible("cloud")(true)}>
+            <VscSourceControl />
+            {fileName}
+          </StyledBottomBarItem>
+        )}
+        <StyledBottomBarItem>
+          {error ? (
+            <Popover width="auto" shadow="md" position="top" withArrow>
+              <Popover.Target>
+                <Flex align="center" gap={2}>
+                  <VscError color="red" size={16} />
+                  <Text color="red" fw="bold">
+                    Invalid
+                  </Text>
+                </Flex>
+              </Popover.Target>
+              <Popover.Dropdown sx={{ pointerEvents: "none" }}>
+                <Text size="xs">{error}</Text>
+              </Popover.Dropdown>
+            </Popover>
+          ) : (
+            <Flex align="center" gap={2}>
+              <MdOutlineCheckCircleOutline />
+              <Text>Valid</Text>
+            </Flex>
+          )}
         </StyledBottomBarItem>
-        {data && (
-          <>
-            {typeof data.private !== "undefined" && (
-              <StyledBottomBarItem onClick={setPrivate} disabled={isUpdating}>
-                {isPrivate ? <AiOutlineLock /> : <AiOutlineUnlock />}
-                {isPrivate ? "Private" : "Public"}
-              </StyledBottomBarItem>
-            )}
-            <StyledBottomBarItem onClick={() => setVisible("share")(true)} disabled={isPrivate}>
-              <AiOutlineLink />
-              Share
-            </StyledBottomBarItem>
-          </>
+        {(data?.owner_email === user?.email || (!data && user)) && (
+          <StyledBottomBarItem onClick={handleSaveJson} disabled={isUpdating || error}>
+            {hasChanges || !user ? <AiOutlineCloudUpload /> : <AiOutlineCloudSync />}
+            {hasChanges || !user ? (query?.json ? "Unsaved Changes" : "Save to Cloud") : "Saved"}
+          </StyledBottomBarItem>
+        )}
+        {data?.owner_email === user?.email && (
+          <StyledBottomBarItem onClick={setPrivate} disabled={isUpdating}>
+            {isPrivate ? <AiOutlineLock /> : <AiOutlineUnlock />}
+            {isPrivate ? "Private" : "Public"}
+          </StyledBottomBarItem>
+        )}
+        <StyledBottomBarItem
+          onClick={() => setVisible("share")(true)}
+          disabled={isPrivate || !data}
+        >
+          <AiOutlineLink />
+          Share
+        </StyledBottomBarItem>
+        {liveTransformEnabled ? (
+          <StyledBottomBarItem onClick={() => toggleLiveTransform(false)}>
+            <VscSync />
+            <Text>Live Transform</Text>
+          </StyledBottomBarItem>
+        ) : (
+          <StyledBottomBarItem onClick={() => toggleLiveTransform(true)}>
+            <VscSyncIgnored />
+            <Text>Manual Transform</Text>
+          </StyledBottomBarItem>
+        )}
+        {!liveTransformEnabled && (
+          <StyledBottomBarItem onClick={() => setContents({})}>
+            <TbTransform />
+            Transform
+          </StyledBottomBarItem>
         )}
       </StyledLeft>
+
       <StyledRight>
-        <a
-          href="https://www.altogic.com/?utm_source=jsoncrack&utm_medium=referral&utm_campaign=sponsorship"
-          rel="sponsored noreferrer"
-          target="_blank"
-        >
-          <StyledBottomBarItem>
-            Powered by
-            <StyledImg
-              height="20"
-              width="54"
-              src="https://www.altogic.com/img/logo_dark.svg"
-              alt="powered by altogic"
-              light={lightmode}
-            />
-          </StyledBottomBarItem>
-        </a>
+        <StyledBottomBarItem>Nodes: {nodeCount}</StyledBottomBarItem>
+        <StyledBottomBarItem onClick={() => setVisible("review")(true)}>
+          <VscFeedback />
+          Feedback
+        </StyledBottomBarItem>
       </StyledRight>
     </StyledBottomBar>
   );

src/containers/Editor/JsonEditor/index.tsx

@@ -1,7 +1,14 @@
 import React from "react";
-import { ErrorContainer } from "src/components/ErrorContainer";
-import { MonacoEditor } from "src/components/MonacoEditor";
 import styled from "styled-components";
+import { ActionIcon, Input, Loader, Tooltip } from "@mantine/core";
+import { getHotkeyHandler, useSessionStorage } from "@mantine/hooks";
+import { toast } from "react-hot-toast";
+import { GoDependabot } from "react-icons/go";
+import { VscClose, VscQuestion } from "react-icons/vsc";
+import { MonacoEditor } from "src/components/MonacoEditor";
+import useJsonQuery from "src/hooks/useJsonQuery";
+import { supabase } from "src/lib/api/supabase";
+import useUser from "src/store/useUser";
 
 const StyledEditorWrapper = styled.div`
   display: flex;
@@ -10,11 +17,116 @@ const StyledEditorWrapper = styled.div`
   user-select: none;
 `;
 
+function removeWhitespaces(inputString: string) {
+  // Remove extra whitespaces and newlines
+  const compactString = inputString.replace(/\s+/g, "").replaceAll("interface", "interface ");
+  return compactString;
+}
+
+const StyledPromptInput = styled(Input)`
+  .mantine-Input-input {
+    font-weight: 500;
+    background: ${({ theme }) => theme.PROMPT_BG};
+    color: ${({ theme }) => theme.PROMPT_TEXT_COLOR};
+    border: none;
+    border-bottom: 1px solid ${({ theme }) => theme.PROMPT_BORDER_COLOR};
+
+    :focus-within {
+      border-color: #15593a;
+    }
+  }
+
+  svg {
+    color: ${({ theme }) => theme.PROMPT_TEXT_COLOR};
+  }
+
+  ::placeholder {
+    color: ${({ theme }) => theme.PROMPT_PLACEHOLDER_COLOR};
+  }
+`;
+
+const PromptInput = () => {
+  const { updateJson, getJsonType } = useJsonQuery();
+  const premium = useUser(state => state.premium);
+  const [completing, setCompleting] = React.useState(false);
+  const [prompt, setPrompt] = React.useState("");
+  const [promptVisible, setPromptVisible] = useSessionStorage({
+    key: "promptVisible",
+    defaultValue: true,
+  });
+
+  const onSubmit = async () => {
+    try {
+      setCompleting(true);
+
+      const resp = await supabase.functions.invoke("jq", {
+        body: {
+          query: prompt,
+          jsonModel: removeWhitespaces(getJsonType()),
+        },
+      });
+
+      updateJson(resp.data.choices[0].message?.content || "");
+    } catch (error) {
+      toast.error("An error occured while parsing result.");
+    } finally {
+      setCompleting(false);
+    }
+  };
+
+  if (!promptVisible) return null;
+
+  return (
+    <Tooltip.Floating
+      disabled={premium}
+      label="JSON Crack AI is currently only available to premium users"
+      fz="xs"
+      withinPortal
+    >
+      <div>
+        <StyledPromptInput
+          placeholder="Ask JSON Crack AI to transform the data"
+          value={prompt}
+          onChange={e => setPrompt(e.currentTarget.value)}
+          rightSectionWidth={60}
+          maxLength={200}
+          disabled={!premium || completing}
+          onKeyDown={getHotkeyHandler([["Enter", onSubmit]])}
+          onSubmit={onSubmit}
+          rightSection={
+            <>
+              <Tooltip
+                label="This feature is in the experimental phase, and its outcomes may not consistently reflect accuracy. It solely utilizes the schema without incorporating values, hence your actions should align with your particular schema. Please note that we do not store your data."
+                maw={300}
+                multiline
+                withinPortal
+                fz="xs"
+                withArrow
+              >
+                <ActionIcon>
+                  <VscQuestion />
+                </ActionIcon>
+              </Tooltip>
+              <ActionIcon title="Close" onClick={() => setPromptVisible(false)}>
+                <VscClose />
+              </ActionIcon>
+            </>
+          }
+          icon={completing ? <Loader size="xs" /> : <GoDependabot strokeWidth={1} />}
+          radius={0}
+        />
+      </div>
+    </Tooltip.Floating>
+  );
+};
+
 export const JsonEditor: React.FC = () => {
   return (
     <StyledEditorWrapper>
-      <ErrorContainer />
+      {/* <PromptInput /> */}
       <MonacoEditor />
     </StyledEditorWrapper>
   );
 };
+
+export default JsonEditor;

src/containers/Editor/LiveEditor/GraphCanvas.tsx

@@ -1,15 +0,0 @@
-import React from "react";
-import { Graph } from "src/components/Graph";
-import { NodeModal } from "src/containers/Modals/NodeModal";
-
-export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
-  const [isNodeModalVisible, setNodeModalVisible] = React.useState(false);
-  const openNodeModal = React.useCallback(() => setNodeModalVisible(true), []);
-
-  return (
-    <>
-      <Graph openNodeModal={openNodeModal} isWidget={isWidget} />
-      <NodeModal opened={isNodeModalVisible} onClose={() => setNodeModalVisible(false)} />
-    </>
-  );
-};

src/containers/Editor/LiveEditor/Tools.tsx

@@ -1,34 +1,75 @@
 import React from "react";
-import { AiOutlineFullscreen, AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
-import { FiDownload } from "react-icons/fi";
-import { MdCenterFocusWeak } from "react-icons/md";
-import { SearchInput } from "src/components/SearchInput";
-import useGraph from "src/store/useGraph";
-import useModal from "src/store/useModal";
+import Link from "next/link";
+import { useRouter } from "next/router";
 import styled from "styled-components";
+import {
+  Avatar,
+  Flex,
+  Group,
+  Input,
+  MediaQuery,
+  Menu,
+  SegmentedControl,
+  Select,
+  Text,
+} from "@mantine/core";
+import { getHotkeyHandler, useHotkeys } from "@mantine/hooks";
+import ReactGA from "react-ga4";
+import toast from "react-hot-toast";
+import { AiOutlineFullscreen } from "react-icons/ai";
+import { BsCheck2 } from "react-icons/bs";
+import { CgArrowsMergeAltH, CgArrowsShrinkH, CgChevronDown } from "react-icons/cg";
+import { FiDownload } from "react-icons/fi";
+import { MdOutlineWorkspacePremium } from "react-icons/md";
+import { SiJsonwebtokens } from "react-icons/si";
+import { TiFlowMerge } from "react-icons/ti";
+import {
+  VscCollapseAll,
+  VscExpandAll,
+  VscJson,
+  VscTarget,
+  VscSearchFuzzy,
+  VscGroupByRefType,
+  VscSignOut,
+  VscFeedback,
+  VscSignIn,
+} from "react-icons/vsc";
+import { SearchInput } from "src/components/SearchInput";
+import { FileFormat } from "src/enums/file.enum";
+import { ViewMode } from "src/enums/viewMode.enum";
+import useToggleHide from "src/hooks/useToggleHide";
+import { JSONCrackLogo } from "src/layout/JsonCrackLogo";
+import { getNextDirection } from "src/lib/utils/graph/getNextDirection";
+import { isIframe } from "src/lib/utils/widget";
+import useConfig from "src/store/useConfig";
+import useFile from "src/store/useFile";
+import useGraph from "src/store/useGraph";
+import useJson from "src/store/useJson";
+import useModal from "src/store/useModal";
+import useUser from "src/store/useUser";
 
 export const StyledTools = styled.div`
   position: relative;
   display: flex;
   align-items: center;
   gap: 4px;
-  flex-direction: row-reverse;
-  height: 28px;
-  padding: 4px 16px;
-  background: ${({ theme }) => theme.BACKGROUND_PRIMARY};
+  justify-content: space-between;
+  height: 36px;
+  padding: 4px 8px;
+  background: ${({ theme }) => theme.TOOLBAR_BG};
   color: ${({ theme }) => theme.SILVER};
   box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  z-index: 1;
+  z-index: 36;
 
   @media only screen and (max-width: 320px) {
     display: none;
   }
 `;
 
-const StyledToolElement = styled.button<{ hide?: boolean }>`
-  display: ${({ hide }) => (hide ? "none" : "grid")};
+const StyledToolElement = styled.button<{ $hide?: boolean }>`
+  display: ${({ $hide }) => ($hide ? "none" : "grid")};
   place-content: center;
-  font-size: 20px;
+  font-size: 12px;
   background: none;
   color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
   padding: 6px;
@@ -45,35 +86,478 @@ const StyledToolElement = styled.button<{ hide?: boolean }>`
   }
 `;
 
+const StyledFlowIcon = styled(TiFlowMerge)<{ rotate: number }>`
+  transform: rotate(${({ rotate }) => `${rotate}deg`});
+`;
+
+function rotateLayout(direction: "LEFT" | "RIGHT" | "DOWN" | "UP") {
+  if (direction === "LEFT") return 90;
+  if (direction === "UP") return 180;
+  if (direction === "RIGHT") return 270;
+  return 360;
+}
+
+function fullscreenBrowser() {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen().catch(() => {
+      toast.error("Unable to enter fullscreen mode.");
+    });
+  } else if (document.exitFullscreen) {
+    document.exitFullscreen();
+  }
+}
+
+const ViewMenu = () => {
+  const { validateHiddenNodes } = useToggleHide();
+  const [coreKey, setCoreKey] = React.useState("CTRL");
+  const toggleFold = useGraph(state => state.toggleFold);
+  const setDirection = useGraph(state => state.setDirection);
+  const direction = useGraph(state => state.direction);
+  const expandGraph = useGraph(state => state.expandGraph);
+  const collapseGraph = useGraph(state => state.collapseGraph);
+  const focusFirstNode = useGraph(state => state.focusFirstNode);
+  const foldNodes = useGraph(state => state.foldNodes);
+  const graphCollapsed = useGraph(state => state.graphCollapsed);
+
+  const toggleFoldNodes = () => {
+    toggleFold(!foldNodes);
+    toast(`${foldNodes ? "Unfolded" : "Folded"} nodes`);
+  };
+
+  const toggleDirection = () => {
+    const nextDirection = getNextDirection(direction || "RIGHT");
+    if (setDirection) setDirection(nextDirection);
+  };
+
+  const toggleExpandCollapseGraph = () => {
+    if (graphCollapsed) expandGraph();
+    else collapseGraph();
+
+    validateHiddenNodes();
+    toast(`${graphCollapsed ? "Expanded" : "Collapsed"} graph.`);
+  };
+
+  useHotkeys([
+    ["mod+shift+d", toggleDirection],
+    ["mod+shift+f", toggleFoldNodes],
+    ["mod+shift+c", toggleExpandCollapseGraph],
+    [
+      "mod+f",
+      () => {
+        const input = document.querySelector("#search-node") as HTMLInputElement;
+        input.focus();
+      },
+    ],
+  ]);
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      setCoreKey(navigator.userAgent.indexOf("Mac OS X") ? "⌘" : "CTRL");
+    }
+  }, []);
+
+  return (
+    <Menu shadow="md" closeOnItemClick={false} withArrow>
+      <Menu.Target>
+        <StyledToolElement>
+          <Flex align="center" gap={3}>
+            View <CgChevronDown />
+          </Flex>
+        </StyledToolElement>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item
+          fz={12}
+          onClick={() => {
+            toggleDirection();
+            ReactGA.event({
+              action: "toggle_layout_direction",
+              category: "User",
+              label: "Tools",
+            });
+          }}
+          icon={<StyledFlowIcon rotate={rotateLayout(direction || "RIGHT")} />}
+          rightSection={
+            <Text ml="md" fz={10} color="dimmed">
+              {coreKey} Shift D
+            </Text>
+          }
+        >
+          Rotate Layout
+        </Menu.Item>
+        <Menu.Item
+          fz={12}
+          onClick={() => {
+            toggleFoldNodes();
+            ReactGA.event({
+              action: "toggle_fold_nodes",
+              category: "User",
+              label: "Tools",
+            });
+          }}
+          icon={foldNodes ? <CgArrowsShrinkH /> : <CgArrowsMergeAltH />}
+          rightSection={
+            <Text ml="md" fz={10} color="dimmed">
+              {coreKey} Shift F
+            </Text>
+          }
+        >
+          {foldNodes ? "Unfold" : "Fold"} Nodes
+        </Menu.Item>
+        <Menu.Item
+          fz={12}
+          onClick={() => {
+            toggleExpandCollapseGraph();
+            ReactGA.event({
+              action: "toggle_collapse_nodes",
+              category: "User",
+              label: "Tools",
+            });
+          }}
+          icon={graphCollapsed ? <VscExpandAll /> : <VscCollapseAll />}
+          rightSection={
+            <Text ml="md" fz={10} color="dimmed">
+              {coreKey} Shift C
+            </Text>
+          }
+        >
+          {graphCollapsed ? "Expand" : "Collapse"} Nodes
+        </Menu.Item>
+        <Menu.Item fz={12} onClick={focusFirstNode} icon={<VscTarget />}>
+          Focus to First Node
+        </Menu.Item>
+      </Menu.Dropdown>
+    </Menu>
+  );
+};
+
 export const Tools: React.FC<{ isWidget?: boolean }> = ({ isWidget = false }) => {
+  const { push } = useRouter();
+
+  const getJson = useJson(state => state.getJson);
   const setVisible = useModal(state => state.setVisible);
-
-  const fullscreen = useGraph(state => state.fullscreen);
-  const toggleFullscreen = useGraph(state => state.toggleFullscreen);
-
+  const centerView = useGraph(state => state.centerView);
   const zoomIn = useGraph(state => state.zoomIn);
   const zoomOut = useGraph(state => state.zoomOut);
-  const centerView = useGraph(state => state.centerView);
-  const toggleEditor = () => toggleFullscreen(!fullscreen);
+  const toggleGestures = useConfig(state => state.toggleGestures);
+  const toggleChildrenCount = useConfig(state => state.toggleChildrenCount);
+  const toggleDarkMode = useConfig(state => state.toggleDarkMode);
+  const toggleRulers = useConfig(state => state.toggleRulers);
+  const toggleCollapseButton = useConfig(state => state.toggleCollapseButton);
+  const setViewMode = useConfig(state => state.setViewMode);
+  const setZoomFactor = useGraph(state => state.setZoomFactor);
+  const toggleImagePreview = useConfig(state => state.toggleImagePreview);
+  const logout = useUser(state => state.logout);
+
+  const user = useUser(state => state.user);
+  const premium = useUser(state => state.premium);
+
+  const zoomFactor = useGraph(state => state.viewPort?.zoomFactor || 1);
+  const gesturesEnabled = useConfig(state => state.gesturesEnabled);
+  const childrenCountVisible = useConfig(state => state.childrenCountVisible);
+  const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
+  const viewMode = useConfig(state => state.viewMode);
+  const rulersEnabled = useConfig(state => state.rulersEnabled);
+  const collapseButtonVisible = useConfig(state => state.collapseButtonVisible);
+  const imagePreviewEnabled = useConfig(state => state.imagePreviewEnabled);
+
+  const setFormat = useFile(state => state.setFormat);
+  const format = useFile(state => state.format);
+
+  const [tempZoomValue, setTempZoomValue] = React.useState(zoomFactor);
+  const [logoURL, setLogoURL] = React.useState("CTRL");
+
+  React.useEffect(() => {
+    if (!Number.isNaN(zoomFactor)) setTempZoomValue(zoomFactor);
+  }, [zoomFactor]);
+
+  useHotkeys([
+    ["shift+Digit0", () => setZoomFactor(100 / 100)],
+    ["shift+Digit1", centerView],
+  ]);
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      const url = !isIframe()
+        ? "https://jsoncrack.com"
+        : window.location.href.replace("widget", "editor");
+
+      setLogoURL(url);
+    }
+  }, []);
+
+  const handleSave = () => {
+    const a = document.createElement("a");
+    const file = new Blob([getJson()], { type: "text/plain" });
+
+    a.href = window.URL.createObjectURL(file);
+    a.download = "jsoncrack.json";
+    a.click();
+  };
 
   return (
     <StyledTools>
-      <StyledToolElement title="fullscreen" hide={isWidget} onClick={toggleEditor}>
-        <AiOutlineFullscreen />
-      </StyledToolElement>
-      <SearchInput />
-      <StyledToolElement title="save" onClick={() => setVisible("download")(true)}>
-        <FiDownload />
-      </StyledToolElement>
-      <StyledToolElement title="center canvas" onClick={centerView}>
-        <MdCenterFocusWeak />
-      </StyledToolElement>
-      <StyledToolElement title="zoom out" onClick={zoomOut}>
-        <AiOutlineMinus />
-      </StyledToolElement>
-      <StyledToolElement title="zoom in" onClick={zoomIn}>
-        <AiOutlinePlus />
-      </StyledToolElement>
+      {isWidget && (
+        <StyledToolElement title="JSON Crack">
+          <Flex gap="xs" align="center" justify="center">
+            <JSONCrackLogo
+              fontSize="1.2em"
+              href={logoURL}
+              target={isIframe() ? "_blank" : "_parent"}
+            />
+          </Flex>
+        </StyledToolElement>
+      )}
+      {!isWidget && (
+        <MediaQuery smallerThan="xs" styles={{ display: "none" }}>
+          <Group spacing="xs" position="left" w="100%" noWrap>
+            <StyledToolElement title="JSON Crack">
+              <Flex gap="xs" align="center" justify="center">
+                <JSONCrackLogo fontSize="1.2em" />
+              </Flex>
+            </StyledToolElement>
+            <Select
+              defaultValue="json"
+              size="xs"
+              value={format}
+              onChange={setFormat}
+              miw={80}
+              w={120}
+              data={[
+                { value: FileFormat.JSON, label: "JSON" },
+                { value: FileFormat.YAML, label: "YAML" },
+                { value: FileFormat.XML, label: "XML" },
+                { value: FileFormat.TOML, label: "TOML" },
+                { value: FileFormat.CSV, label: "CSV" },
+              ]}
+            />
+            <Menu trigger="click" shadow="md" withArrow>
+              <Menu.Target>
+                <StyledToolElement title="View Mode">
+                  <Flex align="center" gap={3}>
+                    View Mode <CgChevronDown />
+                  </Flex>
+                </StyledToolElement>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <SegmentedControl
+                  value={viewMode}
+                  onChange={setViewMode}
+                  data={[
+                    { value: ViewMode.Graph, label: "Graph" },
+                    { value: ViewMode.Tree, label: "Tree" },
+                  ]}
+                />
+              </Menu.Dropdown>
+            </Menu>
+            <StyledToolElement title="Import File" onClick={() => setVisible("import")(true)}>
+              Import
+            </StyledToolElement>
+            <ViewMenu />
+            <Menu shadow="md" withArrow>
+              <Menu.Target>
+                <StyledToolElement>
+                  <Flex align="center" gap={3}>
+                    Tools <CgChevronDown />
+                  </Flex>
+                </StyledToolElement>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <Menu.Item fz={12} icon={<VscSearchFuzzy />} onClick={() => setVisible("jq")(true)}>
+                  JSON Query (jq)
+                </Menu.Item>
+                <Menu.Item fz={12} icon={<VscJson />} onClick={() => setVisible("schema")(true)}>
+                  JSON Schema
+                </Menu.Item>
+                <Menu.Item
+                  fz={12}
+                  icon={<SiJsonwebtokens />}
+                  onClick={() => setVisible("jwt")(true)}
+                >
+                  Decode JWT
+                </Menu.Item>
+                <Menu.Item
+                  fz={12}
+                  icon={<VscGroupByRefType />}
+                  onClick={() => setVisible("type")(true)}
+                >
+                  Generate Type
+                </Menu.Item>
+              </Menu.Dropdown>
+            </Menu>
+            <StyledToolElement title="Cloud" onClick={() => setVisible("cloud")(true)}>
+              Cloud
+            </StyledToolElement>
+            <StyledToolElement title="Download as File" onClick={handleSave}>
+              Download
+            </StyledToolElement>
+          </Group>
+        </MediaQuery>
+      )}
+      <Group spacing="xs" position="right" w="100%" noWrap>
+        <SearchInput />
+
+        {!isWidget && (
+          <StyledToolElement title="Save as Image" onClick={() => setVisible("download")(true)}>
+            <FiDownload size="18" />
+          </StyledToolElement>
+        )}
+
+        {!isWidget && (
+          <Menu shadow="md" trigger="click" closeOnItemClick={false} withArrow>
+            <Menu.Target>
+              <StyledToolElement>
+                <Flex gap={4}>
+                  {Math.round(zoomFactor * 100)}%
+                  <CgChevronDown />
+                </Flex>
+              </StyledToolElement>
+            </Menu.Target>
+            <Menu.Dropdown>
+              <Menu.Item>
+                <Input
+                  type="number"
+                  value={Math.round(tempZoomValue * 100)}
+                  onChange={e => setTempZoomValue(e.currentTarget.valueAsNumber / 100)}
+                  onKeyDown={getHotkeyHandler([["Enter", () => setZoomFactor(tempZoomValue)]])}
+                  size="xs"
+                  rightSection="%"
+                />
+              </Menu.Item>
+              <Menu.Item rightSection="+" onClick={zoomIn}>
+                <Text size="xs">Zoom in</Text>
+              </Menu.Item>
+              <Menu.Item rightSection="-" onClick={zoomOut}>
+                <Text size="xs">Zoom out</Text>
+              </Menu.Item>
+              <Menu.Item rightSection="⇧ 1" onClick={centerView}>
+                <Text size="xs">Zoom to fit</Text>
+              </Menu.Item>
+              <Menu.Item onClick={() => setZoomFactor(50 / 100)}>
+                <Text size="xs">Zoom to %50</Text>
+              </Menu.Item>
+              <Menu.Item rightSection="⇧ 0" onClick={() => setZoomFactor(100 / 100)}>
+                <Text size="xs">Zoom to %100</Text>
+              </Menu.Item>
+              <Menu.Item onClick={() => setZoomFactor(200 / 100)}>
+                <Text size="xs">Zoom to %200</Text>
+              </Menu.Item>
+              <Menu.Divider />
+              <Menu.Item
+                icon={<BsCheck2 opacity={rulersEnabled ? 100 : 0} />}
+                onClick={() => toggleRulers(!rulersEnabled)}
+              >
+                <Text size="xs">Rulers</Text>
+              </Menu.Item>
+              <Menu.Item
+                icon={<BsCheck2 opacity={gesturesEnabled ? 100 : 0} />}
+                onClick={() => toggleGestures(!gesturesEnabled)}
+              >
+                <Text size="xs">Trackpad Gestures</Text>
+              </Menu.Item>
+              <Menu.Item
+                icon={<BsCheck2 opacity={childrenCountVisible ? 100 : 0} />}
+                onClick={() => toggleChildrenCount(!childrenCountVisible)}
+              >
+                <Text size="xs">Item Count</Text>
+              </Menu.Item>
+              <Menu.Item
+                icon={<BsCheck2 opacity={imagePreviewEnabled ? 100 : 0} />}
+                onClick={() => toggleImagePreview(!imagePreviewEnabled)}
+              >
+                <Text size="xs">Image Link Preview</Text>
+              </Menu.Item>
+              <Menu.Item
+                icon={<BsCheck2 opacity={collapseButtonVisible ? 100 : 0} />}
+                onClick={() => toggleCollapseButton(!collapseButtonVisible)}
+              >
+                <Text size="xs">Show Expand/Collapse</Text>
+              </Menu.Item>
+              <Menu.Item
+                icon={<BsCheck2 opacity={darkmodeEnabled ? 100 : 0} />}
+                onClick={() => toggleDarkMode(!darkmodeEnabled)}
+              >
+                <Text size="xs">Dark Mode</Text>
+              </Menu.Item>
+            </Menu.Dropdown>
+          </Menu>
+        )}
+
+        {!isWidget && (
+          <Menu shadow="md" trigger="click" closeOnItemClick={false} withArrow>
+            <Menu.Target>
+              <StyledToolElement>
+                <Avatar
+                  color="grape"
+                  variant="filled"
+                  size={20}
+                  radius="xl"
+                  src={user?.user_metadata.avatar_url}
+                  alt={user?.user_metadata.name}
+                >
+                  {user?.user_metadata.name[0]}
+                </Avatar>
+              </StyledToolElement>
+            </Menu.Target>
+            <Menu.Dropdown>
+              {user ? (
+                <Menu.Item
+                  icon={
+                    <Avatar color="grape" alt={user.user_metadata.name} size={20} radius="xl" />
+                  }
+                  onClick={() => setVisible("account")(true)}
+                  closeMenuOnClick
+                >
+                  <Text size="xs">Account</Text>
+                </Menu.Item>
+              ) : (
+                <Link href="/sign-in">
+                  <Menu.Item icon={<VscSignIn />}>
+                    <Text size="xs">Sign in</Text>
+                  </Menu.Item>
+                </Link>
+              )}
+              {!premium && (
+                <Menu.Item
+                  icon={<MdOutlineWorkspacePremium color="red" />}
+                  onClick={() => setVisible("premium")(true)}
+                  closeMenuOnClick
+                >
+                  <Text
+                    variant="gradient"
+                    fw="bold"
+                    gradient={{ from: "orange", to: "red" }}
+                    size="xs"
+                  >
+                    Get Premium
+                  </Text>
+                </Menu.Item>
+              )}
+              {user && (
+                <>
+                  <Menu.Divider />
+                  <Menu.Item
+                    icon={<VscFeedback />}
+                    onClick={() => setVisible("review")(true)}
+                    closeMenuOnClick
+                  >
+                    <Text size="xs">Feedback</Text>
+                  </Menu.Item>
+                  <Menu.Item icon={<VscSignOut />} onClick={() => logout()} closeMenuOnClick>
+                    <Text size="xs">Log out</Text>
+                  </Menu.Item>
+                </>
+              )}
+            </Menu.Dropdown>
+          </Menu>
+        )}
+
+        {!isWidget && (
+          <StyledToolElement title="Fullscreen" $hide={isWidget} onClick={fullscreenBrowser}>
+            <AiOutlineFullscreen size="18" />
+          </StyledToolElement>
+        )}
+      </Group>
     </StyledTools>
   );
 };

src/containers/Editor/LiveEditor/index.tsx

@@ -1,18 +1,143 @@
 import React from "react";
-import { GraphCanvas } from "src/containers/Editor/LiveEditor/GraphCanvas";
-import { Tools } from "src/containers/Editor/LiveEditor/Tools";
-import styled from "styled-components";
+import styled, { DefaultTheme, useTheme } from "styled-components";
+import { Menu, Text } from "@mantine/core";
+import { JSONTree } from "react-json-tree";
+import { Graph } from "src/components/Graph";
+import { TextRenderer } from "src/components/Graph/CustomNode/TextRenderer";
+import { firaMono } from "src/constants/fonts";
+import { ViewMode } from "src/enums/viewMode.enum";
+import useConfig from "src/store/useConfig";
+import useJson from "src/store/useJson";
 
 const StyledLiveEditor = styled.div`
   position: relative;
   height: 100%;
+  background: ${({ theme }) => theme.GRID_BG_COLOR};
+  overflow: auto;
+
+  & > ul {
+    margin-top: 0 !important;
+    padding: 12px !important;
+    font-family: ${firaMono.style.fontFamily};
+    font-size: 14px;
+    font-weight: 500;
+  }
 `;
 
+type TextColorFn = {
+  theme: DefaultTheme;
+  $value?: string | unknown;
+};
+
+function getValueColor({ $value, theme }: TextColorFn) {
+  if ($value && !Number.isNaN(+$value)) return theme.NODE_COLORS.INTEGER;
+  if ($value === "true") return theme.NODE_COLORS.BOOL.TRUE;
+  if ($value === "false") return theme.NODE_COLORS.BOOL.FALSE;
+  if ($value === "null") return theme.NODE_COLORS.NULL;
+
+  // default
+  return theme.NODE_COLORS.NODE_VALUE;
+}
+
+function getLabelColor({ $type, theme }: { $type?: string; theme: DefaultTheme }) {
+  if ($type === "Object") return theme.NODE_COLORS.PARENT_OBJ;
+  if ($type === "Array") return theme.NODE_COLORS.PARENT_ARR;
+  return theme.NODE_COLORS.PARENT_OBJ;
+}
+
+const View = () => {
+  const theme = useTheme();
+  const json = useJson(state => state.json);
+  const viewMode = useConfig(state => state.viewMode);
+
+  if (viewMode === ViewMode.Graph) return <Graph />;
+
+  if (viewMode === ViewMode.Tree)
+    return (
+      <JSONTree
+        data={JSON.parse(json)}
+        labelRenderer={(keyPath, nodeType, expanded, expandable) => {
+          return (
+            <span
+              style={{
+                color: getLabelColor({
+                  theme,
+                  $type: nodeType,
+                }),
+              }}
+            >
+              {keyPath[0]}:
+            </span>
+          );
+        }}
+        valueRenderer={(valueAsString, value) => {
+          return (
+            <span
+              style={{
+                color: getValueColor({
+                  theme,
+                  $value: valueAsString,
+                }),
+              }}
+            >
+              <TextRenderer>{JSON.stringify(value)}</TextRenderer>
+            </span>
+          );
+        }}
+        theme={{
+          extend: {
+            overflow: "scroll",
+            height: "100%",
+            scheme: "monokai",
+            author: "wimer hazenberg (http://www.monokai.nl)",
+            base00: theme.GRID_BG_COLOR,
+          },
+        }}
+      />
+    );
+};
+
 const LiveEditor: React.FC = () => {
+  const viewMode = useConfig(state => state.viewMode);
+  const [contextOpened, setContextOpened] = React.useState(false);
+  const [contextPosition, setContextPosition] = React.useState({
+    x: 0,
+    y: 0,
+  });
+
   return (
-    <StyledLiveEditor>
-      <Tools />
-      <GraphCanvas />
+    <StyledLiveEditor
+      onContextMenuCapture={e => {
+        e.preventDefault();
+        setContextOpened(true);
+        setContextPosition({ x: e.pageX, y: e.pageY });
+      }}
+      onClick={() => setContextOpened(false)}
+    >
+      <div
+        style={{
+          position: "fixed",
+          top: contextPosition.y,
+          left: contextPosition.x,
+          zIndex: 100,
+        }}
+      >
+        <Menu opened={false} shadow="sm">
+          <Menu.Dropdown>
+            <Menu.Item>
+              <Text size="xs">Download as Image</Text>
+            </Menu.Item>
+            <Menu.Item>
+              <Text size="xs">Zoom to Fit</Text>
+            </Menu.Item>
+            <Menu.Item>
+              <Text size="xs">Rotate</Text>
+            </Menu.Item>
+          </Menu.Dropdown>
+        </Menu>
+      </div>
+
+      <View />
     </StyledLiveEditor>
   );
 };

src/containers/Editor/Panes.tsx

@@ -1,17 +1,25 @@
 import React from "react";
 import dynamic from "next/dynamic";
+import styled from "styled-components";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
-import { JsonEditor } from "src/containers/Editor/JsonEditor";
 import useGraph from "src/store/useGraph";
-import styled from "styled-components";
 
 export const StyledEditor = styled(Allotment)`
   position: relative !important;
   display: flex;
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
+  height: calc(100vh - 63px);
+
+  @media only screen and (max-width: 320px) {
+    height: 100vh;
+  }
 `;
 
+const JsonEditor = dynamic(() => import("src/containers/Editor/JsonEditor"), {
+  ssr: false,
+});
+
 const LiveEditor = dynamic(() => import("src/containers/Editor/LiveEditor"), {
   ssr: false,
 });
@@ -28,7 +36,7 @@ const Panes: React.FC = () => {
   return (
     <StyledEditor proportionalLayout={false} vertical={isMobile}>
       <Allotment.Pane
-        preferredSize={isMobile ? "100%" : 400}
+        preferredSize={isMobile ? "100%" : 450}
         minSize={fullscreen ? 0 : 300}
         maxSize={isMobile ? Infinity : 800}
         visible={!fullscreen}

src/containers/Features/index.tsx

@@ -0,0 +1,153 @@
+import {
+  createStyles,
+  Title,
+  Text,
+  Card,
+  SimpleGrid,
+  Container,
+  rem,
+  MediaQuery,
+} from "@mantine/core";
+import { FaProjectDiagram, FaRegImages } from "react-icons/fa";
+import { MdOutlineDesignServices } from "react-icons/md";
+import { TbTransform } from "react-icons/tb";
+import { VscCloud, VscJson } from "react-icons/vsc";
+
+const mockdata = [
+  {
+    title: "Designed for Everyone",
+    description:
+      "We focus on simplicity and ease of use. Whether you're a data scientist or product owner, JSON Crack is the tool for you to understand your data.",
+    icon: <MdOutlineDesignServices size="30" />,
+  },
+  {
+    title: "Interactive Graphs",
+    description:
+      "JSON Crack visualizes data from JSON, YAML, XML, CSV, and more in interactive graphs. Users can click nodes for more details, edit data, and search through the graph.",
+    icon: <FaProjectDiagram size="30" />,
+    hideMobile: true,
+  },
+  {
+    title: "Multi-Format Support & Data Conversion",
+    description:
+      "JSON Crack seamlessly handles various data formats, allowing easy conversion between them.",
+    icon: <TbTransform size="30" />,
+    hideMobile: true,
+  },
+  {
+    title: "Cloud Storage and Sharing",
+    description:
+      "JSON Crack comes with built-in cloud storage, allowing users to store their data and easily share links with collaborators or other stakeholders, fostering efficient teamwork and collaboration.",
+    icon: <VscCloud size="30" />,
+    hideMobile: true,
+  },
+  {
+    title: "Graph Export & Download",
+    description:
+      "Users have the option to download the generated graph as an image, enabling them to save and share visual representations of their data with others or use them in presentations and reports.",
+    icon: <FaRegImages size="30" />,
+  },
+  {
+    title: "JSON Schema Support",
+    description:
+      "JSON Crack supports JSON Schema, offering users the ability to validate and enforce data structure rules, ensuring data consistency and integrity.",
+    icon: <VscJson size="30" />,
+  },
+];
+
+const useStyles = createStyles(theme => ({
+  title: {
+    fontSize: rem(34),
+    fontWeight: 900,
+
+    [theme.fn.smallerThan("sm")]: {
+      fontSize: rem(24),
+    },
+  },
+
+  description: {
+    maxWidth: 600,
+    margin: "auto",
+
+    "&::after": {
+      content: '""',
+      display: "block",
+      backgroundColor: theme.fn.primaryColor(),
+      width: rem(45),
+      height: rem(2),
+      marginTop: theme.spacing.sm,
+      marginLeft: "auto",
+      marginRight: "auto",
+    },
+  },
+
+  card: {
+    border: `${rem(1)} solid ${
+      theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[1]
+    }`,
+  },
+
+  cardTitle: {
+    "&::after": {
+      content: '""',
+      display: "block",
+      backgroundColor: theme.fn.primaryColor(),
+      width: rem(45),
+      height: rem(2),
+      marginTop: theme.spacing.sm,
+    },
+  },
+}));
+
+export function FeaturesCards() {
+  const { classes } = useStyles();
+  const features = mockdata.map(feature => (
+    <MediaQuery
+      key={feature.title}
+      query="(max-width: 	36em)"
+      styles={{ display: feature.hideMobile ? "none" : "initial" }}
+    >
+      <Card shadow="md" radius="md" className={classes.card} padding="xl">
+        {feature.icon}
+        <Text fz="lg" fw={500} className={classes.cardTitle} mt="md">
+          {feature.title}
+        </Text>
+        <Text fz="sm" color="dark.3" mt="sm">
+          {feature.description}
+        </Text>
+      </Card>
+    </MediaQuery>
+  ));
+
+  return (
+    <Container size="lg" py="xl" mt={40}>
+      <Title
+        variant="gradient"
+        gradient={{ from: "purple", to: "orange", deg: 45 }}
+        order={2}
+        className={classes.title}
+        ta="center"
+        mt="sm"
+      >
+        Transform data into stunning graphs.
+      </Title>
+
+      <Text color="dark.3" className={classes.description} ta="center" mt="md">
+        JSON Crack empowers users to visualize, analyze, and manipulate data with ease, making it a
+        versatile and powerful tool for data representation and exploration.
+      </Text>
+
+      <SimpleGrid
+        cols={3}
+        spacing="xl"
+        mt={50}
+        breakpoints={[
+          { maxWidth: "sm", cols: 1 },
+          { maxWidth: "md", cols: 2 },
+        ]}
+      >
+        {features}
+      </SimpleGrid>
+    </Container>
+  );
+}

src/containers/Home/index.tsx

@@ -1,300 +0,0 @@
-import React from "react";
-import dynamic from "next/dynamic";
-import Head from "next/head";
-import Link from "next/link";
-import Script from "next/script";
-import { Button } from "@mantine/core";
-import { AiOutlineRight, AiTwotoneStar } from "react-icons/ai";
-import {
-  HiCursorClick,
-  HiLightningBolt,
-  HiOutlineDownload,
-  HiOutlineSearchCircle,
-} from "react-icons/hi";
-import { IoHeart } from "react-icons/io5";
-import { SiVisualstudiocode } from "react-icons/si";
-import vscDarkPlus from "react-syntax-highlighter/dist/cjs/styles/prism/vsc-dark-plus";
-import { CarbonAds } from "src/components/CarbonAds";
-import { Footer } from "src/components/Footer";
-import { Navbar } from "src/components/Navbar";
-import { Producthunt } from "src/components/Producthunt";
-import { Sponsors } from "src/components/Sponsors";
-import { SupportButton } from "src/components/SupportButton";
-import { baseURL } from "src/constants/data";
-import { TABS } from "src/constants/previewSection";
-import { PricingCards } from "../PricingCards";
-import * as Styles from "./styles";
-
-const SyntaxHighlighter = dynamic(() => import("react-syntax-highlighter/dist/cjs/prism-async"), {
-  ssr: false,
-});
-
-const HeroSection = () => (
-  <Styles.StyledHeroSection id="main">
-    <Styles.StyledTitle>
-      <Styles.StyledGradientText>JSON</Styles.StyledGradientText> CRACK
-    </Styles.StyledTitle>
-    <Styles.StyledSubTitle>
-      Seamlessly visualize your JSON data{" "}
-      <Styles.StyledHighlightedText>instantly</Styles.StyledHighlightedText> into graphs.
-    </Styles.StyledSubTitle>
-    <Link href="/editor">
-      <Button color="grape" size="lg">
-        GO TO EDITOR
-        <AiOutlineRight strokeWidth="80" />
-      </Button>
-    </Link>
-    <Styles.StyledButtonWrapper>
-      <Link href="https://github.com/sponsors/AykutSarac" target="_blank" rel="noreferrer">
-        <Button color="red" size="md" variant="outline" rightIcon={<IoHeart />}>
-          SPONSOR US
-        </Button>
-      </Link>
-      <Link href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode">
-        <Button color="blue" size="md" variant="outline" rightIcon={<SiVisualstudiocode />}>
-          GET IT ON VS CODE
-        </Button>
-      </Link>
-    </Styles.StyledButtonWrapper>
-  </Styles.StyledHeroSection>
-);
-
-const PreviewSection = () => {
-  const [currentTab, setCurrentTab] = React.useState(0);
-
-  const updateTab = (tabId: number) => {
-    const embed = document.getElementById("jcPreview") as HTMLIFrameElement;
-    embed.contentWindow?.postMessage({
-      json: TABS[tabId].json,
-    });
-    setCurrentTab(tabId);
-  };
-
-  return (
-    <Styles.StyledPreviewSection>
-      <Styles.StyledHighlightWrapper>
-        <Styles.StyledTabsWrapper>
-          {TABS.map(tab => (
-            <Styles.StyledTab
-              active={tab.id === currentTab}
-              onClick={() => updateTab(tab.id)}
-              key={tab.id}
-            >
-              {tab.name}
-            </Styles.StyledTab>
-          ))}
-        </Styles.StyledTabsWrapper>
-        <SyntaxHighlighter
-          style={vscDarkPlus}
-          customStyle={{
-            fontSize: "16px",
-            width: "100%",
-            height: "440px",
-            margin: "0",
-            borderTop: "2px solid #4D4D4D",
-          }}
-          language="json"
-          showLineNumbers
-        >
-          {TABS[currentTab].json}
-        </SyntaxHighlighter>
-      </Styles.StyledHighlightWrapper>
-
-      <Styles.StyledPreviewFrame
-        title="Preview Embed"
-        id="jcPreview"
-        src={`${baseURL}/widget?json=63b73305c358219fbc421adf`}
-        loading="eager"
-      />
-    </Styles.StyledPreviewSection>
-  );
-};
-
-const FeaturesSection = () => (
-  <Styles.StyledFeaturesSection id="features">
-    <Styles.StyledSectionCard>
-      <Styles.StyledCardIcon>
-        <HiCursorClick size={50} color="#3BA55D" />
-      </Styles.StyledCardIcon>
-      <Styles.StyledCardTitle>EASY-TO-USE</Styles.StyledCardTitle>
-      <Styles.StyledCardDescription>
-        We believe that powerful software doesn&apos;t have to be difficult to use. That&apos;s why
-        we&apos;ve designed our app to be as intuitive and easy-to-use as possible. You can quickly
-        and easily load your JSON data and start exploring and analyzing it right away!
-      </Styles.StyledCardDescription>
-    </Styles.StyledSectionCard>
-
-    <Styles.StyledSectionCard>
-      <Styles.StyledCardIcon>
-        <HiOutlineSearchCircle size={50} color="#5865F2" />
-      </Styles.StyledCardIcon>
-      <Styles.StyledCardTitle>SEARCH</Styles.StyledCardTitle>
-      <Styles.StyledCardDescription>
-        Have a huge file of values, keys or arrays? Worry no more, type in the keyword you are
-        looking for into search input and it will take you to each node with matching result
-        highlighting the line to understand better!
-      </Styles.StyledCardDescription>
-    </Styles.StyledSectionCard>
-
-    <Styles.StyledSectionCard>
-      <Styles.StyledCardIcon>
-        <HiOutlineDownload size={50} color="#DA2877" />
-      </Styles.StyledCardIcon>
-      <Styles.StyledCardTitle>DOWNLOAD</Styles.StyledCardTitle>
-      <Styles.StyledCardDescription>
-        Download the graph to your local machine and use it wherever you want, to your blogs,
-        website or make it a poster and paste to the wall. Who wouldn&apos;t want to see a JSON
-        Crack graph onto their wall, eh?
-      </Styles.StyledCardDescription>
-    </Styles.StyledSectionCard>
-
-    <Styles.StyledSectionCard>
-      <Styles.StyledCardIcon>
-        <HiLightningBolt size={50} color="#F5E027" />
-      </Styles.StyledCardIcon>
-      <Styles.StyledCardTitle>LIVE</Styles.StyledCardTitle>
-      <Styles.StyledCardDescription>
-        With Microsoft&apos;s Monaco Editor which is also used by VS Code, easily edit your JSON and
-        directly view through the graphs. Also there&apos;s a JSON validator above of it to make
-        sure there is no type error.
-      </Styles.StyledCardDescription>
-    </Styles.StyledSectionCard>
-  </Styles.StyledFeaturesSection>
-);
-
-const GitHubSection = () => (
-  <Styles.StyledSection id="github" reverse>
-    <Styles.StyledTwitterQuote>
-      <blockquote className="twitter-tweet" data-lang="en" data-dnt="true" data-theme="light">
-        <p lang="en" dir="ltr">
-          Looking to understand or explore some JSON? Just paste or upload to visualize it as a
-          graph with <a href="https://t.co/HlKSrhKryJ">https://t.co/HlKSrhKryJ</a> 😍 <br />
-          <br />
-          Thanks to <a href="https://twitter.com/aykutsarach?ref_src=twsrc%5Etfw">
-            @aykutsarach
-          </a>! <a href="https://t.co/0LyPUL8Ezz">pic.twitter.com/0LyPUL8Ezz</a>
-        </p>
-        &mdash; GitHub (@github){" "}
-        <a href="https://twitter.com/github/status/1519363257794015233?ref_src=twsrc%5Etfw">
-          April 27, 2022
-        </a>
-      </blockquote>{" "}
-      <Script strategy="lazyOnload" src="https://platform.twitter.com/widgets.js"></Script>
-    </Styles.StyledTwitterQuote>
-    <Styles.StyledSectionArea>
-      <Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
-      <Styles.StyledMinorTitle>
-        At JSON Crack, we believe in the power of open source software and the communities that
-        support it. That&apos;s why we&apos;re proud to be part of the open source community and to
-        contribute to the development and growth of open source tools and technologies.
-        <br />
-        <br /> As part of our commitment to the open source community, we&apos;ve made our app
-        freely available to anyone who wants to use it, and we welcome contributions from anyone
-        who&apos;s interested in helping to improve it. Whether you&apos;re a developer, a data
-        scientist, or just someone who&apos;s passionate about open source, we&apos;d love to have
-        you join our community and help us make JSON Crack the best it can be.
-        <br />
-        <br /> So why not join us and become part of the JSON Crack open source community today? We
-        can&apos;t wait to see what we can accomplish together!
-      </Styles.StyledMinorTitle>
-      <Button
-        w={200}
-        color="grape"
-        size="md"
-        component="a"
-        href="https://github.com/AykutSarac/jsoncrack.com"
-        leftIcon={<AiTwotoneStar />}
-      >
-        STAR ON GITHUB
-      </Button>
-    </Styles.StyledSectionArea>
-  </Styles.StyledSection>
-);
-
-const EmbedSection = () => (
-  <Styles.StyledSection id="embed">
-    <Styles.StyledSectionArea>
-      <Styles.StyledSubTitle>Embed Into Your Website</Styles.StyledSubTitle>
-      <Styles.StyledMinorTitle>
-        JSON Crack provides users with the necessary code to embed the app into a website easily
-        using an iframe. This code can be easily copied and pasted into the desired location on the
-        website, allowing users to quickly and easily integrate JSON Crack into existing workflows.
-        <br />
-        <br /> Once the app is embedded, users can use it to view and analyze JSON data directly on
-        the website. This can be useful for a variety of purposes, such as quickly checking the
-        structure of a JSON file or verifying the data contained within it. JSON Crack&apos;s
-        intuitive interface makes it easy to navigate and understand even complex JSON data, making
-        it a valuable tool for anyone working with JSON.
-      </Styles.StyledMinorTitle>
-      <Button w={200} size="md" component="a" href="/docs">
-        LEARN TO EMBED
-      </Button>
-    </Styles.StyledSectionArea>
-    <div>
-      <Styles.StyledFrame
-        title="Example Embed"
-        src={`${baseURL}/widget?json=63c313d32ffa98f29b462315`}
-        loading="lazy"
-      ></Styles.StyledFrame>
-    </div>
-  </Styles.StyledSection>
-);
-
-const SupportSection = () => (
-  <Styles.StyledPaidSection>
-    <Styles.StyledProducthunt>
-      <Styles.StyledSubTitle>
-        Support JSON Crack at
-        <br />
-        <Styles.StyledHighlightedText>Product Hunt</Styles.StyledHighlightedText>
-      </Styles.StyledSubTitle>
-      <Producthunt />
-    </Styles.StyledProducthunt>
-    <Styles.StyledAffiliate>
-      <Styles.StyledSubTitle>Affiliate</Styles.StyledSubTitle>
-      <CarbonAds />
-    </Styles.StyledAffiliate>
-  </Styles.StyledPaidSection>
-);
-
-const SponsorSection = () => (
-  <Styles.StyledSponsorSection id="sponsor">
-    <Styles.StyledSubTitle>Sponsors</Styles.StyledSubTitle>
-    <Styles.StyledMinorTitle>
-      Your supports make JSON Crack possible to continue and accessible for everyone!
-    </Styles.StyledMinorTitle>
-    <Button
-      size="md"
-      component="a"
-      color="green"
-      href="https://github.com/sponsors/AykutSarac"
-      rel="external"
-    >
-      Become A Sponsor!
-    </Button>
-    <Sponsors />
-  </Styles.StyledSponsorSection>
-);
-
-const Home: React.FC = () => {
-  return (
-    <Styles.StyledHome>
-      <Head>
-        <title>JSON Crack - Crack your data into pieces</title>
-      </Head>
-      <Navbar />
-      <HeroSection />
-      <PreviewSection />
-      <FeaturesSection />
-      <SupportSection />
-      <GitHubSection />
-      <EmbedSection />
-      <PricingCards />
-      <SponsorSection />
-      <SupportButton />
-      <Footer />
-    </Styles.StyledHome>
-  );
-};
-
-export default Home;

src/containers/Home/styles.tsx

@@ -1,406 +0,0 @@
-import Link from "next/link";
-import styled from "styled-components";
-
-export const StyledButtonWrapper = styled.div`
-  display: flex;
-  gap: 18px;
-
-  @media only screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-export const StyledTwitterQuote = styled.div`
-  width: 100%;
-  height: 100%;
-
-  blockquote.twitter-tweet {
-    display: inline-block;
-    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
-    font-size: 12px;
-    font-weight: bold;
-    line-height: 16px;
-    border-color: #eee #ddd #bbb;
-    border-radius: 5px;
-    border-style: solid;
-    border-width: 1px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-    margin: 10px 5px;
-    padding: 0 16px 16px 16px;
-    max-width: 468px;
-  }
-
-  blockquote.twitter-tweet p {
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 20px;
-  }
-
-  blockquote.twitter-tweet a {
-    color: inherit;
-    font-weight: normal;
-    text-decoration: none;
-    outline: 0 none;
-  }
-
-  blockquote.twitter-tweet a:hover,
-  blockquote.twitter-tweet a:focus {
-    text-decoration: underline;
-  }
-`;
-
-export const StyledImageWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const StyledHome = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8em;
-
-  * {
-    box-sizing: border-box;
-  }
-
-  @media only screen and (max-width: 768px) {
-    gap: 3em;
-  }
-`;
-
-export const StyledGradientText = styled.span`
-  background: #ffb76b;
-  background: linear-gradient(to right, #ffb76b 0%, #ffa73d 30%, #ff7c00 60%, #ff7f04 100%);
-  background-clip: text;
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-`;
-
-export const StyledNavbar = styled.nav`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  padding: 16px 16px;
-  gap: 20px;
-
-  @media only screen and (max-width: 768px) {
-    a:first-of-type {
-      display: none;
-    }
-  }
-`;
-
-export const StyledHeroSection = styled.section`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  gap: 1.5em;
-  min-height: 40vh;
-  padding: 0 3%;
-
-  h2 {
-    margin-bottom: 25px;
-  }
-`;
-
-export const StyledNavLink = styled(Link)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 1rem;
-  cursor: pointer;
-  transition: color 0.2s;
-
-  &:hover {
-    font-weight: 500;
-    color: ${({ theme }) => theme.ORANGE};
-  }
-`;
-
-export const StyledTitle = styled.h1`
-  font-weight: 900;
-  margin: 0;
-  font-size: min(6vw, 86px);
-
-  @media only screen and (max-width: 768px) {
-    font-size: 2.5rem;
-  }
-`;
-
-export const StyledSubTitle = styled.h2`
-  color: #dedede;
-  text-align: center;
-  font-size: 2.5rem;
-  max-width: 40rem;
-  margin: 0;
-
-  @media only screen and (max-width: 768px) {
-    font-size: 1.5rem;
-  }
-`;
-
-export const StyledMinorTitle = styled.p`
-  color: #b4b4b4;
-  text-align: center;
-  font-size: 1rem;
-  margin: 0;
-  letter-spacing: 1.2px;
-
-  @media only screen and (max-width: 992px) {
-    font-size: 1rem;
-  }
-`;
-
-export const StyledFeaturesSection = styled.section`
-  display: grid;
-  margin: 0 auto;
-  max-width: 80%;
-  justify-content: center;
-  grid-template-columns: repeat(2, 40%);
-  grid-template-rows: repeat(2, 1fr);
-  grid-column-gap: 60px;
-  grid-row-gap: 60px;
-
-  @media only screen and (min-width: 1024px) {
-    max-width: 60%;
-  }
-
-  @media only screen and (max-width: 768px) {
-    flex-direction: column;
-    max-width: 80%;
-    display: flex;
-  }
-`;
-
-export const StyledSectionCard = styled.div`
-  text-align: center;
-  flex: 1;
-  border: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
-  background: rgb(48, 0, 65);
-  background: linear-gradient(
-    138deg,
-    rgba(48, 0, 65, 0.8870141806722689) 0%,
-    rgba(72, 12, 84, 0.40802258403361347) 33%,
-    rgba(65, 8, 92, 0.6012998949579832) 100%
-  );
-  border-radius: 6px;
-  padding: 16px;
-`;
-
-export const StyledCardTitle = styled.div`
-  font-weight: 700;
-  font-size: 1.5rem;
-  padding: 1.5rem 0 0.5rem;
-  letter-spacing: 1px;
-`;
-
-export const StyledCardIcon = styled.div``;
-
-export const StyledCardDescription = styled.p`
-  color: #e0e0e0;
-  text-align: left;
-  line-height: 1.5rem;
-  font-size: 0.875rem;
-`;
-
-export const StyledFrame = styled.iframe`
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-  border: 2px solid ${({ theme }) => theme.PRIMARY};
-  border-radius: 6px;
-
-  @media only screen and (min-width: 768px) {
-    min-height: 384px;
-  }
-`;
-
-export const StyledPreviewFrame = styled(StyledFrame)`
-  border: none;
-  border-left: 2px solid ${({ theme }) => theme.PRIMARY};
-  border-radius: 0;
-  height: 476px;
-  width: 50%;
-`;
-
-export const StyledSection = styled.section<{ reverse?: boolean }>`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  max-width: 85%;
-  margin: 0 auto;
-  gap: 4rem;
-  line-height: 1.5;
-  padding: 50px 3%;
-
-  & > div {
-    width: 100%;
-  }
-
-  @media only screen and (max-width: 1200px) {
-    flex-direction: ${({ reverse }) => (reverse ? "column-reverse" : "column")};
-    max-width: 80%;
-  }
-`;
-
-export const StyledSectionArea = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  width: 40%;
-  margin-top: 3rem;
-
-  h2,
-  p {
-    text-align: left;
-    letter-spacing: unset;
-  }
-
-  @media only screen and (max-width: 768px) {
-    width: 100%;
-    align-items: center;
-
-    h2 {
-      text-align: center;
-    }
-  }
-`;
-
-export const StyledSponsorSection = styled.section`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 85%;
-  margin: 0 auto;
-  gap: 2rem;
-  line-height: 1.5;
-  padding: 50px 3%;
-
-  @media only screen and (max-width: 768px) {
-    max-width: 90%;
-  }
-`;
-
-export const StyledEmbedSection = styled.section`
-  display: flex;
-  flex-direction: column-reverse;
-  justify-content: center;
-  align-items: center;
-  max-width: 85%;
-  margin: 0 auto;
-  gap: 2rem;
-  line-height: 1.5;
-  padding: 50px 3%;
-
-  @media only screen and (max-width: 768px) {
-    max-width: 80%;
-  }
-`;
-
-export const StyledPreviewSection = styled.section`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  width: 70%;
-  margin: 0 auto;
-  background: ${({ theme }) => theme.BLACK_SECONDARY};
-  border: 2px solid ${({ theme }) => theme.PRIMARY};
-  border-radius: 6px;
-  overflow: hidden;
-  height: 480px;
-
-  @media only screen and (max-width: 992px) {
-    display: none;
-  }
-`;
-
-export const StyledHighlightWrapper = styled.div`
-  width: 50%;
-`;
-
-export const StyledTabsWrapper = styled.div`
-  display: flex;
-  gap: 10px;
-  padding: 8px 8px;
-  padding-bottom: 0;
-
-  pre {
-    border-top: 2px solid ${({ theme }) => theme.PRIMARY};
-  }
-`;
-
-export const StyledTab = styled.button<{ active?: boolean }>`
-  border-radius: 6px 6px 0 0;
-  background: ${({ active }) => active && "#1e1e1e"};
-  border: 2px solid ${({ theme, active }) => (active ? theme.PRIMARY : "transparent")};
-  border-bottom: 0;
-  margin-bottom: -2px;
-  padding: 8px 16px;
-  min-width: 80px;
-  max-width: 150px;
-  color: ${({ theme, active }) => (active ? theme.INTERACTIVE_ACTIVE : theme.INTERACTIVE_NORMAL)};
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-
-  &:hover {
-    color: ${({ theme, active }) => !active && theme.INTERACTIVE_HOVER};
-  }
-`;
-
-export const StyledImage = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6));
-`;
-
-export const StyledHighlightedText = styled.span`
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  text-decoration-color: #eab308;
-`;
-
-export const StyledProducthunt = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  gap: 3rem;
-  border-right: 1px solid white;
-  padding-right: 3rem;
-
-  @media only screen and (max-width: 768px) {
-    border-right: none;
-    border-bottom: 1px solid white;
-    padding-bottom: 3rem;
-    padding-right: 0;
-  }
-`;
-
-export const StyledPaidSection = styled.section`
-  display: flex;
-  max-width: 85%;
-  margin: 0 auto;
-  gap: 2rem;
-  padding: 50px 3%;
-
-  @media only screen and (max-width: 768px) {
-    flex-direction: column;
-    max-width: 80%;
-  }
-`;
-
-export const StyledAffiliate = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  gap: 3rem;
-`;

src/containers/ModalController/index.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-import { AccountModal } from "src/containers/Modals/AccountModal";
-import { ClearModal } from "src/containers/Modals/ClearModal";
-import { CloudModal } from "src/containers/Modals/CloudModal";
-import { DownloadModal } from "src/containers/Modals/DownloadModal";
-import { ImportModal } from "src/containers/Modals/ImportModal";
-import { LoginModal } from "src/containers/Modals/LoginModal";
-import { SettingsModal } from "src/containers/Modals/SettingsModal";
-import { ShareModal } from "src/containers/Modals/ShareModal";
-import useModal from "src/store/useModal";
-import { shallow } from "zustand/shallow";
-
-export const ModalController = () => {
-  const setVisible = useModal(state => state.setVisible);
-
-  const [
-    importModal,
-    clearModal,
-    downloadModal,
-    settingsModal,
-    cloudModal,
-    accountModal,
-    loginModal,
-    shareModal,
-  ] = useModal(
-    state => [
-      state.import,
-      state.clear,
-      state.download,
-      state.settings,
-      state.cloud,
-      state.account,
-      state.login,
-      state.share,
-    ],
-    shallow
-  );
-
-  return (
-    <>
-      <ImportModal opened={importModal} onClose={() => setVisible("import")(false)} />
-      <ClearModal opened={clearModal} onClose={() => setVisible("clear")(false)} />
-      <DownloadModal opened={downloadModal} onClose={() => setVisible("download")(false)} />
-      <SettingsModal opened={settingsModal} onClose={() => setVisible("settings")(false)} />
-      <CloudModal opened={cloudModal} onClose={() => setVisible("cloud")(false)} />
-      <AccountModal opened={accountModal} onClose={() => setVisible("account")(false)} />
-      <LoginModal opened={loginModal} onClose={() => setVisible("login")(false)} />
-      <ShareModal opened={shareModal} onClose={() => setVisible("share")(false)} />
-    </>
-  );
-};

src/containers/Modals/AccountModal/index.tsx

@@ -1,111 +1,87 @@
 import React from "react";
-import Link from "next/link";
-import { Modal, Group, Button, Badge, Avatar, Grid, Divider, ModalProps } from "@mantine/core";
+import {
+  Modal,
+  Group,
+  Button,
+  Avatar,
+  Text,
+  Divider,
+  ModalProps,
+  Paper,
+  Badge,
+} from "@mantine/core";
+import { useUser as useSupaUser } from "@supabase/auth-helpers-react";
 import { IoRocketSharp } from "react-icons/io5";
+import useModal from "src/store/useModal";
 import useUser from "src/store/useUser";
-import styled from "styled-components";
-
-const StyledTitle = styled.div`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.TEXT_POSITIVE};
-  flex: 1;
-  font-weight: 700;
-
-  &::after {
-    background: ${({ theme }) => theme.TEXT_POSITIVE};
-    height: 1px;
-
-    content: "";
-    -webkit-box-flex: 1;
-    -ms-flex: 1 1 auto;
-    flex: 1 1 auto;
-    margin-left: 4px;
-    opacity: 0.6;
-  }
-`;
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 0;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-
-  & > div {
-    font-weight: 400;
-    font-size: 14px;
-    color: ${({ theme }) => theme.INTERACTIVE_ACTIVE};
-  }
-`;
 
 export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
-  const user = useUser(state => state.user);
-  const isPremium = useUser(state => state.isPremium());
+  const user = useSupaUser();
+  const isPremium = useUser(state => state.premium);
+  const isOrg = useUser(state => state.organization);
+  const isOrgAdmin = useUser(state => state.orgAdmin);
+  const premiumCancelled = useUser(state => state.premiumCancelled);
+  const setVisible = useModal(state => state.setVisible);
   const logout = useUser(state => state.logout);
 
-  const onImgFail = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    e.currentTarget.setAttribute("src", `https://ui-avatars.com/api/?name=${user?.name}`);
-  };
-
   return (
-    <Modal title="Account" opened={opened} onClose={onClose} centered>
-      <StyledTitle>Hello, {user?.name}!</StyledTitle>
-      <Group py="sm">
-        <Grid gutter="xs">
-          <Grid.Col span={2}>
-            <Avatar size="lg" radius="lg" src={user?.profilePicture} alt={user?.name} />
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <StyledContainer>
-              USERNAME
-              <div>{user?.name}</div>
-            </StyledContainer>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StyledContainer>
-              ACCOUNT STATUS
-              <div>{isPremium ? <Badge>Premium</Badge> : <Badge color="gray">Free</Badge>}</div>
-            </StyledContainer>
-          </Grid.Col>
-          <Grid.Col span={6}>
-            <StyledContainer>
-              EMAIL
-              <div>{user?.email}</div>
-            </StyledContainer>
-          </Grid.Col>
-          <Grid.Col span={4}>
-            <StyledContainer>
-              REGISTRATION
-              <div>{user?.signUpAt && new Date(user.signUpAt).toDateString()}</div>
-            </StyledContainer>
-          </Grid.Col>
-        </Grid>
-      </Group>
+    <Modal title={`Hello, ${user?.user_metadata.name}!`} opened={opened} onClose={onClose} centered>
+      <Paper p="md">
+        <Group noWrap>
+          <Avatar src={user?.user_metadata.avatar_url} size={94}>
+            JC
+          </Avatar>
+          <div>
+            <Text fz="lg" tt="uppercase" fw={700}>
+              {user?.user_metadata.name}
+            </Text>
+
+            <Group noWrap spacing={10} mt={3}>
+              <Text fz="xs" c="dimmed">
+                {user?.email}
+              </Text>
+            </Group>
+
+            <Group noWrap spacing={10} mt={5}>
+              <Text fz="xs" c="dimmed">
+                <Badge
+                  size="sm"
+                  variant={isPremium ? "gradient" : "dot"}
+                  color={premiumCancelled || !isPremium ? "dark" : "green"}
+                  gradient={{ from: "#8800fe", to: "#ff00cc", deg: 35 }}
+                >
+                  {isPremium ? "Premium" : "Free"}{" "}
+                  {premiumCancelled ? "(Cancelled)" : isOrg && "(Organization)"}
+                </Badge>
+              </Text>
+            </Group>
+          </div>
+        </Group>
+      </Paper>
+
       <Divider py="xs" />
       <Group position="right">
-        {isPremium ? (
+        {isPremium && !premiumCancelled ? (
           <Button
             variant="light"
             color="red"
-            onClick={() => window.open("https://patreon.com/jsoncrack", "_blank")}
-            leftIcon={<IoRocketSharp />}
+            onClick={() => {
+              setVisible("cancelPremium")(true);
+              onClose();
+            }}
+            disabled={isOrg && !isOrgAdmin}
           >
             Cancel Subscription
           </Button>
         ) : (
-          <Link href="/pricing" target="_blank" rel="noreferrer">
-            <Button
-              variant="gradient"
-              gradient={{ from: "teal", to: "lime", deg: 105 }}
-              leftIcon={<IoRocketSharp />}
-            >
-              UPGRADE TO PREMIUM!
-            </Button>
-          </Link>
+          <Button
+            variant="gradient"
+            gradient={{ from: "teal", to: "lime", deg: 105 }}
+            leftIcon={<IoRocketSharp />}
+            onClick={() => setVisible("premium")(true)}
+          >
+            UPGRADE TO PREMIUM!
+          </Button>
         )}
         <Button
           color="red"

src/containers/Modals/CancelPremiumModal/index.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { Modal, Group, Button, Divider, ModalProps, Text, Image, Anchor } from "@mantine/core";
+import { toast } from "react-hot-toast";
+import { supabase } from "src/lib/api/supabase";
+import useModal from "src/store/useModal";
+
+export const CancelPremiumModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const [cancelling, setCancelling] = React.useState(false);
+  const showFeedback = useModal(state => state.setVisible("review"));
+
+  const cancelSub = async () => {
+    try {
+      setCancelling(true);
+      const { data: user } = await supabase.auth.getSession();
+
+      if (user) {
+        const { error } = await supabase.functions.invoke("lemonsqueezy", {
+          method: "DELETE",
+          body: {
+            jwt: user.session?.access_token,
+          },
+        });
+
+        if (error) {
+          return toast.error(
+            "An error occured while cancelling subscription, please contact: contact@jsoncrack.com"
+          );
+        }
+
+        toast.success("Cancelled premium plan!");
+        showFeedback(true);
+      } else {
+        toast.error("Couldn't fetch user details, please contact: contact@jsoncrack.com");
+      }
+
+      toast.success("Cancelled premium plan!");
+      onClose();
+    } catch (err) {
+      console.error(err);
+    } finally {
+      setCancelling(false);
+    }
+  };
+
+  return (
+    <Modal title="CANCEL PREMIUM?" opened={opened} onClose={onClose} centered>
+      <Image py="xs" src="assets/taken.svg" mx="auto" width={200} alt="taken" />
+      <Text fz="sm" pb="md">
+        Cancellation will take effect at the end of your current billing period.
+        <br />
+        <br />
+        You can restart your subscription anytime.
+        <br />
+        <Text size="xs" color="dimmed">
+          If you have problems with cancelling plan please contact: contact@jsoncrack.com
+        </Text>
+        <Anchor target="_blank" href="https://patreon.com/herowand">
+          Click here to cancel if you are Patreon member
+        </Anchor>
+      </Text>
+      <Divider py="xs" />
+      <Group position="right">
+        <Button color="dark" variant="subtle" onClick={onClose}>
+          Cancel
+        </Button>
+        <Button onClick={cancelSub} loading={cancelling} color="red">
+          QUIT SUBSCRIPTION
+        </Button>
+      </Group>
+    </Modal>
+  );
+};

src/containers/Modals/ClearModal/index.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 import { useRouter } from "next/router";
 import { Modal, Group, Button, Text, Divider, ModalProps } from "@mantine/core";
-import { deleteJson } from "src/services/db/json";
+import { documentSvc } from "src/services/document.service";
 import useJson from "src/store/useJson";
 
 export const ClearModal: React.FC<ModalProps> = ({ opened, onClose }) => {
@@ -13,7 +13,7 @@ export const ClearModal: React.FC<ModalProps> = ({ opened, onClose }) => {
     onClose();
 
     if (typeof query.json === "string") {
-      deleteJson(query.json);
+      documentSvc.delete(query.json);
       replace("/editor");
     }
   };

src/containers/Modals/CloudModal/index.tsx

@@ -1,247 +1,262 @@
 import React from "react";
+import Link from "next/link";
 import { useRouter } from "next/router";
 import {
   Modal,
-  Group,
-  Button,
   Text,
-  Stack,
-  Loader,
-  Center,
   Divider,
   ScrollArea,
   ModalProps,
+  Table,
+  ActionIcon,
+  Badge,
+  Paper,
+  Flex,
+  DefaultMantineColor,
+  Input,
+  Button,
+  Group,
+  Stack,
+  RingProgress,
+  UnstyledButton,
 } from "@mantine/core";
 import { useQuery } from "@tanstack/react-query";
 import dayjs from "dayjs";
 import relativeTime from "dayjs/plugin/relativeTime";
 import toast from "react-hot-toast";
-import { AiOutlineEdit, AiOutlineLock, AiOutlinePlus, AiOutlineUnlock } from "react-icons/ai";
+import { AiOutlineLink } from "react-icons/ai";
 import { FaTrash } from "react-icons/fa";
-import { IoRocketSharp } from "react-icons/io5";
-import { deleteJson, getAllJson, saveJson, updateJson } from "src/services/db/json";
-import useJson from "src/store/useJson";
+import { MdFileOpen } from "react-icons/md";
+import { VscAdd, VscEdit, VscLock, VscUnlock } from "react-icons/vsc";
+import { FileFormat } from "src/enums/file.enum";
+import { documentSvc } from "src/services/document.service";
+import useFile, { File } from "src/store/useFile";
 import useUser from "src/store/useUser";
-import { Json } from "src/typings/altogic";
-import styled from "styled-components";
 
 dayjs.extend(relativeTime);
 
-const StyledJsonCard = styled.a<{ active?: boolean; create?: boolean }>`
-  display: ${({ create }) => (create ? "block" : "flex")};
-  align-items: center;
-  justify-content: space-between;
-  background: ${({ theme }) => theme.BLACK_SECONDARY};
-  line-height: 20px;
-  padding: 6px;
-  border: 2px solid ${({ theme, active }) => (active ? theme.SEAGREEN : theme.BLACK_SECONDARY)};
-  border-radius: 5px;
-  overflow: hidden;
-  flex: 1;
-  height: 160px;
-`;
-
-const StyledInfo = styled.div``;
-
-const StyledTitle = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 14px;
-  font-weight: 500;
-  width: fit-content;
-  cursor: pointer;
-
-  span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-
-const StyledDetils = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  gap: 4px;
-`;
-
-const StyledCreateWrapper = styled.div`
-  display: flex;
-  height: 100%;
-  gap: 6px;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.6;
-  height: 45px;
-  font-size: 14px;
-  cursor: pointer;
-`;
-
-const StyledNameInput = styled.input`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 90%;
-  color: ${({ theme }) => theme.SEAGREEN};
-  font-weight: 600;
-`;
-
-const GraphCard: React.FC<{ data: Json; refetch: () => void; active: boolean }> = ({
-  data,
-  refetch,
-  active,
-  ...props
-}) => {
-  const [editMode, setEditMode] = React.useState(false);
-  const [name, setName] = React.useState(data.name);
+const colorByFormat: Record<FileFormat, DefaultMantineColor> = {
+  json: "orange",
+  yaml: "blue",
+  xml: "red",
+  toml: "dark",
+  csv: "grape",
+};
 
+const UpdateNameModal: React.FC<{
+  file: File | null;
+  onClose: () => void;
+  refetch: () => void;
+}> = ({ file, onClose, refetch }) => {
+  const [name, setName] = React.useState("");
   const onSubmit = () => {
+    if (!file) return;
     toast
-      .promise(updateJson(data._id, { name }), {
+      .promise(documentSvc.update(file.id, { name }), {
         loading: "Updating document...",
         error: "Error occurred while updating document!",
         success: `Renamed document to ${name}`,
       })
-      .then(refetch);
+      .then(() => {
+        refetch();
+        setName("");
+      });
 
-    setEditMode(false);
-  };
-
-  const onDeleteClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-
-    toast
-      .promise(deleteJson(data._id), {
-        loading: "Deleting JSON file...",
-        error: "An error occurred while deleting the file!",
-        success: `Deleted ${name}!`,
-      })
-      .then(refetch);
+    onClose();
   };
 
   return (
-    <StyledJsonCard
-      href={`?json=${data._id}`}
-      as={editMode ? "div" : "a"}
-      active={active}
-      {...props}
-    >
-      <StyledInfo>
-        {editMode ? (
-          <form onSubmit={onSubmit}>
-            <StyledNameInput
-              value={name}
-              onChange={e => setName(e.currentTarget.value)}
-              onClick={e => e.preventDefault()}
-              autoFocus
-            />
-            <input type="submit" hidden />
-          </form>
-        ) : (
-          <StyledTitle
-            onClick={e => {
-              e.preventDefault();
-              setEditMode(true);
-            }}
-          >
-            <span>{name}</span>
-            <AiOutlineEdit />
-          </StyledTitle>
-        )}
-        <StyledDetils>
-          {data.private ? <AiOutlineLock /> : <AiOutlineUnlock />}
-          Last modified {dayjs(data.updatedAt).fromNow()}
-        </StyledDetils>
-      </StyledInfo>
-      <Button variant="subtle" color="red" onClick={onDeleteClick}>
-        <FaTrash />
-      </Button>
-    </StyledJsonCard>
-  );
-};
-
-const CreateCard: React.FC<{ reachedLimit: boolean }> = ({ reachedLimit }) => {
-  const { replace } = useRouter();
-  const isPremium = useUser(state => state.isPremium());
-  const getJson = useJson(state => state.getJson);
-  const setHasChanges = useJson(state => state.setHasChanges);
-
-  const onCreate = async () => {
-    try {
-      toast.loading("Saving JSON...", { id: "jsonSave" });
-      const res = await saveJson({ data: getJson() });
-
-      if (res.errors && res.errors.items.length > 0) throw res.errors;
-
-      toast.success("JSON saved to cloud", { id: "jsonSave" });
-      setHasChanges(false);
-      replace({ query: { json: res.data._id } });
-    } catch (error: any) {
-      if (error?.items?.length > 0) {
-        return toast.error(error.items[0].message, { id: "jsonSave", duration: 7000 });
-      }
-      toast.error("Failed to save JSON!", { id: "jsonSave" });
-    }
-  };
-
-  if (!isPremium && reachedLimit)
-    return (
-      <StyledJsonCard href="/pricing" create>
-        <StyledCreateWrapper>
-          <IoRocketSharp size="18" />
-          You reached max limit, upgrade to premium for more!
-        </StyledCreateWrapper>
-      </StyledJsonCard>
-    );
-
-  return (
-    <StyledJsonCard onClick={onCreate} create>
-      <StyledCreateWrapper>
-        <AiOutlinePlus size="24" />
-        Create New JSON
-      </StyledCreateWrapper>
-    </StyledJsonCard>
+    <Modal title="Update Document name" opened={!!file} onClose={onClose} centered zIndex={202}>
+      <Stack>
+        <Input
+          value={name}
+          placeholder={file?.name}
+          onChange={e => setName(e.currentTarget.value)}
+        />
+        <Group position="right">
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={onSubmit}>Update</Button>
+        </Group>
+      </Stack>
+    </Modal>
   );
 };
 
 export const CloudModal: React.FC<ModalProps> = ({ opened, onClose }) => {
-  const { isReady, query } = useRouter();
-
-  const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson(), {
+  const totalQuota = useUser(state => (state.premium ? 200 : 25));
+  const isPremium = useUser(state => state.premium);
+  const getContents = useFile(state => state.getContents);
+  const setHasChanges = useFile(state => state.setHasChanges);
+  const getFormat = useFile(state => state.getFormat);
+  const [currentFile, setCurrentFile] = React.useState<File | null>(null);
+  const { isReady, query, replace } = useRouter();
+  const { data, refetch } = useQuery(["allJson", query], () => documentSvc.getAll(), {
     enabled: isReady && opened,
   });
 
-  return (
-    <Modal title="Saved On The Cloud" opened={opened} onClose={onClose} centered>
-      <ScrollArea h={360}>
-        <Stack py="sm">
-          {isFetching ? (
-            <Center>
-              <Loader />
-            </Center>
-          ) : (
-            <>
-              <CreateCard reachedLimit={data ? data?.data.result.length > 15 : false} />
-              {data?.data?.result?.map(json => (
-                <GraphCard
-                  data={json}
-                  key={json._id}
-                  refetch={refetch}
-                  active={query.json === json._id}
-                />
-              ))}
-            </>
-          )}
-        </Stack>
-      </ScrollArea>
+  const isCreateDisabled = React.useMemo(() => {
+    if (!data?.length) return false;
+    return isPremium ? data.length >= 200 : data.length >= 25;
+  }, [isPremium, data?.length]);
 
+  const onCreate = async () => {
+    try {
+      toast.loading("Saving document...", { id: "fileSave" });
+      const { data, error } = await documentSvc.upsert({
+        contents: getContents(),
+        format: getFormat(),
+      });
+
+      if (error) throw error;
+
+      toast.success("Document saved to cloud", { id: "fileSave" });
+      setHasChanges(false);
+      replace({ query: { json: data } });
+      onClose();
+    } catch (error: any) {
+      toast.error("Failed to save document!", { id: "fileSave" });
+      console.error(error);
+    }
+  };
+
+  const onDeleteClick = React.useCallback(
+    (file: File) => {
+      toast
+        .promise(documentSvc.delete(file.id), {
+          loading: "Deleting file...",
+          error: "An error occurred while deleting the file!",
+          success: `Deleted ${file.name}!`,
+        })
+        .then(() => refetch());
+    },
+    [refetch]
+  );
+
+  const copyShareLink = React.useCallback((fileId: string) => {
+    const shareLink = `${window.location.origin}/editor?json=${fileId}`;
+    navigator.clipboard.writeText(shareLink);
+    toast.success("Copied share link to clipboard!");
+  }, []);
+
+  const rows = React.useMemo(
+    () =>
+      data?.map(element => (
+        <tr key={element.id}>
+          <td>
+            <Flex align="center" gap="xs">
+              {element.private ? <VscLock /> : <VscUnlock />}
+              {element.id}
+            </Flex>
+          </td>
+          <td>
+            <Flex align="center" justify="space-between">
+              {element.name}
+              <ActionIcon color="cyan" onClick={() => setCurrentFile(element)}>
+                <VscEdit />
+              </ActionIcon>
+            </Flex>
+          </td>
+          <td>{dayjs(element.created_at).format("DD.MM.YYYY")}</td>
+          <td>
+            <Badge variant="light" color={colorByFormat[element.format]} size="sm">
+              {element.format.toUpperCase()}
+            </Badge>
+          </td>
+          <td>{element.views.toLocaleString("en-US")}</td>
+          <td>
+            <Flex gap="xs">
+              <ActionIcon
+                component={Link}
+                href={`?json=${element.id}`}
+                prefetch={false}
+                color="blue"
+                onClick={onClose}
+              >
+                <MdFileOpen size="18" />
+              </ActionIcon>
+              <ActionIcon color="red" onClick={() => onDeleteClick(element)}>
+                <FaTrash size="18" />
+              </ActionIcon>
+              <ActionIcon color="green" onClick={() => copyShareLink(element.id)}>
+                <AiOutlineLink />
+              </ActionIcon>
+            </Flex>
+          </td>
+        </tr>
+      )),
+    [data, copyShareLink, onClose, onDeleteClick]
+  );
+
+  return (
+    <Modal title="Saved On The Cloud" opened={opened} size="xl" onClose={onClose} centered>
+      <Paper>
+        <ScrollArea h={360} offsetScrollbars>
+          <Table fontSize="xs" verticalSpacing="xs" striped>
+            <thead>
+              <tr>
+                <th>ID</th>
+                <th>Name</th>
+                <th>Create Date</th>
+                <th>Format</th>
+                <th>Views</th>
+                <th>Actions</th>
+              </tr>
+            </thead>
+            <tbody>{rows}</tbody>
+          </Table>
+        </ScrollArea>
+      </Paper>
+      {data && (
+        <Flex gap="md">
+          <Paper my="lg" withBorder radius="md" p="xs" w="100%">
+            <Group>
+              <RingProgress
+                size={60}
+                roundCaps
+                thickness={8}
+                sections={[
+                  {
+                    value: (data.length * 100) / totalQuota,
+                    color: data.length > totalQuota / 1.5 ? "red" : "blue",
+                  },
+                ]}
+              />
+              <div>
+                <Text color="dimmed" size="xs" transform="uppercase" weight={700}>
+                  Total Quota
+                </Text>
+                <Text weight={700} size="xl">
+                  {data.length} / {totalQuota}
+                </Text>
+              </div>
+            </Group>
+          </Paper>
+          <Paper my="lg" withBorder radius="md" p="xs" w={250}>
+            <UnstyledButton
+              fw="bold"
+              w="100%"
+              h="100%"
+              onClick={onCreate}
+              disabled={isCreateDisabled}
+            >
+              <Text fz="md" align="center" color="blue">
+                <Flex align="center" justify="center">
+                  <VscAdd size="24" />
+                  Create New Document
+                </Flex>
+              </Text>
+            </UnstyledButton>
+          </Paper>
+        </Flex>
+      )}
       <Divider py="xs" />
-      <Group position="right">
-        <Text fz="xs">
-          Cloud Save feature is for ease-of-access only and not recommended to store sensitive data,
-          we don&apos;t guarantee protection of your data.
-        </Text>
-      </Group>
+      <Text fz="xs">
+        The Cloud Save feature is primarily designed for convenient access and is not advisable for
+        storing sensitive data.
+      </Text>
+      <UpdateNameModal file={currentFile} onClose={() => setCurrentFile(null)} refetch={refetch} />
     </Modal>
   );
 };

src/containers/Modals/DownloadModal/index.tsx

@@ -12,15 +12,28 @@ import {
   ColorInput,
   Stack,
 } from "@mantine/core";
-import { toBlob, toPng, toSvg } from "html-to-image";
+import { toBlob, toJpeg, toPng, toSvg } from "html-to-image";
+import ReactGA from "react-ga4";
 import toast from "react-hot-toast";
 import { FiCopy, FiDownload } from "react-icons/fi";
 
 enum Extensions {
   SVG = "svg",
   PNG = "png",
+  JPEG = "jpeg",
 }
 
+const getDownloadFormat = (format: Extensions) => {
+  switch (format) {
+    case Extensions.SVG:
+      return toSvg;
+    case Extensions.PNG:
+      return toPng;
+    case Extensions.JPEG:
+      return toJpeg;
+  }
+};
+
 const swatches = [
   "#B80000",
   "#DB3E00",
@@ -43,6 +56,7 @@ const swatches = [
 
 function downloadURI(uri: string, name: string) {
   var link = document.createElement("a");
+
   link.download = name;
   link.href = uri;
   document.body.appendChild(link);
@@ -54,7 +68,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   const [extension, setExtension] = React.useState(Extensions.PNG);
   const [fileDetails, setFileDetails] = React.useState({
     filename: "jsoncrack.com",
-    backgroundColor: "rgba(255, 255, 255, 1)",
+    backgroundColor: "#FFFFFF",
     quality: 1,
   });
 
@@ -82,6 +96,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
       toast.error("Failed to copy to clipboard");
     } finally {
       toast.dismiss("toastClipboard");
+      ReactGA.event({ action: "click_clipboard_image", category: "User" });
       onClose();
     }
   };
@@ -92,9 +107,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
 
       const imageElement = document.querySelector("svg[id*='ref']") as HTMLElement;
 
-      let exportImage = extension === Extensions.SVG ? toSvg : toPng;
-
-      const dataURI = await exportImage(imageElement, {
+      const dataURI = await getDownloadFormat(extension)(imageElement, {
         quality: fileDetails.quality,
         backgroundColor: fileDetails.backgroundColor,
       });
@@ -104,6 +117,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
       toast.error("Failed to download image!");
     } finally {
       toast.dismiss("toastDownload");
+      ReactGA.event({ action: "click_download_image", category: "User" });
       onClose();
     }
   };
@@ -125,11 +139,12 @@ export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
           <SegmentedControl
             value={extension}
             onChange={e => setExtension(e as Extensions)}
+            fullWidth
             data={[
               { label: "SVG", value: Extensions.SVG },
               { label: "PNG", value: Extensions.PNG },
+              { label: "JPEG", value: Extensions.JPEG },
             ]}
-            fullWidth
           />
         </Grid.Col>
       </Grid>

src/containers/Modals/ImportModal/index.tsx

@@ -1,9 +1,9 @@
 import React from "react";
+import styled from "styled-components";
 import { Modal, Group, Button, TextInput, Stack, Divider, ModalProps } from "@mantine/core";
 import toast from "react-hot-toast";
 import { AiOutlineUpload } from "react-icons/ai";
-import useJson from "src/store/useJson";
-import styled from "styled-components";
+import useFile from "src/store/useFile";
 
 const StyledUploadWrapper = styled.label`
   display: flex;
@@ -33,7 +33,7 @@ const StyledUploadMessage = styled.h3`
 `;
 
 export const ImportModal: React.FC<ModalProps> = ({ opened, onClose }) => {
-  const setJson = useJson(state => state.setJson);
+  const setContents = useFile(state => state.setContents);
   const [url, setURL] = React.useState("");
   const [jsonFile, setJsonFile] = React.useState<File | null>(null);
 
@@ -61,7 +61,7 @@ export const ImportModal: React.FC<ModalProps> = ({ opened, onClose }) => {
       return fetch(url)
         .then(res => res.json())
         .then(json => {
-          setJson(JSON.stringify(json, null, 2));
+          setContents({ contents: JSON.stringify(json, null, 2) });
           onClose();
         })
         .catch(() => toast.error("Failed to fetch JSON!"))
@@ -73,7 +73,7 @@ export const ImportModal: React.FC<ModalProps> = ({ opened, onClose }) => {
 
       reader.readAsText(jsonFile, "UTF-8");
       reader.onload = function (data) {
-        setJson(data.target?.result as string);
+        if (typeof data.target?.result === "string") setContents({ contents: data.target?.result });
         onClose();
       };
     }

src/containers/Modals/JQModal/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import { Stack, Modal, Button, ModalProps, Text, Anchor, Group } from "@mantine/core";
+import Editor from "@monaco-editor/react";
+import { VscLinkExternal } from "react-icons/vsc";
+import useJsonQuery from "src/hooks/useJsonQuery";
+import useConfig from "src/store/useConfig";
+
+export const JQModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const { updateJson } = useJsonQuery();
+  const [query, setQuery] = React.useState("");
+  const darkmodeEnabled = useConfig(state => (state.darkmodeEnabled ? "vs-dark" : "light"));
+
+  const onApply = () => {
+    updateJson(query);
+  };
+
+  return (
+    <Modal title="JSON Query" size="lg" opened={opened} onClose={onClose} centered>
+      <Stack py="sm">
+        <Text fz="sm">
+          jq is a lightweight and flexible command-line JSON processor. JSON Crack uses simplified
+          version of jq, not all features are supported.
+          <br />
+          <Anchor target="_blank" href="https://jqlang.github.io/jq/manual/">
+            Read documentation. <VscLinkExternal />
+          </Anchor>
+        </Text>
+        <Editor
+          value={query ?? ""}
+          theme={darkmodeEnabled}
+          onChange={e => setQuery(e!)}
+          height={300}
+          language="markdown"
+          options={{
+            formatOnPaste: true,
+            formatOnType: true,
+            minimap: {
+              enabled: false,
+            },
+          }}
+        />
+        <Group position="right">
+          <Button onClick={onApply}>Display on Graph</Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};

src/containers/Modals/JWTModal/index.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import { Stack, Modal, Button, ModalProps, Textarea } from "@mantine/core";
+import { decode } from "jsonwebtoken";
+import useFile from "src/store/useFile";
+
+export const JWTModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const setContents = useFile(state => state.setContents);
+  const [token, setToken] = React.useState("");
+
+  const resolve = () => {
+    if (!token) return;
+    const json = decode(token);
+
+    setContents({ contents: JSON.stringify(json, null, 2) });
+    setToken("");
+    onClose();
+  };
+
+  return (
+    <Modal title="Decode JSON Web Token" opened={opened} onClose={onClose} centered>
+      <Stack py="sm">
+        <Textarea
+          placeholder="eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6Ikhlcm93YW5kIiwidXJsIjoiaHR0cHM6Ly9oZXJvd2FuZC5jb20iLCJpYXQiOjE1MTYyMzkwMjJ9.Tmm3Miq6KWCF_QRn3iERhhXThJzv4LQPKYwBhYUld88"
+          value={token}
+          onChange={e => setToken(e.target.value)}
+          fz="sm"
+          fw={700}
+          minRows={8}
+          data-autofocus
+        >
+          Share Link
+        </Textarea>
+        <Button onClick={resolve} fullWidth>
+          Resolve
+        </Button>
+      </Stack>
+    </Modal>
+  );
+};

src/containers/Modals/NodeModal/index.tsx

@@ -1,21 +1,43 @@
 import React from "react";
-import { Modal, Stack, Text, ScrollArea, ModalProps } from "@mantine/core";
+import { Modal, Stack, Text, ScrollArea, ModalProps, Button } from "@mantine/core";
 import { Prism } from "@mantine/prism";
+import Editor from "@monaco-editor/react";
+import vsDark from "prism-react-renderer/themes/vsDark";
+import vsLight from "prism-react-renderer/themes/vsLight";
+import { VscLock } from "react-icons/vsc";
+import { isIframe } from "src/lib/utils/widget";
+import useConfig from "src/store/useConfig";
+import useFile from "src/store/useFile";
 import useGraph from "src/store/useGraph";
-import { dataToString } from "src/utils/dataToString";
-import { shallow } from "zustand/shallow";
+import useModal from "src/store/useModal";
+import useUser from "src/store/useUser";
 
-const CodeBlock: React.FC<{ children: any }> = ({ children }) => {
+const dataToString = (data: any) => {
+  const text = Array.isArray(data) ? Object.fromEntries(data) : data;
+  const replacer = (_: string, v: string) => {
+    if (typeof v === "string") return v.replaceAll('"', "");
+    return v;
+  };
+
+  return JSON.stringify(text, replacer, 2);
+};
+
+const CodeBlock: React.FC<{ children: any; [key: string]: any }> = ({
+  format,
+  children,
+  ...props
+}) => {
   return (
     <ScrollArea>
       <Prism
-        maw={600}
         miw={350}
         mah={250}
         language="json"
         copyLabel="Copy to clipboard"
         copiedLabel="Copied to clipboard"
         withLineNumbers
+        getPrismTheme={(_theme, colorScheme) => (colorScheme === "light" ? vsLight : vsDark)}
+        {...props}
       >
         {children}
       </Prism>
@@ -24,26 +46,87 @@ const CodeBlock: React.FC<{ children: any }> = ({ children }) => {
 };
 
 export const NodeModal: React.FC<ModalProps> = ({ opened, onClose }) => {
-  const [nodeData, path] = useGraph(
-    state => [dataToString(state.selectedNode.text), state.selectedNode.path],
-    shallow
+  const isPremium = useUser(state => state.premium);
+  const editContents = useFile(state => state.editContents);
+  const setVisible = useModal(state => state.setVisible);
+  const darkmodeEnabled = useConfig(state => (state.darkmodeEnabled ? "vs-dark" : "light"));
+  const nodeData = useGraph(state => dataToString(state.selectedNode?.text));
+  const path = useGraph(state => state.selectedNode?.path);
+  const isParent = useGraph(state => state.selectedNode?.data?.isParent);
+  const [editMode, setEditMode] = React.useState(false);
+  const [value, setValue] = React.useState(nodeData || "");
+
+  const onUpdate = () => {
+    if (!value) return setEditMode(false);
+    if (!isPremium) return;
+    editContents(path!, value, () => {
+      setEditMode(false);
+      onModalClose();
+    });
+  };
+
+  const onModalClose = () => {
+    setEditMode(false);
+    setValue("");
+    onClose();
+  };
+
+  const onEditClick = () => {
+    if (isPremium) return setEditMode(true);
+    setVisible("premium")(true);
+  };
+
+  const isEditVisible = React.useMemo(
+    () => path !== "{Root}" && !isParent && !isIframe(),
+    [isParent, path]
   );
 
   return (
-    <Modal title="Node Content" size="auto" opened={opened} onClose={onClose} centered>
+    <Modal title="Node Content" size="auto" opened={opened} onClose={onModalClose} centered>
       <Stack py="sm" spacing="sm">
         <Stack spacing="xs">
           <Text fz="sm" fw={700}>
             Content
           </Text>
-          <CodeBlock>{nodeData}</CodeBlock>
-        </Stack>
-        <Stack spacing="xs">
-          <Text fz="sm" fw={700}>
-            Node Path
-          </Text>
-          <CodeBlock>{path}</CodeBlock>
+          {editMode ? (
+            <Editor
+              theme={darkmodeEnabled}
+              defaultValue={nodeData}
+              onChange={e => setValue(e!)}
+              height={200}
+              language="json"
+              options={{
+                readOnly: !editMode,
+                minimap: {
+                  enabled: false,
+                },
+              }}
+            />
+          ) : (
+            <CodeBlock maw={600}>{nodeData}</CodeBlock>
+          )}
         </Stack>
+        {isEditVisible && (
+          <Stack spacing="xs">
+            {editMode ? (
+              <Button
+                variant={value ? "filled" : "light"}
+                color={value ? "green" : "blue"}
+                onClick={onUpdate}
+              >
+                {value.length ? "Update Document" : "Cancel"}
+              </Button>
+            ) : (
+              <Button onClick={onEditClick} leftIcon={!isPremium && <VscLock />} variant="filled">
+                Edit
+              </Button>
+            )}
+          </Stack>
+        )}
+        <Text fz="sm" fw={700}>
+          Node Path
+        </Text>
+        <CodeBlock>{path}</CodeBlock>
       </Stack>
     </Modal>
   );

src/containers/Modals/PremiumModal/index.tsx

@@ -0,0 +1,81 @@
+import React from "react";
+import {
+  Modal,
+  ModalProps,
+  Title,
+  Flex,
+  Button,
+  Stack,
+  List,
+  ThemeIcon,
+  Divider,
+  Text,
+} from "@mantine/core";
+import { BsCheck } from "react-icons/bs";
+
+export const PremiumModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  return (
+    <Modal title="Your Plan" size="auto" opened={opened} onClose={onClose} centered zIndex={202}>
+      <Flex gap="lg">
+        <Stack spacing="xs">
+          <Title order={3}>
+            Free plan
+            <Text size="sm" color="dimmed">
+              (Free)
+            </Text>
+          </Title>
+          <Button variant="filled" color="dark" size="md">
+            Your current plan
+          </Button>
+          <List
+            spacing="xs"
+            size="sm"
+            center
+            icon={
+              <ThemeIcon color="dark.6" size={20} radius="xl">
+                <BsCheck size="1rem" />
+              </ThemeIcon>
+            }
+          >
+            <List.Item>Store/Share up to 15 files</List.Item>
+            <List.Item>Visualize standard size data</List.Item>
+          </List>
+        </Stack>
+        <Divider color="gray" orientation="vertical" />
+        <Stack spacing="xs">
+          <Title order={3}>
+            JSON Crack Plus
+            <Text size="sm" color="dimmed">
+              USD 7$/mo
+            </Text>
+          </Title>
+          <Button
+            component="a"
+            href="/pricing"
+            variant="filled"
+            color="teal"
+            size="md"
+            target="_blank"
+          >
+            Upgrade plan
+          </Button>
+          <List
+            spacing="xs"
+            size="sm"
+            center
+            icon={
+              <ThemeIcon color="teal" size={20} radius="xl">
+                <BsCheck size="1rem" />
+              </ThemeIcon>
+            }
+          >
+            <List.Item>Edit directly on graph</List.Item>
+            <List.Item>JSON Schema support</List.Item>
+            <List.Item>Visualize data at full capability</List.Item>
+            <List.Item>Save & share up to 200 files</List.Item>
+          </List>
+        </Stack>
+      </Flex>
+    </Modal>
+  );
+};

src/containers/Modals/ReviewModal/index.tsx

@@ -0,0 +1,58 @@
+import React from "react";
+import { Button, Modal, ModalProps, Rating, Text, Textarea } from "@mantine/core";
+import { toast } from "react-hot-toast";
+import { supabase } from "src/lib/api/supabase";
+
+export const ReviewModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const [stars, setStars] = React.useState(0);
+  const [review, setReview] = React.useState("");
+
+  return (
+    <Modal
+      title="Leave a Review"
+      opened={opened}
+      onClose={() => {
+        onClose();
+        setStars(0);
+        setReview("");
+      }}
+      centered
+    >
+      <form
+        onSubmit={e => {
+          e.preventDefault();
+          if (stars === 0 && !review.length) return onClose();
+          supabase
+            .from("reviews")
+            .insert({ stars, review })
+            .then(({ error }) => {
+              if (error) return toast.error(error.message);
+              toast.success("Thank you for your feedback!");
+            });
+          onClose();
+        }}
+      >
+        <Text align="center">How was your experience?</Text>
+        <Rating value={stars} onChange={setStars} my="lg" size="xl" mx="auto" />
+        <Textarea
+          placeholder="Please provide feedback on how we can enhance the product and let us know which features you require."
+          value={review}
+          onChange={e => setReview(e.currentTarget.value)}
+          minLength={10}
+          maxLength={500}
+          minRows={5}
+        />
+        <Text align="right" size={12} color="dimmed">
+          500/{review.length}
+        </Text>
+        <Text size={12}>
+          * Your feedback is kept anonymous. If you wish to be contacted, please provide your email
+          address along with your feedback.
+        </Text>
+        <Button type="submit" mt="lg" fullWidth>
+          Submit
+        </Button>
+      </form>
+    </Modal>
+  );
+};

src/containers/Modals/SchemaModal/index.tsx

@@ -0,0 +1,73 @@
+import React from "react";
+import { Stack, Modal, Button, ModalProps, Text, Anchor, Group } from "@mantine/core";
+import Editor from "@monaco-editor/react";
+import { toast } from "react-hot-toast";
+import { VscLock } from "react-icons/vsc";
+import useConfig from "src/store/useConfig";
+import useFile from "src/store/useFile";
+import useModal from "src/store/useModal";
+import useUser from "src/store/useUser";
+
+export const SchemaModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const isPremium = useUser(state => state.premium);
+  const showPremiumModal = useModal(state => state.setVisible("premium"));
+  const setJsonSchema = useFile(state => state.setJsonSchema);
+  const [schema, setSchema] = React.useState("");
+  const darkmodeEnabled = useConfig(state => (state.darkmodeEnabled ? "vs-dark" : "light"));
+
+  const onApply = () => {
+    if (!isPremium) return showPremiumModal(true);
+
+    try {
+      const parsedSchema = JSON.parse(schema);
+
+      setJsonSchema(parsedSchema);
+      toast.success("Applied schema!");
+      onClose();
+    } catch (error) {
+      toast.error("Invalid Schema");
+    }
+  };
+
+  const onClear = () => {
+    setJsonSchema(null);
+    setSchema("");
+    toast("Disabled JSON Schema");
+    onClose();
+  };
+
+  return (
+    <Modal title="JSON Schema" size="lg" opened={opened} onClose={onClose} centered>
+      <Stack py="sm">
+        <Text fz="sm">
+          Any validation failures are shown at the bottom toolbar of pane.{" "}
+          <Anchor target="_blank" href="https://json-schema.org/">
+            What is a JSON Schema?
+          </Anchor>
+        </Text>
+        <Editor
+          value={schema ?? ""}
+          theme={darkmodeEnabled}
+          onChange={e => setSchema(e!)}
+          height={300}
+          language="json"
+          options={{
+            formatOnPaste: true,
+            formatOnType: true,
+            minimap: {
+              enabled: false,
+            },
+          }}
+        />
+        <Group position="right">
+          <Button variant="outline" onClick={onClear} disabled={!schema}>
+            Clear
+          </Button>
+          <Button onClick={onApply} disabled={!schema} rightIcon={!isPremium && <VscLock />}>
+            Apply
+          </Button>
+        </Group>
+      </Stack>
+    </Modal>
+  );
+};

src/containers/Modals/SettingsModal/index.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-import { Modal, Group, Switch, Stack, ModalProps } from "@mantine/core";
-import useStored from "src/store/useStored";
-import { shallow } from "zustand/shallow";
-
-export const SettingsModal: React.FC<ModalProps> = ({ opened, onClose }) => {
-  const lightmode = useStored(state => state.lightmode);
-  const setLightTheme = useStored(state => state.setLightTheme);
-
-  const [
-    toggleHideCollapse,
-    toggleChildrenCount,
-    toggleImagePreview,
-    hideCollapse,
-    childrenCount,
-    imagePreview,
-  ] = useStored(
-    state => [
-      state.toggleHideCollapse,
-      state.toggleChildrenCount,
-      state.toggleImagePreview,
-      state.hideCollapse,
-      state.childrenCount,
-      state.imagePreview,
-    ],
-    shallow
-  );
-
-  return (
-    <Modal title="Settings" opened={opened} onClose={onClose} centered>
-      <Group py="sm">
-        <Stack>
-          <Switch
-            label="Live Image Preview"
-            size="md"
-            color="teal"
-            onChange={e => toggleImagePreview(e.currentTarget.checked)}
-            checked={imagePreview}
-          />
-          <Switch
-            label="Display Collapse/Expand Button"
-            size="md"
-            color="teal"
-            onChange={e => toggleHideCollapse(e.currentTarget.checked)}
-            checked={hideCollapse}
-          />
-          <Switch
-            label="Display Children Count"
-            size="md"
-            color="teal"
-            onChange={e => toggleChildrenCount(e.currentTarget.checked)}
-            checked={childrenCount}
-          />
-          <Switch
-            label="Light Theme"
-            size="md"
-            color="teal"
-            onChange={e => setLightTheme(e.currentTarget.checked)}
-            checked={lightmode}
-          />
-        </Stack>
-      </Group>
-    </Modal>
-  );
-};

src/containers/Modals/ShareModal/index.tsx

@@ -11,6 +11,7 @@ import {
   Text,
   ModalProps,
 } from "@mantine/core";
+import { FiExternalLink } from "react-icons/fi";
 import { MdCheck, MdCopyAll } from "react-icons/md";
 
 export const ShareModal: React.FC<ModalProps> = ({ opened, onClose }) => {
@@ -42,7 +43,14 @@ export const ShareModal: React.FC<ModalProps> = ({ opened, onClose }) => {
         <Text fz="sm" fw={700}>
           Embed into your website
         </Text>
-        <Button component="a" color="green" target="_blank" href="/docs" fullWidth>
+        <Button
+          component="a"
+          color="green"
+          target="_blank"
+          href="/docs"
+          leftIcon={<FiExternalLink />}
+          fullWidth
+        >
           Learn How to Embed
         </Button>
       </Stack>

src/containers/Modals/TypeModal/index.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Stack, Modal, ModalProps, ScrollArea, Select } from "@mantine/core";
+import { Prism } from "@mantine/prism";
+import vsDark from "prism-react-renderer/themes/vsDark";
+import vsLight from "prism-react-renderer/themes/vsLight";
+import useJson from "src/store/useJson";
+
+enum Language {
+  TypeScript = "typescript",
+  Go = "go",
+}
+
+const typeOptions = [
+  {
+    label: "TypeScript",
+    value: Language.TypeScript,
+  },
+  {
+    label: "Go",
+    value: Language.Go,
+  },
+];
+
+export const TypeModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const getJson = useJson(state => state.getJson);
+  const [type, setType] = React.useState("");
+  const [selectedType, setSelectedType] = React.useState<Language>(Language.TypeScript);
+
+  React.useEffect(() => {
+    if (opened) {
+      if (selectedType === Language.TypeScript) {
+        import("json-to-ts").then(jts => {
+          const types = jts.default(JSON.parse(getJson()));
+          setType(types.flat().join("\n\n"));
+        });
+      } else if (selectedType === Language.Go) {
+        import("src/lib/utils/json2go").then(jtg => {
+          import("gofmt.js").then(gofmt => {
+            const types = jtg.default(getJson());
+            setType(gofmt.default(types.go));
+          });
+        });
+      }
+    }
+  }, [getJson, opened, selectedType]);
+
+  return (
+    <Modal title="Generate Types" size="auto" opened={opened} onClose={onClose} centered>
+      <Stack py="sm">
+        <Select
+          value={selectedType}
+          data={typeOptions}
+          onChange={e => setSelectedType(e as Language)}
+        />
+        <ScrollArea>
+          <Prism
+            miw={350}
+            mah={600}
+            language={selectedType}
+            copyLabel="Copy to clipboard"
+            copiedLabel="Copied to clipboard"
+            withLineNumbers
+            getPrismTheme={(_theme, colorScheme) => (colorScheme === "light" ? vsLight : vsDark)}
+          >
+            {type}
+          </Prism>
+        </ScrollArea>
+      </Stack>
+    </Modal>
+  );
+};

src/containers/Modals/index.ts

@@ -0,0 +1,34 @@
+export { CloudModal } from "./CloudModal";
+export { ClearModal } from "./ClearModal";
+export { DownloadModal } from "./DownloadModal";
+export { ImportModal } from "./ImportModal";
+export { AccountModal } from "./AccountModal";
+export { NodeModal } from "./NodeModal";
+export { ShareModal } from "./ShareModal";
+export { LoginModal } from "./LoginModal";
+export { PremiumModal } from "./PremiumModal";
+export { JWTModal } from "./JWTModal";
+export { SchemaModal } from "./SchemaModal";
+export { CancelPremiumModal } from "./CancelPremiumModal";
+export { ReviewModal } from "./ReviewModal";
+export { JQModal } from "./JQModal";
+export { TypeModal } from "./TypeModal";
+
+type Modal =
+  | "clear"
+  | "cloud"
+  | "download"
+  | "import"
+  | "account"
+  | "node"
+  | "share"
+  | "login"
+  | "premium"
+  | "jwt"
+  | "schema"
+  | "cancelPremium"
+  | "review"
+  | "jq"
+  | "type";
+
+export type { Modal };

src/containers/PricingCards/index.tsx

@@ -1,136 +0,0 @@
-import React from "react";
-import { Button } from "@mantine/core";
-import styled from "styled-components";
-
-const StyledSectionBody = styled.div`
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  grid-template-rows: 1fr;
-  gap: 50px;
-  align-items: center;
-  justify-content: space-between;
-  background: rgba(181, 116, 214, 0.23);
-  width: 80%;
-  margin: 5% auto 0;
-  border-radius: 6px;
-  padding: 50px;
-
-  @media only screen and (max-width: 768px) {
-    grid-template-columns: 1fr;
-    grid-template-rows: 1fr 1fr;
-    padding: 20px;
-  }
-`;
-
-const StyledPricingCard = styled.div<{ premium?: boolean }>`
-  padding: 6px;
-  width: 100%;
-  height: 100%;
-
-  ${({ premium }) =>
-    premium
-      ? `
-      background: rgba(255, 5, 214, 0.19);
-border-radius: 4px;
-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-backdrop-filter: blur(5px);
--webkit-backdrop-filter: blur(5px);
-border: 1px solid rgba(255, 5, 214, 0.74);`
-      : `background: rgba(255, 255, 255, 0.1);
-  border-radius: 4px;
-  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
-  backdrop-filter: blur(5px);
-  -webkit-backdrop-filter: blur(5px);
-  border: 1px solid rgba(255, 255, 255, 0.3);`};
-`;
-
-const StyledPricingCardTitle = styled.h2`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  text-align: center;
-  font-weight: 800;
-  font-size: 24px;
-  gap: 6px;
-
-  img {
-    transform: rotate(45deg);
-  }
-`;
-
-const StyledPricingCardPrice = styled.h3`
-  text-align: center;
-  font-weight: 600;
-  font-size: 24px;
-  color: ${({ theme }) => theme.SILVER};
-`;
-
-const StyledPricingCardDetails = styled.ul`
-  color: ${({ theme }) => theme.FULL_WHITE};
-  line-height: 2.3;
-  padding: 20px;
-`;
-
-const StyledPricingCardDetailsItem = styled.li`
-  font-weight: 500;
-
-  @media only screen and (max-width: 768px) {
-    font-size: 14px;
-  }
-`;
-
-const StyledPricingSection = styled.section`
-  margin: 0 auto;
-
-  h1 {
-    text-align: center;
-    padding-bottom: 25px;
-  }
-`;
-
-export const PricingCards = () => {
-  return (
-    <StyledPricingSection>
-      <h1>Unlock Full Potential of JSON Crack</h1>
-      <StyledSectionBody>
-        <StyledPricingCard>
-          <StyledPricingCardTitle>Free</StyledPricingCardTitle>
-          <StyledPricingCardDetails>
-            <StyledPricingCardDetailsItem>Store up to 15 files</StyledPricingCardDetailsItem>
-            <StyledPricingCardDetailsItem>
-              Create short-links for saved JSON files
-            </StyledPricingCardDetailsItem>
-            <StyledPricingCardDetailsItem>Embed saved JSON instantly</StyledPricingCardDetailsItem>
-          </StyledPricingCardDetails>
-        </StyledPricingCard>
-        <StyledPricingCard premium>
-          <StyledPricingCardTitle>Premium</StyledPricingCardTitle>
-          <StyledPricingCardPrice>$5/mo</StyledPricingCardPrice>
-          <StyledPricingCardDetails>
-            <StyledPricingCardDetailsItem>
-              Create and share up to 200 files
-            </StyledPricingCardDetailsItem>
-            <StyledPricingCardDetailsItem>
-              Get access to JSON Crack API to generate JSON remotely
-            </StyledPricingCardDetailsItem>
-            <StyledPricingCardDetailsItem>Everything in previous tier</StyledPricingCardDetailsItem>
-          </StyledPricingCardDetails>
-          <Button
-            size="md"
-            variant="gradient"
-            gradient={{ from: "pink", to: "red", deg: 105 }}
-            component="a"
-            href="https://www.patreon.com/jsoncrack"
-            target="_blank"
-            fullWidth
-            style={{
-              border: "2px solid black",
-            }}
-          >
-            GET PREMIUM
-          </Button>
-        </StyledPricingCard>
-      </StyledSectionBody>
-    </StyledPricingSection>
-  );
-};

src/enums/file.enum.ts

@@ -0,0 +1,8 @@
+// eslint-disable
+export enum FileFormat {
+  "JSON" = "json",
+  "YAML" = "yaml",
+  "XML" = "xml",
+  "TOML" = "toml",
+  "CSV" = "csv",
+}

src/enums/viewMode.enum.ts

@@ -0,0 +1,4 @@
+export enum ViewMode {
+  Graph = "graph",
+  Tree = "tree",
+}

src/hooks/useFocusNode.ts

@@ -0,0 +1,43 @@
+import React from "react";
+import { useDebouncedValue } from "@mantine/hooks";
+import { searchQuery, cleanupHighlight, highlightMatchedNodes } from "src/lib/utils/graph/search";
+import useGraph from "src/store/useGraph";
+
+export const useFocusNode = () => {
+  const viewPort = useGraph(state => state.viewPort);
+  const [selectedNode, setSelectedNode] = React.useState(0);
+  const [nodeCount, setNodeCount] = React.useState(0);
+  const [value, setValue] = React.useState("");
+  const [debouncedValue] = useDebouncedValue(value, 600);
+
+  const skip = () => setSelectedNode(current => (current + 1) % nodeCount);
+
+  React.useEffect(() => {
+    if (!value) {
+      cleanupHighlight();
+      setSelectedNode(0);
+      setNodeCount(0);
+      return;
+    }
+
+    if (!viewPort || !debouncedValue) return;
+    const matchedNodes: NodeListOf<Element> = searchQuery(`span[data-key*='${debouncedValue}' i]`);
+    const matchedNode: Element | null = matchedNodes[selectedNode] || null;
+
+    cleanupHighlight();
+
+    if (matchedNode && matchedNode.parentElement) {
+      highlightMatchedNodes(matchedNodes, selectedNode);
+      setNodeCount(matchedNodes.length);
+
+      viewPort?.camera.centerFitElementIntoView(matchedNode.parentElement, {
+        elementExtraMarginForZoom: 400,
+      });
+    } else {
+      setSelectedNode(0);
+      setNodeCount(0);
+    }
+  }, [selectedNode, debouncedValue, value, viewPort]);
+
+  return [value, setValue, skip, nodeCount, selectedNode] as const;
+};

src/hooks/useFocusNode.tsx

@@ -1,68 +0,0 @@
-import React from "react";
-import useGraph from "src/store/useGraph";
-import { searchQuery, cleanupHighlight, highlightMatchedNodes } from "src/utils/search";
-
-export const useFocusNode = () => {
-  const zoomPanPinch = useGraph(state => state.zoomPanPinch);
-  const [selectedNode, setSelectedNode] = React.useState(0);
-  const [nodeCount, setNodeCount] = React.useState(0);
-  const [content, setContent] = React.useState({
-    value: "",
-    debounced: "",
-  });
-
-  const skip = () => setSelectedNode(current => current + 1);
-
-  React.useEffect(() => {
-    const debouncer = setTimeout(() => {
-      setContent(val => ({ ...val, debounced: content.value }));
-    }, 800);
-
-    return () => clearTimeout(debouncer);
-  }, [content.value]);
-
-  React.useEffect(() => {
-    if (!zoomPanPinch) return;
-    const ref = zoomPanPinch.instance.wrapperComponent;
-
-    const matchedNodes: NodeListOf<Element> = searchQuery(
-      `span[data-key*='${content.debounced}' i]`
-    );
-    const matchedNode: Element | null = matchedNodes[selectedNode] || null;
-
-    cleanupHighlight();
-
-    if (ref && matchedNode && matchedNode.parentElement) {
-      const newScale = 0.8;
-      const x = Number(matchedNode.getAttribute("data-x"));
-      const y = Number(matchedNode.getAttribute("data-y"));
-
-      const newPositionX =
-        (ref.offsetLeft - x) * newScale +
-        ref.clientWidth / 5 -
-        matchedNode.getBoundingClientRect().width / 5;
-
-      const newPositionY =
-        (ref.offsetLeft - y) * newScale +
-        ref.clientHeight / 8 -
-        matchedNode.getBoundingClientRect().height / 8;
-
-      highlightMatchedNodes(matchedNodes, selectedNode);
-      setNodeCount(matchedNodes.length);
-
-      zoomPanPinch?.setTransform(newPositionX, newPositionY, newScale);
-    } else {
-      setSelectedNode(0);
-      setNodeCount(0);
-    }
-
-    return () => {
-      if (!content.value) {
-        setSelectedNode(0);
-        setNodeCount(0);
-      }
-    };
-  }, [content.debounced, content, selectedNode, zoomPanPinch]);
-
-  return [content, setContent, skip, nodeCount, selectedNode] as const;
-};

src/hooks/useJsonQuery.ts

@@ -0,0 +1,29 @@
+import jq from "jq-web";
+import jts from "json-to-ts";
+import toast from "react-hot-toast";
+import useFile from "src/store/useFile";
+import useJson from "src/store/useJson";
+
+const useJsonQuery = () => {
+  const getJson = useJson(state => state.getJson);
+  const setContents = useFile(state => state.setContents);
+
+  const updateJson = (query: string) => {
+    try {
+      const res = jq.json(JSON.parse(getJson()), query);
+      setContents({ contents: JSON.stringify(res, null, 2) });
+    } catch (error) {
+      console.error(error);
+      toast.error("Unable to process the request.");
+    }
+  };
+
+  const getJsonType = () => {
+    const types = jts(JSON.parse(getJson()));
+    return types.flat().join("\n\n");
+  };
+
+  return { updateJson, getJsonType };
+};
+
+export default useJsonQuery;

src/hooks/useToggleHide.ts

@@ -0,0 +1,37 @@
+import React from "react";
+import useGraph from "src/store/useGraph";
+
+const useToggleHide = () => {
+  const getCollapsedNodeIds = useGraph(state => state.getCollapsedNodeIds);
+  const getCollapsedEdgeIds = useGraph(state => state.getCollapsedEdgeIds);
+
+  React.useEffect(() => {
+    validateHiddenNodes(getCollapsedNodeIds(), getCollapsedEdgeIds());
+  }, [getCollapsedEdgeIds, getCollapsedNodeIds]);
+
+  return {
+    validateHiddenNodes: () => validateHiddenNodes(getCollapsedNodeIds(), getCollapsedEdgeIds()),
+  };
+};
+
+function validateHiddenNodes(collapsedNodeIs: string[], collapsedEdgeIds: string[]) {
+  const nodeList = collapsedNodeIs.map(id => `[id$="node-${id}"]`);
+  const edgeList = collapsedEdgeIds.map(id => `[class$="edge-${id}"]`);
+  const hiddenItems = document.body.querySelectorAll(".hide");
+
+  hiddenItems.forEach(item => item.classList.remove("hide"));
+
+  if (nodeList.length) {
+    const selectedNodes = document.body.querySelectorAll(nodeList.join(","));
+
+    selectedNodes.forEach(node => node.classList.add("hide"));
+  }
+
+  if (edgeList.length) {
+    const selectedEdges = document.body.querySelectorAll(edgeList.join(","));
+
+    selectedEdges.forEach(edge => edge.classList.add("hide"));
+  }
+}
+
+export default useToggleHide;

src/layout/EditorWrapper/index.tsx

@@ -0,0 +1,72 @@
+import React from "react";
+import { ThemeProvider } from "styled-components";
+import { MantineProvider, MantineThemeOverride } from "@mantine/core";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { monaSans } from "src/constants/fonts";
+import { lightTheme, darkTheme } from "src/constants/theme";
+import useConfig from "src/store/useConfig";
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+    },
+  },
+});
+
+const mantineTheme: MantineThemeOverride = {
+  fontFamily: monaSans.style.fontFamily,
+  headings: {
+    fontFamily: monaSans.style.fontFamily,
+  },
+  components: {
+    Divider: {
+      styles: () => ({
+        root: {
+          borderTopColor: "#4D4D4D !important",
+        },
+      }),
+    },
+    Modal: {
+      styles: theme => ({
+        title: {
+          fontWeight: 700,
+        },
+        header: {
+          backgroundColor: theme.colorScheme === "dark" ? "#4a4d52" : "#F3F3F3",
+        },
+        body: {
+          backgroundColor: theme.colorScheme === "dark" ? "#4a4d52" : "#F3F3F3",
+        },
+      }),
+    },
+    Button: {
+      styles: () => ({
+        inner: {
+          fontWeight: 700,
+        },
+      }),
+    },
+  },
+};
+
+export const EditorWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const darkmodeEnabled = useConfig(state => state.darkmodeEnabled);
+
+  return (
+    <ThemeProvider theme={darkmodeEnabled ? darkTheme : lightTheme}>
+      <MantineProvider
+        theme={{
+          colorScheme: darkmodeEnabled ? "dark" : "light",
+          ...mantineTheme,
+        }}
+        withCSSVariables
+        withGlobalStyles
+        withNormalizeCSS
+      >
+        <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+      </MantineProvider>
+    </ThemeProvider>
+  );
+};

src/layout/ExternalMode/index.tsx

@@ -0,0 +1,92 @@
+import React from "react";
+import styled from "styled-components";
+import { Anchor, Button, Group, Modal, Text } from "@mantine/core";
+import { VscCode } from "react-icons/vsc";
+
+const StyledAlert = styled.div`
+  position: fixed;
+  bottom: 36px;
+  right: 10px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: 16px;
+  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+  backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+  font-weight: 500;
+  overflow: hidden;
+`;
+
+const StyledTitle = styled.div`
+  display: flex;
+  align-items: center;
+  color: ${({ theme }) => theme.TEXT_POSITIVE};
+  flex: 1;
+  font-weight: 700;
+
+  &::after {
+    background: ${({ theme }) => theme.TEXT_POSITIVE};
+    height: 1px;
+
+    content: "";
+    -webkit-box-flex: 1;
+    -ms-flex: 1 1 auto;
+    flex: 1 1 auto;
+    margin-left: 4px;
+    opacity: 0.6;
+  }
+`;
+
+const ExternalMode = () => {
+  const [isExternal, setExternal] = React.useState(false);
+  const [isOpen, setOpen] = React.useState(false);
+
+  React.useEffect(() => {
+    if (typeof window !== "undefined") {
+      if (window.location.pathname.includes("widget")) return setExternal(false);
+      if (window.location.host !== "jsoncrack.com") return setExternal(true);
+      return setExternal(false);
+    }
+  }, []);
+
+  const closeModal = () => setOpen(false);
+
+  if (!isExternal) return null;
+
+  return (
+    <StyledAlert>
+      <Button
+        onClick={() => setOpen(true)}
+        color="red"
+        variant="subtle"
+        leftIcon={<VscCode size="1.2rem" />}
+      >
+        External Host
+      </Button>
+      <Modal title="External Host of JSON Crack" opened={isOpen} onClose={closeModal} centered>
+        <Group>
+          <StyledTitle>Hi! Did you like the editor?</StyledTitle>
+          <Text>
+            You are currently using the external release of the{" "}
+            <Anchor href="https://jsoncrack.com">JSON Crack</Anchor>. Please consider supporting by
+            one time or monthly sponsorship ✨
+          </Text>
+        </Group>
+        <Group pt="lg" position="right">
+          <Button
+            onClick={closeModal}
+            component="a"
+            href="https://github.com/sponsors/AykutSarac"
+            target="_blank"
+            variant="light"
+            color="red"
+          >
+            Donate
+          </Button>
+        </Group>
+      </Modal>
+    </StyledAlert>
+  );
+};
+
+export default ExternalMode;

src/layout/Footer/FooterLinks.tsx

@@ -0,0 +1,147 @@
+import Link from "next/link";
+import { createStyles, Text, Container, rem, Anchor } from "@mantine/core";
+import { JSONCrackLogo } from "../JsonCrackLogo";
+
+const useStyles = createStyles(theme => ({
+  footer: {
+    marginTop: rem(120),
+    paddingTop: `calc(${theme.spacing.xl} * 2)`,
+    paddingBottom: `calc(${theme.spacing.xl} * 2)`,
+    backgroundColor: theme.colorScheme === "dark" ? theme.colors.dark[6] : "white",
+    borderTop: `${rem(1)} solid ${
+      theme.colorScheme === "dark" ? theme.colors.dark[5] : theme.colors.gray[2]
+    }`,
+  },
+
+  logo: {
+    maxWidth: rem(200),
+
+    [theme.fn.smallerThan("sm")]: {
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "center",
+    },
+  },
+
+  description: {
+    marginTop: rem(5),
+
+    [theme.fn.smallerThan("sm")]: {
+      marginTop: theme.spacing.xs,
+      textAlign: "center",
+    },
+  },
+
+  inner: {
+    display: "flex",
+    justifyContent: "space-between",
+
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column",
+      alignItems: "center",
+    },
+  },
+
+  groups: {
+    display: "flex",
+    flexWrap: "wrap",
+
+    [theme.fn.smallerThan("sm")]: {
+      display: "none",
+    },
+  },
+
+  wrapper: {
+    width: rem(160),
+  },
+
+  link: {
+    display: "block",
+    color: theme.colorScheme === "dark" ? theme.colors.dark[1] : theme.colors.gray[7],
+    fontSize: theme.fontSizes.sm,
+    paddingTop: rem(3),
+    paddingBottom: rem(3),
+
+    "&:hover": {
+      textDecoration: "underline",
+    },
+  },
+
+  title: {
+    fontSize: theme.fontSizes.lg,
+    fontWeight: 700,
+    fontFamily: `Greycliff CF, ${theme.fontFamily}`,
+    marginBottom: `calc(${theme.spacing.xs} / 2)`,
+    color: theme.colorScheme === "dark" ? theme.white : theme.black,
+  },
+
+  afterFooter: {
+    display: "flex",
+    justifyContent: "space-between",
+    alignItems: "center",
+    marginTop: theme.spacing.xl,
+    paddingTop: theme.spacing.xl,
+    paddingBottom: theme.spacing.xl,
+    borderTop: `${rem(1)} solid ${
+      theme.colorScheme === "dark" ? theme.colors.dark[4] : theme.colors.gray[3]
+    }`,
+
+    [theme.fn.smallerThan("sm")]: {
+      flexDirection: "column",
+    },
+  },
+
+  social: {
+    [theme.fn.smallerThan("sm")]: {
+      marginTop: theme.spacing.xs,
+    },
+  },
+}));
+
+interface FooterLinksProps {
+  data: {
+    title: string;
+    links: { label: string; link: string }[];
+  }[];
+}
+
+export function FooterLinks({ data }: FooterLinksProps) {
+  const { classes } = useStyles();
+
+  const groups = data.map(group => {
+    const links = group.links.map((link, index) => (
+      <Text key={index} className={classes.link} component={Link} href={link.link} prefetch={false}>
+        {link.label}
+      </Text>
+    ));
+
+    return (
+      <div className={classes.wrapper} key={group.title}>
+        <Text className={classes.title}>{group.title}</Text>
+        {links}
+      </div>
+    );
+  });
+
+  return (
+    <footer className={classes.footer}>
+      <Container className={classes.inner}>
+        <div className={classes.logo}>
+          <JSONCrackLogo />
+          <Text size="xs" color="gray" className={classes.description}>
+            Next-generation tools matching with your needs to understand the data.
+          </Text>
+        </div>
+        <div className={classes.groups}>{groups}</div>
+      </Container>
+      <Container className={classes.afterFooter}>
+        <Text color="gray" size="sm">
+          © jsoncrack.com
+        </Text>
+        <Anchor href="mailto:contact@jsoncrack.com" color="gray" size="sm">
+          contact@jsoncrack.com
+        </Anchor>
+      </Container>
+    </footer>
+  );
+}

src/layout/Footer/index.tsx

@@ -0,0 +1,62 @@
+import React from "react";
+import { FooterLinks } from "./FooterLinks";
+
+export const Footer = () => {
+  return (
+    <FooterLinks
+      data={[
+        {
+          title: "Product",
+          links: [
+            {
+              label: "GitHub",
+              link: "https://github.com/AykutSarac/jsoncrack.com",
+            },
+            {
+              label: "Supporters",
+              link: "/oss",
+            },
+            {
+              label: "Contributing",
+              link: "https://github.com/AykutSarac/jsoncrack.com/blob/main/CONTRIBUTING.md",
+            },
+          ],
+        },
+        {
+          title: "Social",
+          links: [
+            {
+              label: "Discord",
+              link: "https://discord.gg/yVyTtCRueq",
+            },
+            {
+              label: "𝕏 (Twitter)",
+              link: "https://twitter.com/jsoncrack",
+            },
+            {
+              label: "LinkedIn",
+              link: "https://www.linkedin.com/company/herowand",
+            },
+          ],
+        },
+        {
+          title: "Legal",
+          links: [
+            {
+              label: "Terms",
+              link: "/legal/terms",
+            },
+            {
+              label: "Privacy",
+              link: "/legal/privacy",
+            },
+            {
+              label: "Subscription & Refund",
+              link: "/legal/subscription-refund",
+            },
+          ],
+        },
+      ]}
+    />
+  );
+};