From 41a1fff53b5238634c6665c09d36459fc5c1ab20 Mon Sep 17 00:00:00 2001
From: Tilman <github@medallyon.me>
Date: Sat, 11 Oct 2025 00:45:43 +0200
Subject: [PATCH] Use sort SVGs

---
 components/files/ListFiles.tsx | 37 +++++++++++++++++++++++++++-------
 static/images/sort-none.svg    | 14 +++++++++++++
 static/images/sort-up.svg      | 10 +++++++++
 3 files changed, 54 insertions(+), 7 deletions(-)
 create mode 100644 static/images/sort-none.svg
 create mode 100644 static/images/sort-up.svg

diff --git a/components/files/ListFiles.tsx b/components/files/ListFiles.tsx
index e057e4f..7a960db 100644
--- a/components/files/ListFiles.tsx
+++ b/components/files/ListFiles.tsx
@@ -63,9 +63,33 @@ export default function ListFiles(
 
   const dateFormat = new Intl.DateTimeFormat('en-GB', dateFormatOptions);
 
-  function getSortIcon(column: SortColumn): string | null {
-    if (sortBy !== column) return '↕'; // neutral sort icon
-    return sortOrder === 'asc' ? '↑' : '↓';
+  function renderSortIcon(column: SortColumn): ComponentChildren {
+    const isActive = sortBy === column;
+
+    if (isActive) {
+      // Show active sort icon with rotation
+      const rotation = sortOrder === 'asc' ? '' : 'rotate-180';
+      return (
+        <img
+          src='/images/sort-up.svg'
+          class={`white drop-shadow-md w-4 h-4 ${rotation}`}
+          width={16}
+          height={16}
+          alt={`Sort ${sortOrder === 'asc' ? 'ascending' : 'descending'}`}
+        />
+      );
+    } else {
+      // Show neutral sort icon only on hover
+      return (
+        <img
+          src='/images/sort-none.svg'
+          class='white drop-shadow-md w-4 h-4 opacity-0 group-hover:opacity-100 transition-opacity'
+          width={16}
+          height={16}
+          alt='Sort'
+        />
+      );
+    }
   }
 
   function renderSortableHeader(
@@ -74,7 +98,6 @@ export default function ListFiles(
     className?: string,
   ): ComponentChildren {
     const isActive = sortBy === column;
-    const iconClass = isActive ? 'text-blue-400' : 'text-slate-400';
 
     if (!onClickSort) {
       return <th scope='col' class={`px-6 py-4 font-medium text-white ${className || ''}`}>{label}</th>;
@@ -83,15 +106,15 @@ export default function ListFiles(
     return (
       <th scope='col' class={`px-6 py-4 font-medium text-white ${className || ''}`}>
         <button
-          class={`flex items-center justify-between w-full text-left hover:text-blue-300 ${
+          class={`group flex items-center justify-between w-full text-left hover:text-blue-300 ${
             isActive ? 'text-blue-400' : ''
           }`}
           onClick={() => onClickSort(column)}
           type='button'
         >
           <span>{label}</span>
-          <span class={`ml-1 text-xs ${iconClass}`}>
-            {getSortIcon(column)}
+          <span class='ml-1'>
+            {renderSortIcon(column)}
           </span>
         </button>
       </th>
diff --git a/static/images/sort-none.svg b/static/images/sort-none.svg
new file mode 100644
index 0000000..fac4d4a
--- /dev/null
+++ b/static/images/sort-none.svg
@@ -0,0 +1,14 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class="size-6"
+>
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    d="M3 7.5 7.5 3m0 0L12 7.5M7.5 3v13.5m13.5 0L16.5 21m0 0L12 16.5m4.5 4.5V7.5"
+  />
+</svg>
diff --git a/static/images/sort-up.svg b/static/images/sort-up.svg
new file mode 100644
index 0000000..4acc6dc
--- /dev/null
+++ b/static/images/sort-up.svg
@@ -0,0 +1,10 @@
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  fill="none"
+  viewBox="0 0 24 24"
+  stroke-width="1.5"
+  stroke="currentColor"
+  class="size-6"
+>
+  <path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75 12 3m0 0 3.75 3.75M12 3v18" />
+</svg>