From 4a2da2b7e0b9eab6ea01e66fb59758d3035bc7c9 Mon Sep 17 00:00:00 2001
From: Anthony Stirling <77850077+Frooodle@users.noreply.github.com>
Date: Sat, 4 Mar 2023 00:10:13 +0000
Subject: [PATCH] rework navbar and also multi submits

---
 .../SPDF/controller/PdfController.java        |  10 +
 src/main/resources/application.properties     |   4 +-
 .../resources/templates/extract-images.html   |  16 +-
 .../resources/templates/fragments/common.html |  50 ++-
 .../resources/templates/fragments/navbar.html | 367 ++++++++++++------
 src/main/resources/templates/merge-pdfs.html  | 177 +++++----
 6 files changed, 402 insertions(+), 222 deletions(-)

diff --git a/src/main/java/stirling/software/SPDF/controller/PdfController.java b/src/main/java/stirling/software/SPDF/controller/PdfController.java
index b0645a3a8..7c1837dfe 100644
--- a/src/main/java/stirling/software/SPDF/controller/PdfController.java
+++ b/src/main/java/stirling/software/SPDF/controller/PdfController.java
@@ -2,6 +2,9 @@ package stirling.software.SPDF.controller;
 
 import org.slf4j.Logger;
 import org.slf4j.LoggerFactory;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.beans.factory.annotation.Value;
+import org.springframework.core.env.Environment;
 import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
@@ -11,6 +14,9 @@ public class PdfController {
 
     private static final Logger logger = LoggerFactory.getLogger(PdfController.class);
 
+    @Autowired
+    private Environment environment;
+    
     @GetMapping("/home")
     public String root(Model model) {
         return "redirect:/";
@@ -19,7 +25,11 @@ public class PdfController {
     @GetMapping("/")
     public String home(Model model) {
         model.addAttribute("currentPage", "home");
+        String appVersion = environment.getProperty("version");
+        model.addAttribute("appVersion", appVersion);
         return "home";
     }
 
+
+    
 }
\ No newline at end of file
diff --git a/src/main/resources/application.properties b/src/main/resources/application.properties
index 13dce5032..88844ae41 100644
--- a/src/main/resources/application.properties
+++ b/src/main/resources/application.properties
@@ -14,4 +14,6 @@ server.error.path=/error
 server.error.whitelabel.enabled=false
 server.error.include-stacktrace=always
 server.error.include-exception=true
-server.error.include-message=always
\ No newline at end of file
+server.error.include-message=always
+
+server.servlet.session.tracking-modes=cookie
\ No newline at end of file
diff --git a/src/main/resources/templates/extract-images.html b/src/main/resources/templates/extract-images.html
index 84f784f68..1e8fef12c 100644
--- a/src/main/resources/templates/extract-images.html
+++ b/src/main/resources/templates/extract-images.html
@@ -27,18 +27,20 @@
               <button type="submit" class="btn btn-primary" th:text="#{extractImages.submit}"></button>
             </form>
             <th:block th:insert="~{fragments/common :: filelist}"></th:block>
-            <div id="progressBarContainer" style="display: none;">
-                <div class="progress">
-                    <div id="progressBar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;"></div>
+            
+            <br>
+            <div id="progressBarContainer" style="display: none; position: relative;">
+                <div class="progress" style="height: 1rem;">
+                    <div id="progressBar" class="progress-bar progress-bar-striped progress-bar-animated bg-success" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
+                        <span class="sr-only">Loading...</span>
+                    </div>
                 </div>
             </div>
 
             <script>
-            $('#multiPdfForm').submit(function(event) {
+            $('form').submit(function(event) {
             	 event.preventDefault(); // Prevent the default form handling behavior
-
-
-            	    submitMultiPdfForm(event);
+            	 submitMultiPdfForm(event);
             });
             
          
diff --git a/src/main/resources/templates/fragments/common.html b/src/main/resources/templates/fragments/common.html
index 5e546a23d..8a68419a2 100644
--- a/src/main/resources/templates/fragments/common.html
+++ b/src/main/resources/templates/fragments/common.html
@@ -111,27 +111,45 @@
 
 <th:block th:fragment="fileSelector(name, multiple)">
     <div class="custom-file-chooser">
-        <div class="custom-file">
-            <input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:multiple="${multiple}"> 
-            <label class="custom-file-label" th:for="${name}+'-input'" th:text="#{pdfPrompt}"></label>
-        </div>
-    </div>
+  <div class="custom-file">
+    <input type="file" class="custom-file-input" th:name="${name}" th:id="${name}+'-input'" th:multiple="${multiple}">
+    <label class="custom-file-label" th:for="${name}+'-input'" th:text="#{pdfPrompt}"></label>
+  </div>
+  <div class="selected-files"></div>
+</div>
+
 
     <script th:inline="javascript">
-		$([[${"#"+name+"-input"}]]).on("change", function() {
-			const files = $(this).get(0).files;
-			const fileNames = Array.from(files).map(f => f.name).join(", ");
-			if (fileNames) {
-				$(this).siblings(".custom-file-label").addClass("selected").html(fileNames);
-			} else {
-				$(this).siblings(".custom-file-label").addClass("selected").html([[#{pdfPrompt}]]);
-			}
-		});
+    $([[${"#"+name+"-input"}]]).on("change", function() {
+    	  const files = $(this).get(0).files;
+    	  const fileNames = Array.from(files).map(f => f.name);
+    	  const selectedFilesContainer = $(this).siblings(".selected-files");
+    	  selectedFilesContainer.empty();
+    	  fileNames.forEach(fileName => {
+    	    selectedFilesContainer.append("<div>" + fileName + "</div>");
+    	  });
+    	  if (fileNames.length === 1) {
+		    $(this).siblings(".custom-file-label").addClass("selected").html(fileNames[0]);
+		  } else if (fileNames.length > 1) {
+		    $(this).siblings(".custom-file-label").addClass("selected").html(fileNames.length + " files selected");
+		  } else {
+		    $(this).siblings(".custom-file-label").addClass("selected").html([[#{pdfPrompt}]]);
+		  }
+    	});
+
 	</script>
 
     <style>
     .custom-file-label {
-    	padding-right: 90px;
-    }
+  padding-right: 90px;
+}
+
+.selected-files {
+  margin-top: 10px;
+  max-height: 150px;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
     </style>
 </th:block>
\ No newline at end of file
diff --git a/src/main/resources/templates/fragments/navbar.html b/src/main/resources/templates/fragments/navbar.html
index 5ae58ebf3..74da3c806 100644
--- a/src/main/resources/templates/fragments/navbar.html
+++ b/src/main/resources/templates/fragments/navbar.html
@@ -1,139 +1,278 @@
-<div th:fragment="navbar">
-	<nav class="navbar navbar-expand-lg navbar-light bg-light">
-		<div class="container">
+<div th:fragment="navbar" class="mx-auto">
 
-			<a class="navbar-brand" href="#" th:href="@{/}">Stirling PDF</a>
 
-			<button class="navbar-toggler" type="button" data-toggle="collapse"
-					data-target="#navbarNav" aria-controls="navbarNav"
-					aria-expanded="false" aria-label="Toggle navigation">
-				<span class="navbar-toggler-icon"></span>
-			</button>
 
-			<div class="collapse navbar-collapse" id="navbarNav">
+    <style>
+.toggle-container {
+	display: flex;
+	align-items: center;
+	margin-right: 10px;
+}
 
-				<ul class="navbar-nav">
+.toggle {
+	position: relative;
+	display: inline-block;
+	width: 50px;
+	height: 28px;
+}
 
-					<li class="nav-item">
-						<a class="nav-link" href="#" th:href="@{merge-pdfs}" th:classappend="${currentPage}=='merge-pdfs' ? 'active' : ''" th:text="#{home.merge.title}"></a>
-					</li>
+.toggle input {
+	display: none;
+}
 
-					<li class="nav-item">
-						<a class="nav-link" href="#" th:href="@{split-pdfs}" th:classappend="${currentPage}=='split-pdfs' ? 'active' : ''" th:text="#{home.split.title}"></a>
-					</li>
+.slider {
+	position: absolute;
+	cursor: pointer;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background-color: #ccc;
+	border-radius: 28px;
+	transition: .4s;
+}
 
-					<li class="nav-item">
-						<a class="nav-link" href="#" th:href="@{pdf-organizer}" th:classappend="${currentPage}=='pdf-organizer' ? 'active' : ''" th:text="#{home.pdfOrganiser.title}"></a>
-					</li>
+.slider:before {
+	position: absolute;
+	content: "";
+	height: 20px;
+	width: 20px;
+	left: 4px;
+	bottom: 4px;
+	background-color: white;
+	border-radius: 50%;
+	transition: .4s;
+}
 
-					<li class="nav-item">
-						<a class="nav-link" href="#" th:href="@{rotate-pdf}" th:classappend="${currentPage}=='rotate-pdf' ? 'active' : ''" th:text="#{home.rotate.title}"></a>
-					</li>
+input:checked+.slider {
+	background-color: #2196F3;
+}
 
-					<li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='xlsx-to-pdf' ? 'active' : ''">
-						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  th:text="#{navbar.convert}"></a>
-						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
-							<a class="dropdown-item" href="#" th:href="@{pdf-to-img}" th:classappend="${currentPage}=='pdf-to-img' ? 'active' : ''"  th:text="#{home.pdfToImage.title}"></a>
-							<a class="dropdown-item" href="#" th:href="@{img-to-pdf}" th:classappend="${currentPage}=='img-to-pdf' ? 'active' : ''" th:text="#{home.imageToPdf.title}"></a>
-                            <a class="dropdown-item" href="#" th:href="@{xlsx-to-pdf}" th:classappend="${currentPage}=='xlsx-to-pdf' ? 'active' : ''" th:text="#{home.xlsToPdf.title}"></a>
-						</div>
-					</li>
+input:focus+.slider {
+	box-shadow: 0 0 1px #2196F3;
+}
 
-					<li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='change-permissions' OR ${currentPage}=='add-watermark' OR ${currentPage}=='remove-watermark' ? 'active' : ''">
-						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  th:text="#{navbar.security}"></a>
-						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
-							<a class="dropdown-item" href="#" th:href="@{add-password}" th:classappend="${currentPage}=='add-password' ? 'active' : ''" th:text="#{home.addPassword.title}"></a>
-							<a class="dropdown-item" href="#" th:href="@{remove-password}" th:classappend="${currentPage}=='remove-password' ? 'active' : ''" th:text="#{home.removePassword.title}"></a>
-							<a class="dropdown-item" href="#" th:href="@{change-permissions}" th:classappend="${currentPage}=='change-permissions' ? 'active' : ''" th:text="#{home.permissions.title}"></a>
-							<a class="dropdown-item" href="#" th:href="@{add-watermark}" th:classappend="${currentPage}=='add-watermark' ? 'active' : ''"  th:text="#{home.watermark.title}"></a>
-							<a class="dropdown-item" href="#" th:href="@{change-metadata}" th:classappend="${currentPage}=='change-metadata' ? 'active' : ''"  th:text="#{home.changeMetadata.title}"></a>
-						</div>
-					</li>
+input:checked+.slider:before {
+	transform: translateX(22px);
+}
 
-					<li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='add-image' OR ${currentPage}=='compress-pdf' ? 'active' : ''">
-						<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" th:text="#{navbar.other}"></a>
-						<div class="dropdown-menu" aria-labelledby="navbarDropdown">
-							<a class="dropdown-item" href="#" th:href="@{add-image}" th:classappend="${currentPage}=='add-image' ? 'active' : ''" th:text="#{home.addImage.title}"></a>
-							<a class="dropdown-item" href="#" th:href="@{compress-pdf}" th:classappend="${currentPage}=='compress-pdf' ? 'active' : ''" th:text="#{home.compressPdfs.title}"></a>
-							<a class="dropdown-item" href="#" th:href="@{remove-pages}" th:classappend="${currentPage}=='remove-pages' ? 'active' : ''" th:text="#{home.removePages.title}"></a>
-						</div>
-					</li>
+.toggle-label {
+	margin-top: 2px;
+	margin-left: 2px;
+	text-align: center;
+	font-size: 14px;
+	color: #333;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 20px;
+	width: 60px;
+}
 
-					<li class="nav-item">
-						<a class="nav-link" href="#" th:href="@{add-image}" th:classappend="${currentPage}=='add-image' ? 'active' : ''"></a>
-					</li>
+.navbar-nav {
+  width: 100% !important;
+  white-space: nowrap !important;
+}
 
-					<li class="nav-item">
-						<a class="nav-link" href="#" th:href="@{compress-pdf}" th:classappend="${currentPage}=='compress-pdf' ? 'active' : ''"></a>
-					</li>
-                  
-                    
-					<input type="checkbox" id="toggle-dark-mode" checked="true" th:onclick="javascript:toggleDarkMode()">
-					<a class="nav-link" href="#" for="toggle-dark-mode" th:text="#{navbar.darkmode}"></a>
-                   
-                    
-					<li class="nav-item dropdown">
-						<a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
-							<i class="bi bi-globe2"></i>
-						</a>
-						<div class="dropdown-menu" aria-labelledby="languageDropdown">
-							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_US">English (US)</a>
-							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_GB">English (UK)</a>
-							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="ar_AR">العربية</a>
-							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="de_DE">Deutsch</a>
-							<a class="dropdown-item lang_dropdown-item" href="" data-language-code="fr_FR">Français</a>
-						</div>
-					</li>
 
-				</ul>
-                
-                <ul class="navbar-nav ml-auto">
-                        <li class="nav-item">
-                          <button type="button" class="btn btn-outline-primary" id="update-btn">Update available</button>
-                        </li>
-                    </ul>
-				<script>
-					document.addEventListener('DOMContentLoaded', function() {
-						// Get the dropdown items
-						var dropdownItems = document.querySelectorAll('.lang_dropdown-item');
+</style>
+    <script>
+					document
+							.addEventListener(
+									'DOMContentLoaded',
+									function() {
+										// Get the dropdown items
+										var dropdownItems = document
+												.querySelectorAll('.lang_dropdown-item');
 
-						// Loop through the dropdown items
-						for (var i = 0; i < dropdownItems.length; i++) {
-							dropdownItems[i].classList.remove('active');
-							if (dropdownItems[i].dataset.languageCode ===  localStorage.getItem('languageCode')) {
-								dropdownItems[i].classList.add('active');
-							}
+										// Loop through the dropdown items
+										for (var i = 0; i < dropdownItems.length; i++) {
+											dropdownItems[i].classList
+													.remove('active');
+											if (dropdownItems[i].dataset.languageCode === localStorage
+													.getItem('languageCode')) {
+												dropdownItems[i].classList
+														.add('active');
+											}
 
-							// Add a click event listener to each dropdown item
-							dropdownItems[i].addEventListener('click', function(event) {
+											// Add a click event listener to each dropdown item
+											dropdownItems[i]
+													.addEventListener(
+															'click',
+															function(event) {
 
-								// Prevent the default link behavior
-								event.preventDefault();
+																// Prevent the default link behavior
+																event
+																		.preventDefault();
 
-								// Get the language code
-								var languageCode = this.dataset.languageCode;
+																// Get the language code
+																var languageCode = this.dataset.languageCode;
 
-								// Save the language code to local storage
-								localStorage.setItem('languageCode', languageCode);
+																// Save the language code to local storage
+																localStorage
+																		.setItem(
+																				'languageCode',
+																				languageCode);
 
-								// Get the current URL
-								var currentUrl = window.location.href;
+																// Get the current URL
+																var currentUrl = window.location.href;
 
-								// Check if the URL already contains a "?lang" query parameter
-								if (currentUrl.indexOf('?lang=') === -1) {
-									// Update the URL with the "?lang" query parameter
-									window.location.href = currentUrl + '?lang=' + languageCode;
-								} else {
-									// Replace the "?lang" query parameter with the new value
-									window.location.href = currentUrl.replace(/\?lang=\w{2,}/, '?lang=' + languageCode);
-								}
-							});
-						}
-					});
+																// Check if the URL already contains a "?lang" query parameter
+																if (currentUrl
+																		.indexOf('?lang=') === -1) {
+																	// Update the URL with the "?lang" query parameter
+																	window.location.href = currentUrl
+																			+ '?lang='
+																			+ languageCode;
+																} else {
+																	// Replace the "?lang" query parameter with the new value
+																	window.location.href = currentUrl
+																			.replace(
+																					/\?lang=\w{2,}/,
+																					'?lang='
+																							+ languageCode);
+																}
+															});
+										}
+									});
 				</script>
 
-			</div>
-		</div>
-	</nav>
+
+    <nav class="navbar navbar-expand-lg navbar-light bg-light">
+        <div class="container ">
+
+            <a class="navbar-brand" href="#" th:href="@{/}">Stirling PDF</a>
+
+            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+                <span class="navbar-toggler-icon"></span>
+            </button>
+
+            <div class="collapse navbar-collapse" id="navbarNav">
+
+                <ul class="navbar-nav mr-auto flex-nowrap">
+
+                    <li class="nav-item"><a class="nav-link" href="#" th:href="@{merge-pdfs}" th:classappend="${currentPage}=='merge-pdfs' ? 'active' : ''" th:text="#{home.merge.title}"></a></li>
+
+                    <li class="nav-item"><a class="nav-link" href="#" th:href="@{split-pdfs}" th:classappend="${currentPage}=='split-pdfs' ? 'active' : ''" th:text="#{home.split.title}"></a></li>
+
+                    <li class="nav-item"><a class="nav-link" href="#" th:href="@{pdf-organizer}" th:classappend="${currentPage}=='pdf-organizer' ? 'active' : ''" th:text="#{home.pdfOrganiser.title}"></a></li>
+
+                    <li class="nav-item"><a class="nav-link" href="#" th:href="@{rotate-pdf}" th:classappend="${currentPage}=='rotate-pdf' ? 'active' : ''" th:text="#{home.rotate.title}"></a></li>
+
+                    <li class="nav-item dropdown" th:classappend="${currentPage}=='pdf-to-img' OR ${currentPage}=='img-to-pdf' OR ${currentPage}=='xlsx-to-pdf' ? 'active' : ''"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false" th:text="#{navbar.convert}"></a>
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item" href="#" th:href="@{pdf-to-img}" th:classappend="${currentPage}=='pdf-to-img' ? 'active' : ''" th:text="#{home.pdfToImage.title}"></a> 
+                            <a class="dropdown-item" href="#" th:href="@{img-to-pdf}" th:classappend="${currentPage}=='img-to-pdf' ? 'active' : ''" th:text="#{home.imageToPdf.title}"></a> 
+                            <a class="dropdown-item" href="#" th:href="@{xlsx-to-pdf}" th:classappend="${currentPage}=='xlsx-to-pdf' ? 'active' : ''" th:text="#{home.xlsToPdf.title}"></a>
+                        </div>
+                    </li>
+
+                   
+                   <li class="nav-item dropdown" th:classappend="${currentPage}=='add-password' OR ${currentPage}=='remove-password' OR ${currentPage}=='change-permissions' OR ${currentPage}=='add-watermark' OR ${currentPage}=='remove-watermark' ? 'active' : ''">
+                        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"  th:text="#{navbar.security}"></a>
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item" href="#" th:href="@{add-password}" th:classappend="${currentPage}=='add-password' ? 'active' : ''" th:text="#{home.addPassword.title}"></a>
+                            <a class="dropdown-item" href="#" th:href="@{remove-password}" th:classappend="${currentPage}=='remove-password' ? 'active' : ''" th:text="#{home.removePassword.title}"></a>
+                            <a class="dropdown-item" href="#" th:href="@{change-permissions}" th:classappend="${currentPage}=='change-permissions' ? 'active' : ''" th:text="#{home.permissions.title}"></a>
+                            <a class="dropdown-item" href="#" th:href="@{add-watermark}" th:classappend="${currentPage}=='add-watermark' ? 'active' : ''"  th:text="#{home.watermark.title}"></a>
+                            <a class="dropdown-item" href="#" th:href="@{change-metadata}" th:classappend="${currentPage}=='change-metadata' ? 'active' : ''"  th:text="#{home.changeMetadata.title}"></a>
+                        </div>
+                    </li>
+                   
+                   
+                    <li class="nav-item dropdown" th:classappend="${currentPage}=='remove-pages' OR ${currentPage}=='add-image' OR ${currentPage}=='compress-pdf' ? 'active' : ''"><a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown"
+                        aria-haspopup="true" aria-expanded="false" th:text="#{navbar.other}"></a>
+                        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
+                            <a class="dropdown-item" href="#" th:href="@{add-image}" th:classappend="${currentPage}=='add-image' ? 'active' : ''" th:text="#{home.addImage.title}"></a> <a class="dropdown-item" href="#" th:href="@{compress-pdf}"
+                                th:classappend="${currentPage}=='compress-pdf' ? 'active' : ''" th:text="#{home.compressPdfs.title}"></a> <a class="dropdown-item" href="#" th:href="@{remove-pages}" th:classappend="${currentPage}=='remove-pages' ? 'active' : ''" th:text="#{home.removePages.title}"></a>
+                        </div></li>
+
+
+
+                    <div class="toggle-container">
+                        <label class="toggle"> <input type="checkbox" id="toggle-dark-mode" checked="true" th:onclick="javascript:toggleDarkMode()"> <span class="slider round"></span>
+                        </label> <label class="toggle-label" for="toggle-dark-mode" th:text="#{navbar.darkmode}"></label>
+                    </div>
+
+
+
+
+
+
+
+
+
+
+
+
+                    <li class="nav-item dropdown"><a class="nav-link dropdown-toggle" href="#" id="languageDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <i class="bi bi-globe2"></i>
+                    </a>
+                        <div class="dropdown-menu" aria-labelledby="languageDropdown">
+                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_US">English (US)</a> <a class="dropdown-item lang_dropdown-item" href="" data-language-code="en_GB">English (UK)</a> <a class="dropdown-item lang_dropdown-item" href="" data-language-code="ar_AR">العربية</a>
+                            <a class="dropdown-item lang_dropdown-item" href="" data-language-code="de_DE">Deutsch</a> <a class="dropdown-item lang_dropdown-item" href="" data-language-code="fr_FR">Français</a>
+                        </div></li>
+
+                </ul>
+
+                <ul class="navbar-nav ml-auto">
+                    <li class="nav-item">
+                        <button type="button" class="btn btn-outline-primary" id="update-btn">Update available</button>
+                    </li>
+                </ul>
+            </div>
+
+        </div>
+    </nav>
     <div th:insert="~{fragments/errorBanner.html :: errorBanner}"></div>
+
+    <div class="modal fade" id="settingsModal" tabindex="-1" role="dialog" aria-labelledby="settingsModalLabel" aria-hidden="true">
+        <div class="modal-dialog modal-dialog-centered" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                    <h5 class="modal-title" id="settingsModalLabel">Settings</h5>
+                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                        <span aria-hidden="true">&times;</span>
+                    </button>
+                </div>
+                <div class="modal-body">
+                    <p th:text="'App Version:' + ${appVersion}"></p>
+                    <div class="form-group">
+                        <label for="downloadOption">Choose download option (For non ZIP downloads):</label> <select class="form-control" id="downloadOption">
+                            <option value="sameWindow">Open in same window (Single file downloads only)</option>
+                            <option value="newWindow">Open in new window</option>
+                            <option value="downloadFile">Download file</option>
+                        </select>
+                    </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Settings Button -->
+    <button type="button" class="btn btn-secondary float-right" data-toggle="modal" data-target="#settingsModal">
+        <span class="glyphicon glyphicon-cog"></span> Settings/About
+    </button>
+    <script>
+					// Get the download option from local storage, or set it to 'sameWindow' if it doesn't exist
+					var downloadOption = localStorage.getItem('downloadOption')
+							|| 'sameWindow';
+
+					// Set the selected option in the dropdown
+					document.getElementById('downloadOption').value = downloadOption;
+
+					// Save the selected option to local storage when the dropdown value changes
+					document.getElementById('downloadOption').addEventListener(
+							'change',
+							function() {
+								downloadOption = this.value;
+								localStorage.setItem('downloadOption',
+										downloadOption);
+							});
+				</script>
+
+
+
 </div>
diff --git a/src/main/resources/templates/merge-pdfs.html b/src/main/resources/templates/merge-pdfs.html
index 87fbc241b..246494f32 100644
--- a/src/main/resources/templates/merge-pdfs.html
+++ b/src/main/resources/templates/merge-pdfs.html
@@ -28,94 +28,103 @@
                                 <button type="submit" class="btn btn-primary" th:text="#{merge.submit}"></button>
                             </div>
                         </form>
+                        <style>
+                        
+              .list-group-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
+.filename {
+  flex-grow: 1;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 10px;
+}
+
+.arrows {
+  flex-shrink: 0;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.move-up span,
+.move-down span {
+  font-weight: bold;
+  font-size: 1.2em;
+}
+
+
+
+
+                        </style>
                         <script>
-						document
-								.getElementById(
-										"fileInput")
-								.addEventListener(
-										"change",
-										function() {
-											var files = this.files;
-											var list = document
-													.getElementById("selectedFiles");
-											list.innerHTML = "";
-											for (var i = 0; i < files.length; i++) {
-												var item = document
-														.createElement("li");
-												item.className = "list-group-item d-flex justify-content-between align-items-center";
-												item.textContent = files[i].name;
-												item.innerHTML += '<div><button class="btn btn-secondary move-up"><i class="fas fa-arrow-up"></i></button> <button class="btn btn-secondary move-down"><i class="fas fa-arrow-down"></i></button></div>';
-												list
-														.appendChild(item);
-											}
-											var moveUpButtons = document
-													.querySelectorAll(".move-up");
-											for (var i = 0; i < moveUpButtons.length; i++) {
-												moveUpButtons[i]
-														.addEventListener(
-																"click",
-																function(
-																		event) {
-																	event
-																			.preventDefault();
-																	var parent = this.parentNode.parentNode;
-																	var grandParent = parent.parentNode;
-																	if (parent.previousElementSibling) {
-																		grandParent
-																				.insertBefore(
-																						parent,
-																						parent.previousElementSibling);
-																		updateFiles();
-																	}
-																});
-											}
-											var moveDownButtons = document
-													.querySelectorAll(".move-down");
-											for (var i = 0; i < moveDownButtons.length; i++) {
-												moveDownButtons[i]
-														.addEventListener(
-																"click",
-																function(
-																		event) {
-																	event
-																			.preventDefault();
-																	var parent = this.parentNode.parentNode;
-																	var grandParent = parent.parentNode;
-																	if (parent.nextElementSibling) {
-																		grandParent
-																				.insertBefore(
-																						parent.nextElementSibling,
-																						parent);
-																		updateFiles();
-																	}
-																});
-											}
+                        document.getElementById("fileInput").addEventListener("change", function() {
+                        	  var files = this.files;
+                        	  var list = document.getElementById("selectedFiles");
+                        	  list.innerHTML = "";
+                        	  for (var i = 0; i < files.length; i++) {
+                        	    var item = document.createElement("li");
+                        	    item.className = "list-group-item";
+                        	    item.innerHTML = `
+                        	      <div class="d-flex justify-content-between align-items-center w-100">
+                        	        <div class="filename">${files[i].name}</div>
+                        	        <div class="arrows d-flex">
+                        	          <button class="btn btn-secondary move-up"><span>&uarr;</span></button>
+                        	          <button class="btn btn-secondary move-down"><span>&darr;</span></button>
+                        	        </div>
+                        	      </div>
+                        	    `;
+                        	    list.appendChild(item);
+                        	  }
 
-											function updateFiles() {
-												var dataTransfer = new DataTransfer();
-												var liElements = document
-														.querySelectorAll("#selectedFiles li");
+                        	  var moveUpButtons = document.querySelectorAll(".move-up");
+                        	  for (var i = 0; i < moveUpButtons.length; i++) {
+                        	    moveUpButtons[i].addEventListener("click", function(event) {
+                        	      event.preventDefault();
+                        	      var parent = this.closest(".list-group-item");
+                        	      var grandParent = parent.parentNode;
+                        	      if (parent.previousElementSibling) {
+                        	        grandParent.insertBefore(parent, parent.previousElementSibling);
+                        	        updateFiles();
+                        	      }
+                        	    });
+                        	  }
+
+                        	  var moveDownButtons = document.querySelectorAll(".move-down");
+                        	  for (var i = 0; i < moveDownButtons.length; i++) {
+                        	    moveDownButtons[i].addEventListener("click", function(event) {
+                        	      event.preventDefault();
+                        	      var parent = this.closest(".list-group-item");
+                        	      var grandParent = parent.parentNode;
+                        	      if (parent.nextElementSibling) {
+                        	        grandParent.insertBefore(parent.nextElementSibling, parent);
+                        	        updateFiles();
+                        	      }
+                        	    });
+                        	  }
+
+                        	  function updateFiles() {
+                        	    var dataTransfer = new DataTransfer();
+                        	    var liElements = document.querySelectorAll("#selectedFiles li");
+
+                        	    for (var i = 0; i < liElements.length; i++) {
+                        	      var fileNameFromList = liElements[i].querySelector(".filename").innerText;
+                        	      var fileFromFiles;
+                        	      for (var j = 0; j < files.length; j++) {
+                        	        var file = files[j];
+                        	        if (file.name === fileNameFromList) {
+                        	          dataTransfer.items.add(file);
+                        	          break;
+                        	        }
+                        	      }
+                        	    }
+                        	    document.getElementById("fileInput").files = dataTransfer.files;
+                        	  }
+                        	});
 
-												for (var i = 0; i < liElements.length; i++) {
-													var fileNameFromList = liElements[i].innerText
-															.replace(
-																	"\nMove Up Move Down",
-																	"");
-													var fileFromFiles
-													for (var j = 0; j < files.length; j++) {
-														var file = files[j];
-														if (file.name === fileNameFromList) {
-															dataTransfer.items
-																	.add(file);
-															break;
-														}
-													}
-												}
-												document
-														.getElementById("fileInput").files = dataTransfer.files;
-											}
-										});
 					</script>
                     </div>
                 </div>