frontend: implement dynamic file list

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>

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>