feat: clarify ambiguous ux

src/Clipboard.elm

@@ -1,4 +1,4 @@
 port module Clipboard exposing (copyToClipboard)
 
 
-port copyToClipboard : String -> Cmd msg
+port copyToClipboard : ( String, String ) -> Cmd msg

src/Main.elm

@@ -97,7 +97,7 @@ type Msg
     | GotMesh (Result Http.Error Object3d)
     | GotTexture (Result WebGL.Texture.Error (Material.Texture Color.Color))
     | Rotate Time.Posix
-    | Copy String
+    | Copy String String
     | Key String
     | Scroll String
 
@@ -150,8 +150,8 @@ update msg model =
         Rotate time ->
             wrap { model | angle = canonicalize (model.angle + 2 * (2 + sin (toFloat (Time.posixToMillis time) / 1000))) }
 
-        Copy text ->
+        Copy label text ->
-            ( model, copyToClipboard text )
+            ( model, copyToClipboard ( label, text ) )
 
         Key key ->
             ( { model | last = key }, Cmd.none )
@@ -359,16 +359,20 @@ view model =
                             ++ heading
                         )
                         (column
-                            [ spacing 20
+                            [ spacing 35
                             ]
                             [ text "MacGregor House"
-                            , row
+                            , column [ spacing 15 ]
-                                [ spacing 20
+                                [ row
-                                ]
+                                    [ spacing 15
-                                [ btn "↓" (Scroll "one")
+                                    ]
-                                , linkBtn "Events" "https://calendar.google.com/calendar/embed?src=c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com&ctz=America%2FNew_York"
+                                    [ linkBtn "See events" "https://calendar.google.com/calendar/embed?src=c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com&ctz=America%2FNew_York"
-                                , linkBtn "Space" "https://forms.gle/KxFAG65TQuPxdYak8"
+                                    , linkBtn "Reserve space" "https://forms.gle/KxFAG65TQuPxdYak8"
-                                , btn "iCal" (Copy "https://calendar.google.com/calendar/ical/c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com/public/basic.ics")
+                                    ]
+                                , row [ spacing 15 ]
+                                    [ btn "↓" (Scroll "one")
+                                    , btn "Copy iCal link" (Copy "iCal link" "https://calendar.google.com/calendar/ical/c_c9fb13003264d5becb74cf9ba42a087d8a4a180d927441994458a07ac146eb88%40group.calendar.google.com/public/basic.ics")
+                                    ]
                                 ]
                             ]
                         )

src/index.html

@@ -19,13 +19,16 @@
         flags: [window.innerWidth, window.innerHeight],
       });
 
-      app.ports.copyToClipboard.subscribe((text) => {
+      app.ports.copyToClipboard.subscribe((tuple) => {
-        var textArea = document.createElement("textarea");
+        let label = tuple[0];
+        let text = tuple[1];
+        let textArea = document.createElement("textarea");
         textArea.value = text;
         document.body.appendChild(textArea);
         textArea.select();
         document.execCommand("copy");
         document.body.removeChild(textArea);
+        alert(`Copied ${label} to clipboard`);
       });
 
       app.ports.scrollTo.subscribe((id) => {