feat: show the uploaded file name next to the header

alioguzhan · alioguzhan · commit a77d8b160980 · 2025-03-14T06:32:55.000+03:00
- Added fileName property in core.js to track uploaded file names.
- Updated index.html to improve UI with new links and styles.
- Adjusted button sizes for better accessibility and usability.
diff --git a/src/core.js b/src/core.js
@@ -12,6 +12,7 @@ document.addEventListener("alpine:init", () => {
     supportedSources: ["Git", "Github"],
     source: undefined,
     sampleDataURL: "https://static.truffleshow.dev/github-sample.json",
+    fileName: null,
 
     init() { },
 
@@ -21,6 +22,7 @@ document.addEventListener("alpine:init", () => {
 
       this.isLoading = true;
       this.error = null;
+      this.fileName = file.name;
 
       const reader = new FileReader();
       reader.onload = (e) => {
@@ -61,6 +63,7 @@ document.addEventListener("alpine:init", () => {
       fetch(this.sampleDataURL)
         .then((response) => response.text())
         .then((data) => {
+          this.fileName = "github-sample.json";
           this.loadFile(data);
         })
         .catch((error) => {
diff --git a/src/index.html b/src/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="en">
+<html lang="en" class="dark">
 
 <head>
   <meta charset="UTF-8" />
@@ -26,9 +26,17 @@
   <div x-data="TruffleShowApp" class="container mx-auto py-8 px-4">
     <h1 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">
       <i class="fas fa-file-shield text-teal-600 dark:text-teal-400 mr-2"></i>
-      TruffleShow
+      <a href="/" class="hover:dark:text-gray-300">
+        TruffleShow
+      </a>
       <p class="text-sm text-center text-gray-600 dark:text-gray-400 mt-2">
-        v0.3.0 <!--x-release-please-version-->
+        <a href="https://github.com/alioguzhan/truffleshow/blob/main/CHANGELOG.md" target="_blank"
+          class="hover:dark:text-gray-200">
+          v0.3.0 <!--x-release-please-version-->
+        </a>
+        <a href="https://github.com/alioguzhan/truffleshow" target="_blank" class="ml-2 hover:dark:text-gray-200">
+          <i class="fab fa-github mr-2"></i>
+        </a>
       </p>
     </h1>
     <p class="text-center text-gray-600 dark:text-gray-100 mb-2">
@@ -42,7 +50,7 @@ <h1 class="text-3xl font-bold text-center mb-8 text-gray-800 dark:text-white">
     <div x-show="!isFileUploaded"
       class="max-w-lg mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-md p-8 dark-transition">
       <h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200 text-center">
-        <i class="fas fa-upload text-teal-500 dark:text-teal-400 mr-2"></i>
+        <i class="fas fa-file-upload text-teal-500 dark:text-teal-400 mr-2"></i>
         Upload TruffleHog JSON Output
       </h2>
 
@@ -107,11 +115,12 @@ <h2 class="text-xl font-semibold mb-4 text-gray-700 dark:text-gray-200 text-cent
       <div x-cloak x-show="isFileUploaded" class="bg-white dark:bg-gray-800 rounded-lg shadow-md p-6 dark-transition">
         <div class="flex justify-between items-center mb-6">
           <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">
-            <i class="fas fa-list-check text-teal-600 dark:text-teal-400 mr-2"></i>TruffleHog Findings
+            <i class="fas fa-list-check text-teal-600 dark:text-teal-400 mr-1"></i>Findings
+              <span class="text-sm dark:text-gray-400 font-normal" x-text="fileName"></span>
           </h2>
           <div class="flex items-center space-x-2">
-            <button @click="generateReport"
-              class="px-4 py-2 bg-blue-600 dark:bg-blue-700 text-white  rounded hover:bg-blue-700 dark:hover:bg-blue-600 transition flex items-center">
+            <button @click="generateReport" class="px-2 py-2 bg-blue-600 dark:bg-blue-700 text-white  rounded hover:bg-blue-700
+                dark:hover:bg-blue-600 transition flex items-center text-sm">
               <template x-if="!isGeneratingReport">
                 <i class="fas fa-file-pdf mr-1"></i>
               </template>
@@ -120,8 +129,8 @@ <h2 class="text-2xl font-semibold text-gray-800 dark:text-white">
               </template>
               <span x-text="isGeneratingReport ? 'Generating PDF...' : 'Download PDF (Beta)'"></span>
             </button>
-            <button @click="resetApp"
-              class="px-4 py-2 bg-teal-600 dark:bg-teal-700 text-white rounded hover:bg-teal-700 dark:hover:bg-teal-600 transition">
+            <button @click="resetApp" class="px-2 py-2 bg-teal-600 dark:bg-teal-700 text-white rounded hover:bg-teal-700 dark:hover:bg-teal-600
+                transition text-sm">
               <i class="fas fa-upload mr-2"></i>Upload Another File
             </button>
           </div>
