디렉터리 페이지에서 파일 목록도 함께 표시하도록 구현 및 파일/디렉터리 이름이 너무 긴 경우 잘라서 표시하도록 개선

src/lib/components/TopBar.svelte

@@ -17,13 +17,15 @@
 </script>
 
 <div class="sticky top-0 flex items-center justify-between bg-white pt-4">
-  <button onclick={back} class="rounded-full p-1 active:bg-gray-100">
+  <button onclick={back} class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-gray-100">
     <IconArrowBack class="text-2xl" />
   </button>
   {#if title}
-    <p class="absolute left-1/2 -translate-x-1/2 transform text-lg font-semibold">{title}</p>
+    <p class="flex-grow truncate px-2 text-center text-lg font-semibold">{title}</p>
-  {/if}
-  {#if children}
-    {@render children?.()}
   {/if}
+  <div class="min-w-[2.3rem] flex-shrink-0">
+    {#if children}
+      {@render children?.()}
+    {/if}
+  </div>
 </div>

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

@@ -1,6 +1,6 @@
 import { error } from "@sveltejs/kit";
 import { z } from "zod";
-import type { DirectroyInfoResponse } from "$lib/server/schemas";
+import type { DirectroyInfoResponse, FileInfoResponse } from "$lib/server/schemas";
 import type { PageServerLoad } from "./$types";
 
 export const load: PageServerLoad = async ({ params, fetch }) => {
@@ -27,7 +27,16 @@ export const load: PageServerLoad = async ({ params, fetch }) => {
       };
     }),
   );
-  const fileInfos = directoryInfo.files; // TODO
+  const fileInfos = await Promise.all(
+    directoryInfo.files.map(async (fileId) => {
+      const res = await fetch(`/api/file/${fileId}`);
+      if (!res.ok) error(500, "Internal server error");
+      return {
+        ...((await res.json()) as FileInfoResponse),
+        id: fileId,
+      };
+    }),
+  );
 
   return {
     id: directoryId,

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

@@ -5,7 +5,12 @@
   import CreateBottomSheet from "./CreateBottomSheet.svelte";
   import CreateDirectoryModal from "./CreateDirectoryModal.svelte";
   import DirectoryEntry from "./DirectoryEntry.svelte";
-  import { decryptDirectroyMetadata, requestDirectroyCreation, requestFileUpload } from "./service";
+  import {
+    decryptDirectroyMetadata,
+    decryptFileMetadata,
+    requestDirectroyCreation,
+    requestFileUpload,
+  } from "./service";
 
   import IconAdd from "~icons/material-symbols/add";
 
@@ -43,6 +48,20 @@
       });
     }
   });
+  const files = $derived.by(() => {
+    const { files } = data;
+    if ($masterKeyStore) {
+      return Promise.all(
+        files.map(async (file) => ({
+          ...(await decryptFileMetadata(file!, $masterKeyStore.get(file.mekVersion)!.key)),
+          id: file.id,
+        })),
+      ).then((files) => {
+        files.sort((a, b) => a.name.localeCompare(b.name));
+        return files;
+      });
+    }
+  });
 
   const createDirectory = async (name: string) => {
     await requestDirectroyCreation(
@@ -84,7 +103,14 @@
     {#if subDirectories}
       {#await subDirectories then subDirectories}
         {#each subDirectories as { id, name }}
-          <DirectoryEntry {id} {name} />
+          <DirectoryEntry {id} {name} type="directory" />
+        {/each}
+      {/await}
+    {/if}
+    {#if files}
+      {#await files then files}
+        {#each files as { id, name }}
+          <DirectoryEntry {id} {name} type="file" />
         {/each}
       {/await}
     {/if}

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

@@ -2,34 +2,42 @@
   import { goto } from "$app/navigation";
 
   import IconFolder from "~icons/material-symbols/folder";
+  import IconDraft from "~icons/material-symbols/draft";
   import IconMoreVert from "~icons/material-symbols/more-vert";
 
   interface Props {
     id: number;
     name: string;
+    type: "directory" | "file";
   }
 
-  let { id, name }: Props = $props();
+  let { id, name, type }: Props = $props();
 
-  const openDirectory = () => {
+  const open = () => {
     setTimeout(() => {
-      goto(`/directory/${id}`);
+      goto(`/${type}/${id}`);
     }, 100);
   };
 </script>
 
 <!-- svelte-ignore a11y_no_static_element_interactions -->
 <!-- svelte-ignore a11y_click_events_have_key_events -->
-<div id="button" onclick={openDirectory} class="h-12 w-full rounded-xl">
+<div id="button" onclick={open} class="h-12 w-full rounded-xl">
-  <div id="button-content" class="flex h-full items-center justify-between p-2 transition">
+  <div id="button-content" class="flex h-full items-center gap-x-4 p-2 transition">
-    <div class="flex items-center gap-x-2">
+    <div class="flex-shrink-0 text-lg">
-      <IconFolder class="text-lg" />
+      {#if type === "directory"}
-      <p class="font-medium">{name}</p>
+        <IconFolder />
+      {:else if type === "file"}
+        <IconDraft class="text-blue-400" />
+      {/if}
     </div>
+    <p title={name} class="flex-grow truncate font-medium">
+      {name}
+    </p>
     <button
       id="open-menu"
       onclick={(e) => e.stopPropagation()}
-      class="rounded-full p-1 active:bg-gray-100"
+      class="flex-shrink-0 rounded-full p-1 active:bg-gray-100"
     >
       <IconMoreVert class="text-lg transition active:scale-95" />
     </button>

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

@@ -14,6 +14,7 @@ import type {
   DirectroyInfoResponse,
   DirectoryCreateRequest,
   FileUploadRequest,
+  FileInfoResponse,
 } from "$lib/server/schemas";
 import type { MasterKey } from "$lib/stores";
 
@@ -29,6 +30,15 @@ export const decryptDirectroyMetadata = async (
   };
 };
 
+export const decryptFileMetadata = async (metadata: FileInfoResponse, masterKey: CryptoKey) => {
+  const { dataKey } = await unwrapDataKey(metadata.dek, masterKey);
+  return {
+    name: new TextDecoder().decode(
+      await decryptData(decodeFromBase64(metadata.name), metadata.nameIv, dataKey),
+    ),
+  };
+};
+
 export const requestDirectroyCreation = async (
   name: string,
   parentId: "root" | number,