kmc7468/arkvault
1
0
Fork 0
mirror of https://github.com/kmc7468/arkvault.git synced 2025-12-14 22:08:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

FullscreenDiv 컴포넌트 추가 및 TopBar 컴포넌트 리팩토링

Browse Source
This commit is contained in:
static
2025-01-25 23:39:19 +09:00
parent 7dba1cf4c6
commit 0998d0662e
19 changed files with 188 additions and 171 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/lib/components/TopBar.svelte
View File

@@ -1,35 +0,0 @@
<script lang="ts">
import type { Snippet } from "svelte";
import IconArrowBack from "~icons/material-symbols/arrow-back";
interface Props {
children?: Snippet;
onback?: () => void;
title?: string;
xPadding?: boolean;
}
let { children, onback, title, xPadding = false }: Props = $props();
const back = $derived(() => {
setTimeout(onback || (() => history.back()), 100);
});
</script>
<div
class="sticky top-0 z-10 flex flex-shrink-0 items-center justify-between bg-white py-4
{xPadding ? 'px-4' : ''}"
>
<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="flex-grow truncate px-2 text-center text-lg font-semibold">{title}</p>
{/if}
<div class="w-[2.3rem] flex-shrink-0">
{#if children}
{@render children?.()}
{/if}
</div>
</div>

2
src/lib/components/atoms/divs/AdaptiveDiv.svelte
View File

@@ -10,6 +10,6 @@
let { children, ...props }: Props = $props(); let { children, ...props }: Props = $props();
</script> </script>
<div class={["mx-auto w-full max-w-screen-md", props.class]}> <div class={["mx-auto max-w-screen-md", props.class]}>
{@render children?.()} {@render children?.()}
</div> </div>

7
src/lib/components/atoms/divs/FullscreenDiv.svelte Normal file
View File

@@ -0,0 +1,7 @@
<script lang="ts">
let { children } = $props();
</script>
<div class="flex flex-grow flex-col justify-between px-4">
{@render children?.()}
</div>

1
src/lib/components/atoms/divs/index.ts
View File

@@ -1,2 +1,3 @@
export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte"; export { default as AdaptiveDiv } from "./AdaptiveDiv.svelte";
export { default as BottomDiv } from "./BottomDiv.svelte"; export { default as BottomDiv } from "./BottomDiv.svelte";
export { default as FullscreenDiv } from "./FullscreenDiv.svelte";

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

@@ -1,2 +1 @@
export { default as BottomSheet } from "./BottomSheet.svelte"; export { default as BottomSheet } from "./BottomSheet.svelte";
export { default as TopBar } from "./TopBar.svelte";

37
src/lib/components/molecules/TopBar.svelte Normal file
View File

@@ -0,0 +1,37 @@
<script lang="ts">
import type { Snippet } from "svelte";
import type { ClassValue } from "svelte/elements";
import IconArrowBack from "~icons/material-symbols/arrow-back";
interface Props {
children?: Snippet;
class?: ClassValue;
onBackClick?: () => void;
title?: string;
}
let { children, onBackClick, title, ...props }: Props = $props();
</script>
<div
class={[
"sticky top-0 z-10 flex items-center justify-between gap-x-2 px-2 py-3 backdrop-blur-2xl",
props.class,
]}
>
<button
onclick={onBackClick || (() => history.back())}
class="w-[2.3rem] flex-shrink-0 rounded-full p-1 active:bg-black active:bg-opacity-[0.04]"
>
<IconArrowBack class="text-2xl" />
</button>
{#if title}
<p class="flex-grow truncate text-center text-lg font-semibold">{title}</p>
{/if}
<div class="w-[2.3rem] flex-shrink-0">
{#if children}
{@render children?.()}
{/if}
</div>
</div>

1
src/lib/components/molecules/index.ts
View File

@@ -1,2 +1,3 @@
export * from "./ActionModal.svelte"; export * from "./ActionModal.svelte";
export { default as ActionModal } from "./ActionModal.svelte"; export { default as ActionModal } from "./ActionModal.svelte";
export { default as TopBar } from "./TopBar.svelte";

6
src/routes/(fullscreen)/+layout.svelte
View File

@@ -4,8 +4,6 @@
let { children } = $props(); let { children } = $props();
</script> </script>
<AdaptiveDiv> <AdaptiveDiv class="flex h-screen flex-col">
<div class="flex h-screen flex-col justify-between px-4"> {@render children()}
{@render children()}
</div>
</AdaptiveDiv> </AdaptiveDiv>

16
src/routes/(fullscreen)/auth/changePassword/+page.svelte
View File

@@ -1,8 +1,8 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { TopBar } from "$lib/components"; import { Button, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
import { Button, BottomDiv, TextInput } from "$lib/components/atoms";
import { TitleDiv } from "$lib/components/divs"; import { TitleDiv } from "$lib/components/divs";
import { TopBar } from "$lib/components/molecules";
import { requestPasswordChange } from "./service"; import { requestPasswordChange } from "./service";
let oldPassword = $state(""); let oldPassword = $state("");
@@ -19,8 +19,8 @@
<title>비밀번호 바꾸기</title> <title>비밀번호 바꾸기</title>
</svelte:head> </svelte:head>
<div> <TopBar class="flex-shrink-0" />
<TopBar /> <FullscreenDiv>
<TitleDiv topPadding={false}> <TitleDiv topPadding={false}>
<div class="space-y-2 break-keep"> <div class="space-y-2 break-keep">
<p class="text-2xl font-bold">기존 비밀번호와 새 비밀번호를 입력해 주세요.</p> <p class="text-2xl font-bold">기존 비밀번호와 새 비밀번호를 입력해 주세요.</p>
@@ -31,7 +31,7 @@
<TextInput bind:value={newPassword} placeholder="새 비밀번호" type="password" /> <TextInput bind:value={newPassword} placeholder="새 비밀번호" type="password" />
</div> </div>
</TitleDiv> </TitleDiv>
</div> <BottomDiv>
<BottomDiv> <Button onclick={changePassword} class="w-full">비밀번호 바꾸기</Button>
<Button onclick={changePassword} class="w-full">비밀번호 바꾸기</Button> </BottomDiv>
</BottomDiv> </FullscreenDiv>

32
src/routes/(fullscreen)/auth/login/+page.svelte
View File

@@ -1,6 +1,6 @@
<script lang="ts"> <script lang="ts">
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { Button, TextButton, BottomDiv, TextInput } from "$lib/components/atoms"; import { Button, TextButton, BottomDiv, FullscreenDiv, TextInput } from "$lib/components/atoms";
import { TitleDiv } from "$lib/components/divs"; import { TitleDiv } from "$lib/components/divs";
import { clientKeyStore, masterKeyStore } from "$lib/stores"; import { clientKeyStore, masterKeyStore } from "$lib/stores";
import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service"; import { requestLogin, requestSessionUpgrade, requestMasterKeyDownload } from "./service";
@@ -46,17 +46,19 @@
<title>로그인</title> <title>로그인</title>
</svelte:head> </svelte:head>
<TitleDiv> <FullscreenDiv>
<div class="space-y-2 break-keep"> <TitleDiv>
<p class="text-3xl font-bold">환영합니다!</p> <div class="space-y-2 break-keep">
<p>서비스를 이용하려면 로그인을 해야해요.</p> <p class="text-3xl font-bold">환영합니다!</p>
</div> <p>서비스를 이용하려면 로그인을 해야해요.</p>
<div class="my-4 flex flex-col gap-y-2"> </div>
<TextInput bind:value={email} placeholder="이메일" /> <div class="my-4 flex flex-col gap-y-2">
<TextInput bind:value={password} placeholder="비밀번호" type="password" /> <TextInput bind:value={email} placeholder="이메일" />
</div> <TextInput bind:value={password} placeholder="비밀번호" type="password" />
</TitleDiv> </div>
<BottomDiv class="flex flex-col items-center gap-y-2"> </TitleDiv>
<Button onclick={login} class="w-full">로그인</Button> <BottomDiv class="flex flex-col items-center gap-y-2">
<TextButton>계정이 없어요</TextButton> <Button onclick={login} class="w-full">로그인</Button>
</BottomDiv> <TextButton>계정이 없어요</TextButton>
</BottomDiv>
</FullscreenDiv>

57
src/routes/(fullscreen)/client/pending/+page.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { FullscreenDiv } from "$lib/components/atoms";
import { TitleDiv } from "$lib/components/divs"; import { TitleDiv } from "$lib/components/divs";
import { clientKeyStore, masterKeyStore } from "$lib/stores"; import { clientKeyStore, masterKeyStore } from "$lib/stores";
import { generatePublicKeyFingerprint, requestMasterKeyDownload } from "./service"; import { generatePublicKeyFingerprint, requestMasterKeyDownload } from "./service";
@@ -30,32 +31,34 @@
<title>승인을 기다리고 있어요.</title> <title>승인을 기다리고 있어요.</title>
</svelte:head> </svelte:head>
<TitleDiv> <FullscreenDiv>
<div class="space-y-2 break-keep"> <TitleDiv>
<p class="text-3xl font-bold">승인을 기다리고 있어요.</p> <div class="space-y-2 break-keep">
<p> <p class="text-3xl font-bold">승인을 기다리고 있어요.</p>
회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요. <p>
</p> 회원님의 다른 디바이스에서 이 디바이스의 데이터 접근을 승인해야 서비스를 이용할 수 있어요.
</div> </p>
<div class="my-4 space-y-4">
<div>
<IconFingerprint class="mx-auto text-7xl" />
<p class="text-center text-xl font-bold text-primary-500">암호 키 지문</p>
</div> </div>
<p class="rounded-2xl bg-gray-100 p-4 text-center text-2xl font-medium text-gray-800"> <div class="my-4 space-y-4">
{#if !fingerprint} <div>
지문 생성하는 중... <IconFingerprint class="mx-auto text-7xl" />
{:else} <p class="text-center text-xl font-bold text-primary-500">암호 키 지문</p>
{#await fingerprint} </div>
<p class="rounded-2xl bg-gray-100 p-4 text-center text-2xl font-medium text-gray-800">
{#if !fingerprint}
지문 생성하는 중... 지문 생성하는 중...
{:then fingerprint} {:else}
{fingerprint} {#await fingerprint}
{/await} 지문 생성하는 중...
{/if} {:then fingerprint}
</p> {fingerprint}
<p class="text-center"> {/await}
암호 키 지문은 디바이스마다 다르게 생성돼요. <br /> {/if}
지문이 일치하는지 확인 후 승인해 주세요. </p>
</p> <p class="text-center">
</div> 암호 키 지문은 디바이스마다 다르게 생성돼요. <br />
</TitleDiv> 지문이 일치하는지 확인 후 승인해 주세요.
</p>
</div>
</TitleDiv>
</FullscreenDiv>

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

@@ -3,8 +3,8 @@
import { untrack } from "svelte"; import { untrack } from "svelte";
import { get, type Writable } from "svelte/store"; import { get, type Writable } from "svelte/store";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { TopBar } from "$lib/components"; import { EntryButton, FullscreenDiv } from "$lib/components/atoms";
import { EntryButton } from "$lib/components/atoms"; import { TopBar } from "$lib/components/molecules";
import { import {
getFileInfo, getFileInfo,
getCategoryInfo, getCategoryInfo,
@@ -116,8 +116,8 @@
<title>파일</title> <title>파일</title>
</svelte:head> </svelte:head>
<div class="flex h-full flex-col"> <TopBar title={$info?.name} />
<TopBar title={$info?.name} /> <FullscreenDiv>
<div class="space-y-4 pb-4"> <div class="space-y-4 pb-4">
<DownloadStatus status={downloadStatus} /> <DownloadStatus status={downloadStatus} />
{#if $info && viewerType} {#if $info && viewerType}
@@ -160,7 +160,7 @@
</div> </div>
</div> </div>
</div> </div>
</div> </FullscreenDiv>
<AddToCategoryBottomSheet <AddToCategoryBottomSheet
bind:isOpen={isAddToCategoryBottomSheetOpen} bind:isOpen={isAddToCategoryBottomSheetOpen}

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

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { get } from "svelte/store"; import { get } from "svelte/store";
import { TopBar } from "$lib/components"; import { FullscreenDiv } from "$lib/components/atoms";
import { TopBar } from "$lib/components/molecules";
import { fileDownloadStatusStore, isFileDownloading } from "$lib/stores"; import { fileDownloadStatusStore, isFileDownloading } from "$lib/stores";
import File from "./File.svelte"; import File from "./File.svelte";
@@ -19,11 +20,11 @@
<title>진행 중인 다운로드</title> <title>진행 중인 다운로드</title>
</svelte:head> </svelte:head>
<div class="flex flex-col"> <TopBar />
<TopBar /> <FullscreenDiv>
<div class="space-y-2 pb-4"> <div class="space-y-2 pb-4">
{#each downloadingFiles as status} {#each downloadingFiles as status}
<File {status} /> <File {status} />
{/each} {/each}
</div> </div>
</div> </FullscreenDiv>

9
src/routes/(fullscreen)/file/uploads/+page.svelte
View File

@@ -1,6 +1,7 @@
<script lang="ts"> <script lang="ts">
import { get } from "svelte/store"; import { get } from "svelte/store";
import { TopBar } from "$lib/components"; import { FullscreenDiv } from "$lib/components/atoms";
import { TopBar } from "$lib/components/molecules";
import { fileUploadStatusStore, isFileUploading } from "$lib/stores"; import { fileUploadStatusStore, isFileUploading } from "$lib/stores";
import File from "./File.svelte"; import File from "./File.svelte";
@@ -19,11 +20,11 @@
<title>진행 중인 업로드</title> <title>진행 중인 업로드</title>
</svelte:head> </svelte:head>
<div class="flex flex-col"> <TopBar />
<TopBar /> <FullscreenDiv>
<div class="space-y-2 pb-4"> <div class="space-y-2 pb-4">
{#each uploadingFiles as status} {#each uploadingFiles as status}
<File {status} /> <File {status} />
{/each} {/each}
</div> </div>
</div> </FullscreenDiv>

32
src/routes/(fullscreen)/key/export/+page.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import FileSaver from "file-saver"; import FileSaver from "file-saver";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { Button, TextButton, BottomDiv } from "$lib/components/atoms"; import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
import { TitleDiv } from "$lib/components/divs"; import { TitleDiv } from "$lib/components/divs";
import { clientKeyStore } from "$lib/stores"; import { clientKeyStore } from "$lib/stores";
import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte"; import BeforeContinueBottomSheet from "./BeforeContinueBottomSheet.svelte";
@@ -89,21 +89,23 @@
<title>암호 키 생성하기</title> <title>암호 키 생성하기</title>
</svelte:head> </svelte:head>
<TitleDiv icon={IconKey}> <FullscreenDiv>
<div class="space-y-4 break-keep"> <TitleDiv icon={IconKey}>
<p class="text-3xl font-bold">암호 키를 파일로 내보낼까요?</p> <div class="space-y-4 break-keep">
<div class="space-y-2 text-lg text-gray-800"> <p class="text-3xl font-bold">암호 키를 파일로 내보낼까요?</p>
<p> <div class="space-y-2 text-lg text-gray-800">
모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요. <p>
</p> 모든 디바이스의 암호 키가 유실되면, 서버에 저장된 데이터를 영원히 복호화할 수 없게 돼요.
<p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p> </p>
<p>만약의 상황을 위해 암호 키를 파일로 내보낼 수 있어요.</p>
</div>
</div> </div>
</div> </TitleDiv>
</TitleDiv> <BottomDiv class="flex flex-col items-center gap-y-2">
<BottomDiv class="flex flex-col items-center gap-y-2"> <Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button>
<Button onclick={exportClientKeys} class="w-full">암호 키 내보내기</Button> <TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton>
<TextButton onclick={() => (isBeforeContinueModalOpen = true)}>내보내지 않을래요</TextButton> </BottomDiv>
</BottomDiv> </FullscreenDiv>
<BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKeys} /> <BeforeContinueModal bind:isOpen={isBeforeContinueModalOpen} onContinueClick={registerPubKeys} />
<BeforeContinueBottomSheet <BeforeContinueBottomSheet

42
src/routes/(fullscreen)/key/generate/+page.svelte
View File

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { Button, TextButton, BottomDiv } from "$lib/components/atoms"; import { Button, TextButton, BottomDiv, FullscreenDiv } from "$lib/components/atoms";
import { TitleDiv } from "$lib/components/divs"; import { TitleDiv } from "$lib/components/divs";
import { gotoStateful } from "$lib/hooks"; import { gotoStateful } from "$lib/hooks";
import { clientKeyStore } from "$lib/stores"; import { clientKeyStore } from "$lib/stores";
@@ -62,24 +62,26 @@
<title>암호 키 생성하기</title> <title>암호 키 생성하기</title>
</svelte:head> </svelte:head>
<TitleDiv> <FullscreenDiv>
<div class="space-y-2 break-keep"> <TitleDiv>
<p class="text-3xl font-bold">암호 키 생성하기</p> <div class="space-y-2 break-keep">
<p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p> <p class="text-3xl font-bold">암호 키 생성하기</p>
</div> <p>회원님의 디바이스 간의 안전한 데이터 동기화를 위해 암호 키를 생성해야 해요.</p>
<div class="my-4 space-y-4">
<div>
<IconKey class="mx-auto text-7xl" />
<p class="text-center text-xl font-bold text-primary-500">왜 암호 키가 필요한가요?</p>
</div> </div>
<div class="space-y-2"> <div class="my-4 space-y-4">
{#each orders as { title, description }, i} <div>
<Order order={i + 1} isLast={i === orders.length - 1} {title} {description} /> <IconKey class="mx-auto text-7xl" />
{/each} <p class="text-center text-xl font-bold text-primary-500">왜 암호 키가 필요한가요?</p>
</div>
<div class="space-y-2">
{#each orders as { title, description }, i}
<Order order={i + 1} isLast={i === orders.length - 1} {title} {description} />
{/each}
</div>
</div> </div>
</div> </TitleDiv>
</TitleDiv> <BottomDiv class="flex flex-col items-center gap-y-2">
<BottomDiv class="flex flex-col items-center gap-y-2"> <Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button>
<Button onclick={generateKeys} class="w-full">새 암호 키 생성하기</Button> <TextButton>키를 갖고 있어요</TextButton>
<TextButton>키를 갖고 있어요</TextButton> </BottomDiv>
</BottomDiv> </FullscreenDiv>

9
src/routes/(fullscreen)/settings/cache/+page.svelte vendored
View File

@@ -1,7 +1,8 @@
<script lang="ts"> <script lang="ts">
import { onMount } from "svelte"; import { onMount } from "svelte";
import type { Writable } from "svelte/store"; import type { Writable } from "svelte/store";
import { TopBar } from "$lib/components"; import { FullscreenDiv } from "$lib/components/atoms";
import { TopBar } from "$lib/components/molecules";
import type { FileCacheIndex } from "$lib/indexedDB"; import type { FileCacheIndex } from "$lib/indexedDB";
import { getFileCacheIndex } from "$lib/modules/file"; import { getFileCacheIndex } from "$lib/modules/file";
import { getFileInfo, type FileInfo } from "$lib/modules/filesystem"; import { getFileInfo, type FileInfo } from "$lib/modules/filesystem";
@@ -43,8 +44,8 @@
<title>캐시 설정</title> <title>캐시 설정</title>
</svelte:head> </svelte:head>
<div class="flex h-full flex-col"> <TopBar title="캐시" />
<TopBar title="캐시" /> <FullscreenDiv>
{#if fileCache && fileCache.length > 0} {#if fileCache && fileCache.length > 0}
<div class="space-y-4 pb-4"> <div class="space-y-4 pb-4">
<div class="space-y-1 break-keep text-gray-800"> <div class="space-y-1 break-keep text-gray-800">
@@ -71,4 +72,4 @@
</p> </p>
</div> </div>
{/if} {/if}
</div> </FullscreenDiv>

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

@@ -1,7 +1,7 @@
<script lang="ts"> <script lang="ts">
import type { Writable } from "svelte/store"; import type { Writable } from "svelte/store";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { TopBar } from "$lib/components"; import { TopBar } from "$lib/components/molecules";
import { CategoryCreateModal } from "$lib/components/organisms"; import { CategoryCreateModal } from "$lib/components/organisms";
import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem"; import { getCategoryInfo, type CategoryInfo } from "$lib/modules/filesystem";
import Category from "$lib/organisms/Category"; import Category from "$lib/organisms/Category";
@@ -38,29 +38,27 @@
<title>카테고리</title> <title>카테고리</title>
</svelte:head> </svelte:head>
<div class="flex min-h-full flex-col"> {#if data.id !== "root"}
{#if data.id !== "root"} <TopBar title={$info?.name} />
<TopBar title={$info?.name} xPadding /> {/if}
<div class="min-h-full bg-gray-100 pb-[5.5em]">
{#if $info}
<Category
bind:isFileRecursive
info={$info}
onFileClick={({ id }) => goto(`/file/${id}`)}
onFileRemoveClick={async ({ id }) => {
await requestFileRemovalFromCategory(id, data.id as number);
info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
}}
onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
onSubCategoryMenuClick={(subCategory) => {
context.selectedCategory = subCategory;
isCategoryMenuBottomSheetOpen = true;
}}
/>
{/if} {/if}
<div class="flex-grow bg-gray-100 pb-[5.5em]">
{#if $info}
<Category
bind:isFileRecursive
info={$info}
onFileClick={({ id }) => goto(`/file/${id}`)}
onFileRemoveClick={async ({ id }) => {
await requestFileRemovalFromCategory(id, data.id as number);
info = getCategoryInfo(data.id, $masterKeyStore?.get(1)?.key!); // TODO: FIXME
}}
onSubCategoryClick={({ id }) => goto(`/category/${id}`)}
onSubCategoryCreateClick={() => (isCategoryCreateModalOpen = true)}
onSubCategoryMenuClick={(subCategory) => {
context.selectedCategory = subCategory;
isCategoryMenuBottomSheetOpen = true;
}}
/>
{/if}
</div>
</div> </div>
<CategoryCreateModal <CategoryCreateModal

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

@@ -2,8 +2,8 @@
import { onMount } from "svelte"; import { onMount } from "svelte";
import type { Writable } from "svelte/store"; import type { Writable } from "svelte/store";
import { goto } from "$app/navigation"; import { goto } from "$app/navigation";
import { TopBar } from "$lib/components";
import { FloatingButton } from "$lib/components/atoms"; import { FloatingButton } from "$lib/components/atoms";
import { TopBar } from "$lib/components/molecules";
import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem"; import { getDirectoryInfo, type DirectoryInfo } from "$lib/modules/filesystem";
import { masterKeyStore, hmacSecretStore } from "$lib/stores"; import { masterKeyStore, hmacSecretStore } from "$lib/stores";
import DirectoryCreateModal from "./DirectoryCreateModal.svelte"; import DirectoryCreateModal from "./DirectoryCreateModal.svelte";
@@ -85,13 +85,12 @@
<input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" /> <input bind:this={fileInput} onchange={uploadFile} type="file" multiple class="hidden" />
<div class="flex min-h-full flex-col px-4"> <div class="flex h-full flex-col">
{#if data.id !== "root"} {#if data.id !== "root"}
<TopBar title={$info?.name} /> <TopBar title={$info?.name} class="flex-shrink-0" />
{/if} {/if}
{#if $info} {#if $info}
{@const topMargin = data.id === "root" ? "mt-4" : ""} <div class={["flex flex-grow flex-col px-4 pb-4", data.id === "root" && "pt-4"]}>
<div class="mb-4 flex flex-grow flex-col {topMargin}">
<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")} />