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

src/lib/modules/file/upload.ts

@@ -174,6 +174,10 @@ export const uploadFile = async (
         value.status = "canceled";
         return value;
       });
+      fileUploadStatusStore.update((value) => {
+        value = value.filter((v) => v !== status);
+        return value;
+      });
       return false;
     }
 

src/lib/modules/util.ts

@@ -20,3 +20,10 @@ export const formatFileSize = (size: number) => {
   if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MiB`;
   return `${(size / 1024 / 1024 / 1024).toFixed(1)} GiB`;
 };
+
+export const formatNetworkSpeed = (speed: number) => {
+  if (speed < 1000) return `${speed} bps`;
+  if (speed < 1000 * 1000) return `${(speed / 1000).toFixed(1)} kbps`;
+  if (speed < 1000 * 1000 * 1000) return `${(speed / 1000 / 1000).toFixed(1)} Mbps`;
+  return `${(speed / 1000 / 1000 / 1000).toFixed(1)} Gbps`;
+};

src/lib/stores/file.ts

@@ -1,4 +1,5 @@
 import { writable, type Writable } from "svelte/store";
+
 export interface FileUploadStatus {
   name: string;
   parentId: "root" | number;
@@ -34,3 +35,15 @@ export interface FileDownloadStatus {
 export const fileUploadStatusStore = writable<Writable<FileUploadStatus>[]>([]);
 
 export const fileDownloadStatusStore = writable<Writable<FileDownloadStatus>[]>([]);
+
+export const isFileUploading = (
+  status: FileUploadStatus["status"],
+): status is "encryption-pending" | "encrypting" | "upload-pending" | "uploading" => {
+  return ["encryption-pending", "encrypting", "upload-pending", "uploading"].includes(status);
+};
+
+export const isFileDownloading = (
+  status: FileDownloadStatus["status"],
+): status is "download-pending" | "downloading" | "decryption-pending" | "decrypting" => {
+  return ["download-pending", "downloading", "decryption-pending", "decrypting"].includes(status);
+};

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);
 };

src/routes/(main)/directory/[[id]]/+page.svelte

@@ -11,8 +11,10 @@
   import DeleteDirectoryEntryModal from "./DeleteDirectoryEntryModal.svelte";
   import DirectoryEntries from "./DirectoryEntries";
   import DirectoryEntryMenuBottomSheet from "./DirectoryEntryMenuBottomSheet.svelte";
+  import DownloadStatusCard from "./DownloadStatusCard.svelte";
   import DuplicateFileModal from "./DuplicateFileModal.svelte";
   import RenameDirectoryEntryModal from "./RenameDirectoryEntryModal.svelte";
+  import UploadStatusCard from "./UploadStatusCard.svelte";
   import {
     requestHmacSecretDownload,
     requestDirectoryCreation,
@@ -99,6 +101,10 @@
   {#if $info}
     {@const topMargin = data.id === "root" ? "mt-4" : ""}
     <div class="mb-4 flex flex-grow flex-col {topMargin}">
+      <div class="flex gap-x-2">
+        <UploadStatusCard onclick={() => goto("/file/uploads")} />
+        <DownloadStatusCard onclick={() => goto("/file/downloads")} />
+      </div>
       {#key $info}
         <DirectoryEntries
           info={$info}

src/routes/(main)/directory/[[id]]/DirectoryEntries/File.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
   import type { FileInfo } from "$lib/modules/filesystem";
-  import { formatDateTime } from "./service";
+  import { formatDateTime } from "$lib/modules/util";
   import type { SelectedDirectoryEntry } from "../service";
 
   import IconDraft from "~icons/material-symbols/draft";

src/routes/(main)/directory/[[id]]/DirectoryEntries/UploadingFile.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import type { Writable } from "svelte/store";
+  import { formatNetworkSpeed } from "$lib/modules/util";
   import type { FileUploadStatus } from "$lib/stores";
-  import { formatUploadProgress, formatUploadRate } from "./service";
 
   import IconDraft from "~icons/material-symbols/draft";
 
@@ -29,7 +29,7 @@
         {:else if $info.status === "upload-pending"}
           업로드를 기다리는 중
         {:else if $info.status === "uploading"}
-          전송됨 {formatUploadProgress($info.progress)} · {formatUploadRate($info.rate)}
+          전송됨 {Math.floor(($info.progress ?? 0) * 100)}% · {formatNetworkSpeed($info.rate ?? 0)}
         {/if}
       </p>
     </div>

src/routes/(main)/directory/[[id]]/DirectoryEntries/service.ts

@@ -1,7 +1,3 @@
-import { formatFileSize } from "$lib/modules/util";
-
-export { formatDateTime } from "$lib/modules/util";
-
 export enum SortBy {
   NAME_ASC,
   NAME_DESC,
@@ -31,11 +27,3 @@ export const sortEntries = <T extends { name?: string }>(
 
   entries.sort((a, b) => sortFunc(a.name, b.name));
 };
-
-export const formatUploadProgress = (progress?: number) => {
-  return `${Math.floor((progress ?? 0) * 100)}%`;
-};
-
-export const formatUploadRate = (rate?: number) => {
-  return `${formatFileSize((rate ?? 0) / 8)}/s`;
-};

src/routes/(main)/directory/[[id]]/DownloadStatusCard.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { get, type Writable } from "svelte/store";
+  import { fileDownloadStatusStore, isFileDownloading, type FileDownloadStatus } from "$lib/stores";
+
+  interface Props {
+    onclick: () => void;
+  }
+
+  let { onclick }: Props = $props();
+
+  let downloadingFiles: Writable<FileDownloadStatus>[] = $state([]);
+
+  $effect(() => {
+    downloadingFiles = $fileDownloadStatusStore.filter((status) =>
+      isFileDownloading(get(status).status),
+    );
+    return untrack(() => {
+      const unsubscribes = downloadingFiles.map((downloadingFile) =>
+        downloadingFile.subscribe(({ status }) => {
+          if (!isFileDownloading(status)) {
+            downloadingFiles = downloadingFiles.filter((file) => file !== downloadingFile);
+          }
+        }),
+      );
+      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+    });
+  });
+</script>
+
+{#if downloadingFiles.length > 0}
+  <button
+    onclick={() => setTimeout(onclick, 100)}
+    class="mb-4 max-w-[50%] flex-1 rounded-xl bg-green-100 p-3 active:bg-green-200"
+  >
+    <div class="flex h-full w-full flex-col text-left transition active:scale-95">
+      <p class="text-xs text-gray-800">진행 중인 다운로드</p>
+      <p class="font-medium text-green-800">{downloadingFiles.length}개</p>
+    </div>
+  </button>
+{/if}

src/routes/(main)/directory/[[id]]/UploadStatusCard.svelte

@@ -0,0 +1,39 @@
+<script lang="ts">
+  import { untrack } from "svelte";
+  import { get, type Writable } from "svelte/store";
+  import { fileUploadStatusStore, isFileUploading, type FileUploadStatus } from "$lib/stores";
+
+  interface Props {
+    onclick: () => void;
+  }
+
+  let { onclick }: Props = $props();
+
+  let uploadingFiles: Writable<FileUploadStatus>[] = $state([]);
+
+  $effect(() => {
+    uploadingFiles = $fileUploadStatusStore.filter((status) => isFileUploading(get(status).status));
+    return untrack(() => {
+      const unsubscribes = uploadingFiles.map((uploadingFile) =>
+        uploadingFile.subscribe(({ status }) => {
+          if (!isFileUploading(status)) {
+            uploadingFiles = uploadingFiles.filter((file) => file !== uploadingFile);
+          }
+        }),
+      );
+      return () => unsubscribes.forEach((unsubscribe) => unsubscribe());
+    });
+  });
+</script>
+
+{#if uploadingFiles.length > 0}
+  <button
+    onclick={() => setTimeout(onclick, 100)}
+    class="mb-4 max-w-[50%] flex-1 rounded-xl bg-blue-100 p-3 active:bg-blue-200"
+  >
+    <div class="flex h-full w-full flex-col text-left transition active:scale-95">
+      <p class="text-xs text-gray-800">진행 중인 업로드</p>
+      <p class="font-medium text-blue-800">{uploadingFiles.length}개</p>
+    </div>
+  </button>
+{/if}

src/routes/(main)/menu/+page.svelte

@@ -27,7 +27,7 @@
   <div class="space-y-2">
     <p class="font-semibold">설정</p>
     <MenuEntryButton
-      onclick={() => goto("/setting/cache")}
+      onclick={() => goto("/settings/cache")}
       icon={IconStorage}
       iconColor="text-green-500"
     >

src/routes/+layout.svelte

@@ -2,22 +2,22 @@
   import { onMount } from "svelte";
   import { get } from "svelte/store";
   import { goto as svelteGoto } from "$app/navigation";
-  import { fileUploadStatusStore, clientKeyStore, masterKeyStore } from "$lib/stores";
+  import {
+    fileUploadStatusStore,
+    fileDownloadStatusStore,
+    isFileUploading,
+    isFileDownloading,
+    clientKeyStore,
+    masterKeyStore,
+  } from "$lib/stores";
   import "../app.css";
 
   let { children } = $props();
 
-  const checkFileUploadStatus = (e: BeforeUnloadEvent) => {
+  const protectFileUploadAndDownload = (e: BeforeUnloadEvent) => {
     if (
-      $fileUploadStatusStore.some((statusStore) => {
-        const status = get(statusStore);
-        return (
-          status.status === "encryption-pending" ||
-          status.status === "encrypting" ||
-          status.status === "upload-pending" ||
-          status.status === "uploading"
-        );
-      })
+      $fileUploadStatusStore.some((status) => isFileUploading(get(status).status)) ||
+      $fileDownloadStatusStore.some((status) => isFileDownloading(get(status).status))
     ) {
       e.preventDefault();
     }
@@ -41,6 +41,6 @@
   });
 </script>
 
-<svelte:window onbeforeunload={checkFileUploadStatus} />
+<svelte:window onbeforeunload={protectFileUploadAndDownload} />
 
 {@render children()}