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 +1,5 @@
-NEXT_PUBLIC_BASE_URL=http://localhost:3000
+NEXT_PUBLIC_BASE_URL=http://localhost:3000
+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 +1,5 @@
-NEXT_PUBLIC_BASE_URL=https://jsoncrack.com
+NEXT_PUBLIC_BASE_URL=https://jsoncrack.com
+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,15 +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": ["testing-library", "unused-imports"],
-  "overrides": [
-    // Only uses Testing Library lint rules in test files
-    {
-      "files": ["**/__tests__/**/*.[jt]s?(x)", "**/?(*.)+(spec|test).[jt]s?(x)"],
-      "extends": ["plugin:testing-library/react"]
-    }
-  ]
+  "extends": ["next/core-web-vitals", "prettier"],
+  "plugins": ["prettier", "unused-imports"],
+  "ignorePatterns": ["src/enums"]
 }

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -24,8 +24,7 @@ body:
     id: media
     attributes:
       label: Media & Screenshots
-      description: Inlude screenshots or video of reproduction as much as possible
-      render: md
+      description: Include screenshots or video of reproduction as much as possible
   - type: textarea
     id: os
     attributes:
@@ -34,7 +33,7 @@ body:
       value: |
        - OS: [e.g. iOS]:
        - Browser [e.g. chrome, safari]:
-       
+
        - Any other details...
   - type: dropdown
     id: priority

.github/workflows/deploy.yml

@@ -0,0 +1,118 @@
+name: Deploy Next.js site to Pages
+
+on:
+  push:
+    branches: ["main"]
+
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  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: |
+          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: "18"
+          cache: ${{ steps.detect-package-manager.outputs.manager }}
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        with:
+          path: |
+            ~/.npm
+            ~/.cache/yarn
+          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}
+          restore-keys: ${{ runner.os }}-node-
+      - name: Setup Pages
+        uses: actions/configure-pages@v3
+        with:
+          static_site_generator: next
+      - name: Restore cache
+        uses: actions/cache@v3
+        with:
+          path: |
+            .next/cache
+          key: ${{ runner.os }}-nextjs-${{ hashFiles('**/package-lock.json', '**/yarn.lock') }}-${{ hashFiles('**.[jt]s', '**.[jt]sx') }}
+          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: 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'
+
+
+  # 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:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v1
+

.github/workflows/pull-request.yml

@@ -0,0 +1,24 @@
+name: Verify Pull Request
+
+on:
+  pull_request:
+    branches: [ "main" ]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: [18.x]
+        # See supported Node.js release schedule at https://nodejs.org/en/about/releases/
+
+    steps:
+    - uses: actions/checkout@v3
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ matrix.node-version }}
+        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

@@ -2,16 +2,16 @@
   "trailingComma": "es5",
   "singleQuote": false,
   "semi": true,
-  "printWidth": 85,
+  "printWidth": 100,
   "arrowParens": "avoid",
   "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"]
 }

.travis.yml

@@ -1,21 +0,0 @@
-language: node_js
-node_js:
-  - "14"
-branches:
-  only:
-    - main
-cache:
-  directories:
-    - node_modules
-script:
-  - npm run lint
-  - npm run build
-deploy:
-  provider: pages
-  skip_cleanup: true
-  local_dir: out
-  token: $GITHUB_TOKEN
-  target_branch: gh-pages
-  keep_history: true
-  on:
-    branch: main

CONTRIBUTING.md

@@ -1,4 +1,4 @@
-# Welcome to the JSON Crack contributing guide <!-- omit in toc -->
+# Welcome to the JSON Crack Contributing Guide <!-- omit in toc -->
 
 Thank you for investing your time in contributing to our project! Any contribution you make will be reflected at [jsoncrack.com](https://jsoncrack.com).
 
@@ -6,77 +6,57 @@ 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.
 
-Use the table of contents icon on the top left corner of this document to get to a specific section of this guide quickly.
+## Getting Started
+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:
 
-## New contributor guide
+* [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)
 
-To get an overview of the project, read the [README](README.md). Here are some resources to help you get started with open source contributions:
+Once you are familiar with these technologies, you can clone the JSON Crack repository by running the following command:
 
-- [Finding ways to contribute to open source on GitHub](https://docs.github.com/en/get-started/exploring-projects-on-github/finding-ways-to-contribute-to-open-source-on-github)
-- [Set up Git](https://docs.github.com/en/get-started/quickstart/set-up-git)
-- [GitHub flow](https://docs.github.com/en/get-started/quickstart/github-flow)
-- [Collaborating with pull requests](https://docs.github.com/en/github/collaborating-with-pull-requests)
+```bash
+git clone https://github.com/AykutSarac/jsoncrack.com.git
+```
 
-## Getting started
+After cloning the repository, you can install the required dependencies by running the following command:
 
-Join the [Discord channel](https://discord.gg/yVyTtCRueq). If you have questions or feedback, this is the best place to reach the team and other contributors directly.
+```bash
+yarn install
+```
 
-If you're already familar with Open Source contributions, we **highly recommend** you to take a look at our [TODO List](/TODO.md).
+To run the development server, you can run the following command:
 
-### Issues
+```bash
+yarn dev
+```
 
-#### Create a new issue
+## Contributing Guidelines
+Before submitting a pull request, please make sure to follow these guidelines:
 
-If you spot a problem, [search if an issue already exists](https://github.com/AykutSarac/jsoncrack.com/issues). If a related issue doesn't exist, you can open a new issue using a relevant [issue form](https://github.com/AykutSarac/jsoncrack.com/issues/new/choose).
+### 1. Performance
+Performance is an important criteria for JSON Crack. Any new contributions should not affect the re-rendering of the application. Therefore, when making changes to the code, please keep performance in mind.
 
-#### Solve an issue
+If you're having trouble with re-rendering issues in React, you can use the React Devtools Profiler to debug it. You can also check out this up-to-date guide on debugging re-renders with React Devtools to learn more.
 
-Scan through our [existing issues](https://github.com/AykutSarac/jsoncrack.com/issues) to find one that interests you. You can narrow down the search using `labels` as filters. See [Labels](/contributing/how-to-use-labels.md) for more information. If you find an issue to work on, you are welcome to open a PR with a fix.
+### 2. Code Style
+We follow the [Google TypeScript Style Guide](https://google.github.io/styleguide/tsguide.html) for our code. Please make sure to follow this guide when writing new code or modifying existing code.
 
-### Make Changes
+### 3. Testing
+While we do not currently have a comprehensive testing suite in place, we encourage contributors to thoroughly test their changes and ensure that they do not break any existing functionality. Please include a description of how you tested your changes in your pull request, so that we can review them more effectively.
 
-#### Make changes locally
+### 4. Commit Messages
+Please use descriptive commit messages that explain the changes you have made. This will help us understand your changes and make it easier to review your pull request.
 
-1. [Install Git LFS](https://docs.github.com/en/github/managing-large-files/versioning-large-files/installing-git-large-file-storage).
+### 5. Pull Requests
+Please create a new branch for your changes and submit a pull request to the main branch. Please provide a detailed explanation of the changes you have made and any necessary context in the pull request description.
 
-2. Fork the repository.
-
-- Using GitHub Desktop:
-
-  - [Getting started with GitHub Desktop](https://docs.github.com/en/desktop/installing-and-configuring-github-desktop/getting-started-with-github-desktop) will guide you through setting up Desktop.
-  - Once Desktop is set up, you can use it to [fork the repo](https://docs.github.com/en/desktop/contributing-and-collaborating-using-github-desktop/cloning-and-forking-repositories-from-github-desktop)!
-
-- Using the command line:
-
-  - [Fork the repo](https://docs.github.com/en/github/getting-started-with-github/fork-a-repo#fork-an-example-repository) so that you can make your changes without affecting the original project until you're ready to merge them.
-
-- GitHub Codespaces:
-  - [Fork, edit, and preview](https://docs.github.com/en/free-pro-team@latest/github/developing-online-with-codespaces/creating-a-codespace) using [GitHub Codespaces](https://github.com/features/codespaces) without having to install and run the project locally.
-
-3. Install or update to **Node.js v16**.
-
-4. Create a working branch and start with your changes!
-
-5. Follow the [the development guide](guides/development.md).
-
-### Commit your update
-
-Commit the changes once you are happy with them.
-
-### Pull Request
-
-When you're finished with the changes, create a pull request, also known as a PR.
-
-- Fill the "Ready for review" template so that we can review your PR. This template helps reviewers understand your changes as well as the purpose of your pull request.
-- Don't forget to [link PR to issue](https://docs.github.com/en/issues/tracking-your-work-with-issues/linking-a-pull-request-to-an-issue) if you are solving one.
-- Enable the checkbox to [allow maintainer edits](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/allowing-changes-to-a-pull-request-branch-created-from-a-fork) so the branch can be updated for a merge.
-  Once you submit your PR, a team member will review your proposal. We may ask questions or request for additional information.
-- We may ask for changes to be made before a PR can be merged, either using [suggested changes](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/incorporating-feedback-in-your-pull-request) or pull request comments. You can apply suggested changes directly through the UI. You can make any other changes in your fork, then commit them to your branch.
-- As you update your PR and apply changes, mark each conversation as [resolved](https://docs.github.com/en/github/collaborating-with-issues-and-pull-requests/commenting-on-a-pull-request#resolving-conversations).
-- If you run into any merge issues, checkout this [git tutorial](https://lab.github.com/githubtraining/managing-merge-conflicts) to help you resolve merge conflicts and other issues.
+## Conclusion
+We appreciate any contributions to JSON Crack, big or small. If you have any questions or need any help, please do not hesitate to reach out to us. Thank you for contributing!
 
 ### Your PR is merged!
 
 Congratulations :tada::tada: The JSON Crack team thanks you :sparkles:.
 
-Once your PR is merged, your contributions will become part of the next JSON Crack release, and will be visible in the [JSON Crack app](https://jsoncrack.com).
+Once your PR is merged, your contributions will become part of the next JSON Crack release, and will be visible in the [JSON Crack app](https://jsoncrack.com).

Dockerfile

@@ -1,11 +1,16 @@
 # Builder
-FROM node:14-buster as builder
+FROM node:18-alpine as builder
 WORKDIR /src
-COPY . /src
-RUN yarn install --legacy-peer-deps
-RUN yarn run build
+
+# Cache dependencies first
+COPY package.json yarn.lock ./
+RUN yarn install --frozen-lockfile
+
+# Copy other files and build
+COPY . /src/
+RUN yarn build
 
 # App
 FROM nginxinc/nginx-unprivileged
-COPY --from=builder /src/out /app
+COPY --chown=nginx:nginx --from=builder /src/out /app
 COPY default.conf /etc/nginx/conf.d/default.conf

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,72 +1,92 @@
-<center>
-  <a href="https://jsoncrack.com">
-    <img width="1080" alt="jsoncrack" src="https://user-images.githubusercontent.com/47941171/187418000-8edea92b-b3ac-4b07-9c4c-e42f6763817d.png">
-  </a>
-</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>
 
-<p>
-    <p align="center">
-      <a href="https://discord.gg/yVyTtCRueq">
-        <img alt="github sponsors" src="https://dcbadge.vercel.app/api/server/yVyTtCRueq?style=flat-square" />
-      </a>
-      <a href="https://app.travis-ci.com/github/AykutSarac/jsoncrack.com">
-        <img alt="travis ci badge" src="https://img.shields.io/travis/com/AykutSarac/jsoncrack.com/main?style=flat-square" />
-      </a>
-      <a href="https://github.com/AykutSarac/jsoncrack.com/blob/main/LICENSE">
-        <img alt="license badge" src="https://img.shields.io/github/license/AykutSarac/jsoncrack.com?style=flat-square" />
-      </a>
-      <a href="https://github.com/AykutSarac/jsoncrack.com/releases">
-        <img alt="version badge" src="https://img.shields.io/github/package-json/v/AykutSarac/jsoncrack.com?color=brightgreen&style=flat-square" />
-      </a>
-      <a href="https://github.com/sponsors/AykutSarac">
-        <img alt="github sponsors" src="https://img.shields.io/github/sponsors/AykutSarac?style=flat-square" />
-      </a>
-  </p>
-  <p align="center">
-    <i>Simple json visualization tool for your data.</i>
-    <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>
-    </p>
+
+<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>
 
-  <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)
 
-JSON Crack is a tool that generates graph diagrams from JSON objects. These diagrams are much easier to navigate than the textual format and to make it even more convenient, the tool also allows you to search the nodes. Additionally, the generated diagrams can also be downloaded or clipboard as image.
+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.
 
-You can use the web version at [jsoncrack.com](https://jsoncrack.com) or also run it locally as [Docker container](https://github.com/AykutSarac/jsoncrack.com#-docker).
+## 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.
 
-> <b><a href="https://jsoncrack.com">JSON Crack - Crack your data into pieces</a></b>
+## Contributing
 
-## ⚡️ Features
+- 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).
 
-- Search Nodes
-- Share links & Create Embed Widgets
-- Download/Clipboard as image
-- Upload JSON locally or fetch from URL
-- Great UI/UX
-- Light/Dark Mode
-- Advanced Error Messages
+## Sponsors & support
 
-## 🛠 Development Setup
+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).
 
+## 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>

TODO.md

@@ -1,16 +0,0 @@
-## Feature:
-
-- [ ] [YAML Support - #161](https://github.com/AykutSarac/jsoncrack.com/issues/161)
-- [ ] [VS Code extension](https://github.com/AykutSarac/jsoncrack.com/discussions/130)
-
-## Enhancements:
-
-- [ ] Clear rewrite of [parsing algorithm](/src/utils/jsonParser.ts)
-- [ ] Performance Optimization
-- [ ] Fix `useInViewport` hook for performance
-- [ ] Canvas should fit into view on click `Center` icon at toolbar
- 
-## Fix:
-- [ ] Handle browser freezing while parsing JSON & painting DOM
-- [ ] [Incorrect Arrow View - #155](https://github.com/AykutSarac/jsoncrack.com/issues/155)
-- [ ] [Empty Nodes - #27](https://github.com/AykutSarac/jsoncrack.com/issues/27)

default.conf

@@ -6,4 +6,33 @@ server {
     location /editor {
         try_files $uri /editor.html;
     }
+    
+    location /widget {
+        try_files $uri /widget.html;
+    }
+    
+    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"

jest.config.ts

@@ -1,17 +0,0 @@
-import nextJest from "next/jest";
-
-const createJestConfig = nextJest({
-  // Provide the path to your Next.js app to load next.config.js and .env files in your test environment
-  dir: "./",
-});
-
-// Add any custom config to be passed to Jest
-const customJestConfig = {
-  setupFilesAfterEnv: ["<rootDir>/jest.setup.ts"],
-  testEnvironment: "jsdom",
-  moduleDirectories: ["node_modules", "src"],
-  modulePaths: ["<rootDir>"],
-};
-
-// createJestConfig is exported this way to ensure that next/jest can load the Next.js config which is async
-module.exports = createJestConfig(customJestConfig);

jest.setup.ts

@@ -1,5 +0,0 @@
-// Optional: configure or set up a testing framework before each test.
-// If you delete this file, remove `setupFilesAfterEnv` from `jest.config.js`
-// Used for __tests__/testing-library.js
-// Learn more: https://github.com/testing-library/jest-dom
-import "@testing-library/jest-dom/extend-expect";

next.config.js

@@ -1,21 +1,40 @@
-const withPWA = require("next-pwa")({
-  dest: "public",
-  register: true,
-  disable: process.env.NODE_ENV === "development",
-  scope: "/editor",
+const { withSentryConfig } = require("@sentry/nextjs");
+const withBundleAnalyzer = require("@next/bundle-analyzer")({
+  enabled: process.env.ANALYZE === "true",
 });
 
 /**
  * @type {import('next').NextConfig}
  */
-const nextConfig = {
-  reactStrictMode: true,
-  exportPathMap: async () => ({
-    "/": { page: "/" },
-    "/editor": { page: "/Editor" },
-    "/widget": { page: "/Widget" },
-    "/embed": { page: "/Embed" },
-  }),
+const config = {
+  output: "export",
+  reactStrictMode: false,
+  productionBrowserSourceMaps: true,
+  compiler: {
+    styledComponents: true,
+  },
+  webpack: config => {
+    config.resolve.fallback = { fs: false };
+
+    return config;
+  },
 };
 
-module.exports = withPWA(nextConfig);
+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,53 +1,80 @@
 {
   "name": "json-crack",
   "private": true,
-  "version": "v2.0.4",
+  "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": "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": {
-    "@monaco-editor/react": "^4.4.6",
-    "@sentry/nextjs": "^7.13.0",
-    "allotment": "^1.17.0",
-    "compress-json": "^2.1.2",
-    "html-to-image": "^1.10.8",
+    "@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",
-    "next": "^12.3.1",
-    "next-transpile-modules": "^9.0.0",
+    "jsonwebtoken": "^9.0.2",
+    "jxon": "^2.0.0-beta.5",
+    "lodash.debounce": "^4.0.8",
+    "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.4.0",
-    "react-in-viewport": "^1.0.0-alpha.28",
+    "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-twitter-embed": "^4.0.4",
-    "react-zoom-pan-pinch": "^2.1.3",
-    "reaflow": "^5.0.7",
-    "styled-components": "^5.3.5",
-    "zustand": "^4.1.1"
+    "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": {
-    "@testing-library/react": "^13.3.0",
-    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
-    "@types/node": "^18.7.21",
-    "@types/react": "18.0.21",
-    "@types/react-color": "^3.0.6",
-    "@types/styled-components": "^5.1.26",
-    "eslint": "8.24.0",
-    "eslint-config-next": "12.3.1",
-    "eslint-plugin-testing-library": "^5.7.0",
-    "eslint-plugin-unused-imports": "^2.0.0",
-    "next-pwa": "5.6.0",
-    "prettier": "^2.7.1",
+    "@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.8.3"
+    "typescript": "5.1.6"
   }
 }

public/assets/404.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" data-name="Layer 1" width="982.48732" height="763.01413" viewBox="0 0 982.48732 763.01413" xmlns:xlink="http://www.w3.org/1999/xlink"><circle cx="559.4329" cy="333.06116" r="40.02979" fill="#e6e6e6"/><path d="M766.295,452.99465l-41.832-41.832a44.307,44.307,0,0,0-14.42627-61.92578,44.45758,44.45758,0,0,0-58.91358,12.23779,44.30652,44.30652,0,0,0,60.03321,62.99512l41.832,41.832A9.40939,9.40939,0,0,0,766.295,452.99465ZM709.59431,409.6011a31.68421,31.68421,0,1,1,9.27978-22.40381A31.58568,31.58568,0,0,1,709.59431,409.6011Z" transform="translate(-108.75634 -68.49293)" fill="#3f3d56"/><path d="M1069.529,514.69884C1176.50914,633.00725,866.39184,803.50707,615.8095,803.50707S191.86334,671.39983,162.09,514.69884C89.89987,134.75174,777.16735-106.74054,615.8095,225.89055,380.61181,710.73882,985.27984,421.5284,1069.529,514.69884Z" transform="translate(-108.75634 -68.49293)" fill="#e6e6e6"/><path d="M1021.529,542.69884C1128.50914,661.00725,818.39184,831.50707,567.8095,831.50707S143.86334,699.39983,114.09,542.69884C41.89987,162.75174,729.16735-78.74054,567.8095,253.89055,332.61181,738.73882,937.27984,449.5284,1021.529,542.69884Z" transform="translate(-108.75634 -68.49293)" fill="#3f3d56"/><path d="M258.35026,265.31823c-75.06741-3.30525-133.27133-19.49788-132.50668-36.86436.45844-10.41178,21.70324-18.7842,58.28677-22.96955a1,1,0,1,1,.22727,1.987c-34.46168,3.943-56.11733,12.01678-56.516,21.07051-.69148,15.70451,59.11433,31.63093,130.59659,34.77832s132.4564-7.461,133.14787-23.16554c.40032-9.09178-20.59681-19.06558-54.79775-26.0284a1.00008,1.00008,0,1,1,.3991-1.95993c36.3011,7.39058,56.85694,17.624,56.39672,28.0763C392.81953,257.60908,333.41767,268.62348,258.35026,265.31823Z" transform="translate(-108.75634 -68.49293)" fill="#7289da"/><path d="M191.67927,268.22672a76.98277,76.98277,0,0,0,133.03578,5.52178A1211.97551,1211.97551,0,0,1,191.67927,268.22672Z" transform="translate(-108.75634 -68.49293)" fill="#7289da"/><path d="M333.019,252.71347a76.997,76.997,0,1,0-147.74945-5.70562A572.23325,572.23325,0,0,0,333.019,252.71347Z" transform="translate(-108.75634 -68.49293)" fill="#7289da"/><circle cx="168.83353" cy="123.60073" r="9" fill="#fff"/><circle cx="122.51347" cy="152.59128" r="15" fill="#fff"/><circle cx="348.90479" cy="142.89813" r="9.99975" fill="#7289da"/><circle cx="122.90479" cy="452.89813" r="6.00007" fill="#e6e6e6"/><circle cx="542.90479" cy="658.89813" r="6.00007" fill="#e6e6e6"/><circle cx="151.90479" cy="339.89813" r="3.00007" fill="#e6e6e6"/><circle cx="399.90479" cy="563.89813" r="3.00007" fill="#e6e6e6"/><circle cx="850.90479" cy="534.89813" r="3.00007" fill="#e6e6e6"/><circle cx="709.90479" cy="623.89813" r="3.00007" fill="#e6e6e6"/><circle cx="562.90479" cy="515.89813" r="3.00007" fill="#e6e6e6"/><circle cx="372.90479" cy="219.89813" r="3.00007" fill="#e6e6e6"/><circle cx="396.90479" cy="71.89813" r="3.00007" fill="#e6e6e6"/><circle cx="382.90479" cy="694.89813" r="3.00007" fill="#e6e6e6"/><circle cx="234.90479" cy="631.89813" r="3.00007" fill="#e6e6e6"/><circle cx="703.90479" cy="523.89813" r="3.00007" fill="#e6e6e6"/><circle cx="148.3737" cy="224.7987" r="9" fill="#fff"/><path d="M460.6612,431.39114c0,26.88035-41.55939,89.516-53.70465,107.24669a3.99188,3.99188,0,0,1-6.5907,0c-12.14526-17.73066-53.70465-80.36634-53.70465-107.24669a57,57,0,1,1,114,0Z" transform="translate(-108.75634 -68.49293)" fill="#fff"/><circle cx="294.90486" cy="358.8982" r="29" fill="#7289da"/><ellipse cx="294.40486" cy="496.3982" rx="33.5" ry="6.5" fill="#fff"/><path d="M925.60957,386.41245a10.52681,10.52681,0,0,0-.64106,1.52851l-47.783,13.27682-8.61085-8.42662L854.1589,404.12429,867.953,420.52338a8,8,0,0,0,9.35283,2.169l51.61632-22.78484a10.49709,10.49709,0,1,0-3.31256-13.49509Z" transform="translate(-108.75634 -68.49293)" fill="#ffb8b8"/><path d="M875.50191,401.996l-17.9352,13.95958a4.5,4.5,0,0,1-6.68163-1.33719L839.73843,394.891a12.49741,12.49741,0,0,1,19.76923-15.29426l16.33819,15.59379a4.5,4.5,0,0,1-.34394,6.80543Z" transform="translate(-108.75634 -68.49293)" fill="#7289da"/><path d="M930.19158,379.80967l18.18807,8.1829a3.14913,3.14913,0,0,1,1.57976,4.16384l-2.15339,4.78633a1.05293,1.05293,0,0,1,.52659,1.38795l-.86136,1.91453a1.05292,1.05292,0,0,1-1.388.52659l-.86136,1.91453a1.05292,1.05292,0,0,1,.52659,1.388l-.86136,1.91453a1.0529,1.0529,0,0,1-1.38794.52659L931.8709,432.36162a3.14914,3.14914,0,0,1-4.16384,1.57977l-18.18807-8.1829a3.14915,3.14915,0,0,1-1.57977-4.16384l18.08852-40.20522A3.14913,3.14913,0,0,1,930.19158,379.80967Z" transform="translate(-108.75634 -68.49293)" fill="#3f3d56"/><path d="M912.82137,423.21181l14.59056,6.57106a3.03424,3.03424,0,0,0,3.99937-1.51155l6.73892-14.98951,2.34078-5.196,6.09875-13.562a3.026,3.026,0,0,0-1.51149-3.98886l-4.58726-2.06786L930.47694,383.964a3.02112,3.02112,0,0,0-3.98861,1.522L920.589,398.59669l-6.7179,14.92653-2.56118,5.69979A3.022,3.022,0,0,0,912.82137,423.21181Z" transform="translate(-108.75634 -68.49293)" fill="#f2f2f2"/><polygon points="773.577 Line truncated
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" data-name="Layer 1" width="1118.03" height="826.45" viewBox="0 0 1118.03 826.45"><defs><linearGradient id="2c65cc85-6ec1-454a-a801-b7854259077c-180" x1="377.53" y1="611.1" x2="377.53" y2="84.18" gradientTransform="translate(256.63 -110.12) rotate(27.45)" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="gray" stop-opacity="0.25"/><stop offset="0.54" stop-color="gray" stop-opacity="0.12"/><stop offset="1" stop-color="gray" stop-opacity="0.1"/></linearGradient></defs><title>startled</title><ellipse cx="741.34" cy="764.2" rx="314.09" ry="31.67" fill="#dadaf9" opacity="0.1"/><path d="M690.57,153c-71.67-2.08-139.94-21.34-205.12-42.42S355.69,66.17,285.73,55c-45-7.18-96.45-8.2-132.71,11.89-34.88,19.32-46.16,52.69-52.22,83.64-4.56,23.29-7.24,47.81,5.25,69.61,8.68,15.14,24.08,27.86,34.73,42.36,37.07,50.46,10.87,112.67-29.3,161.93-18.84,23.11-40.69,45.16-55.23,69.76S35,547,47.71,572.07c12.61,24.87,42.65,43.55,75.2,56.69,66.1,26.69,144,34.33,220,38.65C511,677,680,672.84,848.63,668.69c62.39-1.53,125-3.09,186.43-11.12,34.08-4.46,69.27-11.54,94-28.63,31.42-21.7,39.2-58.43,18.15-85.64-35.3-45.63-132.92-57-157.6-105.93-13.58-26.95.37-57,20.11-82,42.34-53.62,113.32-100.67,117.06-162,2.57-42.1-31.55-84.26-84.31-104.18-55.3-20.88-132-18.25-172.79,16.31C827.68,141.14,753.86,154.83,690.57,153Z" transform="translate(-40.99 -36.78)" fill="#dadaf9" opacity="0.1"/><path d="M213.3,663c-7.92-3.53-1.22-41.88,16-101,0,0,0,0,0,0,11-37.93,26.38-84.41,45-135.71,1.34-3.68,2.7-7.37,4.06-11.1q2.3-6.27,4.66-12.64l.14-.35c.22-.61.45-1.21.67-1.81q8.94-24,18.69-49.11c.12-.34.25-.67.38-1l.33-.85c1.56-4,3.14-8,4.73-12.07.17-.42.33-.86.5-1.28.23-.59.46-1.16.68-1.74.08-.18.14-.37.22-.53.13-.35.27-.69.4-1,1.6-4,3.19-8.05,4.78-12q3.9-9.7,7.74-19.21.67-1.67,1.35-3.3,1.93-4.79,3.87-9.51c.5-1.2,1-2.41,1.48-3.6.38-.91.75-1.83,1.12-2.73q6.09-14.73,12.1-28.89a.17.17,0,0,0,0-.1c15.25-35.93,30-68.92,43.7-97.76.08-.15.14-.31.22-.46l1.45-3.06c35.16-73.71,62.82-119.2,72.17-115,9.62,4.28-2.36,60.14-28.61,142.26-.34,1.09-.69,2.16-1.05,3.25a5.8,5.8,0,0,1-.2.63q-2,6.38-4.21,13c-.08.26-.17.52-.26.78q-5,15.3-10.64,31.6c-.51,1.46-1,2.95-1.54,4.43-5.8,16.79-12,34.27-18.65,52.29h0c-.4,1.11-.81,2.21-1.22,3.33h0c-6.65,18.05-13.66,36.63-21,55.59h0c-.47,1.2-.94,2.41-1.4,3.62h0c-.1.26-.2.51-.31.77q-2.75,7.05-5.53,14.16c-.53,1.32-1,2.64-1.56,3.95-1.32,3.35-2.64,6.7-4,10-.11.3-.23.6-.35.89s-.19.47-.29.7c-.22.58-.45,1.15-.68,1.72-.62,1.55-1.23,3.1-1.85,4.63-1.07,2.68-2.14,5.33-3.21,8l-.33.8v0a.76.76,0,0,1,0,.11q-6.52,16.11-13,31.67h0q-2.18,5.25-4.35,10.43v0c-1.07,2.55-2.13,5.09-3.2,7.6-7.94,18.77-15.74,36.74-23.34,53.77l0,0C263,600,224.64,668.06,213.3,663Z" transform="translate(-40.99 -36.78)" fill="#dadaf9" opacity="0.5"/><path d="M232.07,591.61c-4.88-2.1,1.18-29.38,14.92-71.76l0,0c8.8-27.18,20.77-60.58,35-97.52l3.11-8q1.75-4.51,3.56-9.1a2.77,2.77,0,0,0,.1-.26l.52-1.3q6.81-17.33,14.21-35.4c.09-.25.19-.48.29-.72s.16-.41.25-.61c1.18-2.9,2.37-5.79,3.57-8.71l.39-.93.51-1.25c.06-.13.11-.27.16-.39s.21-.49.31-.73q1.82-4.38,3.61-8.69,2.94-7,5.83-13.87l1-2.38c1-2.31,1.94-4.59,2.91-6.87l1.11-2.6c.29-.66.56-1.32.84-2q4.57-10.63,9.07-20.88a.14.14,0,0,0,0-.07c11.4-26,22.36-49.86,32.42-70.77.06-.11.11-.23.17-.34l1.06-2.22c25.86-53.47,45.62-86.74,51.38-84.25,5.93,2.56-4.33,42.39-24.9,101.35l-.82,2.34c-.05.15-.1.3-.16.45q-1.6,4.58-3.29,9.31l-.2.56q-3.93,11-8.27,22.71c-.39,1.06-.78,2.13-1.19,3.19-4.48,12.07-9.27,24.66-14.33,37.64h0l-.93,2.39h0q-7.62,19.5-16,40.06h0c-.35.87-.7,1.74-1.06,2.61h0c-.08.19-.16.37-.23.56l-4.19,10.21-1.18,2.85c-1,2.42-2,4.84-3,7.23-.08.22-.17.43-.26.64s-.14.34-.22.51l-.51,1.23c-.47,1.12-.93,2.24-1.4,3.35L333.88,395l-.25.58h0l0,.08q-4.92,11.64-9.76,22.87h0q-1.63,3.8-3.27,7.54s0,0,0,0q-1.2,2.78-2.4,5.5c-5.94,13.56-11.75,26.57-17.39,38.89l0,0C266.66,545,239.06,594.63,232.07,591.61Z" transform="translate(-40.99 -36.78)" fill="#dadaf9" opacity="0.5"/><path d="M553.79,389.26c0-2.79-2.73-1.35-3.11-1.23h0a19,19,0,0,0-3.56-2.31c-6.09-3.17-15.29-5.1-22.62-6.23a.12.12,0,0,0-.08,0c-6.46-1-11.44-1.34-11.44-1.34l-3.81.05-1.42,0a4,4,0,0,1,2.08-1.57c1.06-.13-4.48-.54-7.11-.72,0,0,0,0,0,0h-.11l-1.22-.08c-5.78,1.36-16.61-6.07-16.61-6.07l-1.26-6.34c4.28-4.63,3.66-16.2,3.66-16.2s.36-3.88,4-9.22-.61-8.72-.61-8.72l6.29-6.71a9,9,0,0,1,1.14-6.83h0a6.13,6.13,0,0,1,1.41-1.48l0-.05.1-.09c4.11-3.15,7.58-14.09,7.58-14.09s-.8-1.95,3.7-7.24l0-.06c.6-.7,1.3-1.45,2.11-2.29l0,0c0-.07.12-.13.18-.2C520.3,283,517.46,279,517.46,279l-8.77-10.66c2.07-3.46-14.55-28.29-14.55-28.29s-2.12-5.11-.92-10a7,7,0,0,0,.1-3.54,4,4,0,0,0-.94-1.77,3.07,3.07,0,0,0-1-.71l-.6-.05.71-.52c.29-.19.57-.4.86-.6.62.24,1.24.45,1.87.64a38.25,38.25,0,0,0,36.06-6.86c.25-.19.49-.4.72-.61s.63-.54.94-.83c.14-.13.28-.25.4-.38s.47-.46.7-.7c.07.22.14.43.22.65a19.34,19.34,0,0,0,1.13,2.58,1.59,1.59,0,0,0,.13.22.41.41,0,0,0,0,.09c.07.15.16.29.24.43a12.68,12.68,0,0,0,2.06,2.6,6.48,6.48,0,0,0,.62.54,6.85,6.85,0,0,0,1,.71,1,1,0,0,0,.17.12,1.22,1.22,0,0,0,Line truncated

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/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

@@ -0,0 +1,6 @@
+https://jsoncrack.com
+https://jsoncrack.com/sign-in
+https://jsoncrack.com/editor
+https://jsoncrack.com/docs
+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/components/AdTest/index.tsx

@@ -0,0 +1,140 @@
+import React from "react";
+import styled from "styled-components";
+
+const AdWrapper = styled.div`
+  & {
+    position: fixed;
+    z-index: 1000;
+    bottom: 40px;
+    right: 10px;
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu,
+      Cantarell, "Helvetica Neue", Helvetica, Arial, sans-serif;
+  }
+
+  & .native-button {
+    z-index: 100;
+    display: flex;
+    padding: 8px 20px;
+    border-radius: 4px;
+    box-shadow: 0 1px 4px 1px hsla(0, 0%, 0%, 0.15);
+    color: #fff;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    font-weight: 600;
+    font-size: 12px;
+    cursor: pointer;
+
+    user-select: none;
+    justify-content: center;
+    align-items: center;
+  }
+
+  & .native-img {
+    margin-right: 10px;
+    width: 20px;
+    height: 20px;
+  }
+
+  & .native-overlay {
+    position: fixed;
+    bottom: 80px;
+    display: none;
+    padding: 20px;
+    max-width: 330px;
+    border-radius: 4px;
+    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;
+    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;
+    transform: scale(1) translateY(0);
+  }
+
+  #native-button {
+    display: none;
+  }
+
+  & .native-banner {
+    line-height: 1.35;
+  }
+
+  & .native-tagline {
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    font-size: 16px;
+  }
+
+  & .native-description {
+    margin-bottom: 10px;
+    font-size: 16px;
+  }
+
+  & .native-footer {
+    display: flex;
+
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  & .native-logo {
+    width: 120px;
+    height: auto;
+  }
+
+  & .native-cta {
+    padding: 6px 8px;
+    border-radius: 3px;
+    text-decoration: none;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    font-weight: 600;
+    font-size: 12px;
+  }
+`;
+
+const template = `${"`"}
+<label class="native-button" for="native-button" style="background-color: ##backgroundColor##; color: ##textColor##;"><img src="##image##" class="native-img">Sponsored by ##company##</label>
+<input type="checkbox" id="native-button">
+<div class="native-overlay" style="background-color: ##backgroundColor##; color: ##textColor##">
+  <div class="native-banner">
+    <div class="native-tagline">##tagline##</div>
+    <div class="native-description">##description##</div>
+    <div class="native-footer">
+      <a href="##statlink##" class="native-cta" style="background-color: ##ctaBackgroundColor##; color: ##ctaTextColor##">##callToAction##</a>
+      <img class="native-logo" src="##logo##">
+    </div>
+  </div>
+</div>
+${"`"}`;
+
+export const AdTest = () => {
+  const ref = React.useRef<HTMLDivElement>(null!);
+
+  React.useEffect(() => {
+    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) {
+          _bsa.init('custom', 'CWYD42JI', 'placement:jsoncrackcom', {
+            target: '#cutton-js',
+            template: ${template}
+          });
+        }
+      })();`;
+    ref.current.appendChild(s);
+  }, []);
+
+  return <AdWrapper ref={ref} id="cutton-js"></AdWrapper>;
+};

src/components/Button/index.tsx

@@ -1,96 +0,0 @@
-import React from "react";
-import styled, { DefaultTheme } from "styled-components";
-
-enum ButtonType {
-  PRIMARY = "PRIMARY",
-  SECONDARY = "BLURPLE",
-  DANGER = "DANGER",
-  SUCCESS = "SEAGREEN",
-  WARNING = "ORANGE",
-}
-
-interface ButtonProps {
-  status?: keyof typeof ButtonType;
-  block?: boolean;
-}
-
-type ConditionalProps =
-  | ({
-      link?: boolean;
-    } & React.ComponentPropsWithoutRef<"a">)
-  | ({
-      link?: never;
-    } & React.ComponentPropsWithoutRef<"button">);
-
-function getButtonStatus(status: keyof typeof ButtonType, theme: DefaultTheme) {
-  return theme[ButtonType[status]];
-}
-
-const StyledButton = styled.button<{
-  status: keyof typeof ButtonType;
-  block: boolean;
-}>`
-  display: flex;
-  align-items: center;
-  background: ${({ status, theme }) => getButtonStatus(status, theme)};
-  color: #ffffff;
-  padding: 8px 16px;
-  min-width: 60px;
-  min-height: 32px;
-  border-radius: 3px;
-  font-size: 14px;
-  font-weight: 500;
-  font-family: "Catamaran", sans-serif;
-  width: ${({ block }) => (block ? "100%" : "fit-content")};
-  height: 40px;
-  background-image: none;
-
-  :disabled {
-    cursor: not-allowed;
-    opacity: 0.5;
-  }
-
-  div {
-    white-space: normal;
-    margin: 0 auto;
-    text-overflow: ellipsis;
-    overflow: hidden;
-  }
-
-  &:hover {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
-  }
-
-  @media only screen and (max-width: 768px) {
-    font-size: 14px;
-  }
-`;
-
-const StyledButtonContent = styled.div`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  gap: 8px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-export const Button: React.FC<ButtonProps & ConditionalProps> = ({
-  children,
-  status,
-  block = false,
-  link = false,
-  ...props
-}) => {
-  return (
-    <StyledButton
-      as={link ? "a" : "button"}
-      type="button"
-      status={status ?? "PRIMARY"}
-      block={block}
-      {...props}
-    >
-      <StyledButtonContent>{children}</StyledButtonContent>
-    </StyledButton>
-  );
-};

src/components/CarbonAds/index.tsx

@@ -1,86 +1,22 @@
 import React from "react";
-import Script from "next/script";
-import { IoMdClose } from "react-icons/io";
-import styled from "styled-components";
+import useUser from "src/store/useUser";
 
-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};
-`;
+export const CarbonAds = () => {
+  const ref = React.useRef<HTMLDivElement>(null!);
+  const premium = useUser(state => state.premium);
 
-const StyledWrapper = styled.span<{ editor?: boolean }>`
-  position: relative;
+  React.useEffect(() => {
+    if (!premium) {
+      ref.current.innerHTML = "";
+      const s = document.createElement("script");
 
-  #carbonads {
-    width: 100%;
-    display: flex;
-  }
-
-  ${({ theme, editor }) =>
-    editor &&
-    `
-    #carbonads {
-      border-radius: 0;
-      border-top: 1px solid ${theme.BACKGROUND_MODIFIER_ACCENT};
+      s.id = "_carbonads_js";
+      s.src = "//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsoncrackcom";
+      ref.current.appendChild(s);
     }
+  }, [premium]);
 
-    #carbonads > span {
-      max-width: 100%;
-      width: 100%;
-  }
-  `};
+  if (premium) return null;
 
-  &:hover {
-    ${StyledCloseBtn} {
-      display: flex;
-    }
-  }
-
-  @media all and (display-mode: standalone) {
-    #carbonads {
-      display: none;
-    }
-  }
-`;
-
-export const CarbonAds: React.FC<{ editor?: boolean }> = ({ editor = false }) => {
-  const [isHidden, setIsHidden] = React.useState(false);
-
-  if (isHidden) return null;
-
-  return (
-    <StyledWrapper editor={editor} id="carbon-wrapper">
-      {editor && (
-        <StyledCloseBtn onClick={() => setIsHidden(true)}>
-          <IoMdClose color="white" size="15" />
-        </StyledCloseBtn>
-      )}
-      <Script
-        type="text/javascript"
-        src="//cdn.carbonads.com/carbon.js?serve=CE7IPKQL&placement=jsoncrackcom"
-        id="_carbonads_js"
-        strategy="lazyOnload"
-        onLoad={() => {
-          const init = () => {
-            const parent = document.getElementById("carbon-wrapper");
-            const ads = document.getElementById("carbonads");
-
-            if (ads === null) return setTimeout(() => init(), 500);
-            parent?.appendChild(ads);
-          };
-
-          init();
-        }}
-      />
-    </StyledWrapper>
-  );
+  return <div ref={ref} className="carbon-outer" />;
 };

src/components/CustomNode/ObjectNode.tsx

@@ -1,51 +0,0 @@
-import React from "react";
-// import { useInViewport } from "react-in-viewport";
-import { CustomNodeProps } from "src/components/CustomNode";
-import useConfig from "src/hooks/store/useConfig";
-import * as Styled from "./styles";
-
-const inViewport = true;
-
-const ObjectNode: React.FC<CustomNodeProps> = ({ node, x, y }) => {
-  const { text, width, height, data } = node;
-  const ref = React.useRef(null);
-  const performanceMode = useConfig(state => state.performanceMode);
-  // const { inViewport } = useInViewport(ref);
-
-  if (data.isEmpty) return null;
-
-  return (
-    <Styled.StyledForeignObject
-      width={width}
-      height={height}
-      x={0}
-      y={0}
-      ref={ref}
-      isObject
-    >
-      {(!performanceMode || inViewport) &&
-        text.map((val, idx) => (
-          <Styled.StyledRow
-            data-key={JSON.stringify(val[1])}
-            data-x={x}
-            data-y={y}
-            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 default React.memo(ObjectNode, propsAreEqual);

src/components/CustomNode/TextNode.tsx

@@ -1,105 +0,0 @@
-import React from "react";
-import { MdLink, MdLinkOff } from "react-icons/md";
-// import { useInViewport } from "react-in-viewport";
-import { CustomNodeProps } from "src/components/CustomNode";
-import useConfig from "src/hooks/store/useConfig";
-import useGraph from "src/hooks/store/useGraph";
-import useStored from "src/hooks/store/useStored";
-import styled from "styled-components";
-import * as Styled from "./styles";
-
-const inViewport = true;
-
-const StyledExpand = styled.button`
-  pointer-events: all;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  color: ${({ theme }) => theme.TEXT_NORMAL};
-  background: rgba(0, 0, 0, 0.1);
-  height: 100%;
-  width: 40px;
-  border-left: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
-
-  &:hover {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
-  }
-`;
-
-const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>`
-  display: flex;
-  justify-content: ${({ hasCollapse }) =>
-    hasCollapse ? "space-between" : "center"};
-  align-items: center;
-  height: 100%;
-  width: 100%;
-`;
-
-const TextNode: React.FC<CustomNodeProps> = ({
-  node,
-  x,
-  y,
-  hasCollapse = false,
-}) => {
-  const { id, text, width, height, data } = node;
-  const ref = React.useRef(null);
-  const hideCollapse = useStored(state => state.hideCollapse);
-  const hideChildrenCount = useStored(state => state.hideChildrenCount);
-  const expandNodes = useGraph(state => state.expandNodes);
-  const collapseNodes = useGraph(state => state.collapseNodes);
-  const isExpanded = useGraph(state => state.collapsedParents.includes(id));
-  const performanceMode = useConfig(state => state.performanceMode);
-  // const { inViewport } = useInViewport(ref);
-
-  const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.stopPropagation();
-
-    if (!isExpanded) collapseNodes(id);
-    else expandNodes(id);
-  };
-
-  return (
-    <Styled.StyledForeignObject
-      width={width}
-      height={height}
-      x={0}
-      y={0}
-      hideCollapse={hideCollapse}
-      hasCollapse={data.isParent && hasCollapse}
-      ref={ref}
-    >
-      <StyledTextNodeWrapper hasCollapse={data.isParent && !hideCollapse}>
-        {(!performanceMode || inViewport) && (
-          <Styled.StyledKey
-            data-x={x}
-            data-y={y}
-            data-key={JSON.stringify(text)}
-            parent={data.isParent}
-          >
-            <Styled.StyledLinkItUrl>
-              {JSON.stringify(text).replaceAll('"', "")}
-            </Styled.StyledLinkItUrl>
-          </Styled.StyledKey>
-        )}
-
-        {data.isParent && data.childrenCount > 0 && !hideChildrenCount && (
-          <Styled.StyledChildrenCount>
-            ({data.childrenCount})
-          </Styled.StyledChildrenCount>
-        )}
-
-        {inViewport && data.isParent && hasCollapse && !hideCollapse && (
-          <StyledExpand onClick={handleExpand}>
-            {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
-          </StyledExpand>
-        )}
-      </StyledTextNodeWrapper>
-    </Styled.StyledForeignObject>
-  );
-};
-
-function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
-  return prev.node.text === next.node.text && prev.node.width === next.node.width;
-}
-
-export default React.memo(TextNode, propsAreEqual);

src/components/CustomNode/index.tsx

@@ -1,41 +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,96 +0,0 @@
-import { LinkItUrl } from "react-linkify-it";
-import styled, { DefaultTheme } from "styled-components";
-
-function getTypeColor(value: string, theme: DefaultTheme) {
-  if (!Number.isNaN(+value)) return "#FD0079";
-  if (value === "true") return theme.TEXT_POSITIVE;
-  if (value === "false") return theme.TEXT_DANGER;
-}
-
-export const StyledLinkItUrl = styled(LinkItUrl)`
-  text-decoration: underline;
-  pointer-events: all;
-`;
-
-export const StyledForeignObject = styled.foreignObject<{
-  hasCollapse?: boolean;
-  hideCollapse?: boolean;
-  isObject?: boolean;
-}>`
-  text-align: ${({ isObject }) => !isObject && "center"};
-  font-size: 12px;
-  overflow: hidden;
-  color: ${({ theme }) => theme.TEXT_NORMAL};
-  pointer-events: none;
-  padding: ${({ isObject }) => isObject && "10px"};
-
-  * {
-    font-family: "Roboto Mono", monospace;
-  }
-
-  &.searched {
-    border: 2px solid ${({ theme }) => theme.TEXT_POSITIVE};
-    border-radius: 2px;
-    box-sizing: border-box;
-  }
-
-  .highlight {
-    border: 2px dashed #ff2970;
-    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, objectKey: boolean) {
-  if (parent) return theme.NODE_KEY;
-  if (objectKey) return theme.OBJECT_KEY;
-  return theme.TEXT_POSITIVE;
-}
-
-export const StyledKey = styled.span<{
-  objectKey?: boolean;
-  parent?: boolean;
-  value?: string;
-}>`
-  display: inline;
-  flex: 1;
-  font-weight: 500;
-  color: ${({ theme, objectKey = false, parent = false }) =>
-    getKeyColor(theme, parent, objectKey)};
-  font-size: ${({ parent }) => parent && "14px"};
-  overflow: hidden;
-  text-overflow: ellipsis;
-  padding: ${({ objectKey }) => !objectKey && 10}px;
-`;
-
-export const StyledRow = styled.span.attrs<{
-  "data-key": string;
-  theme: DefaultTheme;
-}>(props => ({
-  style: {
-    color: getTypeColor(props["data-key"], props.theme),
-  },
-}))<{ "data-key": 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.TEXT_POSITIVE};
-  padding: 10px;
-  margin-left: -15px;
-`;

src/components/ErrorContainer/index.tsx

@@ -1,58 +0,0 @@
-import React from "react";
-import { MdReportGmailerrorred, MdOutlineCheckCircleOutline } from "react-icons/md";
-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 = ({ hasError }: { hasError: boolean }) => {
-  return (
-    <StyledErrorWrapper>
-      <StyledErrorExpand error={hasError}>
-        <StyledTitle>
-          {hasError ? (
-            <MdReportGmailerrorred size={20} />
-          ) : (
-            <MdOutlineCheckCircleOutline size={20} />
-          )}
-          {hasError ? "Invalid JSON" : "JSON Valid"}
-        </StyledTitle>
-      </StyledErrorExpand>
-    </StyledErrorWrapper>
-  );
-};

src/components/FileInput/index.tsx

@@ -0,0 +1,80 @@
+import React from "react";
+import styled from "styled-components";
+
+const StyledInputWrapper = styled.div`
+  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
+  width: 100%;
+  border-radius: 4px;
+`;
+
+const StyledForm = styled.div`
+  display: flex;
+
+  flex: 1;
+`;
+
+const StyledInput = styled.input`
+  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
+  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  outline: none;
+  border: none;
+  border-radius: 4px;
+  line-height: 32px;
+  padding: 10px;
+  width: 100%;
+  height: 40px;
+`;
+
+const StyledButton = styled.button`
+  display: flex;
+  align-items: center;
+  background: none;
+  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  padding: 0 10px;
+  min-height: unset;
+  text-transform: uppercase;
+
+  &:hover {
+    box-shadow: none;
+  }
+
+  &.active {
+    background: ${({ theme }) => theme.PRIMARY};
+    color: white;
+    outline: 3px solid ${({ theme }) => theme.BACKGROUND_TERTIARY};
+    border-radius: 10px;
+  }
+`;
+
+export interface InputProps {
+  value: string | number | string[];
+  extensions: string[];
+  activeExtension: number;
+  onChange?: React.ChangeEventHandler<HTMLInputElement>;
+  setExtension: (value: number) => void;
+}
+export const FileInput: React.FC<InputProps> = ({
+  setExtension,
+  activeExtension,
+  onChange,
+  extensions,
+  value,
+}) => {
+  return (
+    <StyledInputWrapper>
+      <StyledForm>
+        <StyledInput type="text" onChange={onChange} value={value} placeholder="File Name" />
+        {extensions.map((ext, key) => (
+          <StyledButton
+            className={`${activeExtension === key && "active"}`}
+            key={key}
+            aria-label="search"
+            onClick={() => setExtension(key)}
+          >
+            {ext}
+          </StyledButton>
+        ))}
+      </StyledForm>
+    </StyledInputWrapper>
+  );
+};

src/components/GoogleAnalytics/index.tsx

@@ -1,26 +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"
-        strategy="afterInteractive"
-      />
-      <Script id="google-analytics" strategy="afterInteractive">
-        {`
-          window.dataLayer = window.dataLayer || [];
-          function gtag(){dataLayer.push(arguments);}
-          gtag('js', new Date());
-        
-          gtag('config', 'G-JKZEHMJBMH');
-        `}
-      </Script>
-    </>
-  );
-};

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

@@ -0,0 +1,111 @@
+import React from "react";
+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`
+  pointer-events: all;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: ${({ theme }) => theme.TEXT_NORMAL};
+  background: rgba(0, 0, 0, 0.1);
+  height: 100%;
+  width: 40px;
+  border-left: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
+
+  &:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
+  }
+`;
+
+const StyledTextNodeWrapper = styled.span<{ $hasCollapse: boolean }>`
+  display: flex;
+  justify-content: ${({ $hasCollapse }) => ($hasCollapse ? "space-between" : "center")};
+  align-items: center;
+  height: 100%;
+  width: 100%;
+`;
+
+const StyledImageWrapper = styled.div`
+  padding: 5px;
+`;
+
+const StyledImage = styled.img`
+  border-radius: 2px;
+  object-fit: contain;
+  background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
+`;
+
+const Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
+  const {
+    id,
+    text,
+    width,
+    height,
+    data: { isParent, childrenCount, type },
+  } = node;
+  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 = 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}>
+      {isImage ? (
+        <StyledImageWrapper>
+          <StyledImage src={text as string} width="70" height="70" loading="lazy" />
+        </StyledImageWrapper>
+      ) : (
+        <StyledTextNodeWrapper
+          data-x={x}
+          data-y={y}
+          data-key={JSON.stringify(text)}
+          $hasCollapse={isParent && collapseButtonVisible}
+        >
+          <Styled.StyledKey $value={value} $parent={isParent} $type={type}>
+            <TextRenderer>{value}</TextRenderer>
+          </Styled.StyledKey>
+          {isParent && childrenCount > 0 && childrenCountVisible && (
+            <Styled.StyledChildrenCount>({childrenCount})</Styled.StyledChildrenCount>
+          )}
+
+          {isParent && hasCollapse && collapseButtonVisible && (
+            <StyledExpand aria-label="Expand" onClick={handleExpand}>
+              {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
+            </StyledExpand>
+          )}
+        </StyledTextNodeWrapper>
+      )}
+    </Styled.StyledForeignObject>
+  );
+};
+
+function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
+  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/ErrorView.tsx

@@ -26,17 +26,12 @@ const StyledInfo = styled.p`
 
 export const ErrorView = () => (
   <StyledErrorView>
-    <img
-      src="/assets/undraw_qa_engineers_dg-5-p.svg"
-      width="200"
-      height="200"
-      alt="oops"
-    />
-    <StyledTitle>JSON Crack unable to handle this file!</StyledTitle>
+    <img src="/assets/undraw_qa_engineers_dg-5-p.svg" width="200" height="200" alt="oops" />
+    <StyledTitle>JSON Crack is unable to handle this file!</StyledTitle>
     <StyledInfo>
-      We apologize for the problem you encountered, we are doing our best as Open
-      Source community to improve our service. JSON Crack is currently unable to
-      handle such a huge file.
+      We apologize for the problem you encountered. We are doing our best as an Open Source
+      community to improve our service. Unfortunately, JSON Crack is currently unable to handle such
+      a large file.
     </StyledInfo>
   </StyledErrorView>
 );

src/components/Graph/PremiumView.tsx

@@ -0,0 +1,204 @@
+import React from "react";
+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 2px 1px black);
+  }
+
+  .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`
+  width: 60%;
+  font-weight: 600;
+  font-size: 20px;
+  text-align: center;
+  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>
+    <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,161 +1,214 @@
 import React from "react";
-import {
-  ReactZoomPanPinchRef,
-  TransformComponent,
-  TransformWrapper,
-} from "react-zoom-pan-pinch";
-import { Canvas, Edge, ElkRoot } from "reaflow";
-import { CustomNode } from "src/components/CustomNode";
-import useConfig from "src/hooks/store/useConfig";
-import useGraph from "src/hooks/store/useGraph";
+import dynamic from "next/dynamic";
 import styled from "styled-components";
-import { Loading } from "../Loading";
+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 { NodeData } from "src/types/graph";
+import { CustomEdge } from "./CustomEdge";
 import { ErrorView } from "./ErrorView";
+import { PremiumView } from "./PremiumView";
 
-interface LayoutProps {
+const Canvas = dynamic(() => import("reaflow").then(r => r.Canvas), {
+  ssr: false,
+});
+
+interface GraphProps {
   isWidget?: boolean;
-  openModal: () => void;
-  setSelectedNode: (node: [string, string][]) => void;
 }
 
-const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
+const StyledEditorWrapper = styled.div<{ $widget: boolean; $showRulers: boolean }>`
   position: absolute;
   width: 100%;
-  height: ${({ isWidget }) => (isWidget ? "100vh" : "calc(100vh - 36px)")};
-  background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-  background-image: ${({ theme }) =>
-    `radial-gradient(#505050 0.5px, ${theme.BACKGROUND_SECONDARY} 0.5px)`};
-  background-size: 15px 15px;
+  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;
   }
 
-  .dragging {
+  .dragging,
+  .dragging button {
     pointer-events: none;
   }
 
   rect {
     fill: ${({ theme }) => theme.BACKGROUND_NODE};
   }
+
+  @media only screen and (max-width: 768px) {
+    height: ${({ $widget }) => ($widget ? "calc(100vh - 36px)" : "100vh")};
+  }
+
+  @media only screen and (max-width: 320px) {
+    height: 100vh;
+  }
 `;
 
-const GraphComponent = ({
-  isWidget = false,
-  openModal,
-  setSelectedNode,
-}: LayoutProps) => {
-  const [minScale, setMinScale] = React.useState(0.4);
+const layoutOptions = {
+  "elk.layered.compaction.postCompaction.strategy": "EDGE_LENGTH",
+  "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+};
+
+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 setConfig = useConfig(state => state.setConfig);
-  const centerView = useConfig(state => state.centerView);
-  const loading = useGraph(state => state.loading);
-  const layout = useConfig(state => state.layout);
+  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 [size, setSize] = React.useState({
-    width: 1,
-    height: 1,
-  });
-
-  const handleNodeClick = React.useCallback(
-    (e: React.MouseEvent<SVGElement>, data: NodeData) => {
-      if (setSelectedNode) setSelectedNode(data.text);
-      if (openModal) openModal();
-    },
-    [openModal, setSelectedNode]
-  );
-
-  const onInit = React.useCallback(
-    (ref: ReactZoomPanPinchRef) => {
-      setConfig("zoomPanPinch", ref);
-    },
-    [setConfig]
-  );
+  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);
 
-        const MIN_SCALE = Math.round((450_000 / areaSize) * 100) / 100;
-        const scale = MIN_SCALE > 2 ? 1 : MIN_SCALE <= 0 ? 0.1 : MIN_SCALE;
+        setPaneWidth(layout.width + 50);
+        setPaneHeight((layout.height as number) + 50);
 
-        setLoading(true);
-        setMinScale(scale);
-        setSize({ width: layout.width + 400, height: layout.height + 400 });
-
-        requestAnimationFrame(() => {
-          setTimeout(() => {
+        setTimeout(() => {
+          validateHiddenNodes();
+          window.requestAnimationFrame(() => {
+            if (changeRatio > 70 || isWidget) centerView();
             setLoading(false);
-            setTimeout(() => (changeRatio > 100 || isWidget) && centerView(), 0);
-          }, 0);
+          });
         });
       }
     },
-    [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();
-  }, []);
-
-  if (nodes.length > 8_000) return <ErrorView />;
-
   return (
-    <StyledEditorWrapper isWidget={isWidget}>
-      {loading && <Loading message="Painting graph..." />}
-      <TransformWrapper
-        maxScale={2}
-        minScale={minScale}
-        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")
-        }
-      >
-        <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={layout}
-            onLayoutChange={onLayoutChange}
-            onCanvasClick={onCanvasClick}
-            key={layout}
-            zoomable={false}
-            animated={false}
-            readonly={true}
-            dragEdge={null}
-            dragNode={null}
-            fit={true}
-            node={props => <CustomNode {...props} onClick={handleNodeClick} />}
-            edge={props => (
-              <Edge {...props} containerClassName={`edge-${props.id}`} />
-            )}
-          />
-        </TransformComponent>
-      </TransformWrapper>
-    </StyledEditorWrapper>
+    <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}
+    />
   );
 };
 
-export const Graph = React.memo(GraphComponent);
+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 bindLongPress = useLongPress(callback, {
+    threshold: 150,
+    onFinish: () => {
+      const canvas = document.querySelector(".jsoncrack-canvas") as HTMLDivElement | null;
+      canvas?.classList.remove("dragging");
+    },
+  });
+
+  const blurOnClick = React.useCallback(() => {
+    if ("activeElement" in document) (document.activeElement as HTMLElement)?.blur();
+  }, []);
+
+  if (viewType === "error") {
+    return <ErrorView />;
+  }
+
+  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 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
+        >
+          <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/Input/index.tsx

@@ -1,19 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-const StyledInput = styled.input`
-  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-  outline: none;
-  border: none;
-  border-radius: 4px;
-  line-height: 32px;
-  padding: 10px;
-  width: 100%;
-  margin-bottom: 10px;
-  height: 40px;
-`;
-
-type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
-
-export const Input: React.FC<InputProps> = props => <StyledInput {...props} />;

src/components/Loading/index.tsx

@@ -1,60 +0,0 @@
-import React from "react";
-import styled, { keyframes } from "styled-components";
-
-interface LoadingProps {
-  message?: string;
-}
-
-const fadeIn = keyframes`
- 99% {
-    visibility: hidden;
-  }
-  100% {
-    visibility: visible;
-  }
-`;
-
-const StyledLoading = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  display: grid;
-  place-content: center;
-  width: 100%;
-  height: 100vh;
-  text-align: center;
-  background: ${({ theme }) => theme.BLACK_DARK};
-  z-index: 36;
-  pointer-events: none;
-  animation: 0.2s ${fadeIn};
-  animation-fill-mode: forwards;
-  visibility: hidden;
-`;
-
-const StyledLogo = styled.h2`
-  font-weight: 600;
-  font-size: 56px;
-  pointer-events: none;
-  margin-bottom: 10px;
-`;
-
-const StyledText = styled.span`
-  color: #faa81a;
-`;
-
-const StyledMessage = styled.div`
-  color: #b9bbbe;
-  font-size: 24px;
-  font-weight: 500;
-`;
-
-export const Loading: React.FC<LoadingProps> = ({ message }) => (
-  <StyledLoading>
-    <StyledLogo>
-      <StyledText>JSON</StyledText> Crack
-    </StyledLogo>
-    <StyledMessage>
-      {message ?? "Preparing the environment for you..."}
-    </StyledMessage>
-  </StyledLoading>
-);

src/components/Modal/index.tsx

@@ -1,74 +0,0 @@
-import React from "react";
-import { Button } from "src/components/Button";
-import useKeyPress from "src/hooks/useKeyPress";
-import * as Styled from "./styles";
-
-type ControlProps = React.PropsWithChildren<{
-  setVisible: (status: boolean) => void;
-}>;
-
-export type ReactComponent = React.FC<React.PropsWithChildren<{}>>;
-
-type ModalTypes = {
-  Header: ReactComponent;
-  Content: ReactComponent;
-  Controls: React.FC<ControlProps>;
-};
-
-export interface ModalProps {
-  visible: boolean;
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}
-
-const Header: ReactComponent = ({ children }) => {
-  return (
-    <Styled.HeaderWrapper>
-      <Styled.Title>{children}</Styled.Title>
-    </Styled.HeaderWrapper>
-  );
-};
-
-const Content: ReactComponent = ({ children }) => {
-  return <Styled.ContentWrapper>{children}</Styled.ContentWrapper>;
-};
-
-const Controls: React.FC<ControlProps> = ({ children, setVisible }) => {
-  const handleEspacePress = useKeyPress("Escape");
-
-  React.useEffect(() => {
-    if (handleEspacePress) setVisible(false);
-  }, [handleEspacePress, setVisible]);
-
-  return (
-    <Styled.ControlsWrapper>
-      <Button onClick={() => setVisible(false)}>Close</Button>
-      {children}
-    </Styled.ControlsWrapper>
-  );
-};
-
-const Modal: React.FC<React.PropsWithChildren<ModalProps>> & ModalTypes = ({
-  children,
-  visible,
-  setVisible,
-}) => {
-  const onClick = (e: React.SyntheticEvent<HTMLDivElement>) => {
-    if (e.currentTarget === e.target) {
-      setVisible(v => !v);
-    }
-  };
-
-  if (!visible) return null;
-
-  return (
-    <Styled.ModalWrapper onClick={onClick}>
-      <Styled.ModalInnerWrapper>{children}</Styled.ModalInnerWrapper>
-    </Styled.ModalWrapper>
-  );
-};
-
-Modal.Header = Header;
-Modal.Content = Content;
-Modal.Controls = Controls;
-
-export { Modal };

src/components/Modal/styles.tsx

@@ -1,64 +0,0 @@
-import styled, { keyframes } from "styled-components";
-
-const appearAnimation = keyframes`
-  from { transform: scale(0.6); opacity: 0; }
-  to { transform: scale(1); opacity: 1; };
-`;
-
-export const ModalWrapper = styled.div`
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100vh;
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  background: rgba(0, 0, 0, 0.85);
-  z-index: 36;
-
-  * {
-    box-sizing: border-box;
-  }
-`;
-
-export const ModalInnerWrapper = styled.div`
-  min-width: 440px;
-  max-width: 490px;
-  width: fit-content;
-  animation: ${appearAnimation} 220ms ease-in-out;
-  line-height: 20px;
-
-  @media only screen and (max-width: 768px) {
-    min-width: 90%;
-    max-width: 90%;
-  }
-`;
-
-export const Title = styled.h2`
-  color: ${({ theme }) => theme.INTERACTIVE_ACTIVE};
-  font-size: 20px !important;
-  margin: 0;
-`;
-
-export const HeaderWrapper = styled.div`
-  background: ${({ theme }) => theme.MODAL_BACKGROUND};
-  padding: 16px;
-  border-radius: 5px 5px 0 0;
-`;
-
-export const ContentWrapper = styled.div`
-  color: ${({ theme }) => theme.TEXT_NORMAL};
-  background: ${({ theme }) => theme.MODAL_BACKGROUND};
-  padding: 16px;
-  overflow: hidden auto;
-`;
-
-export const ControlsWrapper = styled.div`
-  display: flex;
-  flex-direction: row-reverse;
-  background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-  padding: 16px;
-  border-radius: 0 0 5px 5px;
-  gap: 10px;
-`;

src/components/MonacoEditor/index.tsx

@@ -1,12 +1,9 @@
 import React from "react";
-import Editor, { loader, Monaco } from "@monaco-editor/react";
-import { parse } from "jsonc-parser";
-import { Loading } from "src/components/Loading";
-import useConfig from "src/hooks/store/useConfig";
-import useGraph from "src/hooks/store/useGraph";
-import useStored from "src/hooks/store/useStored";
-import { parser } from "src/utils/jsonParser";
 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: {
@@ -16,6 +13,7 @@ loader.config({
 
 const editorOptions = {
   formatOnPaste: true,
+  formatOnType: true,
   minimap: {
     enabled: false,
   },
@@ -23,68 +21,66 @@ 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);
 `;
 
-function handleEditorWillMount(monaco: Monaco) {
-  monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
-    allowComments: true,
-    comments: "ignore",
-  });
-}
-
-export const MonacoEditor = ({
-  setHasError,
-}: {
-  setHasError: (value: boolean) => void;
-}) => {
-  const json = useConfig(state => state.json);
-  const expand = useConfig(state => state.expand);
-  const setJson = useConfig(state => state.setJson);
-  const setGraphValue = useGraph(state => state.setGraphValue);
-  const lightmode = useStored(state => (state.lightmode ? "light" : "vs-dark"));
-  const [value, setValue] = React.useState<string | undefined>("");
+export const MonacoEditor = () => {
+  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(() => {
-    const { nodes, edges } = parser(json, expand);
-
-    setGraphValue("loading", true);
-    setGraphValue("nodes", nodes);
-    setGraphValue("edges", edges);
-    setValue(json);
-  }, [expand, json, setGraphValue]);
+    monaco?.languages.json.jsonDefaults.setDiagnosticsOptions({
+      validate: true,
+      allowComments: true,
+      enableSchemaRequest: true,
+      ...(jsonSchema && {
+        schemas: [
+          {
+            fileMatch: ["*"],
+            schema: jsonSchema,
+          },
+        ],
+      }),
+    });
+  }, [jsonSchema, monaco?.languages.json.jsonDefaults]);
 
   React.useEffect(() => {
-    const formatTimer = setTimeout(() => {
-      if (!value) {
-        setHasError(false);
-        return setJson("{}");
+    const beforeunload = (e: BeforeUnloadEvent) => {
+      if (getHasChanges()) {
+        const confirmationMessage =
+          "Unsaved changes, if you leave before saving  your changes will be lost";
+
+        (e || window.event).returnValue = confirmationMessage; //Gecko + IE
+        return confirmationMessage;
       }
+    };
 
-      const errors = [];
-      const parsedJSON = JSON.stringify(parse(value, errors), null, 2);
-      if (errors.length) return setHasError(true);
+    window.addEventListener("beforeunload", beforeunload);
 
-      setJson(parsedJSON);
-      setHasError(false);
-    }, 1200);
-
-    return () => clearTimeout(formatTimer);
-  }, [value, setJson, setHasError]);
+    return () => {
+      window.removeEventListener("beforeunload", beforeunload);
+    };
+  }, [getHasChanges]);
 
   return (
     <StyledWrapper>
       <Editor
         height="100%"
-        defaultLanguage="json"
-        value={value}
-        theme={lightmode}
+        language={fileType}
+        theme={theme}
+        value={contents}
         options={editorOptions}
-        onChange={setValue}
+        onValidate={errors => setError(errors[0]?.message)}
+        onChange={contents => setContents({ contents, skipUpdate: true })}
         loading={<Loading message="Loading Editor..." />}
-        beforeMount={handleEditorWillMount}
       />
     </StyledWrapper>
   );

src/components/SearchInput/index.tsx

@@ -1,88 +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`
-  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: 208px;
-  }
-`;
-
-const StyledSearchButton = styled.button`
-  display: grid;
-  background: none;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-  padding: 0;
-  min-height: unset;
-
-  &:hover {
-    box-shadow: none;
-  }
-`;
 
 export const SearchInput: React.FC = () => {
-  const [content, setContent, skip] = 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="text"
-          value={content.value}
-          onChange={e => setContent(val => ({ ...val, value: e.target.value }))}
-          placeholder="Search Node"
-        />
-        <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,288 +0,0 @@
-import React from "react";
-import Link from "next/link";
-import { useRouter } from "next/router";
-import toast from "react-hot-toast";
-import {
-  AiOutlineDelete,
-  AiFillGithub,
-  AiOutlineTwitter,
-  AiOutlineSave,
-  AiOutlineFileAdd,
-  AiOutlineLink,
-  AiOutlineEdit,
-} from "react-icons/ai";
-import {
-  CgArrowsMergeAltH,
-  CgArrowsMergeAltV,
-  CgArrowsShrinkH,
-  CgArrowsShrinkV,
-} from "react-icons/cg";
-import { FiDownload } from "react-icons/fi";
-import { HiHeart } from "react-icons/hi";
-import { MdCenterFocusWeak } from "react-icons/md";
-import { TiFlowMerge } from "react-icons/ti";
-import { Tooltip } from "src/components/Tooltip";
-import { ClearModal } from "src/containers/Modals/ClearModal";
-import { DownloadModal } from "src/containers/Modals/DownloadModal";
-import { ImportModal } from "src/containers/Modals/ImportModal";
-import { ShareModal } from "src/containers/Modals/ShareModal";
-import useConfig from "src/hooks/store/useConfig";
-import useGraph from "src/hooks/store/useGraph";
-import { getNextLayout } from "src/utils/getNextLayout";
-import styled from "styled-components";
-import shallow from "zustand/shallow";
-
-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: 26px;
-  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(layout: "LEFT" | "RIGHT" | "DOWN" | "UP") {
-  if (layout === "LEFT") return 90;
-  if (layout === "UP") return 180;
-  if (layout === "RIGHT") return 270;
-  return 360;
-}
-
-export const Sidebar: React.FC = () => {
-  const getJson = useConfig(state => state.getJson);
-  const setConfig = useConfig(state => state.setConfig);
-  const centerView = useConfig(state => state.centerView);
-  const [uploadVisible, setUploadVisible] = React.useState(false);
-  const [clearVisible, setClearVisible] = React.useState(false);
-  const [shareVisible, setShareVisible] = React.useState(false);
-  const [isDownloadVisible, setDownloadVisible] = React.useState(false);
-  const { push } = useRouter();
-
-  const [expand, layout, hideEditor] = useConfig(
-    state => [state.expand, state.layout, state.hideEditor],
-    shallow
-  );
-
-  const { collapseGraph, expandGraph, graphCollapsed } = useGraph();
-
-  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 toggleExpandShrink = () => {
-    setConfig("expand", !expand);
-    toast(`${expand ? "Shrunk" : "Expanded"} nodes.`);
-  };
-
-  const toggleLayout = () => {
-    const nextLayout = getNextLayout(layout);
-    setConfig("layout", nextLayout);
-  };
-
-  const toggleExpandCollapseGraph = () => {
-    if (graphCollapsed) {
-      expandGraph();
-    } else {
-      collapseGraph();
-    }
-    toast(`${graphCollapsed ? "Expanded" : "Collapsed"} graph.`);
-  };
-
-  return (
-    <StyledSidebar>
-      <StyledTopWrapper>
-        <Link passHref href="/">
-          <StyledElement as={StyledLogo}>
-            <StyledText>J</StyledText>
-            <StyledText secondary>C</StyledText>
-          </StyledElement>
-        </Link>
-        <Tooltip className="mobile" title="Edit JSON">
-          <StyledElement onClick={() => setConfig("hideEditor", !hideEditor)}>
-            <AiOutlineEdit />
-          </StyledElement>
-        </Tooltip>
-        <Tooltip title="Import File">
-          <StyledElement onClick={() => setUploadVisible(true)}>
-            <AiOutlineFileAdd />
-          </StyledElement>
-        </Tooltip>
-        <Tooltip title="Rotate Layout">
-          <StyledElement onClick={toggleLayout}>
-            <StyledFlowIcon rotate={rotateLayout(layout)} />
-          </StyledElement>
-        </Tooltip>
-        <Tooltip className="mobile" title="Center View">
-          <StyledElement onClick={centerView}>
-            <MdCenterFocusWeak />
-          </StyledElement>
-        </Tooltip>
-        <Tooltip
-          className="desktop"
-          title={expand ? "Shrink Nodes" : "Expand Nodes"}
-        >
-          <StyledElement title="Toggle Expand/Shrink" onClick={toggleExpandShrink}>
-            {expand ? <CgArrowsMergeAltH /> : <CgArrowsShrinkH />}
-          </StyledElement>
-        </Tooltip>
-        <Tooltip
-          className="desktop"
-          title={graphCollapsed ? "Expand Graph" : "Collapse Graph"}
-        >
-          <StyledElement onClick={toggleExpandCollapseGraph}>
-            {graphCollapsed ? <CgArrowsShrinkV /> : <CgArrowsMergeAltV />}
-          </StyledElement>
-        </Tooltip>
-        <Tooltip className="desktop" title="Save JSON">
-          <StyledElement onClick={handleSave}>
-            <AiOutlineSave />
-          </StyledElement>
-        </Tooltip>
-        <Tooltip className="mobile" title="Download Image">
-          <StyledElement onClick={() => setDownloadVisible(true)}>
-            <FiDownload />
-          </StyledElement>
-        </Tooltip>
-        <Tooltip title="Clear JSON">
-          <StyledElement onClick={() => setClearVisible(true)}>
-            <AiOutlineDelete />
-          </StyledElement>
-        </Tooltip>
-        <Tooltip className="desktop" title="Share">
-          <StyledElement onClick={() => setShareVisible(true)}>
-            <AiOutlineLink />
-          </StyledElement>
-        </Tooltip>
-      </StyledTopWrapper>
-      <StyledBottomWrapper>
-        <StyledElement>
-          <Link href="https://twitter.com/jsoncrack">
-            <a aria-label="Twitter" rel="me" target="_blank">
-              <AiOutlineTwitter />
-            </a>
-          </Link>
-        </StyledElement>
-        <StyledElement>
-          <Link href="https://github.com/AykutSarac/jsoncrack.com">
-            <a aria-label="GitHub" rel="me" target="_blank">
-              <AiFillGithub />
-            </a>
-          </Link>
-        </StyledElement>
-        <StyledElement>
-          <Link href="https://github.com/sponsors/AykutSarac">
-            <a aria-label="GitHub Sponsors" rel="me" target="_blank">
-              <HiHeart />
-            </a>
-          </Link>
-        </StyledElement>
-      </StyledBottomWrapper>
-      <ImportModal visible={uploadVisible} setVisible={setUploadVisible} />
-      <ClearModal visible={clearVisible} setVisible={setClearVisible} />
-      <ShareModal visible={shareVisible} setVisible={setShareVisible} />
-      <DownloadModal visible={isDownloadVisible} setVisible={setDownloadVisible} />
-    </StyledSidebar>
-  );
-};

src/components/Sponsors/index.tsx

@@ -1,101 +0,0 @@
-import React from "react";
-import useStored from "src/hooks/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: 100%;
-  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 => (
-        <StyledSponsor handle={user.handle} key={user.handle}>
-          <a href={user.profile} target="_blank" rel="noreferrer">
-            <img
-              src={user.avatar}
-              alt={user.handle}
-              width="40"
-              height="40"
-              loading="lazy"
-            />
-          </a>
-        </StyledSponsor>
-      ))}
-    </StyledSponsorsWrapper>
-  );
-};

src/components/SupportButton/index.tsx

@@ -1,58 +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;
-
-  &:hover {
-    width: 180px;
-    border-radius: 6px;
-
-    ${StyledText} {
-      opacity: 1;
-      width: fit-content;
-      margin-right: 8px;
-    }
-  }
-`;
-
-export const SupportButton = () => {
-  if (location.pathname.includes("widget")) return null;
-
-  return (
-    <StyledSupportButton
-      href="https://github.com/sponsors/AykutSarac"
-      target="_blank"
-      rel="me"
-    >
-      <StyledText>Support JSON Crack</StyledText>
-      <HiHeart size={25} />
-    </StyledSupportButton>
-  );
-};

src/components/Toggle/index.tsx

@@ -1,65 +0,0 @@
-import React from "react";
-import { IoIosCheckmarkCircle, IoMdCloseCircle } from "react-icons/io";
-import styled from "styled-components";
-
-interface ToggleProps {
-  checked?: boolean;
-  children?: React.ReactNode;
-  onChange?: (value: boolean) => void;
-}
-
-const StyledToggleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  user-select: none;
-  width: 100%;
-  gap: 6px;
-`;
-
-const StyledLabel = styled.label`
-  color: ${({ theme }) => theme.INTERACTIVE_ACTIVE};
-  font-weight: 500;
-  cursor: pointer;
-`;
-
-const StyledToggle = styled.div<{ active: boolean }>`
-  position: relative;
-  display: flex;
-  justify-content: ${({ active }) => (active ? "right" : "left")};
-  align-items: center;
-  width: 40px;
-  height: 24px;
-  padding: 2px;
-  border-radius: 14px;
-  background: ${({ active }) => (active ? "#3AA55D" : "#72767c")};
-  cursor: pointer;
-
-  input {
-    display: none;
-  }
-`;
-
-const Toggle: React.FC<ToggleProps> = ({ children, checked = false, onChange }) => {
-  const [isChecked, setIsChecked] = React.useState(checked);
-
-  const handleClick = () => {
-    setIsChecked(!isChecked);
-    if (onChange) onChange(!isChecked);
-  };
-
-  return (
-    <StyledToggleWrapper>
-      <StyledToggle active={isChecked} onClick={handleClick}>
-        {isChecked ? (
-          <IoIosCheckmarkCircle size={22} color="white" />
-        ) : (
-          <IoMdCloseCircle size={22} color="white" />
-        )}
-        <input type="checkbox" checked={isChecked} onChange={handleClick} />
-      </StyledToggle>
-      <StyledLabel onClick={handleClick}>{children}</StyledLabel>
-    </StyledToggleWrapper>
-  );
-};
-
-export default Toggle;

src/components/Tooltip/index.tsx

@@ -1,71 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-interface TooltipProps extends React.ComponentPropsWithoutRef<"div"> {
-  title?: string;
-}
-
-const StyledTooltipWrapper = styled.div`
-  position: relative;
-  width: fit-content;
-  height: 100%;
-`;
-
-const StyledTooltip = styled.div<{ visible: boolean }>`
-  position: absolute;
-  top: 0;
-  right: 0;
-  transform: translate(calc(100% + 15px), 25%);
-  z-index: 2;
-  background: ${({ theme }) => theme.BACKGROUND_PRIMARY};
-  color: ${({ theme }) => theme.TEXT_NORMAL};
-  border-radius: 5px;
-  padding: 4px 8px;
-  display: ${({ visible }) => (visible ? "initial" : "none")};
-  white-space: nowrap;
-  font-size: 16px;
-  user-select: none;
-  font-weight: 500;
-  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);
-
-  &::after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translate(-90%, 50%);
-    border-width: 8px;
-    border-style: solid;
-    border-color: transparent ${({ theme }) => theme.BACKGROUND_PRIMARY} transparent
-      transparent;
-  }
-
-  @media only screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-const StyledChildren = styled.div``;
-
-export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
-  children,
-  title,
-  ...props
-}) => {
-  const [visible, setVisible] = React.useState(false);
-
-  return (
-    <StyledTooltipWrapper {...props}>
-      {title && <StyledTooltip visible={visible}>{title}</StyledTooltip>}
-
-      <StyledChildren
-        onMouseEnter={() => setVisible(true)}
-        onMouseLeave={() => setVisible(false)}
-      >
-        {children}
-      </StyledChildren>
-    </StyledTooltipWrapper>
-  );
-};

src/components/__tests__/Button.test.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import { screen, render } from "@testing-library/react";
-import { Button } from "src/components/Button";
-
-describe("Button", () => {
-  it("should render Button component", () => {
-    render(<Button>Click Me!</Button>);
-    expect(screen.getByRole("button", { name: /Click Me/ })).toBeInTheDocument();
-  });
-});

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

@@ -2,43 +2,41 @@ import { createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
   html, body {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    color: ${({ theme }) => theme.FULL_WHITE};
-    font-family: 'Catamaran', sans-serif;
+    color: ${({ theme }) => theme.FULL_WHITE} !important;
     font-weight: 400;
     font-size: 16px;
-    scroll-behavior: smooth;
-    height: 100%;
+    background: rgb(246,249,253) !important;
+    background: radial-gradient(circle, rgb(245 245 245) 33%, rgb(252 252 255) 100%) !important;
 
-    background-color: #000000;
-    opacity: 1;
-    background-image: radial-gradient(#414141 0.5px, #000000 0.5px);
-    background-size: 10px 10px;
-
-    @media only screen and (min-width: 768px) {
-      background-color: #000000;
-      opacity: 1;
-      background-image: radial-gradient(#414141 0.5px, #000000 0.5px);
-      background-size: 15px 15px;
+    @media only screen and (max-width: 768px) {
+      background-position: right;
     }
   }
 
   * {
     -webkit-tap-highlight-color: transparent;
+    scroll-behavior: smooth !important;
   }
 
   .hide {
     display: none;
   }
-  
-  a {
-    text-decoration: none;
-    color: unset;
+
+  /* g {
+    opacity: 1 !important;
+  } */
+
+  .mantine-Modal-inner {
     padding: 0;
-    margin: 0;
-    font-family: 'Roboto', sans-serif;
+  }
+
+  svg {
+    vertical-align: text-top;
+  }
+
+  a {
+    color: unset;
+    text-decoration: none;
   }
 
   button {
@@ -52,20 +50,20 @@ const GlobalStyle = createGlobalStyle`
   }
 
   #carbonads * {
-  margin: initial;
-  padding: initial;
-  line-height: initial;
+    margin: initial;
+    padding: initial;
+    line-height: initial;
   }
 
   #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',
@@ -74,11 +72,9 @@ 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),
@@ -87,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 {
@@ -124,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;
@@ -137,6 +133,7 @@ const GlobalStyle = createGlobalStyle`
     bottom: 0;
     right: 0;
   }
+
 `;
 
 export default GlobalStyle;

src/constants/theme.ts

@@ -1,8 +1,7 @@
-import { DefaultTheme } from "styled-components";
-
 const fixedColors = {
   CRIMSON: "#DC143C",
   BLURPLE: "#5865F2",
+  PURPLE: "#9036AF",
   FULL_WHITE: "#FFFFFF",
   BLACK: "#202225",
   BLACK_DARK: "#2C2F33",
@@ -11,15 +10,67 @@ const fixedColors = {
   DARK_SALMON: "#E9967A",
   DANGER: "hsl(359,calc(var(--saturation-factor, 1)*66.7%),54.1%)",
   LIGHTGREEN: "#90EE90",
-  SEAGREEN: "#3BA55D",
+  SEAGREEN: "#11883B",
   ORANGE: "#FAA81A",
   SILVER: "#B9BBBE",
   PRIMARY: "#4D4D4D",
   TEXT_DANGER: "#db662e",
 };
 
-export const darkTheme: DefaultTheme = {
+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: "#DCE5E7",
+      NODE_KEY: "#59b8ff",
+      NODE_VALUE: "#DCE5E7",
+      INTEGER: "#e8c479",
+      NULL: "#939598",
+      BOOL: {
+        FALSE: "#F85C50",
+        TRUE: "#00DC7D",
+      },
+      PARENT_ARR: "#FC9A40",
+      PARENT_OBJ: "#59b8ff",
+      CHILD_COUNT: "white",
+    },
+  },
+  light: {
+    NODE_COLORS: {
+      TEXT: "#000",
+      NODE_KEY: "#761CEA",
+      NODE_VALUE: "#535353",
+      INTEGER: "#FD0079",
+      NULL: "#afafaf",
+      BOOL: {
+        FALSE: "#FF0000",
+        TRUE: "#748700",
+      },
+      PARENT_ARR: "#FF6B00",
+      PARENT_OBJ: "#761CEA",
+      CHILD_COUNT: "#535353",
+    },
+  },
+};
+
+export const darkTheme = {
   ...fixedColors,
+  ...nodeColors.dark,
+  ...promptInputColors.dark,
   BLACK_SECONDARY: "#23272A",
   SILVER_DARK: "#4D4D4D",
   NODE_KEY: "#FAA81A",
@@ -32,15 +83,21 @@ export const darkTheme: DefaultTheme = {
   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%)",
-} as const;
+  GRID_BG_COLOR: "#1C1C1C",
+  GRID_COLOR_PRIMARY: "#2A2A2A",
+  GRID_COLOR_SECONDARY: "#252525",
+};
 
-export const lightTheme: DefaultTheme = {
+export const lightTheme = {
   ...fixedColors,
+  ...nodeColors.light,
+  ...promptInputColors.light,
   BLACK_SECONDARY: "#F2F2F2",
   SILVER_DARK: "#CCCCCC",
   NODE_KEY: "#DC3790",
@@ -50,12 +107,23 @@ export const lightTheme: DefaultTheme = {
   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",
-} as const;
+  GRID_BG_COLOR: "#f3f3f3",
+  GRID_COLOR_PRIMARY: "#E0E0E0",
+  GRID_COLOR_SECONDARY: "#E4E4E4",
+};
+
+const themeDs = {
+  ...lightTheme,
+  ...darkTheme,
+};
+
+export default themeDs;

src/containers/Editor/BottomBar.tsx

@@ -0,0 +1,270 @@
+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,
+  AiOutlineCloudUpload,
+  AiOutlineLink,
+  AiOutlineLock,
+  AiOutlineUnlock,
+} from "react-icons/ai";
+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 useUser from "src/store/useUser";
+
+const StyledBottomBar = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  border-top: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
+  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
+  max-height: 27px;
+  height: 27px;
+  z-index: 35;
+  padding-right: 6px;
+
+  @media screen and (max-width: 320px) {
+    display: none;
+  }
+`;
+
+const StyledLeft = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: left;
+  gap: 4px;
+  padding-left: 8px;
+
+  @media screen and (max-width: 480px) {
+    display: none;
+  }
+`;
+
+const StyledRight = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: right;
+  gap: 4px;
+`;
+
+const StyledBottomBarItem = styled.button<{ $bg?: string }>`
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  width: fit-content;
+  margin: 0;
+  height: 28px;
+  padding: 4px;
+  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);
+    color: ${({ theme }) => theme.INTERACTIVE_HOVER};
+  }
+
+  &:disabled {
+    opacity: 0.6;
+    cursor: default;
+  }
+`;
+
+export const BottomBar = () => {
+  const { query, replace } = useRouter();
+  const data = useFile(state => state.fileData);
+  const user = useUser(state => state.user);
+  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 setVisible = useModal(state => state.setVisible);
+  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]);
+
+  const handleSaveJson = React.useCallback(async () => {
+    if (!user) return setVisible("login")(true);
+
+    if (
+      hasChanges &&
+      !error &&
+      (typeof query.json === "string" || typeof query.json === "undefined")
+    ) {
+      try {
+        setIsUpdating(true);
+        toast.loading("Saving document...", { id: "fileSave" });
+
+        const { data, error } = await documentSvc.upsert({
+          id: query?.json,
+          contents: getContents(),
+          format: getFormat(),
+        });
+
+        if (error) throw error;
+        if (data) replace({ query: { json: data } });
+
+        toast.success("Document saved to cloud", { id: "fileSave" });
+        setHasChanges(false);
+      } catch (error: any) {
+        toast.error(error.message, { id: "fileSave" });
+      } finally {
+        setIsUpdating(false);
+      }
+    }
+  }, [
+    error,
+    getContents,
+    getFormat,
+    hasChanges,
+    query.json,
+    replace,
+    setHasChanges,
+    setVisible,
+    user,
+  ]);
+
+  const handleLoginClick = () => {
+    if (user) return setVisible("account")(true);
+    else setVisible("login")(true);
+  };
+
+  const setPrivate = async () => {
+    try {
+      if (!query.json) return handleSaveJson();
+      setIsUpdating(true);
+
+      const { data: updatedJsonData, error } = await documentSvc.update(query.json as string, {
+        private: !isPrivate,
+      });
+
+      if (error) return toast.error(error.message);
+
+      if (updatedJsonData[0]) {
+        setIsPrivate(updatedJsonData[0].private);
+        toast.success(`Document set to ${isPrivate ? "public" : "private"}.`);
+      } else throw error;
+    } catch (error) {
+      console.error(error);
+    } finally {
+      setIsUpdating(false);
+    }
+  };
+
+  return (
+    <StyledBottomBar>
+      {data?.name && (
+        <Head>
+          <title>{data.name} | JSON Crack</title>
+        </Head>
+      )}
+      <StyledLeft>
+        <StyledBottomBarItem onClick={toggleEditor}>
+          <BiSolidDockLeft />
+        </StyledBottomBarItem>
+
+        {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?.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>
+        <StyledBottomBarItem>Nodes: {nodeCount}</StyledBottomBarItem>
+        <StyledBottomBarItem onClick={() => setVisible("review")(true)}>
+          <VscFeedback />
+          Feedback
+        </StyledBottomBarItem>
+      </StyledRight>
+    </StyledBottomBar>
+  );
+};

src/containers/Editor/JsonEditor/index.tsx

@@ -1,22 +1,132 @@
 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;
   flex-direction: column;
   height: 100%;
-  overflow: auto;
   user-select: none;
 `;
-export const JsonEditor: React.FC = () => {
-  const [hasError, setHasError] = React.useState(false);
+
+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 hasError={hasError} />
-      <MonacoEditor setHasError={setHasError} />
+      {/* <PromptInput /> */}
+      <MonacoEditor />
     </StyledEditorWrapper>
   );
 };
+
+export default JsonEditor;

src/containers/Editor/LiveEditor/GraphCanvas.tsx

@@ -1,48 +0,0 @@
-import React from "react";
-import { Graph } from "src/components/Graph";
-import { NodeModal } from "src/containers/Modals/NodeModal";
-import useGraph from "src/hooks/store/useGraph";
-
-export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
-  const [isModalVisible, setModalVisible] = React.useState(false);
-  const [selectedNode, setSelectedNode] = React.useState<[string, string][]>([]);
-
-  const openModal = React.useCallback(() => setModalVisible(true), []);
-
-  const collapsedNodes = useGraph(state => state.collapsedNodes);
-  const collapsedEdges = useGraph(state => state.collapsedEdges);
-  const loading = useGraph(state => state.loading);
-
-  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(","));
-      const selectedEdges = document.querySelectorAll(edgeList.join(","));
-
-      selectedNodes.forEach(node => node.classList.add("hide"));
-      selectedEdges.forEach(edge => edge.classList.add("hide"));
-    }
-  }, [collapsedNodes, collapsedEdges, loading]);
-
-  return (
-    <>
-      <Graph
-        openModal={openModal}
-        setSelectedNode={setSelectedNode}
-        isWidget={isWidget}
-      />
-      {!isWidget && (
-        <NodeModal
-          selectedNode={selectedNode}
-          visible={isModalVisible}
-          closeModal={() => setModalVisible(false)}
-        />
-      )}
-    </>
-  );
-};

src/containers/Editor/LiveEditor/Tools.tsx

@@ -0,0 +1,563 @@
+import React from "react";
+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;
+  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: 36;
+
+  @media only screen and (max-width: 320px) {
+    display: none;
+  }
+`;
+
+const StyledToolElement = styled.button<{ $hide?: boolean }>`
+  display: ${({ $hide }) => ($hide ? "none" : "grid")};
+  place-content: center;
+  font-size: 12px;
+  background: none;
+  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  padding: 6px;
+  border-radius: 3px;
+
+  &:hover {
+    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
+  }
+
+  &:hover {
+    color: ${({ theme }) => theme.INTERACTIVE_HOVER};
+    opacity: 1;
+    box-shadow: none;
+  }
+`;
+
+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 centerView = useGraph(state => state.centerView);
+  const zoomIn = useGraph(state => state.zoomIn);
+  const zoomOut = useGraph(state => state.zoomOut);
+  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>
+      {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/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,41 +1,49 @@
 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 useConfig from "src/hooks/store/useConfig";
-import styled from "styled-components";
+import useGraph from "src/store/useGraph";
 
 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,
 });
 
 const Panes: React.FC = () => {
-  const hideEditor = useConfig(state => state.hideEditor);
-  const setConfig = useConfig(state => state.setConfig);
-  const isMobile = window.innerWidth <= 768;
+  const fullscreen = useGraph(state => state.fullscreen);
+  const toggleFullscreen = useGraph(state => state.toggleFullscreen);
+  const isMobile = React.useMemo(() => window.innerWidth <= 768, []);
 
   React.useEffect(() => {
-    if (isMobile) setConfig("hideEditor", true);
-  }, [isMobile, setConfig]);
+    if (isMobile) toggleFullscreen(true);
+  }, [isMobile, toggleFullscreen]);
 
   return (
     <StyledEditor proportionalLayout={false} vertical={isMobile}>
       <Allotment.Pane
-        preferredSize={isMobile ? "100%" : 400}
-        minSize={hideEditor ? 0 : 300}
+        preferredSize={isMobile ? "100%" : 450}
+        minSize={fullscreen ? 0 : 300}
         maxSize={isMobile ? Infinity : 800}
-        visible={!hideEditor}
+        visible={!fullscreen}
       >
         <JsonEditor />
       </Allotment.Pane>
-      <Allotment.Pane minSize={0} maxSize={isMobile && !hideEditor ? 0 : Infinity}>
+      <Allotment.Pane minSize={0} maxSize={isMobile && !fullscreen ? 0 : Infinity}>
         <LiveEditor />
       </Allotment.Pane>
     </StyledEditor>

src/containers/Editor/Tools.tsx

@@ -1,95 +0,0 @@
-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 { TbSettings } from "react-icons/tb";
-import { SearchInput } from "src/components/SearchInput";
-import { SettingsModal } from "src/containers/Modals/SettingsModal";
-import useConfig from "src/hooks/store/useConfig";
-import styled from "styled-components";
-import { DownloadModal } from "../Modals/DownloadModal";
-
-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};
-  color: ${({ theme }) => theme.SILVER};
-  box-shadow: 0 1px 0px ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  z-index: 1;
-
-  @media only screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-const StyledToolElement = styled.button`
-  display: grid;
-  place-content: center;
-  font-size: 20px;
-  background: none;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-  padding: 6px;
-  border-radius: 3px;
-
-  &:hover {
-    background-image: linear-gradient(rgba(0, 0, 0, 0.1) 0 0);
-  }
-
-  &:hover {
-    color: ${({ theme }) => theme.INTERACTIVE_HOVER};
-    opacity: 1;
-    box-shadow: none;
-  }
-`;
-
-export const Tools: React.FC = () => {
-  const [settingsVisible, setSettingsVisible] = React.useState(false);
-  const [isDownloadVisible, setDownloadVisible] = React.useState(false);
-
-  const hideEditor = useConfig(state => state.hideEditor);
-  const setConfig = useConfig(state => state.setConfig);
-
-  const zoomIn = useConfig(state => state.zoomIn);
-  const zoomOut = useConfig(state => state.zoomOut);
-  const centerView = useConfig(state => state.centerView);
-  const toggleEditor = () => setConfig("hideEditor", !hideEditor);
-
-  return (
-    <>
-      <StyledTools>
-        <StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
-          <AiOutlineFullscreen />
-        </StyledToolElement>
-        <StyledToolElement
-          aria-label="settings"
-          onClick={() => setSettingsVisible(true)}
-        >
-          <TbSettings />
-        </StyledToolElement>
-        <SearchInput />
-        <StyledToolElement
-          aria-label="save"
-          onClick={() => setDownloadVisible(true)}
-        >
-          <FiDownload />
-        </StyledToolElement>
-        <StyledToolElement aria-label="center canvas" onClick={centerView}>
-          <MdCenterFocusWeak />
-        </StyledToolElement>
-        <StyledToolElement aria-label="zoom out" onClick={zoomOut}>
-          <AiOutlineMinus />
-        </StyledToolElement>
-        <StyledToolElement aria-label="zoom in" onClick={zoomIn}>
-          <AiOutlinePlus />
-        </StyledToolElement>
-      </StyledTools>
-      <DownloadModal visible={isDownloadVisible} setVisible={setDownloadVisible} />
-      <SettingsModal visible={settingsVisible} setVisible={setSettingsVisible} />
-    </>
-  );
-};

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,275 +0,0 @@
-import React from "react";
-import Head from "next/head";
-import Link from "next/link";
-import { FaGithub, FaHeart, FaLinkedin, FaTwitter } from "react-icons/fa";
-import {
-  HiCursorClick,
-  HiLightningBolt,
-  HiOutlineDownload,
-  HiOutlineSearchCircle,
-} from "react-icons/hi";
-import { SiVisualstudiocode } from "react-icons/si";
-import { TwitterTweetEmbed } from "react-twitter-embed";
-import { CarbonAds } from "src/components/CarbonAds";
-import { Producthunt } from "src/components/Producthunt";
-import { Sponsors } from "src/components/Sponsors";
-import { GoalsModal } from "src/containers/Modals/GoalsModal";
-import pkg from "../../../package.json";
-import * as Styles from "./styles";
-
-const Navbar = () => (
-  <Styles.StyledNavbar>
-    <Styles.StyledNavLink href="/editor">Editor</Styles.StyledNavLink>
-    <Link href="#features" passHref>
-      <Styles.StyledNavLink>Features</Styles.StyledNavLink>
-    </Link>
-    <Link href="#sponsor" passHref>
-      <Styles.StyledNavLink>Sponsor</Styles.StyledNavLink>
-    </Link>
-    <Styles.StyledNavLink
-      href="https://github.com/AykutSarac/jsoncrack.com"
-      target="_blank"
-      rel="external"
-    >
-      GitHub
-    </Styles.StyledNavLink>
-  </Styles.StyledNavbar>
-);
-
-const HeroSection = () => {
-  const [isModalVisible, setModalVisible] = React.useState(false);
-
-  return (
-    <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>
-      <Styles.StyledMinorTitle>Paste - Import - Fetch!</Styles.StyledMinorTitle>
-
-      <Styles.StyledButton rel="prefetch" href="/editor" target="_blank" link>
-        GO TO EDITOR
-      </Styles.StyledButton>
-
-      <Styles.StyledButtonWrapper>
-        <Styles.StyledSponsorButton onClick={() => setModalVisible(true)}>
-          Help JSON Crack&apos;s Goals
-          <FaHeart />
-        </Styles.StyledSponsorButton>
-        <Link
-          href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
-          passHref
-        >
-          <Styles.StyledSponsorButton isBlue>
-            GET IT ON VS CODE
-            <SiVisualstudiocode />
-          </Styles.StyledSponsorButton>
-        </Link>
-        <GoalsModal visible={isModalVisible} setVisible={setModalVisible} />
-      </Styles.StyledButtonWrapper>
-    </Styles.StyledHeroSection>
-  );
-};
-
-const PreviewSection = () => (
-  <Styles.StyledPreviewSection>
-    <Styles.StyledImageWrapper>
-      <Styles.StyledImage
-        width="1200"
-        height="863"
-        src="/assets/jsoncrack-screenshot.webp"
-        alt="preview"
-      />
-    </Styles.StyledImageWrapper>
-  </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>
-        Don&apos;t even bother to update your schema to view your JSON into graphs;
-        directly paste, import or fetch! JSON Crack helps you to visualize without
-        any additional values and save your time.
-      </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>
-    <TwitterTweetEmbed
-      tweetId="1519363257794015233"
-      options={{
-        width: "600",
-        align: "center",
-      }}
-    />
-    <Styles.StyledSectionArea>
-      <Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
-      <Styles.StyledMinorTitle>
-        Join the Open Source Community by suggesting new ideas, support by
-        contributing; implementing new features, fixing bugs and doing changes minor
-        to major!
-      </Styles.StyledMinorTitle>
-      <Styles.StyledButton
-        href="https://github.com/AykutSarac/jsoncrack.com"
-        status="SECONDARY"
-        link
-      >
-        STAR ON GITHUB
-      </Styles.StyledButton>
-    </Styles.StyledSectionArea>
-  </Styles.StyledSection>
-);
-
-const EmbedSection = () => (
-  <Styles.StyledSection id="embed">
-    <Styles.StyledSectionArea>
-      <Styles.StyledSubTitle>Embed Into Your Website</Styles.StyledSubTitle>
-      <Styles.StyledMinorTitle>
-        Easily embed the JSON Crack graph into your website to showcase your
-        visitors, blog readers or anybody else!
-      </Styles.StyledMinorTitle>
-    </Styles.StyledSectionArea>
-    <div>
-      <Styles.StyledIframge src="https://jsoncrack.com/widget"></Styles.StyledIframge>
-    </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>
-    <Styles.StyledButton
-      href="https://github.com/sponsors/AykutSarac"
-      rel="external"
-      status="SUCCESS"
-      link
-    >
-      Become A Sponsor!
-    </Styles.StyledButton>
-    <Sponsors />
-  </Styles.StyledSponsorSection>
-);
-
-const Footer = () => (
-  <Styles.StyledFooter>
-    <Styles.StyledFooterText>
-      © 2022 JSON Crack - {pkg.version}
-    </Styles.StyledFooterText>
-    <Styles.StyledIconLinks>
-      <Styles.StyledNavLink
-        href="https://github.com/AykutSarac/jsoncrack.com"
-        rel="external"
-        target="_blank"
-        aria-label="github"
-      >
-        <FaGithub size={26} />
-      </Styles.StyledNavLink>
-
-      <Styles.StyledNavLink
-        href="https://www.linkedin.com/in/aykutsarac/"
-        rel="me"
-        target="_blank"
-        aria-label="linkedin"
-      >
-        <FaLinkedin size={26} />
-      </Styles.StyledNavLink>
-
-      <Styles.StyledNavLink
-        href="https://twitter.com/jsoncrack"
-        rel="me"
-        target="_blank"
-        aria-label="twitter"
-      >
-        <FaTwitter size={26} />
-      </Styles.StyledNavLink>
-    </Styles.StyledIconLinks>
-  </Styles.StyledFooter>
-);
-
-const Home: React.FC = () => {
-  return (
-    <Styles.StyledHome>
-      <Head>
-        <title>JSON Crack - Crack your data into pieces</title>
-      </Head>
-      <Navbar />
-      <HeroSection />
-      <PreviewSection />
-      <FeaturesSection />
-      <GitHubSection />
-      <EmbedSection />
-      <SupportSection />
-      <SponsorSection />
-      <Footer />
-    </Styles.StyledHome>
-  );
-};
-
-export default Home;

src/containers/Home/styles.tsx

@@ -1,368 +0,0 @@
-import { Button } from "src/components/Button";
-import styled from "styled-components";
-
-export const StyledButtonWrapper = styled.div`
-  display: flex;
-  gap: 18px;
-`;
-
-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;
-  font-family: "Roboto", sans-serif;
-
-  * {
-    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%;
-`;
-
-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 StyledTitle = styled.h1`
-  font-size: 5rem;
-  font-weight: 900;
-  margin: 0;
-
-  @media only screen and (max-width: 768px) {
-    font-size: 3rem;
-  }
-`;
-
-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.75rem;
-  }
-`;
-
-export const StyledMinorTitle = styled.p`
-  color: #b4b4b4;
-  text-align: center;
-  font-size: 1.25rem;
-  margin: 0;
-  letter-spacing: 1.2px;
-
-  @media only screen and (max-width: 992px) {
-    font-size: 1rem;
-  }
-`;
-
-export const StyledButton = styled(Button)`
-  background: ${({ status }) => !status && "#a13cc2"};
-  padding: 12px 24px;
-
-  div {
-    font-family: "Roboto", sans-serif;
-    font-weight: 700;
-    font-size: 16px;
-  }
-`;
-
-export const StyledSponsorButton = styled(Button)<{ isBlue?: boolean }>`
-  background: transparent;
-  border: 1px solid ${({ isBlue }) => (isBlue ? "#1F9CF0" : "#ee3d48")};
-  transition: all 200ms;
-  padding: 12px 24px;
-
-  div {
-    font-family: "Roboto", sans-serif;
-    font-weight: 700;
-    font-size: 16px;
-  }
-
-  svg {
-    color: ${({ isBlue }) => (isBlue ? "#1F9CF0" : "#ee3d48")};
-  }
-
-  &:hover {
-    background: ${({ isBlue }) => (isBlue ? "#1F9CF0" : "#ee3d48")};
-
-    svg {
-      color: white;
-    }
-  }
-
-  @media only screen and (max-width: 768px) {
-    display: ${({ isBlue }) => isBlue && "none"};
-  }
-`;
-
-export const StyledFeaturesSection = 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 StyledSectionCard = styled.div`
-  text-align: center;
-  flex: 1;
-`;
-
-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 StyledIframge = styled.iframe`
-  width: 100%;
-  height: 100%;
-  min-height: 200px;
-  border: 2px solid ${({ theme }) => theme.INTERACTIVE_NORMAL};
-  border-radius: 6px;
-
-  @media only screen and (min-width: 768px) {
-    min-height: 384px;
-  }
-`;
-
-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: 768px) {
-    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,
-    p {
-      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: 80%;
-  }
-`;
-
-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;
-  max-width: 85%;
-  margin: 0 auto;
-  padding: 0 3%;
-
-  @media only screen and (max-width: 768px) {
-    display: none;
-    max-width: 80%;
-  }
-`;
-
-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 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`
-  color: #b4b4b4;
-`;
-
-export const StyledIconLinks = styled.div`
-  display: flex;
-  gap: 20px;
-
-  ${StyledNavLink} {
-    color: unset;
-  }
-`;
-
-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/Modals/AccountModal/index.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+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";
+
+export const AccountModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  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);
+
+  return (
+    <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 && !premiumCancelled ? (
+          <Button
+            variant="light"
+            color="red"
+            onClick={() => {
+              setVisible("cancelPremium")(true);
+              onClose();
+            }}
+            disabled={isOrg && !isOrgAdmin}
+          >
+            Cancel Subscription
+          </Button>
+        ) : (
+          <Button
+            variant="gradient"
+            gradient={{ from: "teal", to: "lime", deg: 105 }}
+            leftIcon={<IoRocketSharp />}
+            onClick={() => setVisible("premium")(true)}
+          >
+            UPGRADE TO PREMIUM!
+          </Button>
+        )}
+        <Button
+          color="red"
+          onClick={() => {
+            logout();
+            onClose();
+          }}
+        >
+          Log Out
+        </Button>
+      </Group>
+    </Modal>
+  );
+};

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,27 +1,34 @@
 import React from "react";
-import toast from "react-hot-toast";
-import { Button } from "src/components/Button";
-import { Modal, ModalProps } from "src/components/Modal";
-import useConfig from "src/hooks/store/useConfig";
+import { useRouter } from "next/router";
+import { Modal, Group, Button, Text, Divider, ModalProps } from "@mantine/core";
+import { documentSvc } from "src/services/document.service";
+import useJson from "src/store/useJson";
 
-export const ClearModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
-  const setJson = useConfig(state => state.setJson);
+export const ClearModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const setJson = useJson(state => state.setJson);
+  const { query, replace } = useRouter();
 
   const handleClear = () => {
     setJson("{}");
-    toast.success(`Cleared JSON and removed from memory.`);
-    setVisible(false);
+    onClose();
+
+    if (typeof query.json === "string") {
+      documentSvc.delete(query.json);
+      replace("/editor");
+    }
   };
 
   return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Clear JSON</Modal.Header>
-      <Modal.Content>Are you sure you want to clear JSON?</Modal.Content>
-      <Modal.Controls setVisible={setVisible}>
-        <Button status="DANGER" onClick={handleClear}>
+    <Modal title="Delete JSON" opened={opened} onClose={onClose} centered>
+      <Group py="sm">
+        <Text>Are you sure you want to delete JSON?</Text>
+      </Group>
+      <Divider py="xs" />
+      <Group position="right">
+        <Button color="red" onClick={handleClear}>
           Confirm
         </Button>
-      </Modal.Controls>
+      </Group>
     </Modal>
   );
 };

src/containers/Modals/CloudModal/index.tsx

@@ -0,0 +1,262 @@
+import React from "react";
+import Link from "next/link";
+import { useRouter } from "next/router";
+import {
+  Modal,
+  Text,
+  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 { AiOutlineLink } from "react-icons/ai";
+import { FaTrash } from "react-icons/fa";
+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";
+
+dayjs.extend(relativeTime);
+
+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(documentSvc.update(file.id, { name }), {
+        loading: "Updating document...",
+        error: "Error occurred while updating document!",
+        success: `Renamed document to ${name}`,
+      })
+      .then(() => {
+        refetch();
+        setName("");
+      });
+
+    onClose();
+  };
+
+  return (
+    <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 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,
+  });
+
+  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" />
+      <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

@@ -1,36 +1,40 @@
 import React from "react";
-import { toBlob, toPng } from "html-to-image";
-import { TwitterPicker } from "react-color";
-import { TwitterPickerStylesProps } from "react-color/lib/components/twitter/Twitter";
+import {
+  ColorPicker,
+  TextInput,
+  SegmentedControl,
+  Group,
+  Modal,
+  Button,
+  Divider,
+  Grid,
+  ModalProps,
+  ColorInput,
+  Stack,
+} from "@mantine/core";
+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";
-import { Button } from "src/components/Button";
-import { Input } from "src/components/Input";
-import { Modal, ModalProps } from "src/components/Modal";
-import useConfig from "src/hooks/store/useConfig";
-import styled from "styled-components";
 
-const ColorPickerStyles: Partial<TwitterPickerStylesProps> = {
-  card: {
-    background: "transparent",
-    boxShadow: "none",
-  },
-  body: {
-    padding: 0,
-  },
-  input: {
-    background: "rgba(0, 0, 0, 0.2)",
-    boxShadow: "none",
-    textTransform: "none",
-    whiteSpace: "nowrap",
-    textOverflow: "ellipsis",
-  },
-  hash: {
-    background: "rgba(180, 180, 180, 0.3)",
-  },
+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 defaultColors = [
+const swatches = [
   "#B80000",
   "#DB3E00",
   "#FCCB00",
@@ -52,6 +56,7 @@ const defaultColors = [
 
 function downloadURI(uri: string, name: string) {
   var link = document.createElement("a");
+
   link.download = name;
   link.href = uri;
   document.body.appendChild(link);
@@ -59,51 +64,17 @@ function downloadURI(uri: string, name: string) {
   document.body.removeChild(link);
 }
 
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 16px;
-  padding: 12px 0;
-  border-top: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  text-transform: uppercase;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-
-  &:first-of-type {
-    padding-top: 0;
-    border: none;
-  }
-`;
-
-const StyledColorWrapper = styled.div`
-  display: flex;
-  justify-content: space-between;
-`;
-
-const StyledColorIndicator = styled.div<{ color: string }>`
-  flex: 1;
-  width: 100%;
-  height: auto;
-  border-radius: 6px;
-  background: ${({ color }) => color};
-  border: 1px solid;
-  border-color: rgba(0, 0, 0, 0.1);
-`;
-
-export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
-  const setConfig = useConfig(state => state.setConfig);
+export const DownloadModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const [extension, setExtension] = React.useState(Extensions.PNG);
   const [fileDetails, setFileDetails] = React.useState({
     filename: "jsoncrack.com",
-    backgroundColor: "transparent",
+    backgroundColor: "#FFFFFF",
     quality: 1,
   });
 
   const clipboardImage = async () => {
     try {
       toast.loading("Copying to clipboard...", { id: "toastClipboard" });
-      setConfig("performanceMode", false);
 
       const imageElement = document.querySelector("svg[id*='ref']") as HTMLElement;
 
@@ -114,7 +85,7 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
 
       if (!blob) return;
 
-      navigator.clipboard.write([
+      navigator.clipboard?.write([
         new ClipboardItem({
           [blob.type]: blob,
         }),
@@ -125,30 +96,29 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
       toast.error("Failed to copy to clipboard");
     } finally {
       toast.dismiss("toastClipboard");
-      setVisible(false);
-      setConfig("performanceMode", true);
+      ReactGA.event({ action: "click_clipboard_image", category: "User" });
+      onClose();
     }
   };
 
   const exportAsImage = async () => {
     try {
       toast.loading("Downloading...", { id: "toastDownload" });
-      setConfig("performanceMode", false);
 
       const imageElement = document.querySelector("svg[id*='ref']") as HTMLElement;
 
-      const dataURI = await toPng(imageElement, {
+      const dataURI = await getDownloadFormat(extension)(imageElement, {
         quality: fileDetails.quality,
         backgroundColor: fileDetails.backgroundColor,
       });
 
-      downloadURI(dataURI, `${fileDetails.filename}.png`);
+      downloadURI(dataURI, `${fileDetails.filename}.${extension}`);
     } catch (error) {
       toast.error("Failed to download image!");
     } finally {
       toast.dismiss("toastDownload");
-      setVisible(false);
-      setConfig("performanceMode", true);
+      ReactGA.event({ action: "click_download_image", category: "User" });
+      onClose();
     }
   };
 
@@ -156,44 +126,53 @@ export const DownloadModal: React.FC<ModalProps> = ({ visible, setVisible }) =>
     setFileDetails({ ...fileDetails, [key]: value });
 
   return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Download Image</Modal.Header>
-      <Modal.Content>
-        <StyledContainer>
-          File Name
-          <StyledColorWrapper>
-            <Input
-              placeholder="File Name"
-              value={fileDetails.filename}
-              onChange={e => updateDetails("filename", e.target.value)}
-            />
-          </StyledColorWrapper>
-        </StyledContainer>
-        <StyledContainer>
-          Background Color
-          <StyledColorWrapper>
-            <TwitterPicker
-              triangle="hide"
-              colors={defaultColors}
-              color={fileDetails.backgroundColor}
-              onChange={color => updateDetails("backgroundColor", color.hex)}
-              styles={{
-                default: ColorPickerStyles,
-              }}
-            />
-            <StyledColorIndicator color={fileDetails.backgroundColor} />
-          </StyledColorWrapper>
-        </StyledContainer>
-      </Modal.Content>
-      <Modal.Controls setVisible={setVisible}>
-        <Button status="SECONDARY" onClick={clipboardImage}>
-          <FiCopy size={18} /> Clipboard
+    <Modal opened={opened} onClose={onClose} title="Download Image" centered>
+      <Grid py="sm" align="end" grow>
+        <Grid.Col span={8}>
+          <TextInput
+            label="File Name"
+            value={fileDetails.filename}
+            onChange={e => updateDetails("filename", e.target.value)}
+          />
+        </Grid.Col>
+        <Grid.Col span={4}>
+          <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 },
+            ]}
+          />
+        </Grid.Col>
+      </Grid>
+      <Stack py="sm">
+        <ColorInput
+          label="Background Color"
+          value={fileDetails.backgroundColor}
+          onChange={color => updateDetails("backgroundColor", color)}
+          withEyeDropper={false}
+        />
+        <ColorPicker
+          format="rgba"
+          value={fileDetails.backgroundColor}
+          onChange={color => updateDetails("backgroundColor", color)}
+          swatches={swatches}
+          withPicker={false}
+          fullWidth
+        />
+      </Stack>
+      <Divider py="xs" />
+      <Group position="right">
+        <Button leftIcon={<FiCopy />} onClick={clipboardImage}>
+          Clipboard
         </Button>
-        <Button status="SUCCESS" onClick={exportAsImage}>
-          <FiDownload size={18} />
+        <Button color="green" leftIcon={<FiDownload />} onClick={exportAsImage}>
           Download
         </Button>
-      </Modal.Controls>
+      </Group>
     </Modal>
   );
 };

src/containers/Modals/GoalsModal/index.tsx

@@ -1,76 +0,0 @@
-import React from "react";
-import { useRouter } from "next/router";
-import { FaHeart, FaTwitter } from "react-icons/fa";
-import { Button } from "src/components/Button";
-import { Modal } from "src/components/Modal";
-import styled from "styled-components";
-
-const StyledTitle = styled.p`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.TEXT_POSITIVE};
-  flex: 1;
-  font-weight: 700;
-  font-family: "Catamaran", sans-serif;
-  margin-top: 0;
-
-  &::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 ButtonsWrapper = styled.div`
-  display: flex;
-  padding: 40px 0 0;
-  gap: 20px;
-`;
-
-export const GoalsModal = ({ visible, setVisible }) => {
-  const { push } = useRouter();
-
-  return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Help JSON Crack&apos;s Goals</Modal.Header>
-      <Modal.Content>
-        <StyledTitle>OUR GOAL</StyledTitle>
-        <b>JSON Crack&apos;s Goal</b> is to keep the service completely free and open
-        source for everyone! For the contiunity of our service and keep the new
-        updates coming we need your support to make that possible ❤️
-        <ButtonsWrapper>
-          <Button
-            href="https://github.com/sponsors/AykutSarac"
-            target="_blank"
-            rel="me"
-            status="DANGER"
-            block
-            link
-          >
-            <FaHeart />
-            Sponsor
-          </Button>
-          <Button
-            href={`https://twitter.com/intent/tweet?button=&url=${encodeURIComponent(
-              "https://jsoncrack.com"
-            )}&text=Looking+to+understand+or+explore+some+JSON?+Just+paste+or+upload+to+visualize+it+as+a+graph+with+JSON+Crack+😍&button=`}
-            rel="noreferrer"
-            status="SECONDARY"
-            block
-            link
-          >
-            <FaTwitter />
-            Share on Twitter
-          </Button>
-        </ButtonsWrapper>
-      </Modal.Content>
-      <Modal.Controls setVisible={setVisible} />
-    </Modal>
-  );
-};

src/containers/Modals/ImportModal/index.tsx

@@ -1,18 +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 { Button } from "src/components/Button";
-import { Input } from "src/components/Input";
-import { Modal, ModalProps } from "src/components/Modal";
-import useConfig from "src/hooks/store/useConfig";
-import styled from "styled-components";
-
-const StyledModalContent = styled(Modal.Content)`
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-`;
+import useFile from "src/store/useFile";
 
 const StyledUploadWrapper = styled.label`
   display: flex;
@@ -22,7 +13,6 @@ const StyledUploadWrapper = styled.label`
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
   border: 2px dashed ${({ theme }) => theme.BACKGROUND_TERTIARY};
   border-radius: 5px;
-  width: 100%;
   min-height: 200px;
   padding: 16px;
   cursor: pointer;
@@ -33,6 +23,7 @@ const StyledUploadWrapper = styled.label`
 `;
 
 const StyledFileName = styled.span`
+  padding-top: 14px;
   color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
 `;
 
@@ -41,8 +32,8 @@ const StyledUploadMessage = styled.h3`
   margin-bottom: 0;
 `;
 
-export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
-  const setJson = useConfig(state => state.setJson);
+export const ImportModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const setContents = useFile(state => state.setContents);
   const [url, setURL] = React.useState("");
   const [jsonFile, setJsonFile] = React.useState<File | null>(null);
 
@@ -50,6 +41,18 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
     if (e.target.files) setJsonFile(e.target.files?.item(0));
   };
 
+  const handleFileDrag = (e: React.DragEvent<HTMLLabelElement>) => {
+    e.preventDefault();
+
+    if (e.type === "drop" && e.dataTransfer.files.length) {
+      if (e.dataTransfer.files[0].type === "application/json") {
+        setJsonFile(e.dataTransfer.files[0]);
+      } else {
+        toast.error("Please upload JSON file!");
+      }
+    }
+  };
+
   const handleImportFile = () => {
     if (url) {
       setJsonFile(null);
@@ -58,8 +61,8 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
       return fetch(url)
         .then(res => res.json())
         .then(json => {
-          setJson(JSON.stringify(json));
-          setVisible(false);
+          setContents({ contents: JSON.stringify(json, null, 2) });
+          onClose();
         })
         .catch(() => toast.error("Failed to fetch JSON!"))
         .finally(() => toast.dismiss("toastFetch"));
@@ -70,23 +73,23 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
 
       reader.readAsText(jsonFile, "UTF-8");
       reader.onload = function (data) {
-        setJson(data.target?.result as string);
-        setVisible(false);
+        if (typeof data.target?.result === "string") setContents({ contents: data.target?.result });
+        onClose();
       };
     }
   };
 
   return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Import JSON</Modal.Header>
-      <StyledModalContent>
-        <Input
+    <Modal title="Import JSON" opened={opened} onClose={onClose} centered>
+      <Stack py="sm">
+        <TextInput
           value={url}
           onChange={e => setURL(e.target.value)}
           type="url"
           placeholder="URL of JSON to fetch"
+          data-autofocus
         />
-        <StyledUploadWrapper>
+        <StyledUploadWrapper onDrop={handleFileDrag} onDragOver={handleFileDrag}>
           <input
             key={jsonFile?.name}
             onChange={handleFileChange}
@@ -97,16 +100,13 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
           <StyledUploadMessage>Click Here to Upload JSON</StyledUploadMessage>
           <StyledFileName>{jsonFile?.name ?? "None"}</StyledFileName>
         </StyledUploadWrapper>
-      </StyledModalContent>
-      <Modal.Controls setVisible={setVisible}>
-        <Button
-          status="SECONDARY"
-          onClick={handleImportFile}
-          disabled={!(jsonFile || url)}
-        >
+      </Stack>
+      <Divider py="xs" />
+      <Group position="right">
+        <Button onClick={handleImportFile} disabled={!(jsonFile || url)}>
           Import
         </Button>
-      </Modal.Controls>
+      </Group>
     </Modal>
   );
 };

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/LoginModal/index.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { Modal, Stack, Button, Text, Title, ModalProps } from "@mantine/core";
+
+export const LoginModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  return (
+    <Modal title="Sign In" opened={opened} onClose={onClose} centered>
+      <Stack py="sm">
+        <Title order={2}>Welcome Back!</Title>
+        <Text>Login to unlock full potential of JSON Crack!</Text>
+        <Button component="a" href="/sign-in" size="md" fullWidth>
+          Sign In
+        </Button>
+      </Stack>
+    </Modal>
+  );
+};

src/containers/Modals/NodeModal/index.tsx

@@ -1,62 +1,133 @@
 import React from "react";
-import toast from "react-hot-toast";
-import { FiCopy } from "react-icons/fi";
-import { Button } from "src/components/Button";
-import { Modal } from "src/components/Modal";
-import styled from "styled-components";
+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 useModal from "src/store/useModal";
+import useUser from "src/store/useUser";
 
-interface NodeModalProps {
-  selectedNode: object;
-  visible: boolean;
-  closeModal: () => void;
-}
-
-const StyledTextarea = styled.textarea`
-  resize: none;
-  width: 100%;
-  min-height: 200px;
-
-  padding: 10px;
-  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-  outline: none;
-  border-radius: 4px;
-  line-height: 20px;
-  border: none;
-`;
-
-export const NodeModal = ({ selectedNode, visible, closeModal }: NodeModalProps) => {
-  const nodeData = Array.isArray(selectedNode)
-    ? Object.fromEntries(selectedNode)
-    : selectedNode;
-
-  const handleClipboard = () => {
-    toast.success("Content copied to clipboard!");
-    navigator.clipboard.writeText(JSON.stringify(nodeData));
-    closeModal();
+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 (
-    <Modal visible={visible} setVisible={closeModal}>
-      <Modal.Header>Node Content</Modal.Header>
-      <Modal.Content>
-        <StyledTextarea
-          defaultValue={JSON.stringify(
-            nodeData,
-            (_, v) => {
-              if (typeof v === "string") return v.replaceAll('"', "");
-              return v;
-            },
-            2
+    <ScrollArea>
+      <Prism
+        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>
+    </ScrollArea>
+  );
+};
+
+export const NodeModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  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={onModalClose} centered>
+      <Stack py="sm" spacing="sm">
+        <Stack spacing="xs">
+          <Text fz="sm" fw={700}>
+            Content
+          </Text>
+          {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>
           )}
-          readOnly
-        />
-      </Modal.Content>
-      <Modal.Controls setVisible={closeModal}>
-        <Button status="SECONDARY" onClick={handleClipboard}>
-          <FiCopy size={18} /> Clipboard
-        </Button>
-      </Modal.Controls>
+        </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,59 +0,0 @@
-import React from "react";
-import { Modal } from "src/components/Modal";
-import Toggle from "src/components/Toggle";
-import useStored from "src/hooks/store/useStored";
-import styled from "styled-components";
-import shallow from "zustand/shallow";
-
-const StyledToggle = styled(Toggle)`
-  flex-flow: row-reverse;
-  background: black;
-`;
-
-const StyledModalWrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 20px;
-`;
-
-export const SettingsModal: React.FC<{
-  visible: boolean;
-  setVisible: React.Dispatch<React.SetStateAction<boolean>>;
-}> = ({ visible, setVisible }) => {
-  const lightmode = useStored(state => state.lightmode);
-  const setLightTheme = useStored(state => state.setLightTheme);
-  const [toggleHideCollapse, hideCollapse] = useStored(
-    state => [state.toggleHideCollapse, state.hideCollapse],
-    shallow
-  );
-  const [toggleHideChildrenCount, hideChildrenCount] = useStored(
-    state => [state.toggleHideChildrenCount, state.hideChildrenCount],
-    shallow
-  );
-
-  return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Settings</Modal.Header>
-      <Modal.Content>
-        <StyledModalWrapper>
-          <StyledToggle onChange={toggleHideCollapse} checked={hideCollapse}>
-            Hide Collapse/Expand Button
-          </StyledToggle>
-          <StyledToggle
-            onChange={toggleHideChildrenCount}
-            checked={hideChildrenCount}
-          >
-            Hide Children Count
-          </StyledToggle>
-          <StyledToggle
-            onChange={() => setLightTheme(!lightmode)}
-            checked={lightmode}
-          >
-            Enable Light Theme
-          </StyledToggle>
-        </StyledModalWrapper>
-      </Modal.Content>
-      <Modal.Controls setVisible={setVisible} />
-    </Modal>
-  );
-};