kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2026-02-04 16:16:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

디렉터리 및 카테고리 페이지에서 탐색시의 깜빡임 현상 완화

Browse Source
This commit is contained in:
static
2026-01-06 06:48:35 +09:00
parent ae1d34fc6b
commit 1d3704bfad
10 changed files with 405 additions and 296 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/lib/modules/filesystem/category.ts
View File

@@ -116,6 +116,6 @@ const storeToIndexedDB = (info: CategoryInfo) => {
return { ...info, exists: true as const }; return { ...info, exists: true as const };
}; };
export const getCategoryInfo = async (id: CategoryId, masterKey: CryptoKey) => { export const getCategoryInfo = (id: CategoryId, masterKey: CryptoKey) => {
return await cache.get(id, masterKey); return cache.get(id, masterKey);
}; };

4
src/lib/modules/filesystem/directory.ts
View File

@@ -97,6 +97,6 @@ const storeToIndexedDB = (info: DirectoryInfo) => {
return { ...info, exists: true as const }; return { ...info, exists: true as const };
}; };
export const getDirectoryInfo = async (id: DirectoryId, masterKey: CryptoKey) => { export const getDirectoryInfo = (id: DirectoryId, masterKey: CryptoKey) => {
return await cache.get(id, masterKey); return cache.get(id, masterKey);
}; };

8
src/lib/modules/filesystem/file.ts
View File

@@ -168,10 +168,10 @@ const bulkStoreToIndexedDB = (infos: FileInfo[]) => {
return infos.map((info) => [info.id, { ...info, exists: true }] as const); return infos.map((info) => [info.id, { ...info, exists: true }] as const);
}; };
export const getFileInfo = async (id: number, masterKey: CryptoKey) => { export const getFileInfo = (id: number, masterKey: CryptoKey) => {
return await cache.get(id, masterKey); return cache.get(id, masterKey);
}; };
export const bulkGetFileInfo = async (ids: number[], masterKey: CryptoKey) => { export const bulkGetFileInfo = (ids: number[], masterKey: CryptoKey) => {
return await cache.bulkGet(new Set(ids), masterKey); return cache.bulkGet(new Set(ids), masterKey);
}; };

14
src/lib/modules/filesystem/internal.svelte.ts
View File

@@ -29,8 +29,6 @@ export class FilesystemCache<K, V extends object> {
this.map.set(key, newState); this.map.set(key, newState);
} }
state.promise = newPromise;
(state.value (state.value
? Promise.resolve(state.value) ? Promise.resolve(state.value)
: this.options.fetchFromIndexedDB(key).then((loadedInfo) => { : this.options.fetchFromIndexedDB(key).then((loadedInfo) => {
@@ -54,7 +52,8 @@ export class FilesystemCache<K, V extends object> {
state.promise = undefined; state.promise = undefined;
}); });
return newPromise; state.promise = newPromise;
return state.value ?? newPromise;
}); });
} }
@@ -108,12 +107,17 @@ export class FilesystemCache<K, V extends object> {
}); });
}); });
return Promise.all( const bottleneckPromises = Array.from(
keys keys
.keys() .keys()
.filter((key) => this.map.get(key)!.value === undefined) .filter((key) => this.map.get(key)!.value === undefined)
.map((key) => this.map.get(key)!.promise!), .map((key) => this.map.get(key)!.promise!),
).then(() => new Map(keys.keys().map((key) => [key, this.map.get(key)!.value!] as const))); );
const makeResult = () =>
new Map(keys.keys().map((key) => [key, this.map.get(key)!.value!] as const));
return bottleneckPromises.length > 0
? Promise.all(bottleneckPromises).then(makeResult)
: makeResult();
}); });
} }
} }

93
src/lib/utils/HybridPromise.ts Normal file
View File

@@ -0,0 +1,93 @@
type MaybePromise<T> = T | Promise<T> | HybridPromise<T>;
type HybridPromiseState<T> =
| { mode: "sync"; status: "fulfilled"; value: T }
| { mode: "sync"; status: "rejected"; reason: unknown }
| { mode: "async"; promise: Promise<T> };
export class HybridPromise<T> implements PromiseLike<T> {
private isConsumed = false;
private constructor(private readonly state: HybridPromiseState<T>) {
if (state.mode === "sync" && state.status === "rejected") {
queueMicrotask(() => {
if (!this.isConsumed) {
throw state.reason;
}
});
}
}
isSync(): boolean {
return this.state.mode === "sync";
}
toPromise(): Promise<T> {
this.isConsumed = true;
if (this.state.mode === "async") return this.state.promise;
return this.state.status === "fulfilled"
? Promise.resolve(this.state.value)
: Promise.reject(this.state.reason);
}
static resolve<T>(value: MaybePromise<T>): HybridPromise<T> {
if (value instanceof HybridPromise) return value;
return new HybridPromise(
value instanceof Promise
? { mode: "async", promise: value }
: { mode: "sync", status: "fulfilled", value },
);
}
static reject<T = never>(reason?: unknown): HybridPromise<T> {
return new HybridPromise({ mode: "sync", status: "rejected", reason });
}
then<TResult1 = T, TResult2 = never>(
onfulfilled?: ((value: T) => MaybePromise<TResult1>) | null | undefined,
onrejected?: ((reason: unknown) => MaybePromise<TResult2>) | null | undefined,
): HybridPromise<TResult1 | TResult2> {
this.isConsumed = true;
if (this.state.mode === "async") {
return new HybridPromise({
mode: "async",
promise: this.state.promise.then(onfulfilled, onrejected) as any,
});
}
try {
if (this.state.status === "fulfilled") {
if (!onfulfilled) return HybridPromise.resolve(this.state.value as any);
return HybridPromise.resolve(onfulfilled(this.state.value));
} else {
if (!onrejected) return HybridPromise.reject(this.state.reason);
return HybridPromise.resolve(onrejected(this.state.reason));
}
} catch (e) {
return HybridPromise.reject(e);
}
}
catch<TResult = never>(
onrejected?: ((reason: unknown) => MaybePromise<TResult>) | null | undefined,
): HybridPromise<T | TResult> {
return this.then<T, TResult>(null, onrejected);
}
finally(onfinally?: (() => void) | null | undefined): HybridPromise<T> {
this.isConsumed = true;
if (this.state.mode === "async") {
return new HybridPromise({ mode: "async", promise: this.state.promise.finally(onfinally) });
}
try {
onfinally?.();
return new HybridPromise(this.state);
} catch (e) {
return HybridPromise.reject(e);
}
}
}

1
src/lib/utils/index.ts
View File

@@ -1,3 +1,4 @@
export * from "./format"; export * from "./format";
export * from "./gotoStateful"; export * from "./gotoStateful";
export * from "./HybridPromise";
export * from "./sort"; export * from "./sort";

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

@@ -9,6 +9,7 @@
import { captureVideoThumbnail } from "$lib/modules/thumbnail"; import { captureVideoThumbnail } from "$lib/modules/thumbnail";
import { getFileDownloadState } from "$lib/modules/file"; import { getFileDownloadState } from "$lib/modules/file";
import { masterKeyStore } from "$lib/stores"; import { masterKeyStore } from "$lib/stores";
import { HybridPromise } from "$lib/utils";
import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte"; import AddToCategoryBottomSheet from "./AddToCategoryBottomSheet.svelte";
import DownloadStatus from "./DownloadStatus.svelte"; import DownloadStatus from "./DownloadStatus.svelte";
import { import {
@@ -26,8 +27,7 @@
let { data } = $props(); let { data } = $props();
let infoPromise: Promise<MaybeFileInfo> | undefined = $state(); let info: MaybeFileInfo | undefined = $state();
let info: FileInfo | null = $state(null);
let downloadState = $derived(getFileDownloadState(data.id)); let downloadState = $derived(getFileDownloadState(data.id));
let isMenuOpen = $state(false); let isMenuOpen = $state(false);
@@ -65,22 +65,20 @@
const addToCategory = async (categoryId: number) => { const addToCategory = async (categoryId: number) => {
await requestFileAdditionToCategory(data.id, categoryId); await requestFileAdditionToCategory(data.id, categoryId);
isAddToCategoryBottomSheetOpen = false; isAddToCategoryBottomSheetOpen = false;
infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME void getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
}; };
const removeFromCategory = async (categoryId: number) => { const removeFromCategory = async (categoryId: number) => {
await requestFileRemovalFromCategory(data.id, categoryId); await requestFileRemovalFromCategory(data.id, categoryId);
infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME void getFileInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
}; };
$effect(() => { $effect(() => {
infoPromise = getFileInfo(data.id, $masterKeyStore?.get(1)?.key!).then((fileInfo) => { HybridPromise.resolve(getFileInfo(data.id, $masterKeyStore?.get(1)?.key!)).then((result) => {
if (fileInfo.exists) { if (data.id === result.id) {
info = fileInfo; info = result;
} }
return fileInfo;
}); });
info = null;
isDownloadRequested = false; isDownloadRequested = false;
viewerType = undefined; viewerType = undefined;
}); });
@@ -111,8 +109,8 @@
}); });
$effect(() => { $effect(() => {
if (info && downloadState?.status === "decrypted") { if (info?.exists && downloadState?.status === "decrypted") {
untrack(() => !isDownloadRequested && updateViewer(downloadState.result!, info!.contentType)); untrack(() => !isDownloadRequested && updateViewer(downloadState.result!, info!.contentIv!));
} }
}); });
@@ -123,87 +121,85 @@
<title>파일</title> <title>파일</title>
</svelte:head> </svelte:head>
{#if info} <TopBar title={info?.name}>
<TopBar title={info.name}> <!-- svelte-ignore a11y_no_static_element_interactions -->
<!-- svelte-ignore a11y_no_static_element_interactions --> <!-- svelte-ignore a11y_click_events_have_key_events -->
<!-- svelte-ignore a11y_click_events_have_key_events --> <div onclick={(e) => e.stopPropagation()}>
<div onclick={(e) => e.stopPropagation()}> <button
<button onclick={() => (isMenuOpen = !isMenuOpen)}
onclick={() => (isMenuOpen = !isMenuOpen)} class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]" >
> <IconMoreVert class="text-2xl" />
<IconMoreVert class="text-2xl" /> </button>
</button> <TopBarMenu
<TopBarMenu bind:isOpen={isMenuOpen}
bind:isOpen={isMenuOpen} directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "")
directoryId={["category", "gallery"].includes(page.url.searchParams.get("from") ?? "") ? info?.parentId
? info.parentId : undefined}
: undefined} {fileBlob}
{fileBlob} filename={info?.name}
filename={info.name} />
/> </div>
</div> </TopBar>
</TopBar> <FullscreenDiv>
<FullscreenDiv> <div class="space-y-4 pb-4">
<div class="space-y-4 pb-4"> {#if downloadState}
{#if downloadState} <DownloadStatus state={downloadState} />
<DownloadStatus state={downloadState} /> {/if}
{/if} {#if info && viewerType}
{#if viewerType} <div class="flex w-full justify-center">
<div class="flex w-full justify-center"> {#snippet viewerLoading(message: string)}
{#snippet viewerLoading(message: string)} <p class="text-gray-500">{message}</p>
<p class="text-gray-500">{message}</p> {/snippet}
{/snippet}
{#if viewerType === "image"} {#if viewerType === "image"}
{#if fileBlobUrl} {#if fileBlobUrl}
<img src={fileBlobUrl} alt={info.name} onerror={convertHeicToJpeg} /> <img src={fileBlobUrl} alt={info.name} onerror={convertHeicToJpeg} />
{:else} {:else}
{@render viewerLoading("이미지를 불러오고 있어요.")} {@render viewerLoading("이미지를 불러오고 있어요.")}
{/if}
{:else if viewerType === "video"}
{#if fileBlobUrl}
<div class="flex flex-col space-y-2">
<video bind:this={videoElement} src={fileBlobUrl} controls muted></video>
<IconEntryButton
icon={IconCamera}
onclick={() => updateThumbnail(info?.dataKey?.key!, info?.dataKey?.version!)}
class="w-full"
>
이 장면을 썸네일로 설정하기
</IconEntryButton>
</div>
{:else}
{@render viewerLoading("비디오를 불러오고 있어요.")}
{/if}
{/if} {/if}
</div> {:else if viewerType === "video"}
{/if} {#if fileBlobUrl}
<div class="space-y-2"> <div class="flex flex-col space-y-2">
<p class="text-lg font-bold">카테고리</p> <video bind:this={videoElement} src={fileBlobUrl} controls muted></video>
<div class="space-y-1"> <IconEntryButton
<Categories icon={IconCamera}
categories={info.categories} onclick={() => updateThumbnail(info?.dataKey?.key!, info?.dataKey?.version!)}
categoryMenuIcon={IconClose} class="w-full"
onCategoryClick={({ id }) => goto(`/category/${id}`)} >
onCategoryMenuClick={({ id }) => removeFromCategory(id)} 이 장면을 썸네일로 설정하기
/> </IconEntryButton>
<IconEntryButton </div>
icon={IconAddCircle} {:else}
onclick={() => (isAddToCategoryBottomSheetOpen = true)} {@render viewerLoading("비디오를 불러오고 있어요.")}
class="h-12 w-full" {/if}
iconClass="text-gray-600" {/if}
textClass="text-gray-700" </div>
> {/if}
카테고리에 추가하기 <div class="space-y-2">
</IconEntryButton> <p class="text-lg font-bold">카테고리</p>
</div> <div class="space-y-1">
<Categories
categories={info?.categories ?? []}
categoryMenuIcon={IconClose}
onCategoryClick={({ id }) => goto(`/category/${id}`)}
onCategoryMenuClick={({ id }) => removeFromCategory(id)}
/>
<IconEntryButton
icon={IconAddCircle}
onclick={() => (isAddToCategoryBottomSheetOpen = true)}
class="h-12 w-full"
iconClass="text-gray-600"
textClass="text-gray-700"
>
카테고리에 추가하기
</IconEntryButton>
</div> </div>
</div> </div>
</FullscreenDiv> </div>
</FullscreenDiv>
<AddToCategoryBottomSheet <AddToCategoryBottomSheet
bind:isOpen={isAddToCategoryBottomSheetOpen} bind:isOpen={isAddToCategoryBottomSheetOpen}
onAddToCategoryClick={addToCategory} onAddToCategoryClick={addToCategory}
/> />
{/if}

73
src/routes/(fullscreen)/file/[id]/AddToCategoryBottomSheet.svelte
View File

@@ -4,6 +4,7 @@
import { CategoryCreateModal } from "$lib/components/organisms"; import { CategoryCreateModal } from "$lib/components/organisms";
import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem"; import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem";
import { masterKeyStore } from "$lib/stores"; import { masterKeyStore } from "$lib/stores";
import { HybridPromise } from "$lib/utils";
import { requestCategoryCreation } from "./service"; import { requestCategoryCreation } from "./service";
interface Props { interface Props {
@@ -13,48 +14,50 @@
let { onAddToCategoryClick, isOpen = $bindable() }: Props = $props(); let { onAddToCategoryClick, isOpen = $bindable() }: Props = $props();
let categoryInfoPromise: Promise<MaybeCategoryInfo> | undefined = $state(); let categoryInfo: MaybeCategoryInfo | undefined = $state();
let isCategoryCreateModalOpen = $state(false); let isCategoryCreateModalOpen = $state(false);
$effect(() => { $effect(() => {
if (isOpen) { if (isOpen) {
categoryInfoPromise = getCategoryInfo("root", $masterKeyStore?.get(1)?.key!); HybridPromise.resolve(getCategoryInfo("root", $masterKeyStore?.get(1)?.key!)).then(
(result) => (categoryInfo = result),
);
} }
}); });
</script> </script>
{#await categoryInfoPromise then categoryInfo} {#if categoryInfo?.exists}
{#if categoryInfo?.exists} <BottomSheet bind:isOpen class="flex flex-col">
<BottomSheet bind:isOpen class="flex flex-col"> <FullscreenDiv>
<FullscreenDiv> <SubCategories
<SubCategories class="py-4"
class="py-4" info={categoryInfo}
info={categoryInfo} onSubCategoryClick={({ id }) =>
onSubCategoryClick={({ id }) => HybridPromise.resolve(getCategoryInfo(id, $masterKeyStore?.get(1)?.key!)).then(
(categoryInfoPromise = getCategoryInfo(id, $masterKeyStore?.get(1)?.key!))} (result) => (categoryInfo = result),
onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)} )}
subCategoryCreatePosition="top" onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
/> subCategoryCreatePosition="top"
{#if categoryInfo.id !== "root"} />
<BottomDiv> {#if categoryInfo.id !== "root"}
<Button onclick={() => onAddToCategoryClick(categoryInfo.id)} class="w-full"> <BottomDiv>
이 카테고리에 추가하기 <Button onclick={() => onAddToCategoryClick(categoryInfo!.id as number)} class="w-full">
</Button> {categoryInfo!.name} 카테고리에 추가하기
</BottomDiv> </Button>
{/if} </BottomDiv>
</FullscreenDiv> {/if}
</BottomSheet> </FullscreenDiv>
</BottomSheet>
{/if}
<CategoryCreateModal <CategoryCreateModal
bind:isOpen={isCategoryCreateModalOpen} bind:isOpen={isCategoryCreateModalOpen}
onCreateClick={async (name: string) => { onCreateClick={async (name: string) => {
if (await requestCategoryCreation(name, categoryInfo.id, $masterKeyStore?.get(1)!)) { if (await requestCategoryCreation(name, categoryInfo!.id, $masterKeyStore?.get(1)!)) {
categoryInfoPromise = getCategoryInfo(categoryInfo.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME void getCategoryInfo(categoryInfo!.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true; return true;
} }
return false; return false;
}} }}
/> />
{/if}
{/await}

141
src/routes/(main)/category/[[id]]/+page.svelte
View File

@@ -4,6 +4,7 @@
import { Category, CategoryCreateModal } from "$lib/components/organisms"; import { Category, CategoryCreateModal } from "$lib/components/organisms";
import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem"; import { getCategoryInfo, type MaybeCategoryInfo } from "$lib/modules/filesystem";
import { masterKeyStore } from "$lib/stores"; import { masterKeyStore } from "$lib/stores";
import { HybridPromise } from "$lib/utils";
import CategoryDeleteModal from "./CategoryDeleteModal.svelte"; import CategoryDeleteModal from "./CategoryDeleteModal.svelte";
import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte"; import CategoryMenuBottomSheet from "./CategoryMenuBottomSheet.svelte";
import CategoryRenameModal from "./CategoryRenameModal.svelte"; import CategoryRenameModal from "./CategoryRenameModal.svelte";
@@ -18,7 +19,7 @@
let { data } = $props(); let { data } = $props();
let context = createContext(); let context = createContext();
let infoPromise: Promise<MaybeCategoryInfo> | undefined = $state(); let info: MaybeCategoryInfo | undefined = $state();
let isCategoryCreateModalOpen = $state(false); let isCategoryCreateModalOpen = $state(false);
let isCategoryMenuBottomSheetOpen = $state(false); let isCategoryMenuBottomSheetOpen = $state(false);
@@ -26,7 +27,13 @@
let isCategoryDeleteModalOpen = $state(false); let isCategoryDeleteModalOpen = $state(false);
$effect(() => { $effect(() => {
infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); HybridPromise.resolve(getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!)).then(
(result) => {
if (data.id === result.id) {
info = result;
}
},
);
}); });
</script> </script>
@@ -34,70 +41,68 @@
<title>카테고리</title> <title>카테고리</title>
</svelte:head> </svelte:head>
{#await infoPromise then info} {#if info?.exists}
{#if info?.exists} {#if info.id !== "root"}
{#if info.id !== "root"} <TopBar title={info.name} />
<TopBar title={info.name} />
{/if}
<div class="min-h-full bg-gray-100 pb-[5.5em]">
<Category
bind:isFileRecursive={info.isFileRecursive}
{info}
onFileClick={({ id }) => goto(`/file/${id}?from=category`)}
onFileRemoveClick={async ({ id }) => {
await requestFileRemovalFromCategory(id, data.id as number);
infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
}}
onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
onSubCategoryMenuClick={(subCategory) => {
context.selectedCategory = subCategory;
isCategoryMenuBottomSheetOpen = true;
}}
/>
</div>
<CategoryCreateModal
bind:isOpen={isCategoryCreateModalOpen}
onCreateClick={async (name: string) => {
if (await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true;
}
return false;
}}
/>
<CategoryMenuBottomSheet
bind:isOpen={isCategoryMenuBottomSheetOpen}
onRenameClick={() => {
isCategoryMenuBottomSheetOpen = false;
isCategoryRenameModalOpen = true;
}}
onDeleteClick={() => {
isCategoryMenuBottomSheetOpen = false;
isCategoryDeleteModalOpen = true;
}}
/>
<CategoryRenameModal
bind:isOpen={isCategoryRenameModalOpen}
onRenameClick={async (newName: string) => {
if (await requestCategoryRename(context.selectedCategory!, newName)) {
infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true;
}
return false;
}}
/>
<CategoryDeleteModal
bind:isOpen={isCategoryDeleteModalOpen}
onDeleteClick={async () => {
if (await requestCategoryDeletion(context.selectedCategory!)) {
infoPromise = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true;
}
return false;
}}
/>
{/if} {/if}
{/await} <div class="min-h-full bg-gray-100 pb-[5.5em]">
<Category
bind:isFileRecursive={info.isFileRecursive}
{info}
onFileClick={({ id }) => goto(`/file/${id}?from=category`)}
onFileRemoveClick={async ({ id }) => {
await requestFileRemovalFromCategory(id, data.id as number);
void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
}}
onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
onSubCategoryMenuClick={(subCategory) => {
context.selectedCategory = subCategory;
isCategoryMenuBottomSheetOpen = true;
}}
/>
</div>
{/if}
<CategoryCreateModal
bind:isOpen={isCategoryCreateModalOpen}
onCreateClick={async (name: string) => {
if (await requestCategoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true;
}
return false;
}}
/>
<CategoryMenuBottomSheet
bind:isOpen={isCategoryMenuBottomSheetOpen}
onRenameClick={() => {
isCategoryMenuBottomSheetOpen = false;
isCategoryRenameModalOpen = true;
}}
onDeleteClick={() => {
isCategoryMenuBottomSheetOpen = false;
isCategoryDeleteModalOpen = true;
}}
/>
<CategoryRenameModal
bind:isOpen={isCategoryRenameModalOpen}
onRenameClick={async (newName: string) => {
if (await requestCategoryRename(context.selectedCategory!, newName)) {
void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true;
}
return false;
}}
/>
<CategoryDeleteModal
bind:isOpen={isCategoryDeleteModalOpen}
onDeleteClick={async () => {
if (await requestCategoryDeletion(context.selectedCategory!)) {
void getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true;
}
return false;
}}
/>

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

@@ -6,6 +6,7 @@
import { TopBar } from "$lib/components/molecules"; import { TopBar } from "$lib/components/molecules";
import { getDirectoryInfo, type MaybeDirectoryInfo } from "$lib/modules/filesystem"; import { getDirectoryInfo, type MaybeDirectoryInfo } from "$lib/modules/filesystem";
import { masterKeyStore, hmacSecretStore } from "$lib/stores"; import { masterKeyStore, hmacSecretStore } from "$lib/stores";
import { HybridPromise } from "$lib/utils";
import DirectoryCreateModal from "./DirectoryCreateModal.svelte"; import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
import DirectoryEntries from "./DirectoryEntries"; import DirectoryEntries from "./DirectoryEntries";
import DownloadStatusCard from "./DownloadStatusCard.svelte"; import DownloadStatusCard from "./DownloadStatusCard.svelte";
@@ -29,7 +30,7 @@
let { data } = $props(); let { data } = $props();
let context = createContext(); let context = createContext();
let infoPromise: Promise<MaybeDirectoryInfo> | undefined = $state(); let info: MaybeDirectoryInfo | undefined = $state();
let fileInput: HTMLInputElement | undefined = $state(); let fileInput: HTMLInputElement | undefined = $state();
let duplicatedFile: File | undefined = $state(); let duplicatedFile: File | undefined = $state();
let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state(); let resolveForDuplicateFileModal: ((res: boolean) => void) | undefined = $state();
@@ -60,7 +61,7 @@
.then((res) => { .then((res) => {
if (!res) return; if (!res) return;
// TODO: FIXME // TODO: FIXME
infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!);
}) })
.catch((e: Error) => { .catch((e: Error) => {
// TODO: FIXME // TODO: FIXME
@@ -78,7 +79,13 @@
}); });
$effect(() => { $effect(() => {
infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); HybridPromise.resolve(getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!)).then(
(result) => {
if (data.id === result.id) {
info = result;
}
},
);
}); });
</script> </script>
@@ -88,17 +95,17 @@
<input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" /> <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
{#await infoPromise then info} {#if info?.exists}
{#if info?.exists} <div class="flex h-full flex-col">
<div class="flex h-full flex-col"> {#if showTopBar}
{#if showTopBar} <TopBar title={info.name} class="flex-shrink-0" />
<TopBar title={info.name} class="flex-shrink-0" /> {/if}
{/if} <div class={["flex flex-grow flex-col px-4 pb-4", !showTopBar && "pt-4"]}>
<div class={["flex flex-grow flex-col px-4 pb-4", !showTopBar && "pt-4"]}> <div class="flex gap-x-2">
<div class="flex gap-x-2"> <UploadStatusCard onclick={() => goto("/file/uploads")} />
<UploadStatusCard onclick={() => goto("/file/uploads")} /> <DownloadStatusCard onclick={() => goto("/file/downloads")} />
<DownloadStatusCard onclick={() => goto("/file/downloads")} /> </div>
</div> {#key info.id}
<DirectoryEntries <DirectoryEntries
{info} {info}
onEntryClick={({ type, id }) => goto(`/${type}/${id}`)} onEntryClick={({ type, id }) => goto(`/${type}/${id}`)}
@@ -109,85 +116,85 @@
showParentEntry={isFromFilePage && info.parentId !== undefined} showParentEntry={isFromFilePage && info.parentId !== undefined}
onParentClick={() => onParentClick={() =>
goto( goto(
info.parentId === "root" info!.parentId === "root"
? "/directory?from=file" ? "/directory?from=file"
: `/directory/${info.parentId}?from=file`, : `/directory/${info!.parentId}?from=file`,
)} )}
/> />
</div> {/key}
</div> </div>
</div>
{/if}
<FloatingButton <FloatingButton
icon={IconAdd} icon={IconAdd}
onclick={() => { onclick={() => {
isEntryCreateBottomSheetOpen = true; isEntryCreateBottomSheetOpen = true;
}} }}
class="bottom-24 right-4" class="bottom-24 right-4"
/> />
<EntryCreateBottomSheet <EntryCreateBottomSheet
bind:isOpen={isEntryCreateBottomSheetOpen} bind:isOpen={isEntryCreateBottomSheetOpen}
onDirectoryCreateClick={() => { onDirectoryCreateClick={() => {
isEntryCreateBottomSheetOpen = false; isEntryCreateBottomSheetOpen = false;
isDirectoryCreateModalOpen = true; isDirectoryCreateModalOpen = true;
}} }}
onFileUploadClick={() => { onFileUploadClick={() => {
isEntryCreateBottomSheetOpen = false; isEntryCreateBottomSheetOpen = false;
fileInput?.click(); fileInput?.click();
}} }}
/> />
<DirectoryCreateModal <DirectoryCreateModal
bind:isOpen={isDirectoryCreateModalOpen} bind:isOpen={isDirectoryCreateModalOpen}
onCreateClick={async (name) => { onCreateClick={async (name) => {
if (await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!)) { if (await requestDirectoryCreation(name, data.id, $masterKeyStore?.get(1)!)) {
infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true; return true;
} }
return false; return false;
}} }}
/> />
<DuplicateFileModal <DuplicateFileModal
bind:isOpen={isDuplicateFileModalOpen} bind:isOpen={isDuplicateFileModalOpen}
file={duplicatedFile} file={duplicatedFile}
onbeforeclose={() => { onbeforeclose={() => {
resolveForDuplicateFileModal?.(false); resolveForDuplicateFileModal?.(false);
isDuplicateFileModalOpen = false; isDuplicateFileModalOpen = false;
}} }}
onUploadClick={() => { onUploadClick={() => {
resolveForDuplicateFileModal?.(true); resolveForDuplicateFileModal?.(true);
isDuplicateFileModalOpen = false; isDuplicateFileModalOpen = false;
}} }}
/> />
<EntryMenuBottomSheet <EntryMenuBottomSheet
bind:isOpen={isEntryMenuBottomSheetOpen} bind:isOpen={isEntryMenuBottomSheetOpen}
onRenameClick={() => { onRenameClick={() => {
isEntryMenuBottomSheetOpen = false; isEntryMenuBottomSheetOpen = false;
isEntryRenameModalOpen = true; isEntryRenameModalOpen = true;
}} }}
onDeleteClick={() => { onDeleteClick={() => {
isEntryMenuBottomSheetOpen = false; isEntryMenuBottomSheetOpen = false;
isEntryDeleteModalOpen = true; isEntryDeleteModalOpen = true;
}} }}
/> />
<EntryRenameModal <EntryRenameModal
bind:isOpen={isEntryRenameModalOpen} bind:isOpen={isEntryRenameModalOpen}
onRenameClick={async (newName: string) => { onRenameClick={async (newName: string) => {
if (await requestEntryRename(context.selectedEntry!, newName)) { if (await requestEntryRename(context.selectedEntry!, newName)) {
infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true; return true;
} }
return false; return false;
}} }}
/> />
<EntryDeleteModal <EntryDeleteModal
bind:isOpen={isEntryDeleteModalOpen} bind:isOpen={isEntryDeleteModalOpen}
onDeleteClick={async () => { onDeleteClick={async () => {
if (await requestEntryDeletion(context.selectedEntry!)) { if (await requestEntryDeletion(context.selectedEntry!)) {
infoPromise = getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME void getDirectoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
return true; return true;
} }
return false; return false;
}} }}
/> />
{/if}
{/await}