refactor(json-prettify): improved layout for the json prettifier

src/tools/json-viewer/index.ts

@@ -2,10 +2,11 @@ import { Braces } from '@vicons/tabler';
 import { defineTool } from '../tool';
 
 export const tool = defineTool({
-  name: 'JSON viewer',
-  path: '/json-viewer',
-  description: 'Prettify JSON string to a human friendly readable format.',
+  name: 'JSON prettify and format',
+  path: '/json-prettify',
+  description: 'Prettify your JSON string to a human friendly readable format.',
   keywords: ['json', 'viewer', 'prettify', 'format'],
   component: () => import('./json-viewer.vue'),
   icon: Braces,
+  redirectFrom: ['/json-viewer'],
 });

src/tools/json-viewer/json-viewer.vue

@@ -1,45 +1,44 @@
 <template>
-  <n-card>
-    <n-form-item
-      label="Your raw json:"
-      :feedback="rawJsonValidation.message"
-      :validation-status="rawJsonValidation.status"
-    >
-      <n-input
-        v-model:value="rawJson"
-        class="json-input"
-        type="textarea"
-        placeholder="Paste your raw json here..."
-        autocomplete="off"
-        autocorrect="off"
-        autocapitalize="off"
-        spellcheck="false"
-      />
-    </n-form-item>
-
-    <n-space justify="center">
-      <n-button secondary @click="rawJson = ''">Clear</n-button>
-    </n-space>
-  </n-card>
-
-  <n-card v-if="cleanJson.length > 0">
-    <n-scrollbar :x-scrollable="true">
+  <n-form-item
+    label="Your raw json"
+    :feedback="rawJsonValidation.message"
+    :validation-status="rawJsonValidation.status"
+  >
+    <n-input
+      ref="inputElement"
+      v-model:value="rawJson"
+      placeholder="Paste your raw json here..."
+      type="textarea"
+      rows="20"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+    />
+  </n-form-item>
+  <n-form-item label="Prettify version of your json">
+    <n-card class="result-card" :style="`min-height: ${inputElementHeight ?? 400}px`">
       <n-config-provider :hljs="hljs">
-        <n-code :code="cleanJson" language="json" />
+        <n-code :code="cleanJson" language="json" :trim="false" />
       </n-config-provider>
-    </n-scrollbar>
-  </n-card>
+      <n-button v-if="cleanJson" class="copy-button" secondary @click="copy">Copy</n-button>
+    </n-card>
+  </n-form-item>
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { useCopy } from '@/composable/copy';
+import { useValidation } from '@/composable/validation';
+import { useElementSize } from '@vueuse/core';
 import hljs from 'highlight.js/lib/core';
 import json from 'highlight.js/lib/languages/json';
-import { useValidation } from '@/composable/validation';
+import { computed, ref } from 'vue';
 
 hljs.registerLanguage('json', json);
+const inputElement = ref<HTMLElement>();
+const { height: inputElementHeight } = useElementSize(inputElement);
 
-const rawJson = ref('');
+const rawJson = ref('{"hello": "world"}');
 const cleanJson = computed(() => {
   try {
     return JSON.stringify(JSON.parse(rawJson.value), null, 3);
@@ -48,19 +47,26 @@ const cleanJson = computed(() => {
   }
 });
 
+const { copy } = useCopy({ source: cleanJson });
+
 const rawJsonValidation = useValidation({
   source: rawJson,
   rules: [
     {
       validator: (v) => v === '' || JSON.parse(v),
-      message: 'Invalid json string',
+      message: 'Invalid json',
     },
   ],
 });
 </script>
 
 <style lang="less" scoped>
-.json-input ::v-deep(.n-input-wrapper) {
-  resize: both !important;
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
 }
 </style>