[add] progress streaming

templates/components/download-progress.html

@@ -0,0 +1,40 @@
+<div
+  class="absolute -translate-y-1/2 p-4 m-auto bg-gray-700 dark:bg-gray-300 rounded-lg shadow w-full text-black dark:text-white"
+>
+  <span
+    class="inline-flex gap-2 items-center font-medium text-xs inline-block py-1 px-2 uppercase rounded-full {{ if .Error }} bg-red-500 {{ else }} bg-green-600 {{ end }}"
+  >
+    {{ if and (ne .Progress 100) (not .Error) }}
+      {{ template "svg/loading" (dict "Size" 16) }} 
+    {{ end }}
+
+    {{ .Message }}
+  </span>
+  <div class="flex flex-col gap-2 mt-2">
+    <div class="relative w-full h-4 bg-gray-300 dark:bg-gray-700 rounded-full">
+
+      {{ if .Error }}
+	<div
+	  class="absolute h-full bg-red-500 rounded-full"
+	  style="width: 100%"
+	></div>
+	<p class="absolute w-full h-full font-bold text-center text-xs">ERROR</p>
+      {{ else }}
+	<div
+	  class="absolute h-full bg-green-600 rounded-full"
+	  style="width: {{ .Progress }}%"
+	></div>
+	<p class="absolute w-full h-full font-bold text-center text-xs">
+	  {{ .Progress }}%
+	</p>
+      {{ end }}
+
+    </div>
+
+    <a
+      href="{{ .ButtonHref }}"
+      class="w-full text-center font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
+      >{{ .ButtonText }}</a
+    >
+  </div>
+</div>

templates/pages/documents.html

@@ -40,7 +40,7 @@
 <div class="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
   {{range $doc := .Data }}
   <div class="w-full relative">
-    <div class="flex gap-4 w-full h-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
+    <div class="flex gap-4 w-full h-full p-4 shadow-lg bg-white dark:bg-gray-700 rounded">
       <div class="min-w-fit my-auto h-48 relative">
 	<a href="./documents/{{$doc.ID}}">
 	  <img class="rounded object-cover h-full" src="./documents/{{$doc.ID}}/cover"></img>

templates/svgs/loading.svg

@@ -0,0 +1,45 @@
+<svg
+  width="{{ or .Size 24 }}"
+  height="{{ or .Size 24 }}"
+
+  viewBox="0 0 24 24"
+  fill="currentColor"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <style>
+    .spinner_l9ve {
+      animation: spinner_rcyq 1.2s cubic-bezier(0.52, 0.6, 0.25, 0.99) infinite;
+    }
+    .spinner_cMYp {
+      animation-delay: 0.4s;
+    }
+    .spinner_gHR3 {
+      animation-delay: 0.8s;
+    }
+    @keyframes spinner_rcyq {
+      0% {
+        transform: translate(12px, 12px) scale(0);
+        opacity: 1;
+      }
+      100% {
+        transform: translate(0, 0) scale(1);
+        opacity: 0;
+      }
+    }
+  </style>
+  <path
+    class="spinner_l9ve"
+    d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
+    transform="translate(12, 12) scale(0)"
+  />
+  <path
+    class="spinner_l9ve spinner_cMYp"
+    d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
+    transform="translate(12, 12) scale(0)"
+  />
+  <path
+    class="spinner_l9ve spinner_gHR3"
+    d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,20a9,9,0,1,1,9-9A9,9,0,0,1,12,21Z"
+    transform="translate(12, 12) scale(0)"
+  />
+</svg>