feat: bump version to 2.0.0

Co-authored-by: Andrew Bastin <andrewbastin.k@gmail.com>

.all-contributorsrc

@@ -1,34 +0,0 @@
-{
-  "files": [
-    "README.md"
-  ],
-  "imageSize": 100,
-  "commit": false,
-  "contributors": [
-    {
-      "login": "liyasthomas",
-      "name": "Liyas Thomas",
-      "avatar_url": "https://avatars1.githubusercontent.com/u/10395817?v=4",
-      "profile": "https://liyasthomas.web.app",
-      "contributions": [
-        "code",
-        "design"
-      ]
-    },
-    {
-      "login": "AndrewBastin",
-      "name": "Andrew Bastin",
-      "avatar_url": "https://avatars2.githubusercontent.com/u/9131943?v=4",
-      "profile": "https://github.com/AndrewBastin",
-      "contributions": [
-        "code"
-      ]
-    },
-  ],
-  "contributorsPerLine": 7,
-  "projectName": "hoppscotch",
-  "projectOwner": "hoppscotch",
-  "repoType": "github",
-  "repoHost": "https://github.com",
-  "skipCi": true
-}

.env.example

@@ -12,7 +12,7 @@ PROJECT_ID=postwoman-api
 STORAGE_BUCKET=postwoman-api.appspot.com
 MESSAGING_SENDER_ID=421993993223
 APP_ID=1:421993993223:web:ec0baa8ee8c02ffa1fc6a2
-MEASUREMENT_ID=G-ERJ6025CEB
+MEASUREMENT_ID=G-BBJ3R80PJT
 
 # Base URL
 BASE_URL=https://hoppscotch.io

.eslintrc.js

@@ -42,6 +42,24 @@ module.exports = {
     "prettier/prettier": ["warn", { semi: false }],
     "import/no-named-as-default": "off",
     "no-undef": "off",
+    // localStorage block
+    "no-restricted-globals": [
+      "error",
+      {
+        name: "localStorage",
+        message:
+          "Do not use 'localStorage' directly. Please use localpersistence.ts functions or stores",
+      },
+    ],
+    // window.localStorage block
+    "no-restricted-syntax": [
+      "error",
+      {
+        selector: "CallExpression[callee.object.property.name='localStorage']",
+        message:
+          "Do not use 'localStorage' directly. Please use localpersistence.ts functions or stores",
+      },
+    ],
   },
   globals: {
     $nuxt: true,

.github/ISSUE_TEMPLATE/custom.md

@@ -6,5 +6,3 @@ labels: ''
 assignees: ''
 
 ---
-
-

.github/semantic.yml

@@ -0,0 +1,5 @@
+# Always validate the PR title AND all the commits
+titleAndCommits: true
+# Allows use of Merge commits (eg on github: "Merge branch 'master' into feature/ride-unicorns")
+# this is only relevant when using commitsOnly: true (or titleAndCommits: true)
+allowMergeCommits: true

.github/workflows/codeql-analysis.yml

@@ -31,15 +31,6 @@ jobs:
     steps:
     - name: Checkout repository
       uses: actions/checkout@v2
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
-
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
@@ -47,7 +38,7 @@ jobs:
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
-        # By default, queries listed here will override any specified in a config file. 
+        # By default, queries listed here will override any specified in a config file.
         # Prefix the list here with "+" to use these queries and those in the config file.
         # queries: ./path/to/local/query, your-org/your-repo/queries@main
 

.github/workflows/firebase-hosting-merge.yml

@@ -0,0 +1,19 @@
+# This file was auto-generated by the Firebase CLI
+# https://github.com/firebase/firebase-tools
+
+name: Deploy to Firebase Hosting on merge
+'on':
+  push:
+    branches:
+      - main
+jobs:
+  build_and_deploy:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: FirebaseExtended/action-hosting-deploy@v0
+        with:
+          repoToken: '${{ secrets.GITHUB_TOKEN }}'
+          firebaseServiceAccount: '${{ secrets.FIREBASE_SERVICE_ACCOUNT_POSTWOMAN_API }}'
+          channelId: live
+          projectId: postwoman-api

.github/workflows/tests.yml

@@ -0,0 +1,25 @@
+name: Node.js CI
+
+on:
+  push:
+    branches: [ main ]
+  pull_request:
+    branches: [ main ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [14.x]
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - run: npm ci
+      - run: npm test

.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+npx --no-install commitlint --edit ""

.stylelintrc.js

@@ -8,7 +8,6 @@ module.exports = {
       {
         ignoreAtRules: [
           "extends",
-          "tailwind",
           "apply",
           "variants",
           "responsive",

.travis.yml

@@ -1,34 +0,0 @@
-# == INSTRUCTIONS FOR SETTING UP TRAVIS ==
-#
-# 1. Find this repository in your Travis-CI dashboard.
-#    open settings and add an environment variable called
-#    GITHUB_ACCESS_TOKEN and set it to your personal access token.addons:
-#    See: https://help.github.com/en/articles/creating-a-personal-access-token-for-the-command-line
-#
-#    **DO NOT TURN ON 'Display value in build log'!!!!**
-#
-# 2. Push the code to the repository.
-
-language: node_js
-node_js:
-  - lts/*
-
-os: linux
-
-cache: npm
-
-branches:
-  only:
-    - main
-
-install:
-  - npm ci
-
-before_script:
-  - npm run build # use nuxt build and start to run tests
-
-script:
-  - npm test
-
-notifications:
-  webhooks: https://www.travisbuddy.com

Dockerfile

@@ -1,4 +1,4 @@
-FROM node:12.10.0-alpine
+FROM node:12-alpine
 
 LABEL maintainer="Hoppscotch (support@hoppscotch.io)"
 

GITHUB_EXTERNSHIP.md

@@ -1,109 +0,0 @@
-# **GitHub Externship @ Hoppscotch**
-
-**We ❤️ open source**
-
-We are super excited to be a ‘Partner Organization’ of GitHub Externship 2021 and look forward to supporting all interested students to participate and contribute to our [open source projects](https://github.com/hoppscotch).
-
-This document covers the process, expectations and guidelines for any interested student so that we can guide, mentor in the best possible manner and most importantly review your community engagement which is a critical factor along with your project idea to be selected from our organization.
-
-**This post will be updated from time to time. So please keep an eye on it.**
-
-Before, any of you jump in and start contributing, here are a few documents from the GitHub Externship Team which we advise every student to read through carefully and thoroughly:
-
-- [GitHub Externship: Website](https://github-externships.github.io/externship/index.html)
-- [GitHub Externship: Program Structure](https://github-externships.github.io/externship/structure.html)
-
-Our awesome community members frequently request for features on our [Discord server](https://hoppscotch.io/discord), [Telegram group](https://hoppscotch.io/externship_telegram), [GitHub issues tab](https://github.com/hoppscotch/hoppscotch/issues?q=is%3Aissue+is%3Aopen+sort%3Aupdated-desc) and we have a never ending list of awesome ideas. However, keeping in mind the 3 months time span, we have filtered through our stockpile and come up with the following ideas for [GitHub Externship](https://github-externships.github.io/externship/index.html) program.
-
-## **Ideas**
-
-If you’re a student interested in working with Hoppscotch during GitHub Externship, we’ve assembled for you a list of 20 ideas under the following three categories:
-
-### **1. Implement existing feature requests:**
-
-- [gRPC-Web support](https://github.com/hoppscotch/hoppscotch/issues/402)
-
-  Like swagger, let users view message formats from `.proto` / `URL` and test the server methods by sending any messages from the Hoppscotch.
-
-  [**`Learn more →`**](https://github.com/hoppscotch/hoppscotch/issues/402)
-
-- [Swagger / OpenAPI support](https://github.com/hoppscotch/hoppscotch/issues/470)
-
-  Like [Swagger Inspector](https://inspector.swagger.io/builder) / [Swagger Editor](https://editor.swagger.io). Let users import `swagger.json` and test the server methods by sending any messages from the Hoppscotch.
-
-  [**`Learn more →`**](https://github.com/hoppscotch/hoppscotch/issues/470)
-
-- [Mock Server](https://github.com/hoppscotch/hoppscotch/issues/1598)
-
-  Mock server allows users to create mock endpoints that accepts request from the system-under-test or from a `json` file.
-
-  [**`Learn more →`**](https://github.com/hoppscotch/hoppscotch/issues/1598)
-
-### **2. Implement new features:**
-
-If you'd like to implement a totally new feature to help developers make API testing easy, feel free to come up with your own feature request or a port of feature from other API testing tools.
-
-[**Create new feature request →**](https://github.com/hoppscotch/hoppscotch/issues/new?assignees=&labels=&template=feature_request.md&title=Feature%20[GitHub%20Externship]:)
-
-### **3. Refactor existing features:**
-
-If you'd like to refactor an already implemented feature / workflow - feel free to open a PR to do that. We appreciate using industry best pratices and latest technologies on all of our open source projects.
-
-## **Built with**
-
-- [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
-- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Tailwind CSS](https://tailwindcss.com)
-- [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
-- [TypeScript](https://www.typescriptlang.org)
-- [Vue](https://vuejs.org)
-- [Nuxt](https://nuxtjs.org)
-
-## **Contributing**
-
-Please contribute using [GitHub Flow](https://guides.github.com/introduction/flow). Create a branch, add commits, and [open a pull request](https://github.com/hoppscotch/hoppscotch/compare).
-
-Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDUCT`](CODE_OF_CONDUCT.md), and the process for submitting pull requests to us.
-
-## **Quick links**
-
-[**`Repository →`**](https://github.com/hoppscotch/hoppscotch)
-
-[**`Web app →`**](https://hoppscotch.io)
-
-[**`Discord server →`**](https://hoppscotch.io/discord)
-
-[**`Telegram group →`**](https://hoppscotch.io/externship_telegram)
-
-## **Discussions channel**
-
-We use [GitHub Discussions](https://github.com/hoppscotch/hoppscotch/discussions) as the primary channel for anything and everything related to GitHub Externship, ranging from
-
-- Queries on issues you’re working or thinking about to take up.
-- Mentor advice on your project ideas [Google Drive document once there is enough clarity for easier collaboration and feedback – check project proposal ideas above]
-- Helping out your friends to onboard and contribute
-- Finally even selection updates etc.
-
-Before asking a question please check this [How do I ask a good question?](https://stackoverflow.com/help/how-to-ask)
-
-## **Need help?**
-
-Start a discussion [here](https://github.com/hoppscotch/hoppscotch/discussions) if you’re unable to get a response from the [Telegram](https://hoppscotch.io/externship_telegram), [Discord](https://hoppscotch.io/discord) communities.
-
-Start a new idea under [discussions](https://github.com/hoppscotch/hoppscotch/discussions) only once you’ve finalized your project proposal.
-
-Send us an email at support@hoppscotch.io for any administrative or operational concerns regarding the program.
-
-## **Submit your proposal on time**
-
-You can find the complete GitHub Externship program timeline [here](https://github-externships.github.io/externship/structure.html). Students can begin registering and submitting project proposals to mentor organizations—including Hoppscotch—on April 22, 2021.
-
-All proposals must be submitted by May 21, 2021.
-
-We look forward to seeing your proposals for a happy summer of coding.
-
-## **Mentors**
-
-- [Liyas Thomas](https://github.com/liyasthomas)
-- [Andrew Bastin](https://github.com/andrewbastin)
-
-If you have any questions or queries please contact us via [Telegram](https://hoppscotch.io/externship_telegram), [Discord](https://hoppscotch.io/discord) or send an email to us at support@hoppscotch.io.

README.md

@@ -1,58 +1,55 @@
 <div align="center">
-  <a href="https://hoppscotch.io"><img src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/logo.png" alt="hoppscotch.io logo" height="128"></a>
-  <br>
-  <br>
+  <a href="https://hoppscotch.io">
+    <img
+      src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/logo.png"
+      alt="Hoppscotch Logo"
+      height="64"
+    />
+  </a>
+  <br />
   <p>
-    <b>Hoppscotch - Open source API development ecosystem</b>
+    <h3>
+      <b>
+        Hoppscotch
+      </b>
+    </h3>
   </p>
   <p>
-     <i>Helps you create requests faster, saving precious time on development - <a href="https://eepurl.com/g6n_P5">Subscribe</a></i>
+    <b>
+      Open source API development ecosystem
+    </b>
   </p>
   <p>
 
-[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen?logo=github)](CODE_OF_CONDUCT.md) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fhoppscotch.io&logo=hoppscotch)](https://hoppscotch.io) [![Travis Build Status](https://img.shields.io/travis/com/hoppscotch/hoppscotch/main?logo=Travis)](https://travis-ci.com/hoppscotch/hoppscotch) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fhoppscotch.io%2F)](https://twitter.com/share?text=%F0%9F%91%BD%20Hoppscotch%20%E2%80%A2%20Open%20source%20API%20development%20ecosystem%20-%20Helps%20you%20create%20requests%20faster,%20saving%20precious%20time%20on%20development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io)
+[![contributions welcome](https://img.shields.io/badge/contributions-welcome-brightgreen?logo=github)](CODE_OF_CONDUCT.md) [![Website](https://img.shields.io/website?url=https%3A%2F%2Fhoppscotch.io&logo=hoppscotch)](https://hoppscotch.io) [![Tests](https://github.com/hoppscotch/hoppscotch/actions/workflows/tests.yml/badge.svg)](https://github.com/hoppscotch/hoppscotch/actions) [![Tweet](https://img.shields.io/twitter/url?url=https%3A%2F%2Fhoppscotch.io%2F)](https://twitter.com/share?text=%F0%9F%91%BD%20Hoppscotch%20%E2%80%A2%20Open%20source%20API%20development%20ecosystem%20-%20Helps%20you%20create%20requests%20faster,%20saving%20precious%20time%20on%20development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io)
 
   </p>
   <p>
-    <sub>Built with ❤︎ by
-      <a href="https://github.com/liyasthomas">liyasthomas</a> and
-      <a href="https://github.com/hoppscotch/hoppscotch/graphs/contributors">contributors</a>
+    <sub>
+      Built with ❤︎ by
+      <a href="https://github.com/hoppscotch/hoppscotch/graphs/contributors">
+        contributors
+      </a>
     </sub>
   </p>
+  <br />
+  <p>
+    <a href="https://hoppscotch.io">
+      <img
+        src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/images/screenshots/light_rest.png"
+        alt="Screenshot"
+        width="100%"
+      />
+    </a>
+  </p>
 </div>
 
-<p align="center">
-  <b>Sponsored by</b>
-  <br>
-  <br>
-  <a href="https://appwrite.io/?utm_source=hoppscotch&utm_medium=banner&utm_campaign=hello" title="Appwrite" target="_blank">
-    <img height="60px" src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/assets/images/appwrite-banner.svg" title="Appwrite">
-  </a>
-</p>
-
-<div align="center">
-  <a href="https://hoppscotch.io"><img src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/images/screenshots/banner_dark.png" alt="Screenshot" width="100%"></a>
-</div>
-
-<p align="center">
-  <b>Powered by</b>
-  <br>
-  <br>
-  <a href="https://oss.capital/?ref=hoppscotch" title="OSS Capital" target="_blank">
-    <img height="100px" src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/assets/images/ossc-banner.svg" title="OSS Capital">
-  </a>
-</p>
-
-#### **Contact**
-
-[![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-2CA5E0?logo=Telegram)](https://hoppscotch.io/telegram) [![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://hoppscotch.io/discord)
-
 #### **Support**
 
-[![Sponsor on GitHub](https://img.shields.io/badge/sponsor-GitHub-181717?logo=github)](https://github.com/sponsors/hoppscotch) [![Contribute on Open Collective](https://img.shields.io/badge/contribute-Open%20Collective-7FADF2?logo=open-collective)](https://opencollective.com/hoppscotch) [![Join on Patreon](https://img.shields.io/badge/join-Patreon-F96854?logo=patreon)](https://www.patreon.com/liyasthomas) [![Donate on PayPal](https://img.shields.io/badge/donate-PayPal-00457C?logo=paypal)](https://www.paypal.me/liyascthomas)
+[![Chat on Discord](https://img.shields.io/badge/chat-Discord-7289DA?logo=discord)](https://hoppscotch.io/discord) [![Chat on Telegram](https://img.shields.io/badge/chat-Telegram-2CA5E0?logo=Telegram)](https://hoppscotch.io/telegram)
 
-<details>
-  <summary><i>Table of contents</i></summary>
+<details open>
+  <summary><b>Table of contents</b></summary>
 
 ---
 
@@ -61,21 +58,12 @@
 - [Usage](#usage)
 - [Built with](#built-with)
 - [Developing](#developing)
-  - [Browser based development environment](#browser-based-development-environment)
-  - [Local development environment](#local-development-environment)
-  - [Docker compose](#docker-compose)
 - [Docker](#docker)
 - [Releasing](#releasing)
 - [Contributing](#contributing)
 - [Continuous Integration](#continuous-integration)
 - [Changelog](#changelog)
 - [Authors](#authors)
-  - [Lead Developers](#lead-developers)
-  - [Collaborators](#collaborators-)
-  - [Financial Contributors](#financial-contributors)
-    - [GitHub Sponsors](#github-sponsors)
-    - [Open Collective](#open-collective)
-  - [Code Contributors](#code-contributors)
 - [License](#license)
 
 ---
@@ -88,84 +76,48 @@
 
 ⚡️ **Fast:** Send requests and get/copy responses in real-time.
 
-<details>
-  <summary><i>HTTP Methods</i></summary>
-
----
+**HTTP Methods**
 
 - `GET` - Requests retrieve resource information
-- `HEAD` - Retrieve response headers identical to those of a GET request, but without the response body.
 - `POST` - The server creates a new entry in a database
 - `PUT` - Updates an existing resource
+- `PATCH` - Very similar to `PUT` but makes a partial update on a resource
 - `DELETE` - Deletes resource or related component
+- `HEAD` - Retrieve response headers identical to those of a GET request, but without the response body.
 - `CONNECT` - Establishes a tunnel to the server identified by the target resource
 - `OPTIONS` - Describe the communication options for the target resource
 - `TRACE` - Performs a message loop-back test along the path to the target resource
-- `PATCH` - Very similar to `PUT` but makes a partial update on a resource
 - `<custom>` - Some APIs use custom request methods such as `LIST`. Type in your custom methods.
 
----
+🌈 **Make it yours:** Customizable combinations for background, foreground and accent colors — [customize now ✨](https://hoppscotch.io/settings).
 
-</details>
+**Theming**
 
-🌈 **Make it yours:** Customizable combinations for background, foreground and accent colors. [Customize now ✨](https://hoppscotch.io/settings)
+- Choose theme: System (default), Light, Dark and Black
+- Choose accent color: Green (default), Teal, Blue, Indigo, Purple, Yellow, Orange, Red and Pink
+- Distraction free Zen mode
 
-<details>
-  <summary><i>Theming</i></summary>
-
----
-
-- Choose theme: System, Light, Dark (default) and Black
-- Choose accent color: Blue, Green (default), Teal, Indigo, Purple, Orange, Pink, Red, and Yellow
-- Toggle auto-scroll to response
-
-<p>
-  <a href="https://hoppscotch.io"><img src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/static/images/screenshots/banner_light.png" alt="Screenshot" width="100%"></a>
-</p>
-
----
-
-</details>
-
-_Customized themes are synced with local session storage_
+_Customized themes are synced with cloud / local session_
 
 🔥 **PWA:** Install as a [PWA](https://developers.google.com/web/progressive-web-apps) on your device.
 
-<details>
-  <summary><i>Features</i></summary>
-
----
-
 - Instant loading with Service Workers
 - Offline support
 - Low RAM/memory and CPU usage
 - Add to Home Screen
 - Desktop PWA
 
----
-
-</details>
-
 🚀 **Request:** Retrieve response from endpoint instantly.
 
-- Choose `method`
-- Enter `URL`
-- Send
-
-<details>
-  <summary><i>Features</i></summary>
-
----
+1. Choose `method`
+2. Enter `URL`
+3. Send
 
 - Copy/share public "Share URL"
 - Generate/copy request code snippets for 10+ languages and frameworks
 - Import `cURL`
 - Label requests
 
----
-
-</details>
-
 🔌 **WebSocket:** Establish full-duplex communication channels over a single TCP connection.
 
 📡 **Server Sent Events:** Receive a stream of updates from a server over a HTTP connection without resorting to polling.
@@ -176,27 +128,13 @@ _Customized themes are synced with local session storage_
 
 🔮 **GraphQL:** GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.
 
-<details>
-  <summary><i>Features</i></summary>
-
----
-
-- Set endpoint and get schemas
+- Set endpoint and get schema
 - Multi-column docs
 - Set custom request headers
 - Query schema
 - Get query response
 
----
-
-</details>
-
-🔐 **Authentication:** Allows to identify the end user.
-
-<details>
-  <summary><i>Types</i></summary>
-
----
+🔐 **Authorization:** Allows to identify the end user.
 
 - None
 - Basic
@@ -204,137 +142,61 @@ _Customized themes are synced with local session storage_
 - OAuth 2.0
 - OIDC Access Token/PKCE
 
----
-
-</details>
-
 📢 **Headers:** Describes the format the body of your request is being sent as.
 
 📫 **Parameters:** Use request parameters to set varying parts in simulated requests.
 
 📃 **Request Body:** Used to send and receive data via the REST API.
 
-<details>
-  <summary><i>Options</i></summary>
-
----
-
 - Set `Content Type`
-- Add or remove Parameter list
+- FormData, JSON and many more
 - Toggle between key-value and RAW input parameter list
 
----
-
-</details>
-
 👋 **Response:** Contains the status line, headers and the message/response body.
 
-<details>
-  <summary><i>Features</i></summary>
-
----
-
 - Copy response to clipboard
 - Download response as a file
 - View response headers
 - View raw and preview of HTML, image, JSON, XML responses
 
----
-
-</details>
-
 ⏰ **History:** Request entries are synced with cloud / local session storage to restore with a single click.
 
 📁 **Collections:** Keep your API requests organized with collections and folders. Reuse them with a single click.
 
-<details>
-  <summary><i>Features</i></summary>
-
----
-
 - Unlimited collections, folders and requests
 - Nested folders
-- Export as / import from GitHub gist
-
----
-
-</details>
+- Export and import as file or GitHub gist
 
 _Collections are synced with cloud / local session storage_
 
 🌐 **Proxy:** Enable Proxy Mode from Settings to access blocked APIs.
 
-<details>
-  <summary><i>Features</i></summary>
-
----
-
 - Hide your IP address
 - Fixes [`CORS`](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) (Cross Origin Resource Sharing) issues
-- Access APIs served in non-HTTPS (`http://`)
-- Use custom Proxy URL
+- Access APIs served in non-HTTPS `[http://]` endpoints
+- Use your own Proxy URL
 
----
-
-</details>
-
-_Official proxy server is hosted by Hoppscotch - **[GitHub](https://github.com/hoppscotch/proxyscotch)** - **[Privacy Policy](https://github.com/hoppscotch/proxyscotch/wiki/Privacy-policy)**_
+_Official proxy server is hosted by Hoppscotch - **[GitHub](https://github.com/hoppscotch/proxyscotch)** - **[Privacy Policy](https://docs.hoppscotch.io/privacy)**_
 
 📜 **Pre-Request Scripts β:** Snippets of code associated with a request that are executed before the request is sent.
 
-<details>
-  <summary><i>Use-cases</i></summary>
-
----
-
-- Initialize environment variables
+- Set environment variables
 - Include timestamp in the request headers
 - Send a random alphanumeric string in the URL parameters
-
----
-
-</details>
+- Any JavaScript functions
 
 📄 **API Documentation:** Create and share dynamic API documentation easily, quickly.
 
-<details>
-  <summary><i>Usage</i></summary>
-
----
-
 1. Add your requests to Collections and Folders
 2. Export Collections and easily share your APIs with the rest of your team
 3. Import Collections and Generate Documentation on-the-go
 
----
-
-</details>
-
 ⌨️ **Keyboard Shortcuts:** Optimized for efficiency.
 
-> **[Shortcuts WIki](https://github.com/hoppscotch/hoppscotch/wiki/Shortcuts)**
+> **[Read our documentation on Keyboard Shortcuts](https://docs.hoppscotch.io/features/shortcuts)**
 
 🌎 **i18n:** Experience the app in your own language.
 
-<details>
-  <summary><i>Usage</i></summary>
-
----
-
-1. Scroll down to the footer
-2. Click "Choose Language" icon button
-3. Select your language from the menu
-
----
-
-</details>
-
-_Keep in mind: Translations aren't available for all source and target language combinations_
-
-**To provide a localized experience for users around the world, you can add you own translations.**
-
-_**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/hoppscotch/hoppscotch/tree/i18n) only!**_
-
 📦 **Add-ons:** Official add-ons for hoppscotch.
 
 - **[Proxy](https://github.com/hoppscotch/proxyscotch)** - A simple proxy server created for Hoppscotch
@@ -347,56 +209,36 @@ _**All `i18n` contributions are welcome to `i18n` [branch](https://github.com/ho
 
 - **[Hopp-Doc-Gen](https://github.com/hoppscotch/hopp-doc-gen)** - An API doc generator CLI for Hoppscotch
 
-_Add-ons are developed and maintained under **[Official Hoppscotch Organization](https://github.com/hoppscotch)**._
+_Add-ons are developed and maintained under **[Hoppscotch Organization](https://github.com/hoppscotch)**._
 
-☁️ **Auth + Sync:** Sign in and sync in real-time.
+☁️ **Auth + Sync:** Sign in and sync your data in real-time.
 
 **Sign in with**
 
-- Google
 - GitHub
+- Google
+- Email
 
-**Sync**
+**Synchronize your data**
 
 - History
 - Collections
 - Environments
-- Notes
+- Settings
 
 ✅ **Post-Request Tests β:** Write tests associated with a request that are executed after the request response.
 
-<details>
-  <summary><i>Use-cases</i></summary>
-
----
-
 - Check the status code as an integer
 - Filter response headers
 - Parse the response data
-
----
-
-</details>
-
-📝 **Notes** : Instantly jot down notes, tasks or whatever you feel like as they come to your mind.
-
-_Notes are only available for signed-in users_
+- Any JavaScript functions
 
 🌱 **Environments** : Environment variables allow you to store and reuse values in your requests and scripts.
 
-<details>
-  <summary><i>Features</i></summary>
-
----
-
 - Unlimited environments and variables
 - Initialize through pre-request script
 - Export as / import from GitHub gist
 
----
-
-</details>
-
 <details>
   <summary><i>Use-cases</i></summary>
 
@@ -412,20 +254,11 @@ _Notes are only available for signed-in users_
 
 👨‍👩‍👧‍👦 **Teams β:** Helps you collaborate across your team to design, develop, and test APIs faster.
 
-<details>
-  <summary><i>Features</i></summary>
-
----
-
 - Unlimited team collections and shared requests
 - Unlimited team members
 - User roles
 
----
-
-</details>
-
-**To find out more, please check out [Hoppscotch Wiki](https://github.com/hoppscotch/hoppscotch/wiki).**
+**For more features, please read our [documentation](https://docs.hoppscotch.io).**
 
 ## **Demo**
 
@@ -441,7 +274,7 @@ _Notes are only available for signed-in users_
 ## **Built with**
 
 - [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML)
-- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Tailwind CSS](https://tailwindcss.com)
+- [CSS](https://developer.mozilla.org/en-US/docs/Web/CSS), [SCSS](https://sass-lang.com), [Windi CSS](https://windicss.org)
 - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript)
 - [TypeScript](https://www.typescriptlang.org)
 - [Vue](https://vuejs.org)
@@ -453,18 +286,19 @@ _Notes are only available for signed-in users_
 
 _Sample keys only works with the [production build](https://hoppscotch.io)._
 
-#### Browser based development environment
+### Browser based development environment
 
-[![Open in Gitpod](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/hoppscotch/hoppscotch)
+- [GitHub codespace](https://docs.github.com/en/codespaces/developing-in-codespaces/creating-a-codespace)
+- [Gitpod](https://gitpod.io/#https://github.com/hoppscotch/hoppscotch)
 
-#### Local development environment
+### Local development environment
 
 1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
 2. Install dependencies by running `npm install` within the directory that you cloned (probably `hoppscotch`).
 3. Start the development server with `npm run dev`.
 4. Open development site by going to [`http://localhost:3000`](http://localhost:3000) in your browser.
 
-#### Docker compose
+### Docker compose
 
 1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
 2. Run `docker-compose up`
@@ -475,38 +309,9 @@ _Sample keys only works with the [production build](https://hoppscotch.io)._
 **Official container** &nbsp; [![hoppscotch/hoppscotch](https://img.shields.io/docker/pulls/hoppscotch/hoppscotch?style=social)](https://hub.docker.com/r/hoppscotch/hoppscotch)
 
 ```bash
-#pull
-docker pull hoppscotch/hoppscotch
-
-#build
-docker build -t hoppscotch/hoppscotch:latest .
-
-#run
-docker run -p 3000:3000 hoppscotch/hoppscotch:latest
+docker run --rm --name hoppscotch -p 3000:3000 hoppscotch/hoppscotch:latest
 ```
 
-**Legacy container** &nbsp; [![liyasthomas/postwoman](https://img.shields.io/docker/pulls/liyasthomas/postwoman?style=social)](https://hub.docker.com/r/liyasthomas/postwoman)
-
-<details>
-  <summary><i>Legacy container</i></summary>
-
----
-
-```bash
-#pull
-docker pull liyasthomas/postwoman
-
-#build
-docker build -t liyasthomas/postwoman:latest .
-
-#run
-docker run -p 3000:3000 liyasthomas/postwoman:latest
-```
-
----
-
-</details>
-
 ## **Releasing**
 
 1. [Clone this repo](https://help.github.com/en/articles/cloning-a-repository) with git.
@@ -522,7 +327,7 @@ Please read [`CONTRIBUTING`](CONTRIBUTING.md) for details on our [`CODE OF CONDU
 
 ## **Continuous Integration**
 
-We use [Travis CI](https://travis-ci.com) for continuous integration. Check out our [Travis CI Status](https://travis-ci.com/hoppscotch/hoppscotch).
+We use [GitHub Actions](https://github.com/features/actions) for continuous integration. Check out our [build workflows](https://github.com/hoppscotch/hoppscotch/actions).
 
 ## **Changelog**
 
@@ -530,167 +335,15 @@ See the [`CHANGELOG`](CHANGELOG.md) file for details.
 
 ## **Authors**
 
-### Lead Developers
+This project exists thanks to all the people who contribute — [make a contribution](CONTRIBUTING.md).
 
-- **[Liyas Thomas](https://github.com/liyasthomas)** - _Author_
-- **[Andrew Bastin](https://github.com/andrewbastin)** - _Lead developer_
-- **[Caneco](https://twitter.com/caneco)** - _Logo and banner designer_
-
-### Collaborators <!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
-
-<!-- ALL-CONTRIBUTORS-BADGE:END -->
-
-<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
-<!-- prettier-ignore-start -->
-<!-- markdownlint-disable -->
-<table>
-  <tr>
-    <td align="center"><a href="https://liyasthomas.web.app"><img src="https://avatars1.githubusercontent.com/u/10395817?v=4" width="100px;" alt=""/><br /><sub><b>Liyas Thomas</b></sub></a><br /><a href="https://github.com/liyasthomas/hoppscotch/commits?author=liyasthomas" title="Code">💻</a> <a href="#design-liyasthomas" title="Design">🎨</a></td>
-    <td align="center"><a href="https://github.com/AndrewBastin"><img src="https://avatars2.githubusercontent.com/u/9131943?v=4" width="100px;" alt=""/><br /><sub><b>Andrew Bastin</b></sub></a><br /><a href="https://github.com/liyasthomas/hoppscotch/commits?author=AndrewBastin" title="Code">💻</a></td>
-  </tr>
-</table>
-
-<!-- markdownlint-enable -->
-<!-- prettier-ignore-end -->
-
-<!-- ALL-CONTRIBUTORS-LIST:END -->
-
-See the list of [contributors](https://github.com/hoppscotch/hoppscotch/graphs/contributors) who participated in this project.
-
-### Financial Contributors
-
-Become a financial contributor and help us sustain our community [[Support](#support)].
-
-#### GitHub Sponsors
-
-<p align="center">
-<a href="https://simplescraper.io/?utm_source=hs" target="_blank" rel="noopener">
-<img
-  width="100"
-	src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/assets/images/Simplescraper.png"
-	alt="Simplescraper"
-/>
-</a>
-</p>
-
-<p align="center">
-<a href="https://github.com/anmolm96" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/anmolm96.png?size=64"
-	alt="Anmol Maini"
-/>
-</a>
-<a href="https://github.com/juzhiyuan" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/juzhiyuan.png?size=64"
-	alt="琚致远"
-/>
-</a>
-<a href="https://github.com/eldadfux" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/eldadfux.png?size=64"
-	alt="Eldad A. Fux"
-/>
-</a>
-<a href="https://github.com/aishwarydhare" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/aishwarydhare.png?size=64"
-	alt="Aishwary Dhare"
-/>
-</a>
-<a href="https://github.com/rithish" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/rithish.png?size=64"
-	alt="Rithish"
-/>
-</a>
-<a href="https://github.com/ankumar" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/ankumar.png?size=64"
-	alt="Anil Kumar"
-/>
-</a>
-<a href="https://github.com/gpeal" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/gpeal.png?size=64"
-	alt="Gabriel Peal"
-/>
-</a>
-<a href="https://github.com/donokuda" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/donokuda.png?size=64"
-	alt="Don Okuda"
-/>
-</a>
-<a href="https://github.com/ebrescia" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/ebrescia.png?size=64"
-	alt="Erica Brescia"
-/>
-</a>
-<a href="https://github.com/mlynch" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/mlynch.png?size=64"
-	alt="Max Lynch"
-/>
-</a>
-<a href="https://github.com/brianshaler" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/brianshaler.png?size=64"
-	alt="Brian Shaler"
-/>
-</a>
-<a href="https://github.com/mxstbr" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/mxstbr.png?size=64"
-	alt="Max Stoiber"
-/>
-</a>
-<a href="https://github.com/jjcaine" target="_blank" rel="noopener">
-<img
-  width="64"
-	src="https://github.com/jjcaine.png?size=64"
-	alt="John Caine"
-/>
-</a>
-</p>
-
-#### Open Collective
-
-<p align="center">
-<a href="https://pipedream.com/?ref=hoppscotch" target="_blank" rel="noopener">
-<img
-  width="100"
-	src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/assets/images/pipedream.png"
-	alt="pipedream"
-/>
-</a>
-<a href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=github&utm_campaign=hoppscotch-sponsorship" target="_blank" rel="noopener">
-<img
-  width="100"
-	src="https://raw.githubusercontent.com/hoppscotch/hoppscotch/main/assets/images/Paw-Logo-for-Hoppscotch.png"
-	alt="Paw"
-/>
-</a>
-</p>
-
-### Code Contributors
-
-This project exists thanks to all the people who contribute [[Contribute](CONTRIBUTING.md)].
-
-<a href="https://github.com/hoppscotch/hoppscotch/graphs/contributors"><img src="https://opencollective.com/hoppscotch/contributors.svg?width=890&button=false" /></a>
+<div align="center">
+  <a href="https://github.com/hoppscotch/hoppscotch/graphs/contributors">
+    <img src="https://opencollective.com/hoppscotch/contributors.svg?width=840&button=false"
+      alt="Contributors"
+      width="100%" />
+  </a>
+</div>
 
 ## **License**
 

TRANSLATIONS.md

@@ -1,41 +1,23 @@
 # Translations
 
-Thanks for your interest in helping translating the software!
+Thanks for showing your interest in helping us to translate the software.
 
-## Starting a translation
+## Creating a new translation
 
-Before you start working on a translation, look through the [open pull requests](https://github.com/hoppscotch/hoppscotch/pulls) to see if anyone else is already working on one for your language.
+Before you start working on a new language, please look through the [open pull requests](https://github.com/hoppscotch/hoppscotch/pulls) to see if anyone is already working on a translation. If you find one, please join the discussion and help us keep the existing translations up to date.
 
-If there's not, then today is your day to lead this effort! Here's how to start:
+if there is no existing translation, you can create a new one by following these steps:
 
-1. [Fork this repository](https://github.com/hoppscotch/hoppscotch/fork)
-2. Create a new branch for your translation work e.g. `es`.
-3. Copy `lang/en-US.json` to your target language file e.g. `lang/es-ES.json` and translate all the strings.
-4. Add your language entry to `nuxt.config.js`.
+1. **[Fork the repository](https://github.com/hoppscotch/hoppscotch/fork).**
+2. **Create a new branch for your translation.**
+3. **Create target language file in the [`locales`](https://github.com/hoppscotch/hoppscotch/tree/main/locales) directory.**
+4. **Copy the contents of the source file [`locales/en.json`](https://github.com/hoppscotch/hoppscotch/blob/main/locales/en.json) to the target language file.**
+5. **Translate the strings in the target language file.**
+6. **Add your language entry to [`languages.json`](https://github.com/hoppscotch/hoppscotch/blob/main/languages.json).**
+7. **Save & commit changes.**
+8. **Send a pull request.**
 
-   e.g.
-
-   ```
-    i18n: {
-      locales: [
-        {
-          code: "en",
-          name: "English",
-          iso: "en-US",
-          file: "en-US.json",
-        },
-        {
-          code: 'es',
-          name: 'Español',
-          iso: 'es-ES',
-          file: 'es-ES.json'
-        }
-      ]
-    }
-   ```
-
-5. Save & commit changes.
-6. Send a pull request. (You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However your pull request will not be merged until all steps above are complete.)
+_You may send a pull request before all steps above are complete: e.g., you may want to ask for help with translations, or getting tests to pass. However, your pull request will not be merged until all steps above are complete._
 
 Completing an initial translation of the whole site is a fairly large task. One way to break that task up is to work with other translators through pull requests on your fork. You can also [add collaborators to your fork](https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/inviting-collaborators-to-a-personal-repository) if you'd like to invite other translators to commit directly to your fork and share responsibility for merging pull requests.
 

__mocks__/svgMock.js

@@ -1 +0,0 @@
-export default {}

assets/css/fonts.css

@@ -1,259 +0,0 @@
-/* fallback */
-@font-face {
-  font-family: "Material Icons";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Material_Icons-400-fallback1.woff2") format("woff2");
-}
-
-/* devanagari */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-400-devanagari2.woff2") format("woff2");
-  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
-    U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-400-latin-ext3.woff2") format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-400-latin4.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-/* devanagari */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-500-devanagari5.woff2") format("woff2");
-  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
-    U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-500-latin-ext6.woff2") format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 500;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-500-latin7.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-/* devanagari */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-600-devanagari8.woff2") format("woff2");
-  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
-    U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-600-latin-ext9.woff2") format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 600;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-600-latin10.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-/* devanagari */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-700-devanagari11.woff2") format("woff2");
-  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
-    U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-700-latin-ext12.woff2") format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 700;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-700-latin13.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-/* devanagari */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-800-devanagari14.woff2") format("woff2");
-  unicode-range: U+0900-097F, U+1CD0-1CF6, U+1CF8-1CF9, U+200C-200D, U+20A8,
-    U+20B9, U+25CC, U+A830-A839, U+A8E0-A8FB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-800-latin-ext15.woff2") format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: "Poppins";
-  font-style: normal;
-  font-weight: 800;
-  font-display: swap;
-  src: url("~assets/fonts/Poppins-800-latin16.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-/* cyrillic-ext */
-@font-face {
-  font-family: "Roboto Mono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Roboto_Mono-400-cyrillic-ext17.woff2") format("woff2");
-  unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F,
-    U+FE2E-FE2F;
-}
-
-/* cyrillic */
-@font-face {
-  font-family: "Roboto Mono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Roboto_Mono-400-cyrillic18.woff2") format("woff2");
-  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
-
-/* greek */
-@font-face {
-  font-family: "Roboto Mono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Roboto_Mono-400-greek19.woff2") format("woff2");
-  unicode-range: U+0370-03FF;
-}
-
-/* vietnamese */
-@font-face {
-  font-family: "Roboto Mono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Roboto_Mono-400-vietnamese20.woff2") format("woff2");
-  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1,
-    U+01AF-01B0, U+1EA0-1EF9, U+20AB;
-}
-
-/* latin-ext */
-@font-face {
-  font-family: "Roboto Mono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Roboto_Mono-400-latin-ext21.woff2") format("woff2");
-  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
-    U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-}
-
-/* latin */
-@font-face {
-  font-family: "Roboto Mono";
-  font-style: normal;
-  font-weight: 400;
-  font-display: swap;
-  src: url("~assets/fonts/Roboto_Mono-400-latin22.woff2") format("woff2");
-  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
-    U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
-    U+FEFF, U+FFFD;
-}
-
-.material-icons {
-  font-family: "Material Icons"; /* stylelint-disable-line font-family-no-missing-generic-family-keyword */
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  display: inline-block;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-feature-settings: "liga";
-  -webkit-font-smoothing: antialiased;
-}

assets/css/tailwind.css

@@ -1,6 +0,0 @@
-/* purgecss start ignore */
-@tailwind base;
-@tailwind components;
-
-/* purgecss end ignore */
-@tailwind utilities;

assets/icons/chrome.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient x1="49.998%" y1=".706%" x2="49.998%" y2="96.99%" id="IconifyId-17b2bfeca9d-d6badc-3320"><stop stop-color="#86BBE5" offset="0%"></stop><stop stop-color="#1072BA" offset="100%"></stop></linearGradient></defs><path d="M127.789.035s75.32-3.38 115.253 72.328H121.38s-22.96-.74-42.573 27.114c-5.634 11.691-11.69 23.734-4.894 47.468c-9.79-16.586-51.975-90.04-51.975-90.04S51.693 3.028 127.788.035z" fill="#EF3F36"></path><path d="M239.133 192.229s-34.756 66.94-120.253 63.63c10.564-18.276 60.848-105.358 60.848-105.358s12.149-19.508-2.183-50.425c-7.29-10.74-14.72-21.973-38.664-27.96c19.262-.175 103.95 0 103.95 0s31.726 52.715-3.698 120.113z" fill="#FCD900"></path><path d="M16.973 192.757s-40.601-63.56 5.035-135.958c10.529 18.276 60.813 105.358 60.813 105.358s10.846 20.283 44.756 23.31c12.924-.95 26.375-1.76 43.56-19.472C161.663 182.757 119.16 256 119.16 256s-61.552 1.127-102.188-63.243z" fill="#61BC5B"></path><path d="M118.845 256.493l17.113-71.412s18.804-1.48 34.58-18.769c-9.79 17.22-51.693 90.181-51.693 90.181z" fill="#5AB055"></path><path d="M70.462 129.056c0-31.48 25.53-57.01 57.01-57.01c31.48 0 57.01 25.53 57.01 57.01c0 31.481-25.53 57.01-57.01 57.01c-31.48-.035-57.01-25.529-57.01-57.01z" fill="#FFF"></path><path d="M80.004 129.056c0-26.198 21.234-47.467 47.468-47.467c26.198 0 47.467 21.234 47.467 47.467c0 26.199-21.233 47.468-47.467 47.468c-26.199 0-47.468-21.269-47.468-47.468z" fill="url(#IconifyId-17b2bfeca9d-d6badc-3320)"></path><path d="M242.795 72.152l-70.462 20.67s-10.634-15.6-33.487-20.67c19.825-.106 103.949 0 103.949 0z" fill="#EACA05"></path><path d="M72.54 144.339c-9.896-17.149-50.602-87.434-50.602-87.434l52.186 51.622s-5.353 11.022-3.345 26.797l1.76 9.015z" fill="#DF3A32"></path></svg>

assets/icons/discord.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="41.17" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 199"><path d="M216.856 16.597A208.502 208.502 0 0 0 164.042 0c-2.275 4.113-4.933 9.645-6.766 14.046c-19.692-2.961-39.203-2.961-58.533 0c-1.832-4.4-4.55-9.933-6.846-14.046a207.809 207.809 0 0 0-52.855 16.638C5.618 67.147-3.443 116.4 1.087 164.956c22.169 16.555 43.653 26.612 64.775 33.193A161.094 161.094 0 0 0 79.735 175.3a136.413 136.413 0 0 1-21.846-10.632a108.636 108.636 0 0 0 5.356-4.237c42.122 19.702 87.89 19.702 129.51 0a131.66 131.66 0 0 0 5.355 4.237a136.07 136.07 0 0 1-21.886 10.653c4.006 8.02 8.638 15.67 13.873 22.848c21.142-6.58 42.646-16.637 64.815-33.213c5.316-56.288-9.08-105.09-38.056-148.36zM85.474 135.095c-12.645 0-23.015-11.805-23.015-26.18s10.149-26.2 23.015-26.2c12.867 0 23.236 11.804 23.015 26.2c.02 14.375-10.148 26.18-23.015 26.18zm85.051 0c-12.645 0-23.014-11.805-23.014-26.18s10.148-26.2 23.014-26.2c12.867 0 23.236 11.804 23.015 26.2c0 14.375-10.148 26.18-23.015 26.18z" fill="#5865F2"></path></svg>

assets/icons/email.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--simple-icons" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M15.61 12c0 1.99-1.62 3.61-3.61 3.61c-1.99 0-3.61-1.62-3.61-3.61c0-1.99 1.62-3.61 3.61-3.61c1.99 0 3.61 1.62 3.61 3.61M12 0C5.383 0 0 5.383 0 12s5.383 12 12 12c2.424 0 4.761-.722 6.76-2.087l.034-.024l-1.617-1.879l-.027.017A9.494 9.494 0 0 1 12 21.54c-5.26 0-9.54-4.28-9.54-9.54c0-5.26 4.28-9.54 9.54-9.54c5.26 0 9.54 4.28 9.54 9.54a9.63 9.63 0 0 1-.225 2.05c-.301 1.239-1.169 1.618-1.82 1.568c-.654-.053-1.42-.52-1.426-1.661V12A6.076 6.076 0 0 0 12 5.93A6.076 6.076 0 0 0 5.93 12A6.076 6.076 0 0 0 12 18.07a6.02 6.02 0 0 0 4.3-1.792a3.9 3.9 0 0 0 3.32 1.805c.874 0 1.74-.292 2.437-.821c.719-.547 1.256-1.336 1.553-2.285c.047-.154.135-.504.135-.507l.002-.013c.175-.76.253-1.52.253-2.457c0-6.617-5.383-12-12-12" fill="currentColor"></path></svg>

assets/icons/facebook.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M241.871 256.001c7.802 0 14.129-6.326 14.129-14.129V14.129C256 6.325 249.673 0 241.871 0H14.129C6.324 0 0 6.325 0 14.129v227.743c0 7.803 6.324 14.129 14.129 14.129h227.742" fill="#395185"></path><path d="M176.635 256.001v-99.137h33.277l4.982-38.635h-38.259V93.561c0-11.186 3.107-18.809 19.148-18.809l20.459-.009V40.188c-3.54-.471-15.684-1.523-29.812-1.523c-29.498 0-49.692 18.005-49.692 51.071v28.493h-33.362v38.635h33.362v99.137h39.897" fill="#FFF"></path></svg>

assets/icons/github.svg

@@ -0,0 +1 @@
+<svg width="2500" height="2432" viewBox="0 0 256 249" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin meet"><g fill="currentColor"><path d="M127.505 0C57.095 0 0 57.085 0 127.505c0 56.336 36.534 104.13 87.196 120.99 6.372 1.18 8.712-2.766 8.712-6.134 0-3.04-.119-13.085-.173-23.739-35.473 7.713-42.958-15.044-42.958-15.044-5.8-14.738-14.157-18.656-14.157-18.656-11.568-7.914.872-7.752.872-7.752 12.804.9 19.546 13.14 19.546 13.14 11.372 19.493 29.828 13.857 37.104 10.6 1.144-8.242 4.449-13.866 8.095-17.05-28.32-3.225-58.092-14.158-58.092-63.014 0-13.92 4.981-25.295 13.138-34.224-1.324-3.212-5.688-16.18 1.235-33.743 0 0 10.707-3.427 35.073 13.07 10.17-2.826 21.078-4.242 31.914-4.29 10.836.048 21.752 1.464 31.942 4.29 24.337-16.497 35.029-13.07 35.029-13.07 6.94 17.563 2.574 30.531 1.25 33.743 8.175 8.929 13.122 20.303 13.122 34.224 0 48.972-29.828 59.756-58.22 62.912 4.573 3.957 8.648 11.717 8.648 23.612 0 17.06-.148 30.791-.148 34.991 0 3.393 2.295 7.369 8.759 6.117 50.634-16.879 87.122-64.656 87.122-120.973C255.009 57.085 197.922 0 127.505 0"/><path d="M47.755 181.634c-.28.633-1.278.823-2.185.389-.925-.416-1.445-1.28-1.145-1.916.275-.652 1.273-.834 2.196-.396.927.415 1.455 1.287 1.134 1.923M54.027 187.23c-.608.564-1.797.302-2.604-.589-.834-.889-.99-2.077-.373-2.65.627-.563 1.78-.3 2.616.59.834.899.996 2.08.36 2.65M58.33 194.39c-.782.543-2.06.034-2.849-1.1-.781-1.133-.781-2.493.017-3.038.792-.545 2.05-.055 2.85 1.07.78 1.153.78 2.513-.019 3.069M65.606 202.683c-.699.77-2.187.564-3.277-.488-1.114-1.028-1.425-2.487-.724-3.258.707-.772 2.204-.555 3.302.488 1.107 1.026 1.445 2.496.7 3.258M75.01 205.483c-.307.998-1.741 1.452-3.185 1.028-1.442-.437-2.386-1.607-2.095-2.616.3-1.005 1.74-1.478 3.195-1.024 1.44.435 2.386 1.596 2.086 2.612M85.714 206.67c.036 1.052-1.189 1.924-2.705 1.943-1.525.033-2.758-.818-2.774-1.852 0-1.062 1.197-1.926 2.721-1.951 1.516-.03 2.758.815 2.758 1.86M96.228 206.267c.182 1.026-.872 2.08-2.377 2.36-1.48.27-2.85-.363-3.039-1.38-.184-1.052.89-2.105 2.367-2.378 1.508-.262 2.857.355 3.049 1.398"/></g></svg>

assets/icons/google.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M118.2 208.3c19.9-60.3 76.5-103.6 143.7-103.6 36.1 0 68.6 12.8 94.3 33.7L430.5 64C385.2 24.4 327 0 261.8 0 160.9 0 74 57.6 32.3 141.9l85.9 66.4z" fill="currentColor"/><path d="M348 384.3c-23.3 15-52.8 23-86.2 23-66.9 0-123.3-43-143.4-102.9l-86.2 65.4C73.9 454.3 160.8 512 261.8 512c62.6 0 122.4-22.2 167.1-64L348 384.3z" fill="currentColor"/><path d="M428.9 448c46.8-43.7 77.2-108.7 77.2-192 0-15.1-2.3-31.4-5.8-46.5H261.8v98.9h137.3c-6.8 33.3-25 59-51.1 75.9l80.9 63.7z" fill="currentColor"/><path d="M118.4 304.4c-5.1-15.2-7.9-31.4-7.9-48.4 0-16.7 2.7-32.7 7.6-47.7l-85.9-66.4C15.1 176.2 5.8 214.9 5.8 256c0 40.9 9.5 79.6 26.4 113.8l86.2-65.4z" fill="currentColor"/></svg>

assets/icons/graphql.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--fontisto" width="28" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 21 24"><path d="M12.731 2.751L17.666 5.6a2.138 2.138 0 1 1 2.07 3.548l-.015.003v5.7a2.14 2.14 0 1 1-2.098 3.502l-.002-.002l-4.905 2.832a2.14 2.14 0 1 1-4.079.054l-.004.015l-4.941-2.844a2.14 2.14 0 1 1-2.067-3.556l.015-.003V9.15a2.14 2.14 0 1 1 1.58-3.926l-.01-.005c.184.106.342.231.479.376l.001.001l4.938-2.85a2.14 2.14 0 1 1 4.096.021l.004-.015zm-.515.877a.766.766 0 0 1-.057.057l-.001.001l6.461 11.19c.026-.009.056-.016.082-.023V9.146a2.14 2.14 0 0 1-1.555-2.603l-.003.015l.019-.072zm-3.015.059l-.06-.06l-4.946 2.852A2.137 2.137 0 0 1 2.749 9.12l-.015.004l-.076.021v5.708l.084.023l6.461-11.19zm2.076.507a2.164 2.164 0 0 1-1.207-.004l.015.004l-6.46 11.189c.286.276.496.629.597 1.026l.003.015h12.911c.102-.413.313-.768.599-1.043l.001-.001L11.28 4.194zm.986 16.227l4.917-2.838a1.748 1.748 0 0 1-.038-.142H4.222l-.021.083l4.939 2.852c.39-.403.936-.653 1.54-.653c.626 0 1.189.268 1.581.696l.001.002z" fill="currentColor"></path></svg>

assets/icons/linkedin.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M218.123 218.127h-37.931v-59.403c0-14.165-.253-32.4-19.728-32.4c-19.756 0-22.779 15.434-22.779 31.369v60.43h-37.93V95.967h36.413v16.694h.51a39.907 39.907 0 0 1 35.928-19.733c38.445 0 45.533 25.288 45.533 58.186l-.016 67.013zM56.955 79.27c-12.157.002-22.014-9.852-22.016-22.009c-.002-12.157 9.851-22.014 22.008-22.016c12.157-.003 22.014 9.851 22.016 22.008A22.013 22.013 0 0 1 56.955 79.27m18.966 138.858H37.95V95.967h37.97v122.16zM237.033.018H18.89C8.58-.098.125 8.161-.001 18.471v219.053c.122 10.315 8.576 18.582 18.89 18.474h218.144c10.336.128 18.823-8.139 18.966-18.474V18.454c-.147-10.33-8.635-18.588-18.966-18.453" fill="#0A66C2"></path></svg>

assets/icons/reddit.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="32" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><circle fill="#FF4500" cx="128" cy="128" r="128"></circle><path d="M213.15 129.22c0-10.376-8.391-18.617-18.617-18.617a18.74 18.74 0 0 0-12.97 5.189c-12.818-9.157-30.368-15.107-49.9-15.87l8.544-39.981l27.773 5.95c.307 7.02 6.104 12.667 13.278 12.667c7.324 0 13.275-5.95 13.275-13.278c0-7.324-5.95-13.275-13.275-13.275c-5.188 0-9.768 3.052-11.904 7.478l-30.976-6.562c-.916-.154-1.832 0-2.443.458c-.763.458-1.22 1.22-1.371 2.136l-9.464 44.558c-19.837.612-37.692 6.562-50.662 15.872a18.74 18.74 0 0 0-12.971-5.188c-10.377 0-18.617 8.391-18.617 18.617c0 7.629 4.577 14.037 10.988 16.939a33.598 33.598 0 0 0-.458 5.646c0 28.686 33.42 52.036 74.621 52.036c41.202 0 74.622-23.196 74.622-52.036a35.29 35.29 0 0 0-.458-5.646c6.408-2.902 10.985-9.464 10.985-17.093zM85.272 142.495c0-7.324 5.95-13.275 13.278-13.275c7.324 0 13.275 5.95 13.275 13.275s-5.95 13.278-13.275 13.278c-7.327.15-13.278-5.953-13.278-13.278zm74.317 35.251c-9.156 9.157-26.553 9.768-31.588 9.768c-5.188 0-22.584-.765-31.59-9.768c-1.371-1.373-1.371-3.51 0-4.883c1.374-1.371 3.51-1.371 4.884 0c5.8 5.8 18.008 7.782 26.706 7.782c8.699 0 21.058-1.983 26.704-7.782c1.374-1.371 3.51-1.371 4.884 0c1.22 1.373 1.22 3.51 0 4.883zm-2.443-21.822c-7.325 0-13.275-5.95-13.275-13.275s5.95-13.275 13.275-13.275c7.327 0 13.277 5.95 13.277 13.275c0 7.17-5.95 13.275-13.277 13.275z" fill="#FFF"></path></svg>

assets/icons/twitter.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="39.2" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 209"><path d="M256 25.45c-9.42 4.177-19.542 7-30.166 8.27c10.845-6.5 19.172-16.793 23.093-29.057a105.183 105.183 0 0 1-33.351 12.745C205.995 7.201 192.346.822 177.239.822c-29.006 0-52.523 23.516-52.523 52.52c0 4.117.465 8.125 1.36 11.97c-43.65-2.191-82.35-23.1-108.255-54.876c-4.52 7.757-7.11 16.78-7.11 26.404c0 18.222 9.273 34.297 23.365 43.716a52.312 52.312 0 0 1-23.79-6.57c-.003.22-.003.44-.003.661c0 25.447 18.104 46.675 42.13 51.5a52.592 52.592 0 0 1-23.718.9c6.683 20.866 26.08 36.05 49.062 36.475c-17.975 14.086-40.622 22.483-65.228 22.483c-4.24 0-8.42-.249-12.529-.734c23.243 14.902 50.85 23.597 80.51 23.597c96.607 0 149.434-80.031 149.434-149.435c0-2.278-.05-4.543-.152-6.795A106.748 106.748 0 0 0 256 25.45" fill="#55acee"></path></svg>

assets/images/appwrite-icon.svg

@@ -1,8 +0,0 @@
-<svg width="198" height="172" xmlns="http://www.w3.org/2000/svg">
-  <path fill="none" d="M-1-1h200v174H-1z"/>
-  <g>
-    <path fill="#f02e65" d="M197.289 88c0 35.899-29.101 65-65 65-16.675 0-31.883-6.279-43.389-16.601 18.433-8.298 31.266-26.827 31.266-48.353 0-21.553-12.865-40.101-31.335-48.384C100.346 29.304 115.581 23 132.289 23c35.899 0 65 29.101 65 65z"/>
-    <path fill="#f02e65" d="M106.306 36.116a65 65 0 10-78.307 103.769 65 65 0 1078.307-103.77v.001zm-7.229 9.578a53 53 0 01-63.85 84.612 53 53 0 0163.85-84.612z"/>
-    <path fill="#f02e65" d="M68.894 65.511c-.078.192-1.072 4.095-2.142 8.725-1.111 4.63-2.871 11.938-3.864 16.262-1.915 7.92-3.063 13.124-3.063 13.813 0 .19 1.187.345 2.64.345h2.641l1.185-5.282c.69-2.869 2.221-9.451 3.445-14.616 1.225-5.166 2.716-11.441 3.291-13.967.573-2.526 1.147-4.82 1.263-5.088.115-.344-.537-.458-2.526-.458-1.493 0-2.795.114-2.87.266zM48.345 82.079l-3.52 3.827 1.034 1.224c.572.688 2.143 2.411 3.482 3.827l2.449 2.601h6.964l-3.29-3.559c-1.8-1.911-3.292-3.749-3.292-3.978 0-.268 1.378-1.989 3.062-3.826 1.683-1.874 3.061-3.483 3.061-3.674 0-.153-1.454-.268-3.214-.268h-3.176l-3.56 3.826zm26.785-3.597c0 .116.651.842 1.453 1.646 2.987 2.984 5.091 5.511 4.976 6.007-.076.269-1.531 2.066-3.29 3.941l-3.175 3.482h3.557l3.559-.038 3.251-3.558c1.8-1.988 3.253-3.751 3.253-3.98 0-.19-1.53-1.989-3.444-4.016l-3.442-3.713h-3.331c-1.875 0-3.367.115-3.367.229z"/>
-  </g>
-</svg>

assets/js/getLinkTag.js

@@ -0,0 +1,18 @@
+const DEFAULT_TAG = "button"
+const ANCHOR_TAG = "a"
+const FRAMEWORK_LINK = "NuxtLink" // or "router-link", "g-link"...
+
+const getLinkTag = ({ to, blank }) => {
+  if (!to) {
+    return DEFAULT_TAG
+  } else if (blank) {
+    return ANCHOR_TAG
+  } else if (/^\/(?!\/).*$/.test(to)) {
+    // regex101.com/r/LU1iFL/1
+    return FRAMEWORK_LINK
+  } else {
+    return ANCHOR_TAG
+  }
+}
+
+export { getLinkTag as default, ANCHOR_TAG, FRAMEWORK_LINK }

assets/scss/themes.scss

@@ -1,121 +1,247 @@
 @mixin baseTheme {
-  --font-sans: "Poppins", "sans-serif";
-  --font-mono: "Roboto Mono", "monospace";
+  --font-sans: "Inter", sans-serif;
+  --font-mono: "Roboto Mono", monospace;
   --font-icon: "Material Icons";
 }
 
 @mixin darkTheme {
   // Background color
-  --bg-color: rgba(32, 33, 36, 1);
+  --primary-color: theme("colors.true-gray.900");
   // Light Background color
-  --bg-light-color: rgba(255, 255, 255, 0.04);
+  --primary-light-color: theme("colors.dark.600");
   // Dark Background color
-  --bg-dark-color: rgba(0, 0, 0, 0.2);
+  --primary-dark-color: theme("colors.true-gray.800");
   // Text color
-  --fg-color: rgba(255, 255, 255, 0.9);
+  --secondary-color: theme("colors.true-gray.400");
   // Light Text color
-  --fg-light-color: rgba(255, 255, 255, 0.5);
+  --secondary-light-color: theme("colors.true-gray.500");
+  // Dark Text color
+  --secondary-dark-color: theme("colors.true-gray.100");
   // Border color
-  --brd-color: rgba(255, 255, 255, 0.05);
+  --divider-color: theme("colors.true-gray.800");
+  // Light Border color
+  --divider-light-color: theme("colors.dark.500");
+  // Dark Border color
+  --divider-dark-color: theme("colors.dark.300");
   // Error color
-  --err-color: rgba(255, 255, 255, 0.05);
+  --error-color: theme("colors.warm-gray.800");
   // Tooltip color
-  --tt-color: rgba(48, 48, 48, 1);
+  --tooltip-color: theme("colors.true-gray.100");
+  // Popover color
+  --popover-color: theme("colors.dark.700");
   // Editor theme
-  --editor-theme: "twilight";
-  // Active text color
-  --act-color: rgba(32, 33, 36, 1);
+  --editor-theme: "merbivore_soft";
 }
 
 @mixin lightTheme {
   // Background color
-  --bg-color: rgba(255, 255, 255, 1);
+  --primary-color: theme("colors.white");
   // Light Background color
-  --bg-light-color: rgba(0, 0, 0, 0.05);
+  --primary-light-color: theme("colors.true-gray.50");
   // Dark Background color
-  --bg-dark-color: rgba(0, 0, 0, 0.02);
+  --primary-dark-color: theme("colors.true-gray.100");
   // Text color
-  --fg-color: rgba(0, 0, 0, 0.9);
+  --secondary-color: theme("colors.true-gray.500");
   // Light Text color
-  --fg-light-color: rgba(0, 0, 0, 0.6);
+  --secondary-light-color: theme("colors.true-gray.400");
+  // Dark Text color
+  --secondary-dark-color: theme("colors.true-gray.900");
   // Border color
-  --brd-color: rgba(0, 0, 0, 0.1);
+  --divider-color: theme("colors.true-gray.200");
+  // Light Border color
+  --divider-light-color: theme("colors.true-gray.100");
+  // Dark Border color
+  --divider-dark-color: theme("colors.true-gray.300");
   // Error color
-  --err-color: rgba(0, 0, 0, 0.1);
+  --error-color: theme("colors.yellow.100");
   // Tooltip color
-  --tt-color: rgba(255, 255, 255, 1);
+  --tooltip-color: theme("colors.true-gray.800");
+  // Popover color
+  --popover-color: theme("colors.white");
   // Editor theme
-  --editor-theme: "iplastic";
-  // Active text color
-  --act-color: rgba(255, 255, 255, 1);
+  --editor-theme: "textmate";
 }
 
 @mixin blackTheme {
   // Background color
-  --bg-color: rgba(0, 0, 0, 1);
+  --primary-color: theme("colors.dark.900");
   // Light Background color
-  --bg-light-color: rgba(255, 255, 255, 0.02);
+  --primary-light-color: theme("colors.true-gray.900");
   // Dark Background color
-  --bg-dark-color: rgba(255, 255, 255, 0.04);
+  --primary-dark-color: theme("colors.dark.800");
   // Text color
-  --fg-color: rgba(255, 255, 255, 0.9);
+  --secondary-color: theme("colors.true-gray.400");
   // Light Text color
-  --fg-light-color: rgba(255, 255, 255, 0.5);
+  --secondary-light-color: theme("colors.true-gray.500");
+  // Dark Text color
+  --secondary-dark-color: theme("colors.true-gray.100");
   // Border color
-  --brd-color: rgba(255, 255, 255, 0.05);
+  --divider-color: theme("colors.true-gray.800");
+  // Light Border color
+  --divider-light-color: theme("colors.dark.700");
+  // Dark Border color
+  --divider-dark-color: theme("colors.dark.300");
   // Error color
-  --err-color: rgba(255, 255, 255, 0.05);
+  --error-color: theme("colors.warm-gray.900");
   // Tooltip color
-  --tt-color: rgba(32, 32, 32, 1);
+  --tooltip-color: theme("colors.true-gray.100");
+  // Popover color
+  --popover-color: theme("colors.dark.700");
   // Editor theme
-  --editor-theme: "vibrant_ink";
-  // Active text color
-  --act-color: rgba(0, 0, 0, 1);
-}
-
-@mixin blueTheme {
-  // Acent color
-  --ac-color: theme("colors.blue.400");
+  --editor-theme: "twilight";
 }
 
 @mixin greenTheme {
-  // Acent color
-  --ac-color: theme("colors.green.400");
+  // Accent color
+  --accent-color: theme("colors.green.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.green.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.green.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.green.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.green.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.green.600");
 }
 
 @mixin tealTheme {
-  // Acent color
-  --ac-color: theme("colors.teal.400");
+  // Accent color
+  --accent-color: theme("colors.teal.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.teal.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.teal.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.teal.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.teal.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.teal.600");
+}
+
+@mixin blueTheme {
+  // Accent color
+  --accent-color: theme("colors.blue.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.blue.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.blue.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.blue.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.blue.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.blue.600");
 }
 
 @mixin indigoTheme {
-  // Acent color
-  --ac-color: theme("colors.indigo.400");
+  // Accent color
+  --accent-color: theme("colors.indigo.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.indigo.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.indigo.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.indigo.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.indigo.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.indigo.600");
 }
 
 @mixin purpleTheme {
-  // Acent color
-  --ac-color: theme("colors.purple.400");
-}
-
-@mixin orangeTheme {
-  // Acent color
-  --ac-color: theme("colors.orange.400");
-}
-
-@mixin pinkTheme {
-  // Acent color
-  --ac-color: theme("colors.pink.400");
-}
-
-@mixin redTheme {
-  // Acent color
-  --ac-color: theme("colors.red.400");
+  // Accent color
+  --accent-color: theme("colors.purple.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.purple.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.purple.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.purple.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.purple.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.purple.600");
 }
 
 @mixin yellowTheme {
-  // Acent color
-  --ac-color: theme("colors.yellow.400");
+  // Accent color
+  --accent-color: theme("colors.yellow.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.yellow.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.yellow.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.yellow.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.yellow.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.yellow.600");
+}
+
+@mixin orangeTheme {
+  // Accent color
+  --accent-color: theme("colors.orange.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.orange.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.orange.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.orange.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.orange.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.orange.600");
+}
+
+@mixin redTheme {
+  // Accent color
+  --accent-color: theme("colors.red.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.red.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.red.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.red.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.red.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.red.600");
+}
+
+@mixin pinkTheme {
+  // Accent color
+  --accent-color: theme("colors.pink.500");
+  // Light Accent color
+  --accent-light-color: theme("colors.pink.400");
+  // Dark Accent color
+  --accent-dark-color: theme("colors.pink.600");
+  // Light Contrast color
+  --accent-contrast-color: theme("colors.white");
+  // Gradient from
+  --gradient-from-color: theme("colors.pink.200");
+  // Gradient via
+  --gradient-via-color: theme("colors.pink.400");
+  // Gradient to
+  --gradient-to-color: theme("colors.pink.600");
 }
 
 :root {
@@ -139,27 +265,110 @@
 :root[data-accent="blue"] {
   @include blueTheme;
 }
+
 :root[data-accent="green"] {
   @include greenTheme;
 }
+
 :root[data-accent="teal"] {
   @include tealTheme;
 }
+
 :root[data-accent="indigo"] {
   @include indigoTheme;
 }
+
 :root[data-accent="purple"] {
   @include purpleTheme;
 }
+
 :root[data-accent="orange"] {
   @include orangeTheme;
 }
+
 :root[data-accent="pink"] {
   @include pinkTheme;
 }
+
 :root[data-accent="red"] {
   @include redTheme;
 }
+
 :root[data-accent="yellow"] {
   @include yellowTheme;
 }
+
+@mixin fontSmall {
+  // Font size
+  --body-font-size: 0.75rem;
+  // Line height
+  --body-line-height: 1rem;
+  // Upper primary sticky fold
+  --upper-primary-sticky-fold: 4.125rem;
+  // Upper secondary sticky fold
+  --upper-secondary-sticky-fold: 6.125rem;
+  // Upper tertiary sticky fold
+  --upper-tertiary-sticky-fold: 8.188rem;
+  // Lower primary sticky fold
+  --lower-primary-sticky-fold: 3rem;
+  // Lower secondary sticky fold
+  --lower-secondary-sticky-fold: 5rem;
+  // Sidebar primary sticky fold
+  --sidebar-primary-sticky-fold: 2rem;
+  // Sidebar secondary sticky fold
+  --sidebar-secondary-sticky-fold: 4rem;
+}
+
+@mixin fontMedium {
+  // Font size
+  --body-font-size: 0.875rem;
+  // Line height
+  --body-line-height: 1.25rem;
+  // Upper primary sticky fold
+  --upper-primary-sticky-fold: 4.375rem;
+  // Upper secondary sticky fold
+  --upper-secondary-sticky-fold: 6.625rem;
+  // Upper tertiary sticky fold
+  --upper-tertiary-sticky-fold: 8.813rem;
+  // Lower primary sticky fold
+  --lower-primary-sticky-fold: 3.25rem;
+  // Lower secondary sticky fold
+  --lower-secondary-sticky-fold: 5.5rem;
+  // Sidebar primary sticky fold
+  --sidebar-primary-sticky-fold: 2.25rem;
+  // Sidebar secondary sticky fold
+  --sidebar-secondary-sticky-fold: 4.5rem;
+}
+
+@mixin fontLarge {
+  // Font size
+  --body-font-size: 1rem;
+  // Line height
+  --body-line-height: 1.5rem;
+  // Upper primary sticky fold
+  --upper-primary-sticky-fold: 4.625rem;
+  // Upper secondary sticky fold
+  --upper-secondary-sticky-fold: 7.125rem;
+  // Upper tertiary sticky fold
+  --upper-tertiary-sticky-fold: 9.5rem;
+  // Lower primary sticky fold
+  --lower-primary-sticky-fold: 3.5rem;
+  // Lower secondary sticky fold
+  --lower-secondary-sticky-fold: 6rem;
+  // Sidebar primary sticky fold
+  --sidebar-primary-sticky-fold: 2.5rem;
+  // Sidebar secondary sticky fold
+  --sidebar-secondary-sticky-fold: 5rem;
+}
+
+:root[data-font-size="small"] {
+  @include fontSmall;
+}
+
+:root[data-font-size="medium"] {
+  @include fontMedium;
+}
+
+:root[data-font-size="large"] {
+  @include fontLarge;
+}

commitlint.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  extends: ["@commitlint/config-conventional"],
+}

components/app/Announcement.vue

@@ -0,0 +1,26 @@
+<template>
+  <div class="bg-error flex justify-between">
+    <span
+      class="
+        flex
+        py-2
+        px-4
+        transition
+        relative
+        items-center
+        justify-center
+        group
+      "
+    >
+      <i class="mr-2 material-icons">info_outline</i>
+      <span class="text-secondaryDark">
+        <span class="md:hidden">
+          {{ $t("helpers.offline_short") }}
+        </span>
+        <span class="hidden md:inline">
+          {{ $t("helpers.offline") }}
+        </span>
+      </span>
+    </span>
+  </div>
+</template>

components/app/Contributors.vue

@@ -1,175 +0,0 @@
-<template>
-  <div>
-    <p class="info">
-      {{ $t("donate_info1") }}
-    </p>
-    <p class="info">
-      {{ $t("donate_info2") }}
-    </p>
-    <div class="px-2 row-wrapper">
-      <span>
-        <a
-          v-tooltip.right="$t('recurring')"
-          href="https://github.com/sponsors/hoppscotch"
-          target="_blank"
-          rel="noopener"
-        >
-          <button class="icon">
-            <i class="material-icons">
-              <svg
-                xmlns="http://www.w3.org/2000/svg"
-                width="24"
-                height="24"
-                viewBox="0 0 24 24"
-                class="material-icons"
-              >
-                <path
-                  d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
-                />
-              </svg>
-            </i>
-            <span>GitHub Sponsors</span>
-          </button>
-        </a>
-      </span>
-    </div>
-    <div class="px-2 row-wrapper">
-      <span>
-        <a
-          v-tooltip.right="$t('one_time_recurring')"
-          href="https://opencollective.com/hoppscotch"
-          target="_blank"
-          rel="noopener"
-        >
-          <button class="icon">
-            <i class="material-icons">donut_large</i>
-            <span>{{ $t("open_collective") }}</span>
-          </button>
-        </a>
-      </span>
-    </div>
-    <div class="px-2 row-wrapper">
-      <span>
-        <a
-          v-tooltip.right="$t('recurring')"
-          href="https://www.patreon.com/liyasthomas"
-          target="_blank"
-          rel="noopener"
-        >
-          <button class="icon">
-            <i class="material-icons">local_parking</i>
-            <span>{{ $t("patreon") }}</span>
-          </button>
-        </a>
-      </span>
-    </div>
-    <div class="px-2 row-wrapper">
-      <span>
-        <a
-          v-tooltip.right="$t('one_time')"
-          href="https://www.paypal.me/liyascthomas"
-          target="_blank"
-          rel="noopener"
-        >
-          <button class="icon">
-            <i class="material-icons">payment</i>
-            <span>{{ $t("paypal") }}</span>
-          </button>
-        </a>
-      </span>
-    </div>
-    <hr />
-    <div class="p-2">
-      <h3 class="title">Financial Contributors</h3>
-      <div class="contributors">
-        <a
-          href="https://oss.capital/?ref=hoppscotch"
-          target="_blank"
-          rel="noopener"
-        >
-          <img
-            style="height: 100%; width: 300px"
-            src="~assets/images/ossc-banner.svg"
-            alt="OSS Capital"
-          />
-        </a>
-        <a
-          href="https://appwrite.io/?utm_source=hoppscotch&utm_medium=banner&utm_campaign=hello"
-          target="_blank"
-          rel="noopener"
-        >
-          <img
-            style="height: 100%; width: 300px; background: #fff"
-            src="~assets/images/appwrite-banner.svg"
-            alt="Appwrite"
-          />
-        </a>
-        <a
-          href="https://pipedream.com/?ref=hoppscotch"
-          target="_blank"
-          rel="noopener"
-        >
-          <img
-            style="max-width: 100px"
-            src="~assets/images/pipedream.png"
-            alt="pipedream"
-          />
-        </a>
-        <a
-          href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
-          target="_blank"
-          rel="noopener"
-        >
-          <img
-            style="max-width: 100px"
-            src="~assets/images/Paw-Logo-for-Hoppscotch.png"
-            alt="Paw"
-          />
-        </a>
-        <a
-          href="https://simplescraper.io/?utm_source=hs"
-          target="_blank"
-          rel="noopener"
-        >
-          <img
-            style="max-height: 50px"
-            src="~assets/images/Simplescraper_dark.png"
-            alt="Simplescraper"
-          />
-        </a>
-        <a href="https://tyk.io?ref=hoppscotch" target="_blank" rel="noopener">
-          <img
-            style="max-width: 320px"
-            src="~assets/images/Tyk-side-project-logo-tagline-blk.png"
-            alt="Tyk Banner"
-          />
-        </a>
-      </div>
-    </div>
-    <hr />
-    <p class="info">
-      This project exists thanks to all the
-      <a
-        target="_blank"
-        rel="noopener"
-        href="https://github.com/hoppscotch/hoppscotch/graphs/contributors"
-        class="link"
-      >
-        people who contribute
-      </a>
-      .
-    </p>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.contributors {
-  @apply flex;
-  @apply items-center;
-  @apply flex-wrap;
-  @apply overflow-auto;
-  @apply m-2;
-  @apply space-x-2;
-  @apply space-y-2;
-}
-</style>

components/app/Extensions.vue

@@ -1,106 +0,0 @@
-<template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("extensions") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <p class="info">
-        {{ $t("extensions_info1") }}
-      </p>
-      <div class="px-2">
-        <a
-          href="https://addons.mozilla.org/en-US/firefox/addon/hoppscotch"
-          target="_blank"
-          rel="noopener"
-        >
-          <button class="icon">
-            <svg
-              class="material-icons"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-            >
-              <path
-                d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm8.003 8.657c-1.276-3.321-4.46-4.605-5.534-4.537 3.529 1.376 4.373 6.059 4.06 7.441-.307-1.621-1.286-3.017-1.872-3.385 3.417 8.005-4.835 10.465-7.353 7.687.649.168 1.931.085 2.891-.557.898-.602.983-.638 1.56-.683.686-.053-.041-1.406-1.539-1.177-.616.094-1.632.819-2.88.341-1.508-.576-1.46-2.634.096-2.015.337-.437.088-1.263.088-1.263.452-.414 1.022-.706 1.37-.911.228-.135.829-.507.795-1.23-.123-.096-.32-.219-.766-.193-1.736.11-1.852-.518-1.967-.808.078-.668.524-1.534 1.361-1.931-1.257-.193-2.28.397-2.789 1.154-.809-.174-1.305-.183-2.118-.031-.316-.24-.666-.67-.878-1.181C6.36 3.312 9.027 2 12 2c5.912 0 8.263 4.283 8.003 6.657z"
-              />
-            </svg>
-            <span>Firefox</span>
-            <span
-              v-if="hasFirefoxExtInstalled"
-              v-tooltip="$t('installed')"
-              class="icon"
-            >
-              <i class="material-icons">done</i>
-            </span>
-          </button>
-        </a>
-      </div>
-      <div class="px-2">
-        <a
-          href="https://chrome.google.com/webstore/detail/hoppscotch-browser-extens/amknoiejhlmhancpahfcfcfhllgkpbld"
-          target="_blank"
-          rel="noopener"
-        >
-          <button class="icon">
-            <svg
-              class="material-icons"
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-            >
-              <path
-                d="M2.897 4.181A11.87 11.87 0 0111.969 0c4.288 0 8.535 2.273 10.717 6.554h-9.293c-1.674.001-2.755-.037-3.926.579-1.376.724-2.415 2.067-2.777 3.644L2.897 4.181zM8.007 12c0 2.2 1.789 3.99 3.988 3.99s3.988-1.79 3.988-3.99-1.789-3.991-3.988-3.991S8.007 9.8 8.007 12zm5.536 5.223c-2.238.666-4.858-.073-6.293-2.549-1.095-1.891-3.989-6.933-5.305-9.225A11.856 11.856 0 000 11.956c0 5.448 3.726 10.65 9.673 11.818l3.87-6.551zm2.158-9.214a5.463 5.463 0 011.007 6.719 1815.43 1815.43 0 01-5.46 9.248C18.437 24.419 24 18.616 24 12.004c0-1.313-.22-2.66-.69-3.995h-7.609z"
-              />
-            </svg>
-            <span>Chrome</span>
-            <span
-              v-if="hasChromeExtInstalled"
-              v-tooltip="$t('installed')"
-              class="icon"
-            >
-              <i class="material-icons">done</i>
-            </span>
-          </button>
-        </a>
-      </div>
-    </div>
-    <div slot="footer"></div>
-  </SmartModal>
-</template>
-
-<script>
-import {
-  hasChromeExtensionInstalled,
-  hasFirefoxExtensionInstalled,
-} from "~/helpers/strategies/ExtensionStrategy"
-
-export default {
-  props: {
-    show: Boolean,
-  },
-  data() {
-    return {
-      hasChromeExtInstalled: hasChromeExtensionInstalled(),
-      hasFirefoxExtInstalled: hasFirefoxExtensionInstalled(),
-    }
-  },
-  watch: {
-    show() {
-      this.hasChromeExtInstalled = hasChromeExtensionInstalled()
-      this.hasFirefoxExtInstalled = hasFirefoxExtensionInstalled()
-    },
-  },
-  methods: {
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-  },
-}
-</script>

components/app/Footer.vue

@@ -1,104 +1,164 @@
 <template>
-  <footer class="footer">
-    <div class="row-wrapper">
-      <span
-        class="flex flex-col font-mono md:flex-row"
-        style="align-items: start"
-      >
-        <a
-          class="footer-link"
-          href="https://www.netlify.com"
-          target="_blank"
-          rel="noopener"
-        >
-          Powered by Netlify
-        </a>
+  <div>
+    <div class="flex justify-between">
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="LEFT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
+          icon="menu_open"
+          :class="{ 'transform -rotate-180': !LEFT_SIDEBAR }"
+          @click.native="LEFT_SIDEBAR = !LEFT_SIDEBAR"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="`${
+            ZEN_MODE ? $t('action.turn_off') : $t('action.turn_on')
+          } ${$t('layout.zen_mode')}`"
+          :icon="ZEN_MODE ? 'fullscreen_exit' : 'fullscreen'"
+          :class="{
+            '!text-accent !focus-visible:text-accentDark !hover:text-accentDark':
+              ZEN_MODE,
+          }"
+          @click.native="ZEN_MODE = !ZEN_MODE"
+        />
+      </div>
+      <div class="flex">
         <span>
-          <a
-            class="footer-link"
-            href="https://oss.capital/?ref=hoppscotch"
-            target="_blank"
-            rel="noopener"
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
           >
-            OSS Capital
-          </a>
-          <a
-            class="footer-link"
-            href="https://paw.cloud/?utm_source=hoppscotch&utm_medium=website&utm_campaign=hoppscotch-sponsorship"
-            target="_blank"
-            rel="noopener"
-          >
-            Paw
-          </a>
-          <a
-            class="footer-link"
-            href="https://simplescraper.io/?utm_source=hs"
-            target="_blank"
-            rel="noopener"
-          >
-            Simplescraper
-          </a>
-        </span>
-        <iframe
-          src="https://ghbtns.com/github-btn.html?user=hoppscotch&type=sponsor"
-          frameborder="0"
-          scrolling="0"
-          width="150"
-          height="20"
-          title="GitHub"
-          class="footer-link"
-          loading="lazy"
-        ></iframe>
-      </span>
-      <span
-        class="flex flex-col font-mono md:flex-row"
-        style="align-items: start"
-      >
-        <a href="mailto:support@hoppscotch.io" target="_blank" rel="noopener">
-          <button v-tooltip="$t('contact_us')" class="icon">
-            <i class="material-icons">email</i>
-          </button>
-        </a>
-        <v-popover>
-          <button v-tooltip="$t('choose_language')" class="icon">
-            <i class="material-icons">translate</i>
-          </button>
-          <template slot="popover">
-            <div v-for="locale in availableLocales" :key="locale.code">
-              <nuxt-link :to="switchLocalePath(locale.code)">
-                <button v-close-popover class="icon">
-                  {{ locale.name }}
-                </button>
-              </nuxt-link>
+            <template #trigger>
+              <ButtonSecondary
+                icon="help_center"
+                class="rounded-none"
+                :label="$t('app.help')"
+              />
+            </template>
+            <div class="flex flex-col">
+              <SmartItem
+                :label="$t('app.documentation')"
+                to="https://docs.hoppscotch.io"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                :label="$t('app.keyboard_shortcuts')"
+                @click.native="
+                  showShortcuts = true
+                  $refs.options.tippy().hide()
+                "
+              />
+              <SmartItem
+                :label="$t('app.whats_new')"
+                to="https://docs.hoppscotch.io/changelog"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                :label="$t('app.chat_with_us')"
+                @click.native="
+                  chatWithUs()
+                  $refs.options.tippy().hide()
+                "
+              />
+              <hr />
+              <SmartItem
+                :label="$t('app.twitter')"
+                to="https://twitter.com/hoppscotch_io"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <SmartItem
+                :label="$t('app.terms_and_privacy')"
+                to="https://docs.hoppscotch.io/privacy"
+                blank
+                @click.native="$refs.options.tippy().hide()"
+              />
+              <!-- <SmartItem :label="$t('app.status')" /> -->
+              <div class="flex opacity-50 py-2 px-4">
+                {{ `${$t("app.name")} ${$t("app.version")}` }}
+              </div>
             </div>
-          </template>
-        </v-popover>
-      </span>
+          </tippy>
+        </span>
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          icon="keyboard"
+          :title="$t('app.shortcuts')"
+          @click.native="showShortcuts = true"
+        />
+        <ButtonSecondary
+          v-if="navigatorShare"
+          v-tippy="{ theme: 'tooltip' }"
+          icon="share"
+          :title="$t('request.share')"
+          @click.native="nativeShare()"
+        />
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          :title="RIGHT_SIDEBAR ? $t('hide.sidebar') : $t('show.sidebar')"
+          icon="menu_open"
+          class="transform rotate-180"
+          :class="{ 'rotate-360': !RIGHT_SIDEBAR }"
+          @click.native="RIGHT_SIDEBAR = !RIGHT_SIDEBAR"
+        />
+      </div>
     </div>
-  </footer>
+    <AppShortcuts :show="showShortcuts" @close="showShortcuts = false" />
+  </div>
 </template>
 
-<script>
-export default {
-  computed: {
-    availableLocales() {
-      return this.$i18n.locales.filter(({ code }) => code !== this.$i18n.locale)
+<script lang="ts">
+import { defineComponent, ref } from "@nuxtjs/composition-api"
+import { defineActionHandler } from "~/helpers/actions"
+import { showChat } from "~/helpers/support"
+import { useSetting } from "~/newstore/settings"
+
+export default defineComponent({
+  setup() {
+    const showShortcuts = ref(false)
+
+    defineActionHandler("flyouts.keybinds.toggle", () => {
+      showShortcuts.value = !showShortcuts.value
+    })
+
+    return {
+      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
+      RIGHT_SIDEBAR: useSetting("RIGHT_SIDEBAR"),
+      ZEN_MODE: useSetting("ZEN_MODE"),
+
+      navigatorShare: !!navigator.share,
+
+      showShortcuts,
+    }
+  },
+  watch: {
+    ZEN_MODE() {
+      this.LEFT_SIDEBAR = !this.ZEN_MODE
     },
   },
-}
+  methods: {
+    nativeShare() {
+      if (navigator.share) {
+        navigator
+          .share({
+            title: "Hoppscotch",
+            text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
+            url: "https://hoppscotch.io",
+          })
+          .then(() => {})
+          .catch(console.error)
+      } else {
+        // fallback
+      }
+    },
+    chatWithUs() {
+      showChat()
+    },
+  },
+})
 </script>
-
-<style scoped lang="scss">
-.footer-link {
-  @apply inline-flex;
-  @apply flex-shrink-0;
-  @apply my-2;
-  @apply mx-4;
-  @apply text-fgLightColor;
-  @apply text-sm;
-
-  &:hover {
-    @apply text-fgColor;
-  }
-}
-</style>

components/app/GitHubStarButton.vue

@@ -0,0 +1,36 @@
+<template>
+  <transition name="fade" appear>
+    <GithubButton
+      title="Star Hoppscotch"
+      href="https://github.com/hoppscotch/hoppscotch"
+      :data-color-scheme="
+        $colorMode.value != 'light'
+          ? $colorMode.value == 'black'
+            ? 'dark'
+            : 'dark_dimmed'
+          : 'light'
+      "
+      :data-show-count="true"
+      data-text="Star"
+      aria-label="Star Hoppscotch on GitHub"
+      :data-size="size"
+    />
+  </transition>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import GithubButton from "vue-github-button"
+
+export default defineComponent({
+  components: {
+    GithubButton,
+  },
+  props: {
+    size: {
+      type: String,
+      default: undefined,
+    },
+  },
+})
+</script>

components/app/Header.vue

@@ -1,342 +1,137 @@
 <template>
-  <header class="header">
-    <div class="row-wrapper">
-      <span class="slide-in">
-        <nuxt-link :to="localePath('index')">
-          <h1 class="hide-on-small-screen logo">Hoppscotch</h1>
-          <h1 class="show-on-small-screen logo">Hs</h1>
-        </nuxt-link>
-        <iframe
-          src="https://ghbtns.com/github-btn.html?user=hoppscotch&repo=hoppscotch&type=star&count=true"
-          frameborder="0"
-          scrolling="0"
-          width="150"
-          height="20"
-          title="GitHub"
-          class="ml-8 hide-on-small-screen"
-          loading="lazy"
-        ></iframe>
-      </span>
-      <span>
-        <a
-          href="https://appwrite.io/?utm_source=hoppscotch&utm_medium=banner&utm_campaign=hello"
-          target="_blank"
-          rel="noopener"
-          class="
-            inline-flex
-            items-center
-            px-4
-            py-2
-            mx-4
-            font-mono
-            text-sm
-            rounded-md
-            bg-bgDarkColor
-            hide-on-small-screen
-          "
-        >
-          Appwrite - Open-Source Backend as a Service
-          <img
-            class="w-8 ml-2"
-            src="~assets/images/appwrite-icon.svg"
-            alt="Appwrite"
-          />
-        </a>
-        <button
+  <div>
+    <header
+      class="flex space-x-2 flex-1 py-2 px-2 items-center justify-between"
+    >
+      <div class="space-x-2 inline-flex items-center">
+        <ButtonSecondary
+          class="tracking-wide !font-bold !text-secondaryDark"
+          label="HOPPSCOTCH"
+          to="/"
+        />
+        <AppGitHubStarButton class="mt-1.5 transition" />
+      </div>
+      <div class="space-x-2 inline-flex items-center">
+        <ButtonSecondary
           id="installPWA"
-          v-tooltip="$t('install_pwa')"
-          class="icon"
-          @click.prevent="showInstallPrompt()"
-        >
-          <i class="material-icons">offline_bolt</i>
-        </button>
-        <a
-          href="https://github.com/hoppscotch/hoppscotch"
-          target="_blank"
-          aria-label="GitHub"
-          rel="noopener"
-        >
-          <button v-tooltip="'GitHub'" class="icon" aria-label="GitHub">
-            <svg
-              xmlns="http://www.w3.org/2000/svg"
-              width="24"
-              height="24"
-              class="material-icons"
-            >
-              <path
-                d="M12 0C5.374 0 0 5.373 0 12c0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23A11.509 11.509 0 0112 5.803c1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576C20.566 21.797 24 17.3 24 12c0-6.627-5.373-12-12-12z"
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('header.install_pwa')"
+          icon="download_for_offline"
+          class="rounded"
+          @click.native="showInstallPrompt()"
+        />
+        <ButtonSecondary
+          v-if="currentUser === null"
+          icon="filter_drama"
+          :label="$t('header.save_workspace')"
+          filled
+          class="hidden !font-semibold md:flex"
+          @click.native="showLogin = true"
+        />
+        <ButtonPrimary
+          v-if="currentUser === null"
+          :label="$t('header.login')"
+          @click.native="showLogin = true"
+        />
+        <span v-else class="pr-2">
+          <tippy ref="user" interactive trigger="click" theme="popover" arrow>
+            <template #trigger>
+              <ProfilePicture
+                v-if="currentUser.photoURL"
+                v-tippy="{
+                  theme: 'tooltip',
+                }"
+                :url="currentUser.photoURL"
+                :alt="currentUser.displayName"
+                :title="currentUser.displayName"
+                indicator
+                :indicator-styles="isOnLine ? 'bg-green-500' : 'bg-red-500'"
               />
-            </svg>
-          </button>
-        </a>
-        <v-popover v-if="fb.currentUser === null">
-          <button v-tooltip="$t('login_with')" class="icon">
-            <i class="material-icons">login</i>
-          </button>
-          <template slot="popover">
-            <FirebaseLogin />
-          </template>
-        </v-popover>
-        <v-popover v-else>
-          <button
-            v-tooltip="
-              (fb.currentUser.displayName ||
-                '<label><i>Name not found</i></label>') +
-              '<br>' +
-              (fb.currentUser.email || '<label><i>Email not found</i></label>')
-            "
-            class="icon"
-            aria-label="Account"
-          >
-            <img
-              v-if="fb.currentUser.photoURL"
-              :src="fb.currentUser.photoURL"
-              class="w-6 h-6 rounded-full material-icons"
-              alt="Profile image"
+              <ButtonSecondary
+                v-else
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('header.account')"
+                class="rounded"
+                icon="account_circle"
+              />
+            </template>
+            <SmartItem
+              to="/settings"
+              icon="settings"
+              :label="$t('navigation.settings')"
+              @click.native="$refs.user.tippy().hide()"
             />
-            <i v-else class="material-icons">account_circle</i>
-          </button>
-          <template slot="popover">
-            <div>
-              <nuxt-link v-close-popover :to="localePath('settings')">
-                <button class="icon">
-                  <i class="material-icons">settings</i>
-                  <span>
-                    {{ $t("settings") }}
-                  </span>
-                </button>
-              </nuxt-link>
-            </div>
-            <div>
-              <FirebaseLogout />
-            </div>
-          </template>
-        </v-popover>
-        <v-popover>
-          <button v-tooltip="$t('more')" class="icon">
-            <i class="material-icons">drag_indicator</i>
-          </button>
-          <template slot="popover">
-            <button v-close-popover class="icon" @click="showExtensions = true">
-              <i class="material-icons">extension</i>
-              <span>{{ $t("extensions") }}</span>
-            </button>
-            <button v-close-popover class="icon" @click="showShortcuts = true">
-              <i class="material-icons">keyboard</i>
-              <span>{{ $t("shortcuts") }}</span>
-            </button>
-            <button v-close-popover class="icon" @click="showSupport = true">
-              <i class="material-icons">favorite</i>
-              <span>{{ $t("support_us") }}</span>
-            </button>
-            <button
-              v-close-popover
-              class="icon"
-              onClick="window.open('https://twitter.com/share?text=👽 Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.&url=https://hoppscotch.io&hashtags=hoppscotch&via=hoppscotch_io');"
-            >
-              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24">
-                <path
-                  d="M24 4.557a9.83 9.83 0 01-2.828.775 4.932 4.932 0 002.165-2.724 9.864 9.864 0 01-3.127 1.195 4.916 4.916 0 00-3.594-1.555c-3.179 0-5.515 2.966-4.797 6.045A13.978 13.978 0 011.671 3.149a4.93 4.93 0 001.523 6.574 4.903 4.903 0 01-2.229-.616c-.054 2.281 1.581 4.415 3.949 4.89a4.935 4.935 0 01-2.224.084 4.928 4.928 0 004.6 3.419A9.9 9.9 0 010 19.54a13.94 13.94 0 007.548 2.212c9.142 0 14.307-7.721 13.995-14.646A10.025 10.025 0 0024 4.557z"
-                />
-              </svg>
-              <span>Tweet</span>
-            </button>
-            <button
-              v-if="navigatorShare"
-              v-close-popover
-              v-tooltip="$t('more')"
-              class="icon"
-              @click="nativeShare"
-            >
-              <i class="material-icons">share</i>
-              <span>Share</span>
-            </button>
-          </template>
-        </v-popover>
-      </span>
-    </div>
-    <AppExtensions
-      :show="showExtensions"
-      @hide-modal="showExtensions = false"
-    />
-    <AppShortcuts :show="showShortcuts" @hide-modal="showShortcuts = false" />
-    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
-  </header>
+            <FirebaseLogout @confirm-logout="$refs.user.tippy().hide()" />
+          </tippy>
+        </span>
+      </div>
+    </header>
+    <AppAnnouncement v-if="!isOnLine" />
+    <FirebaseLogin :show="showLogin" @hide-modal="showLogin = false" />
+  </div>
 </template>
 
 <script>
+import { defineComponent } from "@nuxtjs/composition-api"
 import intializePwa from "~/helpers/pwa"
-import { fb } from "~/helpers/fb"
-// import { hasExtensionInstalled } from "~/helpers/strategies/ExtensionStrategy"
+import { currentUser$ } from "~/helpers/fb/auth"
+import { getLocalConfig, setLocalConfig } from "~/newstore/localpersistence"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
+  setup() {
+    return {
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
   data() {
     return {
       // Once the PWA code is initialized, this holds a method
       // that can be called to show the user the installation
       // prompt.
       showInstallPrompt: null,
-      showExtensions: false,
-      showShortcuts: false,
-      showSupport: false,
-      navigatorShare: navigator.share,
-      fb,
+      showLogin: false,
+      isOnLine: navigator.onLine,
     }
   },
   async mounted() {
-    this._keyListener = function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.showExtensions = this.showShortcuts = this.showSupport = false
-      }
-    }
-    document.addEventListener("keydown", this._keyListener.bind(this))
+    window.addEventListener("online", () => {
+      this.isOnLine = true
+    })
+    window.addEventListener("offline", () => {
+      this.isOnLine = false
+    })
 
     // Initializes the PWA code - checks if the app is installed,
     // etc.
     this.showInstallPrompt = await intializePwa()
-    const cookiesAllowed = localStorage.getItem("cookiesAllowed") === "yes"
+
+    const cookiesAllowed = getLocalConfig("cookiesAllowed") === "yes"
     if (!cookiesAllowed) {
-      this.$toast.show(this.$t("we_use_cookies"), {
-        icon: "info",
-        duration: 5000,
-        theme: "toasted-primary",
+      this.$toast.show(this.$t("app.we_use_cookies").toString(), {
+        icon: "cookie",
+        duration: 0,
         action: [
           {
-            text: this.$t("dismiss"),
+            text: this.$t("action.learn_more").toString(),
             onClick: (_, toastObject) => {
-              localStorage.setItem("cookiesAllowed", "yes")
+              setLocalConfig("cookiesAllowed", "yes")
+              toastObject.goAway(0)
+              window
+                .open("https://docs.hoppscotch.io/privacy", "_blank")
+                .focus()
+            },
+          },
+          {
+            text: this.$t("action.dismiss").toString(),
+            onClick: (_, toastObject) => {
+              setLocalConfig("cookiesAllowed", "yes")
               toastObject.goAway(0)
             },
           },
         ],
       })
     }
-
-    // let showAd = localStorage.getItem("showAd") === "no"
-    // if (!showAd) {
-    //   setTimeout(() => {
-    //     this.$toast.clear()
-    //     this.$toast.show(
-    //       "<span><a href='https://github.com/sponsors/hoppscotch' target='_blank' rel='noopener'>Sponsor us to support Hoppscotch open source project 💖</a><br><sub>Whoosh this away to dismiss.</sub></span>",
-    //       {
-    //         icon: "",
-    //         duration: 0,
-    //         theme: "toasted-ad",
-    //         action: [
-    //           {
-    //             text: "Sponsor",
-    //             icon: "chevron_right",
-    //             onClick: (_, toastObject) => {
-    //               localStorage.setItem("showAd", "no")
-    //               toastObject.goAway(0)
-    //               window.open("https://github.com/sponsors/hoppscotch")
-    //             },
-    //           },
-    //         ],
-    //         onComplete() {
-    //           localStorage.setItem("showAd", "no")
-    //         },
-    //       }
-    //     )
-    //   }, 8000)
-    // }
-
-    // let showExtensionsToast = localStorage.getItem("showExtensionsToast") === "yes"
-    // if (!showExtensionsToast) {
-    //   setTimeout(() => {
-    //     if (!hasExtensionInstalled()) {
-    //       this.$toast.show(this.$t("extensions_info2"), {
-    //         icon: "extension",
-    //         duration: 5000,
-    //         theme: "toasted-primary",
-    //         action: [
-    //           {
-    //             text: this.$t("yes"),
-    //             onClick: (_, toastObject) => {
-    //               this.showExtensions = true
-    //               localStorage.setItem("showExtensionsToast", "yes")
-    //               toastObject.goAway(0)
-    //             },
-    //           },
-    //           {
-    //             text: this.$t("no"),
-    //             onClick: (_, toastObject) => {
-    //               this.$store.commit("setMiscState", {
-    //                 value: false,
-    //                 attribute: "showExtensionsToast",
-    //               })
-    //               localStorage.setItem("showExtensionsToast", "no")
-    //               toastObject.goAway(0)
-    //             },
-    //           },
-    //         ],
-    //       })
-    //     }
-    //   }, 5000)
-    // }
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
-  methods: {
-    nativeShare() {
-      if (navigator.share) {
-        navigator
-          .share({
-            title: "Hoppscotch",
-            text: "Hoppscotch • Open source API development ecosystem - Helps you create requests faster, saving precious time on development.",
-            url: "https://hoppscotch.io",
-          })
-          .then(() => {})
-          .catch(console.error)
-      } else {
-        // fallback
-      }
-    },
-  },
-}
+})
 </script>
-
-<style scoped lang="scss">
-$responsiveWidth: 768px;
-
-.logo {
-  @apply text-xl;
-  @apply transition-colors;
-  @apply ease-in-out;
-  @apply duration-150;
-
-  &:hover {
-    @apply text-acColor;
-  }
-}
-
-@keyframes slideIn {
-  0% {
-    @apply opacity-0;
-    @apply -left-4;
-  }
-
-  100% {
-    @apply opacity-100;
-    @apply left-0;
-  }
-}
-
-.slide-in {
-  @apply relative;
-
-  animation: slideIn 0.2s forwards ease-in-out;
-}
-
-.show-on-small-screen {
-  @apply hidden;
-}
-
-@media (max-width: $responsiveWidth) {
-  .show-on-small-screen {
-    @apply inline-flex;
-  }
-}
-</style>

components/app/Logo.vue

@@ -1,22 +1,33 @@
 <template>
-  <svg viewBox="0 0 612.001 612.001">
+  <svg
+    class="logo"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    aria-hidden="true"
+    role="img"
+    width="24"
+    height="24"
+    preserveAspectRatio="xMidYMid meet"
+    viewBox="0 0 24 24"
+  >
     <path
-      :fill="color"
-      data-old_color="#202124"
-      class="active-path"
-      data-original="#202124"
-      d="M64.601 236.822C64.601 394.256 192.786 612 306.001 612 412.582 612 547.4 394.256 547.4 236.822S439.322 0 306 0 64.601 79.388 64.601 236.822zm304.12 116.415c29.475-29.475 70.598-40.195 108.552-32.173 8.021 37.954-2.698 79.077-32.173 108.552-29.475 29.476-70.598 40.196-108.552 32.174-8.022-37.955 2.698-79.078 32.173-108.552zm-233.994-32.174c37.954-8.02 79.077 2.698 108.552 32.173 29.475 29.475 40.195 70.598 32.173 108.552-37.954 8.021-79.077-2.698-108.552-32.173-29.475-29.476-40.194-70.598-32.173-108.552z"
+      d="M17 10.54C16.78 7.44 14.63 5 12 5s-4.78 2.44-5 5.54C4 11.23 2 12.5 2 14c0 2.21 4.5 4 10 4s10-1.79 10-4c0-1.5-2-2.77-5-3.46m-2.07 1.3c-1.9.21-3.96.21-5.86 0c-.04-.28-.07-.56-.07-.84c0-2.2 1.35-4 3-4s3 1.8 3 4c0 .28 0 .56-.07.84z"
+      fill="currentColor"
     />
   </svg>
 </template>
 
-<script>
-export default {
-  props: {
-    color: {
-      type: String,
-      default: "",
-    },
-  },
+<style scoped lang="scss">
+.logo {
+  animation: 200ms appear;
 }
-</script>
+
+@keyframes appear {
+  0% {
+    @apply opacity-0;
+  }
+  100% {
+    @apply opacity-100;
+  }
+}
+</style>

components/app/Search.vue

@@ -0,0 +1,123 @@
+<template>
+  <SmartModal v-if="show" @close="$emit('hide-modal')">
+    <template #body>
+      <input
+        id="command"
+        v-model="search"
+        v-focus
+        type="text"
+        name="command"
+        :placeholder="$t('app.type_a_command_search')"
+        class="
+          bg-transparent
+          border-b border-dividerLight
+          text-secondaryDark text-base
+          leading-normal
+          px-4
+          pt-2
+          pb-6
+        "
+      />
+      <div
+        class="
+          divide-y divide-dividerLight
+          flex flex-col
+          space-y-4
+          flex-1
+          overflow-auto
+          hide-scrollbar
+        "
+      >
+        <div
+          v-for="(map, mapIndex) in filteredMappings"
+          :key="`map-${mapIndex}`"
+        >
+          <h5 class="my-2 text-secondaryLight py-2 px-4">
+            {{ $t(map.section) }}
+          </h5>
+          <div
+            v-for="(shortcut, shortcutIndex) in map.shortcuts"
+            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+            class="
+              rounded
+              cursor-pointer
+              flex
+              py-2
+              px-4
+              transition
+              items-center
+              group
+              hover:bg-primaryLight
+            "
+            @click="
+              runAction(shortcut.action)
+              hideModal()
+            "
+          >
+            <i class="mr-4 opacity-75 material-icons group-hover:opacity-100">
+              {{ shortcut.icon }}
+            </i>
+            <span class="flex flex-1 mr-4 group-hover:text-secondaryDark">
+              {{ $t(shortcut.label) }}
+            </span>
+            <span
+              v-for="(key, keyIndex) in shortcut.keys"
+              :key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
+              class="shortcut-key"
+            >
+              {{ key }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { invokeAction } from "~/helpers/actions"
+import { spotlight } from "~/helpers/shortcuts"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  data() {
+    return {
+      search: "",
+      mappings: spotlight,
+    }
+  },
+  computed: {
+    filteredMappings() {
+      return this.mappings.filter((mapping) =>
+        mapping.shortcuts.some((shortcut) =>
+          shortcut.keywords.some((keyword) =>
+            keyword.toLowerCase().includes(this.search.toLowerCase())
+          )
+        )
+      )
+    },
+  },
+  methods: {
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+    runAction(command) {
+      invokeAction(command, "path_from_invokeAction")
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
+  @apply inline-flex;
+}
+</style>

components/app/Section.vue

@@ -1,74 +1,18 @@
 <template>
-  <fieldset :id="label.toLowerCase()">
-    <legend v-if="!noLegend" @click.prevent="collapse">
-      <span>{{ label }}</span>
-      <i class="ml-2 align-middle material-icons">
-        {{ isCollapsed(label) ? "expand_more" : "expand_less" }}
-      </i>
-    </legend>
-    <div
-      class="collapsible"
-      :class="{ hidden: isCollapsed(label.toLowerCase()) }"
-    >
-      <slot></slot>
-    </div>
-  </fieldset>
+  <section :id="label.toLowerCase()" class="flex flex-col flex-1 relative">
+    <slot></slot>
+  </section>
 </template>
 
 <script lang="ts">
-import Vue from "vue"
+import { defineComponent } from "@nuxtjs/composition-api"
 
-export default Vue.extend({
+export default defineComponent({
   props: {
     label: {
       type: String,
       default: "Section",
     },
-    noLegend: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    sectionString(): string {
-      return `${this.$route.path.replace(/\/+$/, "")}/${this.label}`
-    },
-  },
-
-  methods: {
-    collapse() {
-      // Save collapsed section into the collapsedSections array
-      this.$store.commit("setCollapsedSection", this.sectionString)
-    },
-    isCollapsed(_label: string) {
-      return (
-        this.$store.state.theme.collapsedSections.includes(
-          this.sectionString
-        ) || false
-      )
-    },
   },
 })
 </script>
-
-<style scoped lang="scss">
-fieldset {
-  @apply my-4;
-  @apply rounded-lg;
-  @apply bg-bgDarkColor;
-  @apply transition;
-  @apply ease-in-out;
-  @apply duration-150;
-  @apply w-full;
-
-  legend {
-    @apply px-4;
-    @apply text-fgColor;
-    @apply font-bold;
-    @apply cursor-pointer;
-    @apply transition;
-    @apply ease-in-out;
-    @apply duration-150;
-  }
-}
-</style>

components/app/Share.vue

@@ -0,0 +1,125 @@
+<template>
+  <SmartModal
+    v-if="show"
+    :title="$t('app.invite_your_friends')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <p class="text-secondaryLight mb-8 px-2">
+        {{ $t("app.invite_description") }}
+      </p>
+      <div class="flex flex-col space-y-2 px-2">
+        <div class="grid gap-4 grid-cols-3">
+          <a
+            v-for="(platform, index) in platforms"
+            :key="`platform-${index}`"
+            :href="platform.link"
+            target="_blank"
+            class="share-link"
+          >
+            <SmartIcon :name="platform.icon" class="h-6 w-6" />
+            <span class="mt-3">
+              {{ platform.name }}
+            </span>
+          </a>
+          <button class="share-link" @click="copyAppLink">
+            <span class="font-icon h-6 text-xl w-6">{{ copyIcon }}</span>
+            <span class="mt-3">
+              {{ $t("app.copy") }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </template>
+  </SmartModal>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+import { copyToClipboard } from "~/helpers/utils/clipboard"
+
+export default defineComponent({
+  props: {
+    show: Boolean,
+  },
+  data() {
+    const url = "https://hoppscotch.io"
+    const text = "Hoppscotch - Open source API development ecosystem."
+    const description =
+      "Helps you create requests faster, saving precious time on development."
+    const subject =
+      "Checkout Hoppscotch - an open source API development ecosystem"
+    const summary = `Hi there!%0D%0A%0D%0AI thought you’ll like this new platform that I joined called Hoppscotch - https://hoppscotch.io.%0D%0AIt is a simple and intuitive interface for creating and managing your APIs. You can build, test, document, and share your APIs.%0D%0A%0D%0AThe best part about Hoppscotch is that it is open source and free to get started.%0D%0A%0D%0A`
+    const twitter = "hoppscotch_io"
+
+    return {
+      url: "https://hoppscotch.io",
+      copyIcon: "content_copy",
+      platforms: [
+        {
+          name: "Email",
+          icon: "email",
+          link: `mailto:?subject=${subject}&body=${summary}`,
+        },
+        {
+          name: "Twitter",
+          icon: "twitter",
+          link: `https://twitter.com/intent/tweet?text=${text} ${description}&url=${url}&via=${twitter}`,
+        },
+        {
+          name: "Facebook",
+          icon: "facebook",
+          link: `https://www.facebook.com/sharer/sharer.php?u=${url}`,
+        },
+        {
+          name: "Reddit",
+          icon: "reddit",
+          link: `https://www.reddit.com/submit?url=${url}&title=${text}`,
+        },
+        {
+          name: "LinkedIn",
+          icon: "linkedin",
+          link: `https://www.linkedin.com/sharing/share-offsite/?url=${url}`,
+        },
+      ],
+    }
+  },
+  methods: {
+    copyAppLink() {
+      copyToClipboard(this.url)
+      this.copyIcon = "done"
+      this.$toast.success(this.$t("state.copied_to_clipboard").toString(), {
+        icon: "content_paste",
+      })
+      setTimeout(() => (this.copyIcon = "content_copy"), 1000)
+    },
+    hideModal() {
+      this.$emit("hide-modal")
+    },
+  },
+})
+</script>
+
+<style lang="scss" scoped>
+.share-link {
+  @apply border border-dividerLight;
+  @apply rounded;
+  @apply flex-col flex;
+  @apply p-4;
+  @apply items-center;
+  @apply justify-center;
+  @apply hover:(bg-primaryLight text-secondaryDark);
+  @apply focus:outline-none;
+  @apply focus-visible:border-divider;
+
+  svg {
+    @apply opacity-80;
+  }
+
+  &:hover {
+    svg {
+      @apply opacity-100;
+    }
+  }
+}
+</style>

components/app/Shortcuts.vue

@@ -1,102 +1,120 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("shortcuts") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
+  <AppSlideOver :show="show" @close="close()">
+    <template #content>
+      <div
+        class="
+          bg-primary
+          border-b border-dividerLight
+          flex
+          p-2
+          top-0
+          z-10
+          items-center
+          sticky
+          justify-between
+        "
+      >
+        <h3 class="ml-4 heading">{{ $t("app.shortcuts") }}</h3>
+        <div class="flex">
+          <ButtonSecondary
+            icon="close"
+            class="rounded"
+            @click.native="close()"
+          />
         </div>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <div class="p-2">
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd>
-          +
-          <kbd>G</kbd>
-          <label>{{ $t("send_request") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>S</kbd>
-          <label>{{ $t("save_to_collections") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>K</kbd>
-          <label>{{ $t("copy_request_link") }}</label>
-        </div>
-        <div>
-          <kbd>{{ getSpecialKey() }}</kbd
-          >+<kbd>I</kbd>
-          <label>{{ $t("reset_request") }}</label>
+      <div class="bg-primary border-b border-dividerLight">
+        <div class="flex flex-col my-4 mx-6 search-wrapper">
+          <input
+            v-model="filterText"
+            type="search"
+            class="
+              bg-primaryLight
+              border border-dividerLight
+              rounded
+              flex
+              w-full
+              py-2
+              pr-2
+              pl-8
+              focus-visible:border-divider
+            "
+            :placeholder="$t('action.search')"
+          />
         </div>
       </div>
-      <hr />
-      <div class="p-2">
-        <div>
-          <kbd>Alt</kbd>+<kbd>▲</kbd>
-          <label>{{ $t("select_next_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>▼</kbd>
-          <label>{{ $t("select_previous_method") }}</label>
+      <div
+        class="
+          divide-y divide-dividerLight
+          flex flex-col flex-1
+          overflow-auto
+          hide-scrollbar
+        "
+      >
+        <div
+          v-for="(map, mapIndex) in mappings"
+          :key="`map-${mapIndex}`"
+          class="space-y-4 py-4 px-6"
+        >
+          <h1 class="font-semibold text-secondaryDark">
+            {{ $t(map.section) }}
+          </h1>
+          <div
+            v-for="(shortcut, shortcutIndex) in map.shortcuts"
+            :key="`map-${mapIndex}-shortcut-${shortcutIndex}`"
+            class="flex items-center"
+          >
+            <span class="flex flex-1 mr-4">
+              {{ $t(shortcut.label) }}
+            </span>
+            <span
+              v-for="(key, keyIndex) in shortcut.keys"
+              :key="`map-${mapIndex}-shortcut-${shortcutIndex}-key-${keyIndex}`"
+              class="shortcut-key"
+            >
+              {{ key }}
+            </span>
+          </div>
         </div>
       </div>
-      <hr />
-      <div class="p-2">
-        <div>
-          <kbd>Alt</kbd>+<kbd>G</kbd>
-          <label>{{ $t("select_get_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>H</kbd>
-          <label>{{ $t("select_head_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>P</kbd>
-          <label>{{ $t("select_post_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>U</kbd>
-          <label>{{ $t("select_put_method") }}</label>
-        </div>
-        <div>
-          <kbd>Alt</kbd>+<kbd>X</kbd>
-          <label>{{ $t("select_delete_method") }}</label>
-        </div>
-      </div>
-    </div>
-    <div slot="footer"></div>
-  </SmartModal>
+    </template>
+  </AppSlideOver>
 </template>
 
 <script>
-import { getPlatformSpecialKey } from "~/helpers/platformutils"
+import { defineComponent } from "@nuxtjs/composition-api"
+import shortcuts from "~/helpers/shortcuts"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
-  methods: {
-    getSpecialKey: getPlatformSpecialKey,
-    hideModal() {
-      this.$emit("hide-modal")
+  data() {
+    return {
+      filterText: "",
+      mappings: shortcuts,
+    }
+  },
+  watch: {
+    $route() {
+      this.$emit("close")
     },
   },
-}
+  methods: {
+    close() {
+      this.$emit("close")
+    },
+  },
+})
 </script>
 
-<style scoped lang="scss">
-kbd {
+<style lang="scss" scoped>
+.shortcut-key {
+  @apply bg-dividerLight;
+  @apply rounded;
+  @apply ml-2;
+  @apply py-1;
+  @apply px-2;
   @apply inline-flex;
-  @apply resize-none;
-  @apply m-2;
-  @apply rounded-lg;
-  @apply py-2;
-  @apply px-4;
-  @apply text-sm;
 }
 </style>

components/app/Sidenav.vue

@@ -1,307 +1,178 @@
 <template>
-  <aside class="nav-first">
-    <nav class="primary-nav">
-      <!--
-        We're using manual checks for linkActive because the query string
-        seems to mess up the nuxt-link active class.
-      -->
-      <nuxt-link
-        v-tooltip.right="$t('home')"
-        :to="localePath('index')"
-        :class="linkActive('/')"
-        :aria-label="$t('home')"
+  <aside class="flex h-full justify-between md:flex-col">
+    <nav class="flex flex-nowrap md:flex-col">
+      <NuxtLink
+        v-for="(navigation, index) in primaryNavigation"
+        :key="`navigation-${index}`"
+        :to="localePath(navigation.target)"
+        class="nav-link"
+        tabindex="0"
       >
-        <AppLogo alt class="material-icons" style="height: 24px" />
-      </nuxt-link>
-      <nuxt-link
-        v-tooltip.right="$t('realtime')"
-        :to="localePath('realtime')"
-        :class="linkActive('/realtime')"
-      >
-        <i class="material-icons">language</i>
-      </nuxt-link>
-      <nuxt-link
-        v-tooltip.right="$t('graphql')"
-        :to="localePath('graphql')"
-        :class="linkActive('/graphql')"
-        :aria-label="$t('graphql')"
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          height="24"
-          width="24"
-          viewBox="0 0 29.999 30"
-        >
-          <path d="M4.08 22.864l-1.1-.636L15.248.98l1.1.636z" />
-          <path d="M2.727 20.53h24.538v1.272H2.727z" />
-          <path
-            d="M15.486 28.332L3.213 21.246l.636-1.1 12.273 7.086zm10.662-18.47L13.874 2.777l.636-1.1 12.273 7.086z"
-          />
-          <path d="M3.852 9.858l-.636-1.1L15.5 1.67l.636 1.1z" />
-          <path
-            d="M25.922 22.864l-12.27-21.25 1.1-.636 12.27 21.25zM3.7 7.914h1.272v14.172H3.7zm21.328 0H26.3v14.172h-1.272z"
-          />
-          <path d="M15.27 27.793l-.555-.962 10.675-6.163.555.962z" />
-          <path
-            d="M27.985 22.5a2.68 2.68 0 01-3.654.981 2.68 2.68 0 01-.981-3.654 2.68 2.68 0 013.654-.981 2.665 2.665 0 01.98 3.654M6.642 10.174a2.68 2.68 0 01-3.654.981A2.68 2.68 0 012.007 7.5a2.68 2.68 0 013.654-.981 2.68 2.68 0 01.981 3.654M2.015 22.5a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654c-1.287.735-2.92.3-3.654-.98m21.343-12.326a2.68 2.68 0 01.981-3.654 2.68 2.68 0 013.654.981 2.68 2.68 0 01-.981 3.654 2.68 2.68 0 01-3.654-.981M15 30a2.674 2.674 0 112.674-2.673A2.68 2.68 0 0115 30m0-24.652a2.67 2.67 0 01-2.674-2.674 2.67 2.67 0 115.347 0A2.67 2.67 0 0115 5.347"
-          />
-        </svg>
-      </nuxt-link>
-      <nuxt-link
-        v-tooltip.right="$t('documentation')"
-        :to="localePath('doc')"
-        :class="linkActive('/doc')"
-        :aria-label="$t('documentation')"
-      >
-        <i class="material-icons">topic</i>
-      </nuxt-link>
-      <nuxt-link
-        v-tooltip.right="$t('settings')"
-        :to="localePath('settings')"
-        :class="linkActive('/settings')"
-        :aria-label="$t('settings')"
-      >
-        <i class="material-icons">settings</i>
-      </nuxt-link>
-    </nav>
-    <nav v-if="$route.path == '/'" class="secondary-nav">
-      <a v-tooltip.right="$t('request')" href="#request">
-        <i class="material-icons">cloud_upload</i>
-      </a>
-      <a v-tooltip.right="$t('options')" href="#options">
-        <i class="material-icons">toc</i>
-      </a>
-      <a v-tooltip.right="$t('response')" href="#response">
-        <i class="material-icons">cloud_download</i>
-      </a>
-    </nav>
-    <nav v-else-if="$route.path.includes('/realtime')" class="secondary-nav">
-      <a v-tooltip.right="$t('request')" href="#request">
-        <i class="material-icons">cloud_upload</i>
-      </a>
-      <a v-tooltip.right="$t('communication')" href="#response">
-        <i class="material-icons">cloud_download</i>
-      </a>
-    </nav>
-    <nav v-else-if="$route.path.includes('/graphql')" class="secondary-nav">
-      <a v-tooltip.right="$t('endpoint')" href="#endpoint">
-        <i class="material-icons">cloud</i>
-      </a>
-      <a v-tooltip.right="$t('schema')" href="#schema">
-        <i class="material-icons">assignment_returned</i>
-      </a>
-      <a v-tooltip.right="$t('query')" href="#query">
-        <i class="material-icons">cloud_upload</i>
-      </a>
-      <a v-tooltip.right="$t('response')" href="#response">
-        <i class="material-icons">cloud_download</i>
-      </a>
-    </nav>
-    <nav v-else-if="$route.path.includes('/doc')" class="secondary-nav">
-      <a v-tooltip.right="$t('import')" href="#import">
-        <i class="material-icons">folder</i>
-      </a>
-      <a v-tooltip.right="$t('documentation')" href="#documentation">
-        <i class="material-icons">insert_drive_file</i>
-      </a>
-    </nav>
-    <nav v-else-if="$route.path.includes('/settings')" class="secondary-nav">
-      <a v-tooltip.right="$t('account')" href="#account">
-        <i class="material-icons">person</i>
-      </a>
-      <a v-tooltip.right="$t('theme')" href="#theme">
-        <i class="material-icons">brush</i>
-      </a>
-      <a v-tooltip.right="$t('extensions')" href="#extensions">
-        <i class="material-icons">extension</i>
-      </a>
-      <a v-tooltip.right="$t('proxy')" href="#proxy">
-        <i class="material-icons">public</i>
-      </a>
+        <i v-if="navigation.icon" class="material-icons">
+          {{ navigation.icon }}
+        </i>
+        <div v-if="navigation.svg" class="h-4 w-4">
+          <SmartIcon :name="navigation.svg" class="svg-icons" />
+        </div>
+        <span v-if="LEFT_SIDEBAR">{{ navigation.title }}</span>
+      </NuxtLink>
     </nav>
+    <!-- <nav
+      class="
+        flex flex-nowrap
+        p-4
+        items-center
+        justify-center
+        md:(flex-col
+        space-x-0 space-y-2)
+        "
+    >
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip', placement: 'top' }"
+        :title="`${$t('app.search')} <kbd>/</kbd>`"
+        icon="search"
+        class="rounded"
+        @click.native="showSearch = true"
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip', placement: 'top' }"
+        :title="$t('app.invite')"
+        icon="person_add_alt"
+        class="rounded"
+        @click.native="showShare = true"
+      />
+      <ButtonSecondary
+        v-tippy="{ theme: 'tooltip', placement: 'top' }"
+        :title="`${$t('support.title')} <kbd>?</kbd>`"
+        icon="support"
+        class="rounded"
+        @click.native="showSupport = true"
+      />
+    </nav> -->
+    <!-- <AppSearch :show="showSearch" @hide-modal="showSearch = false" />
+    <AppSupport :show="showSupport" @hide-modal="showSupport = false" />
+    <AppShare :show="showShare" @hide-modal="showShare = false" /> -->
   </aside>
 </template>
 
-<script>
-export default {
-  mounted() {
-    window.addEventListener("scroll", () => {
-      const mainNavLinks = document.querySelectorAll("nav.secondary-nav a")
-      const fromTop = window.scrollY
-      mainNavLinks.forEach(({ hash, classList }) => {
-        const section = document.querySelector(hash)
-        if (
-          section &&
-          section.offsetTop <= fromTop &&
-          section.offsetTop + section.offsetHeight > fromTop
-        ) {
-          classList.add("current")
-        } else {
-          classList.remove("current")
-        }
-      })
-    })
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { useSetting } from "~/newstore/settings"
+// import { defineActionHandler } from "~/helpers/actions"
+
+export default defineComponent({
+  setup() {
+    // const showSearch = ref(false)
+    // const showSupport = ref(false)
+    // const showShare = ref(false)
+
+    // defineActionHandler("modals.search.toggle", () => {
+    //   showSearch.value = !showSearch.value
+    // })
+
+    // defineActionHandler("modals.support.toggle", () => {
+    //   showSupport.value = !showSupport.value
+    // })
+
+    // defineActionHandler("modals.share.toggle", () => {
+    //   showShare.value = !showShare.value
+    // })
+
+    return {
+      //     showSearch,
+      //     showSupport,
+      //     showShare,
+      LEFT_SIDEBAR: useSetting("LEFT_SIDEBAR"),
+    }
   },
-  methods: {
-    linkActive(path) {
-      return {
-        "nuxt-link-exact-active": this.$route.path === path,
-        "nuxt-link-active": this.$route.path === path,
-      }
-    },
+  data() {
+    return {
+      primaryNavigation: [
+        {
+          target: "index",
+          icon: "settings_ethernet",
+          title: this.$t("navigation.rest"),
+        },
+        {
+          target: "graphql",
+          svg: "graphql",
+          title: this.$t("navigation.graphql"),
+        },
+        {
+          target: "realtime",
+          icon: "language",
+          title: this.$t("navigation.realtime"),
+        },
+        {
+          target: "documentation",
+          icon: "book",
+          title: this.$t("navigation.doc"),
+        },
+        {
+          target: "settings",
+          icon: "settings",
+          title: this.$t("navigation.settings"),
+        },
+      ],
+    }
   },
-}
+})
 </script>
 
 <style scoped lang="scss">
-$responsiveWidth: 768px;
-
-.nav-first {
-  @apply z-10;
-  @apply h-screen;
-  @apply p-2;
-  @apply bg-bgDarkColor;
-  @apply transition;
-  @apply ease-in-out;
-  @apply duration-150;
-  @apply space-y-2;
-}
-
-nav.primary-nav {
-  @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
+.nav-link {
+  @apply relative;
+  @apply p-4;
+  @apply flex flex-col flex-1;
   @apply items-center;
   @apply justify-center;
-  @apply space-y-2;
-  @apply w-full;
+  @apply hover:(bg-primaryDark text-secondaryDark);
+  @apply focus-visible:text-secondaryDark;
 
-  svg {
-    @apply fill-current;
-  }
-
-  a {
-    @apply inline-flex;
-    @apply items-center;
-    @apply justify-center;
-    @apply flex-shrink-0;
-    @apply p-4;
-    @apply rounded-full;
-    @apply bg-bgLightColor;
-    @apply text-fgLightColor;
-    @apply fill-current;
-    @apply outline-none;
-    @apply transition;
-    @apply ease-in-out;
-    @apply duration-150;
-
-    &:hover {
-      @apply text-fgColor;
-      @apply fill-current;
-
-      svg {
-        @apply fill-current;
-      }
-    }
-
-    &.nuxt-link-exact-active {
-      @apply bg-acColor;
-      @apply text-actColor;
-      @apply fill-current;
-
-      border-radius: 16px;
-
-      svg {
-        @apply fill-current;
-      }
-    }
-  }
-}
-
-nav.primary-nav::-webkit-scrollbar,
-.nav-first::-webkit-scrollbar {
-  @apply hidden;
-}
-
-nav.secondary-nav {
-  @apply flex;
-  @apply flex-col;
-  @apply flex-nowrap;
-  @apply items-center;
-  @apply justify-center;
-  @apply border-t-2;
-  @apply border-dashed;
-  @apply border-brdColor;
-  @apply pt-2;
-  @apply space-y-2;
-
-  a {
-    @apply inline-flex;
-    @apply items-center;
-    @apply justify-center;
-    @apply flex-shrink-0;
-    @apply p-4;
-    @apply rounded-full;
-    @apply bg-bgDarkColor;
-    @apply text-fgLightColor;
-    @apply fill-current;
-    @apply outline-none;
-    @apply transition;
-    @apply ease-in-out;
-    @apply duration-150;
-
-    &:hover {
-      @apply text-fgColor;
-      @apply fill-current;
-    }
-
-    &.current {
-      @apply text-acColor;
-      @apply fill-current;
-    }
-  }
-}
-
-@media (max-width: $responsiveWidth) {
-  .nav-first {
-    @apply fixed;
-    @apply top-auto;
+  &::after {
+    @apply absolute;
+    @apply inset-x-0;
+    @apply md:inset-x-auto;
+    @apply md:inset-y-0;
     @apply bottom-0;
-    @apply h-auto;
-    @apply p-0;
+    @apply md:bottom-auto;
+    @apply md:left-0;
+    @apply z-2;
+    @apply h-0.5;
+    @apply md:h-full;
     @apply w-full;
-    @apply bg-bgColor;
-    @apply shadow-2xl;
+    @apply md:w-0.5;
+
+    content: "";
   }
 
-  nav.primary-nav {
-    @apply flex-row;
-    @apply flex-nowrap;
-    @apply overflow-auto;
-    @apply bg-bgDarkColor;
-    @apply space-y-0;
+  &:focus::after {
+    @apply bg-divider;
+  }
 
-    padding-bottom: env(safe-area-inset-bottom);
+  .material-icons,
+  .svg-icons {
+    @apply opacity-75;
+  }
 
-    a {
-      @apply bg-transparent;
-      @apply my-2;
-      @apply flex-1;
+  span {
+    @apply mt-2;
+    @apply font-font-medium;
+  }
 
-      &.nuxt-link-exact-active {
-        @apply bg-transparent;
-        @apply text-acColor;
-        @apply fill-current;
+  &.exact-active-link {
+    @apply text-secondaryDark;
+    @apply bg-primaryLight;
+    @apply hover:text-secondaryDark;
 
-        svg {
-          @apply fill-current;
-        }
-      }
+    .material-icons,
+    .svg-icons {
+      @apply opacity-100;
     }
-  }
 
-  nav.secondary-nav {
-    @apply hidden;
+    &::after {
+      @apply bg-accent;
+    }
   }
 }
 </style>

components/app/SlideOver.vue

@@ -0,0 +1,69 @@
+<template>
+  <div>
+    <transition v-if="show" name="fade" appear>
+      <div class="inset-0 transition-opacity z-20 fixed" @keydown.esc="close()">
+        <div
+          class="bg-primaryDark opacity-90 inset-0 absolute"
+          tabindex="0"
+          @click="close()"
+        ></div>
+      </div>
+    </transition>
+    <aside
+      class="
+        bg-primary
+        flex flex-col
+        h-full
+        max-w-full
+        transform
+        transition
+        top-0
+        ease-in-out
+        right-0
+        w-96
+        z-30
+        duration-300
+        fixed
+        overflow-auto
+      "
+      :class="show ? 'shadow-xl translate-x-0' : 'translate-x-full'"
+    >
+      <slot name="content"></slot>
+    </aside>
+  </div>
+</template>
+
+<script>
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    show: {
+      type: Boolean,
+      required: true,
+      default: false,
+    },
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(show) {
+        if (process.client) {
+          if (show) document.body.style.setProperty("overflow", "hidden")
+          else document.body.style.removeProperty("overflow")
+        }
+      },
+    },
+  },
+  mounted() {
+    document.addEventListener("keydown", (e) => {
+      if (e.keyCode === 27 && this.show) this.close()
+    })
+  },
+  methods: {
+    close() {
+      this.$emit("close")
+    },
+  },
+})
+</script>

components/app/Support.vue

@@ -1,31 +1,97 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("support_us") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal
+    v-if="show"
+    :title="$t('support.title')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col space-y-2">
+        <SmartItem
+          icon="menu_book"
+          :label="$t('app.documentation')"
+          to="https://docs.hoppscotch.io"
+          :description="$t('support.documentation')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          icon="keyboard"
+          :label="$t('app.keyboard_shortcuts')"
+          :description="$t('support.shortcuts')"
+          info-icon="chevron_right"
+          active
+          @click.native="
+            showShortcuts()
+            hideModal()
+          "
+        />
+        <SmartItem
+          icon="auto_awesome"
+          :label="$t('app.whats_new')"
+          to="https://docs.hoppscotch.io/changelog"
+          :description="$t('support.changelog')"
+          info-icon="chevron_right"
+          active
+          blank
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          icon="contact_support"
+          :label="$t('app.chat_with_us')"
+          :description="$t('support.chat')"
+          info-icon="chevron_right"
+          active
+          @click.native="
+            chatWithUs()
+            hideModal()
+          "
+        />
+        <SmartItem
+          svg="discord"
+          :label="$t('app.join_discord_community')"
+          to="https://hoppscotch.io/discord"
+          blank
+          :description="$t('support.community')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
+        <SmartItem
+          svg="twitter"
+          :label="$t('app.twitter')"
+          to="https://twitter.com/hoppscotch_io"
+          blank
+          :description="$t('support.twitter')"
+          info-icon="chevron_right"
+          active
+          @click.native="hideModal()"
+        />
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <AppContributors />
-    </div>
-    <div slot="footer"></div>
+    </template>
   </SmartModal>
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+import { invokeAction } from "~/helpers/actions"
+import { showChat } from "~/helpers/support"
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
   methods: {
+    chatWithUs() {
+      showChat()
+    },
+    showShortcuts() {
+      invokeAction("flyouts.keybinds.toggle")
+    },
     hideModal() {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/button/Primary.vue

@@ -0,0 +1,147 @@
+<template>
+  <SmartLink
+    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
+    :exact="exact"
+    :blank="blank"
+    class="
+      font-bold
+      py-2
+      inline-flex
+      items-center
+      justify-center
+      focus:outline-none
+      focus-visible:bg-accentDark
+    "
+    :class="[
+      color
+        ? `text-${color}-800 bg-${color}-200 hover:(text-${color}-900 bg-${color}-300) focus-visible:(text-${color}-900 bg-${color}-300)`
+        : `text-accentContrast bg-accent hover:bg-accentDark focus-visible:bg-accentDark`,
+      label ? 'px-4' : 'px-2',
+      rounded ? 'rounded-full' : 'rounded',
+      { 'opacity-75 cursor-not-allowed': disabled },
+      { 'pointer-events-none': loading },
+      { 'px-6 py-4 text-lg': large },
+      { 'shadow-lg hover:shadow-xl': shadow },
+      {
+        'text-white bg-gradient-to-tr from-gradientFrom via-gradientVia to-gradientTo':
+          gradient,
+      },
+      {
+        'border border-accent hover:border-accentDark focus-visible:border-accentDark':
+          outline,
+      },
+    ]"
+    :disabled="disabled"
+    :tabindex="loading ? '-1' : '0'"
+  >
+    <span
+      v-if="!loading"
+      class="inline-flex items-center justify-center whitespace-nowrap"
+      :class="{ 'flex-row-reverse': reverse }"
+    >
+      <i
+        v-if="icon"
+        class="material-icons"
+        :class="[
+          { '!text-2xl': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      >
+        {{ icon }}
+      </i>
+      <SmartIcon
+        v-if="svg"
+        :name="svg"
+        class="svg-icons"
+        :class="[
+          { '!h-6 !w-6': large },
+          label ? (reverse ? 'ml-2' : 'mr-2') : '',
+        ]"
+      />
+      {{ label }}
+      <div v-if="shortcut.length" class="ml-2">
+        <kbd
+          v-for="(key, index) in shortcut"
+          :key="`key-${index}`"
+          class="bg-accentLight rounded ml-1 px-1 inline-flex"
+        >
+          {{ key }}
+        </kbd>
+      </div>
+    </span>
+    <SmartSpinner v-else />
+  </SmartLink>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    to: {
+      type: String,
+      default: "",
+    },
+    exact: {
+      type: Boolean,
+      default: true,
+    },
+    blank: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    svg: {
+      type: String,
+      default: "",
+    },
+    color: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    loading: {
+      type: Boolean,
+      default: false,
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    shadow: {
+      type: Boolean,
+      default: false,
+    },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+    gradient: {
+      type: Boolean,
+      default: false,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    shortcut: {
+      type: Array,
+      default: () => [],
+    },
+  },
+})
+</script>

components/button/Secondary.vue

@@ -0,0 +1,137 @@
+<template>
+  <SmartLink
+    :to="`${/^\/(?!\/).*$/.test(to) ? localePath(to) : to}`"
+    :exact="exact"
+    :blank="blank"
+    class="
+      font-medium
+      py-2
+      inline-flex
+      items-center
+      justify-center
+      whitespace-nowrap
+      hover:bg-primaryDark
+      focus:outline-none
+      focus-visible:bg-primaryDark
+    "
+    :class="[
+      color
+        ? `text-${color}-500 hover:(text-${color}-600 text-${color}-600)`
+        : 'text-secondary hover:text-secondaryDark focus-visible:text-secondaryDark',
+      label ? 'rounded px-4' : 'px-2',
+      { 'rounded-full': rounded },
+      { 'opacity-75 cursor-not-allowed': disabled },
+      { 'flex-row-reverse': reverse },
+      { 'px-6 py-4 text-lg': large },
+      {
+        'border border-divider hover:border-dividerDark focus-visible:border-dividerDark':
+          outline,
+      },
+      { 'bg-primaryDark': filled },
+    ]"
+    :disabled="disabled"
+    tabindex="0"
+  >
+    <i
+      v-if="icon"
+      class="material-icons"
+      :class="[
+        { '!text-2xl': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]"
+    >
+      {{ icon }}
+    </i>
+    <SmartIcon
+      v-if="svg"
+      :name="svg"
+      class="svg-icons"
+      :class="[
+        { '!h-6 !w-6': large },
+        label ? (reverse ? 'ml-2' : 'mr-2') : '',
+      ]"
+    />
+    {{ label }}
+    <div v-if="shortcut.length" class="ml-2">
+      <kbd
+        v-for="(key, index) in shortcut"
+        :key="`key-${index}`"
+        class="
+          bg-dividerLight
+          rounded
+          text-secondaryLight
+          ml-1
+          px-1
+          inline-flex
+        "
+      >
+        {{ key }}
+      </kbd>
+    </div>
+  </SmartLink>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
+  props: {
+    to: {
+      type: String,
+      default: "",
+    },
+    exact: {
+      type: Boolean,
+      default: true,
+    },
+    blank: {
+      type: Boolean,
+      default: false,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    icon: {
+      type: String,
+      default: "",
+    },
+    svg: {
+      type: String,
+      default: "",
+    },
+    color: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    reverse: {
+      type: Boolean,
+      default: false,
+    },
+    rounded: {
+      type: Boolean,
+      default: false,
+    },
+    large: {
+      type: Boolean,
+      default: false,
+    },
+    outline: {
+      type: Boolean,
+      default: false,
+    },
+    shortcut: {
+      type: Array,
+      default: () => [],
+    },
+    filled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+})
+</script>

components/collections/Add.vue

@@ -1,43 +1,40 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("new_collection") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelAdd"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="addNewCollection"
+        />
+        <label for="selectLabelAdd">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="name"
-        type="text"
-        :placeholder="$t('my_new_collection')"
-        @keyup.enter="addNewCollection"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="addNewCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="addNewCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -48,6 +45,12 @@ export default {
   },
   methods: {
     addNewCollection() {
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
       this.$emit("submit", this.name)
       this.hideModal()
     },
@@ -56,5 +59,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/AddFolder.vue

@@ -1,43 +1,41 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("new_folder") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelAddFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="addFolder"
+        />
+        <label for="selectLabelAddFolder">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="name"
-        type="text"
-        :placeholder="$t('my_new_folder')"
-        @keyup.enter="addFolder"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="addFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="addFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     folder: { type: Object, default: () => {} },
@@ -51,6 +49,12 @@ export default {
   },
   methods: {
     addFolder() {
+      if (!this.name) {
+        this.$toast.error(this.$t("folder.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
       this.$emit("add-folder", {
         name: this.name,
         folder: this.folder,
@@ -63,5 +67,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/ChooseType.vue

@@ -1,76 +1,81 @@
 <template>
   <div v-if="show">
-    <SmartTabs
-      :id="'collections_tab'"
-      styles="m-4"
-      @tab-changed="updateCollectionsType"
-    >
+    <SmartTabs :id="'collections_tab'" @tab-changed="updateCollectionsType">
       <SmartTab
         :id="'my-collections'"
-        :label="'My Collections'"
+        :label="$t('collection.my_collections')"
         :selected="true"
       />
       <SmartTab
         v-if="currentUser && currentUser.eaInvited && !doc"
         :id="'team-collections'"
-        :label="'Team Collections'"
+        :label="$t('collection.team_collections')"
       >
-        <ul>
-          <li>
-            <span class="select-wrapper">
-              <SmartIntersection @intersecting="onTeamSelectIntersect">
-                <select
-                  id="team"
-                  type="text"
-                  class="team"
-                  autofocus
-                  @change="updateSelectedTeam(myTeams[$event.target.value])"
-                >
-                  <option
-                    :key="undefined"
-                    :value="undefined"
-                    hidden
-                    disabled
-                    selected
-                  >
-                    Select team
-                  </option>
-                  <option
-                    v-for="(team, index) in myTeams"
-                    :key="index"
-                    :value="index"
-                  >
-                    {{ team.name }}
-                  </option>
-                </select>
-              </SmartIntersection>
-            </span>
-          </li>
-        </ul>
+        <SmartIntersection @intersecting="onTeamSelectIntersect">
+          <div class="select-wrapper">
+            <select
+              id="team"
+              type="text"
+              autofocus
+              class="
+                bg-transparent
+                border-b border-transparent
+                cursor-pointer
+                flex
+                font-medium
+                w-full
+                py-2
+                px-4
+                appearance-none
+                hover:bg-primaryDark
+              "
+              @change="updateSelectedTeam(myTeams[$event.target.value])"
+            >
+              <option
+                :key="undefined"
+                :value="undefined"
+                hidden
+                disabled
+                selected
+              >
+                {{ $t("collection.select_team") }}
+              </option>
+              <option
+                v-for="(team, index) in myTeams"
+                :key="`team-${index}`"
+                :value="index"
+              >
+                {{ team.name }}
+              </option>
+            </select>
+          </div>
+        </SmartIntersection>
       </SmartTab>
     </SmartTabs>
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
 import gql from "graphql-tag"
 import { currentUserInfo$ } from "~/helpers/teams/BackendUserInfo"
+import { useReadonlyStream } from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
   props: {
     doc: Boolean,
     show: Boolean,
   },
+  setup() {
+    return {
+      currentUser: useReadonlyStream(currentUserInfo$, null),
+    }
+  },
   data() {
     return {
       skipTeamsFetching: true,
     }
   },
-  subscriptions() {
-    return {
-      currentUser: currentUserInfo$,
-    }
-  },
   apollo: {
     myTeams: {
       query: gql`
@@ -94,12 +99,12 @@ export default {
       this.$apollo.queries.myTeams.refetch()
       this.skipTeamsFetching = false
     },
-    updateCollectionsType(tabID) {
+    updateCollectionsType(tabID: string) {
       this.$emit("update-collection-type", tabID)
     },
-    updateSelectedTeam(team) {
+    updateSelectedTeam(team: any) {
       this.$emit("update-selected-team", team)
     },
   },
-}
+})
 </script>

components/collections/Edit.vue

@@ -1,43 +1,40 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_collection") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelEdit"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="saveCollection"
+        />
+        <label for="selectLabelEdit">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="name"
-        type="text"
-        :placeholder="placeholderCollName"
-        @keyup.enter="saveCollection"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="saveCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     placeholderCollName: { type: String, default: null },
@@ -49,6 +46,12 @@ export default {
   },
   methods: {
     saveCollection() {
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
       this.$emit("submit", this.name)
       this.hideModal()
     },
@@ -57,5 +60,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/EditFolder.vue

@@ -1,42 +1,41 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_folder") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelEditFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="editFolder"
+        />
+        <label for="selectLabelEditFolder">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="name"
-        type="text"
-        @keyup.enter="editFolder"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="editFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="editFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
   },
@@ -47,6 +46,12 @@ export default {
   },
   methods: {
     editFolder() {
+      if (!this.name) {
+        this.$toast.error(this.$t("folder.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
       this.$emit("submit", this.name)
       this.hideModal()
     },
@@ -55,5 +60,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/EditRequest.vue

@@ -1,43 +1,37 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_request") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal v-if="show" :title="$t('modal.edit_request')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelEditReq"
+          v-model="requestUpdateData.name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="saveRequest"
+        />
+        <label for="selectLabelEditReq">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="requestUpdateData.name"
-        type="text"
-        :placeholder="placeholderReqName"
-        @keyup.enter="saveRequest"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="saveRequest">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="saveRequest" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
 <script>
-export default {
+import { defineComponent } from "@nuxtjs/composition-api"
+
+export default defineComponent({
   props: {
     show: Boolean,
     placeholderReqName: { type: String, default: null },
@@ -51,6 +45,12 @@ export default {
   },
   methods: {
     saveRequest() {
+      if (!this.requestUpdateData.name) {
+        this.$toast.error(this.$t("request.invalid_name"), {
+          icon: "error_outline",
+        })
+        return
+      }
       this.$emit("submit", this.requestUpdateData)
       this.hideModal()
     },
@@ -59,5 +59,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/ImportExport.vue

@@ -1,146 +1,133 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">Export</h3>
-        <div>
-          <button
-            v-if="mode != 'import_export'"
-            v-tooltip.left="'Back'"
-            class="tooltip-target icon"
-            @click="mode = 'import_export'"
-          >
-            <i class="material-icons">arrow_back</i>
-          </button>
-          <v-popover
-            v-if="
-              mode == 'import_export' &&
-              collectionsType.type == 'my-collections'
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <ButtonSecondary
+        v-if="mode == 'import_from_my_collections'"
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('action.go_back')"
+        class="rounded"
+        icon="arrow_back"
+        @click.native="
+          mode = 'import_export'
+          mySelectedCollectionID = undefined
+        "
+      />
+      <span>
+        <tippy
+          v-if="
+            mode == 'import_export' && collectionsType.type == 'my-collections'
+          "
+          ref="options"
+          interactive
+          trigger="click"
+          theme="popover"
+          arrow
+        >
+          <template #trigger>
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('action.more')"
+              class="rounded"
+              icon="more_vert"
+            />
+          </template>
+          <SmartItem
+            icon="assignment_returned"
+            :label="$t('import.from_gist')"
+            @click.native="
+              readCollectionGist
+              $refs.options.tippy().hide()
+            "
+          />
+          <span
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              !currentUser
+                ? $t('export.require_github')
+                : currentUser.provider !== 'github.com'
+                ? $t('export.require_github')
+                : null
             "
           >
-            <button v-tooltip.left="$t('more')" class="tooltip-target icon">
-              <i class="material-icons">more_vert</i>
-            </button>
-            <template slot="popover">
-              <div>
-                <button
-                  v-close-popover
-                  class="icon"
-                  @click="readCollectionGist"
-                >
-                  <i class="material-icons">assignment_returned</i>
-                  <span>{{ $t("import_from_gist") }}</span>
-                </button>
-              </div>
-              <div
-                v-tooltip.bottom="{
-                  content: !fb.currentUser
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : null,
-                }"
-              >
-                <button
-                  v-close-popover
-                  :disabled="
-                    !fb.currentUser
-                      ? true
-                      : fb.currentUser.provider !== 'github.com'
-                      ? true
-                      : false
-                  "
-                  class="icon"
-                  @click="createCollectionGist"
-                >
-                  <i class="material-icons">assignment_turned_in</i>
-                  <span>{{ $t("create_secret_gist") }}</span>
-                </button>
-              </div>
-            </template>
-          </v-popover>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <div v-if="mode == 'import_export'" class="flex flex-col items-start p-2">
-        <span
-          v-tooltip="{
-            content: !fb.currentUser
-              ? $t('login_first')
-              : $t('replace_current'),
-          }"
-        >
-          <button
-            v-if="collectionsType.type == 'my-collections'"
-            :disabled="!fb.currentUser"
-            class="icon"
-            @click="syncCollections"
-          >
-            <i class="material-icons">folder_shared</i>
-            <span>{{ $t("import_from_sync") }}</span>
-          </button>
-        </span>
-        <button
-          v-tooltip="$t('replace_current')"
-          class="icon"
-          @click="openDialogChooseFileToReplaceWith"
-        >
-          <i class="material-icons">create_new_folder</i>
-          <span>{{ $t("replace_json") }}</span>
-          <input
-            ref="inputChooseFileToReplaceWith"
-            type="file"
-            style="display: none"
-            accept="application/json"
-            @change="replaceWithJSON"
-          />
-        </button>
-        <button
-          v-tooltip="$t('preserve_current')"
-          class="icon"
-          @click="openDialogChooseFileToImportFrom"
-        >
-          <i class="material-icons">folder_special</i>
-          <span>{{ $t("import_json") }}</span>
-          <input
-            ref="inputChooseFileToImportFrom"
-            type="file"
-            style="display: none"
-            accept="application/json"
-            @change="importFromJSON"
-          />
-        </button>
-        <button
+            <SmartItem
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              icon="assignment_turned_in"
+              :label="$t('export.create_secret_gist')"
+              @click.native="
+                createCollectionGist()
+                $refs.options.tippy().hide()
+              "
+            />
+          </span>
+        </tippy>
+      </span>
+    </template>
+    <template #body>
+      <div v-if="mode == 'import_export'" class="flex flex-col space-y-2">
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.replace_current')"
+          icon="folder_special"
+          :label="$t('action.replace_json')"
+          @click.native="openDialogChooseFileToReplaceWith"
+        />
+        <input
+          ref="inputChooseFileToReplaceWith"
+          class="input"
+          type="file"
+          style="display: none"
+          accept="application/json"
+          @change="replaceWithJSON"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.preserve_current')"
+          icon="create_new_folder"
+          :label="$t('import.json')"
+          @click.native="openDialogChooseFileToImportFrom"
+        />
+        <input
+          ref="inputChooseFileToImportFrom"
+          class="input"
+          type="file"
+          style="display: none"
+          accept="application/json"
+          @change="importFromJSON"
+        />
+        <SmartItem
           v-if="collectionsType.type == 'team-collections'"
-          v-tooltip="$t('replace_current')"
-          class="icon"
-          @click="mode = 'import_from_my_collections'"
-        >
-          <i class="material-icons">folder_special</i>
-          <span>{{ "Import from My Collections" }}</span>
-        </button>
-        <button
-          v-tooltip="$t('show_code')"
-          class="icon"
-          @click="
-            () => {
-              mode = 'export_as_json'
-              getJSONCollection()
-            }
-          "
-        >
-          <i class="material-icons">folder_special</i>
-          <span>{{ "Export As JSON" }}</span>
-        </button>
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.preserve_current')"
+          icon="folder_shared"
+          :label="$t('import.from_my_collections')"
+          @click.native="mode = 'import_from_my_collections'"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          icon="drive_file_move"
+          :label="$t('export.as_json')"
+          @click.native="exportJSON"
+        />
       </div>
-      <div v-if="mode == 'import_from_my_collections'">
-        <span class="select-wrapper">
+      <div
+        v-if="mode == 'import_from_my_collections'"
+        class="flex flex-col px-2"
+      >
+        <div class="select-wrapper">
           <select
             type="text"
+            class="select"
             autofocus
             @change="
               ($event) => {
@@ -159,104 +146,95 @@
             </option>
             <option
               v-for="(collection, index) in myCollections"
-              :key="index"
+              :key="`collection-${index}`"
               :value="index"
             >
               {{ collection.name }}
             </option>
           </select>
-        </span>
-        <button
-          class="m-2 icon primary"
-          :disabled="mySelectedCollectionID == undefined"
-          @click="importFromMyCollections"
-        >
-          {{ $t("import") }}
-        </button>
-      </div>
-      <div v-if="mode == 'export_as_json'">
-        <textarea v-model="collectionJson" rows="8" readonly></textarea>
-        <div class="row-wrapper">
-          <span class="m-2">
-            <button
-              v-tooltip="$t('download_file')"
-              class="icon primary"
-              @click="exportJSON"
-            >
-              {{ $t("export") }}
-            </button>
-          </span>
         </div>
       </div>
-    </div>
+    </template>
+    <template #footer>
+      <div v-if="mode == 'import_from_my_collections'">
+        <span>
+          <ButtonPrimary
+            :disabled="mySelectedCollectionID == undefined"
+            icon="create_new_folder"
+            :label="$t('import.title')"
+            @click.native="importFromMyCollections"
+          />
+        </span>
+      </div>
+    </template>
   </SmartModal>
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
+import { defineComponent } from "@nuxtjs/composition-api"
+import { currentUser$ } from "~/helpers/fb/auth"
 import * as teamUtils from "~/helpers/teams/utils"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  restCollections$,
+  setRESTCollections,
+  appendRESTCollections,
+} from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
     collectionsType: { type: Object, default: () => {} },
   },
+  setup() {
+    return {
+      myCollections: useReadonlyStream(restCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
   data() {
     return {
-      fb,
       showJsonCode: false,
       mode: "import_export",
       mySelectedCollectionID: undefined,
       collectionJson: "",
     }
   },
-  subscriptions() {
-    return {
-      SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
-    }
-  },
-  computed: {
-    myCollections() {
-      return fb.currentUser !== null
-        ? fb.currentCollections
-        : this.$store.state.postwoman.collections
-    },
-  },
   methods: {
     async createCollectionGist() {
+      this.getJSONCollection()
       await this.$axios
         .$post(
           "https://api.github.com/gists",
           {
             files: {
               "hoppscotch-collections.json": {
-                content: this.getJSONCollection(),
+                content: this.collectionJson,
               },
             },
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"), {
             icon: "done",
           })
           window.open(res.html_url)
         })
-        .catch((error) => {
-          this.$toast.error(this.$t("something_went_wrong"), {
-            icon: "error",
+        .catch((e) => {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
           })
-          console.log(error)
+          console.error(e)
         })
     },
     async readCollectionGist() {
-      const gist = prompt(this.$t("enter_gist_url"))
+      const gist = prompt(this.$t("import.gist_url"))
       if (!gist) return
       await this.$axios
         .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -266,16 +244,12 @@ export default {
         })
         .then(({ files }) => {
           const collections = JSON.parse(Object.values(files)[0].content)
-          this.$store.commit("postwoman/replaceCollections", {
-            data: collections,
-            flag: "rest",
-          })
+          setRESTCollections(collections)
           this.fileImported()
-          this.syncToFBCollections()
         })
-        .catch((error) => {
+        .catch((e) => {
           this.failedImport()
-          console.log(error)
+          console.error(e)
         })
     },
     hideModal() {
@@ -325,17 +299,13 @@ export default {
                 this.failedImport()
               }
             })
-            .catch((error) => {
-              console.log(error)
+            .catch((e) => {
+              console.error(e)
               this.failedImport()
             })
         } else {
-          this.$store.commit("postwoman/replaceCollections", {
-            data: collections,
-            flag: "rest",
-          })
+          setRESTCollections(collections)
           this.fileImported()
-          this.syncToFBCollections()
         }
       }
       reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
@@ -383,16 +353,12 @@ export default {
                 this.failedImport()
               }
             })
-            .catch((error) => {
-              console.log(error)
+            .catch((e) => {
+              console.error(e)
               this.failedImport()
             })
         } else {
-          this.$store.commit("postwoman/importCollections", {
-            data: collections,
-            flag: "rest",
-          })
-          this.syncToFBCollections()
+          appendRESTCollections(collections)
           this.fileImported()
         }
       }
@@ -414,18 +380,14 @@ export default {
             this.failedImport()
           }
         })
-        .catch((error) => {
-          console.log(error)
+        .catch((e) => {
+          console.error(e)
           this.failedImport()
         })
     },
     async getJSONCollection() {
       if (this.collectionsType.type === "my-collections") {
-        this.collectionJson = JSON.stringify(
-          this.$store.state.postwoman.collections,
-          null,
-          2
-        )
+        this.collectionJson = JSON.stringify(this.myCollections, null, 2)
       } else {
         this.collectionJson = await teamUtils.exportAsJSON(
           this.$apollo,
@@ -435,88 +397,74 @@ export default {
       return this.collectionJson
     },
     exportJSON() {
-      let text = this.collectionJson
-      text = text.replace(/\n/g, "\r\n")
-      const blob = new Blob([text], {
-        type: "text/json",
+      this.getJSONCollection()
+      const dataToWrite = this.collectionJson
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
       })
-      const anchor = document.createElement("a")
-      anchor.download = "hoppscotch-collection.json"
-      anchor.href = window.URL.createObjectURL(blob)
-      anchor.target = "_blank"
-      anchor.style.display = "none"
-      document.body.appendChild(anchor)
-      anchor.click()
-      document.body.removeChild(anchor)
-      this.$toast.success(this.$t("download_started"), {
-        icon: "done",
-      })
-    },
-    syncCollections() {
-      this.$store.commit("postwoman/replaceCollections", {
-        data: fb.currentCollections,
-        flag: "rest",
-      })
-      this.fileImported()
-    },
-    syncToFBCollections() {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        fb.writeCollections(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-          "collections"
-        )
-      }
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }, 1000)
     },
     fileImported() {
-      this.$toast.info(this.$t("file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"), {
         icon: "folder_shared",
       })
     },
     failedImport() {
-      this.$toast.error(this.$t("import_failed"), {
-        icon: "error",
+      this.$toast.error(this.$t("import.failed"), {
+        icon: "error_outline",
       })
     },
     parsePostmanCollection({ info, name, item }) {
-      const postwomanCollection = {
+      const hoppscotchCollection = {
         name: "",
         folders: [],
         requests: [],
       }
 
-      postwomanCollection.name = info ? info.name : name
+      hoppscotchCollection.name = info ? info.name : name
 
       if (item && item.length > 0) {
         for (const collectionItem of item) {
           if (collectionItem.request) {
             if (
               Object.prototype.hasOwnProperty.call(
-                postwomanCollection,
+                hoppscotchCollection,
                 "folders"
               )
             ) {
-              postwomanCollection.name = info ? info.name : name
-              postwomanCollection.requests.push(
+              hoppscotchCollection.name = info ? info.name : name
+              hoppscotchCollection.requests.push(
                 this.parsePostmanRequest(collectionItem)
               )
             } else {
-              postwomanCollection.name = name || ""
-              postwomanCollection.requests.push(
+              hoppscotchCollection.name = name || ""
+              hoppscotchCollection.requests.push(
                 this.parsePostmanRequest(collectionItem)
               )
             }
           } else if (this.hasFolder(collectionItem)) {
-            postwomanCollection.folders.push(
+            hoppscotchCollection.folders.push(
               this.parsePostmanCollection(collectionItem)
             )
           } else {
-            postwomanCollection.requests.push(
+            hoppscotchCollection.requests.push(
               this.parsePostmanRequest(collectionItem)
             )
           }
         }
       }
-      return postwomanCollection
+      return hoppscotchCollection
     },
     parsePostmanRequest({ name, request }) {
       const pwRequest = {
@@ -606,5 +554,5 @@ export default {
       return Object.prototype.hasOwnProperty.call(item, "item")
     },
   },
-}
+})
 </script>

components/collections/SaveRequest.vue

@@ -1,65 +1,89 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("save_request_as") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
+  <SmartModal v-if="show" :title="$t('collection.save_as')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <div class="flex relative">
+          <input
+            id="selectLabelSaveReq"
+            v-model="requestName"
+            v-focus
+            class="input floating-input"
+            placeholder=" "
+            type="text"
+            @keyup.enter="saveRequestAs"
+          />
+          <label for="selectLabelSaveReq">
+            {{ $t("request.name") }}
+          </label>
         </div>
+        <label class="px-4 pt-4 pb-4">
+          {{ $t("collection.select_location") }}
+        </label>
+        <CollectionsGraphql
+          v-if="mode === 'graphql'"
+          :doc="false"
+          :show-coll-actions="false"
+          :picked="picked"
+          :saving-mode="true"
+          @select="onSelect"
+        />
+        <Collections
+          v-else
+          :picked="picked"
+          :save-request="true"
+          @select="onSelect"
+          @update-collection="collectionsType.type = $event"
+          @update-coll-type="onUpdateCollType"
+        />
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("token_req_name") }}</label>
-      <input
-        id="selectLabel"
-        v-model="requestData.name"
-        type="text"
-        @keyup.enter="saveRequestAs"
-      />
-      <label for="selectLabel">Select location</label>
-      <!-- <input readonly :value="path" /> -->
-      <Collections
-        :picked="picked"
-        :save-request="true"
-        @select="onSelect"
-        @update-collection="collectionsType.type = $event"
-        @update-coll-type="onUpdateCollType"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="saveRequestAs">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveRequestAs"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
+import { defineComponent } from "@nuxtjs/composition-api"
 import * as teamUtils from "~/helpers/teams/utils"
+import {
+  saveRESTRequestAs,
+  editRESTRequest,
+  editGraphqlRequest,
+  saveGraphqlRequestAs,
+} from "~/newstore/collections"
+import { getGQLSession, useGQLRequestName } from "~/newstore/GQLSession"
+import {
+  getRESTRequest,
+  useRESTRequestName,
+  setRESTSaveContext,
+} from "~/newstore/RESTSession"
 
-export default {
+export default defineComponent({
   props: {
+    // mode can be either "graphql" or "rest"
+    mode: { type: String, default: "rest" },
     show: Boolean,
-    editingRequest: { type: Object, default: () => {} },
+  },
+  setup(props) {
+    return {
+      requestName:
+        props.mode === "rest" ? useRESTRequestName() : useGQLRequestName(),
+    }
   },
   data() {
     return {
-      defaultRequestName: "Untitled Request",
-      path: "Path will appear here",
       requestData: {
-        name: undefined,
+        name: this.requestName,
         collectionIndex: undefined,
         folderName: undefined,
         requestIndex: undefined,
@@ -71,52 +95,6 @@ export default {
       picked: null,
     }
   },
-  subscriptions() {
-    return {
-      SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
-    }
-  },
-  computed: {
-    folders() {
-      const collections = this.$store.state.postwoman.collections
-      const collectionIndex = this.$data.requestData.collectionIndex
-      const userSelectedAnyCollection = collectionIndex !== undefined
-      if (!userSelectedAnyCollection) return []
-
-      const noCollectionAvailable = collections[collectionIndex] !== undefined
-      if (!noCollectionAvailable) return []
-
-      return getFolderNames(collections[collectionIndex].folders, [])
-    },
-    requests() {
-      const collections = this.$store.state.postwoman.collections
-      const collectionIndex = this.$data.requestData.collectionIndex
-      const folderName = this.$data.requestData.folderName
-
-      const userSelectedAnyCollection = collectionIndex !== undefined
-      if (!userSelectedAnyCollection) {
-        return []
-      }
-
-      const userSelectedAnyFolder =
-        folderName !== undefined && folderName !== ""
-
-      if (userSelectedAnyFolder) {
-        const collection = collections[collectionIndex]
-        const folder = findFolder(folderName, collection)
-        return folder.requests
-      } else {
-        const collection = collections[collectionIndex]
-        const noCollectionAvailable = collection !== undefined
-
-        if (!noCollectionAvailable) {
-          return []
-        }
-
-        return collection.requests
-      }
-    },
-  },
   watch: {
     "requestData.collectionIndex": function resetFolderAndRequestIndex() {
       // if user has chosen some folder, than selected other collection, which doesn't have any folders
@@ -138,61 +116,61 @@ export default {
     onSelect({ picked }) {
       this.picked = picked
     },
-    syncCollections() {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        fb.writeCollections(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-          "collections"
-        )
-      }
-    },
-    saveRequestAs() {
-      if (this.picked == null) {
-        this.$toast.error(this.$t("select_collection"), {
-          icon: "error",
+    async saveRequestAs() {
+      if (!this.requestName) {
+        this.$toast.error(this.$t("error.empty_req_name"), {
+          icon: "error_outline",
         })
         return
       }
-      if (this.$data.requestData.name.length === 0) {
-        this.$toast.error(this.$t("empty_req_name"), {
-          icon: "error",
+      if (this.picked == null) {
+        this.$toast.error(this.$t("collection.select"), {
+          icon: "error_outline",
         })
         return
       }
 
-      const requestUpdated = {
-        ...this.$props.editingRequest,
-        name: this.$data.requestData.name,
-        collection: this.$data.requestData.collectionIndex,
+      const requestUpdated =
+        this.mode === "rest" ? getRESTRequest() : getGQLSession()
+
+      // Filter out all REST file inputs
+      if (this.mode === "rest" && requestUpdated.bodyParams) {
+        requestUpdated.bodyParams = requestUpdated.bodyParams.map((param) =>
+          param?.value?.[0] instanceof File ? { ...param, value: "" } : param
+        )
       }
 
       if (this.picked.pickedType === "my-request") {
-        this.$store.commit("postwoman/saveRequestAs", {
-          request: requestUpdated,
-          collectionIndex: this.picked.collectionIndex,
-          folderName: this.picked.folderName,
+        editRESTRequest(
+          this.picked.folderPath,
+          this.picked.requestIndex,
+          requestUpdated
+        )
+        setRESTSaveContext({
+          originLocation: "user-collection",
+          folderPath: this.picked.folderPath,
           requestIndex: this.picked.requestIndex,
-          flag: "rest",
         })
-
-        this.syncCollections()
       } else if (this.picked.pickedType === "my-folder") {
-        this.$store.commit("postwoman/saveRequestAs", {
-          request: requestUpdated,
-          collectionIndex: this.picked.collectionIndex,
-          folderName: this.picked.folderName,
-          flag: "rest",
+        const insertionIndex = saveRESTRequestAs(
+          this.picked.folderPath,
+          requestUpdated
+        )
+        setRESTSaveContext({
+          originLocation: "user-collection",
+          folderPath: this.picked.folderPath,
+          requestIndex: insertionIndex,
         })
-
-        this.syncCollections()
       } else if (this.picked.pickedType === "my-collection") {
-        this.$store.commit("postwoman/saveRequestAs", {
-          request: requestUpdated,
-          collectionIndex: this.picked.collectionIndex,
-          flag: "rest",
+        const insertionIndex = saveRESTRequestAs(
+          `${this.picked.collectionIndex}`,
+          requestUpdated
+        )
+        setRESTSaveContext({
+          originLocation: "user-collection",
+          folderPath: `${this.picked.collectionIndex}`,
+          requestIndex: insertionIndex,
         })
-
-        this.syncCollections()
       } else if (this.picked.pickedType === "teams-request") {
         teamUtils.overwriteRequestTeams(
           this.$apollo,
@@ -200,63 +178,65 @@ export default {
           requestUpdated.name,
           this.picked.requestID
         )
+        setRESTSaveContext({
+          originLocation: "team-collection",
+          requestID: this.picked.requestID,
+        })
       } else if (this.picked.pickedType === "teams-folder") {
-        teamUtils.saveRequestAsTeams(
+        const req = await teamUtils.saveRequestAsTeams(
           this.$apollo,
           JSON.stringify(requestUpdated),
           requestUpdated.name,
           this.collectionsType.selectedTeam.id,
           this.picked.folderID
         )
+
+        if (req && req.id) {
+          setRESTSaveContext({
+            originLocation: "team-collection",
+            requestID: req.id,
+            teamID: this.collectionsType.selectedTeam.id,
+            collectionID: this.picked.folderID,
+          })
+        }
       } else if (this.picked.pickedType === "teams-collection") {
-        teamUtils.saveRequestAsTeams(
+        const req = await teamUtils.saveRequestAsTeams(
           this.$apollo,
           JSON.stringify(requestUpdated),
           requestUpdated.name,
           this.collectionsType.selectedTeam.id,
           this.picked.collectionID
         )
+
+        if (req && req.id) {
+          setRESTSaveContext({
+            originLocation: "team-collection",
+            requestID: req.id,
+            teamID: this.collectionsType.selectedTeam.id,
+            collectionID: this.picked.collectionID,
+          })
+        }
+      } else if (this.picked.pickedType === "gql-my-request") {
+        editGraphqlRequest(
+          this.picked.folderPath,
+          this.picked.requestIndex,
+          requestUpdated
+        )
+      } else if (this.picked.pickedType === "gql-my-folder") {
+        saveGraphqlRequestAs(this.picked.folderPath, requestUpdated)
+      } else if (this.picked.pickedType === "gql-my-collection") {
+        saveGraphqlRequestAs(`${this.picked.collectionIndex}`, requestUpdated)
       }
-      this.$toast.success("Requested added", {
-        icon: "done",
+      this.$toast.success(this.$t("request.added"), {
+        icon: "post_add",
       })
+
       this.hideModal()
     },
     hideModal() {
+      this.picked = null
       this.$emit("hide-modal")
     },
   },
-}
-
-function getFolderNames(folders, namesList, folderName = "") {
-  if (folders.length) {
-    folders.forEach((folder) => {
-      namesList.push(folderName + folder.name)
-      if (folder.folders && folder.folders.length) {
-        getFolderNames(folder.folders, namesList, folder.name + "/")
-      }
-    })
-  }
-  return namesList
-}
-
-function findFolder(folderName, currentFolder) {
-  let selectedFolder
-  let result
-
-  if (folderName === currentFolder.name) {
-    return currentFolder
-  }
-
-  for (let i = 0; i < currentFolder.folders.length; i++) {
-    selectedFolder = currentFolder.folders[i]
-
-    result = findFolder(folderName, selectedFolder)
-
-    if (result !== false) {
-      return result
-    }
-  }
-  return false
-}
+})
 </script>

components/collections/graphql/Add.vue

@@ -1,76 +1,67 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("new_collection") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal v-if="show" :title="$t('collection.new')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlAdd"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="addNewCollection"
+        />
+        <label for="selectLabelGqlAdd">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="name"
-        type="text"
-        :placeholder="$t('my_new_collection')"
-        @keyup.enter="addNewCollection"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="addNewCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="addNewCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { addGraphqlCollection, makeCollection } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
   data() {
     return {
-      name: null,
+      name: null as string | null,
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     addNewCollection() {
-      if (!this.$data.name) {
-        this.$toast.info(this.$t("invalid_collection_name"))
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
+        })
         return
       }
-      this.$store.commit("postwoman/addNewCollection", {
-        name: this.$data.name,
-        flag: "graphql",
-      })
-      this.syncCollections()
+
+      addGraphqlCollection(
+        makeCollection<HoppGQLRequest>({
+          name: this.name,
+          folders: [],
+          requests: [],
+        })
+      )
+
       this.hideModal()
     },
     hideModal() {
@@ -78,5 +69,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/AddFolder.vue

@@ -1,48 +1,43 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("new_folder") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.new')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlAddFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="addFolder"
+        />
+        <label for="selectLabelGqlAddFolder">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="name"
-        type="text"
-        :placeholder="$t('my_new_folder')"
-        @keyup.enter="addFolder"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="addFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="addFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
-    folder: { type: Object, default: () => {} },
     folderPath: { type: String, default: null },
     collectionIndex: { type: Number, default: null },
   },
@@ -52,25 +47,13 @@ export default {
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     addFolder() {
+      // TODO: Blocking when name is null ?
+
       this.$emit("add-folder", {
         name: this.name,
-        folder: this.folder,
         path: this.folderPath || `${this.collectionIndex}`,
       })
-      this.syncCollections()
       this.hideModal()
     },
     hideModal() {
@@ -78,5 +61,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/Collection.vue

@@ -1,10 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[
-        'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
-      ]"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -12,134 +9,161 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <button class="icon" @click="toggleShowChildren">
-        <i v-show="!showChildren && !isFiltered" class="material-icons"
-          >arrow_right</i
-        >
-        <i v-show="showChildren || isFiltered" class="material-icons"
-          >arrow_drop_down</i
-        >
-        <i class="material-icons">folder</i>
-        <span>{{ collection.name }}</span>
-      </button>
-      <div>
-        <button
-          v-if="doc"
-          v-tooltip.left="$t('import')"
-          class="icon"
-          @click="$emit('select-collection')"
-        >
-          <i class="material-icons">topic</i>
-        </button>
-        <v-popover>
-          <button v-tooltip.left="$t('more')" class="tooltip-target icon">
-            <i class="material-icons">more_vert</i>
-          </button>
-          <template slot="popover">
-            <div>
-              <button
-                v-close-popover
-                class="icon"
-                @click="
-                  $emit('add-folder', {
-                    folder: collection,
-                    path: `${collectionIndex}`,
-                  })
-                "
-              >
-                <i class="material-icons">create_new_folder</i>
-                <span>{{ $t("new_folder") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-close-popover
-                class="icon"
-                @click="$emit('edit-collection')"
-              >
-                <i class="material-icons">create</i>
-                <span>{{ $t("edit") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-close-popover
-                class="icon"
-                @click="confirmRemove = true"
-              >
-                <i class="material-icons">delete</i>
-                <span>{{ $t("delete") }}</span>
-              </button>
-            </div>
-          </template>
-        </v-popover>
+      <span
+        class="cursor-pointer flex px-4 justify-center items-center"
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
+          {{ getCollectionIcon }}
+        </i>
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate"> {{ collection.name }} </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          icon="create_new_folder"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="
+            $emit('add-folder', {
+              path: `${collectionIndex}`,
+            })
+          "
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="create_new_folder"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', {
+                  path: `${collectionIndex}`,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="create"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-collection')
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="delete"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
       </div>
     </div>
-    <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
-        <li
-          v-for="(folder, index) in collection.folders"
-          :key="folder.name"
-          class="ml-8 border-l border-brdColor"
-        >
-          <CollectionsGraphqlFolder
-            :folder="folder"
-            :folder-index="index"
-            :folder-path="`${collectionIndex}/${index}`"
-            :collection-index="collectionIndex"
-            :doc="doc"
-            :is-filtered="isFiltered"
-            @add-folder="$emit('add-folder', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
-            @edit-request="$emit('edit-request', $event)"
-          />
-        </li>
-      </ul>
-      <ul class="flex-col">
-        <li
-          v-for="(request, index) in collection.requests"
-          :key="index"
-          class="ml-8 border-l border-brdColor"
-        >
-          <CollectionsGraphqlRequest
-            :request="request"
-            :collection-index="collectionIndex"
-            :folder-index="-1"
-            :folder-name="collection.name"
-            :request-index="index"
-            :doc="doc"
-            @edit-request="$emit('edit-request', $event)"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li
-          v-if="
-            collection.folders.length === 0 && collection.requests.length === 0
-          "
-          class="flex ml-8 border-l border-brdColor"
-        >
-          <p class="info">
-            <i class="material-icons">not_interested</i>
-            {{ $t("collection_empty") }}
-          </p>
-        </li>
-      </ul>
+    <div v-if="showChildren || isFiltered">
+      <CollectionsGraphqlFolder
+        v-for="(folder, index) in collection.folders"
+        :key="`folder-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :folder="folder"
+        :folder-index="index"
+        :folder-path="`${collectionIndex}/${index}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :is-filtered="isFiltered"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <CollectionsGraphqlRequest
+        v-for="(request, index) in collection.requests"
+        :key="`request-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="-1"
+        :folder-name="collection.name"
+        :folder-path="`${collectionIndex}`"
+        :request-index="index"
+        :doc="doc"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <div
+        v-if="
+          collection.folders.length === 0 && collection.requests.length === 0
+        "
+        class="
+          border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-6
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+        <span class="text-center">
+          {{ $t("empty.collection") }}
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_collection')"
+      :title="$t('confirm.remove_collection')"
       @hide-modal="confirmRemove = false"
       @resolve="removeCollection"
     />
   </div>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import {
+  removeGraphqlCollection,
+  moveGraphqlRequest,
+} from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
+    picked: { type: Object, default: null },
+    // Whether the viewing context is related to picking (activates 'select' events)
+    savingMode: { type: Boolean, default: false },
     collectionIndex: { type: Number, default: null },
     collection: { type: Object, default: () => {} },
     doc: Boolean,
@@ -153,51 +177,59 @@ export default {
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "gql-my-collection" &&
+        this.picked.collectionIndex === this.collectionIndex
+      )
+    },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle_outline"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else return "folder"
+    },
+  },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
+    pick() {
+      this.$emit("select", {
+        picked: {
+          pickedType: "gql-my-collection",
+          collectionIndex: this.collectionIndex,
+        },
+      })
     },
     toggleShowChildren() {
+      if (this.savingMode) {
+        this.pick()
+      }
+
       this.showChildren = !this.showChildren
     },
     removeCollection() {
-      this.$store.commit("postwoman/removeCollection", {
-        collectionIndex: this.collectionIndex,
-        flag: "graphql",
-      })
-      this.$toast.error(this.$t("deleted"), {
+      // Cancel pick if picked collection is deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "gql-my-collection" &&
+        this.picked.collectionIndex === this.collectionIndex
+      ) {
+        this.$emit("select", { picked: null })
+      }
+      removeGraphqlCollection(this.collectionIndex)
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
-      this.syncCollections()
     },
-    dropEvent({ dataTransfer }) {
+    dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging
-      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
-      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
-      const oldFolderName = dataTransfer.getData("oldFolderName")
+
+      const folderPath = dataTransfer.getData("folderPath")
       const requestIndex = dataTransfer.getData("requestIndex")
-      const flag = "graphql"
-      this.$store.commit("postwoman/moveRequest", {
-        oldCollectionIndex,
-        newCollectionIndex: this.$props.collectionIndex,
-        newFolderIndex: -1,
-        newFolderName: this.$props.collection.name,
-        oldFolderIndex,
-        oldFolderName,
-        requestIndex,
-        flag,
-      })
-      this.syncCollections()
+
+      moveGraphqlRequest(folderPath, requestIndex, `${this.collectionIndex}`)
     },
   },
-}
+})
 </script>

components/collections/graphql/Edit.vue

@@ -1,45 +1,41 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_collection") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal v-if="show" :title="$t('collection.edit')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlEdit"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="saveCollection"
+        />
+        <label for="selectLabelGqlEdit">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="name"
-        type="text"
-        :placeholder="editingCollection.name"
-        @keyup.enter="saveCollection"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="saveCollection">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary
+          :label="$t('action.save')"
+          @click.native="saveCollection"
+        />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { editGraphqlCollection } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
     editingCollection: { type: Object, default: () => {} },
@@ -47,37 +43,23 @@ export default {
   },
   data() {
     return {
-      name: null,
+      name: null as string | null,
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     saveCollection() {
-      if (!this.$data.name) {
-        this.$toast.info(this.$t("invalid_collection_name"))
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
+        })
         return
       }
       const collectionUpdated = {
-        ...this.$props.editingCollection,
-        name: this.$data.name,
+        ...(this.editingCollection as any),
+        name: this.name,
       }
-      this.$store.commit("postwoman/editCollection", {
-        collection: collectionUpdated,
-        collectionIndex: this.$props.editingCollectionIndex,
-        flag: "graphql",
-      })
-      this.syncCollections()
+
+      editGraphqlCollection(this.editingCollectionIndex, collectionUpdated)
       this.hideModal()
     },
     hideModal() {
@@ -85,5 +67,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/EditFolder.vue

@@ -1,84 +1,70 @@
 <template>
-  <SmartModal v-if="show" @close="$emit('hide-modal')">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_folder") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal
+    v-if="show"
+    :title="$t('folder.edit')"
+    @close="$emit('hide-modal')"
+  >
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlEditFolder"
+          v-model="name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="editFolder"
+        />
+        <label for="selectLabelGqlEditFolder">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="name"
-        type="text"
-        :placeholder="folder.name"
-        @keyup.enter="editFolder"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="editFolder">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="editFolder" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { editGraphqlFolder } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
-    collectionIndex: { type: Number, default: null },
     folder: { type: Object, default: () => {} },
-    folderIndex: { type: Number, default: null },
+    folderPath: { type: String, default: null },
   },
   data() {
     return {
-      name: null,
+      name: "",
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     editFolder() {
-      this.$store.commit("postwoman/editFolder", {
-        collectionIndex: this.$props.collectionIndex,
-        folder: { ...this.$props.folder, name: this.$data.name },
-        folderIndex: this.$props.folderIndex,
-        folderName: this.$props.folder.name,
-        flag: "graphql",
+      if (!this.name) {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
+        })
+        return
+      }
+      editGraphqlFolder(this.folderPath, {
+        ...(this.folder as any),
+        name: this.name,
       })
-      this.syncCollections()
       this.hideModal()
     },
     hideModal() {
-      this.name = null
+      this.name = ""
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/EditRequest.vue

@@ -1,88 +1,67 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("edit_request") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
+  <SmartModal v-if="show" :title="$t('modal.edit_request')" @close="hideModal">
+    <template #body>
+      <div class="flex flex-col px-2">
+        <input
+          id="selectLabelGqlEditReq"
+          v-model="requestUpdateData.name"
+          v-focus
+          class="input floating-input"
+          placeholder=" "
+          type="text"
+          @keyup.enter="saveRequest"
+        />
+        <label for="selectLabelGqlEditReq">
+          {{ $t("action.label") }}
+        </label>
       </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("label") }}</label>
-      <input
-        id="selectLabel"
-        v-model="requestUpdateData.name"
-        type="text"
-        :placeholder="request.name"
-        @keyup.enter="saveRequest"
-      />
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="saveRequest">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
+    </template>
+    <template #footer>
+      <span>
+        <ButtonPrimary :label="$t('action.save')" @click.native="saveRequest" />
+        <ButtonSecondary
+          :label="$t('action.cancel')"
+          @click.native="hideModal"
+        />
+      </span>
+    </template>
   </SmartModal>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { HoppGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { editGraphqlRequest } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
-    collectionIndex: { type: Number, default: null },
-    folderIndex: { type: Number, default: null },
-    folderName: { type: String, default: null },
-    request: { type: Object, default: () => {} },
+    folderPath: { type: String, default: null },
+    request: { type: Object as PropType<HoppGQLRequest>, default: () => {} },
     requestIndex: { type: Number, default: null },
   },
   data() {
     return {
       requestUpdateData: {
-        name: null,
+        name: null as any | null,
       },
     }
   },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
     saveRequest() {
+      if (!this.requestUpdateData.name) {
+        this.$toast.error(this.$t("collection.invalid_name").toString(), {
+          icon: "error_outline",
+        })
+        return
+      }
       const requestUpdated = {
         ...this.$props.request,
         name: this.$data.requestUpdateData.name || this.$props.request.name,
       }
 
-      this.$store.commit("postwoman/editRequest", {
-        requestCollectionIndex: this.$props.collectionIndex,
-        requestFolderName: this.$props.folderName,
-        requestFolderIndex: this.$props.folderIndex,
-        requestNew: requestUpdated,
-        requestIndex: this.$props.requestIndex,
-        flag: "graphql",
-      })
-      this.syncCollections()
+      editGraphqlRequest(this.folderPath, this.requestIndex, requestUpdated)
+
       this.hideModal()
     },
     hideModal() {
@@ -90,5 +69,5 @@ export default {
       this.$emit("hide-modal")
     },
   },
-}
+})
 </script>

components/collections/graphql/Folder.vue

@@ -1,10 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[
-        'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
-      ]"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -12,122 +9,158 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <div>
-        <button class="icon" @click="toggleShowChildren">
-          <i v-show="!showChildren && !isFiltered" class="material-icons"
-            >arrow_right</i
+      <span
+        class="cursor-pointer flex px-4 justify-center items-center"
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
+          {{ getCollectionIcon }}
+        </i>
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate">
+          {{ folder.name ? folder.name : folder.title }}
+        </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-tippy="{ theme: 'tooltip' }"
+          icon="create_new_folder"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="$emit('add-folder', { folder, path: folderPath })"
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
           >
-          <i v-show="showChildren || isFiltered" class="material-icons"
-            >arrow_drop_down</i
-          >
-          <i class="material-icons">folder_open</i>
-          <span>{{ folder.name }}</span>
-        </button>
-      </div>
-      <v-popover>
-        <button v-tooltip.left="$t('more')" class="tooltip-target icon">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template slot="popover">
-          <div>
-            <button
-              v-close-popover
-              class="icon"
-              @click="$emit('add-folder', { folder, path: folderPath })"
-            >
-              <i class="material-icons">create_new_folder</i>
-              <span>{{ $t("new_folder") }}</span>
-            </button>
-          </div>
-          <div>
-            <button
-              v-close-popover
-              class="icon"
-              @click="
-                $emit('edit-folder', { folder, folderIndex, collectionIndex })
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="create_new_folder"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', { folder, path: folderPath })
+                $refs.options.tippy().hide()
               "
-            >
-              <i class="material-icons">edit</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button v-close-popover class="icon" @click="confirmRemove = true">
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
-        </template>
-      </v-popover>
+            />
+            <SmartItem
+              icon="edit"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-folder', { folder, folderPath })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="delete"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
-    <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
-        <li
-          v-for="(subFolder, subFolderIndex) in folder.folders"
-          :key="subFolder.name"
-          class="ml-8 border-l border-brdColor"
-        >
-          <CollectionsGraphqlFolder
-            :folder="subFolder"
-            :folder-index="subFolderIndex"
-            :folder-path="`${folderPath}/${subFolderIndex}`"
-            :collection-index="collectionIndex"
-            :doc="doc"
-            :is-filtered="isFiltered"
-            @add-folder="$emit('add-folder', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
-            @edit-request="$emit('edit-request', $event)"
-          />
-        </li>
-      </ul>
-      <ul class="flex-col">
-        <li
-          v-for="(request, index) in folder.requests"
-          :key="index"
-          class="flex ml-8 border-l border-brdColor"
-        >
-          <CollectionsGraphqlRequest
-            :request="request"
-            :collection-index="collectionIndex"
-            :folder-index="folderIndex"
-            :folder-name="folder.name"
-            :request-index="index"
-            :doc="doc"
-            @edit-request="$emit('edit-request', $event)"
-          />
-        </li>
-      </ul>
-      <ul
+    <div v-if="showChildren || isFiltered">
+      <CollectionsGraphqlFolder
+        v-for="(subFolder, subFolderIndex) in folder.folders"
+        :key="`subFolder-${subFolderIndex}`"
+        class="border-l border-dividerLight ml-6"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :folder="subFolder"
+        :folder-index="subFolderIndex"
+        :folder-path="`${folderPath}/${subFolderIndex}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :is-filtered="isFiltered"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <CollectionsGraphqlRequest
+        v-for="(request, index) in folder.requests"
+        :key="`request-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :picked="picked"
+        :saving-mode="savingMode"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="folderIndex"
+        :folder-path="folderPath"
+        :folder-name="folder.name"
+        :request-index="index"
+        :doc="doc"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+      />
+      <div
         v-if="
           folder.folders &&
           folder.folders.length === 0 &&
           folder.requests &&
           folder.requests.length === 0
         "
+        class="
+          border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-6
+          p-4
+          items-center
+          justify-center
+        "
       >
-        <li class="flex ml-8 border-l border-brdColor">
-          <p class="info">
-            <i class="material-icons">not_interested</i>
-            {{ $t("folder_empty") }}
-          </p>
-        </li>
-      </ul>
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+        <span class="text-center">
+          {{ $t("empty.folder") }}
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_folder')"
+      :title="$t('confirm.remove_folder')"
       @hide-modal="confirmRemove = false"
       @resolve="removeFolder"
     />
   </div>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api"
+import { removeGraphqlFolder, moveGraphqlRequest } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   name: "Folder",
   props: {
+    picked: { type: Object, default: null },
+    // Whether the request is in a selectable mode (activates 'select' event)
+    savingMode: { type: Boolean, default: false },
     folder: { type: Object, default: () => {} },
     folderIndex: { type: Number, default: null },
     collectionIndex: { type: Number, default: null },
@@ -142,54 +175,59 @@ export default {
       confirmRemove: false,
     }
   },
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "gql-my-folder" &&
+        this.picked.folderPath === this.folderPath
+      )
+    },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle_outline"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else return "folder"
+    },
+  },
   methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
+    pick() {
+      this.$emit("select", {
+        picked: {
+          pickedType: "gql-my-folder",
+          folderPath: this.folderPath,
+        },
+      })
     },
     toggleShowChildren() {
+      if (this.savingMode) {
+        this.pick()
+      }
+
       this.showChildren = !this.showChildren
     },
     removeFolder() {
-      this.$store.commit("postwoman/removeFolder", {
-        collectionIndex: this.$props.collectionIndex,
-        folderName: this.$props.folder.name,
-        folderIndex: this.$props.folderIndex,
-        flag: "graphql",
-      })
-      this.syncCollections()
-      this.$toast.error(this.$t("deleted"), {
+      // Cancel pick if the picked folder is deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "gql-my-folder" &&
+        this.picked.folderPath === this.folderPath
+      ) {
+        this.$emit("select", { picked: null })
+      }
+
+      removeGraphqlFolder(this.folderPath)
+      this.$toast.success(this.$t("state.deleted").toString(), {
         icon: "delete",
       })
     },
-    dropEvent({ dataTransfer }) {
+    dropEvent({ dataTransfer }: any) {
       this.dragging = !this.dragging
-      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
-      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
-      const oldFolderName = dataTransfer.getData("oldFolderName")
+      const folderPath = dataTransfer.getData("folderPath")
       const requestIndex = dataTransfer.getData("requestIndex")
-      const flag = "graphql"
 
-      this.$store.commit("postwoman/moveRequest", {
-        oldCollectionIndex,
-        newCollectionIndex: this.$props.collectionIndex,
-        newFolderIndex: this.$props.folderIndex,
-        newFolderName: this.$props.folder.name,
-        oldFolderIndex,
-        oldFolderName,
-        requestIndex,
-        flag,
-      })
-      this.syncCollections()
+      moveGraphqlRequest(folderPath, requestIndex, this.folderPath)
     },
   },
-}
+})
 </script>

components/collections/graphql/ImportExport.vue

@@ -1,154 +1,122 @@
 <template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("import_export") }} {{ $t("collections") }}</h3>
-        <div>
-          <v-popover>
-            <button v-tooltip.left="$t('more')" class="tooltip-target icon">
-              <i class="material-icons">more_vert</i>
-            </button>
-            <template slot="popover">
-              <div>
-                <button
-                  v-close-popover
-                  class="icon"
-                  @click="readCollectionGist"
-                >
-                  <i class="material-icons">assignment_returned</i>
-                  <span>{{ $t("import_from_gist") }}</span>
-                </button>
-              </div>
-              <div
-                v-tooltip.bottom="{
-                  content: !fb.currentUser
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : fb.currentUser.provider !== 'github.com'
-                    ? $t('login_with_github_to') + $t('create_secret_gist')
-                    : null,
-                }"
-              >
-                <button
-                  v-close-popover
-                  :disabled="
-                    !fb.currentUser
-                      ? true
-                      : fb.currentUser.provider !== 'github.com'
-                      ? true
-                      : false
-                  "
-                  class="icon"
-                  @click="createCollectionGist"
-                >
-                  <i class="material-icons">assignment_turned_in</i>
-                  <span>{{ $t("create_secret_gist") }}</span>
-                </button>
-              </div>
-            </template>
-          </v-popover>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <div class="flex flex-col items-start p-2">
-        <span
-          v-tooltip="{
-            content: !fb.currentUser
-              ? $t('login_first')
-              : $t('replace_current'),
-          }"
-        >
-          <button
-            :disabled="!fb.currentUser"
-            class="icon"
-            @click="syncCollections"
-          >
-            <i class="material-icons">folder_shared</i>
-            <span>{{ $t("import_from_sync") }}</span>
-          </button>
-        </span>
-        <button
-          v-tooltip="$t('replace_current')"
-          class="icon"
-          @click="openDialogChooseFileToReplaceWith"
-        >
-          <i class="material-icons">create_new_folder</i>
-          <span>{{ $t("replace_json") }}</span>
-          <input
-            ref="inputChooseFileToReplaceWith"
-            type="file"
-            style="display: none"
-            accept="application/json"
-            @change="replaceWithJSON"
+  <SmartModal
+    v-if="show"
+    :title="`${$t('modal.import_export')} ${$t('modal.collections')}`"
+    @close="hideModal"
+  >
+    <template #actions>
+      <span>
+        <tippy ref="options" interactive trigger="click" theme="popover" arrow>
+          <template #trigger>
+            <ButtonSecondary
+              v-tippy="{ theme: 'tooltip' }"
+              :title="$t('action.more')"
+              class="rounded"
+              icon="more_vert"
+            />
+          </template>
+          <SmartItem
+            icon="assignment_returned"
+            :label="$t('import.from_gist')"
+            @click.native="
+              readCollectionGist
+              $refs.options.tippy().hide()
+            "
           />
-        </button>
-        <button
-          v-tooltip="$t('preserve_current')"
-          class="icon"
-          @click="openDialogChooseFileToImportFrom"
-        >
-          <i class="material-icons">folder_special</i>
-          <span>{{ $t("import_json") }}</span>
-          <input
-            ref="inputChooseFileToImportFrom"
-            type="file"
-            style="display: none"
-            accept="application/json"
-            @change="importFromJSON"
-          />
-        </button>
-      </div>
-      <div v-if="showJsonCode" class="row-wrapper">
-        <textarea v-model="collectionJson" rows="8" readonly></textarea>
-      </div>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span>
-          <SmartToggle :on="showJsonCode" @change="showJsonCode = $event">
-            {{ $t("show_code") }}
-          </SmartToggle>
-        </span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button
-            v-tooltip="$t('download_file')"
-            class="icon primary"
-            @click="exportJSON"
+          <span
+            v-tippy="{ theme: 'tooltip' }"
+            :title="
+              !currentUser
+                ? $t('export.require_github')
+                : currentUser.provider !== 'github.com'
+                ? $t('export.require_github')
+                : null
+            "
           >
-            {{ $t("export") }}
-          </button>
-        </span>
+            <SmartItem
+              :disabled="
+                !currentUser
+                  ? true
+                  : currentUser.provider !== 'github.com'
+                  ? true
+                  : false
+              "
+              icon="assignment_turned_in"
+              :label="$t('export.create_secret_gist')"
+              @click.native="
+                createCollectionGist()
+                $refs.options.tippy().hide()
+              "
+            />
+          </span>
+        </tippy>
+      </span>
+    </template>
+    <template #body>
+      <div class="flex flex-col space-y-2">
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.replace_current')"
+          icon="folder_special"
+          :label="$t('action.replace_json')"
+          @click.native="openDialogChooseFileToReplaceWith"
+        />
+        <input
+          ref="inputChooseFileToReplaceWith"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="replaceWithJSON"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.preserve_current')"
+          icon="create_new_folder"
+          :label="$t('import.json')"
+          @click.native="openDialogChooseFileToImportFrom"
+        />
+        <input
+          ref="inputChooseFileToImportFrom"
+          class="input"
+          type="file"
+          accept="application/json"
+          @change="importFromJSON"
+        />
+        <SmartItem
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.download_file')"
+          icon="drive_file_move"
+          :label="$t('export.as_json')"
+          @click.native="exportJSON"
+        />
       </div>
-    </div>
+    </template>
   </SmartModal>
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { defineComponent } from "@nuxtjs/composition-api"
+import { currentUser$ } from "~/helpers/fb/auth"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import {
+  graphqlCollections$,
+  setGraphqlCollections,
+  appendGraphqlCollections,
+} from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     show: Boolean,
   },
-  data() {
+  setup() {
     return {
-      fb,
-      showJsonCode: false,
+      collections: useReadonlyStream(graphqlCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
     }
   },
   computed: {
     collectionJson() {
-      return JSON.stringify(
-        this.$store.state.postwoman.collectionsGraphql,
-        null,
-        2
-      )
+      return JSON.stringify(this.collections, null, 2)
     },
   },
   methods: {
@@ -165,26 +133,26 @@ export default {
           },
           {
             headers: {
-              Authorization: `token ${fb.currentUser.accessToken}`,
+              Authorization: `token ${this.currentUser.accessToken}`,
               Accept: "application/vnd.github.v3+json",
             },
           }
         )
         .then((res) => {
-          this.$toast.success(this.$t("gist_created"), {
+          this.$toast.success(this.$t("export.gist_created"), {
             icon: "done",
           })
           window.open(res.html_url)
         })
-        .catch((error) => {
-          this.$toast.error(this.$t("something_went_wrong"), {
-            icon: "error",
+        .catch((e) => {
+          this.$toast.error(this.$t("error.something_went_wrong"), {
+            icon: "error_outline",
           })
-          console.log(error)
+          console.error(e)
         })
     },
     async readCollectionGist() {
-      const gist = prompt(this.$t("enter_gist_url"))
+      const gist = prompt(this.$t("import.gist_url"))
       if (!gist) return
       await this.$axios
         .$get(`https://api.github.com/gists/${gist.split("/").pop()}`, {
@@ -194,16 +162,12 @@ export default {
         })
         .then(({ files }) => {
           const collections = JSON.parse(Object.values(files)[0].content)
-          this.$store.commit("postwoman/replaceCollections", {
-            data: collections,
-            flag: "graphql",
-          })
+          setGraphqlCollections(collections)
           this.fileImported()
-          this.syncToFBCollections()
         })
-        .catch((error) => {
+        .catch((e) => {
           this.failedImport()
-          console.log(error)
+          console.error(e)
         })
     },
     hideModal() {
@@ -238,12 +202,8 @@ export default {
           this.failedImport()
           return
         }
-        this.$store.commit("postwoman/replaceCollections", {
-          data: collections,
-          flag: "graphql",
-        })
+        setGraphqlCollections(collections)
         this.fileImported()
-        this.syncToFBCollections()
       }
       reader.readAsText(this.$refs.inputChooseFileToReplaceWith.files[0])
       this.$refs.inputChooseFileToReplaceWith.value = ""
@@ -275,103 +235,80 @@ export default {
           this.failedImport()
           return
         }
-        this.$store.commit("postwoman/importCollections", {
-          data: collections,
-          flag: "graphql",
-        })
+        appendGraphqlCollections(collections)
         this.fileImported()
-        this.syncToFBCollections()
       }
       reader.readAsText(this.$refs.inputChooseFileToImportFrom.files[0])
       this.$refs.inputChooseFileToImportFrom.value = ""
     },
     exportJSON() {
-      let text = this.collectionJson
-      text = text.replace(/\n/g, "\r\n")
-      const blob = new Blob([text], {
-        type: "text/json",
+      const dataToWrite = this.collectionJson
+      const file = new Blob([dataToWrite], { type: "application/json" })
+      const a = document.createElement("a")
+      const url = URL.createObjectURL(file)
+      a.href = url
+      // TODO get uri from meta
+      a.download = `${url.split("/").pop().split("#")[0].split("?")[0]}`
+      document.body.appendChild(a)
+      a.click()
+      this.$toast.success(this.$t("state.download_started"), {
+        icon: "downloading",
       })
-      const anchor = document.createElement("a")
-      anchor.download = "hoppscotch-collection.json"
-      anchor.href = window.URL.createObjectURL(blob)
-      anchor.target = "_blank"
-      anchor.style.display = "none"
-      document.body.appendChild(anchor)
-      anchor.click()
-      document.body.removeChild(anchor)
-      this.$toast.success(this.$t("download_started"), {
-        icon: "done",
-      })
-    },
-    syncCollections() {
-      this.$store.commit("postwoman/replaceCollections", {
-        data: fb.currentGraphqlCollections,
-        flag: "graphql",
-      })
-      this.fileImported()
-    },
-    syncToFBCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
+      setTimeout(() => {
+        document.body.removeChild(a)
+        URL.revokeObjectURL(url)
+      }, 1000)
     },
     fileImported() {
-      this.$toast.info(this.$t("file_imported"), {
+      this.$toast.success(this.$t("state.file_imported"), {
         icon: "folder_shared",
       })
     },
     failedImport() {
-      this.$toast.error(this.$t("import_failed"), {
-        icon: "error",
+      this.$toast.error(this.$t("import.failed"), {
+        icon: "error_outline",
       })
     },
     parsePostmanCollection({ info, name, item }) {
-      const postwomanCollection = {
+      const hoppscotchCollection = {
         name: "",
         folders: [],
         requests: [],
       }
 
-      postwomanCollection.name = info ? info.name : name
+      hoppscotchCollection.name = info ? info.name : name
 
       if (item && item.length > 0) {
         for (const collectionItem of item) {
           if (collectionItem.request) {
             if (
               Object.prototype.hasOwnProperty.call(
-                postwomanCollection,
+                hoppscotchCollection,
                 "folders"
               )
             ) {
-              postwomanCollection.name = info ? info.name : name
-              postwomanCollection.requests.push(
+              hoppscotchCollection.name = info ? info.name : name
+              hoppscotchCollection.requests.push(
                 this.parsePostmanRequest(collectionItem)
               )
             } else {
-              postwomanCollection.name = name || ""
-              postwomanCollection.requests.push(
+              hoppscotchCollection.name = name || ""
+              hoppscotchCollection.requests.push(
                 this.parsePostmanRequest(collectionItem)
               )
             }
           } else if (this.hasFolder(collectionItem)) {
-            postwomanCollection.folders.push(
+            hoppscotchCollection.folders.push(
               this.parsePostmanCollection(collectionItem)
             )
           } else {
-            postwomanCollection.requests.push(
+            hoppscotchCollection.requests.push(
               this.parsePostmanRequest(collectionItem)
             )
           }
         }
       }
-      return postwomanCollection
+      return hoppscotchCollection
     },
     parsePostmanRequest({ name, request }) {
       const pwRequest = {
@@ -457,5 +394,5 @@ export default {
       return Object.prototype.hasOwnProperty.call(item, "item")
     },
   },
-}
+})
 </script>

components/collections/graphql/Request.vue

@@ -1,76 +1,115 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[
-        'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
-      ]"
+      class="flex items-center group"
       draggable="true"
       @dragstart="dragStart"
       @dragover.stop
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <div>
-        <button
-          v-tooltip="!doc ? $t('use_request') : ''"
-          class="icon"
-          @click="!doc ? selectRequest() : {}"
-        >
-          <i class="material-icons">description</i>
-          <span>{{ request.name }}</span>
-        </button>
-      </div>
-      <v-popover>
-        <button v-tooltip="$t('more')" class="tooltip-target icon">
-          <i class="material-icons">more_vert</i>
-        </button>
-        <template slot="popover">
-          <div>
-            <button
-              v-close-popover
-              class="icon"
-              @click="
+      <span
+        class="
+          cursor-pointer
+          flex
+          px-2
+          w-16
+          justify-center
+          items-center
+          truncate
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
+          {{ isSelected ? "check_circle_outline" : "description" }}
+        </i>
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="!doc ? selectRequest() : {}"
+      >
+        <span class="truncate"> {{ request.name }} </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
+          v-if="!savingMode"
+          v-tippy="{ theme: 'tooltip' }"
+          icon="replay"
+          :title="$t('action.restore')"
+          class="hidden group-hover:inline-flex"
+          @click.native="!doc ? selectRequest() : {}"
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="edit"
+              :label="$t('action.edit')"
+              @click.native="
                 $emit('edit-request', {
-                  collectionIndex,
-                  folderIndex,
-                  folderName,
                   request,
                   requestIndex,
+                  folderPath,
                 })
+                $refs.options.tippy().hide()
               "
-            >
-              <i class="material-icons">edit</i>
-              <span>{{ $t("edit") }}</span>
-            </button>
-          </div>
-          <div>
-            <button v-close-popover class="icon" @click="confirmRemove = true">
-              <i class="material-icons">delete</i>
-              <span>{{ $t("delete") }}</span>
-            </button>
-          </div>
-        </template>
-      </v-popover>
+            />
+            <SmartItem
+              icon="delete"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_request')"
+      :title="$t('confirm.remove_request')"
       @hide-modal="confirmRemove = false"
       @resolve="removeRequest"
     />
   </div>
 </template>
 
-<script>
-import { fb } from "~/helpers/fb"
+<script lang="ts">
+import { defineComponent, PropType } from "@nuxtjs/composition-api"
+import { HoppGQLRequest, makeGQLRequest } from "~/helpers/types/HoppGQLRequest"
+import { removeGraphqlRequest } from "~/newstore/collections"
+import { setGQLSession } from "~/newstore/GQLSession"
 
-export default {
+export default defineComponent({
   props: {
-    request: { type: Object, default: () => {} },
-    collectionIndex: { type: Number, default: null },
-    folderIndex: { type: Number, default: null },
-    folderName: { type: String, default: null },
+    // Whether the object is selected (show the tick mark)
+    picked: { type: Object, default: null },
+    // Whether the request is being saved (activate 'select' event)
+    savingMode: { type: Boolean, default: false },
+    request: { type: Object as PropType<HoppGQLRequest>, default: () => {} },
+    folderPath: { type: String, default: null },
     requestIndex: { type: Number, default: null },
     doc: Boolean,
   },
@@ -80,44 +119,65 @@ export default {
       confirmRemove: false,
     }
   },
-  methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
-    selectRequest() {
-      this.$store.commit("postwoman/selectGraphqlRequest", {
-        request: this.request,
-      })
-    },
-    dragStart({ dataTransfer }) {
-      this.dragging = !this.dragging
-      dataTransfer.setData("oldCollectionIndex", this.$props.collectionIndex)
-      dataTransfer.setData("oldFolderIndex", this.$props.folderIndex)
-      dataTransfer.setData("oldFolderName", this.$props.folderName)
-      dataTransfer.setData("requestIndex", this.$props.requestIndex)
-    },
-    removeRequest() {
-      this.$store.commit("postwoman/removeRequest", {
-        collectionIndex: this.$props.collectionIndex,
-        folderName: this.$props.folderName,
-        requestIndex: this.$props.requestIndex,
-        flag: "graphql",
-      })
-      this.$toast.error(this.$t("deleted"), {
-        icon: "delete",
-      })
-      this.confirmRemove = false
-      this.syncCollections()
+  computed: {
+    isSelected(): boolean {
+      return (
+        this.picked &&
+        this.picked.pickedType === "gql-my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+      )
     },
   },
-}
+  methods: {
+    pick() {
+      this.$emit("select", {
+        picked: {
+          pickedType: "gql-my-request",
+          folderPath: this.folderPath,
+          requestIndex: this.requestIndex,
+        },
+      })
+    },
+    selectRequest() {
+      if (this.savingMode) {
+        this.pick()
+      } else {
+        setGQLSession({
+          request: makeGQLRequest({
+            name: this.$props.request.name,
+            url: this.$props.request.url,
+            query: this.$props.request.query,
+            headers: this.$props.request.headers,
+            variables: this.$props.request.variables,
+          }),
+          schema: "",
+          response: "",
+        })
+      }
+    },
+    dragStart({ dataTransfer }: any) {
+      this.dragging = !this.dragging
+
+      dataTransfer.setData("folderPath", this.folderPath)
+      dataTransfer.setData("requestIndex", this.requestIndex)
+    },
+    removeRequest() {
+      // Cancel pick if the picked request is deleted
+      if (
+        this.picked &&
+        this.picked.pickedType === "gql-my-request" &&
+        this.picked.folderPath === this.folderPath &&
+        this.picked.requestIndex === this.requestIndex
+      ) {
+        this.$emit("select", { picked: null })
+      }
+
+      removeGraphqlRequest(this.folderPath, this.requestIndex)
+      this.$toast.success(this.$t("state.deleted").toString(), {
+        icon: "delete",
+      })
+    },
+  },
+})
 </script>

components/collections/graphql/SaveRequest.vue

@@ -1,253 +0,0 @@
-<template>
-  <SmartModal v-if="show" @close="hideModal">
-    <div slot="header">
-      <div class="row-wrapper">
-        <h3 class="title">{{ $t("save_request_as") }}</h3>
-        <div>
-          <button class="icon" @click="hideModal">
-            <i class="material-icons">close</i>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div slot="body" class="flex flex-col">
-      <label for="selectLabel">{{ $t("token_req_name") }}</label>
-      <input
-        id="selectLabel"
-        v-model="requestData.name"
-        type="text"
-        @keyup.enter="saveRequestAs"
-      />
-      <ul>
-        <li>
-          <label for="selectCollection">{{ $t("collection") }}</label>
-          <span class="select-wrapper">
-            <select
-              id="selectCollection"
-              v-model="requestData.collectionIndex"
-              type="text"
-            >
-              <option
-                :key="undefined"
-                :value="undefined"
-                hidden
-                disabled
-                selected
-              >
-                {{ $t("select_collection") }}
-              </option>
-              <option
-                v-for="(collection, index) in $store.state.postwoman
-                  .collectionsGraphql"
-                :key="index"
-                :value="index"
-              >
-                {{ collection.name }}
-              </option>
-            </select>
-          </span>
-        </li>
-      </ul>
-      <label>{{ $t("folder") }}</label>
-      <SmartAutoComplete
-        v-model="requestData.folderName"
-        :placeholder="$t('search')"
-        :source="folders"
-        :spellcheck="false"
-      />
-      <ul>
-        <li>
-          <label for="selectRequest">{{ $t("request") }}</label>
-          <span class="select-wrapper">
-            <select
-              id="selectRequest"
-              v-model="requestData.requestIndex"
-              type="text"
-            >
-              <option :key="undefined" :value="undefined">/</option>
-              <option
-                v-for="(folder, index) in requests"
-                :key="index"
-                :value="index"
-              >
-                {{ folder.name }}
-              </option>
-            </select>
-          </span>
-        </li>
-      </ul>
-    </div>
-    <div slot="footer">
-      <div class="row-wrapper">
-        <span></span>
-        <span>
-          <button class="icon" @click="hideModal">
-            {{ $t("cancel") }}
-          </button>
-          <button class="icon primary" @click="saveRequestAs">
-            {{ $t("save") }}
-          </button>
-        </span>
-      </div>
-    </div>
-  </SmartModal>
-</template>
-
-<script>
-import { fb } from "~/helpers/fb"
-
-export default {
-  props: {
-    show: Boolean,
-    editingRequest: { type: Object, default: () => {} },
-  },
-  data() {
-    return {
-      defaultRequestName: "Untitled Request",
-      requestData: {
-        name: undefined,
-        collectionIndex: undefined,
-        folderName: undefined,
-        requestIndex: undefined,
-      },
-    }
-  },
-  computed: {
-    folders() {
-      const collections = this.$store.state.postwoman.collectionsGraphql
-      const collectionIndex = this.$data.requestData.collectionIndex
-      const userSelectedAnyCollection = collectionIndex !== undefined
-      if (!userSelectedAnyCollection) return []
-
-      const noCollectionAvailable = collections[collectionIndex] !== undefined
-      if (!noCollectionAvailable) return []
-
-      return getFolderNames(collections[collectionIndex].folders, [])
-    },
-    requests() {
-      const collections = this.$store.state.postwoman.collectionsGraphql
-      const collectionIndex = this.$data.requestData.collectionIndex
-      const folderName = this.$data.requestData.folderName
-
-      const userSelectedAnyCollection = collectionIndex !== undefined
-      if (!userSelectedAnyCollection) {
-        return []
-      }
-
-      const userSelectedAnyFolder =
-        folderName !== undefined && folderName !== ""
-
-      if (userSelectedAnyFolder) {
-        const collection = collections[collectionIndex]
-        const folder = findFolder(folderName, collection)
-        return folder.requests
-      } else {
-        const collection = collections[collectionIndex]
-        const noCollectionAvailable = collection !== undefined
-
-        if (!noCollectionAvailable) {
-          return []
-        }
-
-        return collection.requests
-      }
-    },
-  },
-  watch: {
-    "requestData.collectionIndex": function resetFolderAndRequestIndex() {
-      // if user has chosen some folder, than selected other collection, which doesn't have any folders
-      // than `requestUpdateData.folderName` won't be reseted
-      this.$data.requestData.folderName = undefined
-      this.$data.requestData.requestIndex = undefined
-    },
-    "requestData.folderName": function resetRequestIndex() {
-      this.$data.requestData.requestIndex = undefined
-    },
-    editingRequest({ name }) {
-      this.$data.requestData.name = name || this.$data.defaultRequestName
-    },
-  },
-  methods: {
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
-    saveRequestAs() {
-      const userDidntSpecifyCollection =
-        this.$data.requestData.collectionIndex === undefined
-      if (userDidntSpecifyCollection) {
-        this.$toast.error(this.$t("select_collection"), {
-          icon: "error",
-        })
-        return
-      }
-      if (this.$data.requestData.name.length === 0) {
-        this.$toast.error(this.$t("empty_req_name"), {
-          icon: "error",
-        })
-        return
-      }
-
-      const requestUpdated = {
-        ...this.$props.editingRequest,
-        name: this.$data.requestData.name,
-        collection: this.$data.requestData.collectionIndex,
-      }
-
-      this.$store.commit("postwoman/saveRequestAs", {
-        request: requestUpdated,
-        collectionIndex: this.$data.requestData.collectionIndex,
-        folderName: this.$data.requestData.folderName,
-        requestIndex: this.$data.requestData.requestIndex,
-        flag: "graphql",
-      })
-
-      this.hideModal()
-      this.syncCollections()
-    },
-    hideModal() {
-      this.$emit("hide-modal")
-    },
-  },
-}
-
-function getFolderNames(folders, namesList) {
-  if (folders.length) {
-    folders.forEach((folder) => {
-      namesList.push(folder.name)
-      if (folder.folders && folder.folders.length) {
-        getFolderNames(folder.folders, namesList)
-      }
-    })
-  }
-  return namesList
-}
-
-function findFolder(folderName, currentFolder) {
-  let selectedFolder
-  let result
-
-  if (folderName === currentFolder.name) {
-    return currentFolder
-  }
-
-  for (let i = 0; i < currentFolder.folders.length; i++) {
-    selectedFolder = currentFolder.folders[i]
-
-    result = findFolder(folderName, selectedFolder)
-
-    if (result !== false) {
-      return result
-    }
-  }
-  return false
-}
-</script>

components/collections/graphql/index.vue

@@ -1,19 +1,93 @@
 <template>
   <AppSection
-    ref="collections"
-    class="yellow"
-    :label="$t('collections')"
-    no-legend
+    label="collections"
+    :class="{ 'rounded border border-divider': savingMode }"
   >
-    <div class="show-on-large-screen">
-      <input
-        v-model="filterText"
-        aria-label="Search"
-        type="search"
-        :placeholder="$t('search')"
-        class="rounded-t-lg"
+    <div
+      class="
+        divide-y divide-dividerLight
+        border-b border-dividerLight
+        flex flex-col
+        top-sidebarPrimaryStickyFold
+        z-10
+        sticky
+      "
+      :class="{ 'bg-primary': !savingMode }"
+    >
+      <div v-if="showCollActions" class="search-wrapper">
+        <input
+          v-model="filterText"
+          type="search"
+          :placeholder="$t('action.search')"
+          class="bg-transparent flex w-full py-2 pr-2 pl-10"
+        />
+      </div>
+      <div class="flex flex-1 justify-between">
+        <ButtonSecondary
+          icon="add"
+          :label="$t('action.new')"
+          class="rounded-none"
+          @click.native="displayModalAdd(true)"
+        />
+        <div class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            to="https://docs.hoppscotch.io/features/collections"
+            blank
+            :title="$t('app.wiki')"
+            icon="help_outline"
+          />
+          <ButtonSecondary
+            v-if="showCollActions"
+            v-tippy="{ theme: 'tooltip' }"
+            :title="$t('modal.import_export')"
+            icon="import_export"
+            @click.native="displayModalImportExport(true)"
+          />
+        </div>
+      </div>
+    </div>
+    <div class="flex-col">
+      <CollectionsGraphqlCollection
+        v-for="(collection, index) in filteredCollections"
+        :key="`collection-${index}`"
+        :picked="picked"
+        :name="collection.name"
+        :collection-index="index"
+        :collection="collection"
+        :doc="doc"
+        :is-filtered="filterText.length > 0"
+        :saving-mode="savingMode"
+        @edit-collection="editCollection(collection, index)"
+        @add-folder="addFolder($event)"
+        @edit-folder="editFolder($event)"
+        @edit-request="editRequest($event)"
+        @select-collection="$emit('use-collection', collection)"
+        @select="$emit('select', $event)"
       />
     </div>
+    <div
+      v-if="collections.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.collections") }}
+      </span>
+      <ButtonSecondary
+        :label="$t('add.new')"
+        filled
+        @click.native="displayModalAdd(true)"
+      />
+    </div>
+    <div
+      v-if="!(filteredCollections.length !== 0 || collections.length === 0)"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <span class="text-center">
+        {{ $t("state.nothing_found") }} "{{ filterText }}"
+      </span>
+    </div>
     <CollectionsGraphqlAdd
       :show="showModalAdd"
       @hide-modal="displayModalAdd(false)"
@@ -26,7 +100,6 @@
     />
     <CollectionsGraphqlAddFolder
       :show="showModalAddFolder"
-      :folder="editingFolder"
       :folder-path="editingFolderPath"
       @add-folder="onAddFolder($event)"
       @hide-modal="displayModalAddFolder(false)"
@@ -36,13 +109,12 @@
       :collection-index="editingCollectionIndex"
       :folder="editingFolder"
       :folder-index="editingFolderIndex"
+      :folder-path="editingFolderPath"
       @hide-modal="displayModalEditFolder(false)"
     />
     <CollectionsGraphqlEditRequest
       :show="showModalEditRequest"
-      :collection-index="editingCollectionIndex"
-      :folder-index="editingFolderIndex"
-      :folder-name="editingFolderName"
+      :folder-path="editingFolderPath"
       :request="editingRequest"
       :request-index="editingRequestIndex"
       @hide-modal="displayModalEditRequest(false)"
@@ -51,54 +123,28 @@
       :show="showModalImportExport"
       @hide-modal="displayModalImportExport(false)"
     />
-    <div class="border-b row-wrapper border-brdColor">
-      <button class="icon" @click="displayModalAdd(true)">
-        <i class="material-icons">add</i>
-        <span>{{ $t("new") }}</span>
-      </button>
-      <button class="icon" @click="displayModalImportExport(true)">
-        {{ $t("import_export") }}
-      </button>
-    </div>
-    <p v-if="collections.length === 0" class="info">
-      <i class="material-icons">help_outline</i>
-      {{ $t("create_new_collection") }}
-    </p>
-    <div class="virtual-list">
-      <ul class="flex-col">
-        <li
-          v-for="(collection, index) in filteredCollections"
-          :key="collection.name"
-        >
-          <CollectionsGraphqlCollection
-            :name="collection.name"
-            :collection-index="index"
-            :collection="collection"
-            :doc="doc"
-            :is-filtered="filterText.length > 0"
-            @edit-collection="editCollection(collection, index)"
-            @add-folder="addFolder($event)"
-            @edit-folder="editFolder($event)"
-            @edit-request="editRequest($event)"
-            @select-collection="$emit('use-collection', collection)"
-          />
-        </li>
-      </ul>
-    </div>
-    <p v-if="filterText && filteredCollections.length === 0" class="info">
-      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
-        filterText
-      }}"
-    </p>
   </AppSection>
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
+import { defineComponent } from "@nuxtjs/composition-api"
+import clone from "lodash/clone"
+import { useReadonlyStream } from "~/helpers/utils/composables"
+import { graphqlCollections$, addGraphqlFolder } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
-    doc: Boolean,
+    // Whether to activate the ability to pick items (activates 'select' events)
+    savingMode: { type: Boolean, default: false },
+    doc: { type: Boolean, default: false },
+    picked: { type: Object, default: null },
+    // Whether to show the 'New' and 'Import/Export' actions
+    showCollActions: { type: Boolean, default: true },
+  },
+  setup() {
+    return {
+      collections: useReadonlyStream(graphqlCollections$, []),
+    }
   },
   data() {
     return {
@@ -120,16 +166,8 @@ export default {
     }
   },
   computed: {
-    collections() {
-      return fb.currentUser !== null
-        ? fb.currentGraphqlCollections
-        : this.$store.state.postwoman.collectionsGraphql
-    },
     filteredCollections() {
-      const collections =
-        fb.currentUser !== null
-          ? fb.currentGraphqlCollections
-          : this.$store.state.postwoman.collectionsGraphql
+      const collections = clone(this.collections)
 
       if (!this.filterText) return collections
 
@@ -167,24 +205,6 @@ export default {
       return filteredCollections
     },
   },
-  mounted() {
-    this._keyListener = function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.showModalAdd =
-          this.showModalEdit =
-          this.showModalImportExport =
-          this.showModalAddFolder =
-          this.showModalEditFolder =
-          this.showModalEditRequest =
-            false
-      }
-    }
-    document.addEventListener("keydown", this._keyListener.bind(this))
-  },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
   methods: {
     displayModalAdd(shouldDisplay) {
       this.showModalAdd = shouldDisplay
@@ -216,32 +236,21 @@ export default {
       this.$data.editingCollection = collection
       this.$data.editingCollectionIndex = collectionIndex
       this.displayModalEdit(true)
-      this.syncCollections()
     },
     onAddFolder({ name, path }) {
-      const flag = "graphql"
-      this.$store.commit("postwoman/addFolder", {
-        name,
-        path,
-        flag,
-      })
-
+      addGraphqlFolder(name, path)
       this.displayModalAddFolder(false)
-      this.syncCollections()
     },
     addFolder(payload) {
-      const { folder, path } = payload
-      this.$data.editingFolder = folder
+      const { path } = payload
       this.$data.editingFolderPath = path
       this.displayModalAddFolder(true)
     },
     editFolder(payload) {
-      const { collectionIndex, folder, folderIndex } = payload
-      this.$data.editingCollectionIndex = collectionIndex
-      this.$data.editingFolder = folder
-      this.$data.editingFolderIndex = folderIndex
+      const { folder, folderPath } = payload
+      this.editingFolder = folder
+      this.editingFolderPath = folderPath
       this.displayModalEditFolder(true)
-      this.syncCollections()
     },
     editRequest(payload) {
       const {
@@ -250,14 +259,15 @@ export default {
         folderName,
         request,
         requestIndex,
+        folderPath,
       } = payload
+      this.$data.editingFolderPath = folderPath
       this.$data.editingCollectionIndex = collectionIndex
       this.$data.editingFolderIndex = folderIndex
       this.$data.editingFolderName = folderName
       this.$data.editingRequest = request
       this.$data.editingRequestIndex = requestIndex
       this.displayModalEditRequest(true)
-      this.syncCollections()
     },
     resetSelectedData() {
       this.$data.editingCollection = undefined
@@ -267,24 +277,6 @@ export default {
       this.$data.editingRequest = undefined
       this.$data.editingRequestIndex = undefined
     },
-    syncCollections() {
-      if (fb.currentUser !== null && fb.currentSettings[0]) {
-        if (fb.currentSettings[0].value) {
-          fb.writeCollections(
-            JSON.parse(
-              JSON.stringify(this.$store.state.postwoman.collectionsGraphql)
-            ),
-            "collectionsGraphql"
-          )
-        }
-      }
-    },
   },
-}
+})
 </script>
-
-<style scoped lang="scss">
-.virtual-list {
-  max-height: calc(100vh - 270px);
-}
-</style>

components/collections/index.vue

@@ -1,22 +1,143 @@
 <template>
-  <AppSection ref="collections" :label="$t('collections')" no-legend>
-    <div class="show-on-large-screen">
-      <input
-        v-if="!saveRequest"
-        v-model="filterText"
-        aria-label="Search"
-        type="search"
-        :placeholder="$t('search')"
-        class="rounded-t-lg"
+  <AppSection
+    label="collections"
+    :class="{ 'rounded border border-divider': saveRequest }"
+  >
+    <div
+      class="
+        divide-y divide-dividerLight
+        bg-primary
+        border-b border-dividerLight
+        rounded-t
+        flex flex-col
+        top-0
+        z-10
+        sticky
+      "
+      :class="{ '!top-sidebarPrimaryStickyFold': !saveRequest && !doc }"
+    >
+      <div v-if="!saveRequest" class="search-wrapper">
+        <input
+          v-model="filterText"
+          type="search"
+          :placeholder="$t('action.search')"
+          class="bg-transparent flex w-full py-2 pr-2 pl-10"
+        />
+      </div>
+      <CollectionsChooseType
+        :collections-type="collectionsType"
+        :show="showTeamCollections"
+        :doc="doc"
+        @update-collection-type="updateCollectionType"
+        @update-selected-team="updateSelectedTeam"
+      />
+      <div class="flex flex-1 justify-between">
+        <ButtonSecondary
+          v-if="
+            collectionsType.type == 'team-collections' &&
+            (collectionsType.selectedTeam == undefined ||
+              collectionsType.selectedTeam.myRole == 'VIEWER')
+          "
+          v-tippy="{ theme: 'tooltip' }"
+          disabled
+          class="rounded-none"
+          icon="add"
+          :title="$t('team.no_access')"
+          :label="$t('action.new')"
+        />
+        <ButtonSecondary
+          v-else
+          icon="add"
+          :label="$t('action.new')"
+          class="rounded-none"
+          @click.native="displayModalAdd(true)"
+        />
+        <span class="flex">
+          <ButtonSecondary
+            v-tippy="{ theme: 'tooltip' }"
+            to="https://docs.hoppscotch.io/features/collections"
+            blank
+            :title="$t('app.wiki')"
+            icon="help_outline"
+          />
+          <ButtonSecondary
+            v-if="!saveRequest"
+            v-tippy="{ theme: 'tooltip' }"
+            :disabled="
+              collectionsType.type == 'team-collections' &&
+              collectionsType.selectedTeam == undefined
+            "
+            icon="import_export"
+            :title="$t('modal.import_export')"
+            @click.native="displayModalImportExport(true)"
+          />
+        </span>
+      </div>
+    </div>
+    <div class="flex flex-col">
+      <component
+        :is="
+          collectionsType.type == 'my-collections'
+            ? 'CollectionsMyCollection'
+            : 'CollectionsTeamsCollection'
+        "
+        v-for="(collection, index) in filteredCollections"
+        :key="`collection-${index}`"
+        :collection-index="index"
+        :collection="collection"
+        :doc="doc"
+        :is-filtered="filterText.length > 0"
+        :selected="selected.some((coll) => coll == collection)"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-collection="editCollection(collection, index)"
+        @add-folder="addFolder($event)"
+        @edit-folder="editFolder($event)"
+        @edit-request="editRequest($event)"
+        @update-team-collections="updateTeamCollections"
+        @select-collection="$emit('use-collection', collection)"
+        @unselect-collection="$emit('remove-collection', collection)"
+        @select="$emit('select', $event)"
+        @expand-collection="expandCollection"
+        @remove-collection="removeCollection"
+        @remove-request="removeRequest"
       />
     </div>
-    <CollectionsChooseType
-      :collections-type="collectionsType"
-      :show="showTeamCollections"
-      :doc="doc"
-      @update-collection-type="updateCollectionType"
-      @update-selected-team="updateSelectedTeam"
-    />
+    <div
+      v-if="filteredCollections.length === 0 && filterText.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <span class="text-center pb-4">
+        {{ $t("empty.collections") }}
+      </span>
+      <ButtonSecondary
+        v-if="
+          collectionsType.type == 'team-collections' &&
+          (collectionsType.selectedTeam == undefined ||
+            collectionsType.selectedTeam.myRole == 'VIEWER')
+        "
+        v-tippy="{ theme: 'tooltip' }"
+        :title="$t('team.no_access')"
+        :label="$t('add.new')"
+        filled
+      />
+      <ButtonSecondary
+        v-else
+        :label="$t('add.new')"
+        filled
+        @click.native="displayModalAdd(true)"
+      />
+    </div>
+    <div
+      v-if="filterText.length !== 0 && filteredCollections.length === 0"
+      class="flex flex-col text-secondaryLight p-4 items-center justify-center"
+    >
+      <i class="opacity-75 pb-2 material-icons">manage_search</i>
+      <span class="text-center">
+        {{ $t("state.nothing_found") }} "{{ filterText }}"
+      </span>
+    </div>
     <CollectionsAdd
       :show="showModalAdd"
       @submit="addNewRootCollection"
@@ -25,6 +146,7 @@
     <CollectionsEdit
       :show="showModalEdit"
       :editing-coll-name="editingCollection ? editingCollection.name : ''"
+      :placeholder-coll-name="editingCollection ? editingCollection.name : ''"
       @hide-modal="displayModalEdit(false)"
       @submit="updateEditingCollection"
     />
@@ -52,106 +174,54 @@
       @hide-modal="displayModalImportExport(false)"
       @update-team-collections="updateTeamCollections"
     />
-    <div class="border-b row-wrapper border-brdColor">
-      <button
-        v-if="
-          collectionsType.type == 'team-collections' &&
-          (collectionsType.selectedTeam == undefined ||
-            collectionsType.selectedTeam.myRole == 'VIEWER') &&
-          !saveRequest
-        "
-        class="icon"
-        disabled
-        @click="displayModalAdd(true)"
-      >
-        <i class="material-icons">add</i>
-        <div v-tooltip.left="$t('disable_new_collection')">
-          <span>{{ $t("new") }}</span>
-        </div>
-      </button>
-      <button
-        v-else-if="!saveRequest"
-        class="icon"
-        @click="displayModalAdd(true)"
-      >
-        <i class="material-icons">add</i>
-        <span>{{ $t("new") }}</span>
-      </button>
-      <button
-        v-if="!saveRequest"
-        :disabled="
-          collectionsType.type == 'team-collections' &&
-          collectionsType.selectedTeam == undefined
-        "
-        class="icon"
-        @click="displayModalImportExport(true)"
-      >
-        {{ $t("import_export") }}
-      </button>
-    </div>
-    <p v-if="collections.length === 0" class="info">
-      <i class="material-icons">help_outline</i>
-      {{ $t("create_new_collection") }}
-    </p>
-    <div class="virtual-list">
-      <ul class="flex-col">
-        <li
-          v-for="(collection, index) in filteredCollections"
-          :key="collection.name"
-        >
-          <component
-            :is="
-              collectionsType.type == 'my-collections'
-                ? 'CollectionsMyCollection'
-                : 'CollectionsTeamsCollection'
-            "
-            :name="collection.name"
-            :collection-index="index"
-            :collection="collection"
-            :doc="doc"
-            :is-filtered="filterText.length > 0"
-            :selected="selected.some((coll) => coll == collection)"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :picked="picked"
-            @edit-collection="editCollection(collection, index)"
-            @add-folder="addFolder($event)"
-            @edit-folder="editFolder($event)"
-            @edit-request="editRequest($event)"
-            @update-team-collections="updateTeamCollections"
-            @select-collection="$emit('use-collection', collection)"
-            @unselect-collection="$emit('remove-collection', collection)"
-            @select="$emit('select', $event)"
-            @expand-collection="expandCollection"
-            @remove-collection="removeCollection"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-    </div>
-    <p v-if="filterText && filteredCollections.length === 0" class="info">
-      <i class="material-icons">not_interested</i> {{ $t("nothing_found") }} "{{
-        filterText
-      }}"
-    </p>
   </AppSection>
 </template>
 
 <script>
 import gql from "graphql-tag"
 import cloneDeep from "lodash/cloneDeep"
-import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
+import { defineComponent } from "@nuxtjs/composition-api"
+import CollectionsMyCollection from "./my/Collection.vue"
+import CollectionsTeamsCollection from "./teams/Collection.vue"
+import { currentUser$ } from "~/helpers/fb/auth"
 import TeamCollectionAdapter from "~/helpers/teams/TeamCollectionAdapter"
 import * as teamUtils from "~/helpers/teams/utils"
+import {
+  restCollections$,
+  addRESTCollection,
+  editRESTCollection,
+  addRESTFolder,
+  removeRESTCollection,
+  editRESTFolder,
+  removeRESTRequest,
+  editRESTRequest,
+} from "~/newstore/collections"
+import {
+  useReadonlyStream,
+  useStreamSubscriber,
+} from "~/helpers/utils/composables"
 
-export default {
+export default defineComponent({
+  components: {
+    CollectionsMyCollection,
+    CollectionsTeamsCollection,
+  },
   props: {
     doc: Boolean,
     selected: { type: Array, default: () => [] },
     saveRequest: Boolean,
     picked: { type: Object, default: () => {} },
   },
+  setup() {
+    const { subscribeToStream } = useStreamSubscriber()
+
+    return {
+      subscribeTo: subscribeToStream,
+
+      collections: useReadonlyStream(restCollections$, []),
+      currentUser: useReadonlyStream(currentUser$, null),
+    }
+  },
   data() {
     return {
       showModalAdd: false,
@@ -177,33 +247,18 @@ export default {
       teamCollectionsNew: [],
     }
   },
-  subscriptions() {
-    return {
-      SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
-    }
-  },
   computed: {
     showTeamCollections() {
-      if (fb.currentUser == null) {
+      if (this.currentUser == null) {
         return false
       }
       return true
     },
-    collections() {
-      return fb.currentUser !== null
-        ? fb.currentCollections
-        : this.$store.state.postwoman.collections
-    },
     filteredCollections() {
-      let collections = null
-      if (this.collectionsType.type === "my-collections") {
-        collections =
-          fb.currentUser !== null
-            ? fb.currentCollections
-            : this.$store.state.postwoman.collections
-      } else {
-        collections = this.teamCollectionsNew
-      }
+      const collections =
+        this.collectionsType.type === "my-collections"
+          ? this.collections
+          : this.teamCollectionsNew
 
       if (!this.filterText) {
         return collections
@@ -261,27 +316,10 @@ export default {
     },
   },
   mounted() {
-    this._keyListener = function (e) {
-      if (e.key === "Escape") {
-        e.preventDefault()
-        this.showModalAdd =
-          this.showModalEdit =
-          this.showModalImportExport =
-          this.showModalAddFolder =
-          this.showModalEditFolder =
-          this.showModalEditRequest =
-            false
-      }
-    }
-    document.addEventListener("keydown", this._keyListener.bind(this))
-
-    this.$subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
+    this.subscribeTo(this.teamCollectionAdapter.collections$, (colls) => {
       this.teamCollectionsNew = cloneDeep(colls)
     })
   },
-  beforeDestroy() {
-    document.removeEventListener("keydown", this._keyListener)
-  },
   methods: {
     updateTeamCollections() {
       // TODO: Remove this at some point
@@ -296,17 +334,12 @@ export default {
     },
     // Intented to be called by the CollectionAdd modal submit event
     addNewRootCollection(name) {
-      if (!name) {
-        this.$toast.info(this.$t("invalid_collection_name"))
-        return
-      }
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/addNewCollection", {
+        addRESTCollection({
           name,
-          flag: "rest",
+          folders: [],
+          requests: [],
         })
-
-        this.syncCollections()
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
@@ -318,15 +351,15 @@ export default {
             this.collectionsType.selectedTeam.id
           )
           .then(() => {
-            this.$toast.success(this.$t("collection_added"), {
+            this.$toast.success(this.$t("collection.created"), {
               icon: "done",
             })
           })
-          .catch((error) => {
-            this.$toast.error(this.$t("error_occurred"), {
-              icon: "done",
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
             })
-            console.error(error)
+            console.error(e)
           })
       }
       this.displayModalAdd(false)
@@ -334,7 +367,9 @@ export default {
     // Intented to be called by CollectionEdit modal submit event
     updateEditingCollection(newName) {
       if (!newName) {
-        this.$toast.info(this.$t("invalid_collection_name"))
+        this.$toast.error(this.$t("collection.invalid_name"), {
+          icon: "error_outline",
+        })
         return
       }
       if (this.collectionsType.type === "my-collections") {
@@ -342,12 +377,8 @@ export default {
           ...this.editingCollection,
           name: newName,
         }
-        this.$store.commit("postwoman/editCollection", {
-          collection: collectionUpdated,
-          collectionIndex: this.editingCollectionIndex,
-          flag: "rest",
-        })
-        this.syncCollections()
+
+        editRESTCollection(this.editingCollectionIndex, collectionUpdated)
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
@@ -355,16 +386,15 @@ export default {
         teamUtils
           .renameCollection(this.$apollo, newName, this.editingCollection.id)
           .then(() => {
-            // TODO: $t translations ?
-            this.$toast.success("Collection Renamed", {
+            this.$toast.success(this.$t("collection.renamed"), {
               icon: "done",
             })
           })
-          .catch((error) => {
-            this.$toast.error(this.$t("error_occurred"), {
-              icon: "done",
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
             })
-            console.error(error)
+            console.error(e)
           })
       }
       this.displayModalEdit(false)
@@ -372,14 +402,7 @@ export default {
     // Intended to be called by CollectionEditFolder modal submit event
     updateEditingFolder(name) {
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/editFolder", {
-          collectionIndex: this.editingCollectionIndex,
-          folder: { ...this.editingFolder, name },
-          folderIndex: this.editingFolderIndex,
-          folderName: this.editingFolder.name,
-          flag: "rest",
-        })
-        this.syncCollections()
+        editRESTFolder(this.editingFolderPath, { ...this.editingFolder, name })
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
@@ -387,17 +410,15 @@ export default {
         teamUtils
           .renameCollection(this.$apollo, name, this.editingFolder.id)
           .then(() => {
-            // Result
-            this.$toast.success(this.$t("folder_renamed"), {
+            this.$toast.success(this.$t("folder.renamed"), {
               icon: "done",
             })
           })
-          .catch((error) => {
-            // Error
-            this.$toast.error(this.$t("error_occurred"), {
-              icon: "done",
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
             })
-            console.error(error)
+            console.error(e)
           })
       }
 
@@ -411,15 +432,11 @@ export default {
       }
 
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/editRequest", {
-          requestCollectionIndex: this.editingCollectionIndex,
-          requestFolderName: this.editingFolderName,
-          requestFolderIndex: this.editingFolderIndex,
-          requestNew: requestUpdated,
-          requestIndex: this.editingRequestIndex,
-          flag: "rest",
-        })
-        this.syncCollections()
+        editRESTRequest(
+          this.editingFolderPath,
+          this.editingRequestIndex,
+          requestUpdated
+        )
       } else if (
         this.collectionsType.type === "team-collections" &&
         this.collectionsType.selectedTeam.myRole !== "VIEWER"
@@ -433,16 +450,16 @@ export default {
             this.editingRequestIndex
           )
           .then(() => {
-            this.$toast.success("Request Renamed", {
+            this.$toast.success(this.$t("request.renamed"), {
               icon: "done",
             })
             this.$emit("update-team-collections")
           })
-          .catch((error) => {
-            this.$toast.error(this.$t("error_occurred"), {
-              icon: "done",
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
             })
-            console.error(error)
+            console.error(e)
           })
       }
 
@@ -478,17 +495,10 @@ export default {
       this.$data.editingCollection = collection
       this.$data.editingCollectionIndex = collectionIndex
       this.displayModalEdit(true)
-      this.syncCollections()
     },
     onAddFolder({ name, folder, path }) {
-      const flag = "rest"
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/addFolder", {
-          name,
-          path,
-          flag,
-        })
-        this.syncCollections()
+        addRESTFolder(name, path)
       } else if (this.collectionsType.type === "team-collections") {
         if (this.collectionsType.selectedTeam.myRole !== "VIEWER") {
           this.$apollo
@@ -513,18 +523,16 @@ export default {
               },
             })
             .then(() => {
-              // Result
-              this.$toast.success(this.$t("folder_added"), {
+              this.$toast.success(this.$t("folder.created"), {
                 icon: "done",
               })
               this.$emit("update-team-collections")
             })
-            .catch((error) => {
-              // Error
-              this.$toast.error(this.$t("error_occurred"), {
-                icon: "done",
+            .catch((e) => {
+              this.$toast.error(this.$t("error.something_went_wrong"), {
+                icon: "error_outline",
               })
-              console.error(error)
+              console.error(e)
             })
         }
       }
@@ -538,13 +546,13 @@ export default {
       this.displayModalAddFolder(true)
     },
     editFolder(payload) {
-      const { collectionIndex, folder, folderIndex } = payload
+      const { collectionIndex, folder, folderIndex, folderPath } = payload
       this.$data.editingCollectionIndex = collectionIndex
       this.$data.editingFolder = folder
       this.$data.editingFolderIndex = folderIndex
+      this.$data.editingFolderPath = folderPath
       this.$data.collectionsType = this.collectionsType
       this.displayModalEditFolder(true)
-      this.syncCollections()
     },
     editRequest(payload) {
       const {
@@ -553,15 +561,16 @@ export default {
         folderName,
         request,
         requestIndex,
+        folderPath,
       } = payload
       this.$data.editingCollectionIndex = collectionIndex
       this.$data.editingFolderIndex = folderIndex
       this.$data.editingFolderName = folderName
       this.$data.editingRequest = request
       this.$data.editingRequestIndex = requestIndex
+      this.editingFolderPath = folderPath
       this.$emit("select-request", requestIndex)
       this.displayModalEditRequest(true)
-      this.syncCollections()
     },
     resetSelectedData() {
       this.$data.editingCollection = undefined
@@ -571,28 +580,34 @@ export default {
       this.$data.editingRequest = undefined
       this.$data.editingRequestIndex = undefined
     },
-    syncCollections() {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        fb.writeCollections(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-          "collections"
-        )
-      }
-    },
     expandCollection(collectionID) {
       this.teamCollectionAdapter.expandCollection(collectionID)
     },
     removeCollection({ collectionsType, collectionIndex, collectionID }) {
       if (collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/removeCollection", {
-          collectionIndex,
-          flag: "rest",
-        })
-        this.$toast.error(this.$t("deleted"), {
+        // Cancel pick if picked collection is deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "my-collection" &&
+          this.picked.collectionIndex === collectionIndex
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
+        removeRESTCollection(collectionIndex)
+        this.$toast.success(this.$t("state.deleted"), {
           icon: "delete",
         })
-        this.syncCollections()
       } else if (collectionsType.type === "team-collections") {
+        // Cancel pick if picked collection is deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "teams-collection" &&
+          this.picked.collectionID === collectionID
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
         if (collectionsType.selectedTeam.myRole !== "VIEWER") {
           this.$apollo
             .mutate({
@@ -608,57 +623,59 @@ export default {
               },
             })
             .then(() => {
-              // Result
-              this.$toast.success(this.$t("deleted"), {
+              this.$toast.success(this.$t("state.deleted"), {
                 icon: "delete",
               })
             })
-            .catch((error) => {
-              // Error
-              this.$toast.error(this.$t("error_occurred"), {
-                icon: "done",
+            .catch((e) => {
+              this.$toast.error(this.$t("error.something_went_wrong"), {
+                icon: "error_outline",
               })
-              console.error(error)
+              console.error(e)
             })
         }
       }
     },
-    removeRequest({ collectionIndex, folderName, requestIndex }) {
+    removeRequest({ requestIndex, folderPath }) {
       if (this.collectionsType.type === "my-collections") {
-        this.$store.commit("postwoman/removeRequest", {
-          collectionIndex,
-          folderName,
-          requestIndex,
-          flag: "rest",
-        })
-        this.$toast.error(this.$t("deleted"), {
+        // Cancel pick if the picked item is being deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "my-request" &&
+          this.picked.folderPath === folderPath &&
+          this.picked.requestIndex === requestIndex
+        ) {
+          this.$emit("select", { picked: null })
+        }
+        removeRESTRequest(folderPath, requestIndex)
+        this.$toast.success(this.$t("state.deleted"), {
           icon: "delete",
         })
-        this.syncCollections()
       } else if (this.collectionsType.type === "team-collections") {
+        // Cancel pick if the picked item is being deleted
+        if (
+          this.picked &&
+          this.picked.pickedType === "teams-request" &&
+          this.picked.requestID === requestIndex
+        ) {
+          this.$emit("select", { picked: null })
+        }
+
         teamUtils
           .deleteRequest(this.$apollo, requestIndex)
           .then(() => {
-            // Result
-            this.$toast.success(this.$t("deleted"), {
+            this.$toast.success(this.$t("state.deleted"), {
               icon: "delete",
             })
           })
-          .catch((error) => {
-            // Error
-            this.$toast.error(this.$t("error_occurred"), {
-              icon: "done",
+          .catch((e) => {
+            this.$toast.error(this.$t("error.something_went_wrong"), {
+              icon: "error_outline",
             })
-            console.error(error)
+            console.error(e)
           })
       }
     },
   },
-}
+})
 </script>
-
-<style scoped lang="scss">
-.virtual-list {
-  max-height: calc(100vh - 270px);
-}
-</style>

components/collections/my/Collection.vue

@@ -1,10 +1,7 @@
 <template>
-  <div>
+  <div class="flex flex-col" :class="[{ 'bg-primaryLight': dragging }]">
     <div
-      :class="[
-        'row-wrapper transition duration-150 ease-in-out',
-        { 'bg-bgDarkColor': dragging },
-      ]"
+      class="flex items-center group"
       @dragover.prevent
       @drop.prevent="dropEvent"
       @dragover="dragging = true"
@@ -12,150 +9,168 @@
       @dragleave="dragging = false"
       @dragend="dragging = false"
     >
-      <button class="icon" @click="toggleShowChildren">
-        <i v-show="!showChildren && !isFiltered" class="material-icons"
-          >arrow_right</i
-        >
-        <i v-show="showChildren || isFiltered" class="material-icons"
-          >arrow_drop_down</i
-        >
-
-        <i v-if="isSelected" class="text-green-400 material-icons"
-          >check_circle</i
-        >
-
-        <i v-else class="material-icons">folder</i>
-        <span>{{ collection.name }}</span>
-      </button>
-      <div>
-        <button
+      <span
+        class="cursor-pointer flex px-4 justify-center items-center"
+        @click="toggleShowChildren()"
+      >
+        <i class="material-icons" :class="{ 'text-green-500': isSelected }">
+          {{ getCollectionIcon }}
+        </i>
+      </span>
+      <span
+        class="
+          cursor-pointer
+          flex flex-1
+          min-w-0
+          py-2
+          pr-2
+          transition
+          group-hover:text-secondaryDark
+        "
+        @click="toggleShowChildren()"
+      >
+        <span class="truncate"> {{ collection.name }} </span>
+      </span>
+      <div class="flex">
+        <ButtonSecondary
           v-if="doc && !selected"
-          v-tooltip.left="$t('import')"
-          class="icon"
-          @click="$emit('select-collection')"
-        >
-          <i class="material-icons">check_box_outline_blank</i>
-        </button>
-        <button
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('import.title')"
+          icon="radio_button_unchecked"
+          color="green"
+          @click.native="$emit('select-collection')"
+        />
+        <ButtonSecondary
           v-if="doc && selected"
-          v-tooltip.left="$t('delete')"
-          class="icon"
-          @click="$emit('unselect-collection')"
-        >
-          <i class="material-icons">check_box</i>
-        </button>
-        <v-popover v-if="!saveRequest">
-          <button v-tooltip.left="$t('more')" class="tooltip-target icon">
-            <i class="material-icons">more_vert</i>
-          </button>
-          <template slot="popover">
-            <div>
-              <button
-                v-close-popover
-                class="icon"
-                @click="
-                  $emit('add-folder', {
-                    folder: collection,
-                    path: `${collectionIndex}`,
-                  })
-                "
-              >
-                <i class="material-icons">create_new_folder</i>
-                <span>{{ $t("new_folder") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-close-popover
-                class="icon"
-                @click="$emit('edit-collection')"
-              >
-                <i class="material-icons">create</i>
-                <span>{{ $t("edit") }}</span>
-              </button>
-            </div>
-            <div>
-              <button
-                v-close-popover
-                class="icon"
-                @click="confirmRemove = true"
-              >
-                <i class="material-icons">delete</i>
-                <span>{{ $t("delete") }}</span>
-              </button>
-            </div>
-          </template>
-        </v-popover>
+          v-tippy="{ theme: 'tooltip' }"
+          :title="$t('action.remove')"
+          icon="check_circle_outline"
+          color="green"
+          @click.native="$emit('unselect-collection')"
+        />
+        <ButtonSecondary
+          v-if="!doc"
+          v-tippy="{ theme: 'tooltip' }"
+          icon="create_new_folder"
+          :title="$t('folder.new')"
+          class="hidden group-hover:inline-flex"
+          @click.native="
+            $emit('add-folder', {
+              folder: collection,
+              path: `${collectionIndex}`,
+            })
+          "
+        />
+        <span>
+          <tippy
+            ref="options"
+            interactive
+            trigger="click"
+            theme="popover"
+            arrow
+          >
+            <template #trigger>
+              <ButtonSecondary
+                v-tippy="{ theme: 'tooltip' }"
+                :title="$t('action.more')"
+                icon="more_vert"
+              />
+            </template>
+            <SmartItem
+              icon="create_new_folder"
+              :label="$t('folder.new')"
+              @click.native="
+                $emit('add-folder', {
+                  folder: collection,
+                  path: `${collectionIndex}`,
+                })
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="create"
+              :label="$t('action.edit')"
+              @click.native="
+                $emit('edit-collection')
+                $refs.options.tippy().hide()
+              "
+            />
+            <SmartItem
+              icon="delete"
+              color="red"
+              :label="$t('action.delete')"
+              @click.native="
+                confirmRemove = true
+                $refs.options.tippy().hide()
+              "
+            />
+          </tippy>
+        </span>
       </div>
     </div>
-    <div v-show="showChildren || isFiltered">
-      <ul class="flex-col">
-        <li
-          v-for="(folder, index) in collection.folders"
-          :key="index"
-          class="ml-8 border-l border-brdColor"
-        >
-          <CollectionsMyFolder
-            :folder="folder"
-            :folder-index="index"
-            :folder-path="`${collectionIndex}/${index}`"
-            :collection-index="collectionIndex"
-            :doc="doc"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :is-filtered="isFiltered"
-            :picked="picked"
-            @add-folder="$emit('add-folder', $event)"
-            @edit-folder="$emit('edit-folder', $event)"
-            @edit-request="$emit('edit-request', $event)"
-            @select="$emit('select', $event)"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul class="flex-col">
-        <li
-          v-for="(request, index) in collection.requests"
-          :key="index"
-          class="ml-8 border-l border-brdColor"
-        >
-          <CollectionsMyRequest
-            :request="request"
-            :collection-index="collectionIndex"
-            :folder-index="-1"
-            :folder-name="collection.name"
-            :folder-path="collectionIndex.toString()"
-            :request-index="index"
-            :doc="doc"
-            :save-request="saveRequest"
-            :collections-type="collectionsType"
-            :picked="picked"
-            @edit-request="editRequest($event)"
-            @select="$emit('select', $event)"
-            @remove-request="removeRequest"
-          />
-        </li>
-      </ul>
-      <ul>
-        <li
-          v-if="
-            (collection.folders == undefined ||
-              collection.folders.length === 0) &&
-            (collection.requests == undefined ||
-              collection.requests.length === 0)
-          "
-          class="flex ml-8 border-l border-brdColor"
-        >
-          <p class="info">
-            <i class="material-icons">not_interested</i>
-            {{ $t("collection_empty") }}
-          </p>
-        </li>
-      </ul>
+    <div v-if="showChildren || isFiltered">
+      <CollectionsMyFolder
+        v-for="(folder, index) in collection.folders"
+        :key="`folder-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :folder="folder"
+        :folder-index="index"
+        :folder-path="`${collectionIndex}/${index}`"
+        :collection-index="collectionIndex"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :is-filtered="isFiltered"
+        :picked="picked"
+        @add-folder="$emit('add-folder', $event)"
+        @edit-folder="$emit('edit-folder', $event)"
+        @edit-request="$emit('edit-request', $event)"
+        @select="$emit('select', $event)"
+        @remove-request="$emit('remove-request', $event)"
+      />
+      <CollectionsMyRequest
+        v-for="(request, index) in collection.requests"
+        :key="`request-${index}`"
+        class="border-l border-dividerLight ml-6"
+        :request="request"
+        :collection-index="collectionIndex"
+        :folder-index="-1"
+        :folder-name="collection.name"
+        :folder-path="collectionIndex.toString()"
+        :request-index="index"
+        :doc="doc"
+        :save-request="saveRequest"
+        :collections-type="collectionsType"
+        :picked="picked"
+        @edit-request="editRequest($event)"
+        @select="$emit('select', $event)"
+        @remove-request="$emit('remove-request', $event)"
+      />
+      <div
+        v-if="
+          (collection.folders == undefined ||
+            collection.folders.length === 0) &&
+          (collection.requests == undefined || collection.requests.length === 0)
+        "
+        class="
+          border-l border-dividerLight
+          flex flex-col
+          text-secondaryLight
+          ml-6
+          p-4
+          items-center
+          justify-center
+        "
+      >
+        <i class="opacity-75 pb-2 material-icons">folder_open</i>
+        <span class="text-center">
+          {{ $t("empty.collection") }}
+        </span>
+      </div>
     </div>
     <SmartConfirmModal
       :show="confirmRemove"
-      :title="$t('are_you_sure_remove_collection')"
+      :title="$t('confirm.remove_collection')"
       @hide-modal="confirmRemove = false"
       @resolve="removeCollection"
     />
@@ -163,10 +178,10 @@
 </template>
 
 <script>
-import { fb } from "~/helpers/fb"
-import { getSettingSubject } from "~/newstore/settings"
+import { defineComponent } from "@nuxtjs/composition-api"
+import { moveRESTRequest } from "~/newstore/collections"
 
-export default {
+export default defineComponent({
   props: {
     collectionIndex: { type: Number, default: null },
     collection: { type: Object, default: () => {} },
@@ -188,11 +203,6 @@ export default {
       pageNo: 0,
     }
   },
-  subscriptions() {
-    return {
-      SYNC_COLLECTIONS: getSettingSubject("syncCollections"),
-    }
-  },
   computed: {
     isSelected() {
       return (
@@ -201,19 +211,17 @@ export default {
         this.picked.collectionIndex === this.collectionIndex
       )
     },
+    getCollectionIcon() {
+      if (this.isSelected) return "check_circle_outline"
+      else if (!this.showChildren && !this.isFiltered) return "folder"
+      else if (this.showChildren || this.isFiltered) return "folder_open"
+      else return "folder"
+    },
   },
   methods: {
     editRequest(event) {
       this.$emit("edit-request", event)
     },
-    syncCollections() {
-      if (fb.currentUser !== null && this.SYNC_COLLECTIONS) {
-        fb.writeCollections(
-          JSON.parse(JSON.stringify(this.$store.state.postwoman.collections)),
-          "collections"
-        )
-      }
-    },
     toggleShowChildren() {
       if (this.$props.saveRequest)
         this.$emit("select", {
@@ -232,34 +240,13 @@ export default {
         collectionIndex: this.collectionIndex,
         collectionID: this.collection.id,
       })
-      this.confirmRemove = false
     },
     dropEvent({ dataTransfer }) {
       this.dragging = !this.dragging
-      const oldCollectionIndex = dataTransfer.getData("oldCollectionIndex")
-      const oldFolderIndex = dataTransfer.getData("oldFolderIndex")
-      const oldFolderName = dataTransfer.getData("oldFolderName")
+      const folderPath = dataTransfer.getData("folderPath")
       const requestIndex = dataTransfer.getData("requestIndex")
-      const flag = "rest"
-      this.$store.commit("postwoman/moveRequest", {
-        oldCollectionIndex,
-        newCollectionIndex: this.$props.collectionIndex,
-        newFolderIndex: -1,
-        newFolderName: this.$props.collection.name,
-        oldFolderIndex,
-        oldFolderName,
-        requestIndex,
-        flag,
-      })
-      this.syncCollections()
-    },
-    removeRequest({ collectionIndex, folderName, requestIndex }) {
-      this.$emit("remove-request", {
-        collectionIndex,
-        folderName,
-        requestIndex,
-      })
+      moveRESTRequest(folderPath, requestIndex, this.collectionIndex.toString())
     },
   },
-}
+})
 </script>