From 7fb925118abaf4d015cc7e00e9f07b710a987020 Mon Sep 17 00:00:00 2001
From: RG <rishabhgautam727@gmail.com>
Date: Thu, 19 Oct 2023 23:53:24 +0530
Subject: [PATCH] [FIX] Ui changes requested by @jaifroid

---
 www/css/app.css          | 2 +-
 www/index.html           | 7 +++++--
 www/js/lib/fileSystem.js | 3 ++-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/www/css/app.css b/www/css/app.css
index 484972255..a71393c6b 100644
--- a/www/css/app.css
+++ b/www/css/app.css
@@ -95,7 +95,7 @@
 }
 
 #zimSelectDropdown {
-    width: 100%;
+    width: 60%;
     font-size: large;
     height: 2em;
 }
diff --git a/www/index.html b/www/index.html
index a61809f6a..a5fc778ad 100644
--- a/www/index.html
+++ b/www/index.html
@@ -466,9 +466,12 @@ <h2 data-i18n="configure-title">Configuration</h2>
                             <p><span data-i18n="configure-selectordisplay">Drag and drop a new ZIM file, or</span>
                                 <a href="#" id="selectorsDisplayLink" data-i18n="configure-selectordisplay-link">display file selectors</a>.</p>
                         </div>
-                        <div id="openLocalFiles" style="display: none;">
+                        <div id="openLocalFiles" style="display: none; display: flex;flex-direction: row;">
+                            <div style="display: flex;flex-direction: row;">
+                                <p id="numberOfFilesDisplay">0</p>
+                                <span>&nbsp;archives found in selected location:</span>
+                            </div>
                             <select id="zimSelectDropdown" style="display: none;">
-                                <option value="" disabled selected>Select a file...</option>
                             </select>
                             <p data-i18n="configure-select-instructions" id="selectInstructions">Please select or drag and drop a .zim file (or all the .zimaa, .zimab etc in
                                 case of a split ZIM file):</p>
diff --git a/www/js/lib/fileSystem.js b/www/js/lib/fileSystem.js
index 4ddbaa044..b1b183117 100644
--- a/www/js/lib/fileSystem.js
+++ b/www/js/lib/fileSystem.js
@@ -14,13 +14,14 @@ import cache from './cache.js';
  */
 async function updateZimDropdownOptions (fileSystemHandler, selectedFile) {
     const select = document.getElementById('zimSelectDropdown')
-    let options = '<option value="" disabled selected>Select a file...</option>'
+    let options = ''
 
     fileSystemHandler.files.forEach(fileName => {
         if (fileName.endsWith('.zim') || fileName.endsWith('.zimaa')) options += `<option value="${fileName}">${fileName}</option>`
     });
     select.innerHTML = options
     document.getElementById('zimSelectDropdown').value = selectedFile
+    document.getElementById('numberOfFilesDisplay').innerText = fileSystemHandler.files.length
 }
 
 /**