파일 업로드/다운로드 현황을 모두 볼 수 있는 페이지 구현

src/routes/(fullscreen)/file/uploads/+page.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { get } from "svelte/store";
+  import { TopBar } from "$lib/components";
+  import { fileUploadStatusStore, isFileUploading } from "$lib/stores";
+  import File from "./File.svelte";
+
+  const uploadingFiles = $derived(
+    $fileUploadStatusStore.filter((status) => isFileUploading(get(status).status)),
+  );
+
+  $effect(() => () => {
+    $fileUploadStatusStore = $fileUploadStatusStore.filter((status) =>
+      isFileUploading(get(status).status),
+    );
+  });
+</script>
+
+<svelte:head>
+  <title>진행 중인 업로드</title>
+</svelte:head>
+
+<div class="flex h-full flex-col">
+  <TopBar />
+  <div class="space-y-2">
+    {#each uploadingFiles as status}
+      <File {status} />
+    {/each}
+  </div>
+</div>

src/routes/(fullscreen)/file/uploads/File.svelte

@@ -0,0 +1,57 @@
+<script lang="ts">
+  import type { Writable } from "svelte/store";
+  import { formatNetworkSpeed } from "$lib/modules/util";
+  import type { FileUploadStatus } from "$lib/stores";
+
+  import IconPending from "~icons/material-symbols/pending";
+  import IconLockClock from "~icons/material-symbols/lock-clock";
+  import IconCloud from "~icons/material-symbols/cloud";
+  import IconCloudUpload from "~icons/material-symbols/cloud-upload";
+  import IconCloudDone from "~icons/material-symbols/cloud-done";
+  import IconError from "~icons/material-symbols/error";
+
+  interface Props {
+    status: Writable<FileUploadStatus>;
+  }
+
+  let { status }: Props = $props();
+</script>
+
+<div class="flex h-14 items-center gap-x-4 p-2">
+  <div class="flex-shrink-0 text-lg text-gray-600">
+    {#if $status.status === "encryption-pending"}
+      <IconPending />
+    {:else if $status.status === "encrypting"}
+      <IconLockClock />
+    {:else if $status.status === "upload-pending"}
+      <IconCloud />
+    {:else if $status.status === "uploading"}
+      <IconCloudUpload />
+    {:else if $status.status === "uploaded"}
+      <IconCloudDone class="text-blue-500" />
+    {:else if $status.status === "error"}
+      <IconError class="text-red-500" />
+    {/if}
+  </div>
+  <div class="flex flex-grow flex-col overflow-hidden">
+    <p title={$status.name} class="truncate font-medium text-gray-800">
+      {$status.name}
+    </p>
+    <p class="text-xs text-gray-800">
+      {#if $status.status === "encryption-pending"}
+        준비 중
+      {:else if $status.status === "encrypting"}
+        암호화하는 중
+      {:else if $status.status === "upload-pending"}
+        업로드를 기다리는 중
+      {:else if $status.status === "uploading"}
+        전송됨
+        {Math.floor(($status.progress ?? 0) * 100)}% · {formatNetworkSpeed($status.rate ?? 0)}
+      {:else if $status.status === "uploaded"}
+        업로드 완료
+      {:else if $status.status === "error"}
+        업로드 실패
+      {/if}
+    </p>
+  </div>
+</div>