Skip to content

Commit 5064016

Browse files
Keshav-writes-codeKeshav-writes-code
committed
perf(app): make dialog elements get removed from dom when not visible
1 parent 2043b36 commit 5064016

1 file changed

Lines changed: 129 additions & 123 deletions

File tree

  • apps/app/src/components/general/workspace_selector

‎apps/app/src/components/general/workspace_selector/index.svelte‎

Lines changed: 129 additions & 123 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@
2121
user_activity,
2222
update_workspace,
2323
} from './operations.svelte';
24+
import { fade } from 'svelte/transition';
2425
2526
onMount(async () => {
2627
const raw = (await user_activity.get<Workspace[]>('recent_paths')) ?? [];
@@ -41,138 +42,143 @@
4142
});
4243
</script>
4344

44-
<dialog open={workspace_picker_dialog_open_state.data} class="modal z-11">
45-
<div
46-
class="
45+
{#if workspace_picker_dialog_open_state.data}
46+
<dialog open={workspace_picker_dialog_open_state.data} class="modal z-11">
47+
<div
48+
out:fade
49+
class="
4750
{current_platform_type == 'desktop' && ' h-85% w-80% lt-sm:flex-col'}
4851
{current_platform_type == 'mobile' && 'size-100% lt-sm:flex-col-reverse '}
4952
modal-box p-0 flex max-w-350 b-1 b-[color-mix(in_srgb,var(--color-base-content)_32%,black)]"
50-
>
51-
<div class="min-w-70 bg-base-content/10">
52-
{#if recent_workspaces.data.length}
53-
<ul
54-
class="w-full bg-transparent gap-2 menu bg-base-200 rounded-box w-56"
55-
>
56-
<button
57-
onclick={async () => {
58-
await user_activity.clear();
59-
recent_workspaces.data = [];
60-
}}
61-
class="btn btn-square btn-ghost color-gray"
62-
aria-label="Delete All Recent folders"
53+
>
54+
<div class="min-w-70 bg-base-content/10">
55+
{#if recent_workspaces.data.length}
56+
<ul
57+
class="w-full bg-transparent gap-2 menu bg-base-200 rounded-box w-56"
6358
>
64-
<div class=" i-tabler:trash-filled size-4"></div>
65-
</button>
66-
{#each recent_workspaces.data as { path, document_top_tree_uri }}
67-
{@const path_parts = get_relative_path_parts(
68-
path,
69-
current_platform == 'android'
70-
? 'content://com.android.externalstorage.documents/tree/primary%3A'
71-
: ''
72-
)}
73-
<li class="w-full">
74-
<button
75-
onclick={async () => {
76-
await update_workspace(workspace_root_path.data?.path, {
77-
path,
78-
document_top_tree_uri,
79-
last_filenode_path: opened_filenode.data?.path,
80-
});
81-
}}
82-
class="
59+
<button
60+
onclick={async () => {
61+
await user_activity.clear();
62+
recent_workspaces.data = [];
63+
}}
64+
class="btn btn-square btn-ghost color-gray"
65+
aria-label="Delete All Recent folders"
66+
>
67+
<div class=" i-tabler:trash-filled size-4"></div>
68+
</button>
69+
{#each recent_workspaces.data as { path, document_top_tree_uri }}
70+
{@const path_parts = get_relative_path_parts(
71+
path,
72+
current_platform == 'android'
73+
? 'content://com.android.externalstorage.documents/tree/primary%3A'
74+
: ''
75+
)}
76+
<li class="w-full">
77+
<button
78+
onclick={async () => {
79+
await update_workspace(workspace_root_path.data?.path, {
80+
path,
81+
document_top_tree_uri,
82+
last_filenode_path: opened_filenode.data?.path,
83+
});
84+
}}
85+
class="
8386
{workspace_root_path.data?.path == path && 'bg-base-100'}
8487
flex w-full gap-0 flex-col items-baseline"
85-
>
86-
<p class="text-sm text-base-content/80">
87-
{path_parts.slice(-1)[0]}
88-
</p>
89-
<p
90-
class="text-xs text-ellipsis overflow-hidden whitespace-nowrap min-w-0 w-full text-base-content/60"
9188
>
92-
{path_parts.join('/')}
93-
</p>
94-
</button>
95-
</li>
96-
{/each}
97-
</ul>
98-
{:else if current_platform_type == 'desktop'}
99-
<div
100-
class="color-purple/60 i-tabler:folder-heart size-15 mx-auto mt-20"
101-
></div>
102-
<p class="text-base-content/40 text-center mt-2 px-13">
103-
Recent Folders will show up here
104-
</p>
105-
{/if}
106-
</div>
107-
<div
108-
class="
89+
<p class="text-sm text-base-content/80">
90+
{path_parts.slice(-1)[0]}
91+
</p>
92+
<p
93+
class="text-xs text-ellipsis overflow-hidden whitespace-nowrap min-w-0 w-full text-base-content/60"
94+
>
95+
{path_parts.join('/')}
96+
</p>
97+
</button>
98+
</li>
99+
{/each}
100+
</ul>
101+
{:else if current_platform_type == 'desktop'}
102+
<div
103+
class="color-purple/60 i-tabler:folder-heart size-15 mx-auto mt-20"
104+
></div>
105+
<p class="text-base-content/40 text-center mt-2 px-13">
106+
Recent Folders will show up here
107+
</p>
108+
{/if}
109+
</div>
110+
<div
111+
class="
109112
{current_platform_type == 'desktop' && 'px-10'}
110113
{current_platform_type == 'mobile' && 'px-3'}
111114
grow pt-14 flex flex-col"
112-
>
113-
<div class="w-full flex flex-col items-center">
114-
<img alt="logo" class="size-30" src="logo_500.png" />
115-
<p class="font-[Recoleta] leading-normal mt-3 capitalize text-4xl">
116-
{__APP_NAME__}
117-
</p>
118-
<p class="text-base-content/60">Version {__APP_VERSION__}</p>
119-
</div>
120-
<div class="w-full flex justify-between mt-20 b-b-neutral/30 pb-3 b-b-1">
121-
{#if current_platform_type == 'desktop'}
122-
<div>
123-
<p class="leading-relaxed">Open Folder as Vault</p>
124-
<p class="text-sm text-base-content/60">
125-
Choose an existing folder for Markdown Files
126-
</p>
127-
</div>
128-
<button
129-
class="btn btn-primary w-30"
130-
onclick={async () => {
131-
const { path, document_top_tree_uri } =
132-
await show_folder_picker();
133-
await update_workspace(workspace_root_path.data?.path, {
134-
path,
135-
document_top_tree_uri,
136-
last_filenode_path: opened_filenode.data?.path,
137-
});
138-
}}>Open</button
139-
>
140-
{:else if current_platform_type == 'mobile'}
141-
<ul class="menu menu-xl w-full rounded-box">
142-
<li>
143-
<button
144-
class="grid grid-cols-[auto_auto_1fr]"
145-
onclick={async () => {
146-
const { path, document_top_tree_uri } =
147-
await show_folder_picker();
148-
await update_workspace(workspace_root_path.data?.path, {
149-
path,
150-
document_top_tree_uri,
151-
last_filenode_path: opened_filenode.data?.path,
152-
});
153-
}}
154-
>
155-
<div class="size-6 i-tabler:folder-open"></div>
156-
Open folder as vault
157-
<div
158-
class="i-tabler:chevron-right size-6 justify-self-end"
159-
></div>
160-
</button>
161-
</li>
162-
</ul>
163-
{/if}
115+
>
116+
<div class="w-full flex flex-col items-center">
117+
<img alt="logo" class="size-30" src="logo_500.png" />
118+
<p class="font-[Recoleta] leading-normal mt-3 capitalize text-4xl">
119+
{__APP_NAME__}
120+
</p>
121+
<p class="text-base-content/60">Version {__APP_VERSION__}</p>
122+
</div>
123+
<div
124+
class="w-full flex justify-between mt-20 b-b-neutral/30 pb-3 b-b-1"
125+
>
126+
{#if current_platform_type == 'desktop'}
127+
<div>
128+
<p class="leading-relaxed">Open Folder as Vault</p>
129+
<p class="text-sm text-base-content/60">
130+
Choose an existing folder for Markdown Files
131+
</p>
132+
</div>
133+
<button
134+
class="btn btn-primary w-30"
135+
onclick={async () => {
136+
const { path, document_top_tree_uri } =
137+
await show_folder_picker();
138+
await update_workspace(workspace_root_path.data?.path, {
139+
path,
140+
document_top_tree_uri,
141+
last_filenode_path: opened_filenode.data?.path,
142+
});
143+
}}>Open</button
144+
>
145+
{:else if current_platform_type == 'mobile'}
146+
<ul class="menu menu-xl w-full rounded-box">
147+
<li>
148+
<button
149+
class="grid grid-cols-[auto_auto_1fr]"
150+
onclick={async () => {
151+
const { path, document_top_tree_uri } =
152+
await show_folder_picker();
153+
await update_workspace(workspace_root_path.data?.path, {
154+
path,
155+
document_top_tree_uri,
156+
last_filenode_path: opened_filenode.data?.path,
157+
});
158+
}}
159+
>
160+
<div class="size-6 i-tabler:folder-open"></div>
161+
Open folder as vault
162+
<div
163+
class="i-tabler:chevron-right size-6 justify-self-end"
164+
></div>
165+
</button>
166+
</li>
167+
</ul>
168+
{/if}
169+
</div>
164170
</div>
165-
</div>
166-
<form method="dialog">
167-
<button
168-
class="btn btn-sm btn-circle btn-ghost absolute
171+
<form method="dialog">
172+
<button
173+
class="btn btn-sm btn-circle btn-ghost absolute
169174
{current_platform_type == 'mobile'
170-
? 'top-12 right-4'
171-
: 'top-2 right-2'} "
172-
onclick={() => (workspace_picker_dialog_open_state.data = false)}
173-
>
174-
✕
175-
</button>
176-
</form>
177-
</div>
178-
</dialog>
175+
? 'top-12 right-4'
176+
: 'top-2 right-2'} "
177+
onclick={() => (workspace_picker_dialog_open_state.data = false)}
178+
>
179+
✕
180+
</button>
181+
</form>
182+
</div>
183+
</dialog>
184+
{/if}

0 commit comments

Comments
 (0)