frontend: initial file component

frontend/src/lib/components/add_button.svelte

@@ -8,7 +8,7 @@
     <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"/>
 {:else}
-    TODO
+    <button class="file-plus rounded" onclick={handler}>Загрузить файл</button>
 {/if}
 
 <style>
@@ -22,12 +22,30 @@
         align-content: center;
     }
 
+    .file-plus {
+        font-family: Arial, Helvetica, sans-serif;
+        font-size: x-large;
+        cursor: pointer;
+        text-align: center;
+        align-content: center;
+        width: 100%;
+        margin: 0;
+        height: 3rem;
+        border: 0.15rem dashed;
+    }
+
     @media (prefers-color-scheme: light) {
         .plus {
             background-color: #5C8DC0;
             color: white;
         }
 
+        .file-plus {
+            background: none;
+            border-color: #5C8DC0;
+            color: #5C8DC0;
+        }
+
         .plus:hover {
             background-color: #567aa1;
         }
@@ -39,6 +57,12 @@
             color: white;
         }
 
+        .file-plus {
+            background: none;
+            border-color: #2791FF;
+            color: #2791FF;
+        }
+
         .plus:hover {
             background-color: #2c7dd4;
         }

frontend/src/lib/components/file.svelte

@@ -0,0 +1,51 @@
+<script>
+    let filename = "Some_very_long_archive_name.zip";
+    let progress = "15GB/23GB";
+</script>
+
+<div class="file rounded">
+    <p class="filename">{filename}</p>
+    <p class="progress">{progress}</p>
+</div>
+
+<style>
+    .file {
+        width: 100%;
+        margin: 0;
+        height: 3rem;
+        display: grid;
+        margin-bottom: 0.5rem;
+    }
+
+    .file p {
+        margin: 0;
+    }
+
+    @media (prefers-color-scheme: light) {
+        .file {
+            background: #5C8DC0;
+        }
+
+        .filename {
+            color: white;
+        }
+
+        .progress {
+            color: #D4D4D4;
+        }
+    }
+
+    @media (prefers-color-scheme: dark) {
+        .file {
+            background: #2791FF;
+        }
+
+        .filename {
+            color: white;
+        }
+
+        .progress {
+            color: #D4D4D4;
+        }
+    }
+</style>

frontend/src/routes/+layout.svelte

@@ -5,6 +5,8 @@
 	import CreateButton from '$lib/components/create_button.svelte';
     import Calendar from '$lib/components/calendar.svelte';
     import QueueItem from '$lib/components/queue_item.svelte';
+    import AddButton from '$lib/components/add_button.svelte';
+	import File from '$lib/components/file.svelte';
 
 	let { children } = $props();
 
@@ -68,9 +70,16 @@
 	<p>Дата публикации</p>
 	<Calendar />
 
+	<!-- Файлы -->
+	<p>Файлы</p>
+	<div class="input rounded">
+		<File />
+		<AddButton type="file"/>
+	</div>
+
 	<!-- Очередь публикации -->
 	<p>Очередь публикации</p>
-	<div class="input rounded" id="queue">
+	<div class="input rounded">
 		<QueueItem date="28.11.24" name="Fate/Stay Night (Судьба/Ночь схватки)"/>
 		<QueueItem date="30.11.24" name="Fate/Hollow Ataraxia (Судьба/Святая атараксия)"/>
 	</div>