Show icon button for expanding instead of clickable file number, add hover effect

Author: Forceu

internal/webserver/web/static/css/cover.css

@@ -359,7 +359,6 @@ a:hover {
   background-color: rgba(255, 255, 255, 0.04);
 }
 
-/* Optional hover polish */
 .filelist-item:hover {
   background-color: rgba(255, 255, 255, 0.08);
 }
@@ -369,4 +368,25 @@ tr.no-bottom-border td {
   border-bottom: none
 }
 
+.filerequest-item:hover > td {
+  background-color: rgba(255, 255, 255, 0.08);
+}
+.filerequest-item > td {
+  transition: background-color 0.15s ease-in-out;
+}
+
+.collapse-toggle i {
+  display: inline-block; 
+  transition: transform 0.2s ease;
+}
 
+.collapse-toggle[aria-expanded="true"] i {
+  transform: rotate(180deg);
+}
+
+.collapse-toggle:hover {
+  opacity: 0.8;
+}
+.collapse-toggle {
+  padding: 0.25rem;
+}

internal/webserver/web/static/css/min/gokapi.min.5.css

@@ -228,6 +228,7 @@ function createFileRequestRow(jsonResult, user) {
 
     const tr = document.createElement("tr");
     tr.id = `row-${jsonResult.id}`;
+    tr.className = "filerequest-item";
 
     // Name
     tr.appendChild(tdLink(jsonResult.name, publicUrl));

internal/webserver/web/static/js/admin_ui_filerequest.js

@@ -37,7 +37,7 @@
                         <tbody id="filerequesttable">
 
 {{ range .FileRequests }}
-                            <tr id="row-{{ .Id }}" class="no-bottom-border">
+                            <tr id="row-{{ .Id }}" class="no-bottom-border filerequest-item">
 		                    <td><a href="{{ $.ServerUrl }}publicUpload?id={{ .Id }}&key={{ .ApiKey }}" target="_blank">{{ .Name }}</a></td>
 				    {{ template "uRFileCell" . }}
 		                    <td>{{ .GetReadableTotalSize }}</td>
@@ -218,13 +218,17 @@
 
 {{ define "uRFileCell" }}
 	<td>
-	{{ if gt .UploadedFiles 0 }}<a
-		href="#"
-		data-bs-toggle="collapse"
-			  data-bs-target="#collapse-filelist-{{ .Id }}"
-			  aria-expanded="false"
-			  aria-controls="collapse-filelist-{{ .Id }}">{{end}}
 	{{ .UploadedFiles }}{{ if ne .MaxFiles 0 }}	/ {{ .MaxFiles }}{{end}}
-	{{ if gt .UploadedFiles 0 }}</a>{{end}}
+	{{ if gt .UploadedFiles 0 }}
+	 <button
+		  class="btn btn-sm btn-link text-light p-0 collapse-toggle"
+		  data-bs-toggle="collapse"
+		  data-bs-target="#collapse-filelist-{{ .Id }}"
+		  aria-expanded="false"
+		  aria-controls="collapse-filelist-{{ .Id }}"
+		>
+		  <i class="bi bi-chevron-down"></i>
+		</button>
+	{{end}}
 	</td> 
 {{ end }}