From 5535ffd048aa3f49c908fc67ac8391e09413e6e6 Mon Sep 17 00:00:00 2001
From: OleSTEEP <krinkinoleg@gmail.com>
Date: Tue, 14 Oct 2025 00:06:25 +0300
Subject: [PATCH] frontend: implement dynamic file list

---
 frontend/src/lib/components/add_button.svelte | 19 ++++++++++----
 .../lib/components/containers/files.svelte    | 20 +++++++++++---
 .../lib/components/containers/images.svelte   |  1 -
 .../lib/components/containers/queue.svelte    |  2 +-
 frontend/src/lib/components/file.svelte       | 26 +++++++++++++++----
 frontend/src/lib/css/global.css               | 17 +++++++-----
 6 files changed, 63 insertions(+), 22 deletions(-)

diff --git a/frontend/src/lib/components/add_button.svelte b/frontend/src/lib/components/add_button.svelte
index 60872f6..550f0f3 100644
--- a/frontend/src/lib/components/add_button.svelte
+++ b/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: x-large;
+        font-size: larger;
         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) {
diff --git a/frontend/src/lib/components/containers/files.svelte b/frontend/src/lib/components/containers/files.svelte
index 766edb1..98a8c03 100644
--- a/frontend/src/lib/components/containers/files.svelte
+++ b/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 />
-    <AddButton type="file"/>
+    {#each files as file}
+        <File data={file}/>
+    {/each}
+    <AddButton type="file" bind:files={selected}/>
 </div>
\ No newline at end of file
diff --git a/frontend/src/lib/components/containers/images.svelte b/frontend/src/lib/components/containers/images.svelte
index 1b75f2a..17b1ed1 100644
--- a/frontend/src/lib/components/containers/images.svelte
+++ b/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(*) {
diff --git a/frontend/src/lib/components/containers/queue.svelte b/frontend/src/lib/components/containers/queue.svelte
index c9e5caf..f5b7461 100644
--- a/frontend/src/lib/components/containers/queue.svelte
+++ b/frontend/src/lib/components/containers/queue.svelte
@@ -1,4 +1,4 @@
-<script>
+<script lang="ts">
     import QueueItem from '$lib/components/queue_item.svelte';
 </script>
 
diff --git a/frontend/src/lib/components/file.svelte b/frontend/src/lib/components/file.svelte
index ad4a847..ec0c931 100644
--- a/frontend/src/lib/components/file.svelte
+++ b/frontend/src/lib/components/file.svelte
@@ -1,11 +1,27 @@
-<script>
-    let filename = "Some_very_long_archive_name.zip";
-    let progress = "15GB/23GB";
+<script lang="ts">
+    let { data } = $props();
+
+    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="progress">{progress}</p>
+    <p class="filename">{data.name}</p>
+    <p class="progress">{size_str(data.size)}</p>
 </div>
 
 <style>
diff --git a/frontend/src/lib/css/global.css b/frontend/src/lib/css/global.css
index 672b61e..f5d1aec 100644
--- a/frontend/src/lib/css/global.css
+++ b/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-right: 0.5rem;
-}
-
-.horisontal-bar * {
-    margin: 0;
-    margin-right: 0.5rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
 }
 
 .horisontal-bar p {
+    margin: 0;
+    margin-right: 0.5rem;
     align-content: center;
     margin-bottom: 1rem;
 }