fix(css): update primary color variables

- Added Slider component to the UI library
- Added Checkbox component to the UI library
- Added Textarea component to the UI library

.eslintrc.cjs

@@ -1,30 +0,0 @@
-/* eslint-env node */
-require('@rushstack/eslint-patch/modern-module-resolution');
-
-module.exports = {
-  root: true,
-  extends: [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    'plugin:vue/vue3-recommended',
-    'plugin:vue/vue3-recommended',
-    '@vue/eslint-config-typescript/recommended',
-    '@vue/eslint-config-prettier',
-  ],
-  env: {
-    'vue/setup-compiler-macros': true,
-  },
-  rules: {
-    'vue/multi-word-component-names': ['off'],
-    'prettier/prettier': [
-      'error',
-      {
-        singleQuote: true,
-        semi: true,
-        tabWidth: 2,
-        trailingComma: 'all',
-        printWidth: 120,
-      },
-    ],
-  },
-};

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,48 @@
+name: 🐞 Bug Report
+description: File a bug report.
+labels: ['bug', 'triage']
+assignees:
+  - CorentinTh
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for taking the time to fill out this bug report!
+
+  - type: textarea
+    id: bug-description
+    attributes:
+      label: Describe the bug
+      description: A clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!
+      placeholder: Bug description
+    validations:
+      required: true
+
+  - type: textarea
+    id: what-happened
+    attributes:
+      label: What happened?
+      description: Also tell us, what did you expect to happen? If you have a screenshot, you can paste it here.
+      placeholder: Tell us what you see!
+      value: 'A bug happened!'
+    validations:
+      required: true
+
+  - type: textarea
+    id: version
+    attributes:
+      label: System information
+      description: What is you environment? You can use the `npx envinfo --system --browsers` command to get this information.
+    validations:
+      required: true
+
+  - type: dropdown
+    id: app-type
+    attributes:
+      label: Where did you encounter the bug?
+      options:
+        - Public app (it-tools.tech)
+        - A self hosted
+        - Other (installations, docker, etc.)
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,33 +0,0 @@
----
-name: Bug report
-about: Create a report to help us improve
-title: "[BUG] "
-labels: bug
-assignees: CorentinTh
-
----
-
-**Describe the bug**
-A clear and concise description of what the bug is.
-
-**To Reproduce**
-Steps to reproduce the behavior:
-1. Go to '...'
-2. Click on '....'
-3. Scroll down to '....'
-4. See error
-
-**Expected behavior**
-A clear and concise description of what you expected to happen.
-
-**Screenshots**
-If applicable, add screenshots to help explain your problem.
-
-**Configuration (please complete the following information):**
- - Device: [e.g. iPhone6, ]
- - OS: [e.g. iOS]
- - Browser [e.g. chrome, safari]
- - Version [e.g. 22]
-
-**Additional context**
-Add any other context about the problem here.

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1 @@
+blank_issues_enabled: false

.github/ISSUE_TEMPLATE/feature-request.yml

@@ -0,0 +1,56 @@
+name: 🚀 New feature proposal
+description: Propose a new feature/enhancement or tool idea for IT-Tools
+labels: ['enhancement', 'triage']
+
+body:
+  - type: markdown
+    attributes:
+      value: |
+        Thanks for your interest in the project and taking the time to fill out this feature report!
+
+  - type: dropdown
+    id: request-type
+    attributes:
+      label: What type of request is this?
+      options:
+        - New tool idea
+        - New feature for an existing tool
+        - Deployment or CI/CD improvement
+        - Self-hosting improvement
+        - Other
+    validations:
+      required: true
+
+  - type: textarea
+    id: feature-description
+    attributes:
+      label: Clear and concise description of the feature you are proposing
+      description: A clear and concise description of what the feature is.
+      placeholder: 'Example: a token generator tool'
+    validations:
+      required: true
+
+  - type: textarea
+    id: alternative
+    attributes:
+      label: Is their example of this tool in the wild?
+      description: Provide link to already existing tool (like websites, apps, cli, ...) or npm packages that could be used or provide inspiration for the feature.
+
+  - type: textarea
+    id: additional-context
+    attributes:
+      label: Additional context
+      description: Any other context or screenshots about the feature request here.
+
+  - type: checkboxes
+    id: checkboxes
+    attributes:
+      label: Validations
+      description: Before submitting the issue, please make sure you do the following
+      options:
+        - label: Check the feature is not already implemented in the project.
+          required: true
+        - label: Check that there isn't already an issue that request the same feature to avoid creating a duplicate.
+          required: true
+        - label: Check that the feature can be implemented in a client side only app (IT-Tools is client side only, no server).
+          required: true

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,20 +0,0 @@
----
-name: Feature request
-about: Suggest an idea for this project
-title: "[FEAT]"
-labels: enhancement
-assignees: CorentinTh
-
----
-
-**Is your feature request related to a problem? Please describe.**
-A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
-
-**Describe the solution you'd like**
-A clear and concise description of what you want to happen.
-
-**Describe alternatives you've considered**
-A clear and concise description of any alternative solutions or features you've considered.
-
-**Additional context**
-Add any other context or screenshots about the feature request here.

.github/stale.yml

@@ -1,17 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 60
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 7
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - pinned
-  - security
-# Label to use when marking an issue as stale
-staleLabel: wontfix
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

.github/workflows/cd-app-prod.yaml

@@ -0,0 +1,43 @@
+name: CD - Production
+
+on:
+  push:
+    branches:
+      - v3
+
+jobs:
+  publish-app-prod:
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+      deployments: write
+    name: Publish app to production
+    steps:
+      - uses: actions/checkout@692973e3d937129bcbf40652eb9f2f61becf3332 # v4
+      - run: corepack enable
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          corepack: true
+          cache: 'pnpm'
+
+      - name: Install dependencies
+        run: pnpm i
+
+      - name: Build the app
+        run: pnpm -F @it-tools/app build:cloudflare-pages
+
+      - name: Publish to Cloudflare Pages
+        uses: AdrianGonz97/refined-cf-pages-action@v1
+        with:
+          apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}
+          accountId: ${{ secrets.CLOUDFLARE_ACCOUNT_ID }}
+          githubToken: ${{ secrets.GITHUB_TOKEN }}
+          projectName: it-tools
+          workingDirectory: packages/app
+          directory: dist
+          deploymentName: Production App
+          branch: v3
+          wranglerVersion: '3'
+
+  

.github/workflows/ci.yml

@@ -1,38 +1,34 @@
 name: ci
 
-on: [push, pull_request]
+on:
+  pull_request:
+  push:
+    branches:
+      - main
 
 jobs:
   ci:
     runs-on: ubuntu-latest
 
     steps:
-      - name: Checkout
+      - uses: actions/checkout@v4
-        uses: actions/checkout@master
+      - run: corepack enable
+      - uses: actions/setup-node@v3
         with:
-          fetch-depth: 0
+          node-version: 22
-
+          cache: 'pnpm'
-      - name: Setup node env
-        uses: actions/setup-node@v3.0.0
-        with:
-          node-version: 16
-
-      - name: Cache node_modules
-        uses: actions/cache@v2
-        with:
-          path: ~/.npm
-          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
-          restore-keys: |
-            ${{ runner.os }}-node-
 
       - name: Install dependencies
-        run: npm ci
+        run: pnpm i
 
       - name: Run linters
-        run: npm run lint
+        run: pnpm lint
 
-      - name: Run unit test
+      # - name: Run unit test
-        run: npm run test
+      #   run: pnpm test:unit
+
+      - name: Type check
+        run: pnpm typecheck
 
       - name: Build the app
-        run: npm run build
+        run: pnpm build

.github/workflows/codeql-analysis.yml

@@ -1,69 +0,0 @@
-# For most projects, this workflow file will not need changing; you simply need
-# to commit it to your repository.
-#
-# You may wish to alter this file to override the set of languages analyzed,
-# or to provide custom queries or build logic.
-#
-# ******** NOTE ********
-# We have attempted to detect the languages in your repository. Please check
-# the `language` matrix defined below to confirm you have the correct set of
-# supported CodeQL languages.
-#
-name: "CodeQL"
-
-on:
-  push:
-    branches: [ dev ]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [ dev ]
-
-jobs:
-  analyze:
-    name: Analyze
-    runs-on: ubuntu-latest
-    permissions:
-      actions: read
-      contents: read
-      security-events: write
-
-    strategy:
-      fail-fast: false
-      matrix:
-        language: [ 'javascript' ]
-        # CodeQL supports [ 'cpp', 'csharp', 'go', 'java', 'javascript', 'python' ]
-        # Learn more:
-        # https://docs.github.com/en/free-pro-team@latest/github/finding-security-vulnerabilities-and-errors-in-your-code/configuring-code-scanning#changing-the-languages-that-are-analyzed
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      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.
-        # 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
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.gitignore

@@ -1,28 +1,32 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+dist-app
+dist-node
+dist-cloudflare
+
+# Node dependencies
+node_modules
+
 # Logs
 logs
 *.log
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-lerna-debug.log*
 
-node_modules
+# Misc
 .DS_Store
-dist
+.fleet
-dist-ssr
-coverage
-*.local
-
-/cypress/videos/
-/cypress/screenshots/
-
-# Editor directories and files
-.vscode/*
-!.vscode/extensions.json
 .idea
-*.suo
+
-*.ntvs*
+# Local env files
-*.njsproj
+.env
-*.sln
+.env.*
-*.sw?
+!.env.example
+
+.wrangler
+coverage
+cache
+.zed

.npmrc

@@ -0,0 +1,2 @@
+shamefully-hoist=true
+strict-peer-dependencies=false

.nvmrc

@@ -1 +1 @@
-16.14.2
+v22

.versionrc

@@ -1,14 +0,0 @@
-{
-  "types": [
-    {"type": "feat", "section": "Features"},
-    {"type": "fix", "section": "Bug Fixes"},
-    {"type": "docs", "section": "Documentation"},
-    {"type": "style", "section": "Styling"},
-    {"type": "refactor", "section": "Refactors"},
-    {"type": "perf", "section": "Performance"},
-    {"type": "test", "section": "Tests"},
-    {"type": "build", "section": "Build System"},
-    {"type": "ci", "section": "CI"},
-    {"type": "revert", "section": "Reverts"}
-  ]
-}

.vscode/extensions.json

@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin", "dbaeumer.vscode-eslint"]
-}

CHANGELOG.md

@@ -1,259 +0,0 @@
-# Changelog
-
-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.4.2](https://github.com/CorentinTh/it-tools/compare/v2.4.1...v2.4.2) (2022-06-01)
-
-
-### Refactors
-
-* **config:** added config management with figue ([6becdbb](https://github.com/CorentinTh/it-tools/commit/6becdbb42329e1bdecf158707e37ba9f13ba1d2c))
-* **imports:** removed useless defineProps import ([5ce1262](https://github.com/CorentinTh/it-tools/commit/5ce1262fb44864b829dac09d5c0b9b68d522ceb7))
-* set coerent head title for home page ([a46d125](https://github.com/CorentinTh/it-tools/commit/a46d125c19902c2f41f37c62c07bb7b548d9f6f0))
-
-### [2.4.1](https://github.com/CorentinTh/it-tools/compare/v2.4.0...v2.4.1) (2022-05-15)
-
-
-### Bug Fixes
-
-* **seo:** wrong url in share metas ([a88e4a9](https://github.com/CorentinTh/it-tools/commit/a88e4a9289e7d8cc80190f60f2fe08fe2ba08ee6))
-
-
-### Refactors
-
-* **json-viewer:** add clear button ([048bc4a](https://github.com/CorentinTh/it-tools/commit/048bc4ae943509dea2946764efaa69f845b6c478))
-* **seo:** changed title string ([d4ea393](https://github.com/CorentinTh/it-tools/commit/d4ea393c1df87ae958a06ed66a11e36b081282d4))
-
-## [2.4.0](https://github.com/CorentinTh/it-tools/compare/v2.3.2...v2.4.0) (2022-05-14)
-
-
-### Features
-
-* catch throw on validation ([a60f64f](https://github.com/CorentinTh/it-tools/commit/a60f64f74417f811204121f97c16cdb4754afc3b))
-* **hash-text:** compute all hashes at the same time ([#242](https://github.com/CorentinTh/it-tools/issues/242)) ([e9cc499](https://github.com/CorentinTh/it-tools/commit/e9cc499ed87ba926086323223c7eca4f6658b3f0))
-* **new-tool:**  json viewer ([d356b14](https://github.com/CorentinTh/it-tools/commit/d356b1488fc640a4f5b65d62e0f2f368f5941996))
-* **seo:** added cannonical meta ([34bc6a5](https://github.com/CorentinTh/it-tools/commit/34bc6a57a7bab98ff2a630d02034c342084e0af9))
-
-
-### Bug Fixes
-
-* **lint:** missing new lines ([3cfc5f8](https://github.com/CorentinTh/it-tools/commit/3cfc5f8bc27b66e6fbb6054f3c909818083ebc37))
-* update recommended extension ids ([#244](https://github.com/CorentinTh/it-tools/issues/244)) ([1d7032d](https://github.com/CorentinTh/it-tools/commit/1d7032d0268220f594de6d837a303fc1e63cbd9f))
-
-
-### Documentation
-
-* added producthunt banners ([4c4da16](https://github.com/CorentinTh/it-tools/commit/4c4da16970e1dbb13705d8b6c020cd40cd2b5e0d))
-
-
-### Refactors
-
-* **base-layout:** renammed one letter variable ([383d975](https://github.com/CorentinTh/it-tools/commit/383d97569580c4f31448c07cb97e3778bc97a8af))
-* **date-converter:** mutualised and dry-ed code ([d2c767f](https://github.com/CorentinTh/it-tools/commit/d2c767f0922e9b93172c3167226ad3db5499b9f6))
-* **seo:** changed title string ([c3b6132](https://github.com/CorentinTh/it-tools/commit/c3b6132c261bd5952bafb1ff1e576eb13d2d0a7d))
-* updated description ([b89db3c](https://github.com/CorentinTh/it-tools/commit/b89db3c8d0de601fecbd2f9f79492dff1b461bd8))
-
-### [2.3.2](https://github.com/CorentinTh/it-tools/compare/v2.3.1...v2.3.2) (2022-05-09)
-
-
-### Bug Fixes
-
-* **base-converter:** responsive input ([0b0cbd5](https://github.com/CorentinTh/it-tools/commit/0b0cbd55c3809ded2eedfa0b2238bc950b01516a))
-* **base64-converter:** async onUpload callback ([84cf1bb](https://github.com/CorentinTh/it-tools/commit/84cf1bb9645c5ae31579098df59471f7d99f6f0c))
-* **typo:** misspelings ([9755e51](https://github.com/CorentinTh/it-tools/commit/9755e51fe216e5e25c56417152e70cb5bce26b11))
-
-
-### Refactors
-
-* **responsive:** row layout for multicards on big screens ([e21230b](https://github.com/CorentinTh/it-tools/commit/e21230bbd9550ba3315607b021a60a4f9f9e1b61))
-
-### [2.3.1](https://github.com/CorentinTh/it-tools/compare/v2.3.0...v2.3.1) (2022-04-24)
-
-
-### Refactors
-
-* changed twitter account handler ([608ec3a](https://github.com/CorentinTh/it-tools/commit/608ec3a81db6583c8a2bf126b3868afd043c6981))
-
-## [2.3.0](https://github.com/CorentinTh/it-tools/compare/v2.2.0...v2.3.0) (2022-04-22)
-
-
-### Features
-
-* **new-tool:** html entities escape/unescape ([8e29a97](https://github.com/CorentinTh/it-tools/commit/8e29a97404ea0aa9b9b576656358c8c276b6f992))
-
-
-### Bug Fixes
-
-* **head:** added titles for non-tool pages ([0a15892](https://github.com/CorentinTh/it-tools/commit/0a15892dde9852ff158a8fcb72d0ad6bae8bad02))
-* **sider:** default collapsed value ([b22aa94](https://github.com/CorentinTh/it-tools/commit/b22aa941f52009118d4d3cc98277cc4c402a4c77))
-* **sider:** missing href for link in footer ([c4dabcc](https://github.com/CorentinTh/it-tools/commit/c4dabccdaeac9d03163ac2588599b000e4e74562))
-* **style:** hard width for group labels ([ebf6695](https://github.com/CorentinTh/it-tools/commit/ebf6695d2533db6f37b24dc7d338f422c551c8cb))
-* **url-parser:** cleaned weird margins on dark mode ([005ebfb](https://github.com/CorentinTh/it-tools/commit/005ebfba318ece1a9c04aefb737baed5d7aafb91))
-
-
-### Refactors
-
-* **lint:** linter auto fix ([086d31e](https://github.com/CorentinTh/it-tools/commit/086d31eab5b3b1a927803eab5e650585f61abe19))
-* removed useless ref and value ([b12cbe4](https://github.com/CorentinTh/it-tools/commit/b12cbe412407389186a58e4ceaa94f5b441c11ea))
-
-### [2.2.1](https://github.com/CorentinTh/it-tools/compare/v2.2.0...v2.2.1) (2022-04-21)
-
-
-### Bug Fixes
-
-* **head:** added titles for non-tool pages ([0a15892](https://github.com/CorentinTh/it-tools/commit/0a15892dde9852ff158a8fcb72d0ad6bae8bad02))
-* **sider:** missing href for link in footer ([c4dabcc](https://github.com/CorentinTh/it-tools/commit/c4dabccdaeac9d03163ac2588599b000e4e74562))
-* **style:** hard width for group labels ([ebf6695](https://github.com/CorentinTh/it-tools/commit/ebf6695d2533db6f37b24dc7d338f422c551c8cb))
-* **url-parser:** cleaned weird margins on dark mode ([005ebfb](https://github.com/CorentinTh/it-tools/commit/005ebfba318ece1a9c04aefb737baed5d7aafb91))
-
-## [2.2.0](https://github.com/CorentinTh/it-tools/compare/v2.1.0...v2.2.0) (2022-04-18)
-
-
-### Features
-
-* **new-tool:** url parser ([2b38d6f](https://github.com/CorentinTh/it-tools/commit/2b38d6f81e34845f896b858513e35209cba29f98))
-
-
-### Bug Fixes
-
-* **sider-footer:** fixed commit sha url ([ed9046d](https://github.com/CorentinTh/it-tools/commit/ed9046d3e1f5a7dc01c722ed139a2ae477a2d48f))
-
-## [2.1.0](https://github.com/CorentinTh/it-tools/compare/v2.0.2...v2.1.0) (2022-04-18)
-
-
-### Features
-
-* **new-tool:** bcrypt ([6d5856f](https://github.com/CorentinTh/it-tools/commit/6d5856fa93d1ffbf71856c75adc24ad87dc4b49b))
-* **new-tool:** device information ([277bd5f](https://github.com/CorentinTh/it-tools/commit/277bd5f0da359fd54c5164b376007d182a9fabde))
-
-
-### Refactors
-
-* **menu:** removed burger menu icon tooltip ([09abffb](https://github.com/CorentinTh/it-tools/commit/09abffbcf9b09cb5adc34f8754b019d0c8b60854))
-
-### [2.0.2](https://github.com/CorentinTh/it-tools/compare/v2.0.1...v2.0.2) (2022-04-18)
-
-
-### Bug Fixes
-
-* **git-memo:** pre scroll on overflow ([4fc303e](https://github.com/CorentinTh/it-tools/commit/4fc303e5e3f0bef9201cc002963e244a5d3be7b5))
-* **menu:** menu auto closed on mobile ([71f79a5](https://github.com/CorentinTh/it-tools/commit/71f79a5bbfe0dd5451a435c0a55e8b77ee7d3848))
-* **qr-code:** responsive layout ([cbf0b3d](https://github.com/CorentinTh/it-tools/commit/cbf0b3d6995e47d371a8fbcfccd65ba304fb08dc))
-
-
-### Refactors
-
-* **crontab:** list instead of table on small screen ([6b11de2](https://github.com/CorentinTh/it-tools/commit/6b11de258a8039fe7729130ede35d47592be7cbe))
-* removed empty sources ([a14cac6](https://github.com/CorentinTh/it-tools/commit/a14cac6d5c5967a47ca76a1d1a420115114c3bbf))
-* throw an error object instead of string ([4112fa5](https://github.com/CorentinTh/it-tools/commit/4112fa532e3d4be190d52bf3b11e0d4c3625a402))
-
-### [2.0.1](https://github.com/CorentinTh/it-tools/compare/v2.0.0...v2.0.1) (2022-04-16)
-
-
-### Features
-
-* **config:** added vercel.json ([2e046ad](https://github.com/CorentinTh/it-tools/commit/2e046ad09fed4a55bbf4449e3683a4150839c461))
-
-
-### Bug Fixes
-
-* remove duplicate property ([d066319](https://github.com/CorentinTh/it-tools/commit/d066319b45dee35df0212c7ff407013bd7449ae3))
-* **style:** url encode/decode layout ([34480b4](https://github.com/CorentinTh/it-tools/commit/34480b4e25ffc33536b03a0ba711c480219ad553))
-
-
-### Documentation
-
-* updated description ([70a3df0](https://github.com/CorentinTh/it-tools/commit/70a3df044ea86ac35c1839ac5ab624f694fdd845))
-
-
-### Refactors
-
-* clean imports ([724e142](https://github.com/CorentinTh/it-tools/commit/724e142222202798ea3df7d0fb34da1e7a5216a1))
-* lint fix ([a58ae24](https://github.com/CorentinTh/it-tools/commit/a58ae24d9409728ac12fb780f2c64643087de5be))
-* ref name ([5828085](https://github.com/CorentinTh/it-tools/commit/582808597c6aadf0feb48f6aae0a29b839e0dd54))
-
-## 2.0.0 (2022-04-16)
-
-
-### Features
-
-* **a11y:** aria-label on icon button ([5f50275](https://github.com/CorentinTh/it-tools/commit/5f502755d69ab21a78d9256db8a1c64f1ab82c2a))
-* added commit short sha ([668625c](https://github.com/CorentinTh/it-tools/commit/668625c6dab6e8b98f363df6c0aa3bf00a3afaa4))
-* added plausible tracker ([0808920](https://github.com/CorentinTh/it-tools/commit/0808920951b55c938537f33353a37ece96b04084))
-* added twitter link ([d126abc](https://github.com/CorentinTh/it-tools/commit/d126abc7b12a9fce778fe9883e44dca581509778))
-* footer in sider ([3f03850](https://github.com/CorentinTh/it-tools/commit/3f038503dd705ba3a5562a1e8f85a3b0e7d0be5b))
-* **layout:** menu category ([9c9be9e](https://github.com/CorentinTh/it-tools/commit/9c9be9e2e2e2c856d1af1df9d9d37a64460cd82b))
-* mobile friendly menu ([1e67fa6](https://github.com/CorentinTh/it-tools/commit/1e67fa6e0bede8c055d9e4cb9bf7f97423bc9bdf))
-* **navbar:** added github link ([d4e226e](https://github.com/CorentinTh/it-tools/commit/d4e226e09face78da794fa7e676eef85d05dde75))
-* **nav:** navigation tooltips ([b892f50](https://github.com/CorentinTh/it-tools/commit/b892f50cd633d42e6261be208bd077d92d336afb))
-* **page:** added 404 page ([3db4f91](https://github.com/CorentinTh/it-tools/commit/3db4f91c27a2ab37bb23d8feb77b6dffa9a92977))
-* **page:** home page layout ([57fd14a](https://github.com/CorentinTh/it-tools/commit/57fd14a199a253f49f3c53810490e5d31512b261))
-* persistent theme selection fallback to prefered theme ([40e9af0](https://github.com/CorentinTh/it-tools/commit/40e9af06cf28b7348152f8ec3898fa2b27ec0b21))
-* **router:** added legacy routes redirections ([dbce46b](https://github.com/CorentinTh/it-tools/commit/dbce46b470b0187a395cdd350a023641c6319582))
-* search-bar ([e8594de](https://github.com/CorentinTh/it-tools/commit/e8594de7b45102b8bc1cfb82d0839e3722d9c4c2))
-* **search:** round and clearable searchbar ([b112f5f](https://github.com/CorentinTh/it-tools/commit/b112f5f226c6b03151bbeb4fc607e449c444e667))
-* **seo:** added robots.txt and humans.txt ([cd9a3bc](https://github.com/CorentinTh/it-tools/commit/cd9a3bc9b10cf7363301e9a0d0b17f38ea640e0c))
-* **seo:** added title + description ([5f74037](https://github.com/CorentinTh/it-tools/commit/5f74037105c5e8efc5bdad2261597458cfcf26d3))
-* **seo:** pwa and icons ([b7193e8](https://github.com/CorentinTh/it-tools/commit/b7193e838ba83d0548211cff922e107a1f11f90f))
-* **share:** social image ([39746e0](https://github.com/CorentinTh/it-tools/commit/39746e07c53c22ac132ad2aaf25dd71bb6458cde))
-* **style:** dark mode ([3e92b7f](https://github.com/CorentinTh/it-tools/commit/3e92b7f1e04a709df231fce22801b55619e8faab))
-* **style:** theme overrides ([d542688](https://github.com/CorentinTh/it-tools/commit/d542688664cc9c675d1d26f4278a25f1b9e3f28d))
-* **tool:** add lch in color converter ([b5243c4](https://github.com/CorentinTh/it-tools/commit/b5243c43638f37a2d727b015bba61fab0d1b9fe9))
-* **tool:** added token generator ([40dec52](https://github.com/CorentinTh/it-tools/commit/40dec52c8467fd27eb8f3857ed72746ebaa4f509))
-* **tool:** base converter ([034c686](https://github.com/CorentinTh/it-tools/commit/034c686896d0443ea587cd152535b2227234c011))
-* **tool:** base64 string converter ([203b6a9](https://github.com/CorentinTh/it-tools/commit/203b6a9d73dcb30182b130de59920534e18b76b4))
-* **tool:** bip39-generator ([d55329f](https://github.com/CorentinTh/it-tools/commit/d55329f3abc3d3f8ad48def7d7f63b44cd768e27))
-* **tool:** bip39-generator ([765c010](https://github.com/CorentinTh/it-tools/commit/765c010700c07b2809daef0e7c694ac265ce9ddc))
-* **tool:** case converter ([7a7372d](https://github.com/CorentinTh/it-tools/commit/7a7372df191abc7ecd3fee7234d4de7aaaba03f6))
-* **tool:** color converter ([4e50b7a](https://github.com/CorentinTh/it-tools/commit/4e50b7a973e950819a52c127db2a754838cbbf8e))
-* **tool:** crontab generator ([358ff45](https://github.com/CorentinTh/it-tools/commit/358ff45ae1d9822b8a7c342515f668d25b7128b5))
-* **tool:** date-time converter ([2d9cb20](https://github.com/CorentinTh/it-tools/commit/2d9cb209b377326f4bf62067db7d5ad0c7eb7bde))
-* **tool:** encryption ([888ab2c](https://github.com/CorentinTh/it-tools/commit/888ab2cf378597e2880b6dd6a013f3bc192f2b1a))
-* **tool:** git memo ([5cd9997](https://github.com/CorentinTh/it-tools/commit/5cd9997a845f6d5f82d3ae74d3ec12603224517d))
-* **tool:** lorem ipsum generator ([5dcb2ed](https://github.com/CorentinTh/it-tools/commit/5dcb2ed95c318ea1c4134da207c844672d0fbbd8))
-* **tool:** qr-code generator ([5582d75](https://github.com/CorentinTh/it-tools/commit/5582d75927b560d9259929c787c0809634d1f8ae))
-* **tool:** random port generator ([7c540f1](https://github.com/CorentinTh/it-tools/commit/7c540f1208da749c3932aab8f2c392048c4546ae))
-* **tool:** roman-arabic numbers converter ([655019c](https://github.com/CorentinTh/it-tools/commit/655019cf23babcec2a2f1e03cac87744e3139304))
-* **tool:** text hash ([0f3b744](https://github.com/CorentinTh/it-tools/commit/0f3b7445ad1f945d9b364476147bf824ac309a6c))
-* **tool:** text statistics ([0a7c325](https://github.com/CorentinTh/it-tools/commit/0a7c3252e36a4769eedaaec4524b4ee2ae2b19c7))
-* **tool:** url encode/decode ([afac566](https://github.com/CorentinTh/it-tools/commit/afac5664c802c8480fe2c457bcfb7f5e26829cdf))
-* **tool:** uuid v4 generator ([3ae6114](https://github.com/CorentinTh/it-tools/commit/3ae61147a94791987e9e326b19063579976d8dc0))
-* **ux:** copyable input ([1859a9a](https://github.com/CorentinTh/it-tools/commit/1859a9a174010789dcd7ecefb2451e1de7b60b4c))
-
-
-### Bug Fixes
-
-* **hash-text:** added missing toString() ([4ca5fce](https://github.com/CorentinTh/it-tools/commit/4ca5fce911c3312d56bca1ffba863b2f37841c9e))
-* **hash-text:** correct copy message ([bab92ef](https://github.com/CorentinTh/it-tools/commit/bab92ef84f66372df40ce385c2949518ed158427))
-* removed global define ([889d594](https://github.com/CorentinTh/it-tools/commit/889d59499212a449ee460c68c480648e337a7ecb))
-* **style:** working dark mode persistence ([3ae8728](https://github.com/CorentinTh/it-tools/commit/3ae872847b00d65e4e2e629775d479a3333450f1))
-* **validation:** proper rules ([11d8110](https://github.com/CorentinTh/it-tools/commit/11d8110226e22e30ae16d297628c1d252a93be9e))
-
-
-### Refactors
-
-* better icon ([0af7d81](https://github.com/CorentinTh/it-tools/commit/0af7d81abd987aa5d1b0321c25a65131d978e929))
-* **clean:** removed extra console.log ([82606f6](https://github.com/CorentinTh/it-tools/commit/82606f6a477fce2041ab33adc7e95bcba4343e2b))
-* embeded sider scrollbar ([f872972](https://github.com/CorentinTh/it-tools/commit/f872972e69aeb4fde4c17f0c122ca3fd4aa1c56c))
-* icon sizes ([9bb7fc4](https://github.com/CorentinTh/it-tools/commit/9bb7fc47aa70bdc5083d0883f1496fac63f812ea))
-* menu option key ([390ef93](https://github.com/CorentinTh/it-tools/commit/390ef93232dc1b448022a0c09d36367adad9d221))
-* **page:** removed unused import ([f70fce6](https://github.com/CorentinTh/it-tools/commit/f70fce65e20989eb19b0f0976e756a43edf02e9d))
-* removed theme editor ([8559fbd](https://github.com/CorentinTh/it-tools/commit/8559fbd7744fe82b7702a5c0eb77a8d627c5a73d))
-* removed unused files ([c1e7669](https://github.com/CorentinTh/it-tools/commit/c1e76695e4a16b8312ab6031a1bdfb6368946677))
-* removed unused files ([8d9f924](https://github.com/CorentinTh/it-tools/commit/8d9f92417744a5fbd9b4108e851005f23de18b53))
-* **style:** cleaner layout ([1d09a01](https://github.com/CorentinTh/it-tools/commit/1d09a01bb25088493cc9b7f2cb7f8a8aa69ac9e9))
-* **style:** improve style for tool-card ([65a6896](https://github.com/CorentinTh/it-tools/commit/65a6896563d16f30420424e274bd306e3e9182c8))
-* **style:** label width ([fd4426d](https://github.com/CorentinTh/it-tools/commit/fd4426d246ada553528759f761c8192df85c0d44))
-* **style:** menu item height ([8951e87](https://github.com/CorentinTh/it-tools/commit/8951e87c143fda74be32bae5b28e009556d7086e))
-* **style:** menu scrollbar ([483cf66](https://github.com/CorentinTh/it-tools/commit/483cf66db992169d361487c8461938810793b978))
-* **style:** port display ([2632f24](https://github.com/CorentinTh/it-tools/commit/2632f24cc89af7dd12f7a0c1a8b58983a1bb78d8))
-* **style:** removed extra br ([b44539c](https://github.com/CorentinTh/it-tools/commit/b44539c1820defbaaa6dfe83a76c72982a641971))
-* **style:** replaced scss style block to less ([655d9d2](https://github.com/CorentinTh/it-tools/commit/655d9d22e3136bdf1dee29310ab04cf38596bdc8))
-* **style:** responsive layout ([2df3f53](https://github.com/CorentinTh/it-tools/commit/2df3f53b78bbe419763fd359788a4b0b5710e4b7))
-* **style:** updated linter config ([6b58ec5](https://github.com/CorentinTh/it-tools/commit/6b58ec554a0de91139f16d67cec42536d093d5fb))
-
-
-### Documentation
-
-* added new tool creation procedure ([8177883](https://github.com/CorentinTh/it-tools/commit/81778834e6a79725c42eae1772935682ce7580c6))
-* updated readme ([1134e0b](https://github.com/CorentinTh/it-tools/commit/1134e0b822edbc25ce9ff83007bf5d331a1becbd))

README.md

@@ -1,79 +1,3 @@
-![logo](.github/logo.png)
+# IT-Tools
 
-Useful tools for developer and people working in IT. [Have a look !](https://it-tools.tech).
+It-Tools v3 nuxt exploration branch
-
-## Functionalities and roadmap
-
-Please check the [issues](https://github.com/CorentinTh/it-tools/issues) to see if some feature listed to be implemented.
-
-You have an idea of a tool? Submit a [feature request](https://github.com/CorentinTh/it-tools/issues/new?assignees=corentinth&labels=&template=feature_request.md&title=)!
-
-## Contribute
-
-### Recommended IDE Setup
-
-[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).
-
-### Node version
-
-Ensure you have the correct node/npm version
-
-```sh
-nvm use
-```
-
-### Project Setup
-
-```sh
-npm install
-```
-
-#### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-#### Type-Check, Compile and Minify for Production
-
-```sh
-npm run build
-```
-
-#### Run Unit Tests with [Vitest](https://vitest.dev/)
-
-```sh
-npm run test
-```
-
-#### Lint with [ESLint](https://eslint.org/)
-
-```sh
-npm run lint
-```
-
-### Create a new tool
-
-To create a new tool, there is a script that generate the boilerplate of the new tool, simply run:
-
-```sh
-node scripts/create-tool.mjs my-tool-name
-```
-
-It will create a directory in `src/tools` with the correct files, and a the import in `src/tools/index.ts`. You will just need to add the inported tool in the proper category and develop the tool.
-
-## Credits
-
-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 [MIT license](LICENSE).

env.d.ts

@@ -1,14 +0,0 @@
-/// <reference types="vite/client" />
-/// <reference types="vite-svg-loader" />
-
-interface ImportMetaEnv {
-  VITE_PLAUSIBLE_API_HOST: string;
-  VITE_PLAUSIBLE_DOMAIN: string;
-  PACKAGE_VERSION: string;
-  GIT_SHORT_SHA: string;
-  PROD: boolean;
-}
-
-interface ImportMeta {
-  readonly env: ImportMetaEnv;
-}

index.html

@@ -1,38 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>IT Tools - Handy online tools for developers</title>
-    <meta itemprop="name" content="IT Tools - Handy online tools for developers" />
-    <meta name="description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
-    <meta itemprop="description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
-    <link rel="author" href="/humans.txt" />
-    <link rel=canonical href="https://it-tools.tech">
-    
-    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
-    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
-    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
-    <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#18a058" />
-    <meta name="msapplication-TileColor" content="#da532c" />
-    <meta name="theme-color" content="#ffffff" />
-
-    <meta property="og:url" content="https://it-tools.tech/" />
-    <meta property="og:type" content="website" />
-    <meta property="og:title" content="IT Tools - Handy online tools for developers" />
-    <meta property="og:description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
-    <meta property="og:image" content="/banner.png" />
-
-    <meta name="twitter:card" content="summary_large_image" />
-    <meta property="twitter:domain" content="it-tools.tech" />
-    <meta property="twitter:url" content="https://it-tools.tech/" />
-    <meta name="twitter:title" content="IT Tools - Handy online tools for developers" />
-    <meta name="twitter:description" content="Collection of handy online tools for developers, with great UX. IT Tools is a free and open-source collection of handy online tools for developers & people working in IT." />
-    <meta name="twitter:image" content="/banner.png" />
-  </head>
-  <body>
-    <div id="app"></div>
-    <script type="module" src="/src/main.ts"></script>
-  </body>
-</html>

locales/no.yml

@@ -0,0 +1,393 @@
+home:
+  categories:
+    newestTools: Nyeste verktøy
+    favoriteTools: 'Dine favoritt verktøy'
+    allTools: 'Alle verktøyene'
+  subtitle: 'Nyttige verktøy for utviklere'
+  toggleMenu: 'Vekslemenmy'
+  home: Hjem
+  uiLib: 'UI Bib'
+  support: 'Støtt utviklingen av IT-Tools'
+  buyMeACoffee: 'Kjøp en kaffe til meg'
+  follow:
+    title: 'Liker du it-tools?'
+    p1: 'Gi oss en stjerne på'
+    githubRepository: 'IT-Tools GitHub-depotet'
+    p2: 'eller følg oss på'
+    twitterAccount: 'IT-Tools sin twitter konto'
+    thankYou: 'Tusen takk!'
+  nav:
+    github: 'GitHub-depot'
+    githubRepository: 'IT-Tools GitHub-depot'
+    twitter: 'Twitter konto'
+    twitterAccount: 'IT Tools Twitter konto'
+    about: 'Om  IT-Tools'
+    aboutLabel: 'Om'
+    darkMode: 'Mørk modus'
+    lightMode: 'Lys modus'
+    mode: 'Veksle mørk/lys modus'
+about:
+  content: >
+    # Om IT-Tools
+
+    Denne vidunderlige nettsiden, laget med ❤ av [Corentin Thomasset](https://corentin.tech?utm_source=it-tools&utm_medium=about) , sammenstiller nyttige verktøy for utviklere og folk som jobber innen IT. Hvis du finner dette nyttig, Del det gjerne med andre som du tror kan få nytte av dette, og ikke glem å lage et bokmerke!
+
+    IT Tools er åpen kildekode (under MIT lisensen) og gratis, og det vil det alltid være, men det koster å drifte og å fornye domenet. Hvis du ønsker å støtte arbeidet mitt, og motivere meg til å legge til flere verktøy, gjerne støtt meg ved å [sponse meg](https://www.buymeacoffee.com/cthmsst).
+
+    ## Teknologier
+
+    IT Tools er laget i Vue.js (Vue 3) med Naive UI komponent bibliotektet og er hosted og kontinuerlig deployet av Vercel. Tredjeparts åpen-kildekode biblioteker er brukt i noen verktøy, du kan finne den komplette listen i [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) filen i depoet.
+
+    ## Funnet en feil? Et verktøy som mangler?
+
+    Hvis du trenger et verktøy som foreløpig ikke er tilgjengelig her, og du tenker det kan være nyttig for andre, så er du velkommen til å legge til en funksjonsforespørsel i [problem seksjonen](https://github.com/CorentinTh/it-tools/issues/new/choose) i github-depotet.
+
+    Og hvis du har funnet en feil, eller noe ikke oppfører seg som forventet, vennligst send inn en feilrapport i [problem seksjonen](https://github.com/CorentinTh/it-tools/issues/new/choose) i github-depotet.
+
+404:
+  notFound: '404 ikke funnet'
+  sorry: 'Beklager, denne siden ser ikke ut til å eksistere'
+  maybe: 'Kanskje informasjonskapslene oppfører seg rart, prøvd en tvungen oppfriskning?'
+  backHome: 'Tilbake til start'
+favoriteButton:
+  remove: 'Fjern fra favoritter'
+  add: 'Legg til favoritter'
+toolCard:
+  new: Ny
+search:
+  label: Søk
+tools:
+  categories:
+    favorite-tools: 'Dine favoritt verktøy'
+    crypto: Krypto
+    converter: Konvertering
+    web: Web
+    images and videos: 'Bilder & Videoer'
+    development: Utvikling
+    network: Nettverk
+    math: Matte
+    measurement: Måling
+    text: Tekst
+    data: Data
+
+  password-strength-analyser:
+    title: Analyseverktøy for passordstyrke
+    description: Oppdag styrken av passordet ditt med dette kun-klient-maskin passordstyrke analyse verktøyet og se den estimerte knekketiden.
+
+  chronometer:
+    title: Kronometer
+    description: Overvåk varigheten av noe. I bunn og grunn et kronometer med enkle funksjoner.
+
+  token-generator:
+    title: Token generator
+    description: Generer en tilfeldig streng med store og/eller små bokstaver, siffer og/eller symboler.
+
+    uppercase: Store bokstaver (ABC...)
+    lowercase: Små bokstaver (abc...)
+    numbers: Siffer (123...)
+    symbols: Symboler (!-;...)
+    length: Lengde
+    tokenPlaceholder: 'Tokenet...'
+    copied: Tokenet er kopiert til utklippstavlen.
+    button:
+      copy: Kopier
+      refresh: Oppfrisk
+  percentage-calculator:
+    title: Prosent kalkulator
+    description: Beregn enkelt prosenter fra en verdi til en annen, eller fra en prosent til en verdi.
+
+  svg-placeholder-generator:
+    title: SVG plassholder generator
+    description: Generer svg bilder til å bruke som plassholder i applikasjonen din.
+
+  json-to-csv:
+    title: JSON til CSV
+    description: Konverter JSON til CSV med automatisk oppdagelse av headeren.
+
+  camera-recorder:
+    title: Kameraopptak
+    description: Ta et bilde eller spill inn en video med webkamera eller kameraet ditt.
+
+  keycode-info:
+    title: Tastekode info
+    description: Finn javascript tastekode, kode, plassering og modifikatorer av hvilken som helst tast.
+
+  emoji-picker:
+    title: Emoji velger
+    description: Klipp og lim emojis og få unicode og kode verdien av hver emoji.
+
+  color-converter:
+    title: Farge konverter
+    description: Konverter farger mellom de forskjellige formatene (hex, rgb, hsl og css navn).
+
+  bcrypt:
+    title: Bcrypt
+    description: Hash og sammenlign tekst ved hjelp av bcrypt. Bcrypt er en passord-hashings funksjon basert på Blowfish cipher.
+
+  crontab-generator:
+    title: Crontab generator
+    description: Verifiser og generer crontab og få den mennesklig leselige beskrivelsen av cron timeplanen.
+
+  http-status-codes:
+    title: HTTP status koder
+    description: Liste over alle HTTP status koder, navnet dems, og betydningen.
+
+  sql-prettify:
+    title: SQL forskjønning and format
+    description: Formater og forskjønn SQL spørringene dine (den støtter forskjellige SQL dialekter).
+
+  benchmark-builder:
+    title: Bygg en referansemåler
+    description: Sammenlign enkelt kjøretiden av oppgaver med denne enkle referansemåls byggeren.
+
+  git-memo:
+    title: Git jukselapp
+    description: Git er en desentralisert versjons håndterings programvare. Med denne jukselappen vil du få kjapp tilgang til de vanligste kommandoene.
+
+  slugify-string:
+    title: Slugify streng
+    description: Lag en trygg url, filbane eller id.
+
+  encryption:
+    title: Krypter / decrypter tekst
+    description: Krypter klartekst og dekrypter ciphertekst ved bruk av krypteringsalgoritmer som AES, TripleDES, Rabbit eller RC4.
+
+  random-port-generator:
+    title: Tilfeldig port generator
+    description: Generer tilfeldige portnumre utenfor scopet av "kjente" porter (0-1023).
+
+  yaml-prettify:
+    title: YAML forskjønning og formatering
+    description: Forskjønn YAML strengene dine til et lettlest format.
+
+  eta-calculator:
+    title: ETA kalkulator
+    description: En ETA (Estimert Tid for Ankomst) kalkulator for å anslå den sannsynelige slutt tiden for en oppgave, for eksempel, slutttiden og varigheten av en filnedlastning.
+
+  roman-numeral-converter:
+    title: Romertall konverter
+    description: Konverter romertall til tall eller konverter tall til romertall.
+
+  hmac-generator:
+    title: Hmac generator
+    description: Beregn en hash-basert meldings authentiserings kode (HMAC) ved bruk av en hemmelig nøkkel og din foretrukne hashings funksjon.
+
+  bip39-generator:
+    title: BIP39 nøkkelords generator
+    description: Generer et BIP39 nøkkelord fra en eksisterende eller tilfeldig huskesetning, eller få ut en huskesetning fra nøkkelordet.
+
+  base64-file-converter:
+    title: Base64 fil konverter
+    description: Konverter en base64 streng til fil eller en fil, bilde til en base64 representasjon.
+
+  list-converter:
+    title: Liste konverterer
+    description: Dette verktøyet kan prosessere kolonnebasert data og foreta forskjellige endringer (transposering, legge til prefix og suffix, reversere lister, sortere lister, gjøre om til små bokstaver, trunkere verdier) på hver rad.
+
+  base64-string-converter:
+    title: Base64 string kode/dekoder
+    description: Enkelt kode eller dekode en tekststreng til base64 representasjonen av strengen.
+
+  toml-to-yaml:
+    title: TOML til YAML
+    description: Parser og konverter TOML til YAML.
+
+  math-evaluator:
+    title: Matematikkevaluator
+    description: En Kalkulator for å evaluere matematiske uttrykk. Du kan bruke funksjoner som sqrt, cos, sin, abs, etc.
+
+  json-to-yaml-converter:
+    title: JSON til YAML konverterer
+    description: Enkelt konverter JSON til YAML med dette verktøyet.
+
+  url-parser:
+    title: URL analyse
+    description: Parsere en URL ned til bestanddelene (protokoll, opprinnelse, parametre, port, brukernavn-passord, ...).
+
+  iban-validator-and-parser:
+    title: IBAN validering og analysering
+    description: Valider og parser IBAN numre. Sjekk om et IBAN er gyldig og få landet, BBAN, om det er en QR-IBAN og IBAN i et vennlig format.
+
+  user-agent-parser:
+    title: User-agent analysering
+    description: Detekter og parser nettleser, motor, OS, CPU, og enhet type/modell fra en user-agent tekst streng.
+
+  numeronym-generator:
+    title: Numeronym generator
+    description: Et numeronym er et ord hvor et nummer er brukt til å lage en forkortelse. For eksempel, "i18n" er et numeronym for "internasjonalisering" hvor 18 står for antall bokstaver mellom første bokstaven i og den siste bokstaven n i ordet.
+
+  case-converter:
+    title: Bokstavkonvertering
+    description: Formater bokstavene med store eller små bokstaver, samt andre format.
+
+  html-entities:
+    title: HTML streng rensing
+    description: Rens bort eller omsvøp HTML entiteter (erstatt tegn som <,>, &, " and \' med deres HTML versjon).
+
+  json-prettify:
+    title: JSON forskjønning og formatering
+    description: Forskjønn JSON strenger til et lettlest format.
+
+  docker-run-to-docker-compose-converter:
+    title: Docker run til Docker compose konverter
+    description: Konverter "docker run" kommandoer til docker-compose filer!
+
+  mac-address-lookup:
+    title: MAC address oppslagsverk
+    description: Finn forhandler og produsent basert på MAC adressen.
+
+  mime-types:
+    title: MIME typer
+    description: Konverter MIME typer til fil utvidelser og visa-versa.
+
+  toml-to-json:
+    title: TOML til JSON
+    description: Parser og konverter TOML til JSON.
+
+  lorem-ipsum-generator:
+    title: Lorem ipsum generator
+    description: Lorem ipsum er brukt som plassholder tekst, vanligvis brukt til å demonstrere den visuelle formen av et dokument eller font-type uten å måtte ha meningsfult innhold.
+
+  qrcode-generator:
+    title: QR Kode generator
+    description: Generer og last ned en QR kode til en URL (eller ren tekst), og tilpass bakgrunns og forgrunns farger.
+
+  wifi-qrcode-generator:
+    title: WiFi QR Kode generator
+    description: Generer og last ned QR koder for rask tilkobling til wifi nettverket.
+
+  xml-formatter:
+    title: XML formaterer
+    description: Forskjønn en XML streng til et lettlest format.
+
+  temperature-converter:
+    title: Temperatur konverter
+    description: Temperatur konversjoner mellom Kelvin, Celsius, Fahrenheit, Rankine, Delisle, Newton, Réaumur, og Rømer.
+
+  chmod-calculator:
+    title: Chmod kalkulator
+    description: Beregn chmod tillatelser og kommandoer med denne chmod kalkulatoren.
+
+  rsa-key-pair-generator:
+    title: RSA nøkkelpar generator
+    description: Generer et nytt tilfeldig RSA privat og offentlig pem sertifikat nøkkel par.
+
+  html-wysiwyg-editor:
+    title: HTML WYSIWYG editor
+    description: Online, funksjonsrik WYSIWYG HTML editor som genererer kildekoden for innholdet øyeblikkelig.
+
+  yaml-to-toml:
+    title: YAML til TOML
+    description: Parser og konverter YAML til TOML.
+
+  mac-address-generator:
+    title: MAC adresse generator
+    description: Sett inn antall og prefix. MAC addressene blir generert i ønsket format
+
+  json-diff:
+    title: JSON diff
+    description: Sammenlign to JSON objekter og finn forskjellene mellom dem.
+
+  jwt-parser:
+    title: JWT parser
+    description: Parse og dekode et JSON Web Token (jwt) og vis innholdet.
+
+  date-converter:
+    title: Dato-tid konverter
+    description: Konverter dato og tid til forskjellige formater.
+
+  phone-parser-and-formatter:
+    title: Telefon format og parserer
+    description: Parser, valider og formater telefon numre. få innformasjonen om telefon nummeret, slik som landskoden, type etc.
+
+  ipv4-subnet-calculator:
+    title: IPv4 subnet kalkulator
+    description: Parser IPv4 CIDR blokker of åf all info du trenger om subnettet.
+
+  og-meta-generator:
+    title: Open graph meta generator
+    description: Generer open-graph og SoMe HTML meta tagger til nettsiden din.
+
+  ipv6-ula-generator:
+    title: IPv6 ULA generator
+    description: Generer din egen lokale, ikke-rutbare IP adresse til nettverket ditt i henhold til RFC4193.
+
+  hash-text:
+    title: Hash tekst
+    description: 'Hash en tekst streng med en av algoritmene : MD5, SHA1, SHA256, SHA224, SHA512, SHA384, SHA3 eller RIPEMD160'
+
+  json-to-toml:
+    title: JSON til TOML
+    description: Parser og konverter JSON til TOML.
+
+  device-information:
+    title: Enhets informasjon
+    description: Få informasjon om din nåværende enhet (skjermstørrelse, piksel-forhold, user agent, etc.)
+
+  pdf-signature-checker:
+    title: PDF signatur sjekker
+    description: Bekreft signaturen til en PDF fil. En signert PDF fil inneholder en eller flere signaturer som kan bli brukt til å bestemme om en fil har blitt endret etter at den var signert.
+
+  json-minify:
+    title: JSON minifiser
+    description: Minifiser og komprimer JSON ved å fjerne unødvendige mellomrom.
+
+  ulid-generator:
+    title: ULID generator
+    description: Generer tilfeldig Universell Unik Leksikografisk Sorterbar Identifikator (ULID).
+
+  string-obfuscator:
+    title: Streng obfuskator
+    description: Obfusker en streng (som en hemmelighet, en IBAN, eller et token) og gjør den delbar og identifiserbar uten å vise innholdet.
+
+  base-converter:
+    title: Heltalls konverter
+    description: Konverter et heltall mellom forskjellige baser (desimal, hexadesimal, binær, oktal, base64, etc.)
+
+  yaml-to-json-converter:
+    title: YAML til JSON konverter
+    description: Konverterl YAML til JSON.
+
+  uuid-generator:
+    title: UUIDs generator
+    description: En universell Unik Identifikator (UUID) er et 128-bit nummer, brukt til å identifisere informasjon i datasystemer.
+
+  ipv4-address-converter:
+    title: IPv4 adresse konverter
+    description: Konverter en IPv4 adresse til desimal, binær, hexadesimal, eller en IPv6 representasjon.
+
+  text-statistics:
+    title: Tekst statistikk
+    description: Få informasjonen om en tekst, antall karakterer, antall ord, størrelsen i bytes, etc.
+
+  text-to-nato-alphabet:
+    title: Tekst til NATO alfabetet
+    description: Transformer teksten til det NATO fonetiske alfabetet for muntlig gjengivelse.
+
+  basic-auth-generator:
+    title: Basic auth generator
+    description: Generer en base64 basic auth header fra et brukernavn og passord.
+
+  text-to-unicode:
+    title: Tekst til Unicode
+    description: Parser og konverter tekst til unicode og visa-versa
+
+  ipv4-range-expander:
+    title: IPv4 range utvider
+    description: Gitt en start og en slutt IPv4 adresse, kalkulerer dette verktøyet et gyldig IPv4 subnet sammen med sin CIDR notasjon.
+
+  text-diff:
+    title: Tekst diff
+    description: Sammenlign to tekster og vis forskjellen mellom dem.
+
+  otp-generator:
+    title: OTP kode generator
+    description: Generer og valider tidsbasert OTP (one time password) for multi-faktor autentisering.
+
+  url-encoder:
+    title: Kode/dekode URL-formaterte strenger
+    description: Kode tekst til URL-kodet format (også kjent som "prosent-kodet"), eller dekode fra det.
+
+  text-to-binary:
+    title: Tekst til ASCII binært
+    description: Konverter tekst til sin ASCII binære representasjon og visa-versa.

package.json

@@ -1,71 +1,16 @@
 {
-  "name": "it-tools",
+  "name": "@it-tools/root",
-  "version": "2.4.2",
+  "version": "0.0.0",
+  "description": "IT Tools monorepo root",
+  "packageManager": "pnpm@9.12.2",
+
   "scripts": {
-    "dev": "vite",
+    "dev": "pnpm -F @it-tools/app dev"
-    "build": "vue-tsc --noEmit && vite build",
-    "preview": "vite preview --port 5050",
-    "test": "npm run test:unit",
-    "test:unit": "vitest --environment jsdom",
-    "coverage": "vitest run --coverage",
-    "typecheck": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
-    "lint": "eslint src --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --ignore-path .gitignore",
-    "release": "standard-version"
   },
-  "dependencies": {
+  "keywords": [],
-    "@it-tools/bip39": "^0.0.4",
+  "author": "Corentin Thomasset <corentinth@proton.me> (https://corentin.tech)",
-    "@vicons/material": "^0.12.0",
+  "repository": {
-    "@vicons/tabler": "^0.12.0",
+    "type": "git",
-    "@vueuse/core": "^8.2.1",
+    "url": "https://github.com/CorentinTh/it-tools"
-    "@vueuse/head": "^0.7.5",
-    "bcryptjs": "^2.4.3",
-    "change-case": "^4.1.2",
-    "colord": "^2.9.2",
-    "cron-validator": "^1.3.1",
-    "cronstrue": "^2.2.0",
-    "crypto-js": "^4.1.1",
-    "date-fns": "^2.28.0",
-    "figue": "^1.1.0",
-    "highlight.js": "^11.5.1",
-    "lodash": "^4.17.21",
-    "naive-ui": "^2.28.0",
-    "pinia": "^2.0.11",
-    "plausible-tracker": "^0.3.5",
-    "qrcode": "^1.5.0",
-    "randombytes": "^2.1.0",
-    "uuid": "^8.3.2",
-    "vue": "^3.2.31",
-    "vue-router": "^4.0.12"
-  },
-  "devDependencies": {
-    "@rushstack/eslint-patch": "^1.1.0",
-    "@types/bcryptjs": "^2.4.2",
-    "@types/crypto-js": "^4.1.1",
-    "@types/jsdom": "^16.2.14",
-    "@types/node": "^16.11.25",
-    "@types/qrcode": "^1.4.2",
-    "@types/randombytes": "^2.0.0",
-    "@types/uuid": "^8.3.4",
-    "@vitejs/plugin-vue": "^2.2.2",
-    "@vitejs/plugin-vue-jsx": "^1.3.7",
-    "@vue/eslint-config-prettier": "^7.0.0",
-    "@vue/eslint-config-typescript": "^10.0.0",
-    "@vue/test-utils": "^2.0.0-rc.18",
-    "@vue/tsconfig": "^0.1.3",
-    "c8": "^7.11.0",
-    "eslint": "^8.5.0",
-    "eslint-plugin-vue": "^8.2.0",
-    "jsdom": "^19.0.0",
-    "less": "^4.1.2",
-    "prettier": "^2.6.2",
-    "standard-version": "^9.3.2",
-    "start-server-and-test": "^1.14.0",
-    "typescript": "~4.5.5",
-    "vite": "^2.9.1",
-    "vite-plugin-md": "^0.12.4",
-    "vite-plugin-pwa": "^0.11.13",
-    "vite-svg-loader": "^3.2.0",
-    "vitest": "^0.5.0",
-    "vue-tsc": "^0.31.4"
   }
 }

packages/app/.gitignore

@@ -0,0 +1,24 @@
+# Nuxt dev/build outputs
+.output
+.data
+.nuxt
+.nitro
+.cache
+dist
+
+# Node dependencies
+node_modules
+
+# Logs
+logs
+*.log
+
+# Misc
+.DS_Store
+.fleet
+.idea
+
+# Local env files
+.env
+.env.*
+!.env.example

packages/app/README.md

@@ -0,0 +1,75 @@
+# Nuxt Minimal Starter
+
+Look at the [Nuxt documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+
+## Setup
+
+Make sure to install dependencies:
+
+```bash
+# npm
+npm install
+
+# pnpm
+pnpm install
+
+# yarn
+yarn install
+
+# bun
+bun install
+```
+
+## Development Server
+
+Start the development server on `http://localhost:3000`:
+
+```bash
+# npm
+npm run dev
+
+# pnpm
+pnpm dev
+
+# yarn
+yarn dev
+
+# bun
+bun run dev
+```
+
+## Production
+
+Build the application for production:
+
+```bash
+# npm
+npm run build
+
+# pnpm
+pnpm build
+
+# yarn
+yarn build
+
+# bun
+bun run build
+```
+
+Locally preview production build:
+
+```bash
+# npm
+npm run preview
+
+# pnpm
+pnpm preview
+
+# yarn
+yarn preview
+
+# bun
+bun run preview
+```
+
+Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.

packages/app/app.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import CommandPalette from './src/modules/command-palette/components/command-palette.vue';
+</script>
+
+<template>
+  <NuxtLayout>
+    <CommandPalette />
+    <NuxtPage />
+  </NuxtLayout>
+</template>

packages/app/assets/css/tailwind.css

@@ -0,0 +1,77 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+
+@layer base {
+  :root {
+    --background: 0 0% 98%;
+    --foreground: 240 10% 3.9%;
+  
+    --card: 0 0% 100%;
+    --card-foreground: 240 10% 3.9%;
+  
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 3.9%;
+  
+    --primary: 95 71% 68%;
+    --primary-foreground: 240 10% 3.9%;
+  
+    --secondary: 240 4.8% 95.9%;
+    --secondary-foreground: 240 5.9% 10%;
+  
+    --muted: 240 4.8% 95.9%;
+    --muted-foreground: 240 3.8% 46.1%;
+  
+    --accent: 240 4.8% 95.9%;
+    --accent-foreground: 240 5.9% 10%;
+  
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+  
+    --border:240 5.9% 90%;
+    --input:240 5.9% 90%;
+    --ring:240 5.9% 10%;
+    --radius: 0.5rem;
+  }
+   
+  .dark {
+    --background:240 4% 10%;
+    --foreground:0 0% 98%;
+  
+    --card: 240 5% 8%;
+    --card-foreground:0 0% 98%;
+  
+    --popover:240 10% 3.9%;
+    --popover-foreground:0 0% 98%;
+  
+    --primary: 83 79% 55%;
+    --primary-foreground:240 5.9% 10%;
+  
+    --secondary:240 3.7% 15.9%;
+    --secondary-foreground:0 0% 98%;
+  
+    --muted:240 3.7% 15.9%;
+    --muted-foreground:240 5% 64.9%;
+  
+    --accent:240 3.7% 15.9%;
+    --accent-foreground:0 0% 98%;
+  
+    --destructive:0 62.8% 30.6%;
+    --destructive-foreground:0 0% 98%;
+  
+    --border:240 3.7% 15.9%;
+    --input:240 3.7% 15.9%;
+    --ring:240 4.9% 83.9%;
+  }
+}
+
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+} 

packages/app/components.json

@@ -0,0 +1,19 @@
+{
+  "$schema": "https://shadcn-vue.com/schema.json",
+  "style": "new-york",
+  "typescript": true,
+  "tsConfigPath": ".nuxt/tsconfig.json",
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "assets/css/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "framework": "nuxt",
+  "aliases": {
+    "components": "@/src/modules/ui/components",
+    "ui": "@/src/modules/ui/components",
+    "utils": "@/src/modules/shared/style/cn"
+  }
+}

packages/app/eslint.config.js

@@ -0,0 +1,23 @@
+import antfu from '@antfu/eslint-config';
+
+export default antfu({
+  stylistic: {
+    semi: true,
+  },
+
+  vue: true,
+
+  rules: {
+    // To allow export on top of files
+    'ts/no-use-before-define': ['error', { allowNamedExports: true, functions: false }],
+    'curly': ['error', 'all'],
+    'vitest/consistent-test-it': ['error', { fn: 'test' }],
+    'ts/consistent-type-definitions': ['error', 'type'],
+    'style/brace-style': ['error', '1tbs', { allowSingleLine: false }],
+    'unused-imports/no-unused-vars': ['error', {
+      argsIgnorePattern: '^_',
+      varsIgnorePattern: '^_',
+      caughtErrorsIgnorePattern: '^_',
+    }],
+  },
+});

packages/app/i18n.config.ts

@@ -0,0 +1,5 @@
+export default defineI18nConfig(() => ({
+  legacy: false,
+  locale: 'en',
+  fallbackLocale: 'en',
+}));

packages/app/nuxt.config.ts

@@ -0,0 +1,60 @@
+import toolsModule from './src/modules/tools/modules/tools.modules';
+
+// https://nuxt.com/docs/api/configuration/nuxt-config
+export default defineNuxtConfig({
+  compatibilityDate: '2024-04-03',
+  devtools: { enabled: true },
+
+  extends: [
+    'src/modules/app',
+  ],
+
+  modules: [
+    '@nuxtjs/tailwindcss',
+    'shadcn-nuxt',
+    '@nuxt/fonts',
+    '@nuxt/icon',
+    '@vueuse/nuxt',
+    '@nuxtjs/color-mode',
+    toolsModule, // Must be imported before i18n
+    '@nuxtjs/i18n',
+    '@nuxtjs/seo',
+    '@pinia/nuxt',
+  ],
+
+  site: {
+    url: 'https://it-tools.tech',
+    name: 'IT Tools',
+    description: 'The open-source collection of handy online tools to help developers in their daily life.',
+  },
+
+  fonts: {
+    provider: 'bunny',
+    defaults: {
+      weights: [400, 500, 600, 700, 800],
+    },
+  },
+
+  colorMode: {
+    preference: 'system',
+    fallback: 'dark',
+    classSuffix: '',
+    storage: 'cookie',
+    storageKey: 'itts-color-mode',
+  },
+
+  i18n: {
+    strategy: 'prefix',
+    vueI18n: './i18n.config.ts',
+    defaultLocale: 'en',
+    langDir: './src/locales',
+    locales: [
+      { code: 'en', file: 'en.yaml', name: 'English' },
+      { code: 'fr', file: 'fr.yaml', name: 'Français' },
+    ],
+  },
+
+  experimental: {
+    scanPageMeta: false, // Causes some issues with layouts and hook-registered pages
+  },
+});

packages/app/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@it-tools/app",
+  "type": "module",
+  "private": true,
+  "packageManager": "pnpm@9.15.1",
+  "scripts": {
+    "dev": "nuxt dev",
+    "build": "nuxt build",
+    "build:cloudflare-pages": "nuxt build --preset cloudflare_pages",
+    "generate": "nuxt generate",
+    "preview": "nuxt preview",
+    "postinstall": "nuxt prepare",
+    "lint": "eslint .",
+    "lint:fix": "eslint --fix .",
+    "test": "pnpm run test:unit",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest watch",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@corentinth/chisels": "^1.1.0",
+    "@nuxt/fonts": "^0.10.3",
+    "@nuxt/icon": "^1.10.3",
+    "@nuxtjs/color-mode": "^3.5.2",
+    "@nuxtjs/i18n": "^8.5.6",
+    "@nuxtjs/seo": "2.0.0-rc.23",
+    "@pinia/nuxt": "^0.5.5",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "lodash-es": "^4.17.21",
+    "lucide-vue-next": "^0.453.0",
+    "nuxt": "^3.15.0",
+    "radix-vue": "^1.9.11",
+    "shadcn-nuxt": "^0.10.4",
+    "tailwind-merge": "^2.6.0",
+    "tailwindcss-animate": "^1.0.7",
+    "vue": "latest",
+    "vue-router": "latest"
+  },
+  "devDependencies": {
+    "@antfu/eslint-config": "^3.12.1",
+    "@nuxtjs/tailwindcss": "^6.12.2",
+    "@tailwindcss/typography": "^0.5.15",
+    "@types/lodash-es": "^4.17.12",
+    "@vueuse/core": "^11.3.0",
+    "@vueuse/nuxt": "^11.3.0",
+    "eslint": "^9.17.0",
+    "typescript": "^5.7.2",
+    "vitest": "^2.1.8"
+  }
+}

packages/app/public/humans.txt

@@ -1,4 +1,4 @@
 /* TEAM */
 Developer: Corentin Thomasset
-Site: https://github.com/CorentinTh
+Site: https://corentin.tech
 Twitter: @cthmsst

packages/app/server/tsconfig.json

@@ -0,0 +1,3 @@
+{
+  "extends": "../.nuxt/tsconfig.server.json"
+}

packages/app/src/locales/en.yaml

@@ -0,0 +1,41 @@
+app:
+  title: IT-Tools
+  description: The open-source collection of handy online tools to help developers in their daily life.
+home:
+  all-the-tools: All the tools
+  search-tools: Search for a tool
+  open-source: Open Source
+  free: Free
+  self-hostable: Self-hostable
+  open-tool: Open tool
+footer:
+  resources:
+    title: Resources
+    all-tools: All the tools
+    github: GitHub repository
+    support: Support IT-Tools
+    license: License
+  support:
+    title: Support
+    report-bug: Report a bug
+    request-feature: Request a feature
+    contribute: Contribute to the project
+    contact: Contact me
+  friends:
+    title: Friends
+tools:
+  token-generator:
+    title: Token Generator
+    description: >-
+      Generate random string with the characters you want, uppercase, lowercase
+      letters, numbers and/or symbols.
+    placeholder: Generated token will appear here, please select at least one option.
+    use-uppercase: Include uppercase letters
+    use-lowercase: Include lowercase letters
+    use-numbers: Include numbers
+    use-symbols: Include symbols
+    exclude-similar: Exclude similar characters
+    length: Length
+    refresh: Refresh token
+    quantity: Quantity
+    format: Format

packages/app/src/locales/fr.yaml

@@ -0,0 +1,29 @@
+app:
+  title: IT-Tools
+  description: La collection open-source d'outils en ligne pour aider les devs dans leur vie quotidienne.
+home:
+  all-the-tools: Tous les outils
+  search-tools: Rechercher un outil
+  open-source: Open Source
+  free: Gratuit
+  self-hostable: Self-hostable
+  open-tool: Ouvrir l'outil
+footer:
+  resources:
+    title: Ressources
+    all-tools: Tous les outils
+    github: Dépôt GitHub
+    support: Soutenir IT-Tools
+    license: Licence
+  support:
+    title: Support
+    report-bug: Signaler un bug
+    request-feature: Demander une fonctionnalité
+    contribute: Contribuer au projet
+    contact: Me contacter
+  friends:
+    title: Ami·e·s
+tools:
+  token-generator:
+    title: Générateur de token
+    description: Générer des chaines de caractères aléatoires, contrôlez les caractères que vous voulez, lettres majuscules, minuscules, chiffres et/ou symboles.

packages/app/src/modules/app/components/app-footer.vue

@@ -0,0 +1,116 @@
+<script setup>
+const localePath = useLocalePath();
+const { t } = useI18n();
+
+const sections = computed(() => [
+  {
+    title: t('footer.resources.title'),
+    items: [
+      { label: t('footer.resources.all-tools'), to: localePath('/tools') },
+      { label: t('footer.resources.github'), href: 'https://github.com/CorentinTh/it-tools' },
+      { label: t('footer.resources.support'), href: 'https://buymeacoffee.com/cthmsst' },
+      { label: 'Humans.txt', href: '/humans.txt' },
+      { label: t('footer.resources.license'), href: 'https://github.com/CorentinTh/it-tools/blob/main/LICENSE' },
+    ],
+  },
+  {
+    title: t('footer.support.title'),
+    items: [
+      { label: t('footer.support.report-bug'), href: 'https://github.com/CorentinTh/it-tools/issues/new/choose' },
+      { label: t('footer.support.request-feature'), href: 'https://github.com/CorentinTh/it-tools/issues/new/choose' },
+      { label: t('footer.support.contribute'), href: 'https://github.com/CorentinTh/it-tools/blob/main/CONTRIBUTING.md' },
+      { label: t('footer.support.contact'), href: 'https://github.com/CorentinTh/it-tools/issues/new/choose' },
+    ],
+  },
+  {
+    title: t('footer.friends.title'),
+    items: [
+      { label: 'Jugly.io', href: 'https://jugly.io' },
+      { label: 'Enclosed.cc', href: 'https://enclosed.cc' },
+    ],
+  },
+
+]);
+
+const socialLinks = [
+  {
+    icon: 'i-tabler-brand-github',
+    href: 'https://github.com/CorentinTh/it-tools',
+    label: 'GitHub',
+  },
+  {
+    icon: 'i-tabler-brand-x',
+    href: 'https://x.com/ittoolsdottech',
+    label: 'X',
+  },
+  {
+    icon: 'i-tabler-coffee',
+    href: 'https://buymeacoffee.com/cthmsst',
+    label: 'Support the project',
+  },
+];
+</script>
+
+<template>
+  <footer class="light:bg-muted/50 dark:bg-black/20 mt-12">
+    <div class="py-12 px-6 max-w-screen-xl mx-auto ">
+      <div class="flex items-start justify-between flex-col md:flex-row gap-12">
+        <div>
+          <div class="flex items-center gap-2">
+            <NuxtLink :to="localePath('/')" class="text-2xl font-semibold border-b border-transparent hover:no-underline h-auto py-0 px-1 ml--1 rounded-none !transition-border-color-250 group text-muted-foreground flex items-center gap-1">
+              <span class="font-bold group-hover:text-foreground transition">IT</span>
+              <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 pt-0.5 ml-1 group-hover:text-primary transition">TOOLS</span>
+            </NuxtLink>
+          </div>
+
+          <div class="flex items-center gap-2 mt-4">
+            <!-- {socialLinks.map(({ icon, href, label }) => (
+            <a href="{href}" target="_blank" rel="noopener noreferrer" class="text-2xl text-muted-foreground hover:text-primary transition" aria-label="{label}">
+              <div class="{icon}" />
+            </a>
+            ))} -->
+            <a
+              v-for="socialLink in socialLinks" :key="socialLink.label" :href="socialLink.href" target="_blank" rel="noopener noreferrer" class="text-2xl text-muted-foreground hover:text-primary transition" :aria-label="socialLink.label"
+            >
+              <Icon :name="socialLink.icon" />
+            </a>
+          </div>
+
+          <div class="text-muted-foreground mt-2">
+            Crafted on Earth by
+            <a href="https://corentin.tech" target="_blank" rel="noopener" class="hover:text-primary transition">
+              Corentin Thomasset
+            </a>
+          </div>
+        </div>
+
+        <div class="grid grid-cols-1 sm:grid-cols-3 gap-12">
+          <div v-for="section in sections" :key="section.title">
+            <h4 class="font-semibold text-foreground">
+              {{ section.title }}
+            </h4>
+            <ul class="mt-4">
+              <li v-for="item in section.items" :key="item.label" class="mt-1">
+                <NuxtLink v-if="item.to" :to="localePath(item.to)" class="text-muted-foreground hover:text-primary transition">
+                  {{ item.label }}
+                </NuxtLink>
+                <a v-else :href="item.href" target="_blank" rel="noopener" class="text-muted-foreground hover:text-primary transition">
+                  {{ item.label }}
+                </a>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+
+      <div class="text-xs text-muted-foreground border-t border-border pt-4 mt-12">
+        <span>
+          &copy;
+          {{ new Date().getFullYear() }}
+          Corentin Thomasset
+        </span>
+      </div>
+      <div class="text-xs text-foreground opacity-80%" />
+    </div>
+  </footer>
+</template>

packages/app/src/modules/app/components/app-header.vue

@@ -0,0 +1,52 @@
+<script setup>
+import { Button } from '@/src/modules/ui/components/button';
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/src/modules/ui/components/dropdown-menu';
+import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
+
+const { openCommandPalette } = useCommandPaletteStore();
+
+const colorMode = useColorMode();
+</script>
+
+<template>
+  <div class="w-full flex items-center justify-between">
+    <div>
+      <Button variant="outline" class="sm:pr-12 md:pr-24 text-muted-foreground hidden sm:flex" @click="openCommandPalette">
+        <Icon name="i-tabler-search" class="mr-2 size-4" />
+        {{ $t('home.search-tools') }}
+      </Button>
+    </div>
+
+    <div class="flex items-center gap-0.5">
+      <Button variant="ghost" size="icon" class="sm:hidden" @click="openCommandPalette">
+        <Icon name="i-tabler-search" class="size-5" />
+      </Button>
+
+      <LocalePicker />
+
+      <DropdownMenu>
+        <DropdownMenuTrigger as-child>
+          <Button variant="ghost">
+            <Icon v-if="colorMode.value === 'dark'" name="i-tabler-moon" class="size-5" />
+            <Icon v-else name="i-tabler-sun" class="size-5" />
+            <Icon name="i-tabler-chevron-down" class="ml-1 text-muted-foreground" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent align="end">
+          <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'light' }" @click="colorMode.preference = 'light'">
+            <Icon name="i-tabler-sun" class="mr-2 size-4" />
+            Light
+          </DropdownMenuItem>
+          <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'dark' }" @click="colorMode.preference = 'dark'">
+            <Icon name="i-tabler-moon" class="mr-2 size-4" />
+            Dark
+          </DropdownMenuItem>
+          <DropdownMenuItem class="cursor-pointer" :class="{ 'font-bold': colorMode.preference === 'system' }" @click="colorMode.preference = 'system'">
+            <Icon name="i-tabler-device-laptop" class="mr-2 size-4" />
+            System
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  </div>
+</template>

packages/app/src/modules/app/components/grid-background.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+const props = withDefaults(defineProps<{ fadeBottom?: boolean; faderClass?: string }>(), { fadeBottom: true });
+</script>
+
+<template>
+  <div class="w-full bg-[linear-gradient(to_right,#80808010_1px,transparent_1px),linear-gradient(to_bottom,#80808010_1px,transparent_1px)] bg-[size:48px_48px] pt-20">
+    <slot />
+
+    <div v-if="props.fadeBottom" class="bg-gradient-to-t from-background to-transparent h-24 mt-24" :class="props.faderClass" />
+  </div>
+</template>

packages/app/src/modules/app/components/locale-picker.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Button } from '../../ui/components/button';
+import { DropdownMenu } from '../../ui/components/dropdown-menu';
+import DropdownMenuContent from '../../ui/components/dropdown-menu/DropdownMenuContent.vue';
+import DropdownMenuItem from '../../ui/components/dropdown-menu/DropdownMenuItem.vue';
+import DropdownMenuTrigger from '../../ui/components/dropdown-menu/DropdownMenuTrigger.vue';
+
+const { locale, locales, setLocale } = useI18n();
+</script>
+
+<template>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <slot>
+        <Button variant="ghost" aria-label="Change language">
+          <Icon name="i-tabler-language" class="size-5 mr-1" />
+          <Icon name="i-tabler-chevron-down" class="text-muted-foreground" />
+        </Button>
+      </slot>
+    </DropdownMenuTrigger>
+
+    <DropdownMenuContent align="end">
+      <DropdownMenuItem
+        v-for="({ name, code }) in locales"
+        :key="code"
+        class="cursor-pointer"
+        :class="{ 'font-bold': locale === code }"
+        @click="setLocale(code)"
+      >
+        {{ name }}
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+</template>

packages/app/src/modules/app/components/sidenav-menu.vue

@@ -0,0 +1,28 @@
+<script setup>
+import { Button } from '@/src/modules/ui/components/button';
+import { useToolsStore } from '../../tools/tools.store';
+
+const toolStore = useToolsStore();
+const localePath = useLocalePath();
+</script>
+
+<template>
+  <div class="border-b h-[60px] flex items-center justify-between px-6">
+    <NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
+      <span class="font-bold text-foreground">IT</span>
+      <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
+    </NuxtLink>
+  </div>
+
+  <div class="pt-4 px-3 flex flex-col gap-0.5">
+    <NuxtLink to="/" class="py-1.5 px-3 flex items-center text-muted-foreground hover:text-foreground transition hover:bg-muted rounded-lg">
+      <Icon name="i-tabler-home" class="mr-2 size-4" />
+      Home
+    </NuxtLink>
+
+    <NuxtLink v-for="tool in toolStore.tools" :key="tool.key" class="py-1.5 px-3 flex items-center text-muted-foreground hover:text-foreground transition hover:bg-muted rounded-lg" :to="tool.path" exact-active-class="bg-secondary !text-foreground">
+      <Icon :name="tool.icon" class="mr-2 size-4" />
+      {{ tool.title }}
+    </NuxtLink>
+  </div>
+</template>

packages/app/src/modules/app/layouts/default.vue

@@ -0,0 +1,27 @@
+<script setup>
+import { Button } from '@/src/modules/ui/components/button';
+import { useToolsStore } from '../../tools/tools.store';
+
+const localePath = useLocalePath();
+</script>
+
+<template>
+  <div class="w-full min-h-screen text-sm relative font-sans flex flex-col">
+    <div class="h-[60px] border-b">
+      <div class="max-w-screen-xl mx-auto py-2 px-6 w-full flex items-center gap-4 h-full">
+        <NuxtLink variant="link" class="text-xl font-semibold border-b border-transparent hover:no-underline h-auto px-1 rounded-none !transition-border-color-250" :as="Button" :to="localePath('/')" aria-label="Home">
+          <span class="font-bold text-foreground">IT</span>
+          <span class="text-[80%] font-extrabold border-[2px] leading-none border-current rounded-md px-1 py-0.5 ml-1.5 text-primary">TOOLS</span>
+        </NuxtLink>
+
+        <app-header />
+      </div>
+    </div>
+
+    <div class="flex-1 pb-6">
+      <slot />
+    </div>
+
+    <app-footer />
+  </div>
+</template>

packages/app/src/modules/app/layouts/sidenav.vue

@@ -0,0 +1,36 @@
+<script setup>
+import { Button } from '../../ui/components/button';
+import { Sheet, SheetContent, SheetTrigger } from '../../ui/components/sheet';
+</script>
+
+<template>
+  <div class="w-full min-h-screen text-sm relative font-sans flex flex-row">
+    <div class="w-64 border-r bg-white dark:bg-background shrink-0 hidden sm:block">
+      <sidenav-menu />
+    </div>
+    <div class="flex-1 flex flex-col">
+      <div class="border-b h-[60px] flex items-center justify-between px-6 bg-white dark:bg-background">
+        <div class="flex items-center gap-4">
+          <div class="sm:hidden">
+            <Sheet>
+              <SheetTrigger>
+                <Button variant="ghost" size="icon">
+                  <Icon name="i-tabler-menu-2" class="size-5" />
+                </Button>
+              </SheetTrigger>
+              <SheetContent side="left" class="p-0 text-sm">
+                <sidenav-menu />
+              </SheetContent>
+            </Sheet>
+          </div>
+        </div>
+
+        <app-header />
+      </div>
+
+      <div class="flex-1">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>

packages/app/src/modules/app/pages/[...404].vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { Button } from '@/src/modules/ui/components/button';
+
+const localePath = useLocalePath();
+</script>
+
+<template>
+  <div class="flex justify-center text-center mt-24">
+    <div>
+      <h1 class="text-3xl font-light text-muted-foreground">
+        404
+      </h1>
+      <h2 class="font-semibold text-lg my-2">
+        Page not found
+      </h2>
+
+      <p class="text-muted-foreground">
+        The page you are looking for does not seem to exist.
+      </p>
+
+      <p class="text-muted-foreground">
+        Please check the URL and try again.
+      </p>
+
+      <Button as-child variant="secondary" class="mt-4">
+        <NuxtLink :to="localePath('/')">
+          <Icon name="i-tabler-arrow-left" class="mr-2 size-4" />
+
+          Go back home
+        </NuxtLink>
+      </Button>
+    </div>
+  </div>
+</template>

packages/app/src/modules/app/pages/about.vue

@@ -0,0 +1,3 @@
+<template>
+  TODO
+</template>

packages/app/src/modules/app/pages/index.vue

@@ -0,0 +1,74 @@
+<script setup>
+import { Badge } from '@/src/modules/ui/components/badge';
+import { Button } from '@/src/modules/ui/components/button';
+import { useCommandPaletteStore } from '../../command-palette/command-palette.store';
+import { useToolsStore } from '../../tools/tools.store';
+import Card from '../../ui/components/card/Card.vue';
+
+const { tools } = useToolsStore();
+const { openCommandPalette } = useCommandPaletteStore();
+</script>
+
+<template>
+  <grid-background>
+    <div class="flex gap-24 mx-auto justify-center pb-8 mt-8 items-center px-6">
+      <div class="max-w-xl">
+        <div class="flex gap-2">
+          <Badge class="text-primary bg-primary/10 hover:bg-primary/10 shadow-none">
+            {{ $t('home.open-source') }}
+          </Badge>
+          <Badge class="text-primary bg-primary/10 hover:bg-primary/10 shadow-none">
+            {{ $t('home.free') }}
+          </Badge>
+          <Badge class="text-primary bg-primary/10 hover:bg-primary/10 shadow-none">
+            {{ $t('home.self-hostable') }}
+          </Badge>
+        </div>
+
+        <h1 class="text-5xl font-semibold border-b border-transparent hover:no-underline h-auto py-0 px-1 ml--1 rounded-none !transition-border-color-250 my-6">
+          <span class="font-bold ">IT</span>
+          <span class="text-[90%] text-primary font-extrabold border-[5px] leading-none border-current rounded-xl px-2 py-0.5 ml-3">TOOLS</span>
+        </h1>
+
+        <p class="text-xl text-gray-400 mb-4">
+          {{ $t('app.description') }}
+        </p>
+
+        <div class="flex gap-4">
+          <Button>
+            {{ $t('home.all-the-tools') }}
+            <Icon name="i-tabler-arrow-right" class="ml-2 size-4" />
+          </Button>
+
+          <Button variant="outline" @click="openCommandPalette">
+            <Icon name="i-tabler-search" class="mr-2 size-4" />
+            {{ $t('home.search-tools') }}
+          </Button>
+        </div>
+      </div>
+
+      <div class="relative hidden sm:block">
+        <div class="absolute top-4 left-0 w-full h-full flex items-center justify-center blur-2xl rounded-full opacity-20 bg-gradient-to-br from-primary to-transparent" />
+        <Icon name="i-tabler-terminal" class="text-9xl text-primary m-8" />
+      </div>
+    </div>
+  </grid-background>
+
+  <div class="max-w-screen-xl mx-auto px-6">
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-12">
+      <NuxtLink v-for="tool in tools" :key="tool.key" :to="tool.path">
+        <Card class="p-6 h-full cursor-pointer hover:shadow-lg transition hover:translate-y-[-2px]">
+          <Icon :name="tool.icon" class="size-12 text-muted-foreground/60" />
+
+          <div class="font-semibold text-base">
+            {{ tool.title }}
+          </div>
+
+          <p class="text-muted-foreground mt-2">
+            {{ tool.description }}
+          </p>
+        </Card>
+      </NuxtLink>
+    </div>
+  </div>
+</template>

packages/app/src/modules/command-palette/command-palette.store.ts

@@ -0,0 +1,16 @@
+export const useCommandPaletteStore = defineStore('command-palette', () => {
+  const isCommandPaletteOpen = ref(false);
+
+  return {
+    isCommandPaletteOpen,
+    toggleCommandPalette() {
+      isCommandPaletteOpen.value = !isCommandPaletteOpen.value;
+    },
+    closeCommandPalette() {
+      isCommandPaletteOpen.value = false;
+    },
+    openCommandPalette() {
+      isCommandPaletteOpen.value = true;
+    },
+  };
+});

packages/app/src/modules/command-palette/components/command-palette.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { useToolsStore } from '../../tools/tools.store';
+import { CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList } from '../../ui/components/command';
+import { useCommandPaletteStore } from '../command-palette.store';
+
+const commandPaletteStore = useCommandPaletteStore();
+const { tools } = useToolsStore();
+
+onKeyStroke('k', (e) => {
+  e.preventDefault();
+
+  if (!e.ctrlKey && !e.metaKey) {
+    return;
+  }
+
+  commandPaletteStore.toggleCommandPalette();
+});
+
+const commandSections = computed(() => [
+  {
+    title: 'Tools',
+    items: [
+      ...tools.map(tool => ({
+        label: tool.title,
+        icon: tool.icon,
+        action: () => navigateTo(tool.path),
+      })),
+    ],
+  },
+]);
+
+function handleSelectCommand({ item }: { item: { label: string; action: () => void; keepOpen?: boolean } }) {
+  item.action();
+
+  if (!item.keepOpen) {
+    commandPaletteStore.closeCommandPalette();
+  }
+}
+</script>
+
+<template>
+  <CommandDialog v-model:open="commandPaletteStore.isCommandPaletteOpen">
+    <CommandInput placeholder="Type a command or search..." />
+    <CommandList>
+      <CommandEmpty>{{ $t('command-palette.no-result') }}</CommandEmpty>
+      <!-- <CommandGroup heading="Suggestions">
+        <CommandItem value="calendar">
+          Calendar
+        </CommandItem>
+        <CommandItem value="search-emoji">
+          Search Emoji
+        </CommandItem>
+        <CommandItem value="calculator">
+          Calculator
+        </CommandItem>
+      </CommandGroup>
+      <CommandSeparator />
+      <CommandGroup heading="Settings">
+        <CommandItem value="profile">
+          Profile
+        </CommandItem>
+        <CommandItem value="billing">
+          Billing
+        </CommandItem>
+        <CommandItem value="settings">
+          Settings
+        </CommandItem>
+      </CommandGroup> -->
+      <CommandGroup v-for="section in commandSections" :key="section.title" :heading="section.title">
+        <CommandItem v-for="item in section.items" :key="item.label" :value="item.label" @select="handleSelectCommand({ item })">
+          <Icon :name="item.icon" class="mr-2 size-4" />
+          {{ item.label }}
+        </CommandItem>
+      </CommandGroup>
+    </CommandList>
+  </CommandDialog>
+</template>

packages/app/src/modules/shared/composables/useRefreshableState.test.ts

@@ -0,0 +1,21 @@
+// @vitest-environment nuxt
+import { describe, expect, test } from 'vitest';
+import { useRefreshableState } from './useRefreshableState';
+
+describe('useRefreshableState composables', () => {
+  describe('useRefreshableState', () => {
+    test('the tuple provided by useRefreshableState contain the state that is the result of the provided function and a refresh function', () => {
+      let index = 0;
+
+      const [state, refresh] = useRefreshableState('key', () => ++index);
+
+      expect(state.value).to.equal(1);
+      expect(index).to.equal(1);
+
+      refresh();
+
+      expect(state.value).to.equal(2);
+      expect(index).to.equal(2);
+    });
+  });
+});

packages/app/src/modules/shared/composables/useRefreshableState.ts

@@ -0,0 +1,12 @@
+import { get } from '@vueuse/core';
+
+export function useRefreshableState<T>(key: string, getState: () => T | Ref<T>) {
+  const state = useState(key, getState);
+
+  const refresh = () => {
+    const value = getState();
+    state.value = get(value);
+  };
+
+  return [state, refresh] as const;
+}

packages/app/src/modules/shared/style/cn.ts

@@ -0,0 +1,4 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export const cn = (...classLists: ClassValue[]) => twMerge(clsx(classLists));

packages/app/src/modules/tools/definitions/token-generator/token-generator.models.ts

@@ -0,0 +1,33 @@
+import { sample as sampleImpl, times } from 'lodash-es';
+
+export function createToken({
+  withUppercase = true,
+  withLowercase = true,
+  withNumbers = true,
+  withSymbols = false,
+  length = 64,
+  alphabet,
+  exclude,
+  sample = sampleImpl,
+}: {
+  withUppercase?: boolean;
+  withLowercase?: boolean;
+  withNumbers?: boolean;
+  withSymbols?: boolean;
+  length?: number;
+  alphabet?: string;
+  exclude?: string | string[];
+  sample?: (str: string) => string;
+}) {
+  const allAlphabet = alphabet ?? [
+    withUppercase ? 'ABCDEFGHIJKLMOPQRSTUVWXYZ' : '',
+    withLowercase ? 'abcdefghijklmopqrstuvwxyz' : '',
+    withNumbers ? '0123456789' : '',
+    withSymbols ? '.,;:!?./-"\'#{([-|\\@)]=}*+' : '',
+  ].join('');
+
+  const charsToExclude = exclude ? (Array.isArray(exclude) ? exclude.join('') : exclude) : '';
+  const filteredAlphabet = allAlphabet.split('').filter(char => !charsToExclude.includes(char)).join('');
+
+  return times(length, () => sample(filteredAlphabet)).join('');
+}

packages/app/src/modules/tools/definitions/token-generator/token-generator.tool.ts

@@ -0,0 +1,9 @@
+import { defineTool } from '../../tools.models';
+
+export const tokenGeneratorTool = defineTool({
+  slug: 'token-generator',
+  entryFile: './token-generator.vue',
+  icon: 'i-tabler-key',
+  createdAt: new Date('2024-02-13'),
+  currentDirUrl: import.meta.url,
+});

packages/app/src/modules/tools/definitions/token-generator/token-generator.vue

@@ -0,0 +1,362 @@
+<script setup lang="ts">
+import { times } from 'lodash-es';
+import { useRefreshableState } from '~/src/modules/shared/composables/useRefreshableState';
+import { cn } from '~/src/modules/shared/style/cn';
+import { Button } from '~/src/modules/ui/components/button';
+import { Checkbox } from '~/src/modules/ui/components/checkbox';
+import NumberField from '~/src/modules/ui/components/number-field/NumberField.vue';
+import NumberFieldContent from '~/src/modules/ui/components/number-field/NumberFieldContent.vue';
+import NumberFieldDecrement from '~/src/modules/ui/components/number-field/NumberFieldDecrement.vue';
+import NumberFieldIncrement from '~/src/modules/ui/components/number-field/NumberFieldIncrement.vue';
+import NumberFieldInput from '~/src/modules/ui/components/number-field/NumberFieldInput.vue';
+import Slider from '~/src/modules/ui/components/slider/Slider.vue';
+import { Textarea } from '~/src/modules/ui/components/textarea';
+import ToggleGroup from '~/src/modules/ui/components/toggle-group/ToggleGroup.vue';
+import ToggleGroupItem from '~/src/modules/ui/components/toggle-group/ToggleGroupItem.vue';
+import { createToken } from './token-generator.models';
+
+definePageMeta({
+  layout: 'sidenav',
+});
+
+const formats = {
+  raw: {
+    label: 'Raw',
+    format: ({ tokens }: { tokens: string[] }) => tokens.join('\n'),
+  },
+  JSON: {
+    label: 'JSON',
+    format: ({ tokens }: { tokens: string[] }) => JSON.stringify(tokens),
+  },
+};
+const similarChars = ['I', 'l', '1', 'O', '0'];
+
+const withUppercase = ref(true);
+const withLowercase = ref(true);
+const withNumbers = ref(true);
+const withSymbols = ref(false);
+const excludeSimilar = ref(false);
+const length = ref(64);
+
+const format = ref<keyof typeof formats>('raw');
+const quantity = ref(1);
+const tab = ref<'generator' | 'about'>('generator');
+
+function reset() {
+  withUppercase.value = true;
+  withLowercase.value = true;
+  withNumbers.value = true;
+  withSymbols.value = false;
+  excludeSimilar.value = false;
+  length.value = 64;
+  format.value = 'raw';
+  quantity.value = 1;
+}
+
+function generateToken() {
+  return createToken({
+    withUppercase: withUppercase.value,
+    withLowercase: withLowercase.value,
+    withNumbers: withNumbers.value,
+    withSymbols: withSymbols.value,
+    length: length.value,
+    exclude: excludeSimilar.value ? similarChars : [],
+  });
+}
+
+const [token, refreshToken] = useRefreshableState(
+  'token-generator:token',
+  () => {
+    const tokens = times(
+      quantity.value,
+      generateToken,
+    );
+
+    return formats[format.value].format({ tokens });
+  },
+);
+
+watch([
+  withUppercase,
+  withLowercase,
+  withNumbers,
+  withSymbols,
+  length,
+  format,
+  quantity,
+  excludeSimilar,
+], refreshToken);
+
+// const { copy: copyToken } = useCopy({ source: token, notificationText: 'Token copied to clipboard' });
+</script>
+
+<template>
+  <div class="flex flex-col h-full">
+    <div class="p-6 pb-0 bg-white dark:bg-background border-b">
+      <h1 class="text-2xl">
+        {{ $t('tools.token-generator.title') }}
+      </h1>
+      <p class="text-muted-foreground">
+        {{ $t('tools.token-generator.description') }}
+      </p>
+
+      <div class="mt-2 flex gap-4">
+        <Button variant="link" :class="cn('text-muted-foreground font-sm pb-0 px-0 rounded-none hover:no-underline', { 'border-b border-b-foreground text-foreground': tab === 'generator' })" @click="tab = 'generator'">
+          Generator
+        </Button>
+        <Button variant="link" :class="cn('border-b border-b-transparent text-muted-foreground font-sm pb-0 px-0 rounded-none hover:no-underline transition', { 'border-b-foreground text-foreground': tab === 'about' })" @click="tab = 'about'">
+          About
+        </Button>
+      </div>
+    </div>
+
+    <div v-if="tab === 'about'" class="p-6 bg-white dark:bg-background">
+      <div class="prose dark:prose-invert mx-auto mb-20">
+        <h2 id="about-the-random-token-generator">
+          About The Random Token Generator
+        </h2>
+        <p>
+          The Random Token Generator on Crucials.tools is designed to meet the
+          modern developer’s need for quick, secure, and customizable tokens.
+          Whether you&#39;re working on web applications, software development, system
+          administration, or creating secure passwords, our tool provides a
+          straightforward solution to create tokens that fit your specifications
+          perfectly.
+        </p>
+        <h2 id="why-are-tokens-important-">
+          Why Are Tokens Important?
+        </h2>
+        <p>
+          In the realm of software development and IT, tokens play a crucial role in
+          maintaining security and user authentication. They are essential for:
+        </p>
+        <ul>
+          <li>
+            <p>
+              <strong>Session Management:</strong> Tokens are used to manage user sessions,
+              allowing systems to recognize and verify users over multiple requests.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>API Security:</strong> Securely accessing APIs often requires tokens to
+              ensure that the requestor has the necessary permissions.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Randomized Data Generation:</strong> Tokens can be used in testing
+              environments to generate randomized data inputs, helping developers
+              identify potential issues.
+            </p>
+          </li>
+        </ul>
+        <h2 id="ideal-for-generating-secure-passwords">
+          Ideal for Generating Secure Passwords
+        </h2>
+        <p>
+          In addition to creating tokens, our Random Token Generator is an excellent
+          tool for generating strong, secure passwords. With options to include a
+          mix of uppercase letters, lowercase letters, numbers, and special symbols,
+          you can create robust passwords that enhance security for any application
+          or service.
+        </p>
+        <h2 id="how-to-use-the-token-generator">
+          How to Use the Token Generator
+        </h2>
+        <p>Using our Token Generator is simple:</p>
+        <ol>
+          <li>
+            <p>
+              <strong>Select the characters you want:</strong> Choose from uppercase letters,
+              lowercase letters, numbers, and special symbols based on your token or
+              password requirements.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Choose the length:</strong> Determine how long you want your token or
+              password to be, depending on the level of complexity and security needed.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Generate with a click:</strong> Once your options are set, click &#39;Generate&#39;
+              to receive your token or password instantly.
+            </p>
+          </li>
+        </ol>
+        <h2 id="benefits-of-using-crucials-tools-token-generator">
+          Benefits of Using Crucials.tools Token Generator
+        </h2>
+        <ul>
+          <li>
+            <p>
+              <strong>Customization:</strong> Our tool allows for extensive customization, ensuring
+              you get exactly what you need for your project or personal security.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>Speed:</strong> Generate tokens or passwords in seconds, speeding up your
+              development process and enhancing your security posture.
+            </p>
+          </li>
+          <li>
+            <p>
+              <strong>No Installation Required:</strong> As a web-based tool, there is no need to
+              install any software, making it accessible from anywhere at any time.
+            </p>
+          </li>
+        </ul>
+        <h2 id="perfect-tool-for-developers-and-people-in-it">
+          Perfect Tool For Developers and people in IT
+        </h2>
+        <p>
+          Whether you are developing a new application, testing existing
+          functionality, needing to ensure secure access, or generating a strong
+          password, our Random Token Generator is the perfect tool. It is built to
+          be reliable and secure, providing peace of mind in various development and
+          personal security scenarios.
+        </p>
+      </div>
+    </div>
+
+    <div v-if="tab === 'generator'" class="h-full flex-1 flex flex-col md:flex-row">
+      <div class="md:max-w-[360px] bg-white dark:bg-background h-full border-b md:border-b-none md:border-r">
+        <div class="px-6 pt-4 pb-6 ">
+          <div class="text-muted-foreground mb-3">
+            Token configuration
+          </div>
+
+          <div class="flex gap-2 items-center mb-1">
+            <Checkbox id="use-uppercase" v-model:checked="withUppercase" />
+            <label for="use-uppercase">
+              {{ $t('tools.token-generator.use-uppercase') }}
+              <span class="text-muted-foreground">
+                (A-Z)
+              </span>
+            </label>
+          </div>
+
+          <div class="flex gap-2 items-center mb-1">
+            <Checkbox id="use-lowercase" v-model:checked="withLowercase" />
+            <label for="use-lowercase">
+              {{ $t('tools.token-generator.use-lowercase') }}
+              <span class="text-muted-foreground">
+                (a-z)
+              </span>
+            </label>
+          </div>
+
+          <div class="flex gap-2 items-center mb-1">
+            <Checkbox id="use-numbers" v-model:checked="withNumbers" />
+            <label for="use-numbers">
+              {{ $t('tools.token-generator.use-numbers') }}
+              <span class="text-muted-foreground">
+                (0-9)
+              </span>
+            </label>
+          </div>
+
+          <div class="flex gap-2 items-center mb-1">
+            <Checkbox id="use-symbols" v-model:checked="withSymbols" />
+            <label for="use-symbols">
+              {{ $t('tools.token-generator.use-symbols') }}
+              <span class="text-muted-foreground">
+                (!@,]*...)
+              </span>
+            </label>
+          </div>
+
+          <div class="flex gap-2 items-center mb-1">
+            <Checkbox id="exclude-similar" v-model:checked="excludeSimilar" />
+            <label for="exclude-similar">
+              {{ $t('tools.token-generator.exclude-similar') }}
+              <span class="text-muted-foreground">
+                ({{ similarChars.join('') }})
+              </span>
+            </label>
+          </div>
+
+          <div class="flex gap-4 items-center mb-3 mt-4">
+            <label for="length" class="w-20 shrink-0">{{ $t('tools.token-generator.length') }}</label>
+            <NumberField id="length" v-model="length" :min="1" :max="1024">
+              <NumberFieldContent class="flex-1">
+                <NumberFieldDecrement />
+                <NumberFieldInput />
+                <NumberFieldIncrement />
+              </NumberFieldContent>
+            </NumberField>
+          </div>
+
+          <Slider
+            :model-value="[length]"
+            :max="512"
+            :min="1"
+            :step="1"
+            @update:model-value="(v) => length = v?.[0] ?? 1"
+          />
+        </div>
+
+        <hr>
+
+        <div class="px-6 pt-4 pb-6 border-b">
+          <div class="text-muted-foreground mb-3">
+            Output configuration
+          </div>
+
+          <div class="flex items-center mb-2 gap-4">
+            <div class="w-20 shrink-0">
+              {{ $t('tools.token-generator.format') }}
+            </div>
+            <ToggleGroup v-model="format" type="single" variant="outline">
+              <ToggleGroupItem v-for="({ label }, key) in formats" :key="key" :value="key">
+                {{ label }}
+              </ToggleGroupItem>
+            </ToggleGroup>
+          </div>
+
+          <div class="flex items-center gap-4">
+            <div class="w-20 shrink-0">
+              {{ $t('tools.token-generator.quantity') }}
+            </div>
+
+            <NumberField v-model="quantity" :min="1" :max="100">
+              <NumberFieldContent class="flex-1">
+                <NumberFieldDecrement />
+                <NumberFieldInput />
+                <NumberFieldIncrement />
+              </NumberFieldContent>
+            </NumberField>
+          </div>
+        </div>
+
+        <div class="p-6">
+          <Button class="w-full" variant="secondary" @click="reset">
+            Reset configuration
+          </Button>
+        </div>
+      </div>
+
+      <div class="flex-1 p-6 pt-4 bg-white dark:bg-background pb-20">
+        <div class="text-muted-foreground mb-3">
+          Generated token
+        </div>
+
+        <Textarea v-model="token" rows="12" class="font-mono" readonly :placeholder="$t('tools.token-generator.placeholder')" />
+        <div class="flex md:items-center mt-2 gap-2 flex-col md:flex-row">
+          <Button variant="secondary" @click="refreshToken">
+            <Icon name="i-tabler-refresh" class="mr-2" />
+            {{ $t('tools.token-generator.refresh') }}
+          </Button>
+
+          <Button variant="secondary">
+            <Icon name="i-tabler-copy" class="mr-2" />
+            Copy to clipboard
+          </Button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

packages/app/src/modules/tools/modules/tools.modules.ts

@@ -0,0 +1,22 @@
+import { defineNuxtModule, extendPages } from '@nuxt/kit';
+import { toolDefinitions } from '../tools.registry';
+
+export default defineNuxtModule({
+  meta: {
+    name: 'tools',
+  },
+  setup(options, nuxt) {
+    nuxt.hook('pages:extend', (pages) => {
+      pages.push(...toolDefinitions.map((tool) => {
+        return {
+          path: `/${tool.slug}`,
+          file: tool.entryFile,
+          name: tool.slug,
+          meta: {
+            toolKey: tool.key,
+          },
+        };
+      }));
+    });
+  },
+});

packages/app/src/modules/tools/tools.models.ts

@@ -0,0 +1,18 @@
+export function defineTool(toolDefinition: {
+  slug: string;
+  entryFile: string;
+  currentDirUrl: string;
+  icon: string;
+  createdAt: Date;
+}) {
+  const entryFile = new URL(toolDefinition.entryFile, toolDefinition.currentDirUrl).pathname;
+  const baseGithubUrlPath = entryFile.match(/(\/tools\/.*)$/)?.[1];
+  const entryFileGithubUrl = `https://github.com/CorentinTh/crucials-tools/blob/main${baseGithubUrlPath}`;
+
+  return {
+    ...toolDefinition,
+    key: toolDefinition.slug,
+    entryFile,
+    entryFileGithubUrl,
+  };
+}

packages/app/src/modules/tools/tools.registry.ts

@@ -0,0 +1,5 @@
+import { tokenGeneratorTool } from './definitions/token-generator/token-generator.tool';
+
+export const toolDefinitions = [
+  tokenGeneratorTool,
+];

packages/app/src/modules/tools/tools.store.ts

@@ -0,0 +1,36 @@
+import { joinUrlPaths } from '@corentinth/chisels';
+import { toolDefinitions } from './tools.registry';
+
+export const useToolsStore = defineStore('tools', () => {
+  const { t, locale } = useI18n();
+
+  const localizedTools = computed(() => {
+    return toolDefinitions.map((tool) => {
+      const { key, slug } = tool;
+
+      return {
+        ...tool,
+        title: t(`tools.${key}.title`),
+        description: t(`tools.${key}.description`),
+        path: `/${joinUrlPaths(locale.value, slug)}`,
+      };
+    });
+  });
+
+  return {
+    tools: localizedTools,
+    getToolByKey({ key }: { key: unknown }) {
+      if (typeof key !== 'string') {
+        throw new TypeError('Invalid key');
+      }
+
+      const tool = localizedTools.value.find(tool => tool.key === key);
+
+      if (!tool) {
+        throw new Error('Tool not found');
+      }
+
+      return tool;
+    },
+  };
+});

packages/app/src/modules/ui/components/badge/Badge.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { type BadgeVariants, badgeVariants } from '.';
+
+const props = defineProps<{
+  variant?: BadgeVariants['variant'];
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div :class="cn(badgeVariants({ variant }), props.class)">
+    <slot />
+  </div>
+</template>

packages/app/src/modules/ui/components/badge/index.ts

@@ -0,0 +1,25 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as Badge } from './Badge.vue';
+
+export const badgeVariants = cva(
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        destructive:
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

packages/app/src/modules/ui/components/button/Button.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { Primitive, type PrimitiveProps } from 'radix-vue';
+import { type ButtonVariants, buttonVariants } from '.';
+
+type Props = {
+  variant?: ButtonVariants['variant'];
+  size?: ButtonVariants['size'];
+  class?: HTMLAttributes['class'];
+} & PrimitiveProps;
+
+const props = withDefaults(defineProps<Props>(), {
+  as: 'button',
+});
+</script>
+
+<template>
+  <Primitive
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
+</template>

packages/app/src/modules/ui/components/button/index.ts

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export { default as Button } from './Button.vue';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground  hover:bg-destructive/90',
+        outline: 'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  },
+);
+
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

packages/app/src/modules/ui/components/card/Card.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'rounded-xl border bg-card text-card-foreground',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

packages/app/src/modules/ui/components/card/CardContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div :class="cn('p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

packages/app/src/modules/ui/components/card/CardDescription.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <p :class="cn('text-sm text-muted-foreground', props.class)">
+    <slot />
+  </p>
+</template>

packages/app/src/modules/ui/components/card/CardFooter.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div :class="cn('flex items-center p-6 pt-0', props.class)">
+    <slot />
+  </div>
+</template>

packages/app/src/modules/ui/components/card/CardHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div :class="cn('flex flex-col gap-y-1.5 p-6', props.class)">
+    <slot />
+  </div>
+</template>

packages/app/src/modules/ui/components/card/CardTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <h3
+    :class="
+      cn('font-semibold leading-none tracking-tight', props.class)
+    "
+  >
+    <slot />
+  </h3>
+</template>

packages/app/src/modules/ui/components/card/index.ts

@@ -0,0 +1,6 @@
+export { default as Card } from './Card.vue';
+export { default as CardContent } from './CardContent.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardFooter } from './CardFooter.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardTitle } from './CardTitle.vue';

packages/app/src/modules/ui/components/checkbox/Checkbox.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<CheckboxRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-bind="forwarded"
+    :class="
+      cn('peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
+         props.class)"
+  >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
+      <slot>
+        <Icon name="i-tabler-check" class="h-4 w-4" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

packages/app/src/modules/ui/components/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue';

packages/app/src/modules/ui/components/command/Command.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { ComboboxRootEmits, ComboboxRootProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<ComboboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+  open: true,
+  modelValue: '',
+});
+
+const emits = defineEmits<ComboboxRootEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxRoot
+    v-bind="forwarded"
+    :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+  >
+    <slot />
+  </ComboboxRoot>
+</template>

packages/app/src/modules/ui/components/command/CommandDialog.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { DialogRootEmits, DialogRootProps } from 'radix-vue';
+import { Dialog, DialogContent } from '@/src/modules/ui/components/dialog';
+import { useForwardPropsEmits } from 'radix-vue';
+import Command from './Command.vue';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <Dialog v-bind="forwarded">
+    <DialogContent class="overflow-hidden p-0 shadow-lg">
+      <Command class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+        <slot />
+      </Command>
+    </DialogContent>
+  </Dialog>
+</template>

packages/app/src/modules/ui/components/command/CommandEmpty.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { ComboboxEmptyProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxEmpty } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxEmptyProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
+    <slot />
+  </ComboboxEmpty>
+</template>

packages/app/src/modules/ui/components/command/CommandGroup.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { ComboboxGroupProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxGroupProps & {
+  class?: HTMLAttributes['class'];
+  heading?: string;
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxGroup
+    v-bind="delegatedProps"
+    :class="cn('overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground', props.class)"
+  >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
+      {{ heading }}
+    </ComboboxLabel>
+    <slot />
+  </ComboboxGroup>
+</template>

packages/app/src/modules/ui/components/command/CommandInput.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxInput, type ComboboxInputProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps<ComboboxInputProps & {
+  class?: HTMLAttributes['class'];
+}>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <div class="flex items-center border-b px-3" cmdk-input-wrapper>
+    <Icon name="i-tabler-search" class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <ComboboxInput
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      auto-focus
+      :class="cn('flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50', props.class)"
+    />
+  </div>
+</template>

packages/app/src/modules/ui/components/command/CommandItem.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import type { ComboboxItemEmits, ComboboxItemProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<ComboboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxItem
+    v-bind="forwarded"
+    :class="cn('relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50', props.class)"
+  >
+    <slot />
+  </ComboboxItem>
+</template>

packages/app/src/modules/ui/components/command/CommandList.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { ComboboxContentEmits, ComboboxContentProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(defineProps<ComboboxContentProps & { class?: HTMLAttributes['class'] }>(), {
+  dismissable: false,
+});
+const emits = defineEmits<ComboboxContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ComboboxContent v-bind="forwarded" :class="cn('max-h-[300px] overflow-y-auto overflow-x-hidden', props.class)">
+    <div role="presentation">
+      <slot />
+    </div>
+  </ComboboxContent>
+</template>

packages/app/src/modules/ui/components/command/CommandSeparator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { ComboboxSeparatorProps } from 'radix-vue';
+import { cn } from '@/src/modules/shared/style/cn';
+import { ComboboxSeparator } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<ComboboxSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+</script>
+
+<template>
+  <ComboboxSeparator
+    v-bind="delegatedProps"
+    :class="cn('-mx-1 h-px bg-border', props.class)"
+  >
+    <slot />
+  </ComboboxSeparator>
+</template>

packages/app/src/modules/ui/components/command/CommandShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
+    <slot />
+  </span>
+</template>

packages/app/src/modules/ui/components/command/index.ts

@@ -0,0 +1,9 @@
+export { default as Command } from './Command.vue';
+export { default as CommandDialog } from './CommandDialog.vue';
+export { default as CommandEmpty } from './CommandEmpty.vue';
+export { default as CommandGroup } from './CommandGroup.vue';
+export { default as CommandInput } from './CommandInput.vue';
+export { default as CommandItem } from './CommandItem.vue';
+export { default as CommandList } from './CommandList.vue';
+export { default as CommandSeparator } from './CommandSeparator.vue';
+export { default as CommandShortcut } from './CommandShortcut.vue';

packages/app/src/modules/ui/components/dialog/Dialog.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DialogRoot, type DialogRootEmits, type DialogRootProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<DialogRootProps>();
+const emits = defineEmits<DialogRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-bind="forwarded">
+    <slot />
+  </DialogRoot>
+</template>

packages/app/src/modules/ui/components/dialog/DialogClose.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogClose, type DialogCloseProps } from 'radix-vue';
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose v-bind="props">
+    <slot />
+  </DialogClose>
+</template>

packages/app/src/modules/ui/components/dialog/DialogContent.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <DialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )"
+    >
+      <slot />
+
+      <DialogClose
+        class="absolute right-3 top-2 p-1 leading-none rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+      >
+        <Icon name="i-tabler-x" class="size-4" />
+        <span class="sr-only">Close</span>
+      </DialogClose>
+    </DialogContent>
+  </DialogPortal>
+</template>

packages/app/src/modules/ui/components/dialog/DialogDescription.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import { DialogDescription, type DialogDescriptionProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DialogDescription
+    v-bind="forwardedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </DialogDescription>
+</template>

packages/app/src/modules/ui/components/dialog/DialogFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>

packages/app/src/modules/ui/components/dialog/DialogHeader.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/src/modules/shared/style/cn';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>

packages/app/src/modules/ui/components/dialog/DialogScrollContent.vue

@@ -0,0 +1,58 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import {
+  DialogClose,
+  DialogContent,
+  type DialogContentEmits,
+  type DialogContentProps,
+  DialogOverlay,
+  DialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DialogPortal>
+    <DialogOverlay
+      class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    >
+      <DialogContent
+        :class="
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class,
+          )
+        "
+        v-bind="forwarded"
+        @pointer-down-outside="(event) => {
+          const originalEvent = event.detail.originalEvent;
+          const target = originalEvent.target as HTMLElement;
+          if (originalEvent.offsetX > target.clientWidth || originalEvent.offsetY > target.clientHeight) {
+            event.preventDefault();
+          }
+        }"
+      >
+        <slot />
+
+        <DialogClose
+          class="absolute top-4 right-4 p-0.5 transition-colors rounded-md hover:bg-secondary"
+        >
+          <Icon name="i-tabler-x" class="w-4 h-4" />
+          <span class="sr-only">Close</span>
+        </DialogClose>
+      </DialogContent>
+    </DialogOverlay>
+  </DialogPortal>
+</template>

packages/app/src/modules/ui/components/dialog/DialogTitle.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import { DialogTitle, type DialogTitleProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DialogTitle
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'text-lg font-semibold leading-none tracking-tight',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </DialogTitle>
+</template>

packages/app/src/modules/ui/components/dialog/DialogTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DialogTrigger, type DialogTriggerProps } from 'radix-vue';
+
+const props = defineProps<DialogTriggerProps>();
+</script>
+
+<template>
+  <DialogTrigger v-bind="props">
+    <slot />
+  </DialogTrigger>
+</template>

packages/app/src/modules/ui/components/dialog/index.ts

@@ -0,0 +1,9 @@
+export { default as Dialog } from './Dialog.vue';
+export { default as DialogClose } from './DialogClose.vue';
+export { default as DialogContent } from './DialogContent.vue';
+export { default as DialogDescription } from './DialogDescription.vue';
+export { default as DialogFooter } from './DialogFooter.vue';
+export { default as DialogHeader } from './DialogHeader.vue';
+export { default as DialogScrollContent } from './DialogScrollContent.vue';
+export { default as DialogTitle } from './DialogTitle.vue';
+export { default as DialogTrigger } from './DialogTrigger.vue';

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenu.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, type DropdownMenuRootEmits, type DropdownMenuRootProps, useForwardPropsEmits } from 'radix-vue';
+
+const props = defineProps<DropdownMenuRootProps>();
+const emits = defineEmits<DropdownMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DropdownMenuRoot v-bind="forwarded">
+    <slot />
+  </DropdownMenuRoot>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import {
+  DropdownMenuCheckboxItem,
+  type DropdownMenuCheckboxItemEmits,
+  type DropdownMenuCheckboxItemProps,
+  DropdownMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuCheckboxItem
+    v-bind="forwarded"
+    :class=" cn(
+      'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      props.class,
+    )"
+  >
+    <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <DropdownMenuItemIndicator>
+        <Icon name="i-tabler-check" class="w-4 h-4" />
+      </DropdownMenuItemIndicator>
+    </span>
+    <slot />
+  </DropdownMenuCheckboxItem>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import {
+  DropdownMenuContent,
+  type DropdownMenuContentEmits,
+  type DropdownMenuContentProps,
+  DropdownMenuPortal,
+  useForwardPropsEmits,
+} from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = withDefaults(
+  defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+);
+const emits = defineEmits<DropdownMenuContentEmits>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <DropdownMenuPortal>
+    <DropdownMenuContent
+      v-bind="forwarded"
+      :class="cn('z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2', props.class)"
+    >
+      <slot />
+    </DropdownMenuContent>
+  </DropdownMenuPortal>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { DropdownMenuGroup, type DropdownMenuGroupProps } from 'radix-vue';
+
+const props = defineProps<DropdownMenuGroupProps>();
+</script>
+
+<template>
+  <DropdownMenuGroup v-bind="props">
+    <slot />
+  </DropdownMenuGroup>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import { DropdownMenuItem, type DropdownMenuItemProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuItemProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuItem
+    v-bind="forwardedProps"
+    :class="cn(
+      'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+      inset && 'pl-8',
+      props.class,
+    )"
+  >
+    <slot />
+  </DropdownMenuItem>
+</template>

packages/app/src/modules/ui/components/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import { cn } from '@/src/modules/shared/style/cn';
+import { DropdownMenuLabel, type DropdownMenuLabelProps, useForwardProps } from 'radix-vue';
+import { computed, type HTMLAttributes } from 'vue';
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props;
+
+  return delegated;
+});
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <DropdownMenuLabel
+    v-bind="forwardedProps"
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
+  >
+    <slot />
+  </DropdownMenuLabel>
+</template>