frontend: implement dynamic file list

frontend/src/lib/components/add_button.svelte

@@ -1,14 +1,24 @@
 <script lang="ts">
     let { handler = () => {}, type = "button", files = $bindable() } = $props();
+    
+    let file_list: FileList = $state([]);
+    $effect(() => {
+        // FileList -> Array[File]
+        let f_list: Array<File> = [];
+        for (let file of file_list)
+            f_list.push(file);
+        files = f_list;
+    });
 </script>
 
 {#if type == "button"}
     <button class="plus round" style="height: 32px;" onclick={handler}>+</button>
 {:else if type == "image"}
     <label for="img-upload" class="plus round" style="height: 48px; display: inline-block;">+</label>
-    <input id="img-upload" accept="image/png, image/jpeg" style="display: none" bind:files type="file"/>
+    <input id="img-upload" accept="image/png, image/jpeg" style="display: none" bind:files={file_list} type="file"/>
 {:else}
-    <button class="file-plus rounded" onclick={handler}>Загрузить файл</button>
+    <label for="file-upload" class="file-plus rounded">Загрузить файл</label>
+    <input id="file-upload" style="display: none" bind:files={file_list} multiple type="file"/>
 {/if}
 
 <style>
@@ -23,15 +33,14 @@
     }
 
     .file-plus {
-        font-family: Arial, Helvetica, sans-serif;
+        font-size: larger;
-        font-size: x-large;
         cursor: pointer;
         text-align: center;
         align-content: center;
         width: 100%;
-        margin: 0;
         height: 3rem;
         border: 0.15rem dashed;
+        display: block;
     }
 
     @media (prefers-color-scheme: light) {

frontend/src/lib/components/containers/files.svelte

@@ -1,9 +1,23 @@
-<script>
+<script lang="ts">
     import File from '$lib/components/file.svelte';
     import AddButton from '$lib/components/add_button.svelte';
+    let selected = $state([]);
+    let files: Array<File> = $state([]);
+
+    $effect(() => {
+        if (selected.length > 0) {
+            let added: Array<File> = [];
+            for (let file of selected)
+                added.push(file);
+            files = files.concat(added);
+            selected = [];
+        }
+    });
 </script>
 
 <div class="input rounded">
-    <File />
+    {#each files as file}
-    <AddButton type="file"/>
+        <File data={file}/>
+    {/each}
+    <AddButton type="file" bind:files={selected}/>
 </div>

frontend/src/lib/components/containers/images.svelte

@@ -15,7 +15,6 @@
         display: flex;
         overflow-x: scroll;
         align-content: center;
-        padding: 0.5rem;
     }
 
     .img-conatiner :global(*) {

frontend/src/lib/components/containers/queue.svelte

@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import QueueItem from '$lib/components/queue_item.svelte';
 </script>
 

frontend/src/lib/components/file.svelte

@@ -1,11 +1,27 @@
-<script>
+<script lang="ts">
-    let filename = "Some_very_long_archive_name.zip";
+    let { data } = $props();
-    let progress = "15GB/23GB";
+
+    const names = {
+        0: ["B", 0],
+        1: ["KB", 0],
+        2: ["MB", 1],
+        3: ["GB", 2],
+        4: ["TB", 3]
+    };
+
+    function size_str(size: number) {
+        let iter = 0;
+        while (size >= 1000) {
+            iter++;
+            size = size / 1000;
+        }
+        return size.toFixed(names[iter][1]).toString() + names[iter][0];
+    }
 </script>
 
 <div class="file rounded">
-    <p class="filename">{filename}</p>
+    <p class="filename">{data.name}</p>
-    <p class="progress">{progress}</p>
+    <p class="progress">{size_str(data.size)}</p>
 </div>
 
 <style>

frontend/src/lib/css/global.css

@@ -63,19 +63,22 @@ button {
     margin-bottom: 1rem;
 }
 
+.fields p {
+    margin: 0;
+    margin-bottom: 1rem;
+    margin-left: 0.25rem;
+}
+
 .horisontal-bar {
     display: flex;
     align-content: center;
-    padding-left: 0.5rem;
+    padding-left: 0.25rem;
-    padding-right: 0.5rem;
+    padding-right: 0.25rem;
-}
-
-.horisontal-bar * {
-    margin: 0;
-    margin-right: 0.5rem;
 }
 
 .horisontal-bar p {
+    margin: 0;
+    margin-right: 0.5rem;
     align-content: center;
     margin-bottom: 1rem;
 }