Popups

Update Log

Open a README update log in a dialog with a scrollable version index. This example uses Jhana UI's actual README, including pending changes and maintenance entries. The dialog module and README load on the first click; subsequent clicks reuse the imported modules.

<script lang="ts">
	import { onMount } from 'svelte';

	let ready = $state(false);
	onMount(() => {
		ready = true;
	});

	async function open() {
		const [{ openUpdateLog }, { default: readme }] = await Promise.all([
			import('@leon8ix/jhana-ui/popup/update-log'),
			import('../../../../README.md?raw'),
		]);
		openUpdateLog(readme);
	}
</script>

<button class="btn" type="button" disabled={!ready} onclick={open}>Open Update Log</button>

Setup and README format

Mount PopupRoot once in your app layout, as shown in the popup setup. Import your repository's README with ?raw and pass it to openUpdateLog(readme); adjust the relative import path to your file.

The dialog reads ## Versions up to the next level-one or level-two heading. Each ### heading becomes an entry, in README order. It displays dash bullets, nested lists indented with four spaces or tabs, and inline backtick code. Other Markdown is displayed as plain text within bullets; this is not a general Markdown renderer.

Click a version to scroll to its changes, or scroll the changes to follow along in the index. Repeated calls keep the existing dialog open. The function returns the standard Popup instance, which can also be closed with popup.reject('cancel').

To replace the local dialogs in Infinipose and Cover Designer, import this helper in each app's existing update-log wrapper and pass its README. Keep the existing dynamic import of that wrapper so the dialog and README load on demand. Existing callers can keep calling the wrapper without arguments.