chore: version upgrade v3.2.0

feat: add go struct generator

.dockerignore

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

.env.development

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

.env.production

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

.eslintrc.json

@@ -1,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

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

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

default.conf

@@ -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,15 +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 = {
+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,62 +1,80 @@
 {
   "name": "json-crack",
   "private": true,
-  "version": "v2.5.0",
+  "version": "v3.2.0",
+  "license": "GPL-3.0",
   "author": "https://github.com/AykutSarac",
   "homepage": "https://jsoncrack.com",
   "scripts": {
     "dev": "next dev",
-    "build": "next build && next export",
+    "build": "next build",
     "start": "next start",
-    "lint": "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",
-    "@react-oauth/google": "^0.4.0",
-    "@sentry/nextjs": "^7.16.0",
-    "@tanstack/react-query": "^4.19.1",
-    "allotment": "^1.17.0",
-    "altogic": "^2.3.8",
-    "axios": "^1.1.3",
-    "dayjs": "^1.11.6",
-    "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",
+    "jsonwebtoken": "^9.0.2",
+    "jxon": "^2.0.0-beta.5",
     "lodash.debounce": "^4.0.8",
-    "lz-string": "^1.4.4",
-    "next": "^12.3.1",
-    "next-transpile-modules": "^9.1.0",
+    "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.6.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-syntax-highlighter": "^15.5.0",
-    "react-zoom-pan-pinch": "^2.1.3",
-    "reaflow": "^5.0.7",
-    "styled-components": "^5.3.6",
-    "zustand": "^4.1.3"
+    "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/lodash.debounce": "^4.0.7",
-    "@types/lz-string": "^1.3.34",
-    "@types/node": "^18.7.21",
-    "@types/react": "18.0.21",
-    "@types/react-color": "^3.0.6",
-    "@types/react-syntax-highlighter": "^15.5.5",
-    "@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/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/api/altogic.ts

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

src/components/AdTest/index.tsx

@@ -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,100 +0,0 @@
-import React from "react";
-import styled, { DefaultTheme } from "styled-components";
-
-enum ButtonType {
-  PRIMARY = "PRIMARY",
-  SECONDARY = "BLURPLE",
-  TERTIARY = "PURPLE",
-  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;
-  link: boolean;
-}>`
-  display: inline-flex;
-  align-items: center;
-  background: ${({ status, theme }) => getButtonStatus(status, theme)};
-  color: #ffffff;
-  padding: ${({ link }) => (link ? "2px 16px" : "8px 16px")};
-  min-width: 70px;
-  min-height: 32px;
-  border-radius: 3px;
-  font-family: "Mona Sans";
-  font-size: 14px;
-  font-weight: 500;
-  width: ${({ block }) => (block ? "-webkit-fill-available" : "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;
-  font-weight: 600;
-`;
-
-export const Button: React.FC<ButtonProps & ConditionalProps> = ({
-  children,
-  status,
-  block = false,
-  link = false,
-  ...props
-}) => {
-  return (
-    <StyledButton
-      type="button"
-      as={link ? "a" : "button"}
-      status={status ?? "PRIMARY"}
-      block={block}
-      link={link}
-      {...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,36 +0,0 @@
-import React from "react";
-// import { useInViewport } from "react-in-viewport";
-import { CustomNodeProps } from "src/components/CustomNode";
-import useGraph from "src/store/useGraph";
-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 = useGraph(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,113 +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 useGraph from "src/store/useGraph";
-import useStored from "src/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 StyledImageWrapper = styled.div`
-  padding: 5px;
-`;
-
-const StyledImage = styled.img`
-  border-radius: 2px;
-  object-fit: contain;
-  background: ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
-`;
-
-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 childrenCount = useStored(state => state.childrenCount);
-  const imagePreview = useStored(state => state.imagePreview);
-  const expandNodes = useGraph(state => state.expandNodes);
-  const collapseNodes = useGraph(state => state.collapseNodes);
-  const isExpanded = useGraph(state => state.collapsedParents.includes(id));
-  const performanceMode = useGraph(state => state.performanceMode);
-  const isImage =
-    !Array.isArray(text) && /(https?:\/\/.*\.(?:png|jpg|gif))/i.test(text) && imagePreview;
-  // 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}
-      hasCollapse={data.parent && hasCollapse}
-      ref={ref}
-    >
-      {isImage ? (
-        <StyledImageWrapper>
-          <StyledImage src={text} width="70" height="70" />
-        </StyledImageWrapper>
-      ) : (
-        <StyledTextNodeWrapper hasCollapse={data.parent && hideCollapse}>
-          {(!performanceMode || inViewport) && (
-            <Styled.StyledKey
-              data-x={x}
-              data-y={y}
-              data-key={JSON.stringify(text)}
-              parent={data.parent}
-            >
-              <Styled.StyledLinkItUrl>
-                {JSON.stringify(text).replaceAll('"', "")}
-              </Styled.StyledLinkItUrl>
-            </Styled.StyledKey>
-          )}
-          {data.parent && data.childrenCount > 0 && childrenCount && (
-            <Styled.StyledChildrenCount>({data.childrenCount})</Styled.StyledChildrenCount>
-          )}
-
-          {inViewport && data.parent && 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,36 +0,0 @@
-import React from "react";
-import { Node, NodeProps } from "reaflow";
-import ObjectNode from "./ObjectNode";
-import TextNode from "./TextNode";
-
-export interface CustomNodeProps {
-  node: NodeData;
-  x: number;
-  y: number;
-  hasCollapse?: boolean;
-}
-
-const rootProps = {
-  width: 40,
-  height: 40,
-  rx: 50,
-  ry: 50,
-};
-
-export const CustomNode = (nodeProps: NodeProps) => {
-  const { text, data } = nodeProps.properties;
-
-  return (
-    <Node {...nodeProps} {...(data.isEmpty && rootProps)} label={<React.Fragment />}>
-      {({ node, x, y }) => {
-        if (Array.isArray(text)) {
-          return <ObjectNode node={node as NodeData} x={x} y={y} />;
-        }
-
-        return (
-          <TextNode node={node as NodeData} hasCollapse={data.childrenCount > 0} x={x} y={y} />
-        );
-      }}
-    </Node>
-  );
-};

src/components/CustomNode/styles.tsx

@@ -1,99 +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 theme.NODE_COLORS.INTEGER;
-  if (value === "true") return theme.NODE_COLORS.BOOL.TRUE;
-  if (value === "false") return theme.NODE_COLORS.BOOL.FALSE;
-  if (value === "null") return theme.NODE_COLORS.NULL;
-  return theme.NODE_COLORS.NODE_VALUE;
-}
-
-export const StyledLinkItUrl = styled(LinkItUrl)`
-  text-decoration: underline;
-  pointer-events: all;
-`;
-
-export const StyledForeignObject = styled.foreignObject<{
-  hasCollapse?: boolean;
-  isObject?: boolean;
-}>`
-  text-align: ${({ isObject }) => !isObject && "center"};
-  font-size: 12px;
-  overflow: hidden;
-  color: ${({ theme }) => theme.NODE_COLORS.TEXT};
-  pointer-events: none;
-  padding: ${({ isObject }) => isObject && "10px"};
-
-  * {
-    font-family: "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: "array" | "object" | false, objectKey: boolean) {
-  if (parent) {
-    if (parent === "array") return theme.NODE_COLORS.PARENT_ARR;
-    return theme.NODE_COLORS.PARENT_OBJ;
-  }
-  if (objectKey) return theme.NODE_COLORS.NODE_KEY;
-  return theme.NODE_COLORS.TEXT;
-}
-
-export const StyledKey = styled.span<{
-  objectKey?: boolean;
-  parent?: "array" | "object" | false;
-  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.NODE_COLORS.CHILD_COUNT};
-  padding: 10px;
-  margin-left: -15px;
-`;

src/components/ErrorContainer/index.tsx

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

src/components/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/Footer/index.tsx

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

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/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,26 +1,58 @@
 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 useGraph from "src/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";
+
+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;
@@ -34,114 +66,149 @@ const StyledEditorWrapper = styled.div<{ isWidget: boolean }>`
   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 }: GraphProps) => {
-  const setLoading = useGraph(state => state.setLoading);
-  const setZoomPanPinch = useGraph(state => state.setZoomPanPinch);
-  const centerView = useGraph(state => state.centerView);
+const layoutOptions = {
+  "elk.layered.compaction.postCompaction.strategy": "EDGE_LENGTH",
+  "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+};
 
-  const loading = useGraph(state => state.loading);
+const PREMIUM_LIMIT = 200;
+const ERROR_LIMIT_TREE = 5_000;
+const ERROR_LIMIT = 10_000;
+
+const GraphCanvas = ({ isWidget }: GraphProps) => {
+  const { validateHiddenNodes } = useToggleHide();
+  const setLoading = useGraph(state => state.setLoading);
+  const centerView = useGraph(state => state.centerView);
   const direction = useGraph(state => state.direction);
   const nodes = useGraph(state => state.nodes);
   const edges = useGraph(state => state.edges);
 
-  const [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) => {
-      setZoomPanPinch(ref);
-    },
-    [setZoomPanPinch]
-  );
+  const [paneWidth, setPaneWidth] = React.useState(2000);
+  const [paneHeight, setPaneHeight] = React.useState(2000);
 
   const onLayoutChange = React.useCallback(
     (layout: ElkRoot) => {
       if (layout.width && layout.height) {
         const areaSize = layout.width * layout.height;
-        const changeRatio = Math.abs((areaSize * 100) / (size.width * size.height) - 100);
+        const changeRatio = Math.abs((areaSize * 100) / (paneWidth * paneHeight) - 100);
 
-        setSize({
-          width: (layout.width as number) + 400,
-          height: (layout.height as number) + 400,
-        });
+        setPaneWidth(layout.width + 50);
+        setPaneHeight((layout.height as number) + 50);
 
-        requestAnimationFrame(() => {
-          setTimeout(() => {
+        setTimeout(() => {
+          validateHiddenNodes();
+          window.requestAnimationFrame(() => {
+            if (changeRatio > 70 || isWidget) centerView();
             setLoading(false);
-            setTimeout(() => {
-              if (changeRatio > 70 || isWidget) centerView();
-            });
           });
         });
       }
     },
-    [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} onContextMenu={e => e.preventDefault()}>
-      <Loading message="Painting graph..." loading={loading} />
-      <TransformWrapper
-        maxScale={2}
-        minScale={0.05}
-        initialScale={0.4}
-        wheel={{ step: 0.08 }}
-        zoomAnimation={{ animationType: "linear" }}
-        doubleClick={{ disabled: true }}
-        onInit={onInit}
-        onPanning={ref => ref.instance.wrapperComponent?.classList.add("dragging")}
-        onPanningStop={ref => ref.instance.wrapperComponent?.classList.remove("dragging")}
-      >
-        <TransformComponent
-          wrapperStyle={{
-            width: "100%",
-            height: "100%",
-            overflow: "hidden",
-            display: loading ? "none" : "block",
-          }}
-        >
-          <Canvas
-            className="jsoncrack-canvas"
-            nodes={nodes}
-            edges={edges}
-            maxWidth={size.width}
-            maxHeight={size.height}
-            direction={direction}
-            onLayoutChange={onLayoutChange}
-            onCanvasClick={onCanvasClick}
-            zoomable={false}
-            animated={false}
-            readonly={true}
-            dragEdge={null}
-            dragNode={null}
-            fit={true}
-            key={direction}
-            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,63 +0,0 @@
-import React from "react";
-import styled, { keyframes } from "styled-components";
-
-interface LoadingProps {
-  loading?: boolean;
-  message?: string;
-}
-
-const fadeIn = keyframes`
- 99% {
-    visibility: hidden;
-  }
-  100% {
-    visibility: visible;
-  }
-`;
-
-const StyledLoading = styled.div`
-  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: 800;
-  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> = ({ loading = true, message }) => {
-  if (!loading) return null;
-
-  return (
-    <StyledLoading>
-      <StyledLogo>
-        <StyledText>JSON</StyledText> Crack
-      </StyledLogo>
-      <StyledMessage>{message ?? "Preparing the environment for you..."}</StyledMessage>
-    </StyledLoading>
-  );
-};

src/components/Modal/index.tsx

@@ -1,76 +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>> | ((visible: boolean) => void);
-  size?: "sm" | "md" | "lg";
-}
-
-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,
-  size = "sm",
-}) => {
-  const onClick = (e: React.SyntheticEvent<HTMLDivElement>) => {
-    if (e.currentTarget === e.target) {
-      setVisible(false);
-    }
-  };
-
-  if (!visible) return null;
-
-  return (
-    <Styled.ModalWrapper onClick={onClick}>
-      <Styled.ModalInnerWrapper size={size}>{children}</Styled.ModalInnerWrapper>
-    </Styled.ModalWrapper>
-  );
-};
-
-Modal.Header = Header;
-Modal.Content = Content;
-Modal.Controls = Controls;
-
-export { Modal };

src/components/Modal/styles.tsx

@@ -1,68 +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<{ size: "sm" | "md" | "lg" }>`
-  min-width: 440px;
-  max-width: ${({ size }) => (size === "sm" ? "490px" : size === "md" ? "50%" : "90%")};
-  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`
-  display: flex;
-  align-items: center;
-  gap: 5px;
-  color: ${({ theme }) => theme.INTERACTIVE_ACTIVE};
-  font-size: 20px !important;
-  margin: 0 !important;
-`;
-
-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;
-  max-height: 500px;
-`;
-
-export const ControlsWrapper = styled.div`
-  display: flex;
-  flex-direction: row-reverse;
-  background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
-  padding: 12px;
-  border-radius: 0 0 5px 5px;
-  gap: 10px;
-`;

src/components/MonacoEditor/index.tsx

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

src/components/SearchInput/index.tsx

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

src/components/Spinner/index.tsx

@@ -1,28 +0,0 @@
-import React from "react";
-import { CgSpinner } from "react-icons/cg";
-import styled, { keyframes } from "styled-components";
-
-const rotateAnimation = keyframes`
-  to { transform: rotate(360deg); }
-`;
-
-const StyledSpinnerWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 25px;
-  justify-content: center;
-  width: 100%;
-  height: 100%;
-
-  svg {
-    animation: ${rotateAnimation} 1s linear infinite;
-  }
-`;
-
-export const Spinner = () => {
-  return (
-    <StyledSpinnerWrapper>
-      <CgSpinner size={40} />
-    </StyledSpinnerWrapper>
-  );
-};

src/components/Sponsors/index.tsx

@@ -1,94 +0,0 @@
-import React from "react";
-import useStored from "src/store/useStored";
-import styled from "styled-components";
-
-async function getSponsors() {
-  try {
-    const res = await fetch("https://ghs.vercel.app/sponsors/aykutsarac");
-    const data = await res.json();
-
-    if (data.sponsors) {
-      return data.sponsors.map(user => ({
-        handle: user.handle,
-        avatar: user.avatar,
-        profile: user.profile,
-      }));
-    }
-
-    return [];
-  } catch (error) {
-    console.error(error);
-    return [];
-  }
-}
-
-const StyledSponsorsWrapper = styled.ul`
-  display: flex;
-  width: 70%;
-  margin: 0;
-  padding: 0;
-  list-style: none;
-  gap: 10px;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: center;
-`;
-
-const StyledSponsor = styled.li<{ handle: string }>`
-  display: flex;
-  justify-content: center;
-  position: relative;
-
-  &:hover {
-    &::before {
-      content: "${({ handle }) => handle}";
-      position: absolute;
-      top: 0;
-      background: ${({ theme }) => theme.BACKGROUND_PRIMARY};
-      transform: translateY(-130%);
-      padding: 6px 8px;
-      border-radius: 4px;
-      font-weight: 500;
-      font-size: 14px;
-      color: ${({ theme }) => theme.TEXT_NORMAL};
-    }
-
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      transform: translateY(-110%);
-      border-width: 5px;
-      border-style: solid;
-      border-color: ${({ theme }) => theme.BACKGROUND_PRIMARY} transparent transparent transparent;
-    }
-  }
-
-  img {
-    border-radius: 100%;
-  }
-`;
-
-export const Sponsors = () => {
-  const { sponsors, setSponsors } = useStored();
-
-  React.useEffect(() => {
-    if (!sponsors?.nextDate || sponsors?.nextDate < Date.now()) {
-      getSponsors().then(setSponsors);
-    }
-  }, [setSponsors, sponsors?.nextDate]);
-
-  if (!sponsors?.users?.length) return null;
-
-  return (
-    <StyledSponsorsWrapper>
-      {sponsors.users.map(user => (
-        <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,53 +0,0 @@
-import React from "react";
-import { HiHeart } from "react-icons/hi";
-import styled from "styled-components";
-
-const StyledText = styled.span`
-  white-space: nowrap;
-  opacity: 0;
-  width: 0px;
-  transition: 0.2s;
-  font-weight: 600;
-`;
-
-const StyledSupportButton = styled.a`
-  position: fixed;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: white;
-  right: 15px;
-  bottom: 15px;
-  border-radius: 50%;
-  width: 24px;
-  padding: 8px;
-  height: 24px;
-  background: ${({ theme }) => theme.DANGER};
-  transition: all 0.5s;
-  overflow: hidden;
-  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 2px 4px rgba(0, 0, 0, 0.07),
-    0 4px 8px rgba(0, 0, 0, 0.07), 0 8px 16px rgba(0, 0, 0, 0.07), 0 16px 32px rgba(0, 0, 0, 0.07),
-    0 32px 64px rgba(0, 0, 0, 0.07);
-  opacity: 0.7;
-  box-sizing: content-box !important;
-
-  &:hover {
-    width: 180px;
-    border-radius: 6px;
-
-    ${StyledText} {
-      opacity: 1;
-      width: fit-content;
-      margin-right: 8px;
-    }
-  }
-`;
-
-export const SupportButton = () => {
-  return (
-    <StyledSupportButton href="https://github.com/sponsors/AykutSarac" target="_blank" rel="me">
-      <StyledText>Support JSON Crack</StyledText>
-      <HiHeart size={25} />
-    </StyledSupportButton>
-  );
-};

src/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,63 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-
-interface TooltipProps extends React.ComponentPropsWithoutRef<"div"> {
-  title?: string;
-}
-
-const StyledTooltip = styled.div`
-  position: absolute;
-  display: none;
-  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: 6px 8px;
-  white-space: nowrap;
-  font-family: "Mona Sans";
-  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 StyledTooltipWrapper = styled.div`
-  position: relative;
-  width: fit-content;
-  height: 100%;
-
-  &:hover ${StyledTooltip} {
-    display: initial;
-  }
-`;
-
-export const Tooltip: React.FC<React.PropsWithChildren<TooltipProps>> = ({
-  children,
-  title,
-  ...props
-}) => (
-  <StyledTooltipWrapper {...props}>
-    {title && <StyledTooltip>{title}</StyledTooltip>}
-    <div>{children}</div>
-  </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

@@ -1,36 +1,12 @@
 import { createGlobalStyle } from "styled-components";
 
 const GlobalStyle = createGlobalStyle`
-  @font-face {
-    font-family: 'Mona Sans';
-    src:
-      url('assets/Mona-Sans.woff2') format('woff2 supports variations'),
-      url('assets/Mona-Sans.woff2') format('woff2-variations');
-    font-weight: 200 900;
-    font-stretch: 75% 125%;
-  }
-
-  svg {
-    vertical-align: top;
-  }
-
-  h1, h2, h3, h4, p {
-    font-family: 'Mona Sans';
-  }
-
   html, body {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-    color: ${({ theme }) => theme.FULL_WHITE};
-    font-family: 'Mona Sans';
+    color: ${({ theme }) => theme.FULL_WHITE} !important;
     font-weight: 400;
     font-size: 16px;
-    height: 100%;
-    background-color: #000000;
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 800 800'%3E%3Cg fill-opacity='0.3'%3E%3Ccircle fill='%23000000' cx='400' cy='400' r='600'/%3E%3Ccircle fill='%23110718' cx='400' cy='400' r='500'/%3E%3Ccircle fill='%23220e30' cx='400' cy='400' r='400'/%3E%3Ccircle fill='%23331447' cx='400' cy='400' r='300'/%3E%3Ccircle fill='%23441b5f' cx='400' cy='400' r='200'/%3E%3Ccircle fill='%23552277' cx='400' cy='400' r='100'/%3E%3C/g%3E%3C/svg%3E");
-      background-attachment: fixed;
-      background-size: cover;
+    background: rgb(246,249,253) !important;
+    background: radial-gradient(circle, rgb(245 245 245) 33%, rgb(252 252 255) 100%) !important;
 
     @media only screen and (max-width: 768px) {
       background-position: right;
@@ -39,23 +15,31 @@ const GlobalStyle = createGlobalStyle`
 
   * {
     -webkit-tap-highlight-color: transparent;
-    scroll-behavior: smooth;
+    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 {
-    font-family: 'Mona Sans';
     border: none;
     outline: none;
     background: transparent;
@@ -63,24 +47,23 @@ const GlobalStyle = createGlobalStyle`
     margin: 0;
     padding: 0;
     cursor: pointer;
-    font-weight: 800;
   }
 
   #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',
@@ -89,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),
@@ -102,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 {
@@ -139,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;
@@ -152,6 +133,7 @@ const GlobalStyle = createGlobalStyle`
     bottom: 0;
     right: 0;
   }
+
 `;
 
 export default GlobalStyle;

src/constants/theme.ts

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

src/containers/Editor/BottomBar.tsx

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

src/containers/Editor/JsonEditor/index.tsx

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

src/containers/Editor/LiveEditor/GraphCanvas.tsx

@@ -1,43 +0,0 @@
-import React from "react";
-import { Graph } from "src/components/Graph";
-import { NodeModal } from "src/containers/Modals/NodeModal";
-import useGraph from "src/store/useGraph";
-
-export const GraphCanvas = ({ isWidget = false }: { isWidget?: boolean }) => {
-  const [isModalVisible, setModalVisible] = React.useState(false);
-  const [selectedNode, setSelectedNode] = React.useState<[string, string][]>([]);
-
-  const collapsedNodes = useGraph(state => state.collapsedNodes);
-  const collapsedEdges = useGraph(state => state.collapsedEdges);
-
-  const openModal = React.useCallback(() => setModalVisible(true), []);
-
-  React.useEffect(() => {
-    const nodeList = collapsedNodes.map(id => `[id$="node-${id}"]`);
-    const edgeList = collapsedEdges.map(id => `[class$="edge-${id}"]`);
-
-    const hiddenItems = document.querySelectorAll(".hide");
-    hiddenItems.forEach(item => item.classList.remove("hide"));
-
-    if (nodeList.length) {
-      const selectedNodes = document.querySelectorAll(nodeList.join(","));
-      selectedNodes.forEach(node => node.classList.add("hide"));
-    }
-
-    if (edgeList.length) {
-      const selectedEdges = document.querySelectorAll(edgeList.join(","));
-      selectedEdges.forEach(edge => edge.classList.add("hide"));
-    }
-  }, [collapsedNodes, collapsedEdges]);
-
-  return (
-    <>
-      <Graph openModal={openModal} setSelectedNode={setSelectedNode} 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,17 +1,25 @@
 import React from "react";
 import dynamic from "next/dynamic";
+import styled from "styled-components";
 import { Allotment } from "allotment";
 import "allotment/dist/style.css";
-import { JsonEditor } from "src/containers/Editor/JsonEditor";
 import useGraph from "src/store/useGraph";
-import styled from "styled-components";
 
 export const StyledEditor = styled(Allotment)`
   position: relative !important;
   display: flex;
   background: ${({ theme }) => theme.BACKGROUND_SECONDARY};
+  height: calc(100vh - 63px);
+
+  @media only screen and (max-width: 320px) {
+    height: 100vh;
+  }
 `;
 
+const JsonEditor = dynamic(() => import("src/containers/Editor/JsonEditor"), {
+  ssr: false,
+});
+
 const LiveEditor = dynamic(() => import("src/containers/Editor/LiveEditor"), {
   ssr: false,
 });
@@ -28,7 +36,7 @@ const Panes: React.FC = () => {
   return (
     <StyledEditor proportionalLayout={false} vertical={isMobile}>
       <Allotment.Pane
-        preferredSize={isMobile ? "100%" : 400}
+        preferredSize={isMobile ? "100%" : 450}
         minSize={fullscreen ? 0 : 300}
         maxSize={isMobile ? Infinity : 800}
         visible={!fullscreen}

src/containers/Editor/Tools.tsx

@@ -1,81 +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 { SearchInput } from "src/components/SearchInput";
-import useGraph from "src/store/useGraph";
-import useModal from "src/store/useModal";
-import styled from "styled-components";
-
-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 setVisible = useModal(state => state.setVisible);
-
-  const fullscreen = useGraph(state => state.fullscreen);
-  const toggleFullscreen = useGraph(state => state.toggleFullscreen);
-
-  const zoomIn = useGraph(state => state.zoomIn);
-  const zoomOut = useGraph(state => state.zoomOut);
-  const centerView = useGraph(state => state.centerView);
-  const toggleEditor = () => toggleFullscreen(!fullscreen);
-
-  return (
-    <>
-      <StyledTools>
-        <StyledToolElement aria-label="fullscreen" onClick={toggleEditor}>
-          <AiOutlineFullscreen />
-        </StyledToolElement>
-        <SearchInput />
-        <StyledToolElement aria-label="save" onClick={() => setVisible("download")(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>
-    </>
-  );
-};

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,295 +0,0 @@
-import React from "react";
-import Head from "next/head";
-import Link from "next/link";
-import Script from "next/script";
-import { AiOutlineRight } from "react-icons/ai";
-import {
-  HiCursorClick,
-  HiLightningBolt,
-  HiOutlineDownload,
-  HiOutlineSearchCircle,
-} from "react-icons/hi";
-import { IoRocketSharp } from "react-icons/io5";
-import { SiVisualstudiocode } from "react-icons/si";
-import { CarbonAds } from "src/components/CarbonAds";
-import { Footer } from "src/components/Footer";
-import { Producthunt } from "src/components/Producthunt";
-import { Sponsors } from "src/components/Sponsors";
-import { SupportButton } from "src/components/SupportButton";
-import { baseURL } from "src/constants/data";
-import { PricingCards } from "../PricingCards";
-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>
-    <Link href="docs" passHref>
-      <Styles.StyledNavLink>Documentation</Styles.StyledNavLink>
-    </Link>
-  </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.StyledButton href="/editor" link>
-        GO TO EDITOR
-        <AiOutlineRight strokeWidth="80" />
-      </Styles.StyledButton>
-
-      <Styles.StyledButtonWrapper>
-        <Styles.StyledSponsorButton href="/pricing" link>
-          GET PREMIUM
-          <IoRocketSharp />
-        </Styles.StyledSponsorButton>
-        <Styles.StyledSponsorButton
-          href="https://marketplace.visualstudio.com/items?itemName=AykutSarac.jsoncrack-vscode"
-          link
-          isBlue
-        >
-          GET IT ON VS CODE
-          <SiVisualstudiocode />
-        </Styles.StyledSponsorButton>
-      </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>
-        We believe that powerful software doesn&apos;t have to be difficult to use. That&apos;s why
-        we&apos;ve designed our app to be as intuitive and easy-to-use as possible. You can quickly
-        and easily load your JSON data and start exploring and analyzing it right away!
-      </Styles.StyledCardDescription>
-    </Styles.StyledSectionCard>
-
-    <Styles.StyledSectionCard>
-      <Styles.StyledCardIcon>
-        <HiOutlineSearchCircle size={50} color="#5865F2" />
-      </Styles.StyledCardIcon>
-      <Styles.StyledCardTitle>SEARCH</Styles.StyledCardTitle>
-      <Styles.StyledCardDescription>
-        Have a huge file of values, keys or arrays? Worry no more, type in the keyword you are
-        looking for into search input and it will take you to each node with matching result
-        highlighting the line to understand better!
-      </Styles.StyledCardDescription>
-    </Styles.StyledSectionCard>
-
-    <Styles.StyledSectionCard>
-      <Styles.StyledCardIcon>
-        <HiOutlineDownload size={50} color="#DA2877" />
-      </Styles.StyledCardIcon>
-      <Styles.StyledCardTitle>DOWNLOAD</Styles.StyledCardTitle>
-      <Styles.StyledCardDescription>
-        Download the graph to your local machine and use it wherever you want, to your blogs,
-        website or make it a poster and paste to the wall. Who wouldn&apos;t want to see a JSON
-        Crack graph onto their wall, eh?
-      </Styles.StyledCardDescription>
-    </Styles.StyledSectionCard>
-
-    <Styles.StyledSectionCard>
-      <Styles.StyledCardIcon>
-        <HiLightningBolt size={50} color="#F5E027" />
-      </Styles.StyledCardIcon>
-      <Styles.StyledCardTitle>LIVE</Styles.StyledCardTitle>
-      <Styles.StyledCardDescription>
-        With Microsoft&apos;s Monaco Editor which is also used by VS Code, easily edit your JSON and
-        directly view through the graphs. Also there&apos;s a JSON validator above of it to make
-        sure there is no type error.
-      </Styles.StyledCardDescription>
-    </Styles.StyledSectionCard>
-  </Styles.StyledFeaturesSection>
-);
-
-const GitHubSection = () => (
-  <Styles.StyledSection id="github" reverse>
-    <Styles.StyledTwitterQuote>
-      <blockquote className="twitter-tweet" data-lang="en" data-dnt="true" data-theme="light">
-        <p lang="en" dir="ltr">
-          Looking to understand or explore some JSON? Just paste or upload to visualize it as a
-          graph with <a href="https://t.co/HlKSrhKryJ">https://t.co/HlKSrhKryJ</a> 😍 <br />
-          <br />
-          Thanks to <a href="https://twitter.com/aykutsarach?ref_src=twsrc%5Etfw">
-            @aykutsarach
-          </a>! <a href="https://t.co/0LyPUL8Ezz">pic.twitter.com/0LyPUL8Ezz</a>
-        </p>
-        &mdash; GitHub (@github){" "}
-        <a href="https://twitter.com/github/status/1519363257794015233?ref_src=twsrc%5Etfw">
-          April 27, 2022
-        </a>
-      </blockquote>{" "}
-      <Script async src="https://platform.twitter.com/widgets.js" charSet="utf-8"></Script>
-    </Styles.StyledTwitterQuote>
-    <Styles.StyledSectionArea>
-      <Styles.StyledSubTitle>Open Source Community</Styles.StyledSubTitle>
-      <Styles.StyledMinorTitle>
-        At JSON Crack, we believe in the power of open source software and the communities that
-        support it. That&apos;s why we&apos;re proud to be part of the open source community and to
-        contribute to the development and growth of open source tools and technologies.
-        <br />
-        <br /> As part of our commitment to the open source community, we&apos;ve made our app
-        freely available to anyone who wants to use it, and we welcome contributions from anyone
-        who&apos;s interested in helping to improve it. Whether you&apos;re a developer, a data
-        scientist, or just someone who&apos;s passionate about open source, we&apos;d love to have
-        you join our community and help us make JSON Crack the best it can be.
-        <br />
-        <br /> So why not join us and become part of the JSON Crack open source community today? We
-        can&apos;t wait to see what we can accomplish together!
-      </Styles.StyledMinorTitle>
-      <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>
-        JSON Crack provides users with the necessary code to embed the app into a website easily
-        using an iframe. This code can be easily copied and pasted into the desired location on the
-        website, allowing users to quickly and easily integrate JSON Crack into existing workflows.
-        <br />
-        <br /> Once the app is embedded, users can use it to view and analyze JSON data directly on
-        the website. This can be useful for a variety of purposes, such as quickly checking the
-        structure of a JSON file or verifying the data contained within it. JSON Crack&apos;s
-        intuitive interface makes it easy to navigate and understand even complex JSON data, making
-        it a valuable tool for anyone working with JSON.
-      </Styles.StyledMinorTitle>
-      <Styles.StyledButton href="/docs" status="SECONDARY" link>
-        LEARN TO EMBED
-      </Styles.StyledButton>
-    </Styles.StyledSectionArea>
-    <div>
-      <Styles.StyledIframge
-        src={`${baseURL}/widget`}
-        onLoad={e => {
-          const frame = e.currentTarget.contentWindow;
-          setTimeout(() => {
-            frame?.postMessage(
-              {
-                json: JSON.stringify({
-                  "random images": [
-                    "https://random.imagecdn.app/50/50?.png",
-                    "https://random.imagecdn.app/80/80?.png",
-                    "https://random.imagecdn.app/100/100?.png",
-                  ],
-                }),
-                options: {
-                  theme: "dark",
-                },
-              },
-              "*"
-            );
-          }, 500);
-        }}
-      ></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 Home: React.FC = () => {
-  return (
-    <Styles.StyledHome>
-      <Head>
-        <title>JSON Crack - Crack your data into pieces</title>
-      </Head>
-      <Navbar />
-      <HeroSection />
-      <PreviewSection />
-      <FeaturesSection />
-      <GitHubSection />
-      <EmbedSection />
-      <PricingCards />
-      <SupportSection />
-      <SponsorSection />
-      <SupportButton />
-      <Footer />
-    </Styles.StyledHome>
-  );
-};
-
-export default Home;

src/containers/Home/styles.tsx

@@ -1,394 +0,0 @@
-import { Button } from "src/components/Button";
-import styled from "styled-components";
-
-export const StyledButtonWrapper = styled.div`
-  display: flex;
-  gap: 18px;
-
-  @media only screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-export const StyledTwitterQuote = styled.div`
-  width: 100%;
-  height: 100%;
-
-  blockquote.twitter-tweet {
-    display: inline-block;
-    font-family: "Helvetica Neue", Roboto, "Segoe UI", Calibri, sans-serif;
-    font-size: 12px;
-    font-weight: bold;
-    line-height: 16px;
-    border-color: #eee #ddd #bbb;
-    border-radius: 5px;
-    border-style: solid;
-    border-width: 1px;
-    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
-    margin: 10px 5px;
-    padding: 0 16px 16px 16px;
-    max-width: 468px;
-  }
-
-  blockquote.twitter-tweet p {
-    font-size: 16px;
-    font-weight: normal;
-    line-height: 20px;
-  }
-
-  blockquote.twitter-tweet a {
-    color: inherit;
-    font-weight: normal;
-    text-decoration: none;
-    outline: 0 none;
-  }
-
-  blockquote.twitter-tweet a:hover,
-  blockquote.twitter-tweet a:focus {
-    text-decoration: underline;
-  }
-`;
-
-export const StyledImageWrapper = styled.div`
-  width: 100%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-`;
-
-export const StyledHome = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8em;
-  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%;
-
-  h2 {
-    margin-bottom: 25px;
-  }
-`;
-
-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-weight: 900;
-  margin: 0;
-  font-size: min(10vw, 64px);
-
-  @media only screen and (max-width: 768px) {
-    font-size: 2.5rem;
-  }
-`;
-
-export const StyledSubTitle = styled.h2`
-  color: #dedede;
-  text-align: center;
-  font-size: 2.5rem;
-  max-width: 40rem;
-  margin: 0;
-
-  @media only screen and (max-width: 768px) {
-    font-size: 1.5rem;
-  }
-`;
-
-export const StyledMinorTitle = styled.p`
-  color: #b4b4b4;
-  text-align: center;
-  font-size: 1rem;
-  margin: 0;
-  letter-spacing: 1.2px;
-
-  @media only screen and (max-width: 992px) {
-    font-size: 1rem;
-  }
-`;
-
-export const StyledButton = styled(Button)`
-  background: ${({ status }) => !status && "#a13cc2"};
-  padding: 12px 24px;
-  height: 46px;
-
-  div {
-    font-family: "Mona Sans";
-    font-weight: 700;
-    font-size: 1rem;
-  }
-`;
-
-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;
-    }
-  }
-`;
-
-export const StyledFeaturesSection = styled.section`
-  display: grid;
-  margin: 0 auto;
-  max-width: 60%;
-  justify-content: center;
-  grid-template-columns: repeat(2, 40%);
-  grid-template-rows: repeat(2, 1fr);
-  grid-column-gap: 60px;
-  grid-row-gap: 60px;
-
-  @media only screen and (max-width: 768px) {
-    flex-direction: column;
-    max-width: 80%;
-    display: flex;
-  }
-`;
-
-export const StyledSectionCard = styled.div`
-  text-align: center;
-  flex: 1;
-  border: 1px solid ${({ theme }) => theme.BACKGROUND_MODIFIER_ACCENT};
-  background: rgb(48, 0, 65);
-  background: linear-gradient(
-    138deg,
-    rgba(48, 0, 65, 0.8870141806722689) 0%,
-    rgba(72, 12, 84, 0.40802258403361347) 33%,
-    rgba(65, 8, 92, 0.6012998949579832) 100%
-  );
-  border-radius: 6px;
-  padding: 16px;
-`;
-
-export const StyledCardTitle = styled.div`
-  font-weight: 700;
-  font-size: 1.5rem;
-  padding: 1.5rem 0 0.5rem;
-  letter-spacing: 1px;
-`;
-
-export const StyledCardIcon = styled.div``;
-
-export const StyledCardDescription = styled.p`
-  color: #e0e0e0;
-  text-align: left;
-  line-height: 1.5rem;
-  font-size: 0.875rem;
-`;
-
-export const 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: 1200px) {
-    flex-direction: ${({ reverse }) => (reverse ? "column-reverse" : "column")};
-    max-width: 80%;
-  }
-`;
-
-export const StyledSectionArea = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 2rem;
-  width: 40%;
-  margin-top: 3rem;
-
-  h2,
-  p {
-    text-align: left;
-    letter-spacing: unset;
-  }
-
-  @media only screen and (max-width: 768px) {
-    width: 100%;
-    align-items: center;
-
-    h2 {
-      text-align: center;
-    }
-  }
-`;
-
-export const StyledSponsorSection = styled.section`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  max-width: 85%;
-  margin: 0 auto;
-  gap: 2rem;
-  line-height: 1.5;
-  padding: 50px 3%;
-
-  @media only screen and (max-width: 768px) {
-    max-width: 90%;
-  }
-`;
-
-export const StyledEmbedSection = styled.section`
-  display: flex;
-  flex-direction: column-reverse;
-  justify-content: center;
-  align-items: center;
-  max-width: 85%;
-  margin: 0 auto;
-  gap: 2rem;
-  line-height: 1.5;
-  padding: 50px 3%;
-
-  @media only screen and (max-width: 768px) {
-    max-width: 80%;
-  }
-`;
-
-export const StyledPreviewSection = styled.section`
-  display: flex;
-  flex-direction: row;
-  justify-content: space-between;
-  max-width: 85%;
-  margin: 0 auto;
-  padding: 0 3%;
-
-  @media only screen and (max-width: 768px) {
-    display: none;
-  }
-`;
-
-export const StyledImage = styled.img`
-  width: 100%;
-  height: 100%;
-  object-fit: contain;
-  filter: drop-shadow(0px 0px 12px rgba(255, 255, 255, 0.6));
-`;
-
-export const StyledHighlightedText = styled.span`
-  text-decoration: underline;
-  text-decoration-style: dashed;
-  text-decoration-color: #eab308;
-`;
-
-export const StyledProducthunt = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  gap: 3rem;
-  border-right: 1px solid white;
-  padding-right: 3rem;
-
-  @media only screen and (max-width: 768px) {
-    border-right: none;
-    border-bottom: 1px solid white;
-    padding-bottom: 3rem;
-    padding-right: 0;
-  }
-`;
-
-export const StyledPaidSection = styled.section`
-  display: flex;
-  max-width: 85%;
-  margin: 0 auto;
-  gap: 2rem;
-  padding: 50px 3%;
-
-  @media only screen and (max-width: 768px) {
-    flex-direction: column;
-    max-width: 80%;
-  }
-`;
-
-export const StyledAffiliate = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  align-items: center;
-  gap: 3rem;
-`;

src/containers/ModalController/index.tsx

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

src/containers/Modals/AccountModal/index.tsx

@@ -1,143 +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 { MdVerified } from "react-icons/md";
-import { Button } from "src/components/Button";
-import { Modal, ModalProps } from "src/components/Modal";
+import useModal from "src/store/useModal";
 import useUser from "src/store/useUser";
-import styled from "styled-components";
 
-const StyledTitle = styled.p`
-  display: flex;
-  align-items: center;
-  color: ${({ theme }) => theme.TEXT_POSITIVE};
-  flex: 1;
-  font-weight: 700;
-  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 StyledAccountWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: 20px;
-  background: ${({ theme }) => theme.BACKGROUND_TERTIARY};
-  padding: 16px;
-  border-radius: 6px;
-
-  button {
-    flex-basis: 100%;
-  }
-`;
-
-const StyledAvatar = styled.img`
-  border-radius: 100%;
-`;
-
-const StyledContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  padding: 12px 0;
-  font-size: 12px;
-  line-height: 16px;
-  font-weight: 600;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-
-  & > div {
-    font-weight: 400;
-    font-size: 14px;
-    color: ${({ theme }) => theme.INTERACTIVE_ACTIVE};
-  }
-`;
-
-const AccountView: React.FC<Pick<ModalProps, "setVisible">> = ({ setVisible }) => {
-  const user = useUser(state => state.user);
-  const isPremium = useUser(state => state.isPremium());
+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);
 
-  const onImgFail = (e: React.SyntheticEvent<HTMLImageElement>) => {
-    e.currentTarget.setAttribute("src", `https://ui-avatars.com/api/?name=${user?.name}`);
-  };
-
   return (
-    <>
-      <Modal.Header>Account</Modal.Header>
-      <Modal.Content>
-        <StyledTitle>Hello, {user?.name}!</StyledTitle>
-        <StyledAccountWrapper>
-          <StyledAvatar
-            width="60"
-            height="60"
-            src={user?.profilePicture}
-            alt={user?.name}
-            onError={onImgFail}
-          />
-          <StyledContainer>
-            USERNAME
-            <div>{user?.name}</div>
-          </StyledContainer>
-          <StyledContainer>
-            ACCOUNT STATUS
-            <div>
-              {isPremium ? "PREMIUM " : "Free"}
-              {isPremium && <MdVerified />}
-            </div>
-          </StyledContainer>
-          <StyledContainer>
-            EMAIL
-            <div>{user?.email}</div>
-          </StyledContainer>
-          <StyledContainer>
-            REGISTRATION
-            <div>{user?.signUpAt && new Date(user.signUpAt).toDateString()}</div>
-          </StyledContainer>
-          {isPremium ? (
-            <Button
-              status="DANGER"
-              block
-              onClick={() => window.open("https://patreon.com/jsoncrack", "_blank")}
-            >
-              <IoRocketSharp />
-              Cancel Subscription
-            </Button>
-          ) : (
-            <Button href="/pricing" status="TERTIARY" block link>
-              <IoRocketSharp />
-              UPGRADE TO PREMIUM!
-            </Button>
-          )}
-        </StyledAccountWrapper>
-      </Modal.Content>
-      <Modal.Controls setVisible={setVisible}>
+    <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
-          status="DANGER"
+          color="red"
           onClick={() => {
             logout();
-            setVisible(false);
+            onClose();
           }}
         >
           Log Out
         </Button>
-      </Modal.Controls>
-    </>
-  );
-};
-
-export const AccountModal: React.FC<ModalProps> = ({ setVisible, visible }) => {
-  return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <AccountView setVisible={setVisible} />
+      </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,33 +1,34 @@
 import React from "react";
 import { useRouter } from "next/router";
-import { Button } from "src/components/Button";
-import { Modal, ModalProps } from "src/components/Modal";
-import { deleteJson } from "src/services/db/json";
+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 }) => {
+export const ClearModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   const setJson = useJson(state => state.setJson);
   const { query, replace } = useRouter();
 
   const handleClear = () => {
     setJson("{}");
-    setVisible(false);
+    onClose();
 
     if (typeof query.json === "string") {
-      deleteJson(query.json);
+      documentSvc.delete(query.json);
       replace("/editor");
     }
   };
 
   return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Delete JSON</Modal.Header>
-      <Modal.Content>Are you sure you want to delete 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

@@ -1,270 +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 {
-  AiOutlineEdit,
-  AiOutlineInfoCircle,
-  AiOutlineLock,
-  AiOutlinePlus,
-  AiOutlineUnlock,
-} from "react-icons/ai";
+import { AiOutlineLink } from "react-icons/ai";
 import { FaTrash } from "react-icons/fa";
-import { IoRocketSharp } from "react-icons/io5";
-import { Button } from "src/components/Button";
-import { Modal, ModalProps } from "src/components/Modal";
-import { Spinner } from "src/components/Spinner";
-import { deleteJson, getAllJson, saveJson, updateJson } from "src/services/db/json";
-import useJson from "src/store/useJson";
+import { MdFileOpen } from "react-icons/md";
+import { VscAdd, VscEdit, VscLock, VscUnlock } from "react-icons/vsc";
+import { FileFormat } from "src/enums/file.enum";
+import { documentSvc } from "src/services/document.service";
+import useFile, { File } from "src/store/useFile";
 import useUser from "src/store/useUser";
-import { Json } from "src/typings/altogic";
-import styled from "styled-components";
 
 dayjs.extend(relativeTime);
 
-const StyledModalContent = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: 14px;
-  overflow: auto;
-`;
-
-const StyledJsonCard = styled.a<{ active?: boolean; create?: boolean }>`
-  display: ${({ create }) => (create ? "block" : "flex")};
-  align-items: center;
-  justify-content: space-between;
-  background: ${({ theme }) => theme.BLACK_SECONDARY};
-  border: 2px solid ${({ theme, active }) => (active ? theme.SEAGREEN : theme.BLACK_SECONDARY)};
-  border-radius: 5px;
-  overflow: hidden;
-  flex: 1;
-  height: 160px;
-`;
-
-const StyledInfo = styled.div`
-  padding: 4px 6px;
-`;
-
-const StyledTitle = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  font-size: 14px;
-  font-weight: 500;
-  width: fit-content;
-  cursor: pointer;
-
-  span {
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-`;
-
-const StyledDetils = styled.div`
-  display: flex;
-  align-items: center;
-  font-size: 12px;
-  gap: 4px;
-`;
-
-const StyledModal = styled(Modal)`
-  #modal-view {
-    display: none;
-  }
-`;
-
-const StyledDeleteButton = styled(Button)`
-  background: transparent;
-`;
-
-const StyledCreateWrapper = styled.div`
-  display: flex;
-  height: 100%;
-  gap: 6px;
-  align-items: center;
-  justify-content: center;
-  opacity: 0.6;
-  height: 45px;
-  font-size: 14px;
-  cursor: pointer;
-`;
-
-const StyledNameInput = styled.input`
-  background: transparent;
-  border: none;
-  outline: none;
-  width: 90%;
-  color: ${({ theme }) => theme.SEAGREEN};
-  font-weight: 600;
-`;
-
-const StyledInfoText = styled.span`
-  font-size: 10px;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
-
-  svg {
-    vertical-align: text-top;
-    margin-right: 4px;
-  }
-`;
-
-const GraphCard: React.FC<{ data: Json; refetch: () => void; active: boolean }> = ({
-  data,
-  refetch,
-  active,
-  ...props
-}) => {
-  const [editMode, setEditMode] = React.useState(false);
-  const [name, setName] = React.useState(data.name);
+const colorByFormat: Record<FileFormat, DefaultMantineColor> = {
+  json: "orange",
+  yaml: "blue",
+  xml: "red",
+  toml: "dark",
+  csv: "grape",
+};
 
+const UpdateNameModal: React.FC<{
+  file: File | null;
+  onClose: () => void;
+  refetch: () => void;
+}> = ({ file, onClose, refetch }) => {
+  const [name, setName] = React.useState("");
   const onSubmit = () => {
+    if (!file) return;
     toast
-      .promise(updateJson(data._id, { name }), {
+      .promise(documentSvc.update(file.id, { name }), {
         loading: "Updating document...",
-        error: "Error occured while updating document!",
+        error: "Error occurred while updating document!",
         success: `Renamed document to ${name}`,
       })
-      .then(refetch);
+      .then(() => {
+        refetch();
+        setName("");
+      });
 
-    setEditMode(false);
-  };
-
-  const onDeleteClick = (e: React.MouseEvent<HTMLButtonElement>) => {
-    e.preventDefault();
-
-    toast
-      .promise(deleteJson(data._id), {
-        loading: "Deleting JSON file...",
-        error: "An error occured while deleting the file!",
-        success: `Deleted ${name}!`,
-      })
-      .then(refetch);
+    onClose();
   };
 
   return (
-    <StyledJsonCard
-      href={`?json=${data._id}`}
-      as={editMode ? "div" : "a"}
-      active={active}
-      {...props}
-    >
-      <StyledInfo>
-        {editMode ? (
-          <form onSubmit={onSubmit}>
-            <StyledNameInput
-              value={name}
-              onChange={e => setName(e.currentTarget.value)}
-              onClick={e => e.preventDefault()}
-              autoFocus
-            />
-            <input type="submit" hidden />
-          </form>
-        ) : (
-          <StyledTitle
-            onClick={e => {
-              e.preventDefault();
-              setEditMode(true);
-            }}
-          >
-            <span>{name}</span>
-            <AiOutlineEdit />
-          </StyledTitle>
-        )}
-        <StyledDetils>
-          {data.private ? <AiOutlineLock /> : <AiOutlineUnlock />}
-          Last modified {dayjs(data.updatedAt).fromNow()}
-        </StyledDetils>
-      </StyledInfo>
-      <StyledDeleteButton onClick={onDeleteClick}>
-        <FaTrash />
-      </StyledDeleteButton>
-    </StyledJsonCard>
+    <Modal title="Update Document name" opened={!!file} onClose={onClose} centered zIndex={202}>
+      <Stack>
+        <Input
+          value={name}
+          placeholder={file?.name}
+          onChange={e => setName(e.currentTarget.value)}
+        />
+        <Group position="right">
+          <Button variant="outline" onClick={onClose}>
+            Cancel
+          </Button>
+          <Button onClick={onSubmit}>Update</Button>
+        </Group>
+      </Stack>
+    </Modal>
   );
 };
 
-const CreateCard: React.FC<{ reachedLimit: boolean }> = ({ reachedLimit }) => {
-  const { replace } = useRouter();
-  const isPremium = useUser(state => state.isPremium());
-  const getJson = useJson(state => state.getJson);
-  const setHasChanges = useJson(state => state.setHasChanges);
+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 JSON...", { id: "jsonSave" });
-      const res = await saveJson({ data: getJson() });
+      toast.loading("Saving document...", { id: "fileSave" });
+      const { data, error } = await documentSvc.upsert({
+        contents: getContents(),
+        format: getFormat(),
+      });
 
-      if (res.errors && res.errors.items.length > 0) throw res.errors;
+      if (error) throw error;
 
-      toast.success("JSON saved to cloud", { id: "jsonSave" });
+      toast.success("Document saved to cloud", { id: "fileSave" });
       setHasChanges(false);
-      replace({ query: { json: res.data._id } });
+      replace({ query: { json: data } });
+      onClose();
     } catch (error: any) {
-      if (error?.items?.length > 0) {
-        return toast.error(error.items[0].message, { id: "jsonSave", duration: 7000 });
-      }
-      toast.error("Failed to save JSON!", { id: "jsonSave" });
+      toast.error("Failed to save document!", { id: "fileSave" });
+      console.error(error);
     }
   };
 
-  if (!isPremium && reachedLimit)
-    return (
-      <StyledJsonCard href="/pricing" create>
-        <StyledCreateWrapper>
-          <IoRocketSharp size="18" />
-          You reached max limit, upgrade to premium for more!
-        </StyledCreateWrapper>
-      </StyledJsonCard>
-    );
+  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 (
-    <StyledJsonCard onClick={onCreate} create>
-      <StyledCreateWrapper>
-        <AiOutlinePlus size="24" />
-        Create New JSON
-      </StyledCreateWrapper>
-    </StyledJsonCard>
-  );
-};
-
-export const CloudModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
-  const { isReady, query } = useRouter();
-
-  const { data, isFetching, refetch } = useQuery(["allJson", query], () => getAllJson(), {
-    enabled: isReady && visible,
-  });
-
-  return (
-    <StyledModal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Saved On The Cloud</Modal.Header>
-      <Modal.Content>
-        <StyledModalContent>
-          {isFetching ? (
-            <Spinner />
-          ) : (
-            <>
-              <CreateCard reachedLimit={data ? data?.data.result.length > 15 : false} />
-              {data?.data?.result?.map(json => (
-                <GraphCard
-                  data={json}
-                  key={json._id}
-                  refetch={refetch}
-                  active={query.json === json._id}
-                />
-              ))}
-            </>
-          )}
-        </StyledModalContent>
-      </Modal.Content>
-
-      <Modal.Controls setVisible={setVisible}>
-        <StyledInfoText>
-          <AiOutlineInfoCircle />
-          Cloud Save feature is for ease-of-access only and not recommended to store sensitive data,
-          we don&apos;t guarantee protection of your data.
-        </StyledInfoText>
-      </Modal.Controls>
-    </StyledModal>
+    <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 useGraph from "src/store/useGraph";
-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 togglePerfMode = useGraph(state => state.togglePerfMode);
+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" });
-      togglePerfMode(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);
-      togglePerfMode(true);
+      ReactGA.event({ action: "click_clipboard_image", category: "User" });
+      onClose();
     }
   };
 
   const exportAsImage = async () => {
     try {
       toast.loading("Downloading...", { id: "toastDownload" });
-      togglePerfMode(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);
-      togglePerfMode(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/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 useJson from "src/store/useJson";
-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;
@@ -42,8 +32,8 @@ const StyledUploadMessage = styled.h3`
   margin-bottom: 0;
 `;
 
-export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
-  const setJson = useJson(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);
 
@@ -51,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);
@@ -59,8 +61,8 @@ export const ImportModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
       return fetch(url)
         .then(res => res.json())
         .then(json => {
-          setJson(JSON.stringify(json, null, 2));
-          setVisible(false);
+          setContents({ contents: JSON.stringify(json, null, 2) });
+          onClose();
         })
         .catch(() => toast.error("Failed to fetch JSON!"))
         .finally(() => toast.dismiss("toastFetch"));
@@ -71,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}
@@ -98,12 +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

@@ -1,26 +1,16 @@
 import React from "react";
-import { AiOutlineGoogle } from "react-icons/ai";
-import { altogic } from "src/api/altogic";
-import { Button } from "src/components/Button";
-import { Modal, ModalProps } from "src/components/Modal";
-
-export const LoginModal: React.FC<ModalProps> = ({ setVisible, visible }) => {
-  const handleLoginClick = () => {
-    altogic.auth.signInWithProvider("google");
-  };
+import { Modal, Stack, Button, Text, Title, ModalProps } from "@mantine/core";
 
+export const LoginModal: React.FC<ModalProps> = ({ opened, onClose }) => {
   return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Login</Modal.Header>
-      <Modal.Content>
-        <h2>Welcome Back!</h2>
-        <p>Login to unlock full potential of JSON Crack!</p>
-        <Button onClick={handleLoginClick} status="SECONDARY" block>
-          <AiOutlineGoogle size={24} />
-          Login with Google
+    <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>
-      </Modal.Content>
-      <Modal.Controls setVisible={setVisible} />
+      </Stack>
     </Modal>
   );
 };

src/containers/Modals/NodeModal/index.tsx

@@ -1,60 +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,64 +0,0 @@
-import React from "react";
-import { Modal, ModalProps } from "src/components/Modal";
-import Toggle from "src/components/Toggle";
-import useStored from "src/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<ModalProps> = ({ visible, setVisible }) => {
-  const lightmode = useStored(state => state.lightmode);
-  const setLightTheme = useStored(state => state.setLightTheme);
-
-  const [
-    toggleHideCollapse,
-    toggleChildrenCount,
-    toggleImagePreview,
-    hideCollapse,
-    childrenCount,
-    imagePreview,
-  ] = useStored(
-    state => [
-      state.toggleHideCollapse,
-      state.toggleChildrenCount,
-      state.toggleImagePreview,
-      state.hideCollapse,
-      state.childrenCount,
-      state.imagePreview,
-    ],
-    shallow
-  );
-
-  return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Settings</Modal.Header>
-      <Modal.Content>
-        <StyledModalWrapper>
-          <StyledToggle onChange={toggleImagePreview} checked={imagePreview}>
-            Live Image Preview
-          </StyledToggle>
-          <StyledToggle onChange={toggleHideCollapse} checked={hideCollapse}>
-            Display Collapse/Expand Button
-          </StyledToggle>
-          <StyledToggle onChange={toggleChildrenCount} checked={childrenCount}>
-            Display Children Count
-          </StyledToggle>
-          <StyledToggle onChange={() => setLightTheme(!lightmode)} checked={lightmode}>
-            Light Theme
-          </StyledToggle>
-        </StyledModalWrapper>
-      </Modal.Content>
-      <Modal.Controls setVisible={setVisible} />
-    </Modal>
-  );
-};

src/containers/Modals/ShareModal/index.tsx

@@ -1,72 +1,59 @@
 import React from "react";
 import { useRouter } from "next/router";
-import toast from "react-hot-toast";
-import { Button } from "src/components/Button";
-import { Input } from "src/components/Input";
-import { Modal, ModalProps } from "src/components/Modal";
-import styled from "styled-components";
+import {
+  TextInput,
+  Stack,
+  Modal,
+  Button,
+  CopyButton,
+  Tooltip,
+  ActionIcon,
+  Text,
+  ModalProps,
+} from "@mantine/core";
+import { FiExternalLink } from "react-icons/fi";
+import { MdCheck, MdCopyAll } from "react-icons/md";
 
-const StyledFlex = styled.div`
-  display: flex;
-  gap: 12px;
-`;
-
-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;
-  }
-`;
-
-export const ShareModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
-  const { push, query } = useRouter();
+export const ShareModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const { query } = useRouter();
   const shareURL = `https://jsoncrack.com/editor?json=${query.json}`;
 
-  const handleShare = (value: string) => {
-    navigator.clipboard.writeText(value);
-    toast.success(`Link copied to clipboard.`);
-    setVisible(false);
-  };
-
-  const onEmbedClick = () => {
-    push("/docs");
-    setVisible(false);
-  };
-
   return (
-    <Modal visible={visible} setVisible={setVisible}>
-      <Modal.Header>Create a Share Link</Modal.Header>
-      <Modal.Content>
-        <StyledContainer>
+    <Modal title="Create a Share Link" opened={opened} onClose={onClose} centered>
+      <Stack py="sm">
+        <Text fz="sm" fw={700}>
           Share Link
-          <StyledFlex>
-            <Input value={shareURL} type="url" readOnly />
-            <Button status="SECONDARY" onClick={() => handleShare(shareURL)}>
-              Copy
-            </Button>
-          </StyledFlex>
-        </StyledContainer>
-        <StyledContainer>
+        </Text>
+        <TextInput
+          value={shareURL}
+          type="url"
+          readOnly
+          rightSection={
+            <CopyButton value={shareURL} timeout={2000}>
+              {({ copied, copy }) => (
+                <Tooltip label={copied ? "Copied" : "Copy"} withArrow position="right">
+                  <ActionIcon color={copied ? "teal" : "gray"} onClick={copy}>
+                    {copied ? <MdCheck size="1rem" /> : <MdCopyAll size="1rem" />}
+                  </ActionIcon>
+                </Tooltip>
+              )}
+            </CopyButton>
+          }
+        />
+        <Text fz="sm" fw={700}>
           Embed into your website
-          <StyledFlex>
-            <Button status="SUCCESS" onClick={onEmbedClick} block>
-              Learn How to Embed
-            </Button>
-          </StyledFlex>
-        </StyledContainer>
-      </Modal.Content>
-      <Modal.Controls setVisible={setVisible}></Modal.Controls>
+        </Text>
+        <Button
+          component="a"
+          color="green"
+          target="_blank"
+          href="/docs"
+          leftIcon={<FiExternalLink />}
+          fullWidth
+        >
+          Learn How to Embed
+        </Button>
+      </Stack>
     </Modal>
   );
 };