From 52fdff29de8db875aaa5b62027c2411f8c99f985 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 23 May 2025 15:35:10 +0300
Subject: [PATCH 01/31] feat(devtools): add text case converter component

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   8 ++
 src/main/menu/main.ts                         |   9 ++
 src/main/types/ipc.ts                         |   1 +
 .../devtools/converters/CaseConverter.vue     | 127 ++++++++++++++++++
 src/renderer/ipc/listeners/main-menu.ts       |   4 +
 src/renderer/router/index.ts                  |  15 +++
 src/renderer/views/Devtools.vue               |  46 +++++++
 8 files changed, 211 insertions(+)
 create mode 100644 src/renderer/components/devtools/converters/CaseConverter.vue
 create mode 100644 src/renderer/views/Devtools.vue

diff --git a/package.json b/package.json
index 77d35d60..cc1c796f 100644
--- a/package.json
+++ b/package.json
@@ -37,6 +37,7 @@
     "@elysiajs/swagger": "^1.2.2",
     "@vueuse/core": "^12.7.0",
     "better-sqlite3": "^11.8.1",
+    "change-case": "^5.4.4",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "codemirror": "^5.65.18",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c7da8719..273cb2ae 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -23,6 +23,9 @@ importers:
       better-sqlite3:
         specifier: ^11.8.1
         version: 11.8.1
+      change-case:
+        specifier: ^5.4.4
+        version: 5.4.4
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -1649,6 +1652,9 @@ packages:
     resolution: {integrity: sha512-zgVZuo2WcZgfUEmsn6eO3kINexW8RAE4maiQ8QNs8CtpPCSyMiYsULR3HQYkm3w8FIA3SberyMJMSldGsW+U3w==}
     engines: {node: ^12.17.0 || ^14.13 || >=16.0.0}
 
+  change-case@5.4.4:
+    resolution: {integrity: sha512-HRQyTk2/YPEkt9TnUPbOpr64Uw3KOicFWPVBb+xiHvd6eBx/qPr9xqfBFDT8P2vWsvvz4jbEkfDe71W3VyNu2w==}
+
   character-entities@2.0.2:
     resolution: {integrity: sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==}
 
@@ -6556,6 +6562,8 @@ snapshots:
 
   chalk@5.4.1: {}
 
+  change-case@5.4.4: {}
+
   character-entities@2.0.2: {}
 
   cheerio-select@2.1.0:
diff --git a/src/main/menu/main.ts b/src/main/menu/main.ts
index c35f8675..40f59d30 100644
--- a/src/main/menu/main.ts
+++ b/src/main/menu/main.ts
@@ -50,6 +50,15 @@ const appMenuItems: MenuConfig[] = [
     type: 'separator' as any,
     platforms: ['darwin'],
   },
+  {
+    id: 'devtools',
+    label: i18n.t('menu:app.devtools'),
+    accelerator: 'CommandOrControl+.',
+    click: () => send('main-menu:goto-devtools'),
+  },
+  {
+    type: 'separator' as any,
+  },
   {
     label: i18n.t('menu:app.hide'),
     platforms: ['darwin'],
diff --git a/src/main/types/ipc.ts b/src/main/types/ipc.ts
index 54e8ecfc..48c78cd0 100644
--- a/src/main/types/ipc.ts
+++ b/src/main/types/ipc.ts
@@ -11,6 +11,7 @@ type MainMenuAction =
   | 'font-size-reset'
   | 'format'
   | 'goto-preferences'
+  | 'goto-devtools'
   | 'new-folder'
   | 'new-fragment'
   | 'new-snippet'
diff --git a/src/renderer/components/devtools/converters/CaseConverter.vue b/src/renderer/components/devtools/converters/CaseConverter.vue
new file mode 100644
index 00000000..14ffd6a3
--- /dev/null
+++ b/src/renderer/components/devtools/converters/CaseConverter.vue
@@ -0,0 +1,127 @@
+<script setup lang="ts">
+import { i18n } from '@/electron'
+import {
+  camelCase,
+  capitalCase,
+  constantCase,
+  dotCase,
+  kebabCase,
+  pascalCase,
+  pathCase,
+  snakeCase,
+} from 'change-case'
+import { Copy } from 'lucide-vue-next'
+
+const text = ref('')
+
+const title = computed(() => i18n.t('devtools:converters.caseConverter.label'))
+const description = computed(() =>
+  i18n.t('devtools:converters.caseConverter.description'),
+)
+
+const caseType = {
+  uppercase: i18n.t('devtools:converters.caseConverter.caseType.uppercase'),
+  lowercase: i18n.t('devtools:converters.caseConverter.caseType.lowercase'),
+  camelcase: i18n.t('devtools:converters.caseConverter.caseType.camelcase'),
+  snakecase: i18n.t('devtools:converters.caseConverter.caseType.snakecase'),
+  kebabcase: i18n.t('devtools:converters.caseConverter.caseType.kebabcase'),
+  pascalcase: i18n.t('devtools:converters.caseConverter.caseType.pascalcase'),
+  constantcase: i18n.t(
+    'devtools:converters.caseConverter.caseType.constantcase',
+  ),
+  capitalize: i18n.t('devtools:converters.caseConverter.caseType.capitalize'),
+  dotcase: i18n.t('devtools:converters.caseConverter.caseType.dotcase'),
+  pathcase: i18n.t('devtools:converters.caseConverter.caseType.pathcase'),
+} as const
+
+function convert(input: string, type: keyof typeof caseType): string {
+  if (!input)
+    return ''
+
+  switch (type) {
+    case 'uppercase':
+      return input.toUpperCase()
+    case 'lowercase':
+      return input.toLowerCase()
+    case 'camelcase':
+      return camelCase(input)
+    case 'capitalize':
+      return capitalCase(input)
+    case 'constantcase':
+      return constantCase(input)
+    case 'snakecase':
+      return snakeCase(input)
+    case 'kebabcase':
+      return kebabCase(input)
+    case 'pascalcase':
+      return pascalCase(input)
+    case 'dotcase':
+      return dotCase(input)
+    case 'pathcase':
+      return pathCase(input)
+    default:
+      return input
+  }
+}
+
+function copyCase(type: keyof typeof caseType) {
+  navigator.clipboard.writeText(convert(text.value, type))
+}
+
+const output = computed(() => {
+  return Object.entries(caseType).map(([key, value]) => ({
+    label: value,
+    value: convert(text.value, key as keyof typeof caseType),
+  }))
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.inputString')"
+        :level="3"
+      />
+      <UiInput
+        v-model="text"
+        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        clearable
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.outputString')"
+        :level="3"
+      />
+      <div
+        class="grid grid-cols-[max-content_1fr_max-content] items-center gap-4"
+      >
+        <template
+          v-for="[type, label] in Object.entries(caseType)"
+          :key="type"
+        >
+          <div class="text-text-secondary text-sm font-medium">
+            {{ label }}
+          </div>
+          <UiInput
+            :model-value="output.find((item) => item.label === label)?.value"
+            readonly
+          />
+          <UiButton
+            variant="icon"
+            size="md"
+            @click="copyCase(type as keyof typeof caseType)"
+          >
+            <Copy class="h-3 w-3" />
+          </UiButton>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/ipc/listeners/main-menu.ts b/src/renderer/ipc/listeners/main-menu.ts
index 09b4ac00..b2a33506 100644
--- a/src/renderer/ipc/listeners/main-menu.ts
+++ b/src/renderer/ipc/listeners/main-menu.ts
@@ -16,6 +16,10 @@ export function registerMainMenuListeners() {
     router.push({ name: RouterName.preferences })
   })
 
+  ipc.on('main-menu:goto-devtools', () => {
+    router.push({ name: RouterName.devtools })
+  })
+
   ipc.on('main-menu:new-snippet', () => {
     createSnippetAndSelect()
   })
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 93c00b30..9b8b243a 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -8,6 +8,8 @@ export const RouterName = {
   preferencesAppearance: 'preferences/appearance',
   preferencesEditor: 'preferences/editor',
   markdownPresentation: 'markdown-presentation',
+  devtools: 'devtools',
+  devtoolsTextCaseConverter: 'devtools/text/case-converter',
 }
 
 const routes = [
@@ -48,6 +50,19 @@ const routes = [
     name: RouterName.markdownPresentation,
     component: () => import('@/views/MarkdownPresentation.vue'),
   },
+  {
+    path: '/devtools',
+    name: RouterName.devtools,
+    component: () => import('@/views/Devtools.vue'),
+    children: [
+      {
+        path: 'text/case-converter',
+        name: RouterName.devtoolsTextCaseConverter,
+        component: () =>
+          import('~/renderer/components/devtools/converters/CaseConverter.vue'),
+      },
+    ],
+  },
 ]
 
 export const router = createRouter({
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
new file mode 100644
index 00000000..d475e57d
--- /dev/null
+++ b/src/renderer/views/Devtools.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { i18n } from '@/electron'
+import { router, RouterName } from '@/router'
+import { useRoute } from 'vue-router'
+
+const route = useRoute()
+
+const isActiveRoute = computed(() => {
+  return (name: string) => route.name === name
+})
+
+const nav = [
+  {
+    label: i18n.t('devtools:textTools.caseConverter'),
+    name: RouterName.devtoolsTextCaseConverter,
+  },
+]
+</script>
+
+<template>
+  <LayoutTwoColumn
+    :title="i18n.t('devtools:label')"
+    @back="() => router.push({ name: RouterName.main })"
+  >
+    <template #left>
+      <PerfectScrollbar class="h-full px-2">
+        <RouterLink
+          v-for="item in nav"
+          :key="item.name"
+          class="cursor-default"
+          :to="{ name: item.name }"
+        >
+          <UiMenuItem
+            :label="item.label"
+            :is-active="isActiveRoute(item.name)"
+          />
+        </RouterLink>
+      </PerfectScrollbar>
+    </template>
+    <template #right>
+      <PerfectScrollbar class="h-full px-5 pb-5">
+        <RouterView />
+      </PerfectScrollbar>
+    </template>
+  </LayoutTwoColumn>
+</template>

From 756d373e2a6d6012041180e16aa0d2835e3694f2 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 23 May 2025 15:38:01 +0300
Subject: [PATCH 02/31] feat(ui): add Heading component for dynamic headings
 with optional description

---
 .../components/ui/heading/Heading.vue         | 35 +++++++++++++++++++
 1 file changed, 35 insertions(+)
 create mode 100644 src/renderer/components/ui/heading/Heading.vue

diff --git a/src/renderer/components/ui/heading/Heading.vue b/src/renderer/components/ui/heading/Heading.vue
new file mode 100644
index 00000000..81032615
--- /dev/null
+++ b/src/renderer/components/ui/heading/Heading.vue
@@ -0,0 +1,35 @@
+<script setup lang="ts">
+interface Props {
+  title: string
+  description?: string
+  level?: 2 | 3
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  level: 2,
+})
+
+const levelStyles = computed(() => {
+  return {
+    'text-lg font-bold': props.level === 2,
+    'text-md font-bold': props.level === 3,
+  }
+})
+</script>
+
+<template>
+  <div class="mb-3 not-first:mt-3">
+    <component
+      :is="`h${level}`"
+      :class="levelStyles"
+    >
+      {{ title }}
+    </component>
+    <p
+      v-if="description"
+      class="text-text-muted text-sm"
+    >
+      {{ description }}
+    </p>
+  </div>
+</template>

From 904655c97ae0511a3eebe3d563f24817f0fb8921 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 23 May 2025 15:38:38 +0300
Subject: [PATCH 03/31] feat(ui): add readonly prop to Input component for
 improved accessibility

---
 src/renderer/components/ui/input/Input.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/renderer/components/ui/input/Input.vue b/src/renderer/components/ui/input/Input.vue
index 53bf8fb0..c6dd8a1f 100644
--- a/src/renderer/components/ui/input/Input.vue
+++ b/src/renderer/components/ui/input/Input.vue
@@ -13,6 +13,7 @@ interface Props {
   focus?: boolean
   select?: boolean
   disabled?: boolean
+  readonly?: boolean
 }
 
 defineOptions({
@@ -59,11 +60,12 @@ watchEffect(() => {
         cn(variants({ variant }), props.class),
         { 'pr-9': clearable && model },
         { 'text-text-muted cursor-not-allowed': disabled },
+        { 'text-text-muted': readonly },
       ]"
       :placeholder="placeholder"
       :type="type"
       v-bind="attrs"
-      :disabled="disabled"
+      :disabled="disabled || readonly"
     >
     <UiButton
       v-if="clearable && model"

From fb4debf7501177ff4882f1ef551b45eb2778df7a Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Sat, 24 May 2025 07:49:10 +0300
Subject: [PATCH 04/31] feat(devtools): add text to unicode converter component

---
 .../devtools/converters/TextToUnicode.vue     | 108 ++++++++++++++++++
 src/renderer/router/index.ts                  |   7 ++
 src/renderer/views/Devtools.vue               |   6 +-
 3 files changed, 120 insertions(+), 1 deletion(-)
 create mode 100644 src/renderer/components/devtools/converters/TextToUnicode.vue

diff --git a/src/renderer/components/devtools/converters/TextToUnicode.vue b/src/renderer/components/devtools/converters/TextToUnicode.vue
new file mode 100644
index 00000000..d72ce9cb
--- /dev/null
+++ b/src/renderer/components/devtools/converters/TextToUnicode.vue
@@ -0,0 +1,108 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/shadcn/switch'
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+
+const text = ref('')
+const isUnicodeToText = ref(false)
+
+const title = computed(() => i18n.t('devtools:converters.textToUnicode.label'))
+const description = computed(() =>
+  i18n.t('devtools:converters.textToUnicode.description'),
+)
+
+function convertTextToUnicode(input: string): string {
+  if (!input) {
+    return ''
+  }
+
+  return input
+    .split('')
+    .map((char) => {
+      const code = char.charCodeAt(0)
+      const hex = code.toString(16).toUpperCase().padStart(4, '0')
+      return `\\u${hex}`
+    })
+    .join('')
+}
+
+function convertUnicodeToText(input: string): string {
+  if (!input) {
+    return ''
+  }
+
+  try {
+    const normalized = input.replace(/\\u/g, '\\u')
+    return JSON.parse(`"${normalized}"`)
+  }
+  catch {
+    try {
+      return input.replace(/\\u([0-9A-Fa-f]{4})/g, (match, hex) => {
+        return String.fromCharCode(Number.parseInt(hex, 16))
+      })
+    }
+    catch {
+      return input
+    }
+  }
+}
+
+function convert() {
+  if (isUnicodeToText.value) {
+    return convertUnicodeToText(text.value)
+  }
+  else {
+    return convertTextToUnicode(text.value)
+  }
+}
+
+const output = computed(() => convert())
+
+const { copy } = useClipboard()
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="flex items-center gap-2">
+      {{ i18n.t("devtools:converters.textToUnicode.modes.textToUnicode") }}
+      <Switch
+        :checked="isUnicodeToText"
+        @update:checked="isUnicodeToText = $event"
+      />
+      {{ i18n.t("devtools:converters.textToUnicode.modes.unicodeToText") }}
+    </div>
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.inputString')"
+        :level="3"
+      />
+      <UiInput
+        v-model="text"
+        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        clearable
+        type="textarea"
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.outputString')"
+        :level="3"
+      />
+      <UiInput
+        :model-value="output"
+        type="textarea"
+        readonly
+      />
+      <UiButton
+        size="md"
+        @click="copy(output)"
+      >
+        {{ i18n.t("button.copy") }}
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 9b8b243a..73c7810f 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -10,6 +10,7 @@ export const RouterName = {
   markdownPresentation: 'markdown-presentation',
   devtools: 'devtools',
   devtoolsTextCaseConverter: 'devtools/text/case-converter',
+  devtoolsTextToUnicode: 'devtools/text/to-unicode',
 }
 
 const routes = [
@@ -61,6 +62,12 @@ const routes = [
         component: () =>
           import('~/renderer/components/devtools/converters/CaseConverter.vue'),
       },
+      {
+        path: 'text/to-unicode',
+        name: RouterName.devtoolsTextToUnicode,
+        component: () =>
+          import('~/renderer/components/devtools/converters/TextToUnicode.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index d475e57d..5131ac1b 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -11,9 +11,13 @@ const isActiveRoute = computed(() => {
 
 const nav = [
   {
-    label: i18n.t('devtools:textTools.caseConverter'),
+    label: i18n.t('devtools:converters.caseConverter.label'),
     name: RouterName.devtoolsTextCaseConverter,
   },
+  {
+    label: i18n.t('devtools:converters.textToUnicode.label'),
+    name: RouterName.devtoolsTextToUnicode,
+  },
 ]
 </script>
 

From dc974bbcfc0e2653da4e2064f4a00471b1c487be Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Sat, 24 May 2025 07:49:33 +0300
Subject: [PATCH 05/31] chore: clean

---
 src/renderer/components/devtools/converters/CaseConverter.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/renderer/components/devtools/converters/CaseConverter.vue b/src/renderer/components/devtools/converters/CaseConverter.vue
index 14ffd6a3..bbcfc1ca 100644
--- a/src/renderer/components/devtools/converters/CaseConverter.vue
+++ b/src/renderer/components/devtools/converters/CaseConverter.vue
@@ -82,7 +82,6 @@ const output = computed(() => {
       :title="title"
       :description="description"
     />
-
     <div class="space-y-2">
       <UiHeading
         :title="i18n.t('devtools:form.inputString')"

From 071fd5f4a5323bcb03615b91209c9986935c1f30 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Sat, 24 May 2025 07:49:49 +0300
Subject: [PATCH 06/31] feat(ui): enhance Input component to support textarea
 type and rows prop

---
 src/renderer/components/ui/input/Input.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/src/renderer/components/ui/input/Input.vue b/src/renderer/components/ui/input/Input.vue
index c6dd8a1f..ab6cc594 100644
--- a/src/renderer/components/ui/input/Input.vue
+++ b/src/renderer/components/ui/input/Input.vue
@@ -9,11 +9,12 @@ interface Props {
   class?: string
   placeholder?: string
   clearable?: boolean
-  type?: 'text' | 'number'
+  type?: 'text' | 'textarea' | 'number'
   focus?: boolean
   select?: boolean
   disabled?: boolean
   readonly?: boolean
+  rows?: number
 }
 
 defineOptions({
@@ -52,8 +53,9 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div :class="{ 'relative flex': clearable && model }">
+  <div class="relative flex">
     <input
+      v-if="type !== 'textarea'"
       ref="inputRef"
       v-model="model"
       :class="[
@@ -67,6 +69,20 @@ watchEffect(() => {
       v-bind="attrs"
       :disabled="disabled || readonly"
     >
+    <textarea
+      v-else
+      v-model="model"
+      :class="[
+        cn(variants({ variant }), props.class),
+        { 'pr-9': clearable && model },
+        { 'text-text-muted cursor-not-allowed': disabled },
+        { 'text-text-muted': readonly },
+      ]"
+      :placeholder="placeholder"
+      :rows="rows || 3"
+      v-bind="attrs"
+      :disabled="disabled || readonly"
+    />
     <UiButton
       v-if="clearable && model"
       class="absolute top-1/2 right-2 -translate-y-1/2"

From 0ae4fe59886df56f16edc4ec9e88bf6dca6a0b04 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Sat, 24 May 2025 08:03:21 +0300
Subject: [PATCH 07/31] feat(devtools): add text to ASCII converter component

---
 .../devtools/converters/TextToAsciiBinary.vue | 117 ++++++++++++++++++
 src/renderer/router/index.ts                  |   9 ++
 src/renderer/views/Devtools.vue               |   4 +
 3 files changed, 130 insertions(+)
 create mode 100644 src/renderer/components/devtools/converters/TextToAsciiBinary.vue

diff --git a/src/renderer/components/devtools/converters/TextToAsciiBinary.vue b/src/renderer/components/devtools/converters/TextToAsciiBinary.vue
new file mode 100644
index 00000000..368c7a39
--- /dev/null
+++ b/src/renderer/components/devtools/converters/TextToAsciiBinary.vue
@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/shadcn/switch'
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+
+const text = ref('')
+const isAsciiToText = ref(false)
+
+const title = computed(() => i18n.t('devtools:converters.textToAscii.label'))
+const description = computed(() =>
+  i18n.t('devtools:converters.textToAscii.description'),
+)
+
+const { copy } = useClipboard()
+
+function convertTextToAscii(input: string): string {
+  if (!input) {
+    return ''
+  }
+
+  return input
+    .split('')
+    .map((char) => {
+      const asciiCode = char.charCodeAt(0)
+
+      return asciiCode.toString(2).padStart(8, '0')
+    })
+    .join(' ')
+}
+
+function convertAsciiToText(input: string): string {
+  if (!input) {
+    return ''
+  }
+
+  try {
+    const binaryNumbers = input.trim().split(/\s+/).filter(Boolean)
+
+    return binaryNumbers
+      .map((binary) => {
+        if (!/^[01]+$/.test(binary)) {
+          throw new Error(`Invalid binary: ${binary}`)
+        }
+
+        const asciiCode = Number.parseInt(binary, 2)
+
+        if (asciiCode < 0 || asciiCode > 127) {
+          throw new Error(`Invalid ASCII code: ${asciiCode}`)
+        }
+
+        return String.fromCharCode(asciiCode)
+      })
+      .join('')
+  }
+  catch (error) {
+    console.warn('Error converting ASCII to text:', error)
+    return input
+  }
+}
+
+function convert() {
+  if (isAsciiToText.value) {
+    return convertAsciiToText(text.value)
+  }
+  else {
+    return convertTextToAscii(text.value)
+  }
+}
+
+const output = computed(() => convert())
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="flex items-center gap-2">
+      {{ i18n.t("devtools:converters.textToAscii.modes.textToAscii") }}
+      <Switch
+        :checked="isAsciiToText"
+        @update:checked="isAsciiToText = $event"
+      />
+      {{ i18n.t("devtools:converters.textToAscii.modes.asciiToText") }}
+    </div>
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.inputString')"
+        :level="3"
+      />
+      <UiInput
+        v-model="text"
+        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        clearable
+        type="textarea"
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.outputString')"
+        :level="3"
+      />
+      <UiInput
+        :model-value="output"
+        type="textarea"
+        readonly
+      />
+      <UiButton
+        size="md"
+        @click="copy(output)"
+      >
+        {{ i18n.t("button.copy") }}
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 73c7810f..364f4da1 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -11,6 +11,7 @@ export const RouterName = {
   devtools: 'devtools',
   devtoolsTextCaseConverter: 'devtools/text/case-converter',
   devtoolsTextToUnicode: 'devtools/text/to-unicode',
+  devtoolsTextToAscii: 'devtools/text/to-ascii',
 }
 
 const routes = [
@@ -68,6 +69,14 @@ const routes = [
         component: () =>
           import('~/renderer/components/devtools/converters/TextToUnicode.vue'),
       },
+      {
+        path: 'text/to-ascii',
+        name: RouterName.devtoolsTextToAscii,
+        component: () =>
+          import(
+            '~/renderer/components/devtools/converters/TextToAsciiBinary.vue'
+          ),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index 5131ac1b..ef9d76ed 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -18,6 +18,10 @@ const nav = [
     label: i18n.t('devtools:converters.textToUnicode.label'),
     name: RouterName.devtoolsTextToUnicode,
   },
+  {
+    label: i18n.t('devtools:converters.textToAscii.label'),
+    name: RouterName.devtoolsTextToAscii,
+  },
 ]
 </script>
 

From fba44c987af18a31505047f6f0c2b6b111d31b4c Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Sat, 24 May 2025 08:17:20 +0300
Subject: [PATCH 08/31] feat(devtools): add Base64 converter component

---
 .../devtools/converters/Base64Converter.vue   | 94 +++++++++++++++++++
 src/renderer/router/index.ts                  |  9 ++
 src/renderer/views/Devtools.vue               |  4 +
 3 files changed, 107 insertions(+)
 create mode 100644 src/renderer/components/devtools/converters/Base64Converter.vue

diff --git a/src/renderer/components/devtools/converters/Base64Converter.vue b/src/renderer/components/devtools/converters/Base64Converter.vue
new file mode 100644
index 00000000..95780921
--- /dev/null
+++ b/src/renderer/components/devtools/converters/Base64Converter.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/shadcn/switch'
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+
+const text = ref('')
+const isBase64ToText = ref(false)
+
+const { copy } = useClipboard()
+
+const title = computed(() => i18n.t('devtools:converters.base64.label'))
+const description = computed(() =>
+  i18n.t('devtools:converters.base64.description'),
+)
+
+// Функция для конвертации текста в Base64
+function textToBase64(input: string): string {
+  try {
+    return btoa(unescape(encodeURIComponent(input)))
+  }
+  catch (error) {
+    console.error('Error encoding to Base64:', error)
+    return ''
+  }
+}
+
+function base64ToText(input: string): string {
+  try {
+    return decodeURIComponent(escape(atob(input)))
+  }
+  catch (error) {
+    console.error('Error decoding from Base64:', error)
+    return ''
+  }
+}
+
+const output = computed(() => {
+  if (!text.value)
+    return ''
+
+  if (isBase64ToText.value) {
+    return base64ToText(text.value)
+  }
+  else {
+    return textToBase64(text.value)
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="flex items-center gap-2">
+      {{ i18n.t("devtools:converters.base64.modes.textToBase64") }}
+      <Switch
+        :checked="isBase64ToText"
+        @update:checked="isBase64ToText = $event"
+      />
+      {{ i18n.t("devtools:converters.base64.modes.base64ToText") }}
+    </div>
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.inputString')"
+        :level="3"
+      />
+      <UiInput
+        v-model="text"
+        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        clearable
+        type="textarea"
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.outputString')"
+        :level="3"
+      />
+      <UiInput
+        :model-value="output"
+        type="textarea"
+        readonly
+      />
+      <UiButton
+        size="md"
+        @click="copy(output)"
+      >
+        {{ i18n.t("button.copy") }}
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 364f4da1..5ae5a18e 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -12,6 +12,7 @@ export const RouterName = {
   devtoolsTextCaseConverter: 'devtools/text/case-converter',
   devtoolsTextToUnicode: 'devtools/text/to-unicode',
   devtoolsTextToAscii: 'devtools/text/to-ascii',
+  devtoolsBase64Converter: 'devtools/base64-converter',
 }
 
 const routes = [
@@ -77,6 +78,14 @@ const routes = [
             '~/renderer/components/devtools/converters/TextToAsciiBinary.vue'
           ),
       },
+      {
+        path: 'base64-converter',
+        name: RouterName.devtoolsBase64Converter,
+        component: () =>
+          import(
+            '~/renderer/components/devtools/converters/Base64Converter.vue'
+          ),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index ef9d76ed..3049d2e9 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -22,6 +22,10 @@ const nav = [
     label: i18n.t('devtools:converters.textToAscii.label'),
     name: RouterName.devtoolsTextToAscii,
   },
+  {
+    label: i18n.t('devtools:converters.base64.label'),
+    name: RouterName.devtoolsBase64Converter,
+  },
 ]
 </script>
 

From 78cc0de7d43b2d1f76eee4ef8dd663bf3ab5a4af Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Sun, 25 May 2025 06:37:08 +0300
Subject: [PATCH 09/31] feat(devtools): add JSON to YAML converter component

---
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  11 ++
 .../devtools/converters/JsonToYaml.vue        | 113 ++++++++++++++++++
 src/renderer/views/Devtools.vue               |  25 +++-
 4 files changed, 149 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/components/devtools/converters/JsonToYaml.vue

diff --git a/package.json b/package.json
index cc1c796f..63fe5141 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "i18next": "^24.2.2",
     "i18next-fs-backend": "^2.6.0",
     "interactjs": "^1.10.27",
+    "js-yaml": "^4.1.0",
     "ky": "^1.7.5",
     "lucide-vue-next": "^0.476.0",
     "marked": "^15.0.8",
@@ -75,6 +76,7 @@
     "@types/codemirror": "^5.60.15",
     "@types/dom-to-image": "^2.6.7",
     "@types/fs-extra": "^11.0.4",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.10.8",
     "@types/sanitize-html": "^2.15.0",
     "@vitejs/plugin-vue": "^5.2.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 273cb2ae..523e9920 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -62,6 +62,9 @@ importers:
       interactjs:
         specifier: ^1.10.27
         version: 1.10.27
+      js-yaml:
+        specifier: ^4.1.0
+        version: 4.1.0
       ky:
         specifier: ^1.7.5
         version: 1.7.5
@@ -132,6 +135,9 @@ importers:
       '@types/fs-extra':
         specifier: ^11.0.4
         version: 11.0.4
+      '@types/js-yaml':
+        specifier: ^4.0.9
+        version: 4.0.9
       '@types/node':
         specifier: ^22.10.8
         version: 22.13.1
@@ -1200,6 +1206,9 @@ packages:
   '@types/http-cache-semantics@4.0.4':
     resolution: {integrity: sha512-1m0bIFVc7eJWyve9S0RnuRgcQqF/Xd5QsUZAZeQFr1Q3/p9JWoQQEqmVy+DPTNpGXwhgIetAoYF8JSc33q29QA==}
 
+  '@types/js-yaml@4.0.9':
+    resolution: {integrity: sha512-k4MGaQl5TGo/iipqb2UDG2UwjXziSWkh0uysQelTlJpX1qGlpUZYm8PnO4DxG1qBomtJUdYJ6qR6xdIah10JLg==}
+
   '@types/json-schema@7.0.15':
     resolution: {integrity: sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==}
 
@@ -5940,6 +5949,8 @@ snapshots:
 
   '@types/http-cache-semantics@4.0.4': {}
 
+  '@types/js-yaml@4.0.9': {}
+
   '@types/json-schema@7.0.15': {}
 
   '@types/jsonfile@6.1.4':
diff --git a/src/renderer/components/devtools/converters/JsonToYaml.vue b/src/renderer/components/devtools/converters/JsonToYaml.vue
new file mode 100644
index 00000000..b0fe885d
--- /dev/null
+++ b/src/renderer/components/devtools/converters/JsonToYaml.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/shadcn/switch'
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+import yaml from 'js-yaml'
+
+const text = ref('')
+const error = ref('')
+
+const isYamlToJson = ref(false)
+
+const { copy } = useClipboard()
+
+const title = computed(() => i18n.t('devtools:converters.jsonToYaml.label'))
+const description = computed(() =>
+  i18n.t('devtools:converters.jsonToYaml.description'),
+)
+
+function convertJsonToYaml(jsonString: string): string {
+  if (!text.value) {
+    return ''
+  }
+
+  try {
+    error.value = ''
+    const jsonObject = JSON.parse(jsonString)
+    return yaml.dump(jsonObject, {
+      indent: 2,
+      lineWidth: -1,
+      noRefs: true,
+    })
+  }
+  catch {
+    error.value = 'Invalid JSON format'
+    return ''
+  }
+}
+
+function convertYamlToJson(yamlString: string): string {
+  if (!text.value) {
+    return ''
+  }
+
+  try {
+    error.value = ''
+    const yamlObject = yaml.load(yamlString)
+    return JSON.stringify(yamlObject, null, 4)
+  }
+  catch {
+    error.value = 'Invalid YAML format'
+    return ''
+  }
+}
+
+function convert() {
+  if (isYamlToJson.value) {
+    return convertYamlToJson(text.value)
+  }
+
+  return convertJsonToYaml(text.value)
+}
+
+const output = computed(() => convert())
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="flex items-center gap-2">
+      {{ i18n.t("devtools:converters.jsonToYaml.modes.jsonToYaml") }}
+      <Switch
+        :checked="isYamlToJson"
+        @update:checked="isYamlToJson = $event"
+      />
+      {{ i18n.t("devtools:converters.jsonToYaml.modes.yamlToJson") }}
+    </div>
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.input')"
+        :level="3"
+      />
+
+      <UiInput
+        v-model="text"
+        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :error="error"
+        type="textarea"
+        clearable
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.output')"
+        :level="3"
+      />
+
+      <UiInput
+        :model-value="output"
+        type="textarea"
+        readonly
+      />
+      <UiButton
+        size="md"
+        @click="copy(output)"
+      >
+        {{ i18n.t("button.copy") }}
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index 3049d2e9..7134e68c 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -9,7 +9,7 @@ const isActiveRoute = computed(() => {
   return (name: string) => route.name === name
 })
 
-const nav = [
+const convertersNav = [
   {
     label: i18n.t('devtools:converters.caseConverter.label'),
     name: RouterName.devtoolsTextCaseConverter,
@@ -26,6 +26,10 @@ const nav = [
     label: i18n.t('devtools:converters.base64.label'),
     name: RouterName.devtoolsBase64Converter,
   },
+  {
+    label: i18n.t('devtools:converters.jsonToYaml.label'),
+    name: RouterName.devtoolsJsonToYaml,
+  },
 ]
 </script>
 
@@ -36,8 +40,11 @@ const nav = [
   >
     <template #left>
       <PerfectScrollbar class="h-full px-2">
+        <div class="text-text-muted mb-2 text-[10px] uppercase">
+          {{ i18n.t("devtools:group.converters") }}
+        </div>
         <RouterLink
-          v-for="item in nav"
+          v-for="item in convertersNav"
           :key="item.name"
           class="cursor-default"
           :to="{ name: item.name }"
@@ -47,6 +54,20 @@ const nav = [
             :is-active="isActiveRoute(item.name)"
           />
         </RouterLink>
+        <div class="text-text-muted my-2 text-[10px] uppercase">
+          {{ i18n.t("devtools:group.crypto") }}
+        </div>
+        <!-- <RouterLink
+          v-for="item in cryptoNav"
+          :key="item.name"
+          class="cursor-default"
+          :to="{ name: item.name }"
+        >
+          <UiMenuItem
+            :label="item.label"
+            :is-active="isActiveRoute(item.name)"
+          />
+        </RouterLink> -->
       </PerfectScrollbar>
     </template>
     <template #right>

From 13349bda4818829c21c6e292d9478dd09a4965f0 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Sun, 25 May 2025 06:37:38 +0300
Subject: [PATCH 10/31] feat(styles): add custom scrollbar styles for better UI
 experience

---
 src/renderer/styles.css | 28 ++++++++++++++++++++++++++++
 1 file changed, 28 insertions(+)

diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 1f10dc0f..797561ac 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -11,6 +11,34 @@ body {
   color: var(--color-text)
 }
 
+.scrollbar {
+  scrollbar-width: auto;
+  scrollbar-color: var(--color-scrollbar) transparent;
+}
+
+.scrollbar::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+  background-color: var(--color-scrollbar);
+  border-radius: 3px;
+  opacity: 0.6;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+  opacity: 0.8;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:active {
+  opacity: 1;
+}
+
+
 
 @theme {
   --color-primary: oklch(50% 0.19 260);

From ef4c60d353ed46efeb35c3617ed1768b9e3fa43e Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Sun, 25 May 2025 06:37:49 +0300
Subject: [PATCH 11/31] feat(ui): add error prop to Input component for
 displaying validation messages

---
 src/renderer/components/ui/input/Input.vue | 86 ++++++++++++----------
 1 file changed, 48 insertions(+), 38 deletions(-)

diff --git a/src/renderer/components/ui/input/Input.vue b/src/renderer/components/ui/input/Input.vue
index ab6cc594..1dd7e20b 100644
--- a/src/renderer/components/ui/input/Input.vue
+++ b/src/renderer/components/ui/input/Input.vue
@@ -15,6 +15,7 @@ interface Props {
   disabled?: boolean
   readonly?: boolean
   rows?: number
+  error?: string
 }
 
 defineOptions({
@@ -53,44 +54,53 @@ watchEffect(() => {
 </script>
 
 <template>
-  <div class="relative flex">
-    <input
-      v-if="type !== 'textarea'"
-      ref="inputRef"
-      v-model="model"
-      :class="[
-        cn(variants({ variant }), props.class),
-        { 'pr-9': clearable && model },
-        { 'text-text-muted cursor-not-allowed': disabled },
-        { 'text-text-muted': readonly },
-      ]"
-      :placeholder="placeholder"
-      :type="type"
-      v-bind="attrs"
-      :disabled="disabled || readonly"
+  <div>
+    <div class="relative flex">
+      <input
+        v-if="type !== 'textarea'"
+        ref="inputRef"
+        v-model="model"
+        :class="[
+          cn(variants({ variant }), props.class),
+          { 'pr-9': clearable && model },
+          { 'text-text-muted cursor-not-allowed': disabled },
+          { 'text-text-muted': readonly },
+          { 'border-red-500': error },
+        ]"
+        :placeholder="placeholder"
+        :type="type"
+        v-bind="attrs"
+        :disabled="disabled || readonly"
+      >
+      <textarea
+        v-else
+        v-model="model"
+        class="scrollbar"
+        :class="[
+          cn(variants({ variant }), props.class),
+          { 'pr-9': clearable && model },
+          { 'text-text-muted cursor-not-allowed': disabled },
+          { 'text-text-muted': readonly },
+          { 'border-red-500': error },
+        ]"
+        :placeholder="placeholder"
+        :rows="rows || 3"
+        v-bind="attrs"
+        :disabled="disabled || readonly"
+      />
+      <div
+        v-if="clearable && model"
+        class="border-border absolute top-1/2 right-3 -translate-y-1/2 rounded-full border p-0.5"
+        @click="clear"
+      >
+        <X class="text-text-muted h-3 w-3" />
+      </div>
+    </div>
+    <div
+      v-if="error"
+      class="text-sm text-red-500"
     >
-    <textarea
-      v-else
-      v-model="model"
-      :class="[
-        cn(variants({ variant }), props.class),
-        { 'pr-9': clearable && model },
-        { 'text-text-muted cursor-not-allowed': disabled },
-        { 'text-text-muted': readonly },
-      ]"
-      :placeholder="placeholder"
-      :rows="rows || 3"
-      v-bind="attrs"
-      :disabled="disabled || readonly"
-    />
-    <UiButton
-      v-if="clearable && model"
-      class="absolute top-1/2 right-2 -translate-y-1/2"
-      variant="icon"
-      size="sm"
-      @click="clear"
-    >
-      <X class="h-3 w-3" />
-    </UiButton>
+      {{ error }}
+    </div>
   </div>
 </template>

From f688ede0d9e21599430169292ebe374d6c13937e Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Sun, 25 May 2025 06:38:13 +0300
Subject: [PATCH 12/31] feat(devtools): add route for JSON to YAML converter

---
 src/renderer/router/index.ts | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 5ae5a18e..1fc34970 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -13,6 +13,7 @@ export const RouterName = {
   devtoolsTextToUnicode: 'devtools/text/to-unicode',
   devtoolsTextToAscii: 'devtools/text/to-ascii',
   devtoolsBase64Converter: 'devtools/base64-converter',
+  devtoolsJsonToYaml: 'devtools/json-to-yaml',
 }
 
 const routes = [
@@ -62,29 +63,31 @@ const routes = [
         path: 'text/case-converter',
         name: RouterName.devtoolsTextCaseConverter,
         component: () =>
-          import('~/renderer/components/devtools/converters/CaseConverter.vue'),
+          import('@/components/devtools/converters/CaseConverter.vue'),
       },
       {
         path: 'text/to-unicode',
         name: RouterName.devtoolsTextToUnicode,
         component: () =>
-          import('~/renderer/components/devtools/converters/TextToUnicode.vue'),
+          import('@/components/devtools/converters/TextToUnicode.vue'),
       },
       {
         path: 'text/to-ascii',
         name: RouterName.devtoolsTextToAscii,
         component: () =>
-          import(
-            '~/renderer/components/devtools/converters/TextToAsciiBinary.vue'
-          ),
+          import('@/components/devtools/converters/TextToAsciiBinary.vue'),
       },
       {
         path: 'base64-converter',
         name: RouterName.devtoolsBase64Converter,
         component: () =>
-          import(
-            '~/renderer/components/devtools/converters/Base64Converter.vue'
-          ),
+          import('@/components/devtools/converters/Base64Converter.vue'),
+      },
+      {
+        path: 'json-to-yaml',
+        name: RouterName.devtoolsJsonToYaml,
+        component: () =>
+          import('@/components/devtools/converters/JsonToYaml.vue'),
       },
     ],
   },

From e17b2767f31a29e23f9bde4a2437676e3fa8255b Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 08:34:43 +0300
Subject: [PATCH 13/31] feat(devtools): add JSON to TOML converter component
 and routing

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   8 +
 .../devtools/converters/JsonToToml.vue        | 143 ++++++++++++++++++
 src/renderer/router/index.ts                  |   7 +
 src/renderer/views/Devtools.vue               |   4 +
 5 files changed, 163 insertions(+)
 create mode 100644 src/renderer/components/devtools/converters/JsonToToml.vue

diff --git a/package.json b/package.json
index 63fe5141..d655dfca 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "radix-vue": "^1.9.17",
     "sanitize-html": "^2.15.0",
     "tailwind-merge": "^3.0.2",
+    "toml": "^3.0.0",
     "vue-sonner": "^1.3.0",
     "vue3-perfect-scrollbar": "^2.0.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 523e9920..a983dd0a 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.0.2
+      toml:
+        specifier: ^3.0.0
+        version: 3.0.0
       vue-sonner:
         specifier: ^1.3.0
         version: 1.3.0
@@ -4533,6 +4536,9 @@ packages:
     resolution: {integrity: sha512-khrZo4buq4qVmsGzS5yQjKe/WsFvV8fGfOjDQN0q4iy9FjRfPWRgTFrU8u1R2iu/SfWLhY9WnCi4Jhdrcbtg+g==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
 
+  toml@3.0.0:
+    resolution: {integrity: sha512-y/mWCZinnvxjTKYhJ+pYxwD0mRLVvOtdS2Awbgxln6iEnt4rk0yBxeSBHkGJcPucRiG0e55mwWp+g/05rsrd6w==}
+
   touch@3.1.1:
     resolution: {integrity: sha512-r0eojU4bI8MnHr8c5bNo7lJDdI2qXlWWJk6a9EAFG7vbhTjElYhBVS3/miuE0uOuoLdb8Mc/rVfsmm6eo5o9GA==}
     hasBin: true
@@ -9810,6 +9816,8 @@ snapshots:
     dependencies:
       eslint-visitor-keys: 3.4.3
 
+  toml@3.0.0: {}
+
   touch@3.1.1: {}
 
   tree-kill@1.2.2: {}
diff --git a/src/renderer/components/devtools/converters/JsonToToml.vue b/src/renderer/components/devtools/converters/JsonToToml.vue
new file mode 100644
index 00000000..e041714e
--- /dev/null
+++ b/src/renderer/components/devtools/converters/JsonToToml.vue
@@ -0,0 +1,143 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/shadcn/switch'
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+import * as toml from 'toml'
+
+const text = ref('')
+const error = ref('')
+
+const isTomlToJson = ref(false)
+
+const { copy } = useClipboard()
+
+const title = computed(() => i18n.t('devtools:converters.jsonToToml.label'))
+const description = computed(() =>
+  i18n.t('devtools:converters.jsonToToml.description'),
+)
+
+function convertJsonToToml(jsonString: string): string {
+  if (!text.value) {
+    return ''
+  }
+
+  try {
+    error.value = ''
+    const jsonObject = JSON.parse(jsonString)
+    return tomlStringify(jsonObject)
+  }
+  catch {
+    error.value = 'Invalid JSON format'
+    return ''
+  }
+}
+
+function convertTomlToJson(tomlString: string): string {
+  if (!text.value) {
+    return ''
+  }
+
+  try {
+    error.value = ''
+    const tomlObject = toml.parse(tomlString)
+    return JSON.stringify(tomlObject, null, 4)
+  }
+  catch {
+    error.value = 'Invalid TOML format'
+    return ''
+  }
+}
+
+/**
+ * Простая функция для конвертации объекта в TOML строку
+ * Поскольку библиотека toml не имеет stringify, реализуем базовую версию
+ */
+function tomlStringify(obj: any, prefix = ''): string {
+  let result = ''
+
+  for (const [key, value] of Object.entries(obj)) {
+    const fullKey = prefix ? `${prefix}.${key}` : key
+
+    if (value === null || value === undefined) {
+      continue
+    }
+    else if (typeof value === 'object' && !Array.isArray(value)) {
+      // Объект - создаем секцию
+      result += `\n[${fullKey}]\n`
+      result += tomlStringify(value, fullKey)
+    }
+    else if (Array.isArray(value)) {
+      // Массив
+      result += `${key} = ${JSON.stringify(value)}\n`
+    }
+    else if (typeof value === 'string') {
+      // Строка
+      result += `${key} = "${value}"\n`
+    }
+    else {
+      // Число, булево значение
+      result += `${key} = ${value}\n`
+    }
+  }
+
+  return result
+}
+
+function convert() {
+  if (isTomlToJson.value) {
+    return convertTomlToJson(text.value)
+  }
+
+  return convertJsonToToml(text.value)
+}
+
+const output = computed(() => convert())
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="flex items-center gap-2">
+      {{ i18n.t("devtools:converters.jsonToToml.modes.jsonToToml") }}
+      <Switch
+        :checked="isTomlToJson"
+        @update:checked="isTomlToJson = $event"
+      />
+      {{ i18n.t("devtools:converters.jsonToToml.modes.tomlToJson") }}
+    </div>
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.input')"
+        :level="3"
+      />
+      <UiInput
+        v-model="text"
+        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :error="error"
+        type="textarea"
+        clearable
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.output')"
+        :level="3"
+      />
+
+      <UiInput
+        :model-value="output"
+        type="textarea"
+        readonly
+      />
+      <UiButton
+        size="md"
+        @click="copy(output)"
+      >
+        {{ i18n.t("button.copy") }}
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 1fc34970..bfca8868 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -14,6 +14,7 @@ export const RouterName = {
   devtoolsTextToAscii: 'devtools/text/to-ascii',
   devtoolsBase64Converter: 'devtools/base64-converter',
   devtoolsJsonToYaml: 'devtools/json-to-yaml',
+  devtoolsJsonToToml: 'devtools/json-to-toml',
 }
 
 const routes = [
@@ -89,6 +90,12 @@ const routes = [
         component: () =>
           import('@/components/devtools/converters/JsonToYaml.vue'),
       },
+      {
+        path: 'json-to-toml',
+        name: RouterName.devtoolsJsonToToml,
+        component: () =>
+          import('@/components/devtools/converters/JsonToToml.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index 7134e68c..7d5e65b5 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -30,6 +30,10 @@ const convertersNav = [
     label: i18n.t('devtools:converters.jsonToYaml.label'),
     name: RouterName.devtoolsJsonToYaml,
   },
+  {
+    label: i18n.t('devtools:converters.jsonToToml.label'),
+    name: RouterName.devtoolsJsonToToml,
+  },
 ]
 </script>
 

From 2a0f783bf1ddef23cceebea2dcf5ebf4cffdda82 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 08:35:24 +0300
Subject: [PATCH 14/31] chore: clean

---
 src/renderer/components/devtools/converters/JsonToToml.vue | 1 -
 src/renderer/components/devtools/converters/JsonToYaml.vue | 1 -
 2 files changed, 2 deletions(-)

diff --git a/src/renderer/components/devtools/converters/JsonToToml.vue b/src/renderer/components/devtools/converters/JsonToToml.vue
index e041714e..f4ad5813 100644
--- a/src/renderer/components/devtools/converters/JsonToToml.vue
+++ b/src/renderer/components/devtools/converters/JsonToToml.vue
@@ -126,7 +126,6 @@ const output = computed(() => convert())
         :title="i18n.t('devtools:form.output')"
         :level="3"
       />
-
       <UiInput
         :model-value="output"
         type="textarea"
diff --git a/src/renderer/components/devtools/converters/JsonToYaml.vue b/src/renderer/components/devtools/converters/JsonToYaml.vue
index b0fe885d..63d7cec9 100644
--- a/src/renderer/components/devtools/converters/JsonToYaml.vue
+++ b/src/renderer/components/devtools/converters/JsonToYaml.vue
@@ -82,7 +82,6 @@ const output = computed(() => convert())
         :title="i18n.t('devtools:form.input')"
         :level="3"
       />
-
       <UiInput
         v-model="text"
         :placeholder="i18n.t('devtools:form.placeholder.input')"

From a29b4f93c0656e9e53e84f46e635bc609effba10 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 08:41:29 +0300
Subject: [PATCH 15/31] feat(devtools): add JSON to XML converter component and
 routing

---
 .../devtools/converters/JsonToXml.vue         | 207 ++++++++++++++++++
 src/renderer/router/index.ts                  |   7 +
 src/renderer/views/Devtools.vue               |   4 +
 3 files changed, 218 insertions(+)
 create mode 100644 src/renderer/components/devtools/converters/JsonToXml.vue

diff --git a/src/renderer/components/devtools/converters/JsonToXml.vue b/src/renderer/components/devtools/converters/JsonToXml.vue
new file mode 100644
index 00000000..672515e4
--- /dev/null
+++ b/src/renderer/components/devtools/converters/JsonToXml.vue
@@ -0,0 +1,207 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/shadcn/switch'
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+
+const text = ref('')
+const error = ref('')
+
+const isXmlToJson = ref(false)
+
+const { copy } = useClipboard()
+
+const title = computed(() => i18n.t('devtools:converters.jsonToXml.label'))
+const description = computed(() =>
+  i18n.t('devtools:converters.jsonToXml.description'),
+)
+
+function objectToXml(obj: any, rootName = 'root', indent = 0): string {
+  const spaces = '  '.repeat(indent)
+
+  if (obj === null || obj === undefined) {
+    return `${spaces}<${rootName}></${rootName}>`
+  }
+
+  if (
+    typeof obj === 'string'
+    || typeof obj === 'number'
+    || typeof obj === 'boolean'
+  ) {
+    return `${spaces}<${rootName}>${obj}</${rootName}>`
+  }
+
+  if (Array.isArray(obj)) {
+    const items = obj
+      .map(item => objectToXml(item, 'item', indent + 1))
+      .join('\n')
+    return `${spaces}<${rootName}>\n${items}\n${spaces}</${rootName}>`
+  }
+
+  if (typeof obj === 'object') {
+    const entries = Object.entries(obj)
+      .map(([key, value]) => objectToXml(value, key, indent + 1))
+      .join('\n')
+    return `${spaces}<${rootName}>\n${entries}\n${spaces}</${rootName}>`
+  }
+
+  return `${spaces}<${rootName}>${obj}</${rootName}>`
+}
+
+function convertJsonToXml(jsonString: string): string {
+  if (!text.value) {
+    return ''
+  }
+
+  try {
+    error.value = ''
+    const jsonObject = JSON.parse(jsonString)
+    const xmlHeader = '<?xml version="1.0" encoding="UTF-8"?>\n'
+    const xmlBody = objectToXml(jsonObject, 'root', 0)
+    return xmlHeader + xmlBody
+  }
+  catch {
+    error.value = 'Invalid JSON format'
+    return ''
+  }
+}
+
+/**
+ * Простой парсер XML в JSON объект
+ * Использует DOMParser для парсинга XML
+ */
+function xmlElementToObject(element: Element): any {
+  const result: any = {}
+
+  // Обработка атрибутов
+  if (element.attributes.length > 0) {
+    result['@attributes'] = {}
+    for (let i = 0; i < element.attributes.length; i++) {
+      const attr = element.attributes[i]
+      result['@attributes'][attr.name] = attr.value
+    }
+  }
+
+  // Обработка дочерних элементов
+  const children = Array.from(element.children)
+
+  if (children.length === 0) {
+    // Если нет дочерних элементов, возвращаем текстовое содержимое
+    const textContent = element.textContent?.trim()
+    if (textContent) {
+      if (result['@attributes']) {
+        result['#text'] = textContent
+        return result
+      }
+      return textContent
+    }
+    return result['@attributes'] ? result : null
+  }
+
+  // Группировка дочерних элементов по имени тега
+  const childGroups: { [key: string]: Element[] } = {}
+  children.forEach((child) => {
+    const tagName = child.tagName
+    if (!childGroups[tagName]) {
+      childGroups[tagName] = []
+    }
+    childGroups[tagName].push(child)
+  })
+
+  // Конвертация групп в объект
+  Object.entries(childGroups).forEach(([tagName, elements]) => {
+    if (elements.length === 1) {
+      result[tagName] = xmlElementToObject(elements[0])
+    }
+    else {
+      result[tagName] = elements.map(el => xmlElementToObject(el))
+    }
+  })
+
+  return result
+}
+
+function convertXmlToJson(xmlString: string): string {
+  if (!text.value) {
+    return ''
+  }
+
+  try {
+    error.value = ''
+    const parser = new DOMParser()
+    const xmlDoc = parser.parseFromString(xmlString, 'text/xml')
+
+    // Проверка на ошибки парсинга
+    const parseError = xmlDoc.querySelector('parsererror')
+    if (parseError) {
+      throw new Error('XML parsing error')
+    }
+
+    const rootElement = xmlDoc.documentElement
+    const jsonObject = xmlElementToObject(rootElement)
+
+    return JSON.stringify({ [rootElement.tagName]: jsonObject }, null, 4)
+  }
+  catch {
+    error.value = 'Invalid XML format'
+    return ''
+  }
+}
+
+function convert() {
+  if (isXmlToJson.value) {
+    return convertXmlToJson(text.value)
+  }
+
+  return convertJsonToXml(text.value)
+}
+
+const output = computed(() => convert())
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="flex items-center gap-2">
+      {{ i18n.t("devtools:converters.jsonToXml.modes.jsonToXml") }}
+      <Switch
+        :checked="isXmlToJson"
+        @update:checked="isXmlToJson = $event"
+      />
+      {{ i18n.t("devtools:converters.jsonToXml.modes.xmlToJson") }}
+    </div>
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.input')"
+        :level="3"
+      />
+      <UiInput
+        v-model="text"
+        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :error="error"
+        type="textarea"
+        clearable
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.output')"
+        :level="3"
+      />
+
+      <UiInput
+        :model-value="output"
+        type="textarea"
+        readonly
+      />
+      <UiButton
+        size="md"
+        @click="copy(output)"
+      >
+        {{ i18n.t("button.copy") }}
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index bfca8868..99768546 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -15,6 +15,7 @@ export const RouterName = {
   devtoolsBase64Converter: 'devtools/base64-converter',
   devtoolsJsonToYaml: 'devtools/json-to-yaml',
   devtoolsJsonToToml: 'devtools/json-to-toml',
+  devtoolsJsonToXml: 'devtools/json-to-xml',
 }
 
 const routes = [
@@ -96,6 +97,12 @@ const routes = [
         component: () =>
           import('@/components/devtools/converters/JsonToToml.vue'),
       },
+      {
+        path: 'json-to-xml',
+        name: RouterName.devtoolsJsonToXml,
+        component: () =>
+          import('@/components/devtools/converters/JsonToXml.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index 7d5e65b5..56defa1a 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -34,6 +34,10 @@ const convertersNav = [
     label: i18n.t('devtools:converters.jsonToToml.label'),
     name: RouterName.devtoolsJsonToToml,
   },
+  {
+    label: i18n.t('devtools:converters.jsonToXml.label'),
+    name: RouterName.devtoolsJsonToXml,
+  },
 ]
 </script>
 

From 9475a678ace4d8b1554448fc802cbab986b624b5 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 09:59:34 +0300
Subject: [PATCH 16/31] feat(devtools): add hash generation component and
 routing

---
 package.json                                  |   2 +
 pnpm-lock.yaml                                |  16 +++
 .../components/devtools/crypto/Hash.vue       | 115 ++++++++++++++++++
 src/renderer/router/index.ts                  |   6 +
 src/renderer/views/Devtools.vue               |  11 +-
 5 files changed, 148 insertions(+), 2 deletions(-)
 create mode 100644 src/renderer/components/devtools/crypto/Hash.vue

diff --git a/package.json b/package.json
index d655dfca..a22a69eb 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "clsx": "^2.1.1",
     "codemirror": "^5.65.18",
     "codemirror-textmate": "^1.1.0",
+    "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
     "dom-to-image": "^2.6.0",
     "electron-store": "^8.2.0",
@@ -75,6 +76,7 @@
     "@tailwindcss/vite": "^4.0.9",
     "@types/better-sqlite3": "^7.6.12",
     "@types/codemirror": "^5.60.15",
+    "@types/crypto-js": "^4.2.2",
     "@types/dom-to-image": "^2.6.7",
     "@types/fs-extra": "^11.0.4",
     "@types/js-yaml": "^4.0.9",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a983dd0a..473a6ffa 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -38,6 +38,9 @@ importers:
       codemirror-textmate:
         specifier: ^1.1.0
         version: 1.1.0(codemirror@5.65.18)(onigasm@2.2.5)
+      crypto-js:
+        specifier: ^4.2.0
+        version: 4.2.0
       date-fns:
         specifier: ^4.1.0
         version: 4.1.0
@@ -132,6 +135,9 @@ importers:
       '@types/codemirror':
         specifier: ^5.60.15
         version: 5.60.15
+      '@types/crypto-js':
+        specifier: ^4.2.2
+        version: 4.2.2
       '@types/dom-to-image':
         specifier: ^2.6.7
         version: 2.6.7
@@ -1089,6 +1095,9 @@ packages:
   '@types/conventional-commits-parser@5.0.1':
     resolution: {integrity: sha512-7uz5EHdzz2TqoMfV7ee61Egf5y6NkcO4FB/1iCCQnbeiI1F3xzv3vK5dBCXUCLQgGYS+mUeigK1iKQzvED+QnQ==}
 
+  '@types/crypto-js@4.2.2':
+    resolution: {integrity: sha512-sDOLlVbHhXpAUAL0YHDUUwDZf3iN4Bwi4W6a0W0b+QcAezUbRtH4FVb+9J4h+XFPW7l/gQ9F8qC7P+Ec4k8QVQ==}
+
   '@types/d3-array@3.2.1':
     resolution: {integrity: sha512-Y2Jn2idRrLzUfAKV2LyRImR+y4oa2AntrgID95SHJxuMUrkNXmanDSed71sRNZysveJVt1hLLemQZIady0FpEg==}
 
@@ -1913,6 +1922,9 @@ packages:
     resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==}
     engines: {node: '>= 8'}
 
+  crypto-js@4.2.0:
+    resolution: {integrity: sha512-KALDyEYgpY+Rlob/iriUtjV6d5Eq+Y191A5g4UqLAi8CyGP9N1+FdVbkc1SxKc2r4YAYqG8JzO2KGL+AizD70Q==}
+
   css-select@5.1.0:
     resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
 
@@ -5810,6 +5822,8 @@ snapshots:
     dependencies:
       '@types/node': 22.13.1
 
+  '@types/crypto-js@4.2.2': {}
+
   '@types/d3-array@3.2.1': {}
 
   '@types/d3-axis@3.0.6':
@@ -6851,6 +6865,8 @@ snapshots:
       shebang-command: 2.0.0
       which: 2.0.2
 
+  crypto-js@4.2.0: {}
+
   css-select@5.1.0:
     dependencies:
       boolbase: 1.0.0
diff --git a/src/renderer/components/devtools/crypto/Hash.vue b/src/renderer/components/devtools/crypto/Hash.vue
new file mode 100644
index 00000000..bc93d79e
--- /dev/null
+++ b/src/renderer/components/devtools/crypto/Hash.vue
@@ -0,0 +1,115 @@
+<script setup lang="ts">
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+import md5 from 'crypto-js/md5'
+import ripemd160 from 'crypto-js/ripemd160'
+import sha1 from 'crypto-js/sha1'
+import sha3 from 'crypto-js/sha3'
+import sha224 from 'crypto-js/sha224'
+import sha256 from 'crypto-js/sha256'
+import sha384 from 'crypto-js/sha384'
+import sha512 from 'crypto-js/sha512'
+import { Copy } from 'lucide-vue-next'
+
+const { copy } = useClipboard()
+
+const text = ref('')
+
+const title = computed(() => i18n.t('devtools:crypto.hash.label'))
+const description = computed(() => i18n.t('devtools:crypto.hash.description'))
+
+const hashTypes = {
+  sha1: 'SHA-1',
+  sha224: 'SHA-224',
+  sha256: 'SHA-256',
+  sha384: 'SHA-384',
+  sha512: 'SHA-512',
+  sha3: 'SHA-3',
+  md5: 'MD5',
+  ripemd160: 'RIPEMD-160',
+}
+
+function convert(input: string, type: keyof typeof hashTypes): string {
+  if (!input)
+    return ''
+
+  switch (type) {
+    case 'sha1':
+      return sha1(input).toString()
+    case 'sha224':
+      return sha224(input).toString()
+    case 'sha256':
+      return sha256(input).toString()
+    case 'sha384':
+      return sha384(input).toString()
+    case 'sha512':
+      return sha512(input).toString()
+    case 'sha3':
+      return sha3(input).toString()
+    case 'md5':
+      return md5(input).toString()
+    case 'ripemd160':
+      return ripemd160(input).toString()
+  }
+}
+
+const output = computed(() => {
+  return Object.entries(hashTypes).map(([key, value]) => ({
+    label: value,
+    value: convert(text.value, key as keyof typeof hashTypes),
+  }))
+})
+
+function copyHash(type: keyof typeof hashTypes) {
+  copy(convert(text.value, type))
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.inputString')"
+        :level="3"
+      />
+      <UiInput
+        v-model="text"
+        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        clearable
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.outputString')"
+        :level="3"
+      />
+      <div
+        class="grid grid-cols-[max-content_1fr_max-content] items-center gap-4"
+      >
+        <template
+          v-for="[type, label] in Object.entries(hashTypes)"
+          :key="type"
+        >
+          <div class="text-text-secondary text-sm font-medium">
+            {{ label }}
+          </div>
+          <UiInput
+            :model-value="output.find((item) => item.label === label)?.value"
+            readonly
+          />
+          <UiButton
+            variant="icon"
+            size="md"
+            @click="copyHash(type as keyof typeof hashTypes)"
+          >
+            <Copy class="h-3 w-3" />
+          </UiButton>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 99768546..bbbadd94 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -16,6 +16,7 @@ export const RouterName = {
   devtoolsJsonToYaml: 'devtools/json-to-yaml',
   devtoolsJsonToToml: 'devtools/json-to-toml',
   devtoolsJsonToXml: 'devtools/json-to-xml',
+  devtoolsHash: 'devtools/hash',
 }
 
 const routes = [
@@ -103,6 +104,11 @@ const routes = [
         component: () =>
           import('@/components/devtools/converters/JsonToXml.vue'),
       },
+      {
+        path: 'hash',
+        name: RouterName.devtoolsHash,
+        component: () => import('@/components/devtools/crypto/Hash.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index 56defa1a..af56a612 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -39,6 +39,13 @@ const convertersNav = [
     name: RouterName.devtoolsJsonToXml,
   },
 ]
+
+const cryptoNav = [
+  {
+    label: i18n.t('devtools:crypto.hash.label'),
+    name: RouterName.devtoolsHash,
+  },
+]
 </script>
 
 <template>
@@ -65,7 +72,7 @@ const convertersNav = [
         <div class="text-text-muted my-2 text-[10px] uppercase">
           {{ i18n.t("devtools:group.crypto") }}
         </div>
-        <!-- <RouterLink
+        <RouterLink
           v-for="item in cryptoNav"
           :key="item.name"
           class="cursor-default"
@@ -75,7 +82,7 @@ const convertersNav = [
             :label="item.label"
             :is-active="isActiveRoute(item.name)"
           />
-        </RouterLink> -->
+        </RouterLink>
       </PerfectScrollbar>
     </template>
     <template #right>

From 2815f369a3a7204d03fde18315abde6ae1b7bff7 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 10:17:40 +0300
Subject: [PATCH 17/31] feat(devtools): add HMAC generation component and
 routing

---
 .../components/devtools/crypto/Hmac.vue       | 125 ++++++++++++++++++
 src/renderer/router/index.ts                  |   6 +
 src/renderer/views/Devtools.vue               |   4 +
 3 files changed, 135 insertions(+)
 create mode 100644 src/renderer/components/devtools/crypto/Hmac.vue

diff --git a/src/renderer/components/devtools/crypto/Hmac.vue b/src/renderer/components/devtools/crypto/Hmac.vue
new file mode 100644
index 00000000..9e5f044c
--- /dev/null
+++ b/src/renderer/components/devtools/crypto/Hmac.vue
@@ -0,0 +1,125 @@
+<script setup lang="ts">
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+import md5 from 'crypto-js/hmac-md5'
+import ripemd160 from 'crypto-js/hmac-ripemd160'
+import sha1 from 'crypto-js/hmac-sha1'
+import sha3 from 'crypto-js/hmac-sha3'
+import sha224 from 'crypto-js/hmac-sha224'
+import sha256 from 'crypto-js/hmac-sha256'
+import sha384 from 'crypto-js/hmac-sha384'
+import sha512 from 'crypto-js/hmac-sha512'
+import { Copy } from 'lucide-vue-next'
+
+const { copy } = useClipboard()
+
+const text = ref('')
+const secretKey = ref('')
+
+const title = computed(() => i18n.t('devtools:crypto.hmac.label'))
+const description = computed(() => i18n.t('devtools:crypto.hmac.description'))
+
+const hashTypes = {
+  sha1: 'SHA-1',
+  sha224: 'SHA-224',
+  sha256: 'SHA-256',
+  sha384: 'SHA-384',
+  sha512: 'SHA-512',
+  sha3: 'SHA-3',
+  md5: 'MD5',
+  ripemd160: 'RIPEMD-160',
+}
+
+function convert(input: string, type: keyof typeof hashTypes): string {
+  if (!input)
+    return ''
+
+  switch (type) {
+    case 'sha1':
+      return sha1(input, secretKey.value).toString()
+    case 'sha224':
+      return sha224(input, secretKey.value).toString()
+    case 'sha256':
+      return sha256(input, secretKey.value).toString()
+    case 'sha384':
+      return sha384(input, secretKey.value).toString()
+    case 'sha512':
+      return sha512(input, secretKey.value).toString()
+    case 'sha3':
+      return sha3(input, secretKey.value).toString()
+    case 'md5':
+      return md5(input, secretKey.value).toString()
+    case 'ripemd160':
+      return ripemd160(input, secretKey.value).toString()
+  }
+}
+
+const output = computed(() => {
+  return Object.entries(hashTypes).map(([key, value]) => ({
+    label: value,
+    value: convert(text.value, key as keyof typeof hashTypes),
+  }))
+})
+
+function copyHash(type: keyof typeof hashTypes) {
+  copy(convert(text.value, type))
+}
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.input')"
+        :level="3"
+      />
+      <UiInput
+        v-model="text"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
+        clearable
+      />
+      <UiHeading
+        :title="i18n.t('devtools:form.secretKey')"
+        :level="3"
+      />
+      <UiInput
+        v-model="secretKey"
+        :placeholder="i18n.t('devtools:form.placeholder.secretKey')"
+        clearable
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.output')"
+        :level="3"
+      />
+      <div
+        class="grid grid-cols-[max-content_1fr_max-content] items-center gap-4"
+      >
+        <template
+          v-for="[type, label] in Object.entries(hashTypes)"
+          :key="type"
+        >
+          <div class="text-text-secondary text-sm font-medium">
+            {{ label }}
+          </div>
+          <UiInput
+            :model-value="output.find((item) => item.label === label)?.value"
+            readonly
+          />
+          <UiButton
+            variant="icon"
+            size="md"
+            @click="copyHash(type as keyof typeof hashTypes)"
+          >
+            <Copy class="h-3 w-3" />
+          </UiButton>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index bbbadd94..c2cf30aa 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -17,6 +17,7 @@ export const RouterName = {
   devtoolsJsonToToml: 'devtools/json-to-toml',
   devtoolsJsonToXml: 'devtools/json-to-xml',
   devtoolsHash: 'devtools/hash',
+  devtoolsHmac: 'devtools/hmac',
 }
 
 const routes = [
@@ -109,6 +110,11 @@ const routes = [
         name: RouterName.devtoolsHash,
         component: () => import('@/components/devtools/crypto/Hash.vue'),
       },
+      {
+        path: 'hmac',
+        name: RouterName.devtoolsHmac,
+        component: () => import('@/components/devtools/crypto/Hmac.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index af56a612..9c42bd60 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -45,6 +45,10 @@ const cryptoNav = [
     label: i18n.t('devtools:crypto.hash.label'),
     name: RouterName.devtoolsHash,
   },
+  {
+    label: i18n.t('devtools:crypto.hmac.label'),
+    name: RouterName.devtoolsHmac,
+  },
 ]
 </script>
 

From c25321e8e8ab811d524fd8e6c7b4102d28e31396 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 10:22:31 +0300
Subject: [PATCH 18/31] fix(devtools): update input and output labels in
 converter components

---
 .../components/devtools/converters/Base64Converter.vue      | 6 +++---
 .../components/devtools/converters/CaseConverter.vue        | 6 +++---
 src/renderer/components/devtools/converters/JsonToToml.vue  | 2 +-
 src/renderer/components/devtools/converters/JsonToXml.vue   | 2 +-
 src/renderer/components/devtools/converters/JsonToYaml.vue  | 2 +-
 .../components/devtools/converters/TextToAsciiBinary.vue    | 6 +++---
 .../components/devtools/converters/TextToUnicode.vue        | 6 +++---
 src/renderer/components/devtools/crypto/Hash.vue            | 6 +++---
 8 files changed, 18 insertions(+), 18 deletions(-)

diff --git a/src/renderer/components/devtools/converters/Base64Converter.vue b/src/renderer/components/devtools/converters/Base64Converter.vue
index 95780921..f7cc93fe 100644
--- a/src/renderer/components/devtools/converters/Base64Converter.vue
+++ b/src/renderer/components/devtools/converters/Base64Converter.vue
@@ -63,19 +63,19 @@ const output = computed(() => {
     </div>
     <div class="space-y-2">
       <UiHeading
-        :title="i18n.t('devtools:form.inputString')"
+        :title="i18n.t('devtools:form.input')"
         :level="3"
       />
       <UiInput
         v-model="text"
-        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
         clearable
         type="textarea"
       />
     </div>
     <div class="space-y-4">
       <UiHeading
-        :title="i18n.t('devtools:form.outputString')"
+        :title="i18n.t('devtools:form.output')"
         :level="3"
       />
       <UiInput
diff --git a/src/renderer/components/devtools/converters/CaseConverter.vue b/src/renderer/components/devtools/converters/CaseConverter.vue
index bbcfc1ca..90bbf881 100644
--- a/src/renderer/components/devtools/converters/CaseConverter.vue
+++ b/src/renderer/components/devtools/converters/CaseConverter.vue
@@ -84,18 +84,18 @@ const output = computed(() => {
     />
     <div class="space-y-2">
       <UiHeading
-        :title="i18n.t('devtools:form.inputString')"
+        :title="i18n.t('devtools:form.input')"
         :level="3"
       />
       <UiInput
         v-model="text"
-        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
         clearable
       />
     </div>
     <div class="space-y-4">
       <UiHeading
-        :title="i18n.t('devtools:form.outputString')"
+        :title="i18n.t('devtools:form.output')"
         :level="3"
       />
       <div
diff --git a/src/renderer/components/devtools/converters/JsonToToml.vue b/src/renderer/components/devtools/converters/JsonToToml.vue
index f4ad5813..ca90f5a2 100644
--- a/src/renderer/components/devtools/converters/JsonToToml.vue
+++ b/src/renderer/components/devtools/converters/JsonToToml.vue
@@ -115,7 +115,7 @@ const output = computed(() => convert())
       />
       <UiInput
         v-model="text"
-        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
         :error="error"
         type="textarea"
         clearable
diff --git a/src/renderer/components/devtools/converters/JsonToXml.vue b/src/renderer/components/devtools/converters/JsonToXml.vue
index 672515e4..c02d05de 100644
--- a/src/renderer/components/devtools/converters/JsonToXml.vue
+++ b/src/renderer/components/devtools/converters/JsonToXml.vue
@@ -179,7 +179,7 @@ const output = computed(() => convert())
       />
       <UiInput
         v-model="text"
-        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
         :error="error"
         type="textarea"
         clearable
diff --git a/src/renderer/components/devtools/converters/JsonToYaml.vue b/src/renderer/components/devtools/converters/JsonToYaml.vue
index 63d7cec9..14d0f838 100644
--- a/src/renderer/components/devtools/converters/JsonToYaml.vue
+++ b/src/renderer/components/devtools/converters/JsonToYaml.vue
@@ -84,7 +84,7 @@ const output = computed(() => convert())
       />
       <UiInput
         v-model="text"
-        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
         :error="error"
         type="textarea"
         clearable
diff --git a/src/renderer/components/devtools/converters/TextToAsciiBinary.vue b/src/renderer/components/devtools/converters/TextToAsciiBinary.vue
index 368c7a39..2b9d2361 100644
--- a/src/renderer/components/devtools/converters/TextToAsciiBinary.vue
+++ b/src/renderer/components/devtools/converters/TextToAsciiBinary.vue
@@ -86,19 +86,19 @@ const output = computed(() => convert())
     </div>
     <div class="space-y-2">
       <UiHeading
-        :title="i18n.t('devtools:form.inputString')"
+        :title="i18n.t('devtools:form.input')"
         :level="3"
       />
       <UiInput
         v-model="text"
-        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
         clearable
         type="textarea"
       />
     </div>
     <div class="space-y-4">
       <UiHeading
-        :title="i18n.t('devtools:form.outputString')"
+        :title="i18n.t('devtools:form.output')"
         :level="3"
       />
       <UiInput
diff --git a/src/renderer/components/devtools/converters/TextToUnicode.vue b/src/renderer/components/devtools/converters/TextToUnicode.vue
index d72ce9cb..66bbd0f0 100644
--- a/src/renderer/components/devtools/converters/TextToUnicode.vue
+++ b/src/renderer/components/devtools/converters/TextToUnicode.vue
@@ -77,19 +77,19 @@ const { copy } = useClipboard()
     </div>
     <div class="space-y-2">
       <UiHeading
-        :title="i18n.t('devtools:form.inputString')"
+        :title="i18n.t('devtools:form.input')"
         :level="3"
       />
       <UiInput
         v-model="text"
-        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
         clearable
         type="textarea"
       />
     </div>
     <div class="space-y-4">
       <UiHeading
-        :title="i18n.t('devtools:form.outputString')"
+        :title="i18n.t('devtools:form.output')"
         :level="3"
       />
       <UiInput
diff --git a/src/renderer/components/devtools/crypto/Hash.vue b/src/renderer/components/devtools/crypto/Hash.vue
index bc93d79e..7dc77701 100644
--- a/src/renderer/components/devtools/crypto/Hash.vue
+++ b/src/renderer/components/devtools/crypto/Hash.vue
@@ -73,18 +73,18 @@ function copyHash(type: keyof typeof hashTypes) {
     />
     <div class="space-y-2">
       <UiHeading
-        :title="i18n.t('devtools:form.inputString')"
+        :title="i18n.t('devtools:form.input')"
         :level="3"
       />
       <UiInput
         v-model="text"
-        :placeholder="i18n.t('devtools:form.placeholder.input')"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
         clearable
       />
     </div>
     <div class="space-y-4">
       <UiHeading
-        :title="i18n.t('devtools:form.outputString')"
+        :title="i18n.t('devtools:form.output')"
         :level="3"
       />
       <div

From b3fceaacd53e2283269fe24e214850ebd00cad8a Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 10:51:30 +0300
Subject: [PATCH 19/31] feat(devtools): add password generation component and
 routing

---
 .../components/devtools/crypto/Password.vue   | 172 ++++++++++++++++++
 src/renderer/router/index.ts                  |   6 +
 src/renderer/views/Devtools.vue               |   4 +
 3 files changed, 182 insertions(+)
 create mode 100644 src/renderer/components/devtools/crypto/Password.vue

diff --git a/src/renderer/components/devtools/crypto/Password.vue b/src/renderer/components/devtools/crypto/Password.vue
new file mode 100644
index 00000000..9ed5c586
--- /dev/null
+++ b/src/renderer/components/devtools/crypto/Password.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/shadcn/switch'
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+
+const includeNumbers = ref(true)
+const includeSymbols = ref(true)
+const includeUppercase = ref(true)
+const includeLowercase = ref(true)
+const length = ref(12)
+const output = ref('')
+
+const title = computed(() => i18n.t('devtools:crypto.password.label'))
+const description = computed(() =>
+  i18n.t('devtools:crypto.password.description'),
+)
+
+const { copy } = useClipboard()
+
+function generatePassword() {
+  const numbers = '0123456789'
+  const symbols = '!@#$%^&*()_+-=[]{}|;:,.<>?'
+  const uppercase = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ'
+  const lowercase = 'abcdefghijklmnopqrstuvwxyz'
+
+  let availableChars = ''
+
+  if (includeNumbers.value) {
+    availableChars += numbers
+  }
+
+  if (includeSymbols.value) {
+    availableChars += symbols
+  }
+
+  if (includeUppercase.value) {
+    availableChars += uppercase
+  }
+
+  if (includeLowercase.value) {
+    availableChars += lowercase
+  }
+
+  if (availableChars.length === 0) {
+    output.value = ''
+    return
+  }
+
+  let password = ''
+
+  const requiredChars = []
+  if (includeNumbers.value)
+    requiredChars.push(numbers[Math.floor(Math.random() * numbers.length)])
+  if (includeSymbols.value)
+    requiredChars.push(symbols[Math.floor(Math.random() * symbols.length)])
+  if (includeUppercase.value)
+    requiredChars.push(uppercase[Math.floor(Math.random() * uppercase.length)])
+  if (includeLowercase.value)
+    requiredChars.push(lowercase[Math.floor(Math.random() * lowercase.length)])
+
+  password += requiredChars.join('')
+
+  for (let i = password.length; i < length.value; i++) {
+    const randomIndex = Math.floor(Math.random() * availableChars.length)
+    password += availableChars[randomIndex]
+  }
+
+  const passwordArray = password.split('')
+  for (let i = passwordArray.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [passwordArray[i], passwordArray[j]] = [passwordArray[j], passwordArray[i]]
+  }
+
+  output.value = passwordArray.join('')
+}
+
+watch(
+  [includeNumbers, includeSymbols, includeUppercase, includeLowercase, length],
+  () => {
+    if (output.value) {
+      generatePassword()
+    }
+  },
+)
+
+watch(length, (v) => {
+  if (v > 2048) {
+    nextTick(() => {
+      length.value = 2048
+    })
+  }
+})
+
+onMounted(() => {
+  generatePassword()
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.length')"
+        :level="3"
+      />
+      <UiInput
+        v-model.number="length"
+        type="number"
+        :placeholder="i18n.t('devtools:form.length')"
+        description="Max 2048"
+      />
+      <div class="flex gap-2">
+        <div class="flex items-center gap-2">
+          <Switch
+            :checked="includeNumbers"
+            @update:checked="includeNumbers = $event"
+          />
+          {{ i18n.t("devtools:form.numbers") }}
+        </div>
+        <div class="flex items-center gap-2">
+          <Switch
+            :checked="includeSymbols"
+            @update:checked="includeSymbols = $event"
+          />
+          {{ i18n.t("devtools:form.symbols") }}
+        </div>
+        <div class="flex items-center gap-2">
+          <Switch
+            :checked="includeUppercase"
+            @update:checked="includeUppercase = $event"
+          />
+          {{ i18n.t("devtools:form.uppercase") }}
+        </div>
+        <div class="flex items-center gap-2">
+          <Switch
+            :checked="includeLowercase"
+            @update:checked="includeLowercase = $event"
+          />
+          {{ i18n.t("devtools:form.lowercase") }}
+        </div>
+      </div>
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.output')"
+        :level="3"
+      />
+      <UiInput
+        :model-value="output"
+        readonly
+      />
+      <div class="flex items-center gap-2">
+        <UiButton
+          size="md"
+          @click="generatePassword()"
+        >
+          {{ i18n.t("button.generate") }}
+        </UiButton>
+        <UiButton
+          size="md"
+          @click="copy(output)"
+        >
+          {{ i18n.t("button.copy") }}
+        </UiButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index c2cf30aa..a815b681 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -18,6 +18,7 @@ export const RouterName = {
   devtoolsJsonToXml: 'devtools/json-to-xml',
   devtoolsHash: 'devtools/hash',
   devtoolsHmac: 'devtools/hmac',
+  devtoolsPassword: 'devtools/password',
 }
 
 const routes = [
@@ -115,6 +116,11 @@ const routes = [
         name: RouterName.devtoolsHmac,
         component: () => import('@/components/devtools/crypto/Hmac.vue'),
       },
+      {
+        path: 'password',
+        name: RouterName.devtoolsPassword,
+        component: () => import('@/components/devtools/crypto/Password.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index 9c42bd60..075bdaa5 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -49,6 +49,10 @@ const cryptoNav = [
     label: i18n.t('devtools:crypto.hmac.label'),
     name: RouterName.devtoolsHmac,
   },
+  {
+    label: i18n.t('devtools:crypto.password.label'),
+    name: RouterName.devtoolsPassword,
+  },
 ]
 </script>
 

From 92a44d7c70de5593a24fba1488e2bd8a943fb753 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 10:51:42 +0300
Subject: [PATCH 20/31] feat(ui): add description prop to Input component for
 additional context

---
 src/renderer/components/ui/input/Input.vue | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/src/renderer/components/ui/input/Input.vue b/src/renderer/components/ui/input/Input.vue
index 1dd7e20b..1466cd35 100644
--- a/src/renderer/components/ui/input/Input.vue
+++ b/src/renderer/components/ui/input/Input.vue
@@ -16,6 +16,7 @@ interface Props {
   readonly?: boolean
   rows?: number
   error?: string
+  description?: string
 }
 
 defineOptions({
@@ -88,6 +89,7 @@ watchEffect(() => {
         v-bind="attrs"
         :disabled="disabled || readonly"
       />
+
       <div
         v-if="clearable && model"
         class="border-border absolute top-1/2 right-3 -translate-y-1/2 rounded-full border p-0.5"
@@ -96,6 +98,12 @@ watchEffect(() => {
         <X class="text-text-muted h-3 w-3" />
       </div>
     </div>
+    <div
+      v-if="description"
+      class="text-text-muted mt-1 text-xs"
+    >
+      {{ description }}
+    </div>
     <div
       v-if="error"
       class="text-sm text-red-500"

From 45634dc4d14683bb641e3177cae2c034fcd0fad5 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 13:17:05 +0300
Subject: [PATCH 21/31] feat(devtools): add UUID generation component and
 routing

---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   3 +
 .../components/devtools/crypto/Uuid.vue       | 109 ++++++++++++++++++
 src/renderer/router/index.ts                  |   6 +
 src/renderer/views/Devtools.vue               |   4 +
 5 files changed, 123 insertions(+)
 create mode 100644 src/renderer/components/devtools/crypto/Uuid.vue

diff --git a/package.json b/package.json
index a22a69eb..27fe9b4f 100644
--- a/package.json
+++ b/package.json
@@ -64,6 +64,7 @@
     "sanitize-html": "^2.15.0",
     "tailwind-merge": "^3.0.2",
     "toml": "^3.0.0",
+    "uuid": "^11.1.0",
     "vue-sonner": "^1.3.0",
     "vue3-perfect-scrollbar": "^2.0.0"
   },
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 473a6ffa..5cb3cc93 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -104,6 +104,9 @@ importers:
       toml:
         specifier: ^3.0.0
         version: 3.0.0
+      uuid:
+        specifier: ^11.1.0
+        version: 11.1.0
       vue-sonner:
         specifier: ^1.3.0
         version: 1.3.0
diff --git a/src/renderer/components/devtools/crypto/Uuid.vue b/src/renderer/components/devtools/crypto/Uuid.vue
new file mode 100644
index 00000000..5a919c49
--- /dev/null
+++ b/src/renderer/components/devtools/crypto/Uuid.vue
@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import * as Select from '@/components/ui/shadcn/select'
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+import { v1, v4 } from 'uuid'
+
+type UuidType = 'v1' | 'v4'
+
+const uuids = ref('')
+const amount = ref(1)
+const type = ref<UuidType>('v4')
+
+const uuidTypeOptions = [
+  {
+    label: 'v1',
+    value: 'v1',
+  },
+  {
+    label: 'v4',
+    value: 'v4',
+  },
+]
+
+const title = computed(() => i18n.t('devtools:crypto.uuid.label'))
+const description = computed(() => i18n.t('devtools:crypto.uuid.description'))
+
+const { copy } = useClipboard()
+
+function generateUuid(type: UuidType) {
+  if (type === 'v1') {
+    uuids.value = Array.from({ length: amount.value }, () => v1()).join('\n')
+  }
+  else {
+    uuids.value = Array.from({ length: amount.value }, () => v4()).join('\n')
+  }
+}
+
+watch(amount, (v) => {
+  if (v > 100) {
+    nextTick(() => {
+      amount.value = 100
+    })
+  }
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.amount')"
+        :level="3"
+      />
+      <UiInput
+        v-model="amount"
+        type="number"
+        description="Max 100"
+        class="w-64"
+      />
+      <UiHeading
+        :title="i18n.t('devtools:form.version')"
+        :level="3"
+      />
+      <Select.Select v-model="type">
+        <Select.SelectTrigger class="w-64">
+          <Select.SelectValue placeholder="Select a language" />
+        </Select.SelectTrigger>
+        <Select.SelectContent>
+          <Select.SelectItem
+            v-for="i in uuidTypeOptions"
+            :key="i.value"
+            :value="i.value"
+          >
+            {{ i.label }}
+          </Select.SelectItem>
+        </Select.SelectContent>
+      </Select.Select>
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.output')"
+        :level="3"
+      />
+      <UiInput
+        :model-value="uuids"
+        type="textarea"
+        readonly
+      />
+      <div class="flex items-center gap-2">
+        <UiButton
+          size="md"
+          @click="generateUuid(type)"
+        >
+          {{ i18n.t("button.generate") }}
+        </UiButton>
+        <UiButton
+          size="md"
+          @click="copy(uuids)"
+        >
+          {{ i18n.t("button.copy") }}
+        </UiButton>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index a815b681..30af7d8c 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -19,6 +19,7 @@ export const RouterName = {
   devtoolsHash: 'devtools/hash',
   devtoolsHmac: 'devtools/hmac',
   devtoolsPassword: 'devtools/password',
+  devtoolsUuid: 'devtools/uuid',
 }
 
 const routes = [
@@ -121,6 +122,11 @@ const routes = [
         name: RouterName.devtoolsPassword,
         component: () => import('@/components/devtools/crypto/Password.vue'),
       },
+      {
+        path: 'uuid',
+        name: RouterName.devtoolsUuid,
+        component: () => import('@/components/devtools/crypto/Uuid.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index 075bdaa5..f7b4dd61 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -53,6 +53,10 @@ const cryptoNav = [
     label: i18n.t('devtools:crypto.password.label'),
     name: RouterName.devtoolsPassword,
   },
+  {
+    label: i18n.t('devtools:crypto.uuid.label'),
+    name: RouterName.devtoolsUuid,
+  },
 ]
 </script>
 

From b7feef32e11cd729128486439a37db6a5915bd00 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 13:17:46 +0300
Subject: [PATCH 22/31] style(devtools): adjust input width for password
 component

---
 src/renderer/components/devtools/crypto/Password.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/renderer/components/devtools/crypto/Password.vue b/src/renderer/components/devtools/crypto/Password.vue
index 9ed5c586..260d3de0 100644
--- a/src/renderer/components/devtools/crypto/Password.vue
+++ b/src/renderer/components/devtools/crypto/Password.vue
@@ -112,6 +112,7 @@ onMounted(() => {
         type="number"
         :placeholder="i18n.t('devtools:form.length')"
         description="Max 2048"
+        class="w-64"
       />
       <div class="flex gap-2">
         <div class="flex items-center gap-2">

From 8360e7b43d7cce6a981fe06fb371a215fca50ef5 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 13:24:13 +0300
Subject: [PATCH 23/31] chore(devtools): update localization keys for
 converters and crypto sections

---
 src/renderer/views/Devtools.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index f7b4dd61..10f3fca1 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -68,7 +68,7 @@ const cryptoNav = [
     <template #left>
       <PerfectScrollbar class="h-full px-2">
         <div class="text-text-muted mb-2 text-[10px] uppercase">
-          {{ i18n.t("devtools:group.converters") }}
+          {{ i18n.t("devtools:converters.label") }}
         </div>
         <RouterLink
           v-for="item in convertersNav"
@@ -82,7 +82,7 @@ const cryptoNav = [
           />
         </RouterLink>
         <div class="text-text-muted my-2 text-[10px] uppercase">
-          {{ i18n.t("devtools:group.crypto") }}
+          {{ i18n.t("devtools:crypto.label") }}
         </div>
         <RouterLink
           v-for="item in cryptoNav"

From 5d6feaff0188176d05ca150c06b5c19ddb65f098 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 13:49:51 +0300
Subject: [PATCH 24/31] feat(devtools): add URL parser component and routing

---
 .../components/devtools/web/UrlParser.vue     | 165 ++++++++++++++++++
 src/renderer/router/index.ts                  |  16 +-
 src/renderer/views/Devtools.vue               |  23 ++-
 3 files changed, 198 insertions(+), 6 deletions(-)
 create mode 100644 src/renderer/components/devtools/web/UrlParser.vue

diff --git a/src/renderer/components/devtools/web/UrlParser.vue b/src/renderer/components/devtools/web/UrlParser.vue
new file mode 100644
index 00000000..4d601138
--- /dev/null
+++ b/src/renderer/components/devtools/web/UrlParser.vue
@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+import { Copy } from 'lucide-vue-next'
+
+const inputRrl = ref('')
+
+const title = computed(() => i18n.t('devtools:web.urlParser.label'))
+const description = computed(() =>
+  i18n.t('devtools:web.urlParser.description'),
+)
+
+const { copy } = useClipboard()
+
+const url = computed(() => {
+  let url: URL | null = null
+
+  try {
+    url = new URL(inputRrl.value)
+  }
+  catch {
+    url = null
+  }
+
+  return url
+})
+
+const protocol = computed(() => url.value?.protocol)
+const hash = computed(() => url.value?.hash)
+const query = computed(() => url.value?.search)
+const pathname = computed(() => url.value?.pathname)
+const host = computed(() => url.value?.host)
+const hostname = computed(() => url.value?.hostname)
+const origin = computed(() => url.value?.origin)
+const port = computed(() => url.value?.port)
+
+const output = computed(() => {
+  return {
+    protocol: {
+      label: 'Protocol',
+      value: protocol.value,
+    },
+    hash: {
+      label: 'Hash',
+      value: hash.value,
+    },
+    query: {
+      label: 'Query',
+      value: query.value,
+    },
+    pathname: {
+      label: 'Pathname',
+      value: pathname.value,
+    },
+    host: {
+      label: 'Host',
+      value: host.value,
+    },
+    port: {
+      label: 'Port',
+      value: port.value,
+    },
+    hostname: {
+      label: 'Hostname',
+      value: hostname.value,
+    },
+    origin: {
+      label: 'Origin',
+      value: origin.value,
+    },
+  }
+})
+
+const queryStringKeyValue = computed(() => {
+  if (!query.value)
+    return []
+
+  return query.value
+    .slice(1)
+    .split('&')
+    .map((item) => {
+      const [key, value] = item.split('=')
+      return {
+        key,
+        value,
+      }
+    })
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.inputUrl')"
+        :level="3"
+      />
+      <UiInput
+        v-model="inputRrl"
+        :placeholder="i18n.t('devtools:form.placeholder.url')"
+        clearable
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.parsedUrl')"
+        :level="3"
+      />
+      <div
+        class="grid grid-cols-[max-content_1fr_max-content] items-center gap-4"
+      >
+        <template
+          v-for="[key, value] in Object.entries(output)"
+          :key="key"
+        >
+          <div class="font-medium">
+            {{ value.label }}
+          </div>
+          <UiInput
+            :model-value="value.value"
+            readonly
+          />
+          <UiButton
+            variant="icon"
+            size="md"
+            @click="copy(value.value || '')"
+          >
+            <Copy class="h-3 w-3" />
+          </UiButton>
+        </template>
+      </div>
+      <UiHeading
+        :title="i18n.t('devtools:form.splitQueryString')"
+        :level="3"
+      />
+      <div
+        class="grid grid-cols-[max-content_1fr_max-content] items-center gap-4"
+      >
+        <template
+          v-for="item in queryStringKeyValue"
+          :key="item.key"
+        >
+          <div class="font-medium">
+            {{ item.key }}
+          </div>
+          <UiInput
+            :model-value="item.value"
+            readonly
+          />
+          <UiButton
+            variant="icon"
+            size="md"
+            @click="copy(item.value || '')"
+          >
+            <Copy class="h-3 w-3" />
+          </UiButton>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 30af7d8c..fd975bb8 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -9,9 +9,9 @@ export const RouterName = {
   preferencesEditor: 'preferences/editor',
   markdownPresentation: 'markdown-presentation',
   devtools: 'devtools',
-  devtoolsTextCaseConverter: 'devtools/text/case-converter',
-  devtoolsTextToUnicode: 'devtools/text/to-unicode',
-  devtoolsTextToAscii: 'devtools/text/to-ascii',
+  devtoolsCaseConverter: 'devtools/case-converter',
+  devtoolsTextToUnicode: 'devtools/text-to-unicode',
+  devtoolsTextToAscii: 'devtools/text-to-ascii',
   devtoolsBase64Converter: 'devtools/base64-converter',
   devtoolsJsonToYaml: 'devtools/json-to-yaml',
   devtoolsJsonToToml: 'devtools/json-to-toml',
@@ -20,7 +20,8 @@ export const RouterName = {
   devtoolsHmac: 'devtools/hmac',
   devtoolsPassword: 'devtools/password',
   devtoolsUuid: 'devtools/uuid',
-}
+  devtoolsUrlParser: 'devtools/url-parser',
+} as const
 
 const routes = [
   {
@@ -67,7 +68,7 @@ const routes = [
     children: [
       {
         path: 'text/case-converter',
-        name: RouterName.devtoolsTextCaseConverter,
+        name: RouterName.devtoolsCaseConverter,
         component: () =>
           import('@/components/devtools/converters/CaseConverter.vue'),
       },
@@ -127,6 +128,11 @@ const routes = [
         name: RouterName.devtoolsUuid,
         component: () => import('@/components/devtools/crypto/Uuid.vue'),
       },
+      {
+        path: 'url-parser',
+        name: RouterName.devtoolsUrlParser,
+        component: () => import('@/components/devtools/web/UrlParser.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index 10f3fca1..fc341b31 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -12,7 +12,7 @@ const isActiveRoute = computed(() => {
 const convertersNav = [
   {
     label: i18n.t('devtools:converters.caseConverter.label'),
-    name: RouterName.devtoolsTextCaseConverter,
+    name: RouterName.devtoolsCaseConverter,
   },
   {
     label: i18n.t('devtools:converters.textToUnicode.label'),
@@ -58,6 +58,13 @@ const cryptoNav = [
     name: RouterName.devtoolsUuid,
   },
 ]
+
+const webNav = [
+  {
+    label: i18n.t('devtools:web.urlParser.label'),
+    name: RouterName.devtoolsUrlParser,
+  },
+]
 </script>
 
 <template>
@@ -95,6 +102,20 @@ const cryptoNav = [
             :is-active="isActiveRoute(item.name)"
           />
         </RouterLink>
+        <div class="text-text-muted my-2 text-[10px] uppercase">
+          {{ i18n.t("devtools:web.label") }}
+        </div>
+        <RouterLink
+          v-for="item in webNav"
+          :key="item.name"
+          class="cursor-default"
+          :to="{ name: item.name }"
+        >
+          <UiMenuItem
+            :label="item.label"
+            :is-active="isActiveRoute(item.name)"
+          />
+        </RouterLink>
       </PerfectScrollbar>
     </template>
     <template #right>

From 823c69afc01053370fa3eb140922ed559785d9bd Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 16:09:00 +0300
Subject: [PATCH 25/31] feat(devtools): add slugify component and routing

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                |  9 +++
 .../components/devtools/web/Slugify.vue       | 57 +++++++++++++++++++
 src/renderer/router/index.ts                  |  6 ++
 src/renderer/views/Devtools.vue               |  4 ++
 5 files changed, 77 insertions(+)
 create mode 100644 src/renderer/components/devtools/web/Slugify.vue

diff --git a/package.json b/package.json
index 27fe9b4f..504906b1 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,7 @@
     "prettier": "^3.5.3",
     "radix-vue": "^1.9.17",
     "sanitize-html": "^2.15.0",
+    "slugify": "^1.6.6",
     "tailwind-merge": "^3.0.2",
     "toml": "^3.0.0",
     "uuid": "^11.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 5cb3cc93..ea92faca 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -98,6 +98,9 @@ importers:
       sanitize-html:
         specifier: ^2.15.0
         version: 2.15.0
+      slugify:
+        specifier: ^1.6.6
+        version: 1.6.6
       tailwind-merge:
         specifier: ^3.0.2
         version: 3.0.2
@@ -4355,6 +4358,10 @@ packages:
     resolution: {integrity: sha512-bSiSngZ/jWeX93BqeIAbImyTbEihizcwNjFoRUIY/T1wWQsfsm2Vw1agPKylXvQTU7iASGdHhyqRlqQzfz+Htg==}
     engines: {node: '>=18'}
 
+  slugify@1.6.6:
+    resolution: {integrity: sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw==}
+    engines: {node: '>=8.0.0'}
+
   smart-buffer@4.2.0:
     resolution: {integrity: sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==}
     engines: {node: '>= 6.0.0', npm: '>= 3.0.0'}
@@ -9632,6 +9639,8 @@ snapshots:
       ansi-styles: 6.2.1
       is-fullwidth-code-point: 5.0.0
 
+  slugify@1.6.6: {}
+
   smart-buffer@4.2.0: {}
 
   socks-proxy-agent@7.0.0:
diff --git a/src/renderer/components/devtools/web/Slugify.vue b/src/renderer/components/devtools/web/Slugify.vue
new file mode 100644
index 00000000..24c9625c
--- /dev/null
+++ b/src/renderer/components/devtools/web/Slugify.vue
@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+import slugify from 'slugify'
+
+const input = ref('')
+
+const title = computed(() => i18n.t('devtools:web.slugify.label'))
+const description = computed(() => i18n.t('devtools:web.slugify.description'))
+
+const { copy } = useClipboard()
+
+function slugifyText(text: string) {
+  return slugify(text, {
+    lower: true,
+    strict: true,
+  })
+}
+
+const output = computed(() => slugifyText(input.value))
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.input')"
+        :level="3"
+      />
+      <UiInput
+        v-model="input"
+        :placeholder="i18n.t('devtools:form.placeholder.text')"
+        clearable
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.output')"
+        :level="3"
+      />
+      <UiInput
+        :model-value="output"
+        readonly
+      />
+      <UiButton
+        size="md"
+        @click="copy(output)"
+      >
+        {{ i18n.t("button.copy") }}
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index fd975bb8..dcae5033 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -21,6 +21,7 @@ export const RouterName = {
   devtoolsPassword: 'devtools/password',
   devtoolsUuid: 'devtools/uuid',
   devtoolsUrlParser: 'devtools/url-parser',
+  devtoolsSlugify: 'devtools/slugify',
 } as const
 
 const routes = [
@@ -133,6 +134,11 @@ const routes = [
         name: RouterName.devtoolsUrlParser,
         component: () => import('@/components/devtools/web/UrlParser.vue'),
       },
+      {
+        path: 'slugify',
+        name: RouterName.devtoolsSlugify,
+        component: () => import('@/components/devtools/web/Slugify.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index fc341b31..d151eea4 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -64,6 +64,10 @@ const webNav = [
     label: i18n.t('devtools:web.urlParser.label'),
     name: RouterName.devtoolsUrlParser,
   },
+  {
+    label: i18n.t('devtools:web.slugify.label'),
+    name: RouterName.devtoolsSlugify,
+  },
 ]
 </script>
 

From 8c6ab29e6333bdf6c4378f4b805ab01542e31a3d Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 16:11:06 +0300
Subject: [PATCH 26/31] fix(devtools): improve Base64 encoding and decoding for
 UTF-8 support

---
 .../devtools/converters/Base64Converter.vue         | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/renderer/components/devtools/converters/Base64Converter.vue b/src/renderer/components/devtools/converters/Base64Converter.vue
index f7cc93fe..4dc45dbf 100644
--- a/src/renderer/components/devtools/converters/Base64Converter.vue
+++ b/src/renderer/components/devtools/converters/Base64Converter.vue
@@ -13,10 +13,11 @@ const description = computed(() =>
   i18n.t('devtools:converters.base64.description'),
 )
 
-// Функция для конвертации текста в Base64
 function textToBase64(input: string): string {
   try {
-    return btoa(unescape(encodeURIComponent(input)))
+    const encoder = new TextEncoder()
+    const data = encoder.encode(input)
+    return btoa(String.fromCharCode(...data))
   }
   catch (error) {
     console.error('Error encoding to Base64:', error)
@@ -26,7 +27,13 @@ function textToBase64(input: string): string {
 
 function base64ToText(input: string): string {
   try {
-    return decodeURIComponent(escape(atob(input)))
+    const binaryString = atob(input)
+    const bytes = new Uint8Array(binaryString.length)
+    for (let i = 0; i < binaryString.length; i++) {
+      bytes[i] = binaryString.charCodeAt(i)
+    }
+    const decoder = new TextDecoder()
+    return decoder.decode(bytes)
   }
   catch (error) {
     console.error('Error decoding from Base64:', error)

From e9450da4878bf59e4faf74daa65e97c96d2b675c Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Mon, 26 May 2025 16:16:36 +0300
Subject: [PATCH 27/31] fix(main-menu): update routing to use
 devtoolsCaseConverter

---
 src/renderer/ipc/listeners/main-menu.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/renderer/ipc/listeners/main-menu.ts b/src/renderer/ipc/listeners/main-menu.ts
index b2a33506..e1e85648 100644
--- a/src/renderer/ipc/listeners/main-menu.ts
+++ b/src/renderer/ipc/listeners/main-menu.ts
@@ -17,7 +17,7 @@ export function registerMainMenuListeners() {
   })
 
   ipc.on('main-menu:goto-devtools', () => {
-    router.push({ name: RouterName.devtools })
+    router.push({ name: RouterName.devtoolsCaseConverter })
   })
 
   ipc.on('main-menu:new-snippet', () => {

From a596a121aa5292e51e072b2ca261559f55973f3b Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Tue, 27 May 2025 08:09:43 +0300
Subject: [PATCH 28/31] feat(devtools): add URL encoder component and routing

---
 .../components/devtools/web/UrlEncoder.vue    | 66 +++++++++++++++++++
 src/renderer/router/index.ts                  |  6 ++
 src/renderer/views/Devtools.vue               |  4 ++
 3 files changed, 76 insertions(+)
 create mode 100644 src/renderer/components/devtools/web/UrlEncoder.vue

diff --git a/src/renderer/components/devtools/web/UrlEncoder.vue b/src/renderer/components/devtools/web/UrlEncoder.vue
new file mode 100644
index 00000000..45b17e14
--- /dev/null
+++ b/src/renderer/components/devtools/web/UrlEncoder.vue
@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { Switch } from '@/components/ui/shadcn/switch'
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+
+const input = ref('')
+const isUrlDecode = ref(false)
+
+const title = computed(() => i18n.t('devtools:web.urlEncoder.label'))
+const description = computed(() =>
+  i18n.t('devtools:web.urlEncoder.description'),
+)
+
+const { copy } = useClipboard()
+
+const output = computed(() => {
+  if (isUrlDecode.value) {
+    return decodeURIComponent(input.value)
+  }
+  return encodeURIComponent(input.value)
+})
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="flex items-center gap-2">
+      {{ i18n.t("devtools:web.urlEncoder.modes.urlEncode") }}
+      <Switch
+        :checked="isUrlDecode"
+        @update:checked="isUrlDecode = $event"
+      />
+      {{ i18n.t("devtools:web.urlEncoder.modes.urlDecode") }}
+    </div>
+    <div class="space-y-2">
+      <UiHeading
+        :title="i18n.t('devtools:form.input')"
+        :level="3"
+      />
+      <UiInput
+        v-model="input"
+        :placeholder="i18n.t('devtools:form.placeholder.url')"
+        clearable
+      />
+    </div>
+    <div class="space-y-4">
+      <UiHeading
+        :title="i18n.t('devtools:form.output')"
+        :level="3"
+      />
+      <UiInput
+        :model-value="output"
+        readonly
+      />
+      <UiButton
+        size="md"
+        @click="copy(output)"
+      >
+        {{ i18n.t("button.copy") }}
+      </UiButton>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index dcae5033..8ee480f7 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -22,6 +22,7 @@ export const RouterName = {
   devtoolsUuid: 'devtools/uuid',
   devtoolsUrlParser: 'devtools/url-parser',
   devtoolsSlugify: 'devtools/slugify',
+  devtoolsUrlEncoder: 'devtools/url-encoder',
 } as const
 
 const routes = [
@@ -139,6 +140,11 @@ const routes = [
         name: RouterName.devtoolsSlugify,
         component: () => import('@/components/devtools/web/Slugify.vue'),
       },
+      {
+        path: 'url-encoder',
+        name: RouterName.devtoolsUrlEncoder,
+        component: () => import('@/components/devtools/web/UrlEncoder.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index d151eea4..56c7d6a2 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -64,6 +64,10 @@ const webNav = [
     label: i18n.t('devtools:web.urlParser.label'),
     name: RouterName.devtoolsUrlParser,
   },
+  {
+    label: i18n.t('devtools:web.urlEncoder.label'),
+    name: RouterName.devtoolsUrlEncoder,
+  },
   {
     label: i18n.t('devtools:web.slugify.label'),
     name: RouterName.devtoolsSlugify,

From 7f4772ec6c17235a0baafef1d752b8dc3afc8254 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Wed, 28 May 2025 11:30:20 +0300
Subject: [PATCH 29/31] feat(devtools): add color converter component and
 routing

---
 package.json                                  |   4 +
 pnpm-lock.yaml                                |  33 ++
 .../devtools/converters/ColorConverter.vue    | 386 ++++++++++++++++
 .../ui/color-picker/ColorPicker.vue           | 421 ++++++++++++++++++
 src/renderer/router/index.ts                  |   7 +
 src/renderer/views/Devtools.vue               |   4 +
 6 files changed, 855 insertions(+)
 create mode 100644 src/renderer/components/devtools/converters/ColorConverter.vue
 create mode 100644 src/renderer/components/ui/color-picker/ColorPicker.vue

diff --git a/package.json b/package.json
index 504906b1..0ebbac53 100644
--- a/package.json
+++ b/package.json
@@ -38,10 +38,12 @@
     "@vueuse/core": "^12.7.0",
     "better-sqlite3": "^11.8.1",
     "change-case": "^5.4.4",
+    "chroma-js": "^3.1.2",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "codemirror": "^5.65.18",
     "codemirror-textmate": "^1.1.0",
+    "color-name-list": "^11.22.0",
     "crypto-js": "^4.2.0",
     "date-fns": "^4.1.0",
     "dom-to-image": "^2.6.0",
@@ -58,6 +60,7 @@
     "markmap-lib": "^0.18.11",
     "markmap-view": "^0.18.10",
     "mermaid": "^11.6.0",
+    "nearest-color": "^0.4.4",
     "onigasm": "^2.2.5",
     "prettier": "^3.5.3",
     "radix-vue": "^1.9.17",
@@ -77,6 +80,7 @@
     "@tailwindcss/postcss": "^4.0.9",
     "@tailwindcss/vite": "^4.0.9",
     "@types/better-sqlite3": "^7.6.12",
+    "@types/chroma-js": "^3.1.1",
     "@types/codemirror": "^5.60.15",
     "@types/crypto-js": "^4.2.2",
     "@types/dom-to-image": "^2.6.7",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ea92faca..ee80af0d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       change-case:
         specifier: ^5.4.4
         version: 5.4.4
+      chroma-js:
+        specifier: ^3.1.2
+        version: 3.1.2
       class-variance-authority:
         specifier: ^0.7.1
         version: 0.7.1
@@ -38,6 +41,9 @@ importers:
       codemirror-textmate:
         specifier: ^1.1.0
         version: 1.1.0(codemirror@5.65.18)(onigasm@2.2.5)
+      color-name-list:
+        specifier: ^11.22.0
+        version: 11.22.0
       crypto-js:
         specifier: ^4.2.0
         version: 4.2.0
@@ -86,6 +92,9 @@ importers:
       mermaid:
         specifier: ^11.6.0
         version: 11.6.0
+      nearest-color:
+        specifier: ^0.4.4
+        version: 0.4.4
       onigasm:
         specifier: ^2.2.5
         version: 2.2.5
@@ -138,6 +147,9 @@ importers:
       '@types/better-sqlite3':
         specifier: ^7.6.12
         version: 7.6.12
+      '@types/chroma-js':
+        specifier: ^3.1.1
+        version: 3.1.1
       '@types/codemirror':
         specifier: ^5.60.15
         version: 5.60.15
@@ -1095,6 +1107,9 @@ packages:
   '@types/cacheable-request@6.0.3':
     resolution: {integrity: sha512-IQ3EbTzGxIigb1I3qPZc1rWJnH0BmSKv5QYTalEwweFvyBDLSAe24zP0le/hyi7ecGfZVlIVAg4BZqb8WBwKqw==}
 
+  '@types/chroma-js@3.1.1':
+    resolution: {integrity: sha512-SFCr4edNkZ1bGaLzGz7rgR1bRzVX4MmMxwsIa3/Bh6ose8v+hRpneoizHv0KChdjxaXyjRtaMq7sCuZSzPomQA==}
+
   '@types/codemirror@5.60.15':
     resolution: {integrity: sha512-dTOvwEQ+ouKJ/rE9LT1Ue2hmP6H1mZv5+CCnNWu2qtiOe2LQa9lCprEY20HxiDmV/Bxh+dXjywmy5aKvoGjULA==}
 
@@ -1715,6 +1730,9 @@ packages:
     resolution: {integrity: sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==}
     engines: {node: '>=10'}
 
+  chroma-js@3.1.2:
+    resolution: {integrity: sha512-IJnETTalXbsLx1eKEgx19d5L6SRM7cH4vINw/99p/M11HCuXGRWL+6YmCm7FWFGIo6dtWuQoQi1dc5yQ7ESIHg==}
+
   chromium-pickle-js@0.2.0:
     resolution: {integrity: sha512-1R5Fho+jBq0DDydt+/vHWj5KJNJCKdARKOCwZUen84I5BreWoLqRLANH1U87eJy1tiASPtMnGqJJq0ZsLoRPOw==}
 
@@ -1788,6 +1806,10 @@ packages:
     resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==}
     engines: {node: '>=7.0.0'}
 
+  color-name-list@11.22.0:
+    resolution: {integrity: sha512-kIAXZqpAZ61aepiCaDxIsM7iQM9hZgY3i9T5OAU0lsm2PSircn6nOJFOE3WdtN8qbd7UMPNFepzebvxwu20CPg==}
+    engines: {node: '>=20.11.0', npm: '>=10.2.0'}
+
   color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
 
@@ -3681,6 +3703,9 @@ packages:
     resolution: {integrity: sha512-kKHJhxwpR/Okycz4HhQKKlhWe4ASEfPgkSWNmKFHd7+ezuQlxkA5cM3+XkBPvm1gmHen3w53qsYAv+8GwRrBlg==}
     engines: {node: '>=18'}
 
+  nearest-color@0.4.4:
+    resolution: {integrity: sha512-orhcaIORC10tf41Ld2wwlcC+FaAavHG87JHWB3eHH5p7v2k9Tzym2XNEZzLAm5YJwGv6Q38WWc7SOb+Qfu/4NQ==}
+
   negotiator@0.6.4:
     resolution: {integrity: sha512-myRT3DiWPHqho5PrJaIRyaMv2kgYf0mUVgBNOYMuCH5Ki1yEiQaf/ZJuQ62nvpc44wL5WDbTX7yGJi1Neevw8w==}
     engines: {node: '>= 0.6'}
@@ -5824,6 +5849,8 @@ snapshots:
       '@types/node': 22.13.1
       '@types/responselike': 1.0.3
 
+  '@types/chroma-js@3.1.1': {}
+
   '@types/codemirror@5.60.15':
     dependencies:
       '@types/tern': 0.23.9
@@ -6664,6 +6691,8 @@ snapshots:
 
   chownr@2.0.0: {}
 
+  chroma-js@3.1.2: {}
+
   chromium-pickle-js@0.2.0: {}
 
   ci-info@3.9.0: {}
@@ -6733,6 +6762,8 @@ snapshots:
     dependencies:
       color-name: 1.1.4
 
+  color-name-list@11.22.0: {}
+
   color-name@1.1.4: {}
 
   color-support@1.1.3: {}
@@ -8981,6 +9012,8 @@ snapshots:
 
   natural-orderby@5.0.0: {}
 
+  nearest-color@0.4.4: {}
+
   negotiator@0.6.4: {}
 
   node-abi@3.74.0:
diff --git a/src/renderer/components/devtools/converters/ColorConverter.vue b/src/renderer/components/devtools/converters/ColorConverter.vue
new file mode 100644
index 00000000..2829e9f4
--- /dev/null
+++ b/src/renderer/components/devtools/converters/ColorConverter.vue
@@ -0,0 +1,386 @@
+<script setup lang="ts">
+import { i18n } from '@/electron'
+import { useClipboard } from '@vueuse/core'
+import chroma from 'chroma-js'
+// @ts-expect-error some
+import { colornames } from 'color-name-list'
+
+import { Copy } from 'lucide-vue-next'
+// @ts-expect-error some
+import nearestColor from 'nearest-color'
+
+const title = computed(() =>
+  i18n.t('devtools:converters.colorConverter.label'),
+)
+const description = computed(() =>
+  i18n.t('devtools:converters.colorConverter.description'),
+)
+
+const { copy } = useClipboard()
+
+const selectedColor = ref('#154696')
+
+const colors = reactive({
+  hex: '',
+  rgb: '',
+  hsl: '',
+  hsv: '',
+  cmyk: '',
+  oklch: '',
+})
+
+const colorName = ref('')
+
+const colorFormats = {
+  hex: 'HEX',
+  rgb: 'RGB',
+  hsl: 'HSL',
+  hsv: 'HSV',
+  cmyk: 'CMYK',
+  oklch: 'OKLCH',
+} as const
+
+let isUpdating = false
+
+const activeField = ref<string | null>(null)
+
+const contrast = computed(() => {
+  const color = chroma(selectedColor.value)
+  const contrast = chroma.contrast('#000', color)
+
+  return contrast
+})
+
+function onFieldFocus(type: string) {
+  activeField.value = type
+}
+
+function onFieldBlur() {
+  activeField.value = null
+}
+
+function convertColor(color: string) {
+  if (isUpdating)
+    return
+
+  try {
+    const chromaColor = chroma(color)
+    const alpha = chromaColor.alpha()
+
+    isUpdating = true
+
+    if (activeField.value !== 'hex') {
+      if (color.startsWith('#')) {
+        colors.hex = color
+      }
+      else {
+        colors.hex = alpha < 1 ? chromaColor.hex('rgba') : chromaColor.hex()
+      }
+    }
+
+    if (activeField.value !== 'rgb') {
+      colors.rgb
+        = alpha < 1
+          ? `rgba(${chromaColor.rgb().join(', ')}, ${alpha.toFixed(2)})`
+          : chromaColor.css('rgb')
+    }
+
+    if (activeField.value !== 'hsl') {
+      const [h, s, l] = chromaColor.hsl()
+      const hueValue = Number.isNaN(h) ? 0 : Math.round(h)
+      const satValue = Math.round(s * 100)
+      const lightValue = Math.round(l * 100)
+
+      colors.hsl
+        = alpha < 1
+          ? `hsla(${hueValue}, ${satValue}%, ${lightValue}%, ${alpha.toFixed(2)})`
+          : `hsl(${hueValue}, ${satValue}%, ${lightValue}%)`
+    }
+
+    if (activeField.value !== 'hsv') {
+      const [h, s, v] = chromaColor.hsv()
+      const hueValue = Number.isNaN(h) ? 0 : Math.round(h)
+      const satValue = Math.round(s * 100)
+      const valValue = Math.round(v * 100)
+
+      if (alpha < 1) {
+        colors.hsv = `hsva(${hueValue}, ${satValue}%, ${valValue}%, ${alpha.toFixed(2)})`
+      }
+      else {
+        colors.hsv = `hsv(${hueValue}, ${satValue}%, ${valValue}%)`
+      }
+    }
+
+    if (activeField.value !== 'cmyk') {
+      const [c, m, y, k] = chromaColor.cmyk()
+      const cValue = Math.round(c * 100)
+      const mValue = Math.round(m * 100)
+      const yValue = Math.round(y * 100)
+      const kValue = Math.round(k * 100)
+
+      if (alpha < 1) {
+        colors.cmyk = `cmyka(${cValue}%, ${mValue}%, ${yValue}%, ${kValue}%, ${alpha.toFixed(2)})`
+      }
+      else {
+        colors.cmyk = `cmyk(${cValue}%, ${mValue}%, ${yValue}%, ${kValue}%)`
+      }
+    }
+
+    if (activeField.value !== 'oklch') {
+      const [lightness, chroma_val, hue] = chromaColor.oklch()
+      const lightnessValue = lightness.toFixed(3)
+      const chromaValue = chroma_val.toFixed(3)
+      const hueValue = Number.isNaN(hue) ? '0' : hue.toFixed(1)
+
+      if (alpha < 1) {
+        colors.oklch = `oklch(${lightnessValue} ${chromaValue} ${hueValue} / ${alpha.toFixed(2)})`
+      }
+      else {
+        colors.oklch = `oklch(${lightnessValue} ${chromaValue} ${hueValue})`
+      }
+    }
+
+    isUpdating = false
+  }
+  catch (error) {
+    console.warn('Ошибка конвертации цвета:', error)
+    isUpdating = false
+  }
+}
+
+function onCopy(type: keyof typeof colorFormats) {
+  copy(colors[type])
+}
+
+function parseHsv(hsvString: string): chroma.Color | null {
+  try {
+    const match = hsvString.match(
+      /hsva?\((\d+),\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/,
+    )
+    if (match) {
+      const [, h, s, v, a] = match
+      const alpha = a ? Number.parseFloat(a) : 1
+      return chroma
+        .hsv(
+          Number.parseInt(h),
+          Number.parseInt(s) / 100,
+          Number.parseInt(v) / 100,
+        )
+        .alpha(alpha)
+    }
+  }
+  catch {}
+  return null
+}
+
+function parseCmyk(cmykString: string): chroma.Color | null {
+  try {
+    const match = cmykString.match(
+      /cmyka?\((\d+)%,\s*(\d+)%,\s*(\d+)%,\s*(\d+)%(?:,\s*([\d.]+))?\)/,
+    )
+    if (match) {
+      const [, c, m, y, k, a] = match
+      const alpha = a ? Number.parseFloat(a) : 1
+      return chroma
+        .cmyk(
+          Number.parseInt(c) / 100,
+          Number.parseInt(m) / 100,
+          Number.parseInt(y) / 100,
+          Number.parseInt(k) / 100,
+        )
+        .alpha(alpha)
+    }
+  }
+  catch {}
+  return null
+}
+
+function parseOklch(oklchString: string): chroma.Color | null {
+  try {
+    const match = oklchString.match(
+      /oklch\(([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+))?\)/,
+    )
+    if (match) {
+      const [, l, c, h, a] = match
+      const alpha = a ? Number.parseFloat(a) : 1
+      return chroma
+        .oklch(Number.parseFloat(l), Number.parseFloat(c), Number.parseFloat(h))
+        .alpha(alpha)
+    }
+  }
+  catch {}
+  return null
+}
+
+function getColorName(color: string) {
+  // @ts-expect-error some
+  const colors = colornames.reduce(
+    (o, { name, hex }) => Object.assign(o, { [name]: hex }),
+    {},
+  )
+  const nearest = nearestColor.from(colors)
+
+  return nearest(color)?.name || ''
+}
+
+watch(
+  selectedColor,
+  (newColor) => {
+    convertColor(newColor)
+
+    colorName.value = getColorName(newColor)
+  },
+  { immediate: true },
+)
+
+watch(
+  () => colors.hex,
+  (newValue) => {
+    if (!isUpdating && newValue && activeField.value === 'hex') {
+      const normalizedHex = newValue.startsWith('#')
+        ? newValue
+        : `#${newValue}`
+
+      if (chroma.valid(normalizedHex)) {
+        const chromaColor = chroma(normalizedHex)
+        const newHex = chromaColor.hex()
+
+        if (selectedColor.value.toLowerCase() !== newHex.toLowerCase()) {
+          selectedColor.value = newHex
+        }
+        convertColor(normalizedHex)
+      }
+    }
+  },
+)
+
+watch(
+  () => colors.rgb,
+  (newValue) => {
+    if (
+      !isUpdating
+      && newValue
+      && chroma.valid(newValue)
+      && activeField.value === 'rgb'
+    ) {
+      const chromaColor = chroma(newValue)
+      selectedColor.value = chromaColor.hex()
+      convertColor(newValue)
+    }
+  },
+)
+
+watch(
+  () => colors.hsl,
+  (newValue) => {
+    if (
+      !isUpdating
+      && newValue
+      && chroma.valid(newValue)
+      && activeField.value === 'hsl'
+    ) {
+      const chromaColor = chroma(newValue)
+      selectedColor.value = chromaColor.hex()
+      convertColor(newValue)
+    }
+  },
+)
+
+watch(
+  () => colors.hsv,
+  (newValue) => {
+    if (!isUpdating && newValue && activeField.value === 'hsv') {
+      const chromaColor = parseHsv(newValue)
+      if (chromaColor) {
+        selectedColor.value = chromaColor.hex()
+        convertColor(chromaColor.hex())
+      }
+    }
+  },
+)
+
+watch(
+  () => colors.cmyk,
+  (newValue) => {
+    if (!isUpdating && newValue && activeField.value === 'cmyk') {
+      const chromaColor = parseCmyk(newValue)
+      if (chromaColor) {
+        selectedColor.value = chromaColor.hex()
+        convertColor(chromaColor.hex())
+      }
+    }
+  },
+)
+
+watch(
+  () => colors.oklch,
+  (newValue) => {
+    if (!isUpdating && newValue && activeField.value === 'oklch') {
+      const chromaColor = parseOklch(newValue)
+      if (chromaColor) {
+        selectedColor.value = chromaColor.hex()
+        convertColor(chromaColor.hex())
+      }
+    }
+  },
+)
+</script>
+
+<template>
+  <div class="space-y-6">
+    <UiHeading
+      :title="title"
+      :description="description"
+    />
+    <div class="flex items-start gap-8">
+      <div>
+        <UiColorPicker
+          v-model="selectedColor"
+          class="w-64 shrink-0"
+          :show-input="false"
+        />
+        <div
+          class="mt-3 flex h-32 w-full items-center justify-center rounded text-lg"
+          :style="{ backgroundColor: selectedColor }"
+        >
+          <span :class="contrast > 6 ? 'text-black' : 'text-white'">
+            {{ colorName }}
+          </span>
+        </div>
+        <div class="mt-2 w-full text-center">
+          <UiButton
+            size="md"
+            @click="copy(colorName)"
+          >
+            {{ i18n.t("button.copy") }}
+          </UiButton>
+        </div>
+      </div>
+
+      <div
+        class="grid w-full grid-cols-[max-content_1fr_max-content] items-center gap-4"
+      >
+        <template
+          v-for="[type, label] in Object.entries(colorFormats)"
+          :key="type"
+        >
+          <div class="text-text-secondary text-sm font-medium">
+            {{ label }}
+          </div>
+          <UiInput
+            v-model="colors[type as keyof typeof colors]"
+            @focus="onFieldFocus(type)"
+            @blur="onFieldBlur"
+          />
+          <UiButton
+            variant="icon"
+            size="md"
+            @click="onCopy(type as keyof typeof colorFormats)"
+          >
+            <Copy class="h-3 w-3" />
+          </UiButton>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/components/ui/color-picker/ColorPicker.vue b/src/renderer/components/ui/color-picker/ColorPicker.vue
new file mode 100644
index 00000000..0f41ce6f
--- /dev/null
+++ b/src/renderer/components/ui/color-picker/ColorPicker.vue
@@ -0,0 +1,421 @@
+<script setup lang="ts">
+import { cn } from '@/utils'
+import chroma from 'chroma-js'
+import { computed, nextTick, onMounted, ref, watch } from 'vue'
+
+interface Props {
+  class?: string
+  disabled?: boolean
+  showInput?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  showInput: true,
+})
+
+const model = defineModel<string>({ default: '#ff0000' })
+
+const colorAreaRef = ref<HTMLElement>()
+const hueSliderRef = ref<HTMLElement>()
+const alphaSliderRef = ref<HTMLElement>()
+
+const isDraggingColor = ref(false)
+const isDraggingHue = ref(false)
+const isDraggingAlpha = ref(false)
+
+const hsv = ref({ h: 0, s: 100, v: 100 })
+const alpha = ref(1)
+
+const colorPosition = ref({ x: 100, y: 0 })
+const huePosition = ref(0)
+const alphaPosition = ref(100)
+
+const isUpdatingFromModel = ref(false)
+
+const currentChroma = computed(() => {
+  try {
+    return chroma
+      .hsv(hsv.value.h, hsv.value.s / 100, hsv.value.v / 100)
+      .alpha(alpha.value)
+  }
+  catch {
+    return chroma('#000000')
+  }
+})
+
+const currentRgb = computed(() => {
+  const [r, g, b] = currentChroma.value.rgb()
+  return { r: Math.round(r), g: Math.round(g), b: Math.round(b) }
+})
+
+const currentHex = computed(() => {
+  const chromaColor = currentChroma.value
+  return chromaColor.alpha() < 1 ? chromaColor.hex('rgba') : chromaColor.hex()
+})
+
+const pureHueColor = computed(() => {
+  try {
+    return chroma.hsv(hsv.value.h, 1, 1).hex()
+  }
+  catch {
+    return '#ff0000'
+  }
+})
+
+function handleColorAreaMouseDown(event: MouseEvent) {
+  if (props.disabled)
+    return
+
+  event.preventDefault()
+
+  isDraggingColor.value = true
+  updateColorFromPosition(event)
+
+  document.addEventListener('mousemove', handleColorAreaMouseMove)
+  document.addEventListener('mouseup', handleColorAreaMouseUp)
+}
+
+function handleColorAreaMouseMove(event: MouseEvent) {
+  if (!isDraggingColor.value)
+    return
+
+  event.preventDefault()
+
+  updateColorFromPosition(event)
+}
+
+function handleColorAreaMouseUp() {
+  isDraggingColor.value = false
+  document.removeEventListener('mousemove', handleColorAreaMouseMove)
+  document.removeEventListener('mouseup', handleColorAreaMouseUp)
+}
+
+function updateColorFromPosition(event: MouseEvent) {
+  if (!colorAreaRef.value)
+    return
+
+  const rect = colorAreaRef.value.getBoundingClientRect()
+  const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left))
+  const y = Math.max(0, Math.min(rect.height, event.clientY - rect.top))
+
+  colorPosition.value = { x, y }
+
+  const newS = (x / rect.width) * 100
+  const newV = 100 - (y / rect.height) * 100
+  hsv.value.s = Math.round(newS)
+  hsv.value.v = Math.round(newV)
+}
+
+function handleHueMouseDown(event: MouseEvent) {
+  if (props.disabled)
+    return
+
+  event.preventDefault()
+
+  isDraggingHue.value = true
+  updateHueFromPosition(event)
+
+  document.addEventListener('mousemove', handleHueMouseMove)
+  document.addEventListener('mouseup', handleHueMouseUp)
+}
+
+function handleHueMouseMove(event: MouseEvent) {
+  if (!isDraggingHue.value)
+    return
+
+  event.preventDefault()
+
+  updateHueFromPosition(event)
+}
+
+function handleHueMouseUp() {
+  isDraggingHue.value = false
+  document.removeEventListener('mousemove', handleHueMouseMove)
+  document.removeEventListener('mouseup', handleHueMouseUp)
+}
+
+function updateHueFromPosition(event: MouseEvent) {
+  if (!hueSliderRef.value)
+    return
+
+  const rect = hueSliderRef.value.getBoundingClientRect()
+  const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left))
+
+  huePosition.value = x
+  hsv.value.h = Math.min(359.99, (x / rect.width) * 360)
+}
+
+function handleAlphaMouseDown(event: MouseEvent) {
+  if (props.disabled)
+    return
+
+  event.preventDefault()
+
+  isDraggingAlpha.value = true
+  updateAlphaFromPosition(event)
+
+  document.addEventListener('mousemove', handleAlphaMouseMove)
+  document.addEventListener('mouseup', handleAlphaMouseUp)
+}
+
+function handleAlphaMouseMove(event: MouseEvent) {
+  if (!isDraggingAlpha.value)
+    return
+
+  event.preventDefault()
+
+  updateAlphaFromPosition(event)
+}
+
+function handleAlphaMouseUp() {
+  isDraggingAlpha.value = false
+  document.removeEventListener('mousemove', handleAlphaMouseMove)
+  document.removeEventListener('mouseup', handleAlphaMouseUp)
+}
+
+function updateAlphaFromPosition(event: MouseEvent) {
+  if (!alphaSliderRef.value)
+    return
+
+  const rect = alphaSliderRef.value.getBoundingClientRect()
+  const x = Math.max(0, Math.min(rect.width, event.clientX - rect.left))
+
+  alphaPosition.value = x
+  alpha.value = x / rect.width
+}
+
+function updatePositions() {
+  if (!colorAreaRef.value || !hueSliderRef.value || !alphaSliderRef.value)
+    return
+
+  const colorRect = colorAreaRef.value.getBoundingClientRect()
+  const hueRect = hueSliderRef.value.getBoundingClientRect()
+  const alphaRect = alphaSliderRef.value.getBoundingClientRect()
+
+  colorPosition.value = {
+    x: (hsv.value.s / 100) * colorRect.width,
+    y: ((100 - hsv.value.v) / 100) * colorRect.height,
+  }
+
+  huePosition.value = (hsv.value.h / 360) * hueRect.width
+  alphaPosition.value = alpha.value * alphaRect.width
+}
+
+function initializeFromModel() {
+  isUpdatingFromModel.value = true
+
+  try {
+    const chromaColor = chroma(model.value)
+    const [h, s, v] = chromaColor.hsv()
+
+    hsv.value = {
+      h: Number.isNaN(h) ? 0 : h,
+      s: Math.round(s * 100),
+      v: Math.round(v * 100),
+    }
+    alpha.value = chromaColor.alpha()
+
+    nextTick(() => {
+      updatePositions()
+      nextTick(() => {
+        isUpdatingFromModel.value = false
+      })
+    })
+  }
+  catch {
+    hsv.value = { h: 0, s: 0, v: 0 }
+    alpha.value = 1
+    isUpdatingFromModel.value = false
+  }
+}
+
+watch(
+  () => model.value,
+  () => {
+    if (!isUpdatingFromModel.value) {
+      initializeFromModel()
+    }
+  },
+  { immediate: true },
+)
+
+watch([currentHex, alpha], () => {
+  if (!isUpdatingFromModel.value) {
+    const newHex = currentHex.value
+
+    try {
+      const currentColor = chroma(model.value)
+      const newColor = chroma(newHex)
+
+      const [r1, g1, b1] = currentColor.rgb()
+      const [r2, g2, b2] = newColor.rgb()
+      const a1 = currentColor.alpha()
+      const a2 = newColor.alpha()
+
+      const colorChanged
+        = Math.abs(r1 - r2) > 1
+          || Math.abs(g1 - g2) > 1
+          || Math.abs(b1 - b2) > 1
+          || Math.abs(a1 - a2) > 0.01
+
+      if (colorChanged) {
+        isUpdatingFromModel.value = true
+        model.value = newHex
+        nextTick(() => {
+          isUpdatingFromModel.value = false
+        })
+      }
+    }
+    catch {
+      isUpdatingFromModel.value = true
+      model.value = newHex
+      nextTick(() => {
+        isUpdatingFromModel.value = false
+      })
+    }
+  }
+})
+
+watch(
+  [hsv, alpha],
+  () => {
+    if (!isUpdatingFromModel.value) {
+      nextTick(() => {
+        updatePositions()
+      })
+    }
+  },
+  { deep: true },
+)
+
+onMounted(() => {
+  initializeFromModel()
+})
+</script>
+
+<template>
+  <div :class="cn('space-y-2', props.class)">
+    <div class="relative">
+      <div
+        ref="colorAreaRef"
+        class="border-border relative h-48 w-full cursor-crosshair overflow-hidden rounded-md border select-none"
+        :class="{ 'cursor-not-allowed opacity-50': disabled }"
+        :style="{ backgroundColor: pureHueColor }"
+        @mousedown="handleColorAreaMouseDown"
+      >
+        <div
+          class="absolute inset-0 bg-gradient-to-r from-white to-transparent"
+        />
+        <div
+          class="absolute inset-0 bg-gradient-to-b from-transparent to-black"
+        />
+      </div>
+      <div
+        class="pointer-events-none absolute z-10 h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform rounded-full border-2 border-white shadow-md"
+        :style="{
+          left: `${colorPosition.x}px`,
+          top: `${colorPosition.y}px`,
+          backgroundColor: currentHex,
+        }"
+      />
+    </div>
+    <div class="relative py-1">
+      <div
+        ref="hueSliderRef"
+        class="border-border relative h-4 w-full cursor-pointer rounded-md border select-none"
+        :class="{ 'cursor-not-allowed opacity-50': disabled }"
+        style="
+          background: linear-gradient(
+            to right,
+            #ff0000 0%,
+            #ffff00 17%,
+            #00ff00 33%,
+            #00ffff 50%,
+            #0000ff 67%,
+            #ff00ff 83%,
+            #ff0000 100%
+          );
+        "
+        @mousedown="handleHueMouseDown"
+      />
+      <div
+        class="pointer-events-none absolute top-1/2 z-10 h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform rounded-full border-2 border-white shadow-md"
+        :style="{
+          left: `${huePosition}px`,
+          backgroundColor: pureHueColor,
+        }"
+      />
+    </div>
+    <div class="relative py-1">
+      <div
+        class="absolute inset-x-0 top-1 bottom-1 rounded-md"
+        style="
+          background-image:
+            linear-gradient(45deg, #ccc 25%, transparent 25%),
+            linear-gradient(-45deg, #ccc 25%, transparent 25%),
+            linear-gradient(45deg, transparent 75%, #ccc 75%),
+            linear-gradient(-45deg, transparent 75%, #ccc 75%);
+          background-size: 8px 8px;
+          background-position:
+            0 0,
+            0 4px,
+            4px -4px,
+            -4px 0px;
+        "
+      />
+      <div
+        ref="alphaSliderRef"
+        class="border-border relative h-4 w-full cursor-pointer rounded-md border select-none"
+        :class="{ 'cursor-not-allowed opacity-50': disabled }"
+        :style="{
+          background: `linear-gradient(to right, transparent 0%, ${chroma.rgb(currentRgb.r, currentRgb.g, currentRgb.b).hex()} 100%)`,
+        }"
+        @mousedown="handleAlphaMouseDown"
+      />
+      <div
+        class="pointer-events-none absolute top-1/2 z-10 h-4 w-4 -translate-x-1/2 -translate-y-1/2 transform rounded-full border-2 border-white shadow-md"
+        :style="{
+          left: `${alphaPosition}px`,
+          backgroundColor: currentHex,
+        }"
+      />
+    </div>
+    <div
+      v-if="showInput"
+      class="flex items-center gap-3"
+    >
+      <div
+        class="border-border relative h-[27px] w-[27px] shrink-0 overflow-hidden rounded-md border"
+      >
+        <div
+          class="absolute inset-0"
+          style="
+            background-image:
+              linear-gradient(45deg, #ccc 25%, transparent 25%),
+              linear-gradient(-45deg, #ccc 25%, transparent 25%),
+              linear-gradient(45deg, transparent 75%, #ccc 75%),
+              linear-gradient(-45deg, transparent 75%, #ccc 75%);
+            background-size: 4px 4px;
+            background-position:
+              0 0,
+              0 2px,
+              2px -2px,
+              -2px 0px;
+          "
+        />
+        <div
+          class="absolute inset-0"
+          :style="{ backgroundColor: currentHex }"
+        />
+      </div>
+      <div class="w-full">
+        <UiInput
+          v-model="model"
+          type="text"
+          :disabled="disabled"
+          placeholder="#000000"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 8ee480f7..6e4683d5 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -23,6 +23,7 @@ export const RouterName = {
   devtoolsUrlParser: 'devtools/url-parser',
   devtoolsSlugify: 'devtools/slugify',
   devtoolsUrlEncoder: 'devtools/url-encoder',
+  devtoolsColorConverter: 'devtools/color-converter',
 } as const
 
 const routes = [
@@ -145,6 +146,12 @@ const routes = [
         name: RouterName.devtoolsUrlEncoder,
         component: () => import('@/components/devtools/web/UrlEncoder.vue'),
       },
+      {
+        path: 'color-converter',
+        name: RouterName.devtoolsColorConverter,
+        component: () =>
+          import('@/components/devtools/converters/ColorConverter.vue'),
+      },
     ],
   },
 ]
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
index 56c7d6a2..2ebbaebd 100644
--- a/src/renderer/views/Devtools.vue
+++ b/src/renderer/views/Devtools.vue
@@ -38,6 +38,10 @@ const convertersNav = [
     label: i18n.t('devtools:converters.jsonToXml.label'),
     name: RouterName.devtoolsJsonToXml,
   },
+  {
+    label: i18n.t('devtools:converters.colorConverter.label'),
+    name: RouterName.devtoolsColorConverter,
+  },
 ]
 
 const cryptoNav = [

From 6db4fc090af2a3d942105b7b9952ca8778255ec9 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 30 May 2025 08:48:00 +0300
Subject: [PATCH 30/31] feat(i18n): update localization devtools

---
 src/main/i18n/locales/cs_CZ/devtools.json | 132 ++++++++++++++++---
 src/main/i18n/locales/de_DE/devtools.json | 136 +++++++++++++++++---
 src/main/i18n/locales/el_GR/devtools.json | 132 ++++++++++++++++---
 src/main/i18n/locales/en_US/devtools.json | 129 ++++++++++++++++---
 src/main/i18n/locales/es_ES/devtools.json | 144 +++++++++++++++++----
 src/main/i18n/locales/fa_IR/devtools.json | 136 +++++++++++++++++---
 src/main/i18n/locales/fr_FR/devtools.json | 130 ++++++++++++++++---
 src/main/i18n/locales/ja_JP/devtools.json | 136 +++++++++++++++++---
 src/main/i18n/locales/pl_PL/devtools.json | 136 +++++++++++++++++---
 src/main/i18n/locales/pt_BR/devtools.json | 130 ++++++++++++++++---
 src/main/i18n/locales/ro_RO/devtools.json | 132 ++++++++++++++++---
 src/main/i18n/locales/ru_RU/devtools.json | 134 +++++++++++++++++---
 src/main/i18n/locales/tr_TR/devtools.json | 142 +++++++++++++++++----
 src/main/i18n/locales/uk_UA/devtools.json | 132 ++++++++++++++++---
 src/main/i18n/locales/zh_CN/devtools.json | 138 +++++++++++++++++---
 src/main/i18n/locales/zh_HK/devtools.json | 148 ++++++++++++++++++----
 src/main/i18n/locales/zh_TW/devtools.json | 140 +++++++++++++++++---
 17 files changed, 1986 insertions(+), 321 deletions(-)

diff --git a/src/main/i18n/locales/cs_CZ/devtools.json b/src/main/i18n/locales/cs_CZ/devtools.json
index dc602f22..56037834 100644
--- a/src/main/i18n/locales/cs_CZ/devtools.json
+++ b/src/main/i18n/locales/cs_CZ/devtools.json
@@ -1,31 +1,123 @@
 {
   "label": "Vývojářské nástroje",
-  "textTools": {
-    "label": "Textové nástroje",
-    "caseConverter": "Převodník velikosti písmen",
-    "urlParser": "URL Parser",
-    "slugGenerator": "Generátor slugů",
-    "sortLines": "Seřadit řádky"
+  "converters": {
+    "label": "Převodníky",
+    "caseConverter": {
+      "label": "Převodník velikosti písmen",
+      "description": "Transformace textu do různých velikostí písmen",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Text na Unicode",
+      "description": "Převod textu na Unicode a naopak",
+      "modes": {
+        "textToUnicode": "Text → Unicode",
+        "unicodeToText": "Unicode → Text"
+      }
+    },
+    "textToAscii": {
+      "label": "Text na ASCII Binary",
+      "description": "Převod textu na ASCII binary a naopak",
+      "modes": {
+        "textToAscii": "Text → ASCII",
+        "asciiToText": "ASCII → Text"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Kódování nebo dekódování textu do Base64",
+      "modes": {
+        "textToBase64": "Text → Base64",
+        "base64ToText": "Base64 → Text"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON na YAML",
+      "description": "Převod JSON na YAML a naopak",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON na TOML",
+      "description": "Převod JSON na TOML a naopak",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON na XML",
+      "description": "Převod JSON na XML a naopak",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Převodník barev",
+      "description": "Převod barev mezi různými formáty"
+    }
   },
   "crypto": {
     "label": "Kryptografie / Bezpečnost",
-    "hashGenerator": "Generátor hashů",
-    "hmacGenerator": "HMAC Generátor",
-    "passGenerator": "Generátor hesel",
-    "uuidGenerator": "UUID Generátor"
+    "hash": {
+      "label": "Generátor hash",
+      "description": "Generování hashů z textu"
+    },
+    "hmac": {
+      "label": "Generátor HMAC",
+      "description": "Generování autentizačního kódu zprávy založeného na hash (HMAC) složeného z klíče a zprávy"
+    },
+    "password": {
+      "label": "Generátor hesel",
+      "description": "Generování bezpečného hesla"
+    },
+    "uuid": {
+      "label": "Generátor UUID",
+      "description": "Generování univerzálního jedinečného identifikátoru (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Kodéry / Dekodéry",
-    "url": "URL Kodér / Dekodér",
-    "base64": "Base64 Kodér / Dekodér"
+  "web": {
+    "label": "Web",
+    "urlParser": {
+      "label": "Parser URL",
+      "description": "Parsování URL na komponenty"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Kódování nebo dekódování URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Převod textu na URL-přátelský slug"
+    }
   },
   "form": {
+    "input": "Vstup",
+    "output": "Výstup",
     "inputString": "Vstupní řetězec",
     "outputString": "Výstupní řetězec",
     "inputUrl": "Vstupní URL",
     "outputUrl": "Výstupní URL",
-    "parsedUrl": "Parsované URL",
-    "splitQueryString": "Rozdělený dotazovací řetězec",
+    "parsedUrl": "Parsovaná URL",
+    "splitQueryString": "Rozdělit Query String",
     "key": "Klíč",
     "value": "Hodnota",
     "component": "Komponenta",
@@ -40,6 +132,12 @@
     "numbers": "Čísla",
     "symbols": "Symboly",
     "lowercase": "Malá písmena",
-    "uppercase": "Velká písmena"
+    "uppercase": "Velká písmena",
+    "placeholder": {
+      "text": "Zadejte text",
+      "value": "Zadejte hodnotu",
+      "secretKey": "Zadejte tajný klíč",
+      "url": "Zadejte URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/de_DE/devtools.json b/src/main/i18n/locales/de_DE/devtools.json
index 1fdeecd1..70aa3d3e 100644
--- a/src/main/i18n/locales/de_DE/devtools.json
+++ b/src/main/i18n/locales/de_DE/devtools.json
@@ -1,31 +1,123 @@
 {
-  "label": "Entwicklerwerkzeuge",
-  "textTools": {
-    "label": "Text-Werkzeuge",
-    "caseConverter": "Groß-/Kleinschreibung Konverter",
-    "urlParser": "URL Parser",
-    "slugGenerator": "Slug Generator",
-    "sortLines": "Zeilen sortieren"
+  "label": "Entwicklertools",
+  "converters": {
+    "label": "Konverter",
+    "caseConverter": {
+      "label": "Case Converter",
+      "description": "Text in verschiedene Schreibweisen umwandeln",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Text zu Unicode",
+      "description": "Text zu Unicode konvertieren und umgekehrt",
+      "modes": {
+        "textToUnicode": "Text → Unicode",
+        "unicodeToText": "Unicode → Text"
+      }
+    },
+    "textToAscii": {
+      "label": "Text zu ASCII Binary",
+      "description": "Text zu ASCII Binary konvertieren und umgekehrt",
+      "modes": {
+        "textToAscii": "Text → ASCII",
+        "asciiToText": "ASCII → Text"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Text zu Base64 kodieren oder dekodieren",
+      "modes": {
+        "textToBase64": "Text → Base64",
+        "base64ToText": "Base64 → Text"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON zu YAML",
+      "description": "JSON zu YAML konvertieren und umgekehrt",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON zu TOML",
+      "description": "JSON zu TOML konvertieren und umgekehrt",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON zu XML",
+      "description": "JSON zu XML konvertieren und umgekehrt",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Farbkonverter",
+      "description": "Farben zwischen verschiedenen Formaten konvertieren"
+    }
   },
   "crypto": {
     "label": "Kryptographie / Sicherheit",
-    "hashGenerator": "Hash Generator",
-    "hmacGenerator": "HMAC Generator",
-    "passGenerator": "Passwort Generator",
-    "uuidGenerator": "UUID Generator"
+    "hash": {
+      "label": "Hash Generator",
+      "description": "Hashes aus Text generieren"
+    },
+    "hmac": {
+      "label": "HMAC Generator",
+      "description": "Hash-basierten Nachrichtenauthentifizierungscode (HMAC) aus Schlüssel und Nachricht generieren"
+    },
+    "password": {
+      "label": "Passwort Generator",
+      "description": "Sicheres Passwort generieren"
+    },
+    "uuid": {
+      "label": "UUID Generator",
+      "description": "Universell eindeutige Kennung (UUID) generieren"
+    }
   },
-  "encodeDecode": {
-    "label": "Encoder / Decoder",
-    "url": "URL Encoder / Decoder",
-    "base64": "Base64 Encoder / Decoder"
+  "web": {
+    "label": "Web",
+    "urlParser": {
+      "label": "URL Parser",
+      "description": "URL in ihre Komponenten zerlegen"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "URL kodieren oder dekodieren",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Text in URL-freundlichen Slug umwandeln"
+    }
   },
   "form": {
-    "inputString": "Eingabetext",
-    "outputString": "Ausgabetext",
+    "input": "Eingabe",
+    "output": "Ausgabe",
+    "inputString": "Eingabestring",
+    "outputString": "Ausgabestring",
     "inputUrl": "Eingabe-URL",
     "outputUrl": "Ausgabe-URL",
     "parsedUrl": "Geparste URL",
-    "splitQueryString": "Query-String aufteilen",
+    "splitQueryString": "Query String aufteilen",
     "key": "Schlüssel",
     "value": "Wert",
     "component": "Komponente",
@@ -40,6 +132,12 @@
     "numbers": "Zahlen",
     "symbols": "Symbole",
     "lowercase": "Kleinbuchstaben",
-    "uppercase": "Großbuchstaben"
+    "uppercase": "Großbuchstaben",
+    "placeholder": {
+      "text": "Text eingeben",
+      "value": "Wert eingeben",
+      "secretKey": "Geheimen Schlüssel eingeben",
+      "url": "URL eingeben"
+    }
   }
 }
diff --git a/src/main/i18n/locales/el_GR/devtools.json b/src/main/i18n/locales/el_GR/devtools.json
index d5c33927..0b5cf062 100644
--- a/src/main/i18n/locales/el_GR/devtools.json
+++ b/src/main/i18n/locales/el_GR/devtools.json
@@ -1,27 +1,119 @@
 {
   "label": "Εργαλεία Προγραμματιστή",
-  "textTools": {
-    "label": "Εργαλεία Κειμένου",
-    "caseConverter": "Μετατροπέας Πεζών/Κεφαλαίων",
-    "urlParser": "URL Parser",
-    "slugGenerator": "Δημιουργία Slug",
-    "sortLines": "Ταξινόμηση Γραμμών"
+  "converters": {
+    "label": "Μετατροπείς",
+    "caseConverter": {
+      "label": "Μετατροπέας Κεφαλαίων",
+      "description": "Μετατροπή κειμένου σε διαφορετικές μορφές κεφαλαίων",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Κείμενο σε Unicode",
+      "description": "Μετατροπή κειμένου σε Unicode και αντίστροφα",
+      "modes": {
+        "textToUnicode": "Κείμενο → Unicode",
+        "unicodeToText": "Unicode → Κείμενο"
+      }
+    },
+    "textToAscii": {
+      "label": "Κείμενο σε ASCII Binary",
+      "description": "Μετατροπή κειμένου σε ASCII binary και αντίστροφα",
+      "modes": {
+        "textToAscii": "Κείμενο → ASCII",
+        "asciiToText": "ASCII → Κείμενο"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Κωδικοποίηση ή αποκωδικοποίηση κειμένου σε Base64",
+      "modes": {
+        "textToBase64": "Κείμενο → Base64",
+        "base64ToText": "Base64 → Κείμενο"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON σε YAML",
+      "description": "Μετατροπή JSON σε YAML και αντίστροφα",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON σε TOML",
+      "description": "Μετατροπή JSON σε TOML και αντίστροφα",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON σε XML",
+      "description": "Μετατροπή JSON σε XML και αντίστροφα",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Μετατροπέας Χρωμάτων",
+      "description": "Μετατροπή χρωμάτων μεταξύ διαφορετικών μορφών"
+    }
   },
   "crypto": {
     "label": "Κρυπτογραφία / Ασφάλεια",
-    "hashGenerator": "Δημιουργία Hash",
-    "hmacGenerator": "Δημιουργία HMAC",
-    "passGenerator": "Δημιουργία Password",
-    "uuidGenerator": "Δημιουργία UUID"
+    "hash": {
+      "label": "Γεννήτρια Hash",
+      "description": "Δημιουργία hash από κείμενο"
+    },
+    "hmac": {
+      "label": "Γεννήτρια HMAC",
+      "description": "Δημιουργία κώδικα πιστοποίησης μηνύματος βασισμένου σε hash (HMAC) που αποτελείται από κλειδί και μήνυμα"
+    },
+    "password": {
+      "label": "Γεννήτρια Κωδικών",
+      "description": "Δημιουργία ασφαλούς κωδικού"
+    },
+    "uuid": {
+      "label": "Γεννήτρια UUID",
+      "description": "Δημιουργία παγκόσμιου μοναδικού αναγνωριστικού (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Κωδικοποιητές / Αποκωδικοποιητές",
-    "url": "Κωδικοποίηση / Αποκωδικοποίηση URL",
-    "base64": "Κωδικοποίηση / Αποκωδικοποίηση Base64"
+  "web": {
+    "label": "Ιστός",
+    "urlParser": {
+      "label": "Αναλυτής URL",
+      "description": "Ανάλυση URL στα στοιχεία του"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Κωδικοποίηση ή αποκωδικοποίηση URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Μετατροπή κειμένου σε φιλικό προς URL slug"
+    }
   },
   "form": {
-    "inputString": "Κείμενο Εισόδου",
-    "outputString": "Κείμενο Εξόδου",
+    "input": "Είσοδος",
+    "output": "Έξοδος",
+    "inputString": "Συμβολοσειρά Εισόδου",
+    "outputString": "Συμβολοσειρά Εξόδου",
     "inputUrl": "URL Εισόδου",
     "outputUrl": "URL Εξόδου",
     "parsedUrl": "Αναλυμένο URL",
@@ -40,6 +132,12 @@
     "numbers": "Αριθμοί",
     "symbols": "Σύμβολα",
     "lowercase": "Πεζά",
-    "uppercase": "Κεφαλαία"
+    "uppercase": "Κεφαλαία",
+    "placeholder": {
+      "text": "Εισάγετε κείμενο",
+      "value": "Εισάγετε τιμή",
+      "secretKey": "Εισάγετε μυστικό κλειδί",
+      "url": "Εισάγετε URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/en_US/devtools.json b/src/main/i18n/locales/en_US/devtools.json
index f0ac1cc4..cf3ef682 100644
--- a/src/main/i18n/locales/en_US/devtools.json
+++ b/src/main/i18n/locales/en_US/devtools.json
@@ -1,25 +1,117 @@
 {
   "label": "Developer Tools",
-  "textTools": {
-    "label": "Text Tools",
-    "caseConverter": "Case Converter",
-    "urlParser": "URL Parser",
-    "slugGenerator": "Slug Generator",
-    "sortLines": "Sort Lines"
+  "converters": {
+    "label": "Converters",
+    "caseConverter": {
+      "label": "Case Converter",
+      "description": "Transform text to different cases",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Text to Unicode",
+      "description": "Convert text to Unicode and vice versa",
+      "modes": {
+        "textToUnicode": "Text → Unicode",
+        "unicodeToText": "Unicode → Text"
+      }
+    },
+    "textToAscii": {
+      "label": "Text to ASCII Binary",
+      "description": "Convert text to ASCII binary and vice versa",
+      "modes": {
+        "textToAscii": "Text → ASCII",
+        "asciiToText": "ASCII → Text"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Encode or decode text to Base64",
+      "modes": {
+        "textToBase64": "Text → Base64",
+        "base64ToText": "Base64 → Text"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON to YAML",
+      "description": "Convert JSON to YAML and vice versa",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON to TOML",
+      "description": "Convert JSON to TOML and vice versa",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON to XML",
+      "description": "Convert JSON to XML and vice versa",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Color Converter",
+      "description": "Convert color between different formats"
+    }
   },
   "crypto": {
     "label": "Cryptography / Security",
-    "hashGenerator": "Hash Generator",
-    "hmacGenerator": "HMAC Generator",
-    "passGenerator": "Password Generator",
-    "uuidGenerator": "UUID Generator"
+    "hash": {
+      "label": "Hash Generator",
+      "description": "Generate hashes from text"
+    },
+    "hmac": {
+      "label": "HMAC Generator",
+      "description": "Generate hash-based message authentication code (HMAC) composed of a key and a message"
+    },
+    "password": {
+      "label": "Password Generator",
+      "description": "Generate a secure password"
+    },
+    "uuid": {
+      "label": "UUID Generator",
+      "description": "Generate a universal unique identifier (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Encoders / Decoders",
-    "url": "URL Encoder / Decoder",
-    "base64": "Base64 Encoder / Decoder"
+  "web": {
+    "label": "Web",
+    "urlParser": {
+      "label": "URL Parser",
+      "description": "Parse a URL into its components"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Encode or decode URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Convert text to a URL-friendly slug"
+    }
   },
   "form": {
+    "input": "Input",
+    "output": "Output",
     "inputString": "Input String",
     "outputString": "Output String",
     "inputUrl": "Input URL",
@@ -40,7 +132,12 @@
     "numbers": "Numbers",
     "symbols": "Symbols",
     "lowercase": "Lowercase",
-    "uppercase": "Uppercase"
+    "uppercase": "Uppercase",
+    "placeholder": {
+      "text": "Enter a text",
+      "value": "Enter a value",
+      "secretKey": "Enter a secret key",
+      "url": "Enter a URL"
+    }
   }
-
 }
diff --git a/src/main/i18n/locales/es_ES/devtools.json b/src/main/i18n/locales/es_ES/devtools.json
index 1f0c6026..cf4ad0f3 100644
--- a/src/main/i18n/locales/es_ES/devtools.json
+++ b/src/main/i18n/locales/es_ES/devtools.json
@@ -1,36 +1,128 @@
 {
-  "label": "Herramientas de Desarrollo",
-  "textTools": {
-    "label": "Herramientas de Texto",
-    "caseConverter": "Conversor de Mayúsculas/Minúsculas",
-    "urlParser": "Analizador de URL",
-    "slugGenerator": "Generador de Slug",
-    "sortLines": "Ordenar Líneas"
+  "label": "Herramientas de desarrollo",
+  "converters": {
+    "label": "Convertidores",
+    "caseConverter": {
+      "label": "Convertidor de mayúsculas",
+      "description": "Transformar texto a diferentes casos",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Texto a Unicode",
+      "description": "Convertir texto a Unicode y viceversa",
+      "modes": {
+        "textToUnicode": "Texto → Unicode",
+        "unicodeToText": "Unicode → Texto"
+      }
+    },
+    "textToAscii": {
+      "label": "Texto a ASCII Binary",
+      "description": "Convertir texto a ASCII binary y viceversa",
+      "modes": {
+        "textToAscii": "Texto → ASCII",
+        "asciiToText": "ASCII → Texto"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Codificar o decodificar texto a Base64",
+      "modes": {
+        "textToBase64": "Texto → Base64",
+        "base64ToText": "Base64 → Texto"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON a YAML",
+      "description": "Convertir JSON a YAML y viceversa",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON a TOML",
+      "description": "Convertir JSON a TOML y viceversa",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON a XML",
+      "description": "Convertir JSON a XML y viceversa",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Convertidor de colores",
+      "description": "Convertir colores entre diferentes formatos"
+    }
   },
   "crypto": {
     "label": "Criptografía / Seguridad",
-    "hashGenerator": "Generador de Hash",
-    "hmacGenerator": "Generador de HMAC",
-    "passGenerator": "Generador de Contraseñas",
-    "uuidGenerator": "Generador de UUID"
+    "hash": {
+      "label": "Generador de hash",
+      "description": "Generar hashes a partir de texto"
+    },
+    "hmac": {
+      "label": "Generador HMAC",
+      "description": "Generar código de autenticación de mensaje basado en hash (HMAC) compuesto por una clave y un mensaje"
+    },
+    "password": {
+      "label": "Generador de contraseñas",
+      "description": "Generar una contraseña segura"
+    },
+    "uuid": {
+      "label": "Generador UUID",
+      "description": "Generar un identificador único universal (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Codificadores / Decodificadores",
-    "url": "Codificador / Decodificador URL",
-    "base64": "Codificador / Decodificador Base64"
+  "web": {
+    "label": "Web",
+    "urlParser": {
+      "label": "Analizador URL",
+      "description": "Analizar una URL en sus componentes"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Codificar o decodificar URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Convertir texto a un slug compatible con URL"
+    }
   },
   "form": {
-    "inputString": "Cadena de Entrada",
-    "outputString": "Cadena de Salida",
-    "inputUrl": "URL de Entrada",
-    "outputUrl": "URL de Salida",
-    "parsedUrl": "URL Analizada",
-    "splitQueryString": "Dividir Cadena de Consulta",
+    "input": "Entrada",
+    "output": "Salida",
+    "inputString": "Cadena de entrada",
+    "outputString": "Cadena de salida",
+    "inputUrl": "URL de entrada",
+    "outputUrl": "URL de salida",
+    "parsedUrl": "URL analizada",
+    "splitQueryString": "Dividir Query String",
     "key": "Clave",
     "value": "Valor",
     "component": "Componente",
     "result": "Resultado",
-    "secretKey": "Clave Secreta",
+    "secretKey": "Clave secreta",
     "algorithm": "Algoritmo",
     "version": "Versión",
     "amount": "Cantidad",
@@ -40,6 +132,12 @@
     "numbers": "Números",
     "symbols": "Símbolos",
     "lowercase": "Minúsculas",
-    "uppercase": "Mayúsculas"
+    "uppercase": "Mayúsculas",
+    "placeholder": {
+      "text": "Ingrese un texto",
+      "value": "Ingrese un valor",
+      "secretKey": "Ingrese una clave secreta",
+      "url": "Ingrese una URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/fa_IR/devtools.json b/src/main/i18n/locales/fa_IR/devtools.json
index 288459e4..ca30fcfa 100644
--- a/src/main/i18n/locales/fa_IR/devtools.json
+++ b/src/main/i18n/locales/fa_IR/devtools.json
@@ -1,45 +1,143 @@
 {
-  "label": "ابزارهای توسعه",
-  "textTools": {
-    "label": "ابزارهای متن",
-    "caseConverter": "تبدیل حروف",
-    "urlParser": "تجزیه‌کننده URL",
-    "slugGenerator": "تولیدکننده Slug",
-    "sortLines": "مرتب‌سازی خطوط"
+  "label": "ابزارهای توسعه‌دهنده",
+  "converters": {
+    "label": "مبدل‌ها",
+    "caseConverter": {
+      "label": "مبدل حروف بزرگ و کوچک",
+      "description": "تبدیل متن به فرمت‌های مختلف حروف",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "متن به Unicode",
+      "description": "تبدیل متن به Unicode و برعکس",
+      "modes": {
+        "textToUnicode": "متن ← Unicode",
+        "unicodeToText": "Unicode ← متن"
+      }
+    },
+    "textToAscii": {
+      "label": "متن به ASCII Binary",
+      "description": "تبدیل متن به ASCII binary و برعکس",
+      "modes": {
+        "textToAscii": "متن ← ASCII",
+        "asciiToText": "ASCII ← متن"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "رمزگذاری یا رمزگشایی متن به Base64",
+      "modes": {
+        "textToBase64": "متن ← Base64",
+        "base64ToText": "Base64 ← متن"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON به YAML",
+      "description": "تبدیل JSON به YAML و برعکس",
+      "modes": {
+        "jsonToYaml": "JSON ← YAML",
+        "yamlToJson": "YAML ← JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON به TOML",
+      "description": "تبدیل JSON به TOML و برعکس",
+      "modes": {
+        "jsonToToml": "JSON ← TOML",
+        "tomlToJson": "TOML ← JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON به XML",
+      "description": "تبدیل JSON به XML و برعکس",
+      "modes": {
+        "jsonToXml": "JSON ← XML",
+        "xmlToJson": "XML ← JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "مبدل رنگ",
+      "description": "تبدیل رنگ‌ها بین فرمت‌های مختلف"
+    }
   },
   "crypto": {
     "label": "رمزنگاری / امنیت",
-    "hashGenerator": "تولیدکننده Hash",
-    "hmacGenerator": "تولیدکننده HMAC",
-    "passGenerator": "تولیدکننده رمز عبور",
-    "uuidGenerator": "تولیدکننده UUID"
+    "hash": {
+      "label": "تولیدکننده Hash",
+      "description": "تولید hash از متن"
+    },
+    "hmac": {
+      "label": "تولیدکننده HMAC",
+      "description": "تولید کد احراز هویت پیام مبتنی بر hash (HMAC) متشکل از کلید و پیام"
+    },
+    "password": {
+      "label": "تولیدکننده رمز عبور",
+      "description": "تولید رمز عبور امن"
+    },
+    "uuid": {
+      "label": "تولیدکننده UUID",
+      "description": "تولید شناسه منحصر به فرد جهانی (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "رمزگذار / رمزگشا",
-    "url": "رمزگذار / رمزگشای URL",
-    "base64": "رمزگذار / رمزگشای Base64"
+  "web": {
+    "label": "وب",
+    "urlParser": {
+      "label": "تجزیه‌کننده URL",
+      "description": "تجزیه URL به اجزای آن"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "رمزگذاری یا رمزگشایی URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "تبدیل متن به slug سازگار با URL"
+    }
   },
   "form": {
+    "input": "ورودی",
+    "output": "خروجی",
     "inputString": "رشته ورودی",
     "outputString": "رشته خروجی",
     "inputUrl": "URL ورودی",
     "outputUrl": "URL خروجی",
     "parsedUrl": "URL تجزیه شده",
-    "splitQueryString": "تقسیم رشته پرس‌وجو",
+    "splitQueryString": "تقسیم Query String",
     "key": "کلید",
     "value": "مقدار",
-    "component": "مؤلفه",
+    "component": "جزء",
     "result": "نتیجه",
     "secretKey": "کلید مخفی",
     "algorithm": "الگوریتم",
     "version": "نسخه",
-    "amount": "تعداد",
+    "amount": "مقدار",
     "type": "نوع",
     "length": "طول",
     "options": "گزینه‌ها",
     "numbers": "اعداد",
     "symbols": "نمادها",
     "lowercase": "حروف کوچک",
-    "uppercase": "حروف بزرگ"
+    "uppercase": "حروف بزرگ",
+    "placeholder": {
+      "text": "متن وارد کنید",
+      "value": "مقدار وارد کنید",
+      "secretKey": "کلید مخفی وارد کنید",
+      "url": "URL وارد کنید"
+    }
   }
 }
diff --git a/src/main/i18n/locales/fr_FR/devtools.json b/src/main/i18n/locales/fr_FR/devtools.json
index 34327efc..c4880316 100644
--- a/src/main/i18n/locales/fr_FR/devtools.json
+++ b/src/main/i18n/locales/fr_FR/devtools.json
@@ -1,31 +1,123 @@
 {
   "label": "Outils de développement",
-  "textTools": {
-    "label": "Outils de texte",
-    "caseConverter": "Convertisseur de casse",
-    "urlParser": "Analyseur d'URL",
-    "slugGenerator": "Générateur de slug",
-    "sortLines": "Trier les lignes"
+  "converters": {
+    "label": "Convertisseurs",
+    "caseConverter": {
+      "label": "Convertisseur de casse",
+      "description": "Transformer le texte en différentes casses",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Texte vers Unicode",
+      "description": "Convertir le texte en Unicode et vice versa",
+      "modes": {
+        "textToUnicode": "Texte → Unicode",
+        "unicodeToText": "Unicode → Texte"
+      }
+    },
+    "textToAscii": {
+      "label": "Texte vers ASCII Binary",
+      "description": "Convertir le texte en ASCII binary et vice versa",
+      "modes": {
+        "textToAscii": "Texte → ASCII",
+        "asciiToText": "ASCII → Texte"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Encoder ou décoder le texte en Base64",
+      "modes": {
+        "textToBase64": "Texte → Base64",
+        "base64ToText": "Base64 → Texte"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON vers YAML",
+      "description": "Convertir JSON en YAML et vice versa",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON vers TOML",
+      "description": "Convertir JSON en TOML et vice versa",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON vers XML",
+      "description": "Convertir JSON en XML et vice versa",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Convertisseur de couleurs",
+      "description": "Convertir les couleurs entre différents formats"
+    }
   },
   "crypto": {
     "label": "Cryptographie / Sécurité",
-    "hashGenerator": "Générateur de hachage",
-    "hmacGenerator": "Générateur HMAC",
-    "passGenerator": "Générateur de mot de passe",
-    "uuidGenerator": "Générateur UUID"
+    "hash": {
+      "label": "Générateur de hash",
+      "description": "Générer des hashes à partir de texte"
+    },
+    "hmac": {
+      "label": "Générateur HMAC",
+      "description": "Générer un code d'authentification de message basé sur le hash (HMAC) composé d'une clé et d'un message"
+    },
+    "password": {
+      "label": "Générateur de mot de passe",
+      "description": "Générer un mot de passe sécurisé"
+    },
+    "uuid": {
+      "label": "Générateur UUID",
+      "description": "Générer un identifiant unique universel (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Encodeurs / Décodeurs",
-    "url": "Encodeur / Décodeur URL",
-    "base64": "Encodeur / Décodeur Base64"
+  "web": {
+    "label": "Web",
+    "urlParser": {
+      "label": "Analyseur URL",
+      "description": "Analyser une URL en ses composants"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Encoder ou décoder une URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Convertir le texte en slug compatible URL"
+    }
   },
   "form": {
+    "input": "Entrée",
+    "output": "Sortie",
     "inputString": "Chaîne d'entrée",
     "outputString": "Chaîne de sortie",
     "inputUrl": "URL d'entrée",
     "outputUrl": "URL de sortie",
     "parsedUrl": "URL analysée",
-    "splitQueryString": "Diviser la chaîne de requête",
+    "splitQueryString": "Diviser Query String",
     "key": "Clé",
     "value": "Valeur",
     "component": "Composant",
@@ -40,6 +132,12 @@
     "numbers": "Chiffres",
     "symbols": "Symboles",
     "lowercase": "Minuscules",
-    "uppercase": "Majuscules"
+    "uppercase": "Majuscules",
+    "placeholder": {
+      "text": "Entrez un texte",
+      "value": "Entrez une valeur",
+      "secretKey": "Entrez une clé secrète",
+      "url": "Entrez une URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/ja_JP/devtools.json b/src/main/i18n/locales/ja_JP/devtools.json
index 778c59eb..1cf01b36 100644
--- a/src/main/i18n/locales/ja_JP/devtools.json
+++ b/src/main/i18n/locales/ja_JP/devtools.json
@@ -1,36 +1,128 @@
 {
   "label": "開発者ツール",
-  "textTools": {
-    "label": "テキストツール",
-    "caseConverter": "大文字小文字変換",
-    "urlParser": "URLパーサー",
-    "slugGenerator": "スラッグジェネレーター",
-    "sortLines": "行の並べ替え"
+  "converters": {
+    "label": "コンバーター",
+    "caseConverter": {
+      "label": "ケースコンバーター",
+      "description": "テキストを異なるケースに変換",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "テキストからUnicode",
+      "description": "テキストをUnicodeに変換、またはその逆",
+      "modes": {
+        "textToUnicode": "テキスト → Unicode",
+        "unicodeToText": "Unicode → テキスト"
+      }
+    },
+    "textToAscii": {
+      "label": "テキストからASCII Binary",
+      "description": "テキストをASCII binaryに変換、またはその逆",
+      "modes": {
+        "textToAscii": "テキスト → ASCII",
+        "asciiToText": "ASCII → テキスト"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "テキストをBase64にエンコード、またはデコード",
+      "modes": {
+        "textToBase64": "テキスト → Base64",
+        "base64ToText": "Base64 → テキスト"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSONからYAML",
+      "description": "JSONをYAMLに変換、またはその逆",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSONからTOML",
+      "description": "JSONをTOMLに変換、またはその逆",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSONからXML",
+      "description": "JSONをXMLに変換、またはその逆",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "カラーコンバーター",
+      "description": "色を異なるフォーマット間で変換"
+    }
   },
   "crypto": {
-    "label": "暗号化/セキュリティ",
-    "hashGenerator": "ハッシュジェネレーター",
-    "hmacGenerator": "HMACジェネレーター",
-    "passGenerator": "パスワードジェネレーター",
-    "uuidGenerator": "UUIDジェネレーター"
+    "label": "暗号化 / セキュリティ",
+    "hash": {
+      "label": "ハッシュジェネレーター",
+      "description": "テキストからハッシュを生成"
+    },
+    "hmac": {
+      "label": "HMACジェネレーター",
+      "description": "キーとメッセージから構成されるハッシュベースメッセージ認証コード（HMAC）を生成"
+    },
+    "password": {
+      "label": "パスワードジェネレーター",
+      "description": "安全なパスワードを生成"
+    },
+    "uuid": {
+      "label": "UUIDジェネレーター",
+      "description": "汎用一意識別子（UUID）を生成"
+    }
   },
-  "encodeDecode": {
-    "label": "エンコーダー/デコーダー",
-    "url": "URLエンコーダー/デコーダー",
-    "base64": "Base64エンコーダー/デコーダー"
+  "web": {
+    "label": "ウェブ",
+    "urlParser": {
+      "label": "URLパーサー",
+      "description": "URLをコンポーネントに解析"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "URLをエンコード、またはデコード",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "テキストをURL対応のslugに変換"
+    }
   },
   "form": {
+    "input": "入力",
+    "output": "出力",
     "inputString": "入力文字列",
     "outputString": "出力文字列",
     "inputUrl": "入力URL",
     "outputUrl": "出力URL",
-    "parsedUrl": "解析済みURL",
-    "splitQueryString": "クエリ文字列の分割",
+    "parsedUrl": "解析されたURL",
+    "splitQueryString": "Query Stringを分割",
     "key": "キー",
     "value": "値",
     "component": "コンポーネント",
     "result": "結果",
-    "secretKey": "シークレットキー",
+    "secretKey": "秘密キー",
     "algorithm": "アルゴリズム",
     "version": "バージョン",
     "amount": "数量",
@@ -40,6 +132,12 @@
     "numbers": "数字",
     "symbols": "記号",
     "lowercase": "小文字",
-    "uppercase": "大文字"
+    "uppercase": "大文字",
+    "placeholder": {
+      "text": "テキストを入力",
+      "value": "値を入力",
+      "secretKey": "秘密キーを入力",
+      "url": "URLを入力"
+    }
   }
 }
diff --git a/src/main/i18n/locales/pl_PL/devtools.json b/src/main/i18n/locales/pl_PL/devtools.json
index fe054bec..73daf368 100644
--- a/src/main/i18n/locales/pl_PL/devtools.json
+++ b/src/main/i18n/locales/pl_PL/devtools.json
@@ -1,31 +1,123 @@
 {
   "label": "Narzędzia deweloperskie",
-  "textTools": {
-    "label": "Narzędzia tekstowe",
-    "caseConverter": "Konwerter wielkości liter",
-    "urlParser": "Parser URL",
-    "slugGenerator": "Generator slugów",
-    "sortLines": "Sortowanie linii"
+  "converters": {
+    "label": "Konwertery",
+    "caseConverter": {
+      "label": "Konwerter wielkości liter",
+      "description": "Przekształcanie tekstu do różnych formatów",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Tekst na Unicode",
+      "description": "Konwertowanie tekstu na Unicode i odwrotnie",
+      "modes": {
+        "textToUnicode": "Tekst → Unicode",
+        "unicodeToText": "Unicode → Tekst"
+      }
+    },
+    "textToAscii": {
+      "label": "Tekst na ASCII Binary",
+      "description": "Konwertowanie tekstu na ASCII binary i odwrotnie",
+      "modes": {
+        "textToAscii": "Tekst → ASCII",
+        "asciiToText": "ASCII → Tekst"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Kodowanie lub dekodowanie tekstu do Base64",
+      "modes": {
+        "textToBase64": "Tekst → Base64",
+        "base64ToText": "Base64 → Tekst"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON na YAML",
+      "description": "Konwertowanie JSON na YAML i odwrotnie",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON na TOML",
+      "description": "Konwertowanie JSON na TOML i odwrotnie",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON na XML",
+      "description": "Konwertowanie JSON na XML i odwrotnie",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Konwerter kolorów",
+      "description": "Konwertowanie kolorów między różnymi formatami"
+    }
   },
   "crypto": {
     "label": "Kryptografia / Bezpieczeństwo",
-    "hashGenerator": "Generator hashy",
-    "hmacGenerator": "Generator HMAC",
-    "passGenerator": "Generator haseł",
-    "uuidGenerator": "Generator UUID"
+    "hash": {
+      "label": "Generator hash",
+      "description": "Generowanie hashy z tekstu"
+    },
+    "hmac": {
+      "label": "Generator HMAC",
+      "description": "Generowanie kodu uwierzytelniania wiadomości opartego na hash (HMAC) złożonego z klucza i wiadomości"
+    },
+    "password": {
+      "label": "Generator haseł",
+      "description": "Generowanie bezpiecznego hasła"
+    },
+    "uuid": {
+      "label": "Generator UUID",
+      "description": "Generowanie uniwersalnego unikalnego identyfikatora (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Kodery / Dekodery",
-    "url": "Koder / Dekoder URL",
-    "base64": "Koder / Dekoder Base64"
+  "web": {
+    "label": "Web",
+    "urlParser": {
+      "label": "Parser URL",
+      "description": "Parsowanie URL na komponenty"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Kodowanie lub dekodowanie URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Konwertowanie tekstu na slug przyjazny URL"
+    }
   },
   "form": {
-    "inputString": "Tekst wejściowy",
-    "outputString": "Tekst wyjściowy",
+    "input": "Wejście",
+    "output": "Wyjście",
+    "inputString": "Ciąg wejściowy",
+    "outputString": "Ciąg wyjściowy",
     "inputUrl": "URL wejściowy",
     "outputUrl": "URL wyjściowy",
-    "parsedUrl": "Przetworzony URL",
-    "splitQueryString": "Podziel ciąg zapytania",
+    "parsedUrl": "Sparsowany URL",
+    "splitQueryString": "Podziel Query String",
     "key": "Klucz",
     "value": "Wartość",
     "component": "Komponent",
@@ -40,6 +132,12 @@
     "numbers": "Cyfry",
     "symbols": "Symbole",
     "lowercase": "Małe litery",
-    "uppercase": "Wielkie litery"
+    "uppercase": "Wielkie litery",
+    "placeholder": {
+      "text": "Wprowadź tekst",
+      "value": "Wprowadź wartość",
+      "secretKey": "Wprowadź klucz tajny",
+      "url": "Wprowadź URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/pt_BR/devtools.json b/src/main/i18n/locales/pt_BR/devtools.json
index efa2094d..2b39d164 100644
--- a/src/main/i18n/locales/pt_BR/devtools.json
+++ b/src/main/i18n/locales/pt_BR/devtools.json
@@ -1,25 +1,117 @@
 {
-  "label": "Ferramentas de Desenvolvedor",
-  "textTools": {
-    "label": "Ferramentas de Texto",
-    "caseConverter": "Conversor de Maiúsculas/Minúsculas",
-    "urlParser": "URL Parser",
-    "slugGenerator": "Gerador de Slug",
-    "sortLines": "Ordenar Linhas"
+  "label": "Ferramentas de Desenvolvimento",
+  "converters": {
+    "label": "Conversores",
+    "caseConverter": {
+      "label": "Conversor de Maiúsculas",
+      "description": "Transformar texto em diferentes casos",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Texto para Unicode",
+      "description": "Converter texto para Unicode e vice-versa",
+      "modes": {
+        "textToUnicode": "Texto → Unicode",
+        "unicodeToText": "Unicode → Texto"
+      }
+    },
+    "textToAscii": {
+      "label": "Texto para ASCII Binary",
+      "description": "Converter texto para ASCII binary e vice-versa",
+      "modes": {
+        "textToAscii": "Texto → ASCII",
+        "asciiToText": "ASCII → Texto"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Codificar ou decodificar texto para Base64",
+      "modes": {
+        "textToBase64": "Texto → Base64",
+        "base64ToText": "Base64 → Texto"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON para YAML",
+      "description": "Converter JSON para YAML e vice-versa",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON para TOML",
+      "description": "Converter JSON para TOML e vice-versa",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON para XML",
+      "description": "Converter JSON para XML e vice-versa",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Conversor de Cores",
+      "description": "Converter cores entre diferentes formatos"
+    }
   },
   "crypto": {
     "label": "Criptografia / Segurança",
-    "hashGenerator": "Gerador de Hash",
-    "hmacGenerator": "Gerador de HMAC",
-    "passGenerator": "Gerador de Senha",
-    "uuidGenerator": "Gerador de UUID"
+    "hash": {
+      "label": "Gerador de Hash",
+      "description": "Gerar hashes a partir de texto"
+    },
+    "hmac": {
+      "label": "Gerador HMAC",
+      "description": "Gerar código de autenticação de mensagem baseado em hash (HMAC) composto por uma chave e uma mensagem"
+    },
+    "password": {
+      "label": "Gerador de Senhas",
+      "description": "Gerar uma senha segura"
+    },
+    "uuid": {
+      "label": "Gerador UUID",
+      "description": "Gerar um identificador único universal (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Codificadores / Decodificadores",
-    "url": "Codificador / Decodificador de URL",
-    "base64": "Codificador / Decodificador Base64"
+  "web": {
+    "label": "Web",
+    "urlParser": {
+      "label": "Analisador de URL",
+      "description": "Analisar uma URL em seus componentes"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Codificar ou decodificar URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Converter texto em um slug amigável para URL"
+    }
   },
   "form": {
+    "input": "Entrada",
+    "output": "Saída",
     "inputString": "String de Entrada",
     "outputString": "String de Saída",
     "inputUrl": "URL de Entrada",
@@ -40,6 +132,12 @@
     "numbers": "Números",
     "symbols": "Símbolos",
     "lowercase": "Minúsculas",
-    "uppercase": "Maiúsculas"
+    "uppercase": "Maiúsculas",
+    "placeholder": {
+      "text": "Digite um texto",
+      "value": "Digite um valor",
+      "secretKey": "Digite uma chave secreta",
+      "url": "Digite uma URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/ro_RO/devtools.json b/src/main/i18n/locales/ro_RO/devtools.json
index feba38a0..5e022d3d 100644
--- a/src/main/i18n/locales/ro_RO/devtools.json
+++ b/src/main/i18n/locales/ro_RO/devtools.json
@@ -1,27 +1,119 @@
 {
   "label": "Instrumente pentru Dezvoltatori",
-  "textTools": {
-    "label": "Instrumente Text",
-    "caseConverter": "Convertor Majuscule/Minuscule",
-    "urlParser": "URL Parser",
-    "slugGenerator": "Generator Slug",
-    "sortLines": "Sortare Linii"
+  "converters": {
+    "label": "Convertoare",
+    "caseConverter": {
+      "label": "Convertor de Majuscule",
+      "description": "Transformă textul în diferite formate de majuscule",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Text în Unicode",
+      "description": "Convertește textul în Unicode și invers",
+      "modes": {
+        "textToUnicode": "Text → Unicode",
+        "unicodeToText": "Unicode → Text"
+      }
+    },
+    "textToAscii": {
+      "label": "Text în ASCII Binary",
+      "description": "Convertește textul în ASCII binary și invers",
+      "modes": {
+        "textToAscii": "Text → ASCII",
+        "asciiToText": "ASCII → Text"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Codifică sau decodifică textul în Base64",
+      "modes": {
+        "textToBase64": "Text → Base64",
+        "base64ToText": "Base64 → Text"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON în YAML",
+      "description": "Convertește JSON în YAML și invers",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON în TOML",
+      "description": "Convertește JSON în TOML și invers",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON în XML",
+      "description": "Convertește JSON în XML și invers",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Convertor de Culori",
+      "description": "Convertește culorile între diferite formate"
+    }
   },
   "crypto": {
     "label": "Criptografie / Securitate",
-    "hashGenerator": "Generator Hash",
-    "hmacGenerator": "Generator HMAC",
-    "passGenerator": "Generator Parole",
-    "uuidGenerator": "Generator UUID"
+    "hash": {
+      "label": "Generator Hash",
+      "description": "Generează hash-uri din text"
+    },
+    "hmac": {
+      "label": "Generator HMAC",
+      "description": "Generează cod de autentificare a mesajului bazat pe hash (HMAC) compus dintr-o cheie și un mesaj"
+    },
+    "password": {
+      "label": "Generator de Parole",
+      "description": "Generează o parolă sigură"
+    },
+    "uuid": {
+      "label": "Generator UUID",
+      "description": "Generează un identificator unic universal (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Codificatori / Decodificatori",
-    "url": "Codificator / Decodificator URL",
-    "base64": "Codificator / Decodificator Base64"
+  "web": {
+    "label": "Web",
+    "urlParser": {
+      "label": "Analizor URL",
+      "description": "Analizează un URL în componentele sale"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Codifică sau decodifică URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Convertește textul într-un slug prietenos cu URL"
+    }
   },
   "form": {
-    "inputString": "String de Intrare",
-    "outputString": "String de Ieșire",
+    "input": "Intrare",
+    "output": "Ieșire",
+    "inputString": "Șir de Intrare",
+    "outputString": "Șir de Ieșire",
     "inputUrl": "URL de Intrare",
     "outputUrl": "URL de Ieșire",
     "parsedUrl": "URL Analizat",
@@ -40,6 +132,12 @@
     "numbers": "Numere",
     "symbols": "Simboluri",
     "lowercase": "Minuscule",
-    "uppercase": "Majuscule"
+    "uppercase": "Majuscule",
+    "placeholder": {
+      "text": "Introduceți un text",
+      "value": "Introduceți o valoare",
+      "secretKey": "Introduceți o cheie secretă",
+      "url": "Introduceți un URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/ru_RU/devtools.json b/src/main/i18n/locales/ru_RU/devtools.json
index 0c91b1c0..47229069 100644
--- a/src/main/i18n/locales/ru_RU/devtools.json
+++ b/src/main/i18n/locales/ru_RU/devtools.json
@@ -1,31 +1,123 @@
 {
   "label": "Инструменты разработчика",
-  "textTools": {
-    "label": "Текстовые инструменты",
-    "caseConverter": "Конвертер регистра",
-    "urlParser": "Парсер URL",
-    "slugGenerator": "Генератор slug",
-    "sortLines": "Сортировка строк"
+  "converters": {
+    "label": "Конвертеры",
+    "caseConverter": {
+      "label": "Конвертер регистра",
+      "description": "Преобразование текста в различные регистры",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Текст в Unicode",
+      "description": "Конвертация текста в Unicode и обратно",
+      "modes": {
+        "textToUnicode": "Текст → Unicode",
+        "unicodeToText": "Unicode → Текст"
+      }
+    },
+    "textToAscii": {
+      "label": "Текст в ASCII Binary",
+      "description": "Конвертация текста в ASCII binary и обратно",
+      "modes": {
+        "textToAscii": "Текст → ASCII",
+        "asciiToText": "ASCII → Текст"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Кодирование или декодирование текста в Base64",
+      "modes": {
+        "textToBase64": "Текст → Base64",
+        "base64ToText": "Base64 → Текст"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON в YAML",
+      "description": "Конвертация JSON в YAML и обратно",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON в TOML",
+      "description": "Конвертация JSON в TOML и обратно",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON в XML",
+      "description": "Конвертация JSON в XML и обратно",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Конвертер цветов",
+      "description": "Конвертация цветов между различными форматами"
+    }
   },
   "crypto": {
     "label": "Криптография / Безопасность",
-    "hashGenerator": "Генератор Hash",
-    "hmacGenerator": "Генератор HMAC",
-    "passGenerator": "Генератор паролей",
-    "uuidGenerator": "Генератор UUID"
+    "hash": {
+      "label": "Генератор хешей",
+      "description": "Генерация хешей из текста"
+    },
+    "hmac": {
+      "label": "HMAC Генератор",
+      "description": "Генерация кода аутентификации сообщений на основе хеша (HMAC) из ключа и сообщения"
+    },
+    "password": {
+      "label": "Генератор паролей",
+      "description": "Генерация безопасного пароля"
+    },
+    "uuid": {
+      "label": "UUID Генератор",
+      "description": "Генерация универсального уникального идентификатора (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Кодировщики / Декодеры",
-    "url": "URL кодировщик / декодер",
-    "base64": "Base64 кодировщик / декодер"
+  "web": {
+    "label": "Веб",
+    "urlParser": {
+      "label": "URL Парсер",
+      "description": "Разбор URL на компоненты"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Кодирование или декодирование URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Преобразование текста в URL-совместимый slug"
+    }
   },
   "form": {
+    "input": "Ввод",
+    "output": "Вывод",
     "inputString": "Входная строка",
     "outputString": "Выходная строка",
     "inputUrl": "Входной URL",
     "outputUrl": "Выходной URL",
     "parsedUrl": "Разобранный URL",
-    "splitQueryString": "Разделенная строка запроса",
+    "splitQueryString": "Разделить Query String",
     "key": "Ключ",
     "value": "Значение",
     "component": "Компонент",
@@ -37,9 +129,15 @@
     "type": "Тип",
     "length": "Длина",
     "options": "Опции",
-    "numbers": "Цифры",
+    "numbers": "Числа",
     "symbols": "Символы",
-    "lowercase": "Нижний регистр",
-    "uppercase": "Верхний регистр"
+    "lowercase": "Строчные",
+    "uppercase": "Заглавные",
+    "placeholder": {
+      "text": "Введите текст",
+      "value": "Введите значение",
+      "secretKey": "Введите секретный ключ",
+      "url": "Введите URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/tr_TR/devtools.json b/src/main/i18n/locales/tr_TR/devtools.json
index b62c581e..8c62119d 100644
--- a/src/main/i18n/locales/tr_TR/devtools.json
+++ b/src/main/i18n/locales/tr_TR/devtools.json
@@ -1,45 +1,143 @@
 {
   "label": "Geliştirici Araçları",
-  "textTools": {
-    "label": "Metin Araçları",
-    "caseConverter": "Büyük/Küçük Harf Dönüştürücü",
-    "urlParser": "URL Parser",
-    "slugGenerator": "Slug Oluşturucu",
-    "sortLines": "Satırları Sırala"
+  "converters": {
+    "label": "Dönüştürücüler",
+    "caseConverter": {
+      "label": "Büyük/Küçük Harf Dönüştürücü",
+      "description": "Metni farklı büyük/küçük harf biçimlerine dönüştür",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Metin Unicode'a",
+      "description": "Metni Unicode'a dönüştür ve tersi",
+      "modes": {
+        "textToUnicode": "Metin → Unicode",
+        "unicodeToText": "Unicode → Metin"
+      }
+    },
+    "textToAscii": {
+      "label": "Metin ASCII Binary'ye",
+      "description": "Metni ASCII binary'ye dönüştür ve tersi",
+      "modes": {
+        "textToAscii": "Metin → ASCII",
+        "asciiToText": "ASCII → Metin"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Metni Base64'e kodla veya çöz",
+      "modes": {
+        "textToBase64": "Metin → Base64",
+        "base64ToText": "Base64 → Metin"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON'dan YAML'a",
+      "description": "JSON'u YAML'a dönüştür ve tersi",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON'dan TOML'a",
+      "description": "JSON'u TOML'a dönüştür ve tersi",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON'dan XML'e",
+      "description": "JSON'u XML'e dönüştür ve tersi",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Renk Dönüştürücü",
+      "description": "Renkleri farklı formatlar arasında dönüştür"
+    }
   },
   "crypto": {
     "label": "Kriptografi / Güvenlik",
-    "hashGenerator": "Hash Oluşturucu",
-    "hmacGenerator": "HMAC Oluşturucu",
-    "passGenerator": "Şifre Oluşturucu",
-    "uuidGenerator": "UUID Oluşturucu"
+    "hash": {
+      "label": "Hash Üretici",
+      "description": "Metinden hash üret"
+    },
+    "hmac": {
+      "label": "HMAC Üretici",
+      "description": "Anahtar ve mesajdan oluşan hash tabanlı mesaj kimlik doğrulama kodu (HMAC) üret"
+    },
+    "password": {
+      "label": "Şifre Üretici",
+      "description": "Güvenli şifre üret"
+    },
+    "uuid": {
+      "label": "UUID Üretici",
+      "description": "Evrensel benzersiz tanımlayıcı (UUID) üret"
+    }
   },
-  "encodeDecode": {
-    "label": "Kodlayıcılar / Kod Çözücüler",
-    "url": "URL Kodlayıcı / Kod Çözücü",
-    "base64": "Base64 Kodlayıcı / Kod Çözücü"
+  "web": {
+    "label": "Web",
+    "urlParser": {
+      "label": "URL Ayrıştırıcı",
+      "description": "URL'yi bileşenlerine ayrıştır"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "URL'yi kodla veya çöz",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Metni URL dostu slug'a dönüştür"
+    }
   },
   "form": {
-    "inputString": "Giriş Metni",
-    "outputString": "Çıkış Metni",
-    "inputUrl": "Giriş URL'i",
-    "outputUrl": "Çıkış URL'i",
+    "input": "Giriş",
+    "output": "Çıkış",
+    "inputString": "Giriş Dizesi",
+    "outputString": "Çıkış Dizesi",
+    "inputUrl": "Giriş URL",
+    "outputUrl": "Çıkış URL",
     "parsedUrl": "Ayrıştırılmış URL",
-    "splitQueryString": "Sorgu Dizesini Böl",
+    "splitQueryString": "Query String'i Böl",
     "key": "Anahtar",
     "value": "Değer",
     "component": "Bileşen",
     "result": "Sonuç",
     "secretKey": "Gizli Anahtar",
     "algorithm": "Algoritma",
-    "version": "Versiyon",
+    "version": "Sürüm",
     "amount": "Miktar",
     "type": "Tür",
     "length": "Uzunluk",
     "options": "Seçenekler",
     "numbers": "Sayılar",
     "symbols": "Semboller",
-    "lowercase": "Küçük Harf",
-    "uppercase": "Büyük Harf"
+    "lowercase": "Küçük harf",
+    "uppercase": "Büyük harf",
+    "placeholder": {
+      "text": "Metin girin",
+      "value": "Değer girin",
+      "secretKey": "Gizli anahtar girin",
+      "url": "URL girin"
+    }
   }
 }
diff --git a/src/main/i18n/locales/uk_UA/devtools.json b/src/main/i18n/locales/uk_UA/devtools.json
index dd8321fb..ae4ac63d 100644
--- a/src/main/i18n/locales/uk_UA/devtools.json
+++ b/src/main/i18n/locales/uk_UA/devtools.json
@@ -1,31 +1,123 @@
 {
   "label": "Інструменти розробника",
-  "textTools": {
-    "label": "Текстові інструменти",
-    "caseConverter": "Конвертер регістру",
-    "urlParser": "URL Parser",
-    "slugGenerator": "Генератор slug",
-    "sortLines": "Сортування рядків"
+  "converters": {
+    "label": "Конвертери",
+    "caseConverter": {
+      "label": "Конвертер регістру",
+      "description": "Перетворення тексту в різні регістри",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "Текст в Unicode",
+      "description": "Конвертація тексту в Unicode і навпаки",
+      "modes": {
+        "textToUnicode": "Текст → Unicode",
+        "unicodeToText": "Unicode → Текст"
+      }
+    },
+    "textToAscii": {
+      "label": "Текст в ASCII Binary",
+      "description": "Конвертація тексту в ASCII binary і навпаки",
+      "modes": {
+        "textToAscii": "Текст → ASCII",
+        "asciiToText": "ASCII → Текст"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "Кодування або декодування тексту в Base64",
+      "modes": {
+        "textToBase64": "Текст → Base64",
+        "base64ToText": "Base64 → Текст"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON в YAML",
+      "description": "Конвертація JSON в YAML і навпаки",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON в TOML",
+      "description": "Конвертація JSON в TOML і навпаки",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON в XML",
+      "description": "Конвертація JSON в XML і навпаки",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "Конвертер кольорів",
+      "description": "Конвертація кольорів між різними форматами"
+    }
   },
   "crypto": {
     "label": "Криптографія / Безпека",
-    "hashGenerator": "Генератор хешів",
-    "hmacGenerator": "Генератор HMAC",
-    "passGenerator": "Генератор паролів",
-    "uuidGenerator": "Генератор UUID"
+    "hash": {
+      "label": "Генератор хешів",
+      "description": "Генерація хешів з тексту"
+    },
+    "hmac": {
+      "label": "HMAC Генератор",
+      "description": "Генерація коду автентифікації повідомлень на основі хешу (HMAC) з ключа та повідомлення"
+    },
+    "password": {
+      "label": "Генератор паролів",
+      "description": "Генерація безпечного пароля"
+    },
+    "uuid": {
+      "label": "UUID Генератор",
+      "description": "Генерація універсального унікального ідентифікатора (UUID)"
+    }
   },
-  "encodeDecode": {
-    "label": "Кодування / Декодування",
-    "url": "Кодування / Декодування URL",
-    "base64": "Кодування / Декодування Base64"
+  "web": {
+    "label": "Веб",
+    "urlParser": {
+      "label": "URL Парсер",
+      "description": "Розбір URL на компоненти"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "Кодування або декодування URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "Перетворення тексту в URL-сумісний slug"
+    }
   },
   "form": {
+    "input": "Введення",
+    "output": "Виведення",
     "inputString": "Вхідний рядок",
     "outputString": "Вихідний рядок",
     "inputUrl": "Вхідний URL",
     "outputUrl": "Вихідний URL",
     "parsedUrl": "Розібраний URL",
-    "splitQueryString": "Розділити рядок запиту",
+    "splitQueryString": "Розділити Query String",
     "key": "Ключ",
     "value": "Значення",
     "component": "Компонент",
@@ -39,7 +131,13 @@
     "options": "Опції",
     "numbers": "Цифри",
     "symbols": "Символи",
-    "lowercase": "Нижній регістр",
-    "uppercase": "Верхній регістр"
+    "lowercase": "Малі літери",
+    "uppercase": "Великі літери",
+    "placeholder": {
+      "text": "Введіть текст",
+      "value": "Введіть значення",
+      "secretKey": "Введіть секретний ключ",
+      "url": "Введіть URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/zh_CN/devtools.json b/src/main/i18n/locales/zh_CN/devtools.json
index 495927b2..ff9748b8 100644
--- a/src/main/i18n/locales/zh_CN/devtools.json
+++ b/src/main/i18n/locales/zh_CN/devtools.json
@@ -1,31 +1,123 @@
 {
   "label": "开发者工具",
-  "textTools": {
-    "label": "文本工具",
-    "caseConverter": "大小写转换",
-    "urlParser": "URL 解析器",
-    "slugGenerator": "Slug 生成器",
-    "sortLines": "行排序"
+  "converters": {
+    "label": "转换器",
+    "caseConverter": {
+      "label": "大小写转换器",
+      "description": "将文本转换为不同的大小写格式",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "文本转Unicode",
+      "description": "将文本转换为Unicode，反之亦然",
+      "modes": {
+        "textToUnicode": "文本 → Unicode",
+        "unicodeToText": "Unicode → 文本"
+      }
+    },
+    "textToAscii": {
+      "label": "文本转ASCII Binary",
+      "description": "将文本转换为ASCII binary，反之亦然",
+      "modes": {
+        "textToAscii": "文本 → ASCII",
+        "asciiToText": "ASCII → 文本"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "将文本编码或解码为Base64",
+      "modes": {
+        "textToBase64": "文本 → Base64",
+        "base64ToText": "Base64 → 文本"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON转YAML",
+      "description": "将JSON转换为YAML，反之亦然",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON转TOML",
+      "description": "将JSON转换为TOML，反之亦然",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON转XML",
+      "description": "将JSON转换为XML，反之亦然",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "颜色转换器",
+      "description": "在不同格式之间转换颜色"
+    }
   },
   "crypto": {
-    "label": "加密/安全",
-    "hashGenerator": "哈希生成器",
-    "hmacGenerator": "HMAC 生成器",
-    "passGenerator": "密码生成器",
-    "uuidGenerator": "UUID 生成器"
+    "label": "加密 / 安全",
+    "hash": {
+      "label": "哈希生成器",
+      "description": "从文本生成哈希值"
+    },
+    "hmac": {
+      "label": "HMAC生成器",
+      "description": "生成由密钥和消息组成的基于哈希的消息认证码（HMAC）"
+    },
+    "password": {
+      "label": "密码生成器",
+      "description": "生成安全密码"
+    },
+    "uuid": {
+      "label": "UUID生成器",
+      "description": "生成通用唯一标识符（UUID）"
+    }
   },
-  "encodeDecode": {
-    "label": "编码/解码器",
-    "url": "URL 编码/解码器",
-    "base64": "Base64 编码/解码器"
+  "web": {
+    "label": "网络",
+    "urlParser": {
+      "label": "URL解析器",
+      "description": "将URL解析为其组件"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "编码或解码URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "将文本转换为URL友好的slug"
+    }
   },
   "form": {
+    "input": "输入",
+    "output": "输出",
     "inputString": "输入字符串",
     "outputString": "输出字符串",
-    "inputUrl": "输入 URL",
-    "outputUrl": "输出 URL",
-    "parsedUrl": "已解析的 URL",
-    "splitQueryString": "拆分查询字符串",
+    "inputUrl": "输入URL",
+    "outputUrl": "输出URL",
+    "parsedUrl": "解析的URL",
+    "splitQueryString": "分割Query String",
     "key": "键",
     "value": "值",
     "component": "组件",
@@ -40,6 +132,12 @@
     "numbers": "数字",
     "symbols": "符号",
     "lowercase": "小写",
-    "uppercase": "大写"
+    "uppercase": "大写",
+    "placeholder": {
+      "text": "输入文本",
+      "value": "输入值",
+      "secretKey": "输入密钥",
+      "url": "输入URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/zh_HK/devtools.json b/src/main/i18n/locales/zh_HK/devtools.json
index 432bde69..042f4790 100644
--- a/src/main/i18n/locales/zh_HK/devtools.json
+++ b/src/main/i18n/locales/zh_HK/devtools.json
@@ -1,37 +1,129 @@
 {
   "label": "開發者工具",
-  "textTools": {
-    "label": "文本工具",
-    "caseConverter": "大小寫轉換",
-    "urlParser": "URL 解析器",
-    "slugGenerator": "Slug 生成器",
-    "sortLines": "行排序"
+  "converters": {
+    "label": "轉換器",
+    "caseConverter": {
+      "label": "大小寫轉換器",
+      "description": "將文字轉換為不同的大小寫格式",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "文字轉Unicode",
+      "description": "將文字轉換為Unicode，反之亦然",
+      "modes": {
+        "textToUnicode": "文字 → Unicode",
+        "unicodeToText": "Unicode → 文字"
+      }
+    },
+    "textToAscii": {
+      "label": "文字轉ASCII Binary",
+      "description": "將文字轉換為ASCII binary，反之亦然",
+      "modes": {
+        "textToAscii": "文字 → ASCII",
+        "asciiToText": "ASCII → 文字"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "將文字編碼或解碼為Base64",
+      "modes": {
+        "textToBase64": "文字 → Base64",
+        "base64ToText": "Base64 → 文字"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON轉YAML",
+      "description": "將JSON轉換為YAML，反之亦然",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON轉TOML",
+      "description": "將JSON轉換為TOML，反之亦然",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON轉XML",
+      "description": "將JSON轉換為XML，反之亦然",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "顏色轉換器",
+      "description": "在不同格式之間轉換顏色"
+    }
   },
   "crypto": {
-    "label": "加密/安全",
-    "hashGenerator": "哈希生成器",
-    "hmacGenerator": "HMAC 生成器",
-    "passGenerator": "密碼生成器",
-    "uuidGenerator": "UUID 生成器"
+    "label": "加密 / 安全",
+    "hash": {
+      "label": "雜湊產生器",
+      "description": "從文字產生雜湊值"
+    },
+    "hmac": {
+      "label": "HMAC產生器",
+      "description": "產生由金鑰和訊息組成的基於雜湊的訊息認證碼（HMAC）"
+    },
+    "password": {
+      "label": "密碼產生器",
+      "description": "產生安全密碼"
+    },
+    "uuid": {
+      "label": "UUID產生器",
+      "description": "產生通用唯一識別碼（UUID）"
+    }
   },
-  "encodeDecode": {
-    "label": "編碼/解碼器",
-    "url": "URL 編碼/解碼器",
-    "base64": "Base64 編碼/解碼器"
+  "web": {
+    "label": "網絡",
+    "urlParser": {
+      "label": "URL解析器",
+      "description": "將URL解析為其組件"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "編碼或解碼URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "將文字轉換為URL友好的slug"
+    }
   },
   "form": {
-    "inputString": "輸入字符串",
-    "outputString": "輸出字符串",
-    "inputUrl": "輸入 URL",
-    "outputUrl": "輸出 URL",
-    "parsedUrl": "已解析的 URL",
-    "splitQueryString": "拆分查詢字符串",
-    "key": "鍵",
+    "input": "輸入",
+    "output": "輸出",
+    "inputString": "輸入字串",
+    "outputString": "輸出字串",
+    "inputUrl": "輸入URL",
+    "outputUrl": "輸出URL",
+    "parsedUrl": "解析的URL",
+    "splitQueryString": "分割Query String",
+    "key": "金鑰",
     "value": "值",
     "component": "組件",
     "result": "結果",
-    "secretKey": "密鑰",
-    "algorithm": "算法",
+    "secretKey": "秘密金鑰",
+    "algorithm": "演算法",
     "version": "版本",
     "amount": "數量",
     "type": "類型",
@@ -40,6 +132,12 @@
     "numbers": "數字",
     "symbols": "符號",
     "lowercase": "小寫",
-    "uppercase": "大寫"
+    "uppercase": "大寫",
+    "placeholder": {
+      "text": "輸入文字",
+      "value": "輸入值",
+      "secretKey": "輸入秘密金鑰",
+      "url": "輸入URL"
+    }
   }
 }
diff --git a/src/main/i18n/locales/zh_TW/devtools.json b/src/main/i18n/locales/zh_TW/devtools.json
index 46f39e96..29e436c2 100644
--- a/src/main/i18n/locales/zh_TW/devtools.json
+++ b/src/main/i18n/locales/zh_TW/devtools.json
@@ -1,36 +1,128 @@
 {
   "label": "開發者工具",
-  "textTools": {
-    "label": "文字工具",
-    "caseConverter": "大小寫轉換",
-    "urlParser": "URL 解析器",
-    "slugGenerator": "Slug 生成器",
-    "sortLines": "行排序"
+  "converters": {
+    "label": "轉換器",
+    "caseConverter": {
+      "label": "大小寫轉換器",
+      "description": "將文字轉換為不同的大小寫格式",
+      "caseType": {
+        "uppercase": "Uppercase",
+        "lowercase": "Lowercase",
+        "camelcase": "Camelcase",
+        "capitalize": "Capitalize",
+        "constantcase": "Constantcase",
+        "snakecase": "Snakecase",
+        "kebabcase": "Kebabcase",
+        "pascalcase": "Pascalcase",
+        "dotcase": "Dotcase",
+        "pathcase": "Pathcase"
+      }
+    },
+    "textToUnicode": {
+      "label": "文字轉Unicode",
+      "description": "將文字轉換為Unicode，反之亦然",
+      "modes": {
+        "textToUnicode": "文字 → Unicode",
+        "unicodeToText": "Unicode → 文字"
+      }
+    },
+    "textToAscii": {
+      "label": "文字轉ASCII Binary",
+      "description": "將文字轉換為ASCII binary，反之亦然",
+      "modes": {
+        "textToAscii": "文字 → ASCII",
+        "asciiToText": "ASCII → 文字"
+      }
+    },
+    "base64": {
+      "label": "Base64 Encoder / Decoder",
+      "description": "將文字編碼或解碼為Base64",
+      "modes": {
+        "textToBase64": "文字 → Base64",
+        "base64ToText": "Base64 → 文字"
+      }
+    },
+    "jsonToYaml": {
+      "label": "JSON轉YAML",
+      "description": "將JSON轉換為YAML，反之亦然",
+      "modes": {
+        "jsonToYaml": "JSON → YAML",
+        "yamlToJson": "YAML → JSON"
+      }
+    },
+    "jsonToToml": {
+      "label": "JSON轉TOML",
+      "description": "將JSON轉換為TOML，反之亦然",
+      "modes": {
+        "jsonToToml": "JSON → TOML",
+        "tomlToJson": "TOML → JSON"
+      }
+    },
+    "jsonToXml": {
+      "label": "JSON轉XML",
+      "description": "將JSON轉換為XML，反之亦然",
+      "modes": {
+        "jsonToXml": "JSON → XML",
+        "xmlToJson": "XML → JSON"
+      }
+    },
+    "colorConverter": {
+      "label": "顏色轉換器",
+      "description": "在不同格式之間轉換顏色"
+    }
   },
   "crypto": {
     "label": "加密 / 安全",
-    "hashGenerator": "雜湊生成器",
-    "hmacGenerator": "HMAC 生成器",
-    "passGenerator": "密碼生成器",
-    "uuidGenerator": "UUID 生成器"
+    "hash": {
+      "label": "雜湊產生器",
+      "description": "從文字產生雜湊值"
+    },
+    "hmac": {
+      "label": "HMAC產生器",
+      "description": "產生由金鑰和訊息組成的基於雜湊的訊息認證碼（HMAC）"
+    },
+    "password": {
+      "label": "密碼產生器",
+      "description": "產生安全密碼"
+    },
+    "uuid": {
+      "label": "UUID產生器",
+      "description": "產生通用唯一識別碼（UUID）"
+    }
   },
-  "encodeDecode": {
-    "label": "編碼 / 解碼",
-    "url": "URL 編碼 / 解碼",
-    "base64": "Base64 編碼 / 解碼"
+  "web": {
+    "label": "網路",
+    "urlParser": {
+      "label": "URL解析器",
+      "description": "將URL解析為其組件"
+    },
+    "urlEncoder": {
+      "label": "URL Encoder / Decoder",
+      "description": "編碼或解碼URL",
+      "modes": {
+        "urlEncode": "URL Encode",
+        "urlDecode": "URL Decode"
+      }
+    },
+    "slugify": {
+      "label": "Slugify",
+      "description": "將文字轉換為URL友好的slug"
+    }
   },
   "form": {
+    "input": "輸入",
+    "output": "輸出",
     "inputString": "輸入字串",
     "outputString": "輸出字串",
-    "inputUrl": "輸入 URL",
-    "outputUrl": "輸出 URL",
-    "parsedUrl": "已解析 URL",
-    "splitQueryString": "分割查詢字串",
-    "key": "鍵",
+    "inputUrl": "輸入URL",
+    "outputUrl": "輸出URL",
+    "parsedUrl": "解析的URL",
+    "splitQueryString": "分割Query String",
+    "key": "金鑰",
     "value": "值",
     "component": "組件",
     "result": "結果",
-    "secretKey": "密鑰",
+    "secretKey": "秘密金鑰",
     "algorithm": "演算法",
     "version": "版本",
     "amount": "數量",
@@ -40,6 +132,12 @@
     "numbers": "數字",
     "symbols": "符號",
     "lowercase": "小寫",
-    "uppercase": "大寫"
+    "uppercase": "大寫",
+    "placeholder": {
+      "text": "輸入文字",
+      "value": "輸入值",
+      "secretKey": "輸入秘密金鑰",
+      "url": "輸入URL"
+    }
   }
 }

From ffaf0f970e966870bf6fa0d5e1956ee928fc80c9 Mon Sep 17 00:00:00 2001
From: Anton Reshetov <reshetov.art@gmail.com>
Date: Fri, 30 May 2025 09:04:32 +0300
Subject: [PATCH 31/31] feat(i18n): update localization menu

---
 src/main/i18n/locales/cs_CZ/menu.json | 1 +
 src/main/i18n/locales/de_DE/menu.json | 1 +
 src/main/i18n/locales/el_GR/menu.json | 1 +
 src/main/i18n/locales/en_US/menu.json | 1 +
 src/main/i18n/locales/es_ES/menu.json | 1 +
 src/main/i18n/locales/fa_IR/menu.json | 1 +
 src/main/i18n/locales/fr_FR/menu.json | 1 +
 src/main/i18n/locales/ja_JP/menu.json | 1 +
 src/main/i18n/locales/pl_PL/menu.json | 1 +
 src/main/i18n/locales/pt_BR/menu.json | 1 +
 src/main/i18n/locales/ro_RO/menu.json | 1 +
 src/main/i18n/locales/ru_RU/menu.json | 1 +
 src/main/i18n/locales/tr_TR/menu.json | 1 +
 src/main/i18n/locales/uk_UA/menu.json | 1 +
 src/main/i18n/locales/zh_CN/menu.json | 1 +
 src/main/i18n/locales/zh_HK/menu.json | 1 +
 src/main/i18n/locales/zh_TW/menu.json | 1 +
 17 files changed, 17 insertions(+)

diff --git a/src/main/i18n/locales/cs_CZ/menu.json b/src/main/i18n/locales/cs_CZ/menu.json
index aac38b2c..05a22266 100644
--- a/src/main/i18n/locales/cs_CZ/menu.json
+++ b/src/main/i18n/locales/cs_CZ/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Předvolby",
+    "devtools": "Vývojářské nástroje",
     "update": "Zkontrolovat aktualizace...",
     "quit": "Ukončit massCode",
     "about": "O aplikaci massCode",
diff --git a/src/main/i18n/locales/de_DE/menu.json b/src/main/i18n/locales/de_DE/menu.json
index e6363cc0..dceb276b 100644
--- a/src/main/i18n/locales/de_DE/menu.json
+++ b/src/main/i18n/locales/de_DE/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Einstellungen",
+    "devtools": "Entwicklerwerkzeuge",
     "update": "Nach Updates suchen...",
     "quit": "massCode beenden",
     "about": "Über massCode",
diff --git a/src/main/i18n/locales/el_GR/menu.json b/src/main/i18n/locales/el_GR/menu.json
index f0c238fd..f8a8d1ae 100644
--- a/src/main/i18n/locales/el_GR/menu.json
+++ b/src/main/i18n/locales/el_GR/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Προτιμήσεις",
+    "devtools": "Developer Tools",
     "update": "Έλεγχος για Ενημερώσεις...",
     "quit": "Έξοδος από το massCode",
     "about": "Σχετικά με το massCode",
diff --git a/src/main/i18n/locales/en_US/menu.json b/src/main/i18n/locales/en_US/menu.json
index 3cf1495f..1b07fa39 100644
--- a/src/main/i18n/locales/en_US/menu.json
+++ b/src/main/i18n/locales/en_US/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Preferences",
+    "devtools": "Developer Tools",
     "update": "Check for Updates...",
     "quit": "Quit massCode",
     "about": "About massCode",
diff --git a/src/main/i18n/locales/es_ES/menu.json b/src/main/i18n/locales/es_ES/menu.json
index d3efce93..73fda595 100644
--- a/src/main/i18n/locales/es_ES/menu.json
+++ b/src/main/i18n/locales/es_ES/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Preferencias",
+    "devtools": "Herramientas de Desarrollo",
     "update": "Buscar Actualizaciones...",
     "quit": "Salir de massCode",
     "about": "Acerca de massCode",
diff --git a/src/main/i18n/locales/fa_IR/menu.json b/src/main/i18n/locales/fa_IR/menu.json
index a927556b..9d9755bb 100644
--- a/src/main/i18n/locales/fa_IR/menu.json
+++ b/src/main/i18n/locales/fa_IR/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "تنظیمات",
+    "devtools": "ابزارهای توسعه",
     "update": "بررسی به‌روزرسانی‌ها...",
     "quit": "خروج از massCode",
     "about": "درباره massCode",
diff --git a/src/main/i18n/locales/fr_FR/menu.json b/src/main/i18n/locales/fr_FR/menu.json
index 19064a8b..d2744fa9 100644
--- a/src/main/i18n/locales/fr_FR/menu.json
+++ b/src/main/i18n/locales/fr_FR/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Préférences",
+    "devtools": "Outils de développement",
     "update": "Rechercher des mises à jour...",
     "quit": "Quitter massCode",
     "about": "À propos de massCode",
diff --git a/src/main/i18n/locales/ja_JP/menu.json b/src/main/i18n/locales/ja_JP/menu.json
index af1084c4..56e50077 100644
--- a/src/main/i18n/locales/ja_JP/menu.json
+++ b/src/main/i18n/locales/ja_JP/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "環境設定",
+    "devtools": "開発者ツール",
     "update": "アップデートを確認...",
     "quit": "massCodeを終了",
     "about": "massCodeについて",
diff --git a/src/main/i18n/locales/pl_PL/menu.json b/src/main/i18n/locales/pl_PL/menu.json
index 305617ce..642a9fbb 100644
--- a/src/main/i18n/locales/pl_PL/menu.json
+++ b/src/main/i18n/locales/pl_PL/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Preferencje",
+    "devtools": "Narzędzia deweloperskie",
     "update": "Sprawdź aktualizacje...",
     "quit": "Zakończ massCode",
     "about": "O massCode",
diff --git a/src/main/i18n/locales/pt_BR/menu.json b/src/main/i18n/locales/pt_BR/menu.json
index 1ecfb0dc..4a48a201 100644
--- a/src/main/i18n/locales/pt_BR/menu.json
+++ b/src/main/i18n/locales/pt_BR/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Preferências",
+    "devtools": "Ferramentas de Desenvolvedor",
     "update": "Verificar Atualizações...",
     "quit": "Sair do massCode",
     "about": "Sobre o massCode",
diff --git a/src/main/i18n/locales/ro_RO/menu.json b/src/main/i18n/locales/ro_RO/menu.json
index 59e66e09..50d47d6c 100644
--- a/src/main/i18n/locales/ro_RO/menu.json
+++ b/src/main/i18n/locales/ro_RO/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Preferințe",
+    "devtools": "Instrumente pentru Dezvoltatori",
     "update": "Verifică Actualizări...",
     "quit": "Închide massCode",
     "about": "Despre massCode",
diff --git a/src/main/i18n/locales/ru_RU/menu.json b/src/main/i18n/locales/ru_RU/menu.json
index 4a3878c3..c0f8e338 100644
--- a/src/main/i18n/locales/ru_RU/menu.json
+++ b/src/main/i18n/locales/ru_RU/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Настройки",
+    "devtools": "Инструменты разработчика",
     "update": "Проверить обновления...",
     "quit": "Выйти из massCode",
     "about": "О massCode",
diff --git a/src/main/i18n/locales/tr_TR/menu.json b/src/main/i18n/locales/tr_TR/menu.json
index 5dc37e05..dc3ae5a1 100644
--- a/src/main/i18n/locales/tr_TR/menu.json
+++ b/src/main/i18n/locales/tr_TR/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Tercihler",
+    "devtools": "Geliştirici Araçları",
     "update": "Güncellemeleri Kontrol Et...",
     "quit": "massCode'dan Çık",
     "about": "massCode Hakkında",
diff --git a/src/main/i18n/locales/uk_UA/menu.json b/src/main/i18n/locales/uk_UA/menu.json
index 55849300..38874418 100644
--- a/src/main/i18n/locales/uk_UA/menu.json
+++ b/src/main/i18n/locales/uk_UA/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "Налаштування",
+    "devtools": "Інструменти розробника",
     "update": "Перевірити оновлення...",
     "quit": "Вийти з massCode",
     "about": "Про massCode",
diff --git a/src/main/i18n/locales/zh_CN/menu.json b/src/main/i18n/locales/zh_CN/menu.json
index 385db360..1cefb9ea 100644
--- a/src/main/i18n/locales/zh_CN/menu.json
+++ b/src/main/i18n/locales/zh_CN/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "首选项",
+    "devtools": "开发者工具",
     "update": "检查更新...",
     "quit": "退出 massCode",
     "about": "关于 massCode",
diff --git a/src/main/i18n/locales/zh_HK/menu.json b/src/main/i18n/locales/zh_HK/menu.json
index ab540519..28a538f0 100644
--- a/src/main/i18n/locales/zh_HK/menu.json
+++ b/src/main/i18n/locales/zh_HK/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "偏好設置",
+    "devtools": "開發者工具",
     "update": "檢查更新...",
     "quit": "退出 massCode",
     "about": "關於 massCode",
diff --git a/src/main/i18n/locales/zh_TW/menu.json b/src/main/i18n/locales/zh_TW/menu.json
index c6ada15d..bd390704 100644
--- a/src/main/i18n/locales/zh_TW/menu.json
+++ b/src/main/i18n/locales/zh_TW/menu.json
@@ -2,6 +2,7 @@
   "app": {
     "label": "massCode",
     "preferences": "偏好設定",
+    "devtools": "開發者工具",
     "update": "檢查更新...",
     "quit": "退出 massCode",
     "about": "關於 massCode",