From 58ab69df91726917fdbb4be0d6449d40a69e3469 Mon Sep 17 00:00:00 2001
From: haliphax <haliphax@gmail.com>
Date: Wed, 27 Mar 2024 15:43:50 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20share=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/front-end/scripts/views/story/actions.vue | 16 ++++++++++++++++
 src/front-end/styles/index.less               |  4 ++++
 2 files changed, 20 insertions(+)

diff --git a/src/front-end/scripts/views/story/actions.vue b/src/front-end/scripts/views/story/actions.vue
index 935e2eb..10c3712 100644
--- a/src/front-end/scripts/views/story/actions.vue
+++ b/src/front-end/scripts/views/story/actions.vue
@@ -3,6 +3,10 @@ import { defineComponent } from "vue";
 
 const Actions = defineComponent({
 	methods: {
+		async copyUrl() {
+			await window.navigator.clipboard.writeText(window.location.href);
+			alert("The room URL has been copied to your clipboard!");
+		},
 		reveal() {
 			if (
 				this.$store.state.story.story?.owner !== this.$store.state.session.id &&
@@ -21,6 +25,12 @@ export default Actions;
 
 <template>
 	<ul class="x">
+		<li>
+			<button @click="copyUrl">
+				<span aria-hidden="true">📋</span>
+				Share
+			</button>
+		</li>
 		<li>
 			<button :disabled="$store.state.story.story?.revealed" @click="reveal">
 				<span aria-hidden="true">👀</span>
@@ -29,3 +39,9 @@ export default Actions;
 		</li>
 	</ul>
 </template>
+
+<style lang="less" scoped>
+button {
+	margin-right: var(--space-m);
+}
+</style>
diff --git a/src/front-end/styles/index.less b/src/front-end/styles/index.less
index 38b0cee..3a807fe 100644
--- a/src/front-end/styles/index.less
+++ b/src/front-end/styles/index.less
@@ -175,6 +175,10 @@ legend {
 		list-style-position: inside;
 		margin: 0;
 		padding: 0;
+
+		& li {
+			display: inline-block;
+		}
 	}
 }