lint

added switch to toggle display of parsed values
show human readable values
2025-11-15 09:26:08 +00:00 · 2022-11-19 16:24:10 +01:00 · 2022-11-19 11:22:06 +01:00 · 2022-11-19 11:22:00 +01:00 · 2022-11-19 11:21:56 +01:00 · 2022-11-18 18:39:47 +01:00
43 changed files with 17999 additions and 818 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -26,5 +26,3 @@ coverage
 *.njsproj
 *.sln
 *.sw?
-
-.env
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,51 +2,6 @@

 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.

-## [2.16.0](https://github.com/CorentinTh/it-tools/compare/v2.15.0...v2.16.0) (2022-12-21)
-
-
-### Features
-
-* **search-bar:** use cmd + k to focus on mac ([bf88836](https://github.com/CorentinTh/it-tools/commit/bf88836dbe4037019e9545deaae1db06e5768cfb))
-* **tool:** improved favorite tool management ([af075dc](https://github.com/CorentinTh/it-tools/commit/af075dccccec959a0863e6d11516206860bed91f))
-* **tools:** added favorite tool handling ([4cd809b](https://github.com/CorentinTh/it-tools/commit/4cd809bd0c94836532f58a2ec6aa131694cce10d))
-* **tracker:** added actions monitoring ([bfc2e24](https://github.com/CorentinTh/it-tools/commit/bfc2e24bbfc08f67ed9c9b1d93474029bc01dc8b))
-
-
-### Refactors
-
-* **clean:** removed empty style tag ([cf723f1](https://github.com/CorentinTh/it-tools/commit/cf723f144ee865b6de7323d3be58eb7a9586fa56))
-* **clean:** removed unused import ([4087285](https://github.com/CorentinTh/it-tools/commit/40872859a580a20bb838b79db2b3c88c00995e37))
-* **menu:** improve support button ([679dd1c](https://github.com/CorentinTh/it-tools/commit/679dd1c1f6265227cc9db60c55d83f8eaf8f72b4))
-* **tracker:** better tracker injection ([def60e7](https://github.com/CorentinTh/it-tools/commit/def60e7248003e74ed67e9ff116b438bab410a92))
-
-## [2.15.0](https://github.com/CorentinTh/it-tools/compare/v2.14.1...v2.15.0) (2022-12-16)
-
-
-### Features
-
-* **search-bar:** better search back result ([71e98e9](https://github.com/CorentinTh/it-tools/commit/71e98e93e5752cba934f67d679088524c4d3d2ad))
-
-
-### Bug Fixes
-
-* **integer-base-converter:** handle non-decimal char and better error message ([8476cf3](https://github.com/CorentinTh/it-tools/commit/8476cf319b7ebae87c7928592604a54833ac56ef))
-* **tool-card:** correct text color on light mode for card description ([acf8bc1](https://github.com/CorentinTh/it-tools/commit/acf8bc11dbab85ab361edbe400ebbe5e52a11b89))
-
-
-### Refactors
-
-* **search-bar:** improved tool fuzzy search ([1b5d4e7](https://github.com/CorentinTh/it-tools/commit/1b5d4e72bdb222dd721a1e484c3e5d73bb62d2b1))
-
-### [2.14.1](https://github.com/CorentinTh/it-tools/compare/v2.14.0...v2.14.1) (2022-11-23)
-
-## [2.14.0](https://github.com/CorentinTh/it-tools/compare/v2.13.0...v2.14.0) (2022-11-23)
-
-
-### Features
-
-* **new-tool:** chmod calculator ([35b5187](https://github.com/CorentinTh/it-tools/commit/35b518711938c2bc88f35d104bb35d9956f0c267))
-
 ## [2.13.0](https://github.com/CorentinTh/it-tools/compare/v2.11.0...v2.13.0) (2022-11-14)


--- a/README.md
+++ b/README.md
@@ -10,53 +10,46 @@ You have an idea of a tool? Submit a [feature request](https://github.com/Corent

 ## Contribute

-## Recommended IDE Setup
+### Recommended IDE Setup

-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.vscode-typescript-vue-plugin).

-## Type Support for `.vue` Imports in TS
+### Node version

-TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
-
-If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps:
-
-1. Disable the built-in TypeScript Extension
-   1. Run `Extensions: Show Built-in Extensions` from VSCode's command palette
-   2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
-2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
+Ensure you have the correct node/npm version

 ```sh
-pnpm install
+nvm use
 ```

-### Compile and Hot-Reload for Development
+### Project Setup

 ```sh
-pnpm dev
+npm install
 ```

-### Type-Check, Compile and Minify for Production
+#### Compile and Hot-Reload for Development

 ```sh
-pnpm build
+npm run dev
 ```

-### Run Unit Tests with [Vitest](https://vitest.dev/)
+#### Type-Check, Compile and Minify for Production

 ```sh
-pnpm test
+npm run build
 ```

-### Lint with [ESLint](https://eslint.org/)
+#### Run Unit Tests with [Vitest](https://vitest.dev/)

 ```sh
-pnpm lint
+npm run test
+```
+
+#### Lint with [ESLint](https://eslint.org/)
+
+```sh
+npm run lint
 ```

 ### Create a new tool
@@ -75,9 +68,12 @@ Coded with ❤️ by [Corentin Thomasset](//corentin-thomasset.fr).

 This project is continuously deployed using [vercel.com](https://vercel.com).

+
+
 <a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-it&#0045;tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=345793&theme=light" alt="IT&#0032;Tools - Collection&#0032;of&#0032;handy&#0032;online&#0032;tools&#0032;for&#0032;devs&#0044;&#0032;with&#0032;great&#0032;UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>
 <a href="https://www.producthunt.com/posts/it-tools?utm_source=badge-top-post-badge&utm_medium=badge&utm_souce=badge-it&#0045;tools" target="_blank"><img src="https://api.producthunt.com/widgets/embed-image/v1/top-post-badge.svg?post_id=345793&theme=light&period=daily" alt="IT&#0032;Tools - Collection&#0032;of&#0032;handy&#0032;online&#0032;tools&#0032;for&#0032;devs&#0044;&#0032;with&#0032;great&#0032;UX | Product Hunt" style="width: 250px; height: 54px;" width="250" height="54" /></a>

+
 ## License

 This project is under the [GNU GPLv3](LICENSE).
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "it-tools",
-  "version": "2.16.0",
+  "version": "2.13.0",
  "description": "Collection of handy online tools for developers, with great UX. ",
  "keywords": [
    "productivity",
@@ -45,9 +45,9 @@
    "crypto-js": "^4.1.1",
    "date-fns": "^2.29.3",
    "figue": "^1.2.0",
-    "fuse.js": "^6.6.2",
    "highlight.js": "^11.6.0",
    "json5": "^2.2.1",
+    "jwt-decode": "^3.1.2",
    "lodash": "^4.17.21",
    "mathjs": "^10.6.4",
    "mime-types": "^2.1.35",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,7 +38,6 @@ specifiers:
  eslint-plugin-import: ^2.26.0
  eslint-plugin-vue: ^8.7.1
  figue: ^1.2.0
-  fuse.js: ^6.6.2
  highlight.js: ^11.6.0
  jsdom: ^19.0.0
  json5: ^2.2.1
@@ -82,7 +81,6 @@ dependencies:
  crypto-js: 4.1.1
  date-fns: 2.29.3
  figue: 1.2.0
-  fuse.js: 6.6.2
  highlight.js: 11.6.0
  json5: 2.2.1
  lodash: 4.17.21
@@ -4056,11 +4054,6 @@ packages:
    resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
    dev: true

-  /fuse.js/6.6.2:
-    resolution: {integrity: sha512-cJaJkxCCxC8qIIcPBF9yGxY0W/tVZS3uEISDxhYIdtk8OL93pe+6Zj7LjCqVV4dzbqcriOZ+kQ/NE4RXZHsIGA==}
-    engines: {node: '>=10'}
-    dev: false
-
  /gensync/1.0.0-beta.2:
    resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
    engines: {node: '>=6.9.0'}
--- a/src/components/FavoriteButton.vue
+++ b/src/components/FavoriteButton.vue
@@ -1,38 +0,0 @@
-<template>
-  <n-tooltip trigger="hover">
-    <template #trigger>
-      <n-button circle quaternary :type="buttonType" :style="{ opacity: isFavorite ? 1 : 0.2 }" @click="toggleFavorite">
-        <template #icon>
-          <n-icon :component="FavoriteFilled" />
-        </template>
-      </n-button>
-    </template>
-    {{ isFavorite ? 'Remove from favorites' : 'Add to favorites' }}
-  </n-tooltip>
-</template>
-
-<script setup lang="ts">
-import { FavoriteFilled } from '@vicons/material';
-import { useToolStore } from '@/tools/tools.store';
-import type { Tool } from '@/tools/tools.types';
-import { computed, toRefs } from 'vue';
-
-const toolStore = useToolStore();
-
-const props = defineProps<{ tool: Tool }>();
-const { tool } = toRefs(props);
-
-const isFavorite = computed(() => toolStore.isToolFavorite({ tool }));
-const buttonType = computed(() => (isFavorite.value ? 'primary' : 'default'));
-
-function toggleFavorite(event: MouseEvent) {
-  event.preventDefault();
-
-  if (toolStore.isToolFavorite({ tool })) {
-    toolStore.removeToolFromFavorites({ tool });
-    return;
-  }
-
-  toolStore.addToolToFavorites({ tool });
-}
-</script>
--- a/src/components/MenuIconItem.vue
+++ b/src/components/MenuIconItem.vue
@@ -6,11 +6,11 @@
 </template>

 <script setup lang="ts">
-import type { Tool } from '@/tools/tools.types';
+import type { ITool } from '@/tools/tool';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';

-const props = defineProps<{ tool: Tool }>();
+const props = defineProps<{ tool: ITool }>();
 const { tool } = toRefs(props);

 const theme = useThemeVars();
--- a/src/components/SearchBar.vue
+++ b/src/components/SearchBar.vue
@@ -1,38 +1,36 @@
 <script lang="ts" setup>
-import { useFuzzySearch } from '@/composable/fuzzySearch';
-import { useTracker } from '@/modules/tracker/tracker.services';
 import { tools } from '@/tools';
-import type { Tool } from '@/tools/tools.types';
 import { SearchRound } from '@vicons/material';
 import { useMagicKeys, whenever } from '@vueuse/core';
-import type { NInput } from 'naive-ui';
-import { computed, h, ref } from 'vue';
+import { deburr } from 'lodash';
+import { computed, ref } from 'vue';
 import { useRouter } from 'vue-router';
-import SearchBarItem from './SearchBarItem.vue';
-
-const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool });

 const router = useRouter();
-const { tracker } = useTracker();
-
 const queryString = ref('');
-const inputEl = ref<HTMLElement>();
-const displayDropDown = ref(true);
-const isMac = computed(() => window.navigator.userAgent.toLowerCase().includes('mac'));
+
+const cleanString = (s: string) => deburr(s.trim().toLowerCase());
+
+const searchableTools = tools.map(({ name, description, keywords, path }) => ({
+  searchableText: [name, description, ...keywords].map(cleanString).join(' '),
+  path,
+  name,
+}));

 const options = computed(() => {
-  if (queryString.value === '') {
-    return tools.map(toolToOption);
-  }
+  const query = cleanString(queryString.value);

-  return searchResult.value.map(toolToOption);
+  return searchableTools
+    .filter(({ searchableText }) => searchableText.includes(query))
+    .map(({ name, path }) => ({ label: name, value: path }));
 });

-const { searchResult } = useFuzzySearch({
-  search: queryString,
-  data: tools,
-  options: { keys: [{ name: 'name', weight: 2 }, 'description', 'keywords'] },
-});
+function onSelect(path: string) {
+  router.push(path);
+  queryString.value = '';
+}
+
+const focusTarget = ref();

 const keys = useMagicKeys({
  passive: false,
@@ -40,40 +38,12 @@ const keys = useMagicKeys({
    if (e.ctrlKey && e.key === 'k' && e.type === 'keydown') {
      e.preventDefault();
    }
-
-    if (e.metaKey && e.key === 'k' && e.type === 'keydown') {
-      e.preventDefault();
-    }
  },
 });

-whenever(keys.ctrl_k, claimFocus);
-whenever(keys.meta_k, claimFocus);
-whenever(keys.escape, releaseFocus);
-
-function renderOption({ tool }: { tool: Tool }) {
-  return h(SearchBarItem, { tool });
-}
-
-function onSelect(path: string) {
-  router.push(path);
-  queryString.value = '';
-}
-
-function claimFocus() {
-  displayDropDown.value = true;
-
-  inputEl.value?.focus();
-}
-
-function releaseFocus() {
-  displayDropDown.value = false;
-}
-
-function onFocus() {
-  tracker.trackEvent({ eventName: 'Search-bar focused' });
-  displayDropDown.value = true;
-}
+whenever(keys.ctrl_k, () => {
+  focusTarget.value.focus();
+});
 </script>

 <template>
@@ -81,21 +51,16 @@ function onFocus() {
    <n-auto-complete
      v-model:value="queryString"
      :options="options"
-      :on-select="(value) => onSelect(String(value))"
-      :render-label="renderOption"
-      :default-value="'aa'"
-      :get-show="() => displayDropDown"
-      :on-focus="onFocus"
-      @update:value="() => (displayDropDown = true)"
+      :input-props="{ autocomplete: 'disabled' }"
+      :on-select="onSelect"
    >
      <template #default="{ handleInput, handleBlur, handleFocus, value: slotValue }">
        <n-input
-          ref="inputEl"
+          ref="focusTarget"
          round
          clearable
-          :placeholder="`Search a tool (use ${isMac ? 'Cmd' : 'Ctrl'} + K to focus)`"
+          placeholder="Search a tool... [Ctrl + K]"
          :value="slotValue"
-          :input-props="{ autocomplete: 'disabled' }"
          @input="handleInput"
          @focus="handleFocus"
          @blur="handleBlur"
@@ -108,3 +73,9 @@ function onFocus() {
    </n-auto-complete>
  </div>
 </template>
+
+<style lang="less" scoped>
+// ::v-deep(.n-input__border) {
+//     border: none;
+// }
+</style>
--- a/src/components/SearchBarItem.vue
+++ b/src/components/SearchBarItem.vue
@@ -1,45 +0,0 @@
-<script lang="ts" setup>
-import type { Tool } from '@/tools/tools.types';
-import { toRefs } from 'vue';
-
-const props = defineProps<{ tool: Tool }>();
-const { tool } = toRefs(props);
-</script>
-
-<template>
-  <div class="search-bar-item">
-    <n-icon class="icon" :component="tool.icon" />
-
-    <div>
-      <div class="name">{{ tool.name }}</div>
-      <div class="description">{{ tool.description }}</div>
-    </div>
-  </div>
-</template>
-
-<style lang="less" scoped>
-.search-bar-item {
-  padding: 10px;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  .icon {
-    font-size: 30px;
-    margin-right: 10px;
-    opacity: 0.7;
-  }
-
-  .name {
-    font-weight: bold;
-    font-size: 15px;
-    line-height: 1;
-    margin-bottom: 5px;
-  }
-
-  .description {
-    opacity: 0.7;
-    line-height: 1;
-  }
-}
-</style>
--- a/src/components/ToolCard.vue
+++ b/src/components/ToolCard.vue
@@ -3,21 +3,17 @@
    <n-card class="tool-card">
      <n-space justify="space-between" align="center">
        <n-icon class="icon" size="40" :component="tool.icon" />
-        <n-space align="center">
-          <n-tag
-            v-if="tool.isNew"
-            size="small"
-            class="badge-new"
-            round
-            type="success"
-            :bordered="false"
-            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
-          >
-            New
-          </n-tag>
-
-          <favorite-button :tool="tool" />
-        </n-space>
+        <n-tag
+          v-if="tool.isNew"
+          size="small"
+          class="badge-new"
+          round
+          type="success"
+          :bordered="false"
+          :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+        >
+          New
+        </n-tag>
      </n-space>
      <n-h3 class="title">
        <n-ellipsis>{{ tool.name }}</n-ellipsis>
@@ -33,12 +29,11 @@
 </template>

 <script setup lang="ts">
-import type { Tool } from '@/tools/tools.types';
+import type { ITool } from '@/tools/tool';
 import { useThemeVars } from 'naive-ui';
 import { toRefs } from 'vue';
-import FavoriteButton from './FavoriteButton.vue';

-const props = defineProps<{ tool: Tool & { category: string } }>();
+const props = defineProps<{ tool: ITool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
 </script>
@@ -55,7 +50,7 @@ a {

  .icon {
    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
+    color: #ffffff;
  }

  .title {
@@ -64,7 +59,7 @@ a {

  .description {
    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
+    color: #ffffff;
    margin: 5px 0;
  }
 }
--- a/src/composable/fuzzySearch.ts
+++ b/src/composable/fuzzySearch.ts
@@ -1,23 +0,0 @@
-import { get, type MaybeRef } from '@vueuse/core';
-import Fuse from 'fuse.js';
-import { computed } from 'vue';
-
-export { useFuzzySearch };
-
-function useFuzzySearch<Data>({
-  search,
-  data,
-  options = {},
-}: {
-  search: MaybeRef<string>;
-  data: Data[];
-  options?: Fuse.IFuseOptions<Data>;
-}) {
-  const fuse = new Fuse(data, options);
-
-  const searchResult = computed(() => {
-    return fuse.search(get(search)).map(({ item }) => item);
-  });
-
-  return { searchResult };
-}
--- a/src/layouts/base.layout.vue
+++ b/src/layouts/base.layout.vue
@@ -1,15 +1,13 @@
 <script lang="ts" setup>
 import { NIcon, useThemeVars, type MenuGroupOption } from 'naive-ui';
-import { computed, h } from 'vue';
+import { h } from 'vue';
 import { RouterLink, useRoute } from 'vue-router';
 import { Heart, Menu2, Home2 } from '@vicons/tabler';
 import { toolsByCategory } from '@/tools';
 import { useStyleStore } from '@/stores/style.store';
 import { config } from '@/config';
 import MenuIconItem from '@/components/MenuIconItem.vue';
-import type { Tool } from '@/tools/tools.types';
-import { useToolStore } from '@/tools/tools.store';
-import { useTracker } from '@/modules/tracker/tracker.services';
+import type { ITool } from '@/tools/tool';
 import SearchBar from '../components/SearchBar.vue';
 import HeroGradient from '../assets/hero-gradient.svg?component';
 import MenuLayout from '../components/MenuLayout.vue';
@@ -21,30 +19,19 @@ const styleStore = useStyleStore();
 const version = config.app.version;
 const commitSha = config.app.lastCommitSha.slice(0, 7);

-const makeLabel = (tool: Tool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
-const makeIcon = (tool: Tool) => () => h(MenuIconItem, { tool });
+const makeLabel = (tool: ITool) => () => h(RouterLink, { to: tool.path }, { default: () => tool.name });
+const makeIcon = (tool: ITool) => () => h(MenuIconItem, { tool });

-const { tracker } = useTracker();
-
-const toolStore = useToolStore();
-
-const menuOptions = computed<MenuGroupOption[]>(() =>
-  [
-    ...(toolStore.favoriteTools.length > 0
-      ? [{ name: 'Your favorite tools', components: toolStore.favoriteTools }]
-      : []),
-    ...toolsByCategory,
-  ].map((category) => ({
-    label: category.name,
-    key: category.name,
-    type: 'group',
-    children: category.components.map((tool) => ({
-      label: makeLabel(tool),
-      icon: makeIcon(tool),
-      key: tool.name,
-    })),
+const menuOptions: MenuGroupOption[] = toolsByCategory.map((category) => ({
+  label: category.name,
+  key: category.name,
+  type: 'group',
+  children: category.components.map((tool) => ({
+    label: makeLabel(tool),
+    icon: makeIcon(tool),
+    key: tool.name,
  })),
-);
+}));
 </script>

 <template>
@@ -158,9 +145,6 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
              href="https://github.com/sponsors/CorentinTh"
              rel="noopener"
              target="_blank"
-              class="support-button"
-              :bordered="false"
-              @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
            >
              Buy me a coffee
              <n-icon v-if="!styleStore.isSmallScreen" :component="Heart" style="margin-left: 5px" />
@@ -186,19 +170,6 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
 //     background-size: @size @size;
 // }

-.support-button {
-  background: rgb(37, 99, 108);
-  background: linear-gradient(48deg, rgba(37, 99, 108, 1) 0%, rgba(59, 149, 111, 1) 60%, rgba(20, 160, 88, 1) 100%);
-  color: #fff;
-  transition: all ease 0.2s;
-
-  &:hover {
-    color: #fff;
-    padding-left: 30px;
-    padding-right: 30px;
-  }
-}
-
 .footer {
  text-align: center;
  color: #838587;
--- a/src/layouts/tool.layout.vue
+++ b/src/layouts/tool.layout.vue
@@ -3,22 +3,22 @@ import { useRoute } from 'vue-router';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
 import { computed } from 'vue';
-import FavoriteButton from '@/components/FavoriteButton.vue';
-import type { Tool } from '@/tools/tools.types';
+import { useThemeVars } from 'naive-ui';
 import BaseLayout from './base.layout.vue';

 const route = useRoute();
+const theme = useThemeVars();

 const head = computed<HeadObject>(() => ({
  title: `${route.meta.name} - IT Tools`,
  meta: [
    {
      name: 'description',
-      content: route.meta?.description as string,
+      content: route.meta.description,
    },
    {
      name: 'keywords',
-      content: ((route.meta.keywords ?? []) as string[]).join(','),
+      content: route.meta.keywords,
    },
  ],
 }));
@@ -29,18 +29,22 @@ useHead(head);
  <base-layout>
    <div class="tool-layout">
      <div class="tool-header">
-        <n-space align="center" justify="space-between" :wrap="false">
-          <n-h1>
-            {{ route.meta.name }}
-          </n-h1>
+        <n-h1>
+          {{ route.meta.name }}

-          <div>
-            <favorite-button :tool="{name: route.meta.name} as Tool" />
-          </div>
-        </n-space>
+          <n-tag
+            v-if="route.meta.isNew"
+            round
+            type="success"
+            :bordered="false"
+            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+          >
+            New tool
+          </n-tag>
+          <!-- <span class="new-tool-badge">New !</span> -->
+        </n-h1>

        <div class="separator" />
-
        <div class="description">
          {{ route.meta.description }}
        </div>
@@ -88,7 +92,6 @@ useHead(head);
      width: 200px;
      height: 2px;
      background: rgb(161, 161, 161);
-      opacity: 0.2;

      margin: 10px 0;
    }
--- a/src/modules/tracker/tracker.services.ts
+++ b/src/modules/tracker/tracker.services.ts
@@ -1,27 +0,0 @@
-import _ from 'lodash';
-import type Plausible from 'plausible-tracker';
-import { inject } from 'vue';
-
-export { createTrackerService, useTracker };
-
-function createTrackerService({ plausible }: { plausible: ReturnType<typeof Plausible> }) {
-  return {
-    trackEvent({ eventName }: { eventName: string }) {
-      plausible.trackEvent(eventName);
-    },
-  };
-}
-
-function useTracker() {
-  const plausible: ReturnType<typeof Plausible> | undefined = inject('plausible');
-
-  if (_.isNil(plausible)) {
-    throw new Error('Plausible must be instantiated');
-  }
-
-  const tracker = createTrackerService({ plausible });
-
-  return {
-    tracker,
-  };
-}
--- a/src/modules/tracker/tracker.types.ts
+++ b/src/modules/tracker/tracker.types.ts
@@ -1,3 +0,0 @@
-import type { createTrackerService } from './tracker.services';
-
-export type TrackerService = ReturnType<typeof createTrackerService>;
--- a/src/pages/About.vue
+++ b/src/pages/About.vue
@@ -1,9 +1,7 @@
 <script setup lang="ts">
-import { useTracker } from '@/modules/tracker/tracker.services';
 import { useHead } from '@vueuse/head';

 useHead({ title: 'About - IT Tools' });
-const { tracker } = useTracker();
 </script>

 <template>
@@ -27,7 +25,6 @@ const { tracker } = useTracker();
        href="https://github.com/sponsors/CorentinTh"
        rel="noopener"
        target="_blank"
-        @click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
      >
        sponsoring me </n-button
      >.
--- a/src/pages/Home.page.vue
+++ b/src/pages/Home.page.vue
@@ -1,71 +1,41 @@
 <script setup lang="ts">
-import { useToolStore } from '@/tools/tools.store';
+import { toolsWithCategory } from '@/tools';
 import { Heart } from '@vicons/tabler';
 import { useHead } from '@vueuse/head';
 import ColoredCard from '../components/ColoredCard.vue';
 import ToolCard from '../components/ToolCard.vue';

-const toolStore = useToolStore();
-
 useHead({ title: 'IT Tools - Handy online tools for developers' });
 </script>

 <template>
  <div class="home-page">
-    <div class="grid-wrapper">
-      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi>
-          <colored-card title="You like it-tools?" :icon="Heart">
-            Give us a star on
-            <a
-              href="https://github.com/CorentinTh/it-tools"
-              rel="noopener"
-              target="_blank"
-              aria-label="IT-Tools' github repository"
-              >github</a
-            >
-            or follow us on
-            <a
-              href="https://twitter.com/ittoolsdottech"
-              rel="noopener"
-              target="_blank"
-              aria-label="IT-Tools' twitter account"
-              >twitter</a
-            >! Thank you
-            <n-icon :component="Heart" />
-          </colored-card>
-        </n-gi>
-      </n-grid>
-
-      <transition name="height">
-        <div v-if="toolStore.favoriteTools.length > 0">
-          <n-h3>Your favorite tools</n-h3>
-          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
-              <tool-card :tool="tool" />
-            </n-gi>
-          </n-grid>
-        </div>
-      </transition>
-
-      <div v-if="toolStore.newTools.length > 0">
-        <n-h3>Newest tools</n-h3>
-        <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-          <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
-            <tool-card :tool="tool" />
-          </n-gi>
-        </n-grid>
-      </div>
-
-      <n-h3>All the tools</n-h3>
-      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
-          <transition>
-            <tool-card :tool="tool" />
-          </transition>
-        </n-gi>
-      </n-grid>
-    </div>
+    <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
+      <n-gi>
+        <colored-card title="You like it-tools?" :icon="Heart">
+          Give us a star on
+          <a
+            href="https://github.com/CorentinTh/it-tools"
+            rel="noopener"
+            target="_blank"
+            aria-label="IT-Tools' github repository"
+            >github</a
+          >
+          or follow us on
+          <a
+            href="https://twitter.com/ittoolsdottech"
+            rel="noopener"
+            target="_blank"
+            aria-label="IT-Tools' twitter account"
+            >twitter</a
+          >! Thank you
+          <n-icon :component="Heart" />
+        </colored-card>
+      </n-gi>
+      <n-gi v-for="tool in toolsWithCategory" :key="tool.name">
+        <tool-card :tool="tool" />
+      </n-gi>
+    </n-grid>
  </div>
 </template>

@@ -73,27 +43,4 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
 .home-page {
  padding-top: 50px;
 }
-
-.n-h3 {
-  margin-bottom: 10px;
-}
-
-::v-deep(.n-grid) {
-  margin-bottom: 30px;
-}
-
-.height-enter-active,
-.height-leave-active {
-  transition: all 0.5s ease-in-out;
-  overflow: hidden;
-  max-height: 500px;
-}
-
-.height-enter-from,
-.height-leave-to {
-  max-height: 42px;
-  overflow: hidden;
-  opacity: 0;
-  margin-bottom: 0;
-}
 </style>
--- a/src/plugins/naive.plugin.ts
+++ b/src/plugins/naive.plugin.ts
@@ -53,11 +53,10 @@ import {
  NTooltip,
  NUpload,
  NUploadDragger,
-  NCheckbox,
+  NPopover,
 } from 'naive-ui';

 const components = [
-  NCheckbox,
  NDynamicInput,
  NDatePicker,
  NCode,
@@ -111,6 +110,7 @@ const components = [
  NIcon,
  NSwitch,
  NCollapseTransition,
+  NPopover,
 ];

 export const naive = create({ components });
--- a/src/plugins/plausible.plugin.ts
+++ b/src/plugins/plausible.plugin.ts
@@ -1,5 +1,4 @@
 import { config } from '@/config';
-
 import Plausible from 'plausible-tracker';
 import type { App } from 'vue';

@@ -8,6 +7,6 @@ export const plausible = {
    const plausible = Plausible(config.plausible);
    plausible.enableAutoPageviews();

-    app.provide('plausible', plausible);
+    app.config.globalProperties.$plausible = plausible;
  },
 };
--- a/src/themes.ts
+++ b/src/themes.ts
@@ -6,12 +6,6 @@ export const lightThemeOverrides: GlobalThemeOverrides = {
  },

  Layout: { color: '#f1f5f9' },
-
-  AutoComplete: {
-    peers: {
-      InternalSelectMenu: { height: '500px' },
-    },
-  },
 };

 export const darkThemeOverrides: GlobalThemeOverrides = {
@@ -22,12 +16,6 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
    primaryColorSuppl: '#36AD6AFF',
  },

-  AutoComplete: {
-    peers: {
-      InternalSelectMenu: { height: '500px', color: '#1e1e1e' },
-    },
-  },
-
  Menu: {
    itemHeight: '32px',
  },
--- a/src/tools/base64-string-converter/base64-string-converter.vue
+++ b/src/tools/base64-string-converter/base64-string-converter.vue
@@ -53,3 +53,5 @@ const b64Validation = useValidation({
  rules: [{ message: 'Invalid base64 string', validator: (value) => isValidBase64(value.trim()) }],
 });
 </script>
+
+<style lang="less" scoped></style>
--- a/src/tools/chmod-calculator/chmod-calculator.service.test.ts
+++ b/src/tools/chmod-calculator/chmod-calculator.service.test.ts
@@ -1,68 +0,0 @@
-import { expect, describe, it } from 'vitest';
-import { computeChmodOctalRepresentation } from './chmod-calculator.service';
-
-describe('chmod-calculator', () => {
-  describe('computeChmodOctalRepresentation', () => {
-    it('get the octal representation from permissions', () => {
-      expect(
-        computeChmodOctalRepresentation({
-          permissions: {
-            owner: { read: true, write: true, execute: true },
-            group: { read: true, write: true, execute: true },
-            public: { read: true, write: true, execute: true },
-          },
-        }),
-      ).to.eql('777');
-
-      expect(
-        computeChmodOctalRepresentation({
-          permissions: {
-            owner: { read: false, write: false, execute: false },
-            group: { read: false, write: false, execute: false },
-            public: { read: false, write: false, execute: false },
-          },
-        }),
-      ).to.eql('000');
-
-      expect(
-        computeChmodOctalRepresentation({
-          permissions: {
-            owner: { read: false, write: true, execute: false },
-            group: { read: false, write: true, execute: true },
-            public: { read: true, write: false, execute: true },
-          },
-        }),
-      ).to.eql('235');
-
-      expect(
-        computeChmodOctalRepresentation({
-          permissions: {
-            owner: { read: true, write: false, execute: false },
-            group: { read: false, write: true, execute: false },
-            public: { read: false, write: false, execute: true },
-          },
-        }),
-      ).to.eql('421');
-
-      expect(
-        computeChmodOctalRepresentation({
-          permissions: {
-            owner: { read: false, write: false, execute: true },
-            group: { read: false, write: true, execute: false },
-            public: { read: true, write: false, execute: false },
-          },
-        }),
-      ).to.eql('124');
-
-      expect(
-        computeChmodOctalRepresentation({
-          permissions: {
-            owner: { read: false, write: true, execute: false },
-            group: { read: false, write: true, execute: false },
-            public: { read: false, write: true, execute: false },
-          },
-        }),
-      ).to.eql('222');
-    });
-  });
-});
--- a/src/tools/chmod-calculator/chmod-calculator.service.ts
+++ b/src/tools/chmod-calculator/chmod-calculator.service.ts
@@ -1,17 +0,0 @@
-import _ from 'lodash';
-import type { GroupPermissions, Permissions } from './chmod-calculator.types';
-
-export { computeChmodOctalRepresentation };
-
-function computeChmodOctalRepresentation({ permissions }: { permissions: Permissions }): string {
-  const permissionValue = { read: 4, write: 2, execute: 1 };
-
-  const getGroupPermissionValue = (permission: GroupPermissions) =>
-    _.reduce(permission, (acc, isPermSet, key) => acc + (isPermSet ? _.get(permissionValue, key, 0) : 0), 0);
-
-  return [
-    getGroupPermissionValue(permissions.owner),
-    getGroupPermissionValue(permissions.group),
-    getGroupPermissionValue(permissions.public),
-  ].join('');
-}
--- a/src/tools/chmod-calculator/chmod-calculator.types.ts
+++ b/src/tools/chmod-calculator/chmod-calculator.types.ts
@@ -1,10 +0,0 @@
-export type Scope = 'read' | 'write' | 'execute';
-export type Group = 'owner' | 'group' | 'public';
-
-export type GroupPermissions = {
-  [k in Scope]: boolean;
-};
-
-export type Permissions = {
-  [k in Group]: GroupPermissions;
-};
--- a/src/tools/chmod-calculator/chmod-calculator.vue
+++ b/src/tools/chmod-calculator/chmod-calculator.vue
@@ -1,83 +0,0 @@
-<template>
-  <div>
-    <n-table :bordered="false" :bottom-bordered="false" single-column class="permission-table">
-      <thead>
-        <tr>
-          <th class="text-center" scope="col"></th>
-          <th class="text-center" scope="col">Owner (u)</th>
-          <th class="text-center" scope="col">Group (g)</th>
-          <th class="text-center" scope="col">Public (o)</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr v-for="{ scope, title } of scopes" :key="scope">
-          <td class="line-header">{{ title }}</td>
-          <td v-for="group of groups" :key="group" class="text-center">
-            <!-- <n-switch v-model:value="permissions[group][scope]" /> -->
-            <n-checkbox v-model:checked="permissions[group][scope]" size="large" />
-          </td>
-        </tr>
-      </tbody>
-    </n-table>
-
-    <div class="octal-result">
-      {{ octal }}
-    </div>
-
-    <input-copyable :value="`chmod ${octal} path`" readonly style="margin-bottom: 5px" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useThemeVars } from 'naive-ui';
-import { computed, ref } from 'vue';
-import { computeChmodOctalRepresentation } from './chmod-calculator.service';
-import InputCopyable from '../../components/InputCopyable.vue';
-
-import type { Group, Scope } from './chmod-calculator.types';
-
-const themeVars = useThemeVars();
-
-const scopes: { scope: Scope; title: string }[] = [
-  { scope: 'read', title: 'Read (4)' },
-  { scope: 'write', title: 'Write (2)' },
-  { scope: 'execute', title: 'Execute (1)' },
-];
-const groups: Group[] = ['owner', 'group', 'public'];
-
-const permissions = ref({
-  owner: { read: false, write: false, execute: false },
-  group: { read: false, write: false, execute: false },
-  public: { read: false, write: false, execute: false },
-});
-
-const octal = computed(() => computeChmodOctalRepresentation({ permissions: permissions.value }));
-</script>
-
-<style lang="less" scoped>
-.octal-result {
-  text-align: center;
-  font-size: 50px;
-  font-family: monospace;
-  color: v-bind('themeVars.primaryColor');
-  margin: 20px 0;
-}
-.permission-table {
-  td,
-  th {
-    padding: 15px;
-
-    @media screen and (max-width: 600px) {
-      padding: 5px;
-    }
-  }
-}
-.line-header {
-  font-weight: bold;
-  text-align: right;
-  max-width: 80px;
-}
-.text-center {
-  text-align: center;
-}
-</style>
--- a/src/tools/chmod-calculator/index.ts
+++ b/src/tools/chmod-calculator/index.ts
@@ -1,22 +0,0 @@
-import { FileInvoice } from '@vicons/tabler';
-import { defineTool } from '../tool';
-
-export const tool = defineTool({
-  name: 'Chmod calculator',
-  path: '/chmod-calculator',
-  description: 'Compute your chmod permissions and commands with this online chmod calculator.',
-  keywords: [
-    'chmod',
-    'calculator',
-    'file',
-    'permission',
-    'files',
-    'directory',
-    'folder',
-    'recursive',
-    'generator',
-    'octal',
-  ],
-  component: () => import('./chmod-calculator.vue'),
-  icon: FileInvoice,
-});
--- a/src/tools/hmac-generator/hmac-generator.vue
+++ b/src/tools/hmac-generator/hmac-generator.vue
@@ -94,3 +94,5 @@ const hmac = computed(() =>
 );
 const { copy } = useCopy({ source: hmac });
 </script>
+
+<style lang="less" scoped></style>
--- a/src/tools/index.ts
+++ b/src/tools/index.ts
@@ -1,4 +1,7 @@
-import { tool as chmodCalculator } from './chmod-calculator';
+import { LockOpen } from '@vicons/tabler';
+import type { ToolCategory } from './tool';
+
+import { tool as jwtParser } from './jwt-parser';
 import { tool as mimeTypes } from './mime-types';
 import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 import { tool as base64FileConverter } from './base64-file-converter';
@@ -33,15 +36,16 @@ import { tool as tokenGenerator } from './token-generator';
 import { tool as urlEncoder } from './url-encoder';
 import { tool as urlParser } from './url-parser';
 import { tool as uuidGenerator } from './uuid-generator';
-import type { ToolCategory } from './tools.types';

 export const toolsByCategory: ToolCategory[] = [
  {
    name: 'Crypto',
+    icon: LockOpen,
    components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator],
  },
  {
    name: 'Converter',
+    icon: LockOpen,
    components: [
      dateTimeConverter,
      baseConverter,
@@ -54,6 +58,7 @@ export const toolsByCategory: ToolCategory[] = [
  },
  {
    name: 'Web',
+    icon: LockOpen,
    components: [
      urlEncoder,
      htmlEntities,
@@ -63,26 +68,32 @@ export const toolsByCategory: ToolCategory[] = [
      metaTagGenerator,
      otpCodeGeneratorAndValidator,
      mimeTypes,
+      jwtParser,
    ],
  },
  {
    name: 'Images',
+    icon: LockOpen,
    components: [qrCodeGenerator, svgPlaceholderGenerator],
  },
  {
    name: 'Development',
-    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify, chmodCalculator],
+    icon: LockOpen,
+    components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify],
  },
  {
    name: 'Math',
+    icon: LockOpen,
    components: [mathEvaluator, etaCalculator],
  },
  {
    name: 'Measurement',
+    icon: LockOpen,
    components: [chronometer],
  },
  {
    name: 'Text',
+    icon: LockOpen,
    components: [loremIpsumGenerator, textStatistics],
  },
 ];
--- a/src/tools/integer-base-converter/integer-base-converter.model.ts
+++ b/src/tools/integer-base-converter/integer-base-converter.model.ts
@@ -7,7 +7,7 @@ export function convertBase({ value, fromBase, toBase }: { value: string; fromBa
    .reverse()
    .reduce((carry: number, digit: string, index: number) => {
      if (!fromRange.includes(digit)) {
-        throw new Error('Invalid digit "' + digit + '" for base ' + fromBase + '.');
+        throw new Error('Invalid digit `' + digit + '` for base ' + fromBase + '.');
      }
      return (carry += fromRange.indexOf(digit) * Math.pow(fromBase, index));
    }, 0);
--- a/src/tools/integer-base-converter/integer-base-converter.vue
+++ b/src/tools/integer-base-converter/integer-base-converter.vue
@@ -4,7 +4,7 @@
      <div v-if="styleStore.isSmallScreen">
        <n-input-group>
          <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
-          <n-input v-model:value="input" style="width: 100%" :status="error ? 'error' : undefined" />
+          <n-input-number v-model:value="inputNumber" min="0" style="width: 100%" />
        </n-input-group>
        <n-input-group>
          <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
@@ -14,65 +14,51 @@

      <n-input-group v-else>
        <n-input-group-label style="flex: 0 0 120px"> Input number: </n-input-group-label>
-        <n-input v-model:value="input" :status="error ? 'error' : undefined" />
+        <n-input-number v-model:value="inputNumber" min="0" />
        <n-input-group-label style="flex: 0 0 120px"> Input base: </n-input-group-label>
        <n-input-number v-model:value="inputBase" max="64" min="2" />
      </n-input-group>
-
-      <n-alert v-if="error" style="margin-top: 25px" type="error">{{ error }}</n-alert>
      <n-divider />

      <n-input-group>
        <n-input-group-label style="flex: 0 0 170px"> Binary (2): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 2 })"
-          readonly
-          placeholder="Binary version will be here..."
-        />
+        <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 2 })" readonly />
      </n-input-group>

      <n-input-group>
        <n-input-group-label style="flex: 0 0 170px"> Octal (8): </n-input-group-label>
-        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 8 })"
-          readonly
-          placeholder="Octal version will be here..."
-        />
+        <input-copyable :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 8 })" readonly />
      </n-input-group>

      <n-input-group>
        <n-input-group-label style="flex: 0 0 170px"> Decimal (10): </n-input-group-label>
        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 10 })"
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 10 })"
          readonly
-          placeholder="Decimal version will be here..."
        />
      </n-input-group>

      <n-input-group>
        <n-input-group-label style="flex: 0 0 170px"> Hexadecimal (16): </n-input-group-label>
        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 16 })"
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 16 })"
          readonly
-          placeholder="Decimal version will be here..."
        />
      </n-input-group>

      <n-input-group>
        <n-input-group-label style="flex: 0 0 170px"> Base64 (64): </n-input-group-label>
        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: 64 })"
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: 64 })"
          readonly
-          placeholder="Base64 version will be here..."
        />
      </n-input-group>
      <n-input-group>
        <n-input-group-label style="flex: 0 0 85px"> Custom: </n-input-group-label>
        <n-input-number v-model:value="outputBase" style="flex: 0 0 86px" max="64" min="2" />
        <input-copyable
-          :value="errorlessConvert({ value: input, fromBase: inputBase, toBase: outputBase })"
+          :value="convertBase({ value: String(inputNumber), fromBase: inputBase, toBase: outputBase })"
          readonly
-          :placeholder="`Base ${outputBase} will be here...`"
        />
      </n-input-group>
    </n-card>
@@ -80,31 +66,16 @@
 </template>

 <script setup lang="ts">
-import { computed, ref } from 'vue';
+import { ref } from 'vue';
 import { useStyleStore } from '@/stores/style.store';
-import { getErrorMessageIfThrows } from '@/utils/error';
 import { convertBase } from './integer-base-converter.model';
 import InputCopyable from '../../components/InputCopyable.vue';

 const styleStore = useStyleStore();

-const input = ref('42');
+const inputNumber = ref(42);
 const inputBase = ref(10);
 const outputBase = ref(42);
-
-function errorlessConvert(...args: Parameters<typeof convertBase>) {
-  try {
-    return convertBase(...args);
-  } catch (err) {
-    return '';
-  }
-}
-
-const error = computed(() =>
-  getErrorMessageIfThrows(() =>
-    convertBase({ value: input.value, fromBase: inputBase.value, toBase: outputBase.value }),
-  ),
-);
 </script>

 <style lang="less" scoped>
--- a/src/tools/jwt-parser/claim.vue
+++ b/src/tools/jwt-parser/claim.vue
@@ -0,0 +1,29 @@
+<template>
+  <n-space>
+    <em>{{ claim }}</em>
+    <span v-if="label.label !== claim">
+      <n-popover placement="right" trigger="hover">
+        <template #trigger>
+          <n-icon :component="InfoCircle" trigger />
+        </template>
+        {{ label.label }}
+        <template v-if="label.ref !== ''" #footer> {{ label.ref }} </template>
+      </n-popover>
+    </span>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { InfoCircle } from '@vicons/tabler';
+import { get_claim_label } from './jwt-parser.service';
+
+const props = defineProps({
+  claim: {
+    type: String,
+    default: '',
+  },
+});
+
+const label = computed(() => get_claim_label(props.claim ? props.claim : ''));
+</script>
--- a/src/tools/jwt-parser/index.ts
+++ b/src/tools/jwt-parser/index.ts
@@ -0,0 +1,11 @@
+import { ArrowsShuffle } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'JWT parser',
+  path: '/jwt-parser',
+  description: '',
+  keywords: ['jwt', 'parser'],
+  component: () => import('./jwt-parser.vue'),
+  icon: ArrowsShuffle,
+});
--- a/src/tools/jwt-parser/jwt-parser.service.ts
+++ b/src/tools/jwt-parser/jwt-parser.service.ts
@@ -0,0 +1,429 @@
+import jwt_decode, { InvalidTokenError } from 'jwt-decode';
+
+interface JWT {
+  header: Map<string, unknown>;
+  payload: Map<string, unknown>;
+}
+
+export function safe_jwt_decode(raw_jwt: string): JWT {
+  try {
+    const header = jwt_decode(raw_jwt, { header: true }) as Map<string, unknown>;
+    const payload = jwt_decode(raw_jwt) as Map<string, unknown>;
+    return { header: header, payload: payload };
+  } catch (e) {
+    if (e instanceof InvalidTokenError) {
+      return { header: new Map<string, unknown>(), payload: new Map<string, unknown>() };
+    } else {
+      throw e;
+    }
+  }
+}
+
+export function get_claim_label(claim: string): { label: string; ref: string } {
+  const infos = STANDARD_CLAIMS.find((info) => info.name === claim);
+  if (infos) {
+    return { label: infos.long_name, ref: infos.ref };
+  }
+  switch (claim) {
+    case 'typ':
+      return { label: 'Type', ref: '' };
+    case 'alg':
+      return { label: 'Algorithm', ref: '' };
+  }
+  return { label: claim, ref: '' };
+}
+
+export function parse_claim_value(claim: string, value: unknown): { value: unknown; extension?: unknown } {
+  switch (claim) {
+    case 'exp':
+    case 'nbf':
+    case 'iat': {
+      // Convert to milliseconds, JWT specs says it should be in seconds, JS
+      // works with milliseconds
+      value = typeof value === 'string' ? parseInt(value) : value;
+      const date = new Date((value as number) * 1000);
+      return { value: `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`, extension: value };
+    }
+    case 'alg':
+      return { value: AlgorithmKeyDescriptionMapping[value as string], extension: value };
+    default:
+      if (typeof value === 'boolean') {
+        // Perhaps there's a better way to do this?
+        return { value: value ? 'true' : 'false' };
+      }
+      return { value: value };
+  }
+}
+
+// From https://datatracker.ietf.org/doc/html/rfc7518#section-3.1
+const AlgorithmKeyDescriptionMapping: { [k: string]: string } = {
+  HS256: 'HMAC using SHA-256',
+  HS384: 'HMAC using SHA-384',
+  HS512: 'HMAC using SHA-512',
+  RS256: 'RSASSA-PKCS1-v1_5 using SHA-256',
+  RS384: 'RSASSA-PKCS1-v1_5 using SHA-384',
+  RS512: 'RSASSA-PKCS1-v1_5 using SHA-512',
+  ES256: 'ECDSA using P-256 and SHA-256',
+  ES384: 'ECDSA using P-384 and SHA-384',
+  ES512: 'ECDSA using P-521 and SHA-512',
+  PS256: 'RSASSA-PSS using SHA-256 and MGF1 with SHA-256',
+  PS384: 'RSASSA-PSS using SHA-384 and MGF1 with SHA-384',
+  PS512: 'RSASSA-PSS using SHA-512 and MGF1 with SHA-512',
+  none: 'No digital signature or MAC performed',
+};
+
+// List extracted from IANA: https://www.iana.org/assignments/jwt/jwt.xhtml
+const STANDARD_CLAIMS = [
+  {
+    name: 'iss',
+    long_name: 'Issuer',
+    ref: '[RFC7519 - Section 4.1.1]',
+  },
+  {
+    name: 'sub',
+    long_name: 'Subject',
+    ref: '[RFC7519 - Section 4.1.2]',
+  },
+  {
+    name: 'aud',
+    long_name: 'Audience',
+    ref: '[RFC7519 - Section 4.1.3]',
+  },
+  {
+    name: 'exp',
+    long_name: 'Expiration Time',
+    ref: '[RFC7519 - Section 4.1.4]',
+  },
+  {
+    name: 'nbf',
+    long_name: 'Not Before',
+    ref: '[RFC7519 - Section 4.1.5]',
+  },
+  {
+    name: 'iat',
+    long_name: 'Issued At',
+    ref: '[RFC7519 - Section 4.1.6]',
+  },
+  {
+    name: 'jti',
+    long_name: 'JWT ID',
+    ref: '[RFC7519 - Section 4.1.7]',
+  },
+  {
+    name: 'name',
+    long_name: 'Full name',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'given_name',
+    long_name: 'Given name(s) or first name(s)',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'family_name',
+    long_name: 'Surname(s) or last name(s)',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'middle_name',
+    long_name: 'Middle name(s)',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'nickname',
+    long_name: 'Casual name',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'preferred_username',
+    long_name: 'Shorthand name by which the End-User wishes to be referred to',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'profile',
+    long_name: 'Profile page URL',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'picture',
+    long_name: 'Profile picture URL',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'website',
+    long_name: 'Web page or blog URL',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'email',
+    long_name: 'Preferred e-mail address',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'email_verified',
+    long_name: 'True if the e-mail address has been verified; otherwise false',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'gender',
+    long_name: 'Gender',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'birthdate',
+    long_name: 'Birthday',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'zoneinfo',
+    long_name: 'Time zone',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'locale',
+    long_name: 'Locale',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'phone_number',
+    long_name: 'Preferred telephone number',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'phone_number_verified',
+    long_name: 'True if the phone number has been verified; otherwise false',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'address',
+    long_name: 'Preferred postal address',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'updated_at',
+    long_name: 'Time the information was last updated',
+    ref: '[OpenID Connect Core 1.0 - Section 5.1]',
+  },
+  {
+    name: 'azp',
+    long_name: 'Authorized party - the party to which the ID Token was issued',
+    ref: '[OpenID Connect Core 1.0 - Section 2]',
+  },
+  {
+    name: 'nonce',
+    long_name: 'Value used to associate a Client session with an ID Token',
+    ref: '[OpenID Connect Core 1.0 - Section 2]',
+  },
+  {
+    name: 'auth_time',
+    long_name: 'Time when the authentication occurred',
+    ref: '[OpenID Connect Core 1.0 - Section 2]',
+  },
+  {
+    name: 'at_hash',
+    long_name: 'Access Token hash value',
+    ref: '[OpenID Connect Core 1.0 - Section 2]',
+  },
+  {
+    name: 'c_hash',
+    long_name: 'Code hash value',
+    ref: '[OpenID Connect Core 1.0 - Section 3.3.2.11]',
+  },
+  {
+    name: 'acr',
+    long_name: 'Authentication Context Class Reference',
+    ref: '[OpenID Connect Core 1.0 - Section 2]',
+  },
+  {
+    name: 'amr',
+    long_name: 'Authentication Methods References',
+    ref: '[OpenID Connect Core 1.0 - Section 2]',
+  },
+  {
+    name: 'sub_jwk',
+    long_name: 'Public key used to check the signature of an ID Token',
+    ref: '[OpenID Connect Core 1.0 - Section 7.4]',
+  },
+  {
+    name: 'cnf',
+    long_name: 'Confirmation',
+    ref: '[RFC7800 - Section 3.1]',
+  },
+  {
+    name: 'sip_from_tag',
+    long_name: 'SIP From tag header field parameter value',
+    ref: '[RFC8055][RFC3261]',
+  },
+  {
+    name: 'sip_date',
+    long_name: 'SIP Date header field value',
+    ref: '[RFC8055][RFC3261]',
+  },
+  {
+    name: 'sip_callid',
+    long_name: 'SIP Call-Id header field value',
+    ref: '[RFC8055][RFC3261]',
+  },
+  {
+    name: 'sip_cseq_num',
+    long_name: 'SIP CSeq numeric header field parameter value',
+    ref: '[RFC8055][RFC3261]',
+  },
+  {
+    name: 'sip_via_branch',
+    long_name: 'SIP Via branch header field parameter value',
+    ref: '[RFC8055][RFC3261]',
+  },
+  {
+    name: 'orig',
+    long_name: 'Originating Identity String',
+    ref: '[RFC8225 - Section 5.2.1]',
+  },
+  {
+    name: 'dest',
+    long_name: 'Destination Identity String',
+    ref: '[RFC8225 - Section 5.2.1]',
+  },
+  {
+    name: 'mky',
+    long_name: 'Media Key Fingerprint String',
+    ref: '[RFC8225 - Section 5.2.2]',
+  },
+  {
+    name: 'events',
+    long_name: 'Security Events',
+    ref: '[RFC8417 - Section 2.2]',
+  },
+  {
+    name: 'toe',
+    long_name: 'Time of Event',
+    ref: '[RFC8417 - Section 2.2]',
+  },
+  {
+    name: 'txn',
+    long_name: 'Transaction Identifier',
+    ref: '[RFC8417 - Section 2.2]',
+  },
+  {
+    name: 'rph',
+    long_name: 'Resource Priority Header Authorization',
+    ref: '[RFC8443 - Section 3]',
+  },
+  {
+    name: 'sid',
+    long_name: 'Session ID',
+    ref: '[OpenID Connect Front-Channel Logout 1.0 - Section 3]',
+  },
+  {
+    name: 'vot',
+    long_name: 'Vector of Trust value',
+    ref: '[RFC8485]',
+  },
+  {
+    name: 'vtm',
+    long_name: 'Vector of Trust trustmark URL',
+    ref: '[RFC8485]',
+  },
+  {
+    name: 'attest',
+    long_name: 'Attestation level as defined in SHAKEN framework',
+    ref: '[RFC8588]',
+  },
+  {
+    name: 'origid',
+    long_name: 'Originating Identifier as defined in SHAKEN framework',
+    ref: '[RFC8588]',
+  },
+  {
+    name: 'act',
+    long_name: 'Actor',
+    ref: '[RFC8693 - Section 4.1]',
+  },
+  {
+    name: 'scope',
+    long_name: 'Scope Values',
+    ref: '[RFC8693 - Section 4.2]',
+  },
+  {
+    name: 'client_id',
+    long_name: 'Client Identifier',
+    ref: '[RFC8693 - Section 4.3]',
+  },
+  {
+    name: 'may_act',
+    long_name: 'Authorized Actor - the party that is authorized to become the actor',
+    ref: '[RFC8693 - Section 4.4]',
+  },
+  {
+    name: 'jcard',
+    long_name: 'jCard data',
+    ref: '[RFC8688][RFC7095]',
+  },
+  {
+    name: 'at_use_nbr',
+    long_name: 'Number of API requests for which the access token can be used',
+    ref: '[ETSI GS NFV-SEC 022 V2.7.1]',
+  },
+  {
+    name: 'div',
+    long_name: 'Diverted Target of a Call',
+    ref: '[RFC8946]',
+  },
+  {
+    name: 'opt',
+    long_name: 'Original PASSporT (in Full Form)',
+    ref: '[RFC8946]',
+  },
+  {
+    name: 'vc',
+    long_name: 'Verifiable Credential as specified in the W3C Recommendation',
+    ref: '[W3C Recommendation Verifiable Credentials Data Model 1.0 - Expressing verifiable information on the Web (19 November 2019) - Section 6.3.1]',
+  },
+  {
+    name: 'vp',
+    long_name: 'Verifiable Presentation as specified in the W3C Recommendation',
+    ref: '[W3C Recommendation Verifiable Credentials Data Model 1.0 - Expressing verifiable information on the Web (19 November 2019) - Section 6.3.1]',
+  },
+  {
+    name: 'sph',
+    long_name: 'SIP Priority header field',
+    ref: '[RFC9027]',
+  },
+  {
+    name: 'ace_profile',
+    long_name: 'The ACE profile a token is supposed to be used with.',
+    ref: '[RFC-ietf-ace-oauth-authz-46 - Section 5.10]',
+  },
+  {
+    name: 'cnonce',
+    long_name:
+      'client-nonce. A nonce previously provided to the AS by the RS via the client. Used to verify token freshness when the RS cannot synchronize its clock with the AS.',
+    ref: '[RFC-ietf-ace-oauth-authz-46 - Section 5.10]',
+  },
+  {
+    name: 'exi',
+    long_name:
+      'Expires in. Lifetime of the token in seconds from the time the RS first sees it. Used to implement a weaker from of token expiration for devices that cannot synchronize their internal clocks.',
+    ref: '[RFC-ietf-ace-oauth-authz-46 - Section 5.10.3]',
+  },
+  {
+    name: 'roles',
+    long_name: 'Roles',
+    ref: '[RFC7643 - Section 4.1.2][RFC9068 - Section 2.2.3.1]',
+  },
+  {
+    name: 'groups',
+    long_name: 'Groups',
+    ref: '[RFC7643 - Section 4.1.2][RFC9068 - Section 2.2.3.1]',
+  },
+  {
+    name: 'entitlements',
+    long_name: 'Entitlements',
+    ref: '[RFC7643 - Section 4.1.2][RFC9068 - Section 2.2.3.1]',
+  },
+  {
+    name: 'token_introspection',
+    long_name: 'Token introspection response',
+    ref: '[RFC-ietf-oauth-jwt-introspection-response-12 - Section 5]',
+  },
+];
--- a/src/tools/jwt-parser/jwt-parser.vue
+++ b/src/tools/jwt-parser/jwt-parser.vue
@@ -0,0 +1,69 @@
+<template>
+  <n-card>
+    <n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
+      <n-input v-model:value="raw_jwt" type="textarea" placeholder="Put your token here..." rows="5" />
+    </n-form-item>
+    <n-form-item label="Display parsed value?" label-placement="left" :show-feedback="false">
+      <n-switch v-model:value="showParsedValues" />
+    </n-form-item>
+
+    <n-table>
+      <tbody>
+        <td colspan="2" class="table-header"><strong>Header</strong></td>
+        <tr v-for="[key, value] in Object.entries(decodedJWT.header)" :key="key">
+          <td class="claims"><claim-vue :claim="key" /></td>
+          <td>
+            <span v-if="!showParsedValues">{{ value }}</span>
+            <value-vue v-else :claim="key" :value="value" />
+          </td>
+        </tr>
+        <td colspan="2" class="table-header"><strong>Payload</strong></td>
+        <tr v-for="[key, value] in Object.entries(decodedJWT.payload)" :key="key">
+          <td class="claims"><claim-vue :claim="key" /></td>
+          <td>
+            <span v-if="!showParsedValues">{{ value }}</span>
+            <value-vue v-else :claim="key" :value="value" />
+          </td>
+        </tr>
+      </tbody>
+    </n-table>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { computed, ref } from 'vue';
+import jwt_decode from 'jwt-decode';
+import { useValidation } from '@/composable/validation';
+import { isNotThrowing } from '@/utils/boolean';
+import { safe_jwt_decode } from './jwt-parser.service';
+import claimVue from './claim.vue';
+import valueVue from './value.vue';
+
+const raw_jwt = ref(
+  'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
+);
+const showParsedValues = ref(true);
+
+const decodedJWT = computed(() => {
+  return safe_jwt_decode(raw_jwt.value);
+});
+const validation = useValidation({
+  source: raw_jwt,
+  rules: [
+    {
+      validator: (value) => value.length > 0 && isNotThrowing(() => jwt_decode(value, { header: true })),
+      message: 'Invalid JWT',
+    },
+  ],
+});
+</script>
+
+<style lang="less" scoped>
+.table-header {
+  text-align: center;
+}
+
+.claims {
+  width: 20%;
+}
+</style>
--- a/src/tools/jwt-parser/value.vue
+++ b/src/tools/jwt-parser/value.vue
@@ -0,0 +1,24 @@
+<template>
+  <n-space>
+    {{ value.value }}
+    <em v-if="value.extension">({{ value.extension }})</em>
+  </n-space>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { parse_claim_value } from './jwt-parser.service';
+
+const props = defineProps({
+  claim: {
+    type: String,
+    default: '',
+  },
+  value: {
+    type: String,
+    default: '',
+  },
+});
+
+const value = computed(() => parse_claim_value(props.claim, props.value));
+</script>
--- a/src/tools/math-evaluator/math-evaluator.vue
+++ b/src/tools/math-evaluator/math-evaluator.vue
@@ -29,3 +29,5 @@ const expression = ref('');

 const result = computed(() => withDefaultOnError(() => evaluate(expression.value) ?? '', ''));
 </script>
+
+<style lang="less" scoped></style>
--- a/src/tools/mime-types/mime-types.vue
+++ b/src/tools/mime-types/mime-types.vue
@@ -95,3 +95,5 @@ const selectedExtension = ref(undefined);

 const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeType[selectedExtension.value] : []));
 </script>
+
+<style lang="less" scoped></style>
--- a/src/tools/tool.ts
+++ b/src/tools/tool.ts
@@ -1,10 +1,27 @@
 import { config } from '@/config';
-import type { Tool } from './tools.types';
+import type { Component } from 'vue';
+
+export interface ITool {
+  name: string;
+  path: string;
+  description: string;
+  keywords: string[];
+  component: () => Promise<Component>;
+  icon: Component;
+  redirectFrom?: string[];
+  isNew: boolean;
+}
+
+export interface ToolCategory {
+  name: string;
+  icon: Component;
+  components: ITool[];
+}

 type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;

 export function defineTool(
-  tool: WithOptional<Tool, 'isNew'>,
+  tool: WithOptional<ITool, 'isNew'>,
  { newTools }: { newTools: string[] } = { newTools: config.tools.newTools },
 ) {
  const isNew = newTools.includes(tool.name);
--- a/src/tools/tools.store.ts
+++ b/src/tools/tools.store.ts
@@ -1,44 +0,0 @@
-import { get, useStorage, type MaybeRef } from '@vueuse/core';
-import { defineStore } from 'pinia';
-import type { Ref } from 'vue';
-import { toolsWithCategory } from './index';
-import type { Tool, ToolWithCategory } from './tools.types';
-
-export const useToolStore = defineStore('tools', {
-  state: () => ({
-    favoriteToolsName: useStorage('favoriteToolsName', []) as Ref<string[]>,
-  }),
-  getters: {
-    favoriteTools(state) {
-      return state.favoriteToolsName
-        .map((favoriteName) => toolsWithCategory.find(({ name }) => name === favoriteName))
-        .filter(Boolean) as ToolWithCategory[]; // cast because .filter(Boolean) does not remove undefined from type
-    },
-
-    notFavoriteTools(state): ToolWithCategory[] {
-      return toolsWithCategory.filter((tool) => !state.favoriteToolsName.includes(tool.name));
-    },
-
-    tools(): ToolWithCategory[] {
-      return toolsWithCategory;
-    },
-
-    newTools(): ToolWithCategory[] {
-      return this.tools.filter(({ isNew }) => isNew);
-    },
-  },
-
-  actions: {
-    addToolToFavorites({ tool }: { tool: MaybeRef<Tool> }) {
-      this.favoriteToolsName.push(get(tool).name);
-    },
-
-    removeToolFromFavorites({ tool }: { tool: MaybeRef<Tool> }) {
-      this.favoriteToolsName = this.favoriteToolsName.filter((name) => get(tool).name !== name);
-    },
-
-    isToolFavorite({ tool }: { tool: MaybeRef<Tool> }) {
-      return this.favoriteToolsName.includes(get(tool).name);
-    },
-  },
-});
--- a/src/tools/tools.types.ts
+++ b/src/tools/tools.types.ts
@@ -1,19 +0,0 @@
-import type { Component } from 'vue';
-
-export type Tool = {
-  name: string;
-  path: string;
-  description: string;
-  keywords: string[];
-  component: () => Promise<Component>;
-  icon: Component;
-  redirectFrom?: string[];
-  isNew: boolean;
-};
-
-export type ToolCategory = {
-  name: string;
-  components: Tool[];
-};
-
-export type ToolWithCategory = Tool & { category: string };
--- a/src/utils/error.test.ts
+++ b/src/utils/error.test.ts
@@ -1,29 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import { getErrorMessageIfThrows } from './error';
-
-describe('error util', () => {
-  describe('getErrorMessageIfThrows', () => {
-    it('get an error message if the callback throws, undefined instead', () => {
-      expect(
-        getErrorMessageIfThrows(() => {
-          throw 'message';
-        }),
-      ).to.equal('message');
-
-      expect(
-        getErrorMessageIfThrows(() => {
-          throw new Error('message');
-        }),
-      ).to.equal('message');
-
-      expect(
-        getErrorMessageIfThrows(() => {
-          throw { message: 'message' };
-        }),
-      ).to.equal('message');
-
-      // eslint-disable-next-line @typescript-eslint/no-empty-function
-      expect(getErrorMessageIfThrows(() => {})).to.equal(undefined);
-    });
-  });
-});
--- a/src/utils/error.ts
+++ b/src/utils/error.ts
@@ -1,24 +0,0 @@
-import _ from 'lodash';
-
-export { getErrorMessageIfThrows };
-
-function getErrorMessageIfThrows(cb: () => unknown) {
-  try {
-    cb();
-    return undefined;
-  } catch (err) {
-    if (_.isString(err)) {
-      return err;
-    }
-
-    if (_.isError(err)) {
-      return err.message;
-    }
-
-    if (_.isObject(err) && _.has(err, 'message')) {
-      return (err as { message: string }).message;
-    }
-
-    return 'An error as occurred.';
-  }
-}
Author	SHA1	Message	Date
bastantoine	98b226de42	lint	2022-11-19 16:24:10 +01:00
bastantoine	9f2874b23d	added switch to toggle display of parsed values	2022-11-19 11:22:06 +01:00
bastantoine	b0d9fbbbaf	show human readable values	2022-11-19 11:22:00 +01:00
bastantoine	7c100f4030	use a table to display the data	2022-11-19 11:21:56 +01:00
bastantoine	8d0a4273fb	added function to decode JWT and display header and payload	2022-11-18 18:39:47 +01:00
bastantoine	bb0eca80a7	added base tool structure	2022-11-18 18:38:50 +01:00
bastantoine	3e4a64551f	npm install jwt-decode	2022-11-18 15:58:19 +01:00