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

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}