@wells-nelson/interactions 0.0.0-stage → 1.0.0

package/dist/account/AccountPanel.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import SignInCard from './SignInCard.svelte';
+	import SignOutCard from './SignOutCard.svelte';
+	import SyncStatusCard from './SyncStatusCard.svelte';
+	import { capitalize, type AccountActions, type CloudStatus, type Nouns } from './types.js';
+
+	/**
+	 * The whole profile page body: "not configured", sign-in, or the signed-in summary with sync
+	 * status and sign-out. Use the cards directly for a different layout.
+	 */
+	let {
+		cloud,
+		account,
+		nouns,
+		appName,
+		returnUrl,
+		pendingName,
+		emailLink = true,
+		signInPitch
+	}: {
+		cloud: CloudStatus;
+		account: AccountActions;
+		nouns: Nouns;
+		appName: string;
+		returnUrl: () => string;
+		/** Display name of a container with pending changes (it may already be deleted). */
+		pendingName: (id: string) => string;
+		emailLink?: boolean;
+		signInPitch?: string;
+	} = $props();
+
+	const pending = $derived(cloud.pendingIds.map((id) => ({ id, name: pendingName(id) })));
+	const pitch = $derived(
+		signInPitch ??
+			`Sign in to sync ${nouns.plural} across your devices and share them with others. ` +
+				`${capitalize(nouns.plural)} you make while signed out stay local-only on this device.`
+	);
+</script>
+
+{#if !cloud.configured}
+	<section class="card section">
+		<h2>Cloud sync isn't set up</h2>
+		<p class="muted">
+			This copy of {appName} runs local-only: every {nouns.singular} stays on this device. Signing in becomes available once
+			Supabase is configured (see the README).
+		</p>
+	</section>
+{:else if !cloud.user || cloud.sessionExpired}
+	<SignInCard {cloud} {account} {returnUrl} {pitch} {emailLink} />
+{:else}
+	<SyncStatusCard {cloud} {account} {nouns} {pending} />
+	<SignOutCard {cloud} {account} {nouns} {pending} />
+{/if}
+
+<style>
+	.section {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		padding: 1rem;
+		margin-bottom: 1rem;
+	}
+	.section p {
+		margin: 0;
+		line-height: 1.5;
+	}
+	h2 {
+		margin: 0;
+		font-size: 1.05rem;
+	}
+</style>

package/dist/account/AccountPanel.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type AccountActions, type CloudStatus, type Nouns } from './types.js';
+type $$ComponentProps = {
+    cloud: CloudStatus;
+    account: AccountActions;
+    nouns: Nouns;
+    appName: string;
+    returnUrl: () => string;
+    /** Display name of a container with pending changes (it may already be deleted). */
+    pendingName: (id: string) => string;
+    emailLink?: boolean;
+    signInPitch?: string;
+};
+declare const AccountPanel: import("svelte").Component<$$ComponentProps, {}, "">;
+type AccountPanel = ReturnType<typeof AccountPanel>;
+export default AccountPanel;

package/dist/account/ContainerEditModal.svelte

@@ -0,0 +1,284 @@
+<script lang="ts">
+	import { Button, ConfirmDialog, Icon, Modal } from '@wells-nelson/displays';
+	import { untrack } from 'svelte';
+	import TextField from '../TextField.svelte';
+	import Toggle from '../Toggle.svelte';
+	import {
+		capitalize,
+		errorText,
+		type CloudStatus,
+		type ContainerLocation,
+		type Member,
+		type MembersApi,
+		type Nouns,
+		type Role
+	} from './types.js';
+
+	/**
+	 * The pencil menu of a container: rename, "open when the app starts", cloud-enabled toggle
+	 * (with a disconnect warning), and delete or leave. A shared cloud container is left rather
+	 * than deleted while other owners remain (without roles every member counts as an owner).
+	 */
+	let {
+		containerId,
+		name: currentName,
+		location,
+		ready = true,
+		role = 'owner',
+		roles = false,
+		cloud,
+		members: api,
+		nouns,
+		signInHref,
+		contentsLabel = 'everything in it',
+		isDefault,
+		ondefaultchange,
+		onrename,
+		onmakecloud,
+		onmakelocal,
+		ondelete,
+		onleave,
+		onclose
+	}: {
+		containerId: string;
+		name: string;
+		/** Undefined once the container is gone (deleted, or moved under a new id); the modal closes. */
+		location: ContainerLocation | undefined;
+		ready?: boolean;
+		role?: Role;
+		roles?: boolean;
+		cloud: CloudStatus;
+		members: Pick<MembersApi, 'fetchMembers'>;
+		nouns: Nouns;
+		signInHref: string;
+		/** What gets deleted along with it, e.g. "all its tasks and notes". */
+		contentsLabel?: string;
+		isDefault: boolean;
+		ondefaultchange: (isDefault: boolean) => void;
+		onrename: (name: string) => void;
+		onmakecloud: () => Promise<unknown>;
+		onmakelocal: () => Promise<unknown>;
+		ondelete: () => Promise<unknown>;
+		onleave: () => Promise<unknown>;
+		onclose: () => void;
+	} = $props();
+
+	const Singular = $derived(capitalize(nouns.singular));
+	const isCloud = $derived(location === 'cloud');
+	const isOwner = $derived(!roles || role === 'owner');
+	const signedIn = $derived(!!cloud.user);
+
+	let open = $state(true);
+	// svelte-ignore state_referenced_locally
+	let name = $state(currentName);
+	let error = $state<string | null>(null);
+	let busy = $state(false);
+
+	function close() {
+		open = false;
+		onclose();
+	}
+
+	$effect(() => {
+		if (ready && !location && !busy) close();
+	});
+
+	function save(e: SubmitEvent) {
+		e.preventDefault();
+		const next = name.trim();
+		if (location && isOwner && next && next !== currentName) onrename(next);
+		close();
+	}
+
+	// ------------------------------------------------ members (decides delete vs. leave)
+	let list = $state<Member[] | null>(null);
+	const others = $derived((list ?? []).filter((m) => m.email !== cloud.email));
+	const otherOwners = $derived(others.filter((m) => !roles || m.role === 'owner').length);
+
+	$effect(() => {
+		if (!isCloud || !signedIn || !cloud.online) return;
+		// Only the conditions above should re-run this, not state the API happens to read.
+		untrack(() =>
+			api
+				.fetchMembers(containerId)
+				.then((m) => (list = m))
+				.catch(() => (list = null))
+		);
+	});
+
+	// ------------------------------------------------ cloud / local
+	let confirmLocal = $state(false);
+	let cloudToggle = $state(false);
+	// Mirror the real state whenever no swap is pending (cancelled or failed swaps snap back).
+	$effect(() => {
+		if (!confirmLocal && !busy) cloudToggle = isCloud;
+	});
+
+	async function run(fn: () => Promise<unknown>) {
+		busy = true;
+		error = null;
+		try {
+			await fn();
+		} catch (err) {
+			error = errorText(err);
+		} finally {
+			busy = false;
+		}
+	}
+
+	const localMessage = $derived(
+		`This disconnects “${currentName}” from the copies on your other devices` +
+			(others.length > 0 ? ' and from everyone it’s shared with' : '') +
+			'. From then on, changes made here won’t reach them and theirs won’t reach you.\n\n' +
+			(others.length > 0
+				? `Because it’s shared, the cloud ${nouns.singular} stays for the others; you get a separate local-only copy and leave it.`
+				: 'The cloud copy is deleted, so it also disappears from your other devices. This device keeps it.')
+	);
+
+	// ------------------------------------------------ delete / leave
+	let confirmDelete = $state(false);
+	let confirmLeave = $state(false);
+	/** Non-owners can only leave; owners leave instead of deleting while other owners remain. */
+	const leaveOnly = $derived(isCloud && (!isOwner || otherOwners > 0));
+
+	const doDelete = () =>
+		run(async () => {
+			await ondelete();
+			close();
+		});
+	const doLeave = () =>
+		run(async () => {
+			await onleave();
+			close();
+		});
+</script>
+
+<Modal bind:open title={`Edit ${nouns.singular}`} {onclose}>
+	<form id={`edit-${containerId}`} onsubmit={save}>
+		{#if isOwner}
+			<TextField label={`${Singular} name`} bind:value={name} enterkeyhint="done" />
+		{:else}
+			<p class="muted small">
+				You're {role === 'editor' ? 'an editor' : 'a viewer'} on “{currentName}”. Only owners can rename it.
+			</p>
+		{/if}
+	</form>
+
+	<Toggle
+		label={`Open this ${nouns.singular} when the app starts`}
+		checked={isDefault}
+		onchange={(on) => ondefaultchange(on)}
+	/>
+
+	<section class="group">
+		<h3>Sync</h3>
+		{#if signedIn}
+			<Toggle
+				label="Cloud-enabled"
+				bind:checked={cloudToggle}
+				disabled={busy}
+				onchange={(on) => (on ? run(onmakecloud) : (confirmLocal = true))}
+			/>
+			<p class="muted small">
+				{#if isCloud}
+					Synced to your account{cloud.hasPending(containerId) ? ' — changes are waiting to upload' : ''}.
+				{:else}
+					Only on this device. Turn on to sync{cloud.online ? '' : ' (uploads once you are back online)'}.
+				{/if}
+			</p>
+		{:else}
+			<p class="muted small">
+				<Icon name="wifi-off" size={16} /> Local-only. <a href={signInHref}>Sign in</a> to sync and share {nouns.plural}.
+			</p>
+		{/if}
+	</section>
+
+	{#if error}<p class="error">{error}</p>{/if}
+
+	{#if leaveOnly}
+		<Button
+			variant="ghost"
+			onclick={() => (confirmLeave = true)}
+			disabled={busy || !cloud.online}
+			style="align-self:flex-start;color:var(--danger)"
+		>
+			Leave {nouns.singular}
+		</Button>
+		{#if isOwner}
+			<p class="muted small">
+				{roles ? 'Other owners remain' : 'It’s shared'}, so the {nouns.singular} stays for them.
+			</p>
+		{/if}
+	{:else}
+		<Button
+			variant="ghost"
+			icon="trash"
+			onclick={() => (confirmDelete = true)}
+			disabled={busy || (isCloud && !cloud.online)}
+			style="align-self:flex-start;color:var(--danger)"
+		>
+			Delete {nouns.singular}
+		</Button>
+	{/if}
+	{#if isCloud && !cloud.online}
+		<p class="muted small">Reconnect to delete or leave a cloud-enabled {nouns.singular}.</p>
+	{/if}
+
+	{#snippet footer()}
+		<Button onclick={close}>Cancel</Button>
+		<Button variant="primary" type="submit" form={`edit-${containerId}`}>Save</Button>
+	{/snippet}
+</Modal>
+
+<ConfirmDialog
+	bind:open={confirmLocal}
+	title={`Disconnect this ${nouns.singular}?`}
+	message={localMessage}
+	confirmLabel="Make local-only"
+	danger
+	onconfirm={() => run(onmakelocal)}
+/>
+
+<ConfirmDialog
+	bind:open={confirmDelete}
+	title={`Delete this ${nouns.singular}?`}
+	message={`“${currentName}” and ${contentsLabel} will be permanently deleted${others.length ? ' for everyone it is shared with' : ''}.`}
+	confirmLabel={`Delete ${nouns.singular}`}
+	danger
+	onconfirm={doDelete}
+/>
+
+<ConfirmDialog
+	bind:open={confirmLeave}
+	title={`Leave this ${nouns.singular}?`}
+	message={`“${currentName}” is shared, so it stays for the others. It will be removed from your account and this device.` +
+		(roles ? ' Ask an owner to share it again if you need it back.' : '')}
+	confirmLabel={`Leave ${nouns.singular}`}
+	danger
+	onconfirm={doLeave}
+/>
+
+<style>
+	.group {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+	}
+	h3 {
+		margin: 0;
+		font-size: 0.95rem;
+	}
+	.small {
+		margin: 0;
+		font-size: 0.9rem;
+		line-height: 1.45;
+	}
+	.small :global(.icon) {
+		display: inline;
+		vertical-align: -3px;
+	}
+	.error {
+		margin: 0;
+		color: var(--danger);
+	}
+</style>

package/dist/account/ContainerEditModal.svelte.d.ts

@@ -0,0 +1,27 @@
+import { type CloudStatus, type ContainerLocation, type MembersApi, type Nouns, type Role } from './types.js';
+type $$ComponentProps = {
+    containerId: string;
+    name: string;
+    /** Undefined once the container is gone (deleted, or moved under a new id); the modal closes. */
+    location: ContainerLocation | undefined;
+    ready?: boolean;
+    role?: Role;
+    roles?: boolean;
+    cloud: CloudStatus;
+    members: Pick<MembersApi, 'fetchMembers'>;
+    nouns: Nouns;
+    signInHref: string;
+    /** What gets deleted along with it, e.g. "all its tasks and notes". */
+    contentsLabel?: string;
+    isDefault: boolean;
+    ondefaultchange: (isDefault: boolean) => void;
+    onrename: (name: string) => void;
+    onmakecloud: () => Promise<unknown>;
+    onmakelocal: () => Promise<unknown>;
+    ondelete: () => Promise<unknown>;
+    onleave: () => Promise<unknown>;
+    onclose: () => void;
+};
+declare const ContainerEditModal: import("svelte").Component<$$ComponentProps, {}, "">;
+type ContainerEditModal = ReturnType<typeof ContainerEditModal>;
+export default ContainerEditModal;

package/dist/account/LocalItemsPrompt.svelte

@@ -0,0 +1,83 @@
+<script lang="ts">
+	import { Button, Modal } from '@wells-nelson/displays';
+	import Checkbox from '../Checkbox.svelte';
+	import { errorText, type Nouns } from './types.js';
+
+	/**
+	 * Shown after sign-in for local-only containers that were never offered before. Whatever isn't
+	 * checked is never asked about again (the container's edit menu can still switch it).
+	 */
+	let {
+		items,
+		nouns,
+		onmakecloud,
+		onprompted
+	}: {
+		items: { id: string; name: string }[];
+		nouns: Nouns;
+		/** Make one container cloud-enabled. */
+		onmakecloud: (id: string) => Promise<unknown>;
+		/** Remember these were offered (checked or not) so they aren't asked about again. */
+		onprompted: (ids: string[]) => void;
+	} = $props();
+
+	let open = $state(true);
+	let selected = $state<Record<string, boolean>>({});
+	let busy = $state(false);
+	let error = $state<string | null>(null);
+
+	async function submit() {
+		busy = true;
+		error = null;
+		try {
+			for (const item of items) if (selected[item.id]) await onmakecloud(item.id);
+			onprompted(items.map((i) => i.id));
+			open = false;
+		} catch (err) {
+			error = errorText(err);
+		} finally {
+			busy = false;
+		}
+	}
+
+	function skip() {
+		onprompted(items.map((i) => i.id));
+		open = false;
+	}
+</script>
+
+<Modal bind:open title={`Sync your local ${nouns.plural}?`} onclose={skip}>
+	<p class="intro">
+		These {nouns.plural} are only on this device. Check any you want cloud-enabled so they sync across your devices and
+		can be shared.
+	</p>
+	<div class="items">
+		{#each items as item (item.id)}
+			<!-- Unchecked rows have no entry; bind:checked can't take undefined for a prop with a fallback. -->
+			<Checkbox
+				label={item.name}
+				bind:checked={() => selected[item.id] ?? false, (on) => (selected[item.id] = on)}
+			/>
+		{/each}
+	</div>
+	{#if error}<p class="error">{error}</p>{/if}
+	{#snippet footer()}
+		<Button onclick={skip} disabled={busy}>Not now</Button>
+		<Button variant="primary" onclick={submit} disabled={busy}>Make selected cloud-enabled</Button>
+	{/snippet}
+</Modal>
+
+<style>
+	.intro {
+		margin: 0;
+		line-height: 1.5;
+	}
+	.items {
+		display: flex;
+		flex-direction: column;
+	}
+	.error {
+		color: var(--danger);
+		margin: 0;
+	}
+</style>

package/dist/account/LocalItemsPrompt.svelte.d.ts

@@ -0,0 +1,15 @@
+import { type Nouns } from './types.js';
+type $$ComponentProps = {
+    items: {
+        id: string;
+        name: string;
+    }[];
+    nouns: Nouns;
+    /** Make one container cloud-enabled. */
+    onmakecloud: (id: string) => Promise<unknown>;
+    /** Remember these were offered (checked or not) so they aren't asked about again. */
+    onprompted: (ids: string[]) => void;
+};
+declare const LocalItemsPrompt: import("svelte").Component<$$ComponentProps, {}, "">;
+type LocalItemsPrompt = ReturnType<typeof LocalItemsPrompt>;
+export default LocalItemsPrompt;