refactor reusable modal component

src/lib/components/CommandPalette/Branch.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import BaseDialog from './BaseDialog.svelte';
+	import Modal from '../Modal.svelte';
 </script>
 
-<BaseDialog on:close>
+<Modal on:close>
 	<h1>Branch</h1>
-</BaseDialog>
+</Modal>

src/lib/components/CommandPalette/CmdK.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import BaseDialog from './BaseDialog.svelte';
+	import Modal from '../Modal.svelte';
 	import { currentProject } from '$lib/current_project';
 	import { getContext } from 'svelte';
 	import type { Readable } from 'svelte/store';
@@ -168,7 +168,7 @@
 	});
 </script>
 
-<BaseDialog on:close>
+<Modal on:close>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div class="flex h-[640px] w-[640px] flex-col rounded text-zinc-400" on:click|stopPropagation>
 		<!-- Search input area -->
@@ -245,4 +245,4 @@
 			{/each}
 		</div>
 	</div>
-</BaseDialog>
+</Modal>

src/lib/components/CommandPalette/Commit.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import BaseDialog from './BaseDialog.svelte';
+	import Modal from '../Modal.svelte';
 	import { shortPath } from '$lib/paths';
 	import { invoke } from '@tauri-apps/api';
 	import { currentProject } from '$lib/current_project';
@@ -55,7 +55,7 @@
 	}
 </script>
 
-<BaseDialog on:close>
+<Modal on:close>
 	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div class="flex flex-col rounded text-zinc-400" on:click|stopPropagation>
 		<div class="mb-4 w-full border-b border-zinc-700 p-4 text-lg text-white">
@@ -111,4 +111,4 @@
 			{/if}
 		</div>
 	</div>
-</BaseDialog>
+</Modal>

src/lib/components/CommandPalette/Replay.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import BaseDialog from './BaseDialog.svelte';
+	import Modal from '../Modal.svelte';
 	import { format, subDays, subWeeks, subMonths, startOfISOWeek, startOfMonth } from 'date-fns';
 	import { onDestroy, onMount } from 'svelte';
 	import tinykeys from 'tinykeys';
@@ -78,7 +78,7 @@
 	});
 </script>
 
-<BaseDialog on:close>
+<Modal on:close>
 	<div class="mx-2 cursor-default select-none">
 		<p class="mx-2 cursor-default select-none py-2 text-sm font-semibold text-zinc-300/80">
 			Replay working history from...
@@ -101,4 +101,4 @@
 			{/each}
 		</ul>
 	</div>
-</BaseDialog>
+</Modal>

src/lib/components/index.ts

@@ -3,3 +3,4 @@ export { default as Login } from './Login.svelte';
 export { default as Breadcrumbs } from './Breadcrumbs.svelte';
 export { default as CodeViewer } from './CodeViewer';
 export { default as CommandPalette } from './CommandPalette';
+export { default as Modal } from './Modal.svelte';