Created FileList with ability to set used files

HaWeb/wwwroot/css/site.css

@@ -84,6 +84,7 @@
     @apply transition-colors duration-100
   }
   /* TODO: check what can be inlined (eg. used once in the code, has no double paths etc...) */
+  /* TODO: Copy color classes for all thing upload to colors on top */
 
   /* Everything related to theme color */
   body {
@@ -678,7 +679,7 @@
   }
 
   .ha-adminuploadfields .ha-uploadfield.active {
-    @apply !text-black shadow-red-100
+    @apply !text-black brightness-110
   }
 
   .ha-adminuploadfields .ha-uploadfield .ha-uploadfieldname {
@@ -745,30 +746,30 @@
     @apply text-5xl
   }
 
-  .ha-uploadheader .ha-usedfilesheader {
-    @apply flex
-  }
-
-  .ha-uploadheader .ha-usedfilesheaderlist {
-    @apply flex flex-row flex-wrap ml-6 gap-x-2 gap-y-1 self-end content-end mb-1
-  }
-
-  .ha-uploadheader .ha-usedfilesheaderlist .ha-usedfilesheaderfile {
-    @apply text-sm px-2 bg-slate-700 bg-opacity-30 rounded
-  }
-
-  .ha-uploadheader .ha-usedfilesheaderlist .ha-availablefilechooser {
-    @apply text-sm pr-1 bg-slate-700 bg-opacity-50 rounded
-  }
-
-  .ha-uploadheader .ha-usedfilesheaderlist .ha-availablefilechooser .ha-loadotherfilesbtn {
-    @apply inline-block
-  }
-
   .ha-uploadcontainer {
     @apply w-full bg-slate-50 flex flex-col gap-y-2 h-full
   }
 
+  .ha-uploadcontainer .ha-availablefiles {
+    @apply px-16 border border-slate-200 hover:border-slate-800 py-2 cursor-pointer
+  }
+
+  .ha-uploadcontainer .ha-availablefiles .ha-availablefilestitle {
+    @apply text-2xl
+  }
+
+  .ha-uploadcontainer .ha-availablefiles .ha-usedfilelist {
+
+  }
+
+  .ha-filesheader {
+    @apply mb-8
+  }
+
+  .ha-availablefileslist {
+    @apply px-16 pt-4
+  }
+
   .ha-uploadcontainer .ha-errorswarnings {
     @apply flex flex-row gap-x-2
   }
@@ -790,6 +791,55 @@
     @apply w-full bg-cyan-200 grow shrink-0 h-full min-h-[400px]
   }
 
+  .ha-uploadcontainer .ha-hamannfilechooser {
+    @apply px-16 pb-16 
+  }
+
+  /* Classes for FileList Component */
+  .ha-filelistfieldset {
+    
+  }
+
+  .ha-filelistfieldset .ha-filelistlegend {
+    @apply mb-2 text-xl
+  }
+
+  .ha-selectfilesform {
+    
+  }
+
+  .ha-selectfilesform .ha-filelistfile {
+    @apply flex flex-row gap-x-4
+  }
+
+  .ha-selectfilesform .ha-filelistlist {
+    @apply h-96 overflow-x-hidden overflow-y-scroll pr-4
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistname {
+    @apply font-mono
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction {
+    @apply text-sm self-start
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistproduction {
+    @apply inline-block border rounded-md text-teal-600 border-teal-600 px-2 mr-2
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistused {
+    @apply inline-block border rounded-md text-indigo-600 border-indigo-600 px-2 
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistmodified {
+    @apply grow text-right
+  }
+
+  .ha-selectfilesform .ha-filelistbutton {
+    @apply mt-2 ml-6 rounded-md px-3 border-2 border-blue-700 hover:bg-blue-300 cursor-pointer float-right;
+  }
+
   /* Classes for Letter View */
 
   .ha-letterheader {