share modal

plugin/src/ui/SharedNoteSuccessComponent.svelte

@@ -1,5 +1,68 @@
 <script lang="ts">
 	export let url: string;
+	export let expireDays: number;
+
+	let buttonText = "Copy";
+	let buttonTextTimeout: string | number | NodeJS.Timeout;
+
+	function onCopy() {
+		clearTimeout(buttonTextTimeout);
+		navigator.clipboard.writeText(url);
+		buttonText = "Copied";
+
+		buttonTextTimeout = setTimeout(() => {
+			buttonText = "copy";
+		}, 1500);
+	}
 </script>
 
-<input type="text" bind:value={url} />
+<div class="share-plugin-modal-container">
+	<p id="copytext">
+		Your note has been encrypted and stored in the cloud. Only people with
+		this share link can decrypt and read this file.
+	</p>
+	<div id="url">
+		<input disabled id="url-input" type="text" bind:value={url} />
+		<button
+			id="url-copy-button"
+			aria-label="Copy link to clipboard"
+			on:click={onCopy}>{buttonText}</button
+		>
+	</div>
+	<p id="subtext">🔐 End-to-end encrypted • Expires in {expireDays} days</p>
+</div>
+
+<style scoped>
+	.share-plugin-modal-container {
+		max-width: 560px;
+	}
+
+	#copytext {
+		width: 100%;
+	}
+
+	#url {
+		width: 100%;
+		display: flex;
+		gap: 0.5em;
+	}
+
+	#url-input {
+		flex-grow: 1;
+		text-decoration-line: underline;
+		cursor: pointer !important;
+	}
+
+	#url-copy-button {
+		margin: 0px;
+		width: 6em;
+	}
+
+	#subtext {
+		/* container */
+		margin: 0.5em 1px;
+		/* text styling */
+		color: var(--text-muted);
+		font-size: 0.9em;
+	}
+</style>

plugin/src/ui/SharedNoteSuccessModal.ts

@@ -22,6 +22,7 @@ export class SharedNoteSuccessModal extends Modal {
 			target: this.contentEl,
 			props: {
 				url: this.url,
+				expireDays: 0,
 			},
 		});
 	}