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

src/routes/(fullscreen)/file/[id]/+page.svelte

@@ -87,7 +87,7 @@
 
 <div class="flex h-full flex-col">
   <TopBar title={$info?.name} />
-  <DownloadStatus info={downloadStatus} />
+  <DownloadStatus status={downloadStatus} />
   <div class="flex w-full flex-grow flex-col items-center pb-4">
     {#snippet viewerLoading(message: string)}
       <div class="flex flex-grow items-center justify-center">

src/routes/(fullscreen)/file/[id]/DownloadStatus.svelte

@@ -1,31 +1,32 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
+  import { formatNetworkSpeed } from "$lib/modules/util";
   import type { FileDownloadStatus } from "$lib/stores";
-  import { formatDownloadProgress, formatDownloadRate } from "./service";
 
   interface Props {
-    info?: Writable<FileDownloadStatus>;
+    status?: Writable<FileDownloadStatus>;
   }
 
-  let { info }: Props = $props();
+  let { status }: Props = $props();
 </script>
 
-{#if $info && $info.status !== "decrypted" && $info.status !== "canceled" && $info.status !== "error"}
+{#if $status && $status.status !== "decrypted" && $status.status !== "canceled" && $status.status !== "error"}
   <div class="flex w-full flex-col rounded-xl bg-gray-100 p-3">
     <p class="font-medium">
-      {#if $info.status === "download-pending"}
+      {#if $status.status === "download-pending"}
         다운로드를 기다리는 중
-      {:else if $info.status === "downloading"}
+      {:else if $status.status === "downloading"}
         다운로드하는 중
-      {:else if $info.status === "decryption-pending"}
+      {:else if $status.status === "decryption-pending"}
         복호화를 기다리는 중
-      {:else if $info.status === "decrypting"}
+      {:else if $status.status === "decrypting"}
         복호화하는 중
       {/if}
     </p>
     <p class="text-xs">
-      {#if $info.status === "downloading"}
-        전송됨 {formatDownloadProgress($info.progress)} · {formatDownloadRate($info.rate)}
+      {#if $status.status === "downloading"}
+        전송됨
+        {Math.floor(($status.progress ?? 0) * 100)}% · {formatNetworkSpeed($status.rate ?? 0)}
       {/if}
     </p>
   </div>

src/routes/(fullscreen)/file/[id]/service.ts

@@ -1,5 +1,4 @@
 import { getFileCache, storeFileCache, downloadFile } from "$lib/modules/file";
-import { formatFileSize } from "$lib/modules/util";
 
 export const requestFileDownload = async (
   fileId: number,
@@ -13,11 +12,3 @@ export const requestFileDownload = async (
   storeFileCache(fileId, fileBuffer); // Intended
   return fileBuffer;
 };
-
-export const formatDownloadProgress = (progress?: number) => {
-  return `${Math.floor((progress ?? 0) * 100)}%`;
-};
-
-export const formatDownloadRate = (rate?: number) => {
-  return `${formatFileSize((rate ?? 0) / 8)}/s`;
-};

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

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

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

@@ -0,0 +1,66 @@
+<script lang="ts">
+  import { get, type Writable } from "svelte/store";
+  import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { formatNetworkSpeed } from "$lib/modules/util";
+  import { masterKeyStore, type FileDownloadStatus } from "$lib/stores";
+
+  import IconCloud from "~icons/material-symbols/cloud";
+  import IconCloudDownload from "~icons/material-symbols/cloud-download";
+  import IconLock from "~icons/material-symbols/lock";
+  import IconLockClock from "~icons/material-symbols/lock-clock";
+  import IconCheckCircle from "~icons/material-symbols/check-circle";
+  import IconError from "~icons/material-symbols/error";
+
+  interface Props {
+    status: Writable<FileDownloadStatus>;
+  }
+
+  let { status }: Props = $props();
+
+  let fileInfo: Writable<FileInfo | null> | undefined = $state();
+
+  $effect(() => {
+    fileInfo = getFileInfo(get(status).id, $masterKeyStore?.get(1)?.key!);
+  });
+</script>
+
+{#if $fileInfo}
+  <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 === "download-pending"}
+        <IconCloud />
+      {:else if $status.status === "downloading"}
+        <IconCloudDownload />
+      {:else if $status.status === "decryption-pending"}
+        <IconLock />
+      {:else if $status.status === "decrypting"}
+        <IconLockClock />
+      {:else if $status.status === "decrypted"}
+        <IconCheckCircle class="text-green-500" />
+      {:else if $status.status === "error"}
+        <IconError class="text-red-500" />
+      {/if}
+    </div>
+    <div class="flex flex-grow flex-col overflow-hidden">
+      <p title={$fileInfo.name} class="truncate font-medium text-gray-800">
+        {$fileInfo.name}
+      </p>
+      <p class="text-xs text-gray-800">
+        {#if $status.status === "download-pending"}
+          다운로드를 기다리는 중
+        {:else if $status.status === "downloading"}
+          전송됨
+          {Math.floor(($status.progress ?? 0) * 100)}% · {formatNetworkSpeed($status.rate ?? 0)}
+        {:else if $status.status === "decryption-pending"}
+          복호화를 기다리는 중
+        {:else if $status.status === "decrypting"}
+          복호화하는 중
+        {:else if $status.status === "decrypted"}
+          다운로드 완료
+        {:else if $status.status === "error"}
+          다운로드 실패
+        {/if}
+      </p>
+    </div>
+  </div>
+{/if}

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>

src/routes/(fullscreen)/settings/cache/+page.svelte

@@ -5,9 +5,10 @@
   import type { FileCacheIndex } from "$lib/indexedDB";
   import { getFileCacheIndex } from "$lib/modules/file";
   import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
+  import { formatFileSize } from "$lib/modules/util";
   import { masterKeyStore } from "$lib/stores";
   import File from "./File.svelte";
-  import { formatFileSize, deleteFileCache as doDeleteFileCache } from "./service";
+  import { deleteFileCache as doDeleteFileCache } from "./service";
 
   interface FileCache {
     index: FileCacheIndex;

src/routes/(fullscreen)/settings/cache/File.svelte

@@ -2,7 +2,7 @@
   import type { Writable } from "svelte/store";
   import type { FileCacheIndex } from "$lib/indexedDB";
   import type { FileInfo } from "$lib/modules/filesystem";
-  import { formatDate, formatFileSize } from "./service";
+  import { formatDate, formatFileSize } from "$lib/modules/util";
 
   import IconDraft from "~icons/material-symbols/draft";
   import IconScanDelete from "~icons/material-symbols/scan-delete";

src/routes/(fullscreen)/settings/cache/service.ts

@@ -1,7 +1,5 @@
 import { deleteFileCache as doDeleteFileCache } from "$lib/modules/file";
 
-export { formatDate, formatFileSize } from "$lib/modules/util";
-
 export const deleteFileCache = async (fileId: number) => {
   await doDeleteFileCache(fileId);
 };