feat: update font loading

This reverts commit 5e2eab040a.

.env.development

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

.env.production

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

.eslintrc.json

@@ -1,15 +1,26 @@
 {
   "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"]
 }

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -24,7 +24,7 @@ body:
     id: media
     attributes:
       label: Media & Screenshots
-      description: Inlude screenshots or video of reproduction as much as possible
+      description: Include screenshots or video of reproduction as much as possible
       render: md
   - type: textarea
     id: os
@@ -34,7 +34,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: [16.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: 'npm'
+    - run: npm install
+    - run: npm run lint
+    - run: npm run 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

.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,10 @@
 # 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
+COPY . /src/
+RUN yarn install --frozen-lockfile && 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

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 JSON 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 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.
 
-> <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 & clipboard.
+- 🔍 Zoom and panning support.
+- 🛠 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 -p 8888:8080 jsoncrack
 
-This project is open source and available under the [GNU General Public License v3.0](LICENSE).
+# 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://altogic.com">
+  <img height="30" src="https://cdn.webrazzi.com/uploads/2022/04/altogic-167.png" alt="Altogic" />
+</a>
+<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 /reset-password {
+        try_files $uri /reset-password.html;
+    }
+
+    location /sign-in {
+        try_files $uri /sign-in.html;
+    }
 }

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,35 @@
-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,
+  },
 };
 
-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,76 @@
 {
   "name": "json-crack",
   "private": true,
-  "version": "v2.5.0",
+  "version": "v3.0.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 && 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/form": "^6.0.17",
+    "@mantine/hooks": "^6.0.17",
+    "@mantine/next": "^6.0.17",
+    "@mantine/prism": "^6.0.17",
+    "@monaco-editor/react": "^4.5.1",
+    "@sentry/nextjs": "^7.61.1",
+    "@supabase/auth-helpers-nextjs": "^0.7.4",
+    "@supabase/auth-helpers-react": "^0.4.2",
+    "@supabase/supabase-js": "^2.31.0",
+    "@tanstack/react-query": "^4.32.5",
+    "allotment": "^1.19.2",
+    "axios": "^1.4.0",
+    "dayjs": "^1.11.9",
+    "html-to-image": "^1.11.11",
+    "json-2-csv": "^4.1.0",
     "jsonc-parser": "^3.2.0",
+    "jsonwebtoken": "^9.0.1",
+    "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",
+    "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.10.1",
     "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.1.2",
+    "styled-components": "^6.0.7",
+    "toml": "^3.0.0",
+    "use-long-press": "^3.1.5",
+    "zustand": "^4.4.0"
   },
   "devDependencies": {
-    "@testing-library/react": "^13.3.0",
-    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
+    "@next/bundle-analyzer": "^13.4.12",
+    "@testing-library/react": "^14.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^4.2.0",
+    "@types/jsonwebtoken": "^9.0.2",
     "@types/lodash.debounce": "^4.0.7",
-    "@types/lz-string": "^1.3.34",
-    "@types/node": "^18.7.21",
-    "@types/react": "18.0.21",
+    "@types/lodash.get": "^4.4.7",
+    "@types/lodash.set": "^4.3.7",
+    "@types/node": "^20.4.7",
+    "@types/react": "18.2.18",
     "@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",
+    "@types/react-syntax-highlighter": "^15.5.7",
+    "eslint": "8.46.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.0.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,4 @@
 User-agent: *
 Allow: /
-Disallow: /*?*
+Disallow: /editor?*
 Disallow: /widget

public/sitemap.txt

@@ -0,0 +1,4 @@
+https://jsoncrack.com
+https://jsoncrack.com/sign-in
+https://jsoncrack.com/editor
+https://jsoncrack.com/docs

sentry.client.config.ts

@@ -0,0 +1,20 @@
+// 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"}`,
+    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/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/CustomNode/ObjectNode.tsx

@@ -0,0 +1,41 @@
+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) => {
+  return (
+    <Styled.StyledRow
+      data-key={JSON.stringify(val)}
+      data-x={x}
+      data-y={y + index * 17.8}
+      $type={JSON.stringify(val[1])}
+    >
+      <Styled.StyledKey $objectKey>{JSON.stringify(val[0]).replaceAll('"', "")}: </Styled.StyledKey>
+      <TextRenderer>{JSON.stringify(val[1])}</TextRenderer>
+    </Styled.StyledRow>
+  );
+};
+
+const Node: React.FC<CustomNodeProps> = ({ node, x, y }) => (
+  <Styled.StyledForeignObject width={node.width} height={node.height} x={0} y={0} $isObject>
+    {(node.text as Value[]).map((val, idx) => (
+      <Row val={val} index={idx} x={x} y={y} key={idx} />
+    ))}
+  </Styled.StyledForeignObject>
+);
+
+function propsAreEqual(prev: CustomNodeProps, next: CustomNodeProps) {
+  return String(prev.node.text) === String(next.node.text) && prev.node.width === next.node.width;
+}
+
+export const ObjectNode = React.memo(Node, propsAreEqual);

src/components/Graph/CustomNode/TextNode.tsx

@@ -1,14 +1,14 @@
 import React from "react";
+import styled from "styled-components";
 import { MdLink, MdLinkOff } from "react-icons/md";
-// import { useInViewport } from "react-in-viewport";
-import { CustomNodeProps } from "src/components/CustomNode";
+import { CustomNodeProps } from "src/components/Graph/CustomNode";
+import useToggleHide from "src/hooks/useToggleHide";
+import { isContentImage } from "src/lib/utils/graph/calculateNodeSize";
 import useGraph from "src/store/useGraph";
 import useStored from "src/store/useStored";
-import styled from "styled-components";
+import { TextRenderer } from "./TextRenderer";
 import * as Styled from "./styles";
 
-const inViewport = true;
-
 const StyledExpand = styled.button`
   pointer-events: all;
   display: inline-flex;
@@ -25,9 +25,9 @@ const StyledExpand = styled.button`
   }
 `;
 
-const StyledTextNodeWrapper = styled.div<{ hasCollapse: boolean }>`
+const StyledTextNodeWrapper = styled.span<{ $hasCollapse: boolean }>`
   display: flex;
-  justify-content: ${({ hasCollapse }) => (hasCollapse ? "space-between" : "center")};
+  justify-content: ${({ $hasCollapse }) => ($hasCollapse ? "space-between" : "center")};
   align-items: center;
   height: 100%;
   width: 100%;
@@ -43,60 +43,53 @@ const StyledImage = styled.img`
   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 Node: React.FC<CustomNodeProps> = ({ node, x, y, hasCollapse = false }) => {
+  const {
+    id,
+    text,
+    width,
+    height,
+    data: { isParent, childrenCount, type },
+  } = node;
+  const { validateHiddenNodes } = useToggleHide();
   const hideCollapse = useStored(state => state.hideCollapse);
-  const childrenCount = useStored(state => state.childrenCount);
+  const showChildrenCount = 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 isImage = imagePreview && isContentImage(text as string);
 
   const handleExpand = (e: React.MouseEvent<HTMLButtonElement>) => {
     e.stopPropagation();
 
     if (!isExpanded) collapseNodes(id);
     else expandNodes(id);
+    validateHiddenNodes();
   };
 
   return (
-    <Styled.StyledForeignObject
-      width={width}
-      height={height}
-      x={0}
-      y={0}
-      hasCollapse={data.parent && hasCollapse}
-      ref={ref}
-    >
+    <Styled.StyledForeignObject width={width} height={height} x={0} y={0}>
       {isImage ? (
         <StyledImageWrapper>
-          <StyledImage src={text} width="70" height="70" />
+          <StyledImage src={text as string} width="70" height="70" loading="lazy" />
         </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>
+        <StyledTextNodeWrapper
+          data-x={x}
+          data-y={y}
+          data-key={JSON.stringify(text)}
+          $hasCollapse={isParent && hideCollapse}
+        >
+          <Styled.StyledKey $parent={isParent} type={type}>
+            <TextRenderer>{JSON.stringify(text).replaceAll('"', "")}</TextRenderer>
+          </Styled.StyledKey>
+          {isParent && childrenCount > 0 && showChildrenCount && (
+            <Styled.StyledChildrenCount>({childrenCount})</Styled.StyledChildrenCount>
           )}
 
-          {inViewport && data.parent && hasCollapse && hideCollapse && (
-            <StyledExpand onClick={handleExpand}>
+          {isParent && hasCollapse && hideCollapse && (
+            <StyledExpand aria-label="Expand" onClick={handleExpand}>
               {isExpanded ? <MdLinkOff size={18} /> : <MdLink size={18} />}
             </StyledExpand>
           )}
@@ -110,4 +103,4 @@ 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);
+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} color={children.replaceAll('"', "")} />
+        {children.replaceAll('"', "")}
+      </StyledRow>
+    );
+  }
+  return <>{children}</>;
+};

src/components/Graph/CustomNode/index.tsx

@@ -1,7 +1,8 @@
 import React from "react";
 import { Node, NodeProps } from "reaflow";
-import ObjectNode from "./ObjectNode";
-import TextNode from "./TextNode";
+import { NodeData } from "src/types/models";
+import { ObjectNode } from "./ObjectNode";
+import { TextNode } from "./TextNode";
 
 export interface CustomNodeProps {
   node: NodeData;
@@ -11,25 +12,22 @@ export interface CustomNodeProps {
 }
 
 const rootProps = {
-  width: 40,
-  height: 40,
   rx: 50,
   ry: 50,
 };
 
-export const CustomNode = (nodeProps: NodeProps) => {
+export const CustomNode = (nodeProps: NodeProps<NodeData["data"]>) => {
   const { text, data } = nodeProps.properties;
 
   return (
-    <Node {...nodeProps} {...(data.isEmpty && rootProps)} label={<React.Fragment />}>
+    <Node {...nodeProps} {...(data?.isEmpty && rootProps)} animated={false} label={null as any}>
       {({ node, x, y }) => {
         if (Array.isArray(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 > 0} x={x} y={y} />
-        );
+        return <TextNode node={node as NodeData} hasCollapse={!!data?.childrenCount} x={x} y={y} />;
       }}
     </Node>
   );

src/components/Graph/CustomNode/styles.tsx

@@ -1,5 +1,6 @@
-import { LinkItUrl } from "react-linkify-it";
 import styled, { DefaultTheme } from "styled-components";
+import { LinkItUrl } from "react-linkify-it";
+import { firaMono } from "src/constants/fonts";
 
 function getTypeColor(value: string, theme: DefaultTheme) {
   if (!Number.isNaN(+value)) return theme.NODE_COLORS.INTEGER;
@@ -14,29 +15,23 @@ export const StyledLinkItUrl = styled(LinkItUrl)`
   pointer-events: all;
 `;
 
-export const StyledForeignObject = styled.foreignObject<{
-  hasCollapse?: boolean;
-  isObject?: boolean;
-}>`
-  text-align: ${({ isObject }) => !isObject && "center"};
+export const StyledForeignObject = styled.foreignObject<{ $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;
-  }
+  font-family: ${firaMono.style.fontFamily};
+  font-weight: 500;
 
   &.searched {
+    background: rgba(27, 255, 0, 0.1);
     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);
   }
 
@@ -52,9 +47,9 @@ export const StyledForeignObject = styled.foreignObject<{
   }
 `;
 
-function getKeyColor(theme: DefaultTheme, parent: "array" | "object" | false, objectKey: boolean) {
+function getKeyColor(theme: DefaultTheme, parent: boolean, type: string, objectKey: boolean) {
   if (parent) {
-    if (parent === "array") return theme.NODE_COLORS.PARENT_ARR;
+    if (type === "array") return theme.NODE_COLORS.PARENT_ARR;
     return theme.NODE_COLORS.PARENT_OBJ;
   }
   if (objectKey) return theme.NODE_COLORS.NODE_KEY;
@@ -62,34 +57,37 @@ function getKeyColor(theme: DefaultTheme, parent: "array" | "object" | false, ob
 }
 
 export const StyledKey = styled.span<{
-  objectKey?: boolean;
-  parent?: "array" | "object" | false;
+  $objectKey?: boolean;
+  $parent?: boolean;
+  type?: string;
   value?: string;
 }>`
   display: inline;
   flex: 1;
-  font-weight: 500;
-  color: ${({ theme, objectKey = false, parent = false }) => getKeyColor(theme, parent, objectKey)};
-  font-size: ${({ parent }) => parent && "14px"};
+  color: ${({ theme, type = "null", $objectKey = false, $parent = false }) =>
+    getKeyColor(theme, $parent, type, $objectKey)};
+  font-size: ${({ $parent }) => $parent && "14px"};
   overflow: hidden;
   text-overflow: ellipsis;
-  padding: ${({ objectKey }) => !objectKey && 10}px;
+  padding: ${({ $objectKey }) => !$objectKey && "10px"};
+  white-space: nowrap;
 `;
 
-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 }>`
+export const StyledRow = styled.span<{ $type: string }>`
+  padding: 0 10px;
+  color: ${({ theme, $type }) => getTypeColor($type, theme)};
   display: block;
-  height: 18px;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-  padding: 0 auto;
+
+  &:first-of-type {
+    padding-top: 10px;
+  }
+
+  &:last-of-type {
+    padding-bottom: 10px;
+  }
 `;
 
 export const StyledChildrenCount = styled.span`

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 4px 6px 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="300" 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 $5.00
+      </Button>
+    </StyledContent>
+
+    <div className="glowing">
+      <span></span>
+      <span></span>
+      <span></span>
+    </div>
+  </StyledPremiumView>
+);

src/components/Graph/index.tsx

@@ -1,26 +1,57 @@
 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 { Space } from "react-zoomable-ui";
+import { ElkRoot } from "reaflow/dist/layout/useLayout";
+import { EdgeProps } from "reaflow/dist/symbols/Edge";
+import { NodeProps } from "reaflow/dist/symbols/Node";
+import { useLongPress } from "use-long-press";
+import { CustomNode } from "src/components/Graph/CustomNode";
+import useToggleHide from "src/hooks/useToggleHide";
+import { Loading } from "src/layout/Loading";
+import useGraph from "src/store/useGraph";
+import useModal from "src/store/useModal";
+import useUser from "src/store/useUser";
+import { NodeData } from "src/types/models";
 import { ErrorView } from "./ErrorView";
+import { PremiumView } from "./PremiumView";
+
+const Edge = dynamic(() => import("reaflow").then(r => r.Edge), {
+  ssr: false,
+});
+
+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 }>`
   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);
+  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 +65,157 @@ 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 GraphCanvas = ({ isWidget }: { isWidget: boolean }) => {
+  const { validateHiddenNodes } = useToggleHide();
+  const setLoading = useGraph(state => state.setLoading);
+  const centerView = useGraph(state => state.centerView);
+  const setSelectedNode = useGraph(state => state.setSelectedNode);
+  const setVisible = useModal(state => state.setVisible);
   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 [paneWidth, setPaneWidth] = React.useState(2000);
+  const [paneHeight, setPaneHeight] = React.useState(2000);
 
   const handleNodeClick = React.useCallback(
-    (e: React.MouseEvent<SVGElement>, data: NodeData) => {
-      if (setSelectedNode) setSelectedNode(data.text);
-      if (openModal) openModal();
+    (_: React.MouseEvent<SVGElement>, data: NodeData) => {
+      if (setSelectedNode) setSelectedNode(data);
+      setVisible("node")(true);
     },
-    [openModal, setSelectedNode]
-  );
-
-  const onInit = React.useCallback(
-    (ref: ReactZoomPanPinchRef) => {
-      setZoomPanPinch(ref);
-    },
-    [setZoomPanPinch]
+    [setSelectedNode, setVisible]
   );
 
   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(() => {
-            setLoading(false);
-            setTimeout(() => {
-              if (changeRatio > 70 || isWidget) centerView();
-            });
+        setTimeout(() => {
+          setLoading(false);
+          validateHiddenNodes();
+          window.requestAnimationFrame(() => {
+            if (changeRatio > 70 || isWidget) centerView();
           });
         });
       }
     },
-    [centerView, isWidget, setLoading, size.height, size.width]
+    [centerView, isWidget, paneHeight, paneWidth, setLoading, validateHiddenNodes]
   );
 
   const onCanvasClick = React.useCallback(() => {
-    const input = document.querySelector("input:focus") as HTMLInputElement;
-    if (input) input.blur();
+    (document.activeElement as HTMLElement)?.blur();
   }, []);
 
-  if (nodes.length > 8_000) return <ErrorView />;
+  const memoizedNode = React.useCallback(
+    (props: JSX.IntrinsicAttributes & NodeProps<any>) => (
+      // @ts-ignore
+      <CustomNode {...props} onClick={handleNodeClick} />
+    ),
+    [handleNodeClick]
+  );
+
+  const memoizedEdge = React.useCallback(
+    (props: JSX.IntrinsicAttributes & Partial<EdgeProps>) => (
+      <Edge {...props} containerClassName={`edge-${props.id}`} />
+    ),
+    []
+  );
 
   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"
+      nodes={nodes}
+      edges={edges}
+      maxHeight={paneHeight}
+      maxWidth={paneWidth}
+      height={paneHeight}
+      width={paneWidth}
+      direction={direction}
+      layoutOptions={layoutOptions}
+      onLayoutChange={onLayoutChange}
+      onCanvasClick={onCanvasClick}
+      node={memoizedNode}
+      edge={memoizedEdge}
+      key={direction}
+      pannable={false}
+      zoomable={false}
+      animated={false}
+      readonly={true}
+      dragEdge={null}
+      dragNode={null}
+      fit={true}
+    />
   );
 };
 
-export const Graph = React.memo(GraphComponent);
+export const Graph = ({ isWidget = false }: GraphProps) => {
+  const setViewPort = useGraph(state => state.setViewPort);
+  const isPremium = useUser(state => state.premium);
+  const viewType = useGraph(state =>
+    state.nodes.length > 6_000 ? "error" : state.nodes.length > 250 ? "premium" : "graph"
+  );
+
+  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 === "premium" && !isWidget) {
+    if (!isPremium) return <PremiumView />;
+  }
+
+  return (
+    <>
+      <Loading message="Painting graph..." />
+      <StyledEditorWrapper
+        $widget={isWidget}
+        onContextMenu={e => e.preventDefault()}
+        onClick={blurOnClick}
+        {...bindLongPress()}
+      >
+        <Space
+          onCreate={setViewPort}
+          onContextMenu={e => e.preventDefault()}
+          treatTwoFingerTrackPadGesturesLikeTouch
+          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 useFile from "src/store/useFile";
+import useStored from "src/store/useStored";
 
 loader.config({
   paths: {
@@ -14,6 +13,7 @@ loader.config({
 
 const editorOptions = {
   formatOnPaste: true,
+  formatOnType: true,
   minimap: {
     enabled: false,
   },
@@ -21,53 +21,35 @@ 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 = useStored(state => (state.lightmode ? "light" : "vs-dark"));
+  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,
+      ...(jsonSchema && {
+        schemas: [
+          {
+            fileMatch: ["*"],
+            schema: jsonSchema,
+          },
+        ],
+      }),
+    });
+  }, [jsonSchema, monaco?.languages.json.jsonDefaults]);
 
   React.useEffect(() => {
     const beforeunload = (e: BeforeUnloadEvent) => {
@@ -90,14 +72,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: "block",
+  preload: false,
+});
+
+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, rgba(246,249,253,1) 33%, rgba(230,230,253,1) 100%) !important;
 
     @media only screen and (max-width: 768px) {
       background-position: right;
@@ -39,23 +15,27 @@ const GlobalStyle = createGlobalStyle`
 
   * {
     -webkit-tap-highlight-color: transparent;
-    scroll-behavior: smooth;
+    scroll-behavior: smooth !important;
   }
 
   .hide {
     display: none;
   }
-  
-  a {
-    text-decoration: none;
-    color: unset;
+
+  .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 +43,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 +68,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 +79,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 +116,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 +129,7 @@ const GlobalStyle = createGlobalStyle`
     bottom: 0;
     right: 0;
   }
+
 `;
 
 export default GlobalStyle;

src/constants/previewSection.ts

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

src/constants/theme.ts

@@ -10,7 +10,7 @@ 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",
@@ -20,7 +20,7 @@ const fixedColors = {
 const nodeColors = {
   dark: {
     NODE_COLORS: {
-      TEXT: "#35D073",
+      TEXT: "#DCE5E7",
       NODE_KEY: "#59b8ff",
       NODE_VALUE: "#DCE5E7",
       INTEGER: "#e8c479",
@@ -36,10 +36,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",
@@ -67,11 +67,15 @@ 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 = {
@@ -86,14 +90,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 { Badge, Flex, Popover, Text } from "@mantine/core";
 import toast from "react-hot-toast";
 import {
   AiOutlineCloudSync,
@@ -8,23 +11,30 @@ 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 { MdReportGmailerrorred, MdOutlineCheckCircleOutline } from "react-icons/md";
+import { TbTransform } from "react-icons/tb";
+import { VscAccount, VscSync, VscSyncIgnored, VscWorkspaceTrusted } from "react-icons/vsc";
+import { saveToCloud, updateJson } from "src/services/json";
+import useFile from "src/store/useFile";
 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;
+  max-height: 27px;
+  height: 27px;
   padding: 0 6px;
+  z-index: 35;
+
+  @media screen and (max-width: 320px) {
+    display: none;
+  }
 `;
 
 const StyledLeft = styled.div`
@@ -32,6 +42,10 @@ const StyledLeft = styled.div`
   align-items: center;
   justify-content: left;
   gap: 4px;
+
+  @media screen and (max-width: 480px) {
+    display: none;
+  }
 `;
 
 const StyledRight = styled.div`
@@ -41,7 +55,7 @@ const StyledRight = styled.div`
   gap: 4px;
 `;
 
-const StyledBottomBarItem = styled.button`
+const StyledBottomBarItem = styled.button<{ $error?: boolean }>`
   display: flex;
   align-items: center;
   gap: 4px;
@@ -51,7 +65,11 @@ const StyledBottomBarItem = styled.button`
   padding: 4px;
   font-size: 12px;
   font-weight: 400;
-  color: ${({ theme }) => theme.INTERACTIVE_NORMAL};
+  color: ${({ theme, $error }) => ($error ? theme.DANGER : theme.INTERACTIVE_NORMAL)};
+  background: ${({ $error }) => $error && "rgba(255, 99, 71, 0.4)"};
+  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 +77,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%)"};
+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 premium = useUser(state => state.premium);
   const lightmode = useStored(state => state.lightmode);
-  const hasChanges = useJson(state => state.hasChanges);
+  const toggleLiveTransform = useStored(state => state.toggleLiveTransform);
+  const liveTransform = useStored(state => state.liveTransform);
+  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 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);
 
   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 saveToCloud({
+          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 +158,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 updateJson(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,30 +179,85 @@ export const BottomBar = () => {
 
   return (
     <StyledBottomBar>
+      {data?.name && (
+        <Head>
+          <title>{data.name} | JSON Crack</title>
+        </Head>
+      )}
       <StyledLeft>
         <StyledBottomBarItem onClick={handleLoginClick}>
           <VscAccount />
-          {user ? user.name : "Login"}
+          {user?.user_metadata.name ?? "Login"}
+          {premium && (
+            <Badge size="sm" color="orange" radius="sm" fw="bold">
+              PREMIUM
+            </Badge>
+          )}
         </StyledBottomBarItem>
-        <StyledBottomBarItem onClick={handleSaveJson} disabled={isUpdating}>
-          {hasChanges ? <AiOutlineCloudUpload /> : <AiOutlineCloudSync />}
-          {hasChanges ? "Unsaved Changes" : "Saved"}
+        {!premium && (
+          <StyledBottomBarItem onClick={() => setVisible("premium")(true)}>
+            <VscWorkspaceTrusted />
+            Upgrade to Premium
+          </StyledBottomBarItem>
+        )}
+        <StyledBottomBarItem $error={!!error}>
+          {error ? (
+            <Popover width="auto" shadow="md" position="top" withArrow>
+              <Popover.Target>
+                <Flex align="center" gap={2}>
+                  <MdReportGmailerrorred color="red" size={16} />
+                  <Text fw="bold">Invalid Format</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 Format</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}>
+            {hasChanges ? <AiOutlineCloudUpload /> : <AiOutlineCloudSync />}
+            {hasChanges ? (query?.json ? "Unsaved Changes" : "Create Document") : "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>
+        {liveTransform ? (
+          <StyledBottomBarItem onClick={() => toggleLiveTransform(false)}>
+            <VscSync />
+            <Text>Live Transform</Text>
+          </StyledBottomBarItem>
+        ) : (
+          <StyledBottomBarItem onClick={() => toggleLiveTransform(true)}>
+            <VscSyncIgnored />
+            <Text>Manual Transform</Text>
+          </StyledBottomBarItem>
+        )}
+        {!liveTransform && (
+          <StyledBottomBarItem onClick={() => setContents({})}>
+            <TbTransform />
+            Transform
+          </StyledBottomBarItem>
         )}
       </StyledLeft>
+
       <StyledRight>
         <a
           href="https://www.altogic.com/?utm_source=jsoncrack&utm_medium=referral&utm_campaign=sponsorship"
@@ -172,9 +268,10 @@ export const BottomBar = () => {
             Powered by
             <StyledImg
               height="20"
+              width="54"
               src="https://www.altogic.com/img/logo_dark.svg"
               alt="powered by altogic"
-              light={lightmode}
+              $light={lightmode}
             />
           </StyledBottomBarItem>
         </a>

src/containers/Editor/JsonEditor/index.tsx

@@ -1,20 +1,20 @@
 import React from "react";
-import { ErrorContainer } from "src/components/ErrorContainer";
-import { MonacoEditor } from "src/components/MonacoEditor";
 import styled from "styled-components";
+import { MonacoEditor } from "src/components/MonacoEditor";
 
 const StyledEditorWrapper = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  overflow: auto;
   user-select: none;
 `;
+
 export const JsonEditor: React.FC = () => {
   return (
     <StyledEditorWrapper>
-      <ErrorContainer />
       <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,370 @@
+import React from "react";
+import styled from "styled-components";
+import { Flex, Group, MediaQuery, Menu, Select, Text } from "@mantine/core";
+import { useHotkeys } from "@mantine/hooks";
+import ReactGA from "react-ga4";
+import toast from "react-hot-toast";
+import { AiOutlineFullscreen, AiOutlineMinus, AiOutlinePlus } from "react-icons/ai";
+import { CgArrowsMergeAltH, CgArrowsShrinkH, CgChevronDown } from "react-icons/cg";
+import { FiDownload } from "react-icons/fi";
+import { MdCenterFocusWeak } from "react-icons/md";
+import { SiJsonwebtokens } from "react-icons/si";
+import { TiFlowMerge } from "react-icons/ti";
+import {
+  VscCollapseAll,
+  VscExpandAll,
+  VscJson,
+  VscLayoutSidebarLeft,
+  VscLayoutSidebarLeftOff,
+  VscSettingsGear,
+  VscTarget,
+} from "react-icons/vsc";
+import { SearchInput } from "src/components/SearchInput";
+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 useFile from "src/store/useFile";
+import useGraph from "src/store/useGraph";
+import useJson from "src/store/useJson";
+import useModal from "src/store/useModal";
+import { FileFormat } from "src/types/models";
+
+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 expandGraph = useGraph(state => state.expandGraph);
+  const collapseGraph = useGraph(state => state.collapseGraph);
+  const toggleFullscreen = useGraph(state => state.toggleFullscreen);
+  const focusFirstNode = useGraph(state => state.focusFirstNode);
+  const foldNodes = useGraph(state => state.foldNodes);
+  const graphCollapsed = useGraph(state => state.graphCollapsed);
+  const direction = useGraph(state => state.direction);
+  const fullscreen = useGraph(state => state.fullscreen);
+
+  const toggleEditor = () => toggleFullscreen(!fullscreen);
+
+  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.`);
+    validateHiddenNodes();
+  };
+
+  useHotkeys([
+    ["mod+shift+e", toggleEditor],
+    ["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}>
+      <Menu.Target>
+        <StyledToolElement>
+          <Flex align="center" gap={3}>
+            View <CgChevronDown />
+          </Flex>
+        </StyledToolElement>
+      </Menu.Target>
+      <Menu.Dropdown>
+        <Menu.Item
+          fz={12}
+          onClick={() => {
+            toggleEditor();
+            ReactGA.event({
+              action: "toggle_hide_editor",
+              category: "User",
+              label: "Tools",
+            });
+          }}
+          icon={fullscreen ? <VscLayoutSidebarLeft /> : <VscLayoutSidebarLeftOff />}
+          rightSection={
+            <Text ml="md" fz={10} color="dimmed">
+              {coreKey} Shift E
+            </Text>
+          }
+        >
+          {fullscreen ? "Show" : "Hide"} Editor
+        </Menu.Item>
+        <Menu.Item
+          fz={12}
+          onClick={() => {
+            toggleDirection();
+            ReactGA.event({
+              action: "toggle_layout_direction",
+              category: "User",
+              label: "Tools",
+            });
+          }}
+          icon={<StyledFlowIcon rotate={rotateLayout(direction)} />}
+          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 getJson = useJson(state => state.getJson);
+  const setVisible = useModal(state => state.setVisible);
+  const zoomIn = useGraph(state => state.zoomIn);
+  const zoomOut = useGraph(state => state.zoomOut);
+  const centerView = useGraph(state => state.centerView);
+
+  const setFormat = useFile(state => state.setFormat);
+  const format = useFile(state => state.format);
+  const [logoURL, setLogoURL] = React.useState("CTRL");
+
+  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" },
+              ]}
+            />
+            <StyledToolElement title="Import File" onClick={() => setVisible("import")(true)}>
+              Import
+            </StyledToolElement>
+            <ViewMenu />
+            <Menu shadow="md">
+              <Menu.Target>
+                <StyledToolElement>
+                  <Flex align="center" gap={3}>
+                    Tools <CgChevronDown />
+                  </Flex>
+                </StyledToolElement>
+              </Menu.Target>
+              <Menu.Dropdown>
+                <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.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>
+        <StyledToolElement title="Zoom Out" onClick={zoomOut}>
+          <AiOutlineMinus size="18" />
+        </StyledToolElement>
+        <StyledToolElement title="Zoom In" onClick={zoomIn}>
+          <AiOutlinePlus size="18" />
+        </StyledToolElement>
+        {!isWidget && (
+          <StyledToolElement title="Save as Image" onClick={() => setVisible("download")(true)}>
+            <FiDownload size="18" />
+          </StyledToolElement>
+        )}
+        <StyledToolElement title="Center Canvas" onClick={centerView}>
+          <MdCenterFocusWeak size="18" />
+        </StyledToolElement>
+        <SearchInput />
+        <StyledToolElement title="Fullscreen" $hide={isWidget} onClick={fullscreenBrowser}>
+          <AiOutlineFullscreen size="18" />
+        </StyledToolElement>
+        <StyledToolElement
+          title="Settings"
+          $hide={isWidget}
+          onClick={() => setVisible("settings")(true)}
+        >
+          <VscSettingsGear size="18" />
+        </StyledToolElement>
+      </Group>
+    </StyledTools>
+  );
+};

src/containers/Editor/LiveEditor/index.tsx

@@ -1,7 +1,6 @@
 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 { Graph } from "src/components/Graph";
 
 const StyledLiveEditor = styled.div`
   position: relative;
@@ -11,8 +10,7 @@ const StyledLiveEditor = styled.div`
 const LiveEditor: React.FC = () => {
   return (
     <StyledLiveEditor>
-      <Tools />
-      <GraphCanvas />
+      <Graph />
     </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,152 @@
+import {
+  createStyles,
+  Title,
+  Text,
+  Card,
+  SimpleGrid,
+  Container,
+  rem,
+  MediaQuery,
+} from "@mantine/core";
+import { FaGithubAlt, FaProjectDiagram, FaRegImages } from "react-icons/fa";
+import { TbTransform } from "react-icons/tb";
+import { VscCloud, VscJson } from "react-icons/vsc";
+
+const mockdata = [
+  {
+    title: "Free and Open Source",
+    description:
+      "JSON Crack is an open-source tool, released under the GPL-3 license. This means users can access the source code, modify it, and contribute to the community, fostering innovation and collaboration.",
+    icon: <FaGithubAlt 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,96 @@
 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 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();
+            }}
+          >
+            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,69 @@
+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";
+
+export const CancelPremiumModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const [cancelling, setCancelling] = React.useState(false);
+
+  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!");
+      } else {
+        toast.error("Couldn't fetch user details, please contact: contact@jsoncrack.com");
+      }
+
+      toast.success("Cancelled premium plan!");
+      setTimeout(() => window.location.reload(), 2500);
+    } 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,17 +1,16 @@
 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 { deleteJson } from "src/services/json";
 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);
@@ -20,14 +19,16 @@ export const ClearModal: React.FC<ModalProps> = ({ visible, setVisible }) => {
   };
 
   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,266 @@
 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 { deleteJson, getAllJson, saveToCloud, updateJson } from "src/services/json";
+import useFile, { File } from "src/store/useFile";
 import useUser from "src/store/useUser";
-import { Json } from "src/typings/altogic";
-import styled from "styled-components";
+import { FileFormat } from "src/types/models";
 
 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(updateJson(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>
+      <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], () => getAllJson(), {
+    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 saveToCloud({ 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(deleteJson(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
+      hidden={!!currentFile}
+    >
+      <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/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,134 @@
 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 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";
 
-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 lightmode = useStored(state => (state.lightmode ? "light" : "vs-dark"));
+  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);
+    onModalClose();
+  };
+
+  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={lightmode}
+              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>
+      <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 5$/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/SchemaModal/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+import { Stack, Modal, Button, ModalProps, Text } from "@mantine/core";
+import Editor from "@monaco-editor/react";
+import { toast } from "react-hot-toast";
+import useFile from "src/store/useFile";
+import useStored from "src/store/useStored";
+
+export const SchemaModal: React.FC<ModalProps> = ({ opened, onClose }) => {
+  const setJsonSchema = useFile(state => state.setJsonSchema);
+  const [schema, setSchema] = React.useState("");
+  const lightmode = useStored(state => (state.lightmode ? "light" : "vs-dark"));
+
+  const onApply = () => {
+    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" opened={opened} onClose={onClose} centered>
+      <Stack py="sm">
+        <Text fz="sm">Any validation failures are shown at the bottom toolbar of pane.</Text>
+        <Editor
+          value={schema ?? ""}
+          theme={lightmode}
+          onChange={e => setSchema(e!)}
+          height={300}
+          language="json"
+          options={{
+            formatOnPaste: true,
+            formatOnType: true,
+            minimap: {
+              enabled: false,
+            },
+          }}
+        />
+        <Button onClick={onApply} disabled={!schema} fullWidth>
+          Apply
+        </Button>
+        <Button variant="outline" onClick={onClear} disabled={!schema} fullWidth>
+          Clear
+        </Button>
+      </Stack>
+    </Modal>
+  );
+};

src/containers/Modals/SettingsModal/index.tsx

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

src/containers/Modals/ShareModal/index.tsx

@@ -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>
   );
 };

src/containers/Modals/index.ts

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

src/containers/PricingCards/index.tsx

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

src/hooks/useFocusNode.ts

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

src/hooks/useFocusNode.tsx

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

src/hooks/useHideNodes.tsx

@@ -1,33 +0,0 @@
-import React from "react";
-import useGraph from "src/store/useGraph";
-
-const useHideNodes = () => {
-  const collapsedNodes = useGraph(state => state.collapsedNodes);
-  const collapsedEdges = useGraph(state => state.collapsedEdges);
-
-  const nodeList = React.useMemo(
-    () => collapsedNodes.map(id => `[id$="node-${id}"]`),
-    [collapsedNodes]
-  );
-  const edgeList = React.useMemo(
-    () => collapsedEdges.map(id => `[class$="edge-${id}"]`),
-    [collapsedEdges]
-  );
-
-  const checkNodes = () => {
-    const hiddenItems = document.querySelectorAll(".hide");
-    hiddenItems.forEach(item => item.classList.remove("hide"));
-
-    if (nodeList.length > 1) {
-      const selectedNodes = document.querySelectorAll(nodeList.join(","));
-      const selectedEdges = document.querySelectorAll(edgeList.join(","));
-
-      selectedNodes.forEach(node => node.classList.add("hide"));
-      selectedEdges.forEach(edge => edge.classList.add("hide"));
-    }
-  };
-
-  return { checkNodes };
-};
-
-export default useHideNodes;

src/hooks/useKeyPress.tsx

@@ -1,25 +0,0 @@
-import React from "react";
-
-const useKeyPress = (targetKey: string) => {
-  const [keyPressed, setKeyPressed] = React.useState(false);
-
-  React.useEffect(() => {
-    function downHandler({ key }) {
-      if (key === targetKey) setKeyPressed(true);
-    }
-    const upHandler = ({ key }) => {
-      if (key === targetKey) setKeyPressed(false);
-    };
-    window.addEventListener("keydown", downHandler);
-    window.addEventListener("keyup", upHandler);
-
-    return () => {
-      window.removeEventListener("keydown", downHandler);
-      window.removeEventListener("keyup", upHandler);
-    };
-  }, [targetKey]);
-
-  return keyPressed;
-};
-
-export default useKeyPress;

src/hooks/useToggleHide.ts

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

src/layout/EditorWrapper/index.tsx

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

src/layout/ExternalMode/index.tsx

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