Add DownloadModal with click to copy

Add a new download button that appear under a namespace perspective.
Clicking this button will launch a modal that has a "click to copy"
functionality.

* Copy on click is built with a WebComponent (`CopyOnClick.js`) rendered
  from Elm via a new `CopyField` module, which includes a new clipboard `Icon`.
* The perspective in the sidebar is now rendered via `Sidebar.header`
  and `Sidebar.headerItem` to include proper padding and a bottom divider.

Author: hojberg

src/App.elm

@@ -9,7 +9,7 @@ import Env exposing (AppContext(..), Env, OperatingSystem(..))
 import Finder
 import Finder.SearchOptions as SearchOptions
 import FullyQualifiedName as FQN exposing (FQN)
-import Html exposing (Html, a, div, h1, h2, h3, header, nav, p, section, span, strong, text)
+import Html exposing (Html, a, div, h1, h2, h3, nav, p, section, span, strong, text)
 import Html.Attributes exposing (class, classList, href, id, rel, target, title)
 import Html.Events exposing (onClick)
 import Http
@@ -26,6 +26,7 @@ import UI.AppHeader as AppHeader
 import UI.Banner as Banner
 import UI.Button as Button
 import UI.Click as Click exposing (Click(..))
+import UI.CopyField as CopyField
 import UI.Icon as Icon
 import UI.Modal as Modal
 import UI.Sidebar as Sidebar
@@ -46,6 +47,7 @@ type Modal
     | HelpModal
     | ReportBugModal
     | PublishModal
+    | DownloadModal FQN
 
 
 type alias Model =
@@ -498,8 +500,8 @@ viewAppHeader model =
         }
 
 
-viewPerspective : Env -> Html Msg
-viewPerspective env =
+viewSidebarHeader : Env -> Html Msg
+viewSidebarHeader env =
     case env.perspective of
         Codebase _ ->
             UI.nothing
@@ -512,11 +514,27 @@ viewPerspective env =
                 -- thats quite involved...
                 isOverflowing =
                     fqn |> FQN.toString |> String.length |> (\l -> l > 20)
+
+                download =
+                    case env.appContext of
+                        UnisonShare ->
+                            Button.iconThenLabel (ShowModal (DownloadModal fqn)) Icon.download "Download latest version"
+                                |> Button.small
+                                |> Button.view
+                                |> List.singleton
+                                |> Sidebar.headerItem []
+
+                        Ucm ->
+                            UI.nothing
             in
-            header
-                [ classList [ ( "perspective", True ), ( "is-overflowing", isOverflowing ) ] ]
-                [ UI.namespaceSlug
-                , h2 [ class "namespace" ] [ FQN.view fqn ]
+            Sidebar.header
+                [ Sidebar.headerItem
+                    [ classList [ ( "is-overflowing", isOverflowing ) ] ]
+                    [ UI.namespaceSlug
+                    , h2 [ class "namespace" ] [ FQN.view fqn ]
+                    ]
+                , download
+                , UI.divider
                 ]
 
 
@@ -587,7 +605,7 @@ viewMainSidebar model =
     Sidebar.view
         [ viewMainSidebarCollapseButton model
         , div [ class "expanded-content" ]
-            [ viewPerspective model.env
+            [ viewSidebarHeader model.env
             , div [ class "sidebar-scroll-area" ]
                 [ sidebarContent
                 , Sidebar.section
@@ -621,6 +639,33 @@ viewMainSidebar model =
         ]
 
 
+viewDownloadModal : FQN -> Html Msg
+viewDownloadModal fqn =
+    let
+        prettyName =
+            FQN.toString fqn
+
+        unqualified =
+            FQN.unqualifiedName fqn
+
+        pullCommand =
+            "pull git@github.com:unisonweb/share.git:." ++ prettyName ++ " ." ++ unqualified
+
+        content =
+            Modal.Content
+                (section
+                    []
+                    [ p [] [ text "Download ", UI.bold prettyName, text " by pulling the namespace from Unison Share into a namespace in your local codebase:" ]
+                    , CopyField.copyField (\_ -> CloseModal) pullCommand |> CopyField.withPrefix ".>" |> CopyField.view
+                    , div [ class "hint" ] [ text "Copy and paste this command into UCM." ]
+                    ]
+                )
+    in
+    Modal.modal "download-modal" CloseModal content
+        |> Modal.withHeader ("Download " ++ prettyName)
+        |> Modal.view
+
+
 viewHelpModal : OperatingSystem -> KeyboardShortcut.Model -> Html Msg
 viewHelpModal os keyboardShortcut =
     let
@@ -770,6 +815,9 @@ viewModal model =
         ReportBugModal ->
             viewReportBugModal model.env.appContext
 
+        DownloadModal fqn ->
+            viewDownloadModal fqn
+
 
 viewAppLoading : AppContext -> Html msg
 viewAppLoading appContext =

src/UI.elm

@@ -1,6 +1,6 @@
 module UI exposing (..)
 
-import Html exposing (Attribute, Html, code, div, hr, pre, span, text)
+import Html exposing (Attribute, Html, code, div, hr, pre, span, strong, text)
 import Html.Attributes exposing (class)
 import Html.Events exposing (onClick)
 import UI.Icon as Icon
@@ -11,6 +11,11 @@ codeBlock attrs code_ =
     pre attrs [ code [] [ code_ ] ]
 
 
+bold : String -> Html msg
+bold text_ =
+    strong [] [ text text_ ]
+
+
 inlineCode : List (Attribute msg) -> Html msg -> Html msg
 inlineCode attrs code_ =
     code (class "inline-code" :: attrs) [ code_ ]
@@ -60,7 +65,7 @@ emptyStateMessage message =
 
 divider : Html msg
 divider =
-    hr [] []
+    hr [ class "divider" ] []
 
 
 charWidth : Int -> String

src/UI/CopyField.elm

@@ -0,0 +1,69 @@
+module UI.CopyField exposing (..)
+
+import Html exposing (Html, button, div, input, node, text)
+import Html.Attributes exposing (attribute, class, readonly, type_, value)
+import UI
+import UI.Icon as Icon
+
+
+type alias CopyField msg =
+    { prefix : Maybe String
+    , toCopy : String
+    , onCopy : String -> msg
+    }
+
+
+copyField : (String -> msg) -> String -> CopyField msg
+copyField onCopy toCopy =
+    { prefix = Nothing, toCopy = toCopy, onCopy = onCopy }
+
+
+withPrefix : String -> CopyField msg -> CopyField msg
+withPrefix prefix field =
+    { field | prefix = Just prefix }
+
+
+withToCopy : String -> CopyField msg -> CopyField msg
+withToCopy toCopy field =
+    { field | toCopy = toCopy }
+
+
+view : CopyField msg -> Html msg
+view field =
+    let
+        prefix =
+            field.prefix
+                |> Maybe.map (\p -> div [ class "copy-field-prefix" ] [ text p ])
+                |> Maybe.withDefault UI.nothing
+    in
+    div [ class "copy-field" ]
+        [ div [ class "copy-field-field" ]
+            [ prefix
+            , div
+                [ class "copy-field-input" ]
+                [ input
+                    [ type_ "text"
+                    , class "copy-field-to-copy"
+                    , value field.toCopy
+                    , readonly True
+                    ]
+                    []
+                ]
+            ]
+        , copyButton field.toCopy
+        ]
+
+
+
+-- HELPERS --------------------------------------------------------------------
+
+
+{-| We're not using UI.Button here since a click handler is added from
+the webcomponent in JS land.
+-}
+copyButton : String -> Html msg
+copyButton toCopy =
+    node "copy-on-click"
+        [ attribute "text" toCopy ]
+        [ button [ class "button contained default" ] [ Icon.view Icon.clipboard ]
+        ]

src/UI/CopyOnClick.js

@@ -0,0 +1,27 @@
+// <copy-on-click text="text-to-copy">
+//   clickable content
+// </copy-on-click>
+//
+// Use from Elm with an Icon:
+// node "copy-on-click" [ ] [ UI.Icon.view UI.Icon.clipboard ]
+class CopyOnClick extends HTMLElement {
+  constructor() {
+    super();
+  }
+
+  connectedCallback() {
+    this.addEventListener("click", () => {
+      const text = this.getAttribute("text");
+
+      // writeText returns a promise with success/failure that we should
+      // probably do something with...
+      navigator.clipboard.writeText(text);
+    });
+  }
+
+  static get observedAttributes() {
+    return ["text"];
+  }
+}
+
+customElements.define("copy-on-click", CopyOnClick);

src/UI/Icon.elm

@@ -370,3 +370,12 @@ tagsOutlined =
         , path [ fill "currentColor", fillRule "evenodd", d "M8.62836 2.16552C8.81309 1.96026 9.12923 1.94362 9.33449 2.12835L13.6332 5.99715C14.2238 6.52872 14.2974 7.42865 13.801 8.04914L10.3904 12.3123C10.2179 12.528 9.90329 12.5629 9.68766 12.3904C9.47203 12.2179 9.43707 11.9033 9.60957 11.6877L13.0201 7.42444C13.1856 7.21761 13.1611 6.91763 12.9642 6.74045L8.66552 2.87165C8.46027 2.68692 8.44363 2.37077 8.62836 2.16552Z" ] []
         , circle [ cx "4", cy "5", r "1.5", stroke "currentColor", fill "transparent" ] []
         ]
+
+
+clipboard : Icon msg
+clipboard =
+    Icon "clipboard"
+        []
+        [ path [ fill "currentColor", fillRule "evenodd", d "M8 2.25C8 2.11193 7.88807 2 7.75 2H6.25C6.11193 2 6 2.11193 6 2.25V2.75C6 2.88807 6.11193 3 6.25 3H7.75C7.88807 3 8 2.88807 8 2.75V2.25ZM6 1C5.44772 1 5 1.44772 5 2V3C5 3.55228 5.44772 4 6 4H8C8.55228 4 9 3.55228 9 3V2C9 1.44772 8.55228 1 8 1H6Z" ] []
+        , path [ fill "currentColor", fillRule "evenodd", d "M3 2.5C3 2.22386 3.22386 2 3.5 2C3.77614 2 4 2.22386 4 2.5V10.5C4 10.7761 4.22386 11 4.5 11H9.5C9.77614 11 10 10.7761 10 10.5V2.5C10 2.22386 10.2239 2 10.5 2C10.7761 2 11 2.22386 11 2.5V11C11 11.5523 10.5523 12 10 12H4C3.44772 12 3 11.5523 3 11V2.5Z" ] []
+        ]

src/UI/Sidebar.elm

@@ -1,19 +1,29 @@
 module UI.Sidebar exposing (..)
 
-import Html exposing (Html, a, aside, h3, label, text)
+import Html exposing (Attribute, Html, a, aside, div, h3, label, text)
 import Html.Attributes exposing (class, id)
 import Html.Events exposing (onClick)
 
 
+header : List (Html msg) -> Html msg
+header content =
+    Html.header [ class "sidebar-header" ] content
+
+
+headerItem : List (Attribute msg) -> List (Html msg) -> Html msg
+headerItem attrs content =
+    div (attrs ++ [ class "sidebar-header-item" ]) content
+
+
 section : String -> List (Html msg) -> Html msg
 section label content =
     Html.section [ class "sidebar-section" ]
-        (header label :: content)
+        (sectionTitle label :: content)
 
 
-header : String -> Html msg
-header label =
-    h3 [ class "sidebar-header" ] [ text label ]
+sectionTitle : String -> Html msg
+sectionTitle label =
+    h3 [ class "sidebar-section-title" ] [ text label ]
 
 
 item : msg -> String -> Html msg