UI styling complete

src-tauri/Cargo.toml

@@ -1,37 +1,28 @@
-build-dependencies:
-  tauri-build:
-    features: []
-    version: '1.2'
-dependencies:
-  serde_json: '1.0'
-  tsu: 1.0.1
-  serde:
-    features:
-    - derive
-    version: '1.0'
-  tauri:
-    features:
-    - dialog-open
-    - dialog-save
-    - fs-copy-file
-    - fs-create-dir
-    - fs-exists
-    - fs-read-dir
-    - fs-read-file
-    - fs-write-file
-    version: '1.2'
-features:
-  custom-protocol:
-  - tauri/custom-protocol
-  default:
-  - custom-protocol
-package:
-  authors:
-  - you
-  description: A Tauri App
-  edition: '2021'
-  license: ''
-  name: tauri-desktop-app
-  repository: ''
-  rust-version: '1.57'
-  version: 0.0.0
+[package]
+name = "tauri-desktop-app"
+version = "0.0.0"
+description = "A Tauri App"
+authors = ["you"]
+license = ""
+repository = ""
+edition = "2021"
+rust-version = "1.57"
+
+# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
+
+[build-dependencies]
+tauri-build = {version = "1.2", features = [] }
+
+[dependencies]
+serde_json = "1.0"
+serde = { version = "1.0", features = ["derive"] }
+tauri = {version = "1.2", features = ["dialog-open", "dialog-save", "fs-copy-file", "fs-create-dir", "fs-exists", "fs-read-dir", "fs-read-file", "fs-write-file"] }
+tsu = "1.0.1"
+
+[features]
+# by default Tauri runs in production mode
+# when `tauri dev` runs it is executed with `cargo run --no-default-features` if `devPath` is an URL
+default = [ "custom-protocol" ]
+# this feature is used used for production builds where `devPath` points to the filesystem
+# DO NOT remove this
+custom-protocol = [ "tauri/custom-protocol" ]

src-tauri/tauri.conf.json

@@ -23,7 +23,8 @@
         "exists": true,
         "readDir": true,
         "readFile": true,
-        "writeFile": true
+        "writeFile": true,
+        "scope": ["**"]
       }
     },
     "bundle": {

src/components/FileUpload.tsx

@@ -1,7 +1,7 @@
 import { invoke } from "@tauri-apps/api/tauri";
 import { open } from "@tauri-apps/api/dialog";
 import { writeTextFile } from "@tauri-apps/api/fs";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import { AiOutlineFileText } from "react-icons/ai";
 
 type FileTextView = {
@@ -18,9 +18,10 @@ const FileUpload = ({ text }: { text?: string }) => {
 
   const handleFileSelection = async (e: any) => {
     const potentialPath = (await open({ multiple: false })) as string;
+    if (!potentialPath) return;
     setPath(potentialPath);
 
-    await invoke("get_text_from_file", { filePath: path })
+    await invoke("get_text_from_file", { filePath: potentialPath })
       .then((preview) => {
         setFileTextView({ data: preview as string });
       })
@@ -58,9 +59,17 @@ const FileUpload = ({ text }: { text?: string }) => {
         });
       });
 
-    if (jsonView !== "") await writeTextFile(path, jsonView);
-    if (tomlView !== "") await writeTextFile(path, tomlView);
-    if (yamlView !== "") await writeTextFile(path, yamlView);
+    var lastIndex = path.lastIndexOf("/");
+    var fileName = (ext: string) =>
+      path.slice(lastIndex + 1, path.length).split(".")[0] + "." + ext;
+    var newPath = path.slice(0, lastIndex + 1);
+
+    if (jsonView !== "")
+      await writeTextFile(newPath + fileName("json"), jsonView);
+    if (tomlView !== "")
+      await writeTextFile(newPath + fileName("toml"), tomlView);
+    if (yamlView !== "")
+      await writeTextFile(newPath + fileName("yaml"), yamlView);
   };
   return (
     <>
@@ -71,10 +80,8 @@ const FileUpload = ({ text }: { text?: string }) => {
       </label>
       {fileTextView.data ? (
         <>
-          <div className=" overflow-auto scroll-smooth w-[500px]  max-h-[200px]  mx-auto mt-5 break-words whitespace-pre-wrap border-primary border-[1px] rounded-xl p-5">
-            <p className="text-2xl underline mb-3 text-green-300">
-              Input File Sample
-            </p>
+          <div className="input-text-views">
+            <p className="text-view-header">Input File</p>
             <p className="text-sm"> Path: {path.slice(0, 50) + "..."}</p>
             <br />
             <p>{fileTextView.data}</p>
@@ -88,12 +95,26 @@ const FileUpload = ({ text }: { text?: string }) => {
           {fileTextView.err ? <p>{fileTextView.err}</p> : null}
         </div>
       )}
-      <div className="inline-flex">
+      <br />
+      <div className="inline-flex gap-5">
         {jsonView ? (
-          <p className="overflow-auto scroll-smooth w-[500px]  max-h-[200px]  mx-auto mt-5 break-words whitespace-pre-wrap border-primary border-[1px] rounded-xl p-5">
+          <p className="converted-text-views">
+            <p className="text-view-header">JSON Output</p>
             {jsonView}
           </p>
         ) : null}
+        {tomlView ? (
+          <p className="converted-text-views">
+            <p className="text-view-header">TOML Output</p>
+            {tomlView}
+          </p>
+        ) : null}
+        {yamlView ? (
+          <p className="converted-text-views">
+            <p className="text-view-header">YAML Output</p>
+            {yamlView}
+          </p>
+        ) : null}
       </div>
     </>
   );

src/style.css

@@ -4,7 +4,13 @@
 
 @layer components {
   html {
-    @apply text-primary;
+    @apply text-primary bg-[#1d1d1d] overflow-x-hidden;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  html::-webkit-scrollbar {
+    display: none;
   }
 
   .main-container {
@@ -17,4 +23,28 @@
   .default-input {
     @apply bg-transparent border-[1px] border-primary rounded-lg text-primary px-3 py-1;
   }
+
+  .input-text-views {
+    @apply overflow-auto scroll-smooth w-[500px]  max-h-[200px]  mx-auto mt-5 break-words whitespace-pre-wrap border-primary border-[1px] rounded-xl p-5;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .input-text-views::-webkit-scrollbar {
+    display: none;
+  }
+
+  .converted-text-views {
+    @apply overflow-auto scroll-smooth  max-h-[200px]  mx-auto mt-5 break-words whitespace-pre-wrap border-primary border-[1px] rounded-xl p-5;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+
+  .converted-text-views::-webkit-scrollbar {
+    display: none;
+  }
+
+  .text-view-header {
+    @apply text-2xl underline mb-3 text-green-300;
+  }
 }